Skip to content

Commit

Permalink
#1744 Palette icon should show selected (blue underline) highlighting… (
Browse files Browse the repository at this point in the history 
#1745)
  • Loading branch information
@tomlyn
tomlyn authored Mar 8, 2024
1 parent a412e9f commit fe0fc41
Show file tree
Hide file tree
Showing 7 changed files with 45 additions and 37 deletions.
48 changes: 24 additions & 24 deletions canvas_modules/common-canvas/__tests__/notification-panel/notification-panel-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,39 +365,39 @@ describe("toolbar notification icon state renders correctly", () => {
wrapper.update();
let notificationIcon = wrapper.find(".toggleNotificationPanel-action");
expect(notificationIcon).to.have.length(1);
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1);

canvasController.setNotificationMessages([notificationMessage0, notificationMessage1]);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action");
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.success")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.success")).to.have.length(1);

canvasController.setNotificationMessages([notificationMessage0, notificationMessage1, notificationMessage2]);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action");
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.warning")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.warning")).to.have.length(1);

canvasController.setNotificationMessages(notificationMessages);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action");
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.error")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.error")).to.have.length(1);

expect(canvasController.getNotificationMessages().length).to.equal(4);

canvasController.setNotificationMessages([notificationMessage0, notificationMessage1, notificationMessage2]);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action");
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.warning")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.warning")).to.have.length(1);

canvasController.setNotificationMessages([notificationMessage0, notificationMessage1]);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action");
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.success")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.success")).to.have.length(1);

canvasController.setNotificationMessages([notificationMessage0]);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action");
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1);
canvasController.setNotificationMessages([]);
wrapper.update();
// TODO need to fix
Expand Down Expand Up @@ -436,30 +436,30 @@ describe("notification counter and color updates correctly", () => {
canvasController
);
let notificationIcon = wrapper.find(".toggleNotificationPanel-action");
let notificationCounter = notificationIcon.find(".toolbar-item-content.notificationCounterIcon > .toolbar-text-content");
let notificationCounter = notificationIcon.find(".toolbar-item.notificationCounterIcon .toolbar-text-content");
expect(notificationCounter.text()).to.equal(" 0 ");
canvasController.setNotificationMessages([notificationMessage0]);

wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action");
notificationCounter = notificationIcon.find(".toolbar-item-content.notificationCounterIcon > .toolbar-text-content");
notificationCounter = notificationIcon.find(".toolbar-item.notificationCounterIcon .toolbar-text-content");
expect(notificationIcon).to.have.length(1);
expect(notificationCounter.text()).to.equal(" 1 ");
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1);
canvasController.setNotificationMessages(Array(9).fill(notificationMessage0));

wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action");
notificationCounter = notificationIcon.find(".toolbar-item-content.notificationCounterIcon > .toolbar-text-content");
notificationCounter = notificationIcon.find(".toolbar-item.notificationCounterIcon .toolbar-text-content");
expect(notificationCounter.text()).to.equal(" 9 ");
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1);
canvasController.setNotificationMessages(Array(10).fill(notificationMessage0));

wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action");
notificationCounter = notificationIcon.find(".toolbar-item-content.notificationCounterIcon > .toolbar-text-content");
notificationCounter = notificationIcon.find(".toolbar-item.notificationCounterIcon .toolbar-text-content");
expect(notificationCounter.text()).to.equal(" 9+ ");
expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1);
expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1);
});

it("notification dot updates to indicate the correct message type", () => {
Expand All @@ -481,33 +481,33 @@ describe("notification counter and color updates correctly", () => {
canvasController
);

let notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content");
let notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action");
let indicatorClasses = notificationIcon.prop("className");
expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon default");
expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon");

canvasController.setNotificationMessages([notificationMessage0]);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content");
notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action");
indicatorClasses = notificationIcon.prop("className");
expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon info default");
expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon info");

canvasController.setNotificationMessages([notificationMessage0, notificationMessage1]);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content");
notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action");
indicatorClasses = notificationIcon.prop("className");
expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon success default");
expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon success");

canvasController.setNotificationMessages([notificationMessage0, notificationMessage1, notificationMessage2]);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content");
notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action");
indicatorClasses = notificationIcon.prop("className");
expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon warning default");
expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon warning");

canvasController.setNotificationMessages([notificationMessage0, notificationMessage1, notificationMessage2, notificationMessage3]);
wrapper.update();
notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content");
notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action");
indicatorClasses = notificationIcon.prop("className");
expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon error default");
expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon error");
});
});

Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/common-canvas/src/common-canvas/canvas-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2326,7 +2326,7 @@ export default class CanvasController {
this.objectModel.setZoom(data.zoom, data.pipelineId);
break;
}
case "togglePalette": {
case "paletteToggle": {
this.togglePalette();
break;
}
Expand Down
13 changes: 9 additions & 4 deletions canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ import Toolbar from "../toolbar/toolbar.jsx";
import Logger from "../logging/canvas-logger.js";
import NotificationPanel from "../notification-panel/notification-panel.jsx";
import { ERROR, WARNING, SUCCESS, INFO, PALETTE_LAYOUT_NONE,
NOTIFICATION_ICON_CLASS, TOOLBAR_TOGGLE_NOTIFICATION_PANEL, TOOLBAR_LAYOUT_TOP }
NOTIFICATION_ICON_CLASS, TOOLBAR_TOGGLE_NOTIFICATION_PANEL, TOOLBAR_LAYOUT_TOP,
TOOLBAR_TOGGLE_PALETTE }
from "../common-canvas/constants/canvas-constants";

class CommonCanvasToolbar extends React.Component {
Expand Down Expand Up @@ -164,9 +165,13 @@ class CommonCanvasToolbar extends React.Component {

// Add the new togglePalette icon if the palette is enabled.
if (this.props.isPaletteEnabled) {
const paletteOpenClose = this.props.isPaletteOpen
? { action: "paletteClose", label: paletteLabel, enable: true }
: { action: "paletteOpen", label: paletteLabel, enable: true };
// Applications may need to detect these legacy classes to detect which action
// is to be performed. So add them as additional classes. Also, jest tests require them.
const className = this.props.isPaletteOpen ? "paletteClose-action" : "paletteOpen-action";

const paletteOpenClose =
{ action: TOOLBAR_TOGGLE_PALETTE, label: paletteLabel, enable: true,
isSelected: this.props.isPaletteOpen, className };

const paletteTools = [
paletteOpenClose,
Expand Down
10 changes: 5 additions & 5 deletions canvas_modules/common-canvas/src/common-canvas/common-canvas.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,17 +295,17 @@ $panel-border-color: $ui-03;
border-width: 2px;
}

.toolbar-item-content.notificationCounterIcon {
&.error > div > svg > .dot {
.toolbar-item.notificationCounterIcon {
&.error .toolbar-icon .dot {
fill: $support-01;
}
&.warning > div > svg > .dot {
&.warning .toolbar-icon .dot {
fill: $support-03;
}
&.success > div > svg > .dot {
&.success .toolbar-icon .dot {
fill: $support-02;
}
&.info > div > svg > .dot {
&.info .toolbar-icon .dot {
fill: $support-04;
}
}
Expand Down
1 change: 1 addition & 0 deletions canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@ export const TOOLBAR_ARRANGE_VERTICALLY = "arrangeVertically";
export const TOOLBAR_TOGGLE_NOTIFICATION_PANEL = "toggleNotificationPanel";
export const TOOLBAR_OPEN_PALETTE = "paletteOpen";
export const TOOLBAR_CLOSE_PALETTE = "paletteClose";
export const TOOLBAR_TOGGLE_PALETTE = "paletteToggle";
export const TOOLBAR_EXPAND_SUPERNODE_IN_PLACE = "expandSuperNodeInPlace";
export const TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE = "collapseSuperNodeInPlace";
export const TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE = "displaySubPipeline";
Expand Down
3 changes: 2 additions & 1 deletion canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,8 @@ class ToolbarActionItem extends React.Component {
"toolbar-item-selected": actionObj.isSelected
},
kindAsClass,
actionName);
actionName,
this.props.actionObj.className);

const subArea = this.isSubAreaDisplayed() ? this.generateSubArea() : null;

Expand Down
5 changes: 3 additions & 2 deletions canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO,
TOOLBAR_DELETE_SELECTED_OBJECTS, TOOLBAR_DELETE_LINK,
TOOLBAR_ZOOM_IN, TOOLBAR_ZOOM_OUT, TOOLBAR_ZOOM_FIT,
TOOLBAR_ARRANGE_HORIZONALLY, TOOLBAR_ARRANGE_VERTICALLY,
TOOLBAR_OPEN_PALETTE, TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
TOOLBAR_OPEN_PALETTE, TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
TOOLBAR_SHOW_COMMENTS, TOOLBAR_HIDE_COMMENTS,
TOOLBAR_EXPAND_SUPERNODE_IN_PLACE, TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE,
TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE, TOOLBAR_SET_NODE_LABEL_EDIT, TOOLBAR_SET_COMMENT_EDIT_MODE }
Expand Down Expand Up @@ -117,6 +117,8 @@ class ToolbarButtonItem extends React.Component {
return <OpenPanelFilledLeft16 disabled={disabled} />;
case (TOOLBAR_CLOSE_PALETTE):
return <OpenPanelFilledLeft16 disabled={disabled} />;
case (TOOLBAR_TOGGLE_PALETTE):
return <OpenPanelFilledLeft16 disabled={disabled} />;

// Non-carbon icons
case (TOOLBAR_ARRANGE_HORIZONALLY):
Expand Down Expand Up @@ -195,7 +197,6 @@ class ToolbarButtonItem extends React.Component {

const itemContentClassName = classNames(
"toolbar-item-content",
actionObj.className ? actionObj.className : null,
{ "overflow": this.props.isInMenu, "disabled": !actionObj.enable, "default": !actionObj.kind });

// If no 'kind' is set, use ghost and then override colors using the "default" class in innerDivClassName.
Expand Down

0 comments on commit fe0fc41

Please sign in to comment.