From d9a9eb372919830f300713e309a1e26b3ec8f4d2 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Thu, 5 May 2022 17:11:45 +0200 Subject: [PATCH] :sparkles: Add icon to artboard thumbnail --- .../resources/images/icons/set-thumbnail.svg | 3 + .../styles/main/partials/workspace.scss | 4 ++ frontend/src/app/main/ui/icons.cljs | 1 + .../main/ui/workspace/viewport/widgets.cljs | 68 +++++++++++-------- 4 files changed, 49 insertions(+), 27 deletions(-) create mode 100644 frontend/resources/images/icons/set-thumbnail.svg diff --git a/frontend/resources/images/icons/set-thumbnail.svg b/frontend/resources/images/icons/set-thumbnail.svg new file mode 100644 index 000000000..c90cf5c85 --- /dev/null +++ b/frontend/resources/images/icons/set-thumbnail.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 48b943526..320c6f8d9 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -316,6 +316,10 @@ $height-palette-max: 80px; } } +.workspace-frame-icon { + fill: $color-gray-40; +} + .workspace-frame-label { fill: $color-gray-40; font-size: $fs12; diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index c10126c61..4c0fc2585 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -138,6 +138,7 @@ (def ruler (icon-xref :ruler)) (def ruler-tool (icon-xref :ruler-tool)) (def search (icon-xref :search)) +(def set-thumbnail (icon-xref :set-thumbnail)) (def shape-halign-center (icon-xref :shape-halign-center)) (def shape-halign-left (icon-xref :shape-halign-left)) (def shape-halign-right (icon-xref :shape-halign-right)) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index a9661c26f..1fe11720e 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -108,19 +108,19 @@ on-double-click (mf/use-callback - (mf/deps (:id frame)) - (st/emitf (dw/go-to-layout :layers) - (dw/start-rename-shape (:id frame)))) + (mf/deps (:id frame)) + (st/emitf (dw/go-to-layout :layers) + (dw/start-rename-shape (:id frame)))) on-context-menu (mf/use-callback - (mf/deps frame) - (fn [bevent] - (let [event (.-nativeEvent bevent) - position (dom/get-client-position event)] - (dom/prevent-default event) - (dom/stop-propagation event) - (st/emit! (dw/show-shape-context-menu {:position position :shape frame}))))) + (mf/deps frame) + (fn [bevent] + (let [event (.-nativeEvent bevent) + position (dom/get-client-position event)] + (dom/prevent-default event) + (dom/stop-propagation event) + (st/emit! (dw/show-shape-context-menu {:position position :shape frame}))))) on-pointer-enter (mf/use-callback @@ -132,24 +132,38 @@ (mf/use-callback (mf/deps (:id frame) on-frame-leave) (fn [_] - (on-frame-leave (:id frame))))] + (on-frame-leave (:id frame)))) + text-pos-x (if (:use-for-thumbnail? frame) 15 0)] - [:text {:x 0 - :y 0 - :width width - :height 20 - :class "workspace-frame-label" - :transform (str (when (and selected? modifiers) - (str (:displacement modifiers) " " )) - (text-transform label-pos zoom)) - :style {:fill (when selected? "var(--color-primary-dark)")} - :visibility (if show-artboard-names? "visible" "hidden") - :on-mouse-down on-mouse-down - :on-double-click on-double-click - :on-context-menu on-context-menu - :on-pointer-enter on-pointer-enter - :on-pointer-leave on-pointer-leave} - (:name frame)])) + [:* + (when (:use-for-thumbnail? frame) + [:g {:transform (str (when (and selected? modifiers) + (str (:displacement modifiers) " ")) + (text-transform label-pos zoom))} + [:svg {:x 0 + :y -9 + :width 12 + :height 12 + :class "workspace-frame-icon" + :style {:fill (when selected? "var(--color-primary-dark)")} + :visibility (if show-artboard-names? "visible" "hidden")} + [:use {:xlinkHref "#icon-set-thumbnail"}]]]) + [:text {:x text-pos-x + :y 0 + :width width + :height 20 + :class "workspace-frame-label" + :transform (str (when (and selected? modifiers) + (str (:displacement modifiers) " ")) + (text-transform label-pos zoom)) + :style {:fill (when selected? "var(--color-primary-dark)")} + :visibility (if show-artboard-names? "visible" "hidden") + :on-mouse-down on-mouse-down + :on-double-click on-double-click + :on-context-menu on-context-menu + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave} + (:name frame)]])) (mf/defc frame-titles {::mf/wrap-props false}