#1728 Use carbon icons in place of hand-crafted icons

Signed-off-by: CTomlyn <[email protected]>

canvas_modules/common-canvas/src/palette/palette-dialog-topbar.jsx

@@ -16,14 +16,10 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import PaletteDialogTopbarThreeWayIcon from "./palette-dialog-topbar-three-way-icon.jsx";
-import Close32Icon from "../../assets/images/palette/close_32.svg";
-import PaletteGridSelectedIcon from "../../assets/images/palette/palette_grid_selected.svg";
-import PaletteGridHoverIcon from "../../assets/images/palette/palette_grid_hover.svg";
-import PaletteGridDeSelectedIcon from "../../assets/images/palette/palette_grid_deselected.svg";
-import PaletteListSelectedIcon from "../../assets/images/palette/palette_list_selected.svg";
-import PaletteListHoverIcon from "../../assets/images/palette/palette_list_hover.svg";
-import PaletteListDeSelectedIcon from "../../assets/images/palette/palette_list_deselected.svg";
+
+import { CloseOutline16, Grid16, List16 } from "@carbon/icons-react";
+
+import Toolbar from "../toolbar";
 
 class PaletteDialogTopbar extends React.Component {
 	constructor(props) {
@@ -34,9 +30,7 @@ class PaletteDialogTopbar extends React.Component {
 
 		this.mouseDown = this.mouseDown.bind(this);
 		this.doubleClick = this.doubleClick.bind(this);
-		this.close = this.close.bind(this);
-		this.gridViewSelected = this.gridViewSelected.bind(this);
-		this.listViewSelected = this.listViewSelected.bind(this);
+		this.toolbarActionHandler = this.toolbarActionHandler.bind(this);
 	}
 
 	mouseDown(mouseDownEvent) {
@@ -47,40 +41,35 @@ class PaletteDialogTopbar extends React.Component {
 		this.props.windowMaximizeMethod(doubleClickEvent);
 	}
 
-	close(closeEvent) {
-		this.props.canvasController.closePalette(closeEvent);
-	}
+	toolbarActionHandler(action) {
+		if (action === "close") {
+			this.props.canvasController.closePalette();
 
-	gridViewSelected() {
-		this.props.showGridMethod(true);
-	}
+		} else if (action === "grid") {
+			this.props.showGridMethod(true);
 
-	listViewSelected() {
-		this.props.showGridMethod(false);
+		} else if (action === "list") {
+			this.props.showGridMethod(false);
+		}
 	}
 
 	render() {
+		const config = {
+			leftBar: [
+				{ action: "grid", iconEnabled: (<Grid16 />), enable: true, isSelected: this.props.showGrid },
+				{ action: "list", iconEnabled: (<List16 />), enable: true, isSelected: !this.props.showGrid },
+				{ divider: true }
+			],
+			rightBar: [
+				{ divider: true },
+				{ action: "close", iconEnabled: (<CloseOutline16 />), enable: true }
+			]
+		};
+
+
 		return (
 			<div className="palette-dialog-topbar" onMouseDown={this.mouseDown} onDoubleClick={this.doubleClick}>
-				<span className="left-navbar">
-					<PaletteDialogTopbarThreeWayIcon iconClickedMethod={this.gridViewSelected}
-						isSelected={this.props.showGrid}
-						selectedIconName={PaletteGridSelectedIcon}
-						hoverIconName={PaletteGridHoverIcon}
-						deselectedIconName={PaletteGridDeSelectedIcon}
-					/>
-					<PaletteDialogTopbarThreeWayIcon iconClickedMethod={this.listViewSelected}
-						isSelected={!this.props.showGrid}
-						selectedIconName={PaletteListSelectedIcon}
-						hoverIconName={PaletteListHoverIcon}
-						deselectedIconName={PaletteListDeSelectedIcon}
-					/>
-				</span>
-				<span className="right-navbar">
-					<a className="secondary-action" onClick={this.close}>
-						<img src={Close32Icon} draggable="false" className="close-icon" />
-					</a>
-				</span>
+				<Toolbar instanceId = {0} config={config} toolbarActionHandler={this.toolbarActionHandler} />
 			</div>
 		);
 	}

canvas_modules/common-canvas/src/palette/palette.scss

@@ -414,47 +414,9 @@ $palette-search-container-height: 41px;
 }
 
 .palette-dialog-topbar {
-	height: 40px;
-	padding: 10px;
+	height: 41px;
 	background-color: $ui-03;
 	border-bottom: $palette-border-width solid $palette-border-color;
-
-	.left-navbar {
-		height: 20px;
-		float: left;
-		vertical-align: middle;
-		/* Prevent elements from being selectable */
-		/* This stops it being dragged incorrectly.*/
-		user-select: none;
-	}
-
-	.right-navbar {
-		height: 20px;
-		float: right;
-		vertical-align: middle;
-	}
-
-	.secondary-action {
-		margin-left: 10px;
-		display: inline-block;
-		cursor: pointer;
-		width: 20px;
-	}
-
-	.close-icon svg {
-		fill: $interactive-02;
-	}
-
-	.palette-three-way-icon-div {
-		margin-left: 5px;
-		display: inline-block;
-		cursor: pointer;
-		width: 20px;
-		height: 20px;
-		/* Prevent elements from being selectable */
-		/* This stops it being dragged incorrectly.*/
-		user-select: none;
-	}
 }
 
 .palette-dialog-content {
@@ -466,7 +428,7 @@ $palette-search-container-height: 41px;
 }
 
 .palette-dialog-categories {
-	background-color: $ui-03;
+	background-color: $ui-01;
 	width: 130px;
 	min-width: 130px; /* Set a min-width to ensure space for the scroll bar when it is displayed */
 	border-right: $palette-border-width solid $palette-border-color;

canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx

@@ -21,17 +21,15 @@ import Tooltip from "../tooltip/tooltip.jsx";
 import ArrangeHorizontally from "./../../assets/images/arrange_horizontally.svg";
 import ArrangeVertically from "./../../assets/images/arrange_vertically.svg";
 import ToggleNotificationPanel from "./../../assets/images/notification_counter_icon.svg";
-import PaletteClose from "./../../assets/images/palette/palette_close.svg";
-import PaletteOpen from "./../../assets/images/palette/palette_open.svg";
-import ZoomToFit from "./../../assets/images/zoom_to_fit.svg";
 
 import { Button } from "carbon-components-react";
 import SVG from "react-inlinesvg";
 import classNames from "classnames";
 import { StopFilledAlt16, Play16, Undo16, Redo16, Chat16, ChatOff16, Result16,
 	Cut16, Copy16, Paste16, Edit16,	ColorPalette16, Maximize16, Minimize16,
 	Launch16, AddComment16, TrashCan16, ZoomIn16, ZoomOut16,
-	ChevronRight16, ChevronDown16, ChevronUp16 } from "@carbon/icons-react";
+	ChevronRight16, ChevronDown16, ChevronUp16,
+	CenterToFit16, OpenPanelFilledLeft16 } from "@carbon/icons-react";
 import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO,
 	TOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CLIPBOARD,
 	TOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT, TOOLBAR_COLOR_BACKGROUND,
@@ -113,17 +111,18 @@ class ToolbarButtonItem extends React.Component {
 			return <ZoomIn16 disabled={disabled} />;
 		case (TOOLBAR_ZOOM_OUT):
 			return <ZoomOut16 disabled={disabled} />;
-
 		case (TOOLBAR_ZOOM_FIT):
-			return <SVG src={ZoomToFit} disabled={disabled} />;
+			return <CenterToFit16 disabled={disabled} />;
+		case (TOOLBAR_OPEN_PALETTE):
+			return <OpenPanelFilledLeft16 disabled={disabled} />;
+		case (TOOLBAR_CLOSE_PALETTE):
+			return <OpenPanelFilledLeft16 disabled={disabled} />;
+
+		// Non-carbon icons
 		case (TOOLBAR_ARRANGE_HORIZONALLY):
 			return <SVG src={ArrangeHorizontally} disabled={disabled} />;
 		case (TOOLBAR_ARRANGE_VERTICALLY):
 			return <SVG src={ArrangeVertically} disabled={disabled} />;
-		case (TOOLBAR_OPEN_PALETTE):
-			return <SVG src={PaletteOpen} disabled={disabled} />;
-		case (TOOLBAR_CLOSE_PALETTE):
-			return <SVG src={PaletteClose} disabled={disabled} />;
 		case (TOOLBAR_TOGGLE_NOTIFICATION_PANEL):
 			return <SVG src={ToggleNotificationPanel} disabled={disabled} />;