diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 08bfead57..e3767bd00 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -58,7 +58,7 @@ } } - .sub-menu-item { + .icon-menu-item { display: flex; justify-content: flex-start; diff --git a/frontend/src/app/main/ui/components/shape_icon.cljs b/frontend/src/app/main/ui/components/shape_icon.cljs new file mode 100644 index 000000000..0a54feeae --- /dev/null +++ b/frontend/src/app/main/ui/components/shape_icon.cljs @@ -0,0 +1,34 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) UXBOX Labs SL + +(ns app.main.ui.components.shape-icon + (:require + [app.main.ui.icons :as i] + [rumext.alpha :as mf])) + + +(mf/defc element-icon + [{:keys [shape] :as props}] + (case (:type shape) + :frame i/artboard + :image i/image + :line i/line + :circle i/circle + :path i/curve + :rect i/box + :text i/text + :group (if (some? (:component-id shape)) + i/component + (if (:masked-group? shape) + i/mask + i/folder)) + :bool (case (:bool-type shape) + :difference i/bool-difference + :exclude i/bool-exclude + :intersection i/bool-intersection + #_:default i/bool-union) + :svg-raw i/file-svg + nil)) diff --git a/frontend/src/app/main/ui/viewer/handoff/left_sidebar.cljs b/frontend/src/app/main/ui/viewer/handoff/left_sidebar.cljs index 6dd87c2a7..4319c262d 100644 --- a/frontend/src/app/main/ui/viewer/handoff/left_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/left_sidebar.cljs @@ -9,8 +9,9 @@ [app.common.data :as d] [app.main.data.viewer :as dv] [app.main.store :as st] + [app.main.ui.components.shape-icon :as si] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.layers :refer [element-icon layer-name]] + [app.main.ui.workspace.sidebar.layers :refer [layer-name]] [app.util.dom :as dom] [app.util.keyboard :as kbd] [okulary.core :as l] @@ -70,7 +71,7 @@ [:div.element-list-body {:class (dom/classnames :selected selected? :icon-layer (= (:type item) :icon)) :on-click select-shape} - [:& element-icon {:shape item}] + [:& si/element-icon {:shape item}] [:& layer-name {:shape item}] (when (and (not disable-collapse?) (:shapes item)) diff --git a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs index 0cbf82a79..53b4895a8 100644 --- a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs @@ -7,12 +7,12 @@ (ns app.main.ui.viewer.handoff.right-sidebar (:require [app.common.data :as d] + [app.main.ui.components.shape-icon :as si] [app.main.ui.components.tab-container :refer [tab-container tab-element]] [app.main.ui.icons :as i] [app.main.ui.viewer.handoff.attributes :refer [attributes]] [app.main.ui.viewer.handoff.code :refer [code]] [app.main.ui.viewer.handoff.selection-feedback :refer [resolve-shapes]] - [app.main.ui.workspace.sidebar.layers :refer [element-icon]] [app.util.i18n :refer [tr]] [rumext.alpha :as mf])) @@ -44,7 +44,7 @@ [:span.tool-window-bar-title (tr "handoff.tabs.code.selected.multiple" (count shapes))]] [:* [:span.tool-window-bar-icon - [:& element-icon {:shape first-shape}]] + [:& si/element-icon {:shape first-shape}]] [:span.tool-window-bar-title (->> selected-type d/name (str "handoff.tabs.code.selected.") (tr))]]) ] [:div.tool-window-content diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 20b8772f1..0f1605b1a 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -18,6 +18,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] + [app.main.ui.components.shape-icon :as si] [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] @@ -35,32 +36,10 @@ (dom/stop-propagation event)) -(mf/defc element-icon - [{:keys [shape] :as props}] - (case (:type shape) - :frame i/artboard - :image i/image - :line i/line - :circle i/circle - :path i/curve - :rect i/box - :text i/text - :group (if (some? (:component-id shape)) - i/component - (if (:masked-group? shape) - i/mask - i/folder)) - :bool (case (:bool-type shape) - :difference i/bool-difference - :exclude i/bool-exclude - :intersection i/bool-intersection - #_:default i/bool-union) - :svg-raw i/file-svg - nil)) (mf/defc menu-entry - [{:keys [title shortcut on-click children selected has-icon? shape] :as props}] + [{:keys [title shortcut on-click children selected? icon] :as props}] (let [submenu-ref (mf/use-ref nil) hovering? (mf/use-ref false) @@ -90,16 +69,15 @@ (when (and (some? dom) (some? submenu-node)) (dom/set-css-property! submenu-node "top" (str (.-offsetTop dom) "px"))))))] - (if has-icon? - [:li.sub-menu-item {:ref set-dom-node - :on-click on-click - :on-pointer-enter on-pointer-enter - :on-pointer-leave on-pointer-leave} - (when has-icon? - [:span.icon-wrapper - (if selected [:span.selected-icon i/tick] - [:span.selected-icon]) - [:span.shape-icon (element-icon {:shape shape})]]) + (if icon + [:li.icon-menu-item {:ref set-dom-node + :on-click on-click + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave} + [:span.icon-wrapper + (if selected? [:span.selected-icon i/tick] + [:span.selected-icon]) + [:span.shape-icon icon]] [:span.title title]] [:li {:ref set-dom-node :on-click on-click @@ -156,10 +134,9 @@ [:& menu-entry {:title (tr "workspace.shape.menu.select-layer")} (for [object hover-objs] [:& menu-entry {:title (:name object) - :selected (some #(= object %) shapes) + :selected? (some #(= object %) shapes) :on-click (select-shapes (:id object)) - :has-icon? true - :shape object}])]) + :icon (si/element-icon {:shape object})}])]) [:& menu-entry {:title (tr "workspace.shape.menu.forward") :shortcut (sc/get-tooltip :bring-forward) :on-click do-bring-forward}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 824cd6138..e23e83977 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -13,6 +13,7 @@ [app.main.data.workspace.common :as dwc] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.components.shape-icon :as si] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.util.dom :as dom] @@ -24,31 +25,6 @@ [okulary.core :as l] [rumext.alpha :as mf])) -;; --- Helpers - -(mf/defc element-icon - [{:keys [shape] :as props}] - (case (:type shape) - :frame i/artboard - :image i/image - :line i/line - :circle i/circle - :path i/curve - :rect i/box - :text i/text - :group (if (some? (:component-id shape)) - i/component - (if (:masked-group? shape) - i/mask - i/folder)) - :bool (case (:bool-type shape) - :difference i/bool-difference - :exclude i/bool-exclude - :intersection i/bool-intersection - #_:default i/bool-union) - :svg-raw i/file-svg - nil)) - ;; --- Layer Name (def shape-for-rename-ref @@ -227,7 +203,7 @@ :icon-layer (= (:type item) :icon)) :on-click select-shape :on-double-click #(dom/stop-propagation %)} - [:& element-icon {:shape item}] + [:& si/element-icon {:shape item}] [:& layer-name {:shape item :on-start-edit #(reset! disable-drag true) :on-stop-edit #(reset! disable-drag false)}] diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index 2ff6e1744..33cf92fe3 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -164,9 +164,10 @@ @ctrl? (into (filter is-group?) ids)) - ids (filterv (comp not remove-id?) ids) - hover-shape (get objects (first ids))] - + hover-shape (->> ids + (filterv (comp not remove-id?)) + (first) + (get objects))] (reset! hover hover-shape) (reset! hover-ids ids))))))