From aeb317f6de5fdfc568959f24269408bb370ea11d Mon Sep 17 00:00:00 2001 From: CTomlyn Date: Sat, 2 Mar 2024 16:54:27 -0800 Subject: [PATCH] #1728 Use carbon icons in place of hand-crafted icons Signed-off-by: CTomlyn --- .../assets/images/palette/close_32.svg | 1 - .../assets/images/palette/palette_close.svg | 4 - .../palette/palette_grid_deselected.svg | 2 - .../images/palette/palette_grid_hover.svg | 2 - .../images/palette/palette_grid_selected.svg | 2 - .../palette/palette_list_deselected.svg | 1 - .../images/palette/palette_list_hover.svg | 1 - .../images/palette/palette_list_selected.svg | 1 - .../assets/images/palette/palette_open.svg | 4 - .../assets/images/zoom_to_fit.svg | 8 -- .../palette-dialog-topbar-three-way-icon.jsx | 82 ------------------- .../src/palette/palette-dialog-topbar.jsx | 65 ++++++--------- .../common-canvas/src/palette/palette.scss | 42 +--------- .../src/toolbar/toolbar-button-item.jsx | 19 ++--- 14 files changed, 38 insertions(+), 196 deletions(-) delete mode 100644 canvas_modules/common-canvas/assets/images/palette/close_32.svg delete mode 100644 canvas_modules/common-canvas/assets/images/palette/palette_close.svg delete mode 100644 canvas_modules/common-canvas/assets/images/palette/palette_grid_deselected.svg delete mode 100644 canvas_modules/common-canvas/assets/images/palette/palette_grid_hover.svg delete mode 100644 canvas_modules/common-canvas/assets/images/palette/palette_grid_selected.svg delete mode 100644 canvas_modules/common-canvas/assets/images/palette/palette_list_deselected.svg delete mode 100644 canvas_modules/common-canvas/assets/images/palette/palette_list_hover.svg delete mode 100644 canvas_modules/common-canvas/assets/images/palette/palette_list_selected.svg delete mode 100644 canvas_modules/common-canvas/assets/images/palette/palette_open.svg delete mode 100644 canvas_modules/common-canvas/assets/images/zoom_to_fit.svg delete mode 100644 canvas_modules/common-canvas/src/palette/palette-dialog-topbar-three-way-icon.jsx diff --git a/canvas_modules/common-canvas/assets/images/palette/close_32.svg b/canvas_modules/common-canvas/assets/images/palette/close_32.svg deleted file mode 100644 index af54203949..0000000000 --- a/canvas_modules/common-canvas/assets/images/palette/close_32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/canvas_modules/common-canvas/assets/images/palette/palette_close.svg b/canvas_modules/common-canvas/assets/images/palette/palette_close.svg deleted file mode 100644 index 5bcb777386..0000000000 --- a/canvas_modules/common-canvas/assets/images/palette/palette_close.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/canvas_modules/common-canvas/assets/images/palette/palette_grid_deselected.svg b/canvas_modules/common-canvas/assets/images/palette/palette_grid_deselected.svg deleted file mode 100644 index d1215d0f20..0000000000 --- a/canvas_modules/common-canvas/assets/images/palette/palette_grid_deselected.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/canvas_modules/common-canvas/assets/images/palette/palette_grid_hover.svg b/canvas_modules/common-canvas/assets/images/palette/palette_grid_hover.svg deleted file mode 100644 index bb3289f53b..0000000000 --- a/canvas_modules/common-canvas/assets/images/palette/palette_grid_hover.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/canvas_modules/common-canvas/assets/images/palette/palette_grid_selected.svg b/canvas_modules/common-canvas/assets/images/palette/palette_grid_selected.svg deleted file mode 100644 index d9819af293..0000000000 --- a/canvas_modules/common-canvas/assets/images/palette/palette_grid_selected.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/canvas_modules/common-canvas/assets/images/palette/palette_list_deselected.svg b/canvas_modules/common-canvas/assets/images/palette/palette_list_deselected.svg deleted file mode 100644 index c250d56c45..0000000000 --- a/canvas_modules/common-canvas/assets/images/palette/palette_list_deselected.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/canvas_modules/common-canvas/assets/images/palette/palette_list_hover.svg b/canvas_modules/common-canvas/assets/images/palette/palette_list_hover.svg deleted file mode 100644 index 2f6d3514aa..0000000000 --- a/canvas_modules/common-canvas/assets/images/palette/palette_list_hover.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/canvas_modules/common-canvas/assets/images/palette/palette_list_selected.svg b/canvas_modules/common-canvas/assets/images/palette/palette_list_selected.svg deleted file mode 100644 index b1951fe1b3..0000000000 --- a/canvas_modules/common-canvas/assets/images/palette/palette_list_selected.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/canvas_modules/common-canvas/assets/images/palette/palette_open.svg b/canvas_modules/common-canvas/assets/images/palette/palette_open.svg deleted file mode 100644 index c014520ad3..0000000000 --- a/canvas_modules/common-canvas/assets/images/palette/palette_open.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/canvas_modules/common-canvas/assets/images/zoom_to_fit.svg b/canvas_modules/common-canvas/assets/images/zoom_to_fit.svg deleted file mode 100644 index 4cb7e256f9..0000000000 --- a/canvas_modules/common-canvas/assets/images/zoom_to_fit.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/canvas_modules/common-canvas/src/palette/palette-dialog-topbar-three-way-icon.jsx b/canvas_modules/common-canvas/src/palette/palette-dialog-topbar-three-way-icon.jsx deleted file mode 100644 index 4bfb5c84d2..0000000000 --- a/canvas_modules/common-canvas/src/palette/palette-dialog-topbar-three-way-icon.jsx +++ /dev/null @@ -1,82 +0,0 @@ -/* - * Copyright 2017-2023 Elyra Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React from "react"; -import PropTypes from "prop-types"; - -class PaletteDialogTopbarThreeWayIcon extends React.Component { - constructor(props) { - super(props); - - this.state = { - hover: false - }; - - this.iconClicked = this.iconClicked.bind(this); - this.mouseEnter = this.mouseEnter.bind(this); - this.mouseLeave = this.mouseLeave.bind(this); - this.mouseDown = this.mouseDown.bind(this); - } - - iconClicked() { - this.props.iconClickedMethod(); - } - - mouseEnter() { - this.setState({ hover: true }); - } - - mouseLeave() { - this.setState({ hover: false }); - } - - mouseDown(mouseDownEvent) { - mouseDownEvent.stopPropagation(); - } - - render() { - let icon = this.props.selectedIconName; - - if (!this.props.isSelected) { - if (this.state.hover) { - icon = this.props.hoverIconName; - } else { - icon = this.props.deselectedIconName; - } - } - - return ( -
- -
- ); - } -} - -PaletteDialogTopbarThreeWayIcon.propTypes = { - iconClickedMethod: PropTypes.func.isRequired, - isSelected: PropTypes.bool.isRequired, - selectedIconName: PropTypes.string.isRequired, - hoverIconName: PropTypes.string.isRequired, - deselectedIconName: PropTypes.string.isRequired -}; - -export default PaletteDialogTopbarThreeWayIcon; diff --git a/canvas_modules/common-canvas/src/palette/palette-dialog-topbar.jsx b/canvas_modules/common-canvas/src/palette/palette-dialog-topbar.jsx index c48e3ee17a..8597829724 100644 --- a/canvas_modules/common-canvas/src/palette/palette-dialog-topbar.jsx +++ b/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: (), enable: true, isSelected: this.props.showGrid }, + { action: "list", iconEnabled: (), enable: true, isSelected: !this.props.showGrid }, + { divider: true } + ], + rightBar: [ + { divider: true }, + { action: "close", iconEnabled: (), enable: true } + ] + }; + + return (
- - - - - - - - - +
); } diff --git a/canvas_modules/common-canvas/src/palette/palette.scss b/canvas_modules/common-canvas/src/palette/palette.scss index e16aa8b0a4..897d859327 100644 --- a/canvas_modules/common-canvas/src/palette/palette.scss +++ b/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; diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx index 951b9bbc9b..f297f8a0ee 100644 --- a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx +++ b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx @@ -21,9 +21,6 @@ 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"; @@ -31,7 +28,8 @@ 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 ; case (TOOLBAR_ZOOM_OUT): return ; - case (TOOLBAR_ZOOM_FIT): - return ; + return ; + case (TOOLBAR_OPEN_PALETTE): + return ; + case (TOOLBAR_CLOSE_PALETTE): + return ; + + // Non-carbon icons case (TOOLBAR_ARRANGE_HORIZONALLY): return ; case (TOOLBAR_ARRANGE_VERTICALLY): return ; - case (TOOLBAR_OPEN_PALETTE): - return ; - case (TOOLBAR_CLOSE_PALETTE): - return ; case (TOOLBAR_TOGGLE_NOTIFICATION_PANEL): return ;