diff --git a/frontend/resources/images/icons/join-nodes-refactor.svg b/frontend/resources/images/icons/join-nodes-refactor.svg new file mode 100644 index 000000000..cf3409a24 --- /dev/null +++ b/frontend/resources/images/icons/join-nodes-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/merge-nodes-refactor.svg b/frontend/resources/images/icons/merge-nodes-refactor.svg new file mode 100644 index 000000000..822d22f6a --- /dev/null +++ b/frontend/resources/images/icons/merge-nodes-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/separate-nodes-refactor.svg b/frontend/resources/images/icons/separate-nodes-refactor.svg new file mode 100644 index 000000000..9808ca146 --- /dev/null +++ b/frontend/resources/images/icons/separate-nodes-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/snap-nodes-refactor.svg b/frontend/resources/images/icons/snap-nodes-refactor.svg new file mode 100644 index 000000000..6ce0a90d6 --- /dev/null +++ b/frontend/resources/images/icons/snap-nodes-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/to-corner-refactor.svg b/frontend/resources/images/icons/to-corner-refactor.svg new file mode 100644 index 000000000..7e9d0ce18 --- /dev/null +++ b/frontend/resources/images/icons/to-corner-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/to-curve-refactor.svg b/frontend/resources/images/icons/to-curve-refactor.svg new file mode 100644 index 000000000..9a5634dbc --- /dev/null +++ b/frontend/resources/images/icons/to-curve-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 5e8962043..77593b5bd 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -97,7 +97,6 @@ ;; --- Initialize Workspace - (defn initialize-layout [lname] ;; (dm/assert! @@ -640,7 +639,6 @@ (watch [_ _ _] (rx/of (dch/update-shapes [id] #(merge % attrs)))))) - (defn start-rename-shape "Start shape renaming process" [id] @@ -673,10 +671,8 @@ (when-let [component-id (:component-id shape)] (rx/of (dwl/rename-component component-id name))))))))))) - ;; --- Update Selected Shapes attrs - (defn update-selected-shapes [attrs] (dm/assert! (cts/valid-shape-attrs? attrs)) @@ -749,7 +745,6 @@ (ptk/data-event :layout/update selected-ids) (dwu/commit-undo-transaction undo-id)))))) - ;; --- Change Shape Order (D&D Ordering) (defn relocate-shapes-changes [it objects parents parent-id page-id to-index ids @@ -966,7 +961,6 @@ (let [selected (wsh/lookup-selected state)] (rx/of (relocate-shapes selected parent-id to-index)))))) - (defn start-editing-selected [] (ptk/reify ::start-editing-selected @@ -1329,7 +1323,6 @@ (some->> (:main-instance-page component) (redirect-to-file file-id)))))))) - (defn go-to-component [component-id] (ptk/reify ::go-to-component @@ -1426,6 +1419,31 @@ (rx/of ::dwp/force-persist (rt/nav :dashboard-fonts {:team-id team-id})))))) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Toolbar +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn toggle-toolbar-visibility + [] + (ptk/reify ::toggle-toolbar-visibility + ptk/UpdateEvent + (update [_ state] + (update-in state [:workspace-local :hide-toolbar] not)))) + +(defn hide-toolbar + [] + (ptk/reify ::hide-toolbar + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:workspace-local :hide-toolbar] true)))) + +(defn show-toolbar + [] + (ptk/reify ::show-toolbar + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:workspace-local :hide-toolbar] false)))) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Context Menu ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -1687,7 +1705,6 @@ (= (:width (:selrect (first (vals paste-obj)))) (:width (:selrect frame-obj))))) - (defn- paste-shape [{selected :selected paste-objects :objects ;; rename this because here comes only the clipboard shapes, @@ -1924,7 +1941,6 @@ (rx/reduce conj []) (rx/mapcat (partial do-paste it state mouse-pos))))))))) - (defn as-content [text] (let [paragraphs (->> (str/lines text) (map str/trim) @@ -2169,7 +2185,6 @@ ;; Read only ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - (defn set-workspace-read-only [read-only?] (ptk/reify ::set-workspace-read-only @@ -2186,7 +2201,6 @@ (remove-layout-flag :textpalette)) (rx/empty))))) - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Measurements ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -2212,12 +2226,10 @@ (update [_ state] (assoc-in state [:workspace-global :margins-selected] margins-selected)))) - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Orphan Shapes ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - (defn fix-orphan-shapes [] (ptk/reify ::fix-orphan-shapes @@ -2277,8 +2289,6 @@ (rx/of (dch/commit-changes changes)))))) - - (defn set-annotations-expanded [expanded?] (ptk/reify ::set-annotations-expanded @@ -2296,7 +2306,6 @@ (assoc-in [:workspace-annotations :expanded?] true)) (d/dissoc-in state [:workspace-annotations :id-for-create]))))) - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Preview blend modes ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -2315,7 +2324,6 @@ (update [_ state] (reduce #(update %1 :workspace-preview-blend dissoc %2) state ids)))) - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Components ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -2352,8 +2360,6 @@ (watch [_ _ _] (rx/of (update-shape (uuid/uuid id) {:shape-ref (uuid/uuid shape-ref)}))))) - - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Exports ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/src/app/main/data/workspace/viewport.cljs b/frontend/src/app/main/data/workspace/viewport.cljs index 767a6fc99..976b2dc4c 100644 --- a/frontend/src/app/main/data/workspace/viewport.cljs +++ b/frontend/src/app/main/data/workspace/viewport.cljs @@ -42,7 +42,7 @@ objects (wsh/lookup-page-objects state page-id) shapes (cph/get-immediate-children objects) srect (gsh/shapes->rect shapes) - local (assoc local :vport size :zoom 1 :zoom-inverse 1)] + local (assoc local :vport size :zoom 1 :zoom-inverse 1 :hide-toolbar false)] (cond (or (not (d/num? (:width srect))) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 1d5d03f59..e0c4c05ae 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -183,6 +183,9 @@ (def context-menu (l/derived :context-menu workspace-local)) +(def toolbar-visibility + (l/derived :hide-toolbar workspace-local)) + ;; page item that it is being edited (def editing-page-item (l/derived :page-item workspace-local)) diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 5d769b44e..48d5bccf6 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -348,6 +348,7 @@ (def hug-content-refactor (icon-xref :hug-content-refactor)) (def img-refactor (icon-xref :img-refactor)) (def icon-refactor (icon-xref :icon-refactor)) +(def join-nodes-refactor (icon-xref :join-nodes-refactor)) (def justify-content-column-around-refactor (icon-xref :justify-content-column-around-refactor)) (def justify-content-column-between-refactor (icon-xref :justify-content-column-between-refactor)) (def justify-content-column-center-refactor (icon-xref :justify-content-column-center-refactor)) @@ -372,6 +373,7 @@ (def mask-refactor (icon-xref :mask-refactor)) (def masked-refactor (icon-xref :masked-refactor)) (def menu-refactor (icon-xref :menu-refactor)) +(def merge-nodes-refactor (icon-xref :merge-nodes-refactor)) (def move-refactor (icon-xref :move-refactor)) (def open-link-refactor (icon-xref :open-link-refactor)) (def open-refactor (icon-xref :open-refactor)) @@ -393,9 +395,11 @@ (def rotation-refactor (icon-xref :rotation-refactor)) (def row-reverse-refactor (icon-xref :row-reverse-refactor)) (def search-refactor (icon-xref :search-refactor)) +(def separate-nodes-refactor (icon-xref :separate-nodes-refactor)) (def size-horizontal-refactor (icon-xref :size-horizontal-refactor)) (def size-vertical-refactor (icon-xref :size-vertical-refactor)) (def shown-refactor (icon-xref :shown-refactor)) +(def snap-nodes-refactor (icon-xref :snap-nodes-refactor)) (def status-alert-refactor (icon-xref :status-alert-refactor)) (def status-update-refactor (icon-xref :status-update-refactor)) (def status-tick-refactor (icon-xref :status-tick-refactor)) @@ -427,6 +431,8 @@ (def text-underlined-refactor (icon-xref :text-underlined-refactor)) (def text-uppercase-refactor (icon-xref :text-uppercase-refactor)) (def tick-refactor (icon-xref :tick-refactor)) +(def to-corner-refactor (icon-xref :to-corner-refactor)) +(def to-curve-refactor (icon-xref :to-curve-refactor)) (def unlock-refactor (icon-xref :unlock-refactor)) (def vertical-align-items-center-refactor (icon-xref :vertical-align-items-center-refactor)) (def vertical-align-items-end-refactor (icon-xref :vertical-align-items-end-refactor)) diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index 678a4760d..b2dee7d64 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -74,8 +74,8 @@ read-only? (mf/use-ctx ctx/workspace-read-only?) show-palette-btn? (and (not ^boolean read-only?) (not ^boolean new-css-system)) - hide-toolbar* (mf/use-state false) - hide-toolbar? (deref hide-toolbar*) + + hide-toolbar? (mf/deref refs/toolbar-visibility) interrupt (mf/use-fn #(st/emit! :interrupt)) @@ -138,8 +138,7 @@ toggle-toolbar (mf/use-fn - (fn [] - (swap! hide-toolbar* not)))] + #(st/emit! (dw/toggle-toolbar-visibility)))] (if new-css-system (when-not ^boolean read-only? @@ -231,8 +230,6 @@ :on-click toggle-debug-panel} i/bug])]]]) - - [:aside.left-toolbar [:ul.left-toolbar-options [:li diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs index d7eaef153..8ab61a53c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs @@ -5,10 +5,12 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.viewport.path-actions + (:require-macros [app.main.style :as stl]) (:require [app.main.data.workspace.path :as drp] [app.main.data.workspace.path.shortcuts :as sc] [app.main.store :as st] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.workspace.shapes.path.common :as pc] [app.util.i18n :as i18n :refer [tr]] @@ -38,6 +40,7 @@ (mf/defc path-actions [{:keys [shape]}] (let [{:keys [edit-mode selected-points snap-toggled] :as all} (mf/deref pc/current-edit-path-ref) content (:content shape) + new-css-system (mf/use-ctx ctx/new-css-system) enabled-buttons (mf/use-memo @@ -107,79 +110,162 @@ (mf/use-callback (fn [_] (st/emit! (drp/toggle-snap))))] - [:div.path-actions - [:div.viewport-actions-group + + (if new-css-system + [:div {:class (stl/css :sub-actions)} + [:div {:class (stl/css :sub-actions-group)} ;; Draw Mode - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when (= edit-mode :draw) "is-toggled") - :alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes)) - :on-click on-select-draw-mode} - i/pen] + [:button + {:class (stl/css-case :is-toggled (= edit-mode :draw)) + :alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes)) + :on-click on-select-draw-mode} + i/pentool-refactor] ;; Edit mode - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when (= edit-mode :move) "is-toggled") - :alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes)) - :on-click on-select-edit-mode} - i/pointer-inner]] + [:button + {:class (stl/css-case :is-toggled (= edit-mode :move)) + :alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes)) + :on-click on-select-edit-mode} + i/move-refactor]] + + [:div {:class (stl/css :sub-actions-group)} - [:div.viewport-actions-group ;; Add Node - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when-not (:add-node enabled-buttons) "is-disabled") - :alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node)) - :on-click on-add-node} - i/nodes-add] + [:button + {:class (stl/css-case :is-disabled (:add-node enabled-buttons)) + :alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node)) + :on-click on-add-node} + i/add-refactor] ;; Remove node - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when-not (:remove-node enabled-buttons) "is-disabled") - :alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node)) - :on-click on-remove-node} - i/nodes-remove]] + [:button + {:class (stl/css-case :is-disabled (:remove-node enabled-buttons)) + :alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node)) + :on-click on-remove-node} + i/remove-refactor]] - [:div.viewport-actions-group + [:div {:class (stl/css :sub-actions-group)} ;; Merge Nodes - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when-not (:merge-nodes enabled-buttons) "is-disabled") - :alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes)) - :on-click on-merge-nodes} - i/nodes-merge] + [:button + {:class (stl/css-case :is-disabled (:merge-nodes enabled-buttons)) + :alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes)) + :on-click on-merge-nodes} + i/merge-nodes-refactor] ;; Join Nodes - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when-not (:join-nodes enabled-buttons) "is-disabled") - :alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes)) - :on-click on-join-nodes} - i/nodes-join] + [:button + {:class (stl/css-case :is-disabled (:join-nodes enabled-buttons)) + :alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes)) + :on-click on-join-nodes} + i/join-nodes-refactor] ;; Separate Nodes - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when-not (:separate-nodes enabled-buttons) "is-disabled") - :alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes)) - :on-click on-separate-nodes} - i/nodes-separate]] + [:button + {:class (stl/css-case :is-disabled (:separate-nodes enabled-buttons)) + :alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes)) + :on-click on-separate-nodes} + i/separate-nodes-refactor]] ;; Make Corner - [:div.viewport-actions-group - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when-not (:make-corner enabled-buttons) "is-disabled") - :alt (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner)) - :on-click on-make-corner} - i/nodes-corner] + [:div {:class (stl/css :sub-actions-group)} + [:button + {:class (stl/css-case :is-disabled (:make-corner enabled-buttons)) + :alt (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner)) + :on-click on-make-corner} + i/to-corner-refactor] ;; Make Curve - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when-not (:make-curve enabled-buttons) "is-disabled") - :alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve)) - :on-click on-make-curve} - i/nodes-curve]] + [:button + {:class (stl/css-case :is-disabled (:make-curve enabled-buttons)) + :alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve)) + :on-click on-make-curve} + i/to-curve-refactor]] ;; Toggle snap - [:div.viewport-actions-group - [:div.viewport-actions-entry.tooltip.tooltip-bottom - {:class (when snap-toggled "is-toggled") - :alt (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes)) - :on-click on-toggle-snap} - i/nodes-snap]]])) + [:div {:class (stl/css :sub-actions-group)} + [:button + {:class (stl/css-case :is-toggled snap-toggled) + :alt (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes)) + :on-click on-toggle-snap} + i/snap-nodes-refactor]]] + + + + [:div.path-actions + [:div.viewport-actions-group + + ;; Draw Mode + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when (= edit-mode :draw) "is-toggled") + :alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes)) + :on-click on-select-draw-mode} + i/pen] + + ;; Edit mode + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when (= edit-mode :move) "is-toggled") + :alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes)) + :on-click on-select-edit-mode} + i/pointer-inner]] + + [:div.viewport-actions-group + ;; Add Node + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when-not (:add-node enabled-buttons) "is-disabled") + :alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node)) + :on-click on-add-node} + i/nodes-add] + + ;; Remove node + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when-not (:remove-node enabled-buttons) "is-disabled") + :alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node)) + :on-click on-remove-node} + i/nodes-remove]] + + [:div.viewport-actions-group + ;; Merge Nodes + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when-not (:merge-nodes enabled-buttons) "is-disabled") + :alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes)) + :on-click on-merge-nodes} + i/nodes-merge] + + ;; Join Nodes + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when-not (:join-nodes enabled-buttons) "is-disabled") + :alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes)) + :on-click on-join-nodes} + i/nodes-join] + + ;; Separate Nodes + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when-not (:separate-nodes enabled-buttons) "is-disabled") + :alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes)) + :on-click on-separate-nodes} + i/nodes-separate]] + + ;; Make Corner + [:div.viewport-actions-group + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when-not (:make-corner enabled-buttons) "is-disabled") + :alt (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner)) + :on-click on-make-corner} + i/nodes-corner] + + ;; Make Curve + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when-not (:make-curve enabled-buttons) "is-disabled") + :alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve)) + :on-click on-make-curve} + i/nodes-curve]] + + ;; Toggle snap + [:div.viewport-actions-group + [:div.viewport-actions-entry.tooltip.tooltip-bottom + {:class (when snap-toggled "is-toggled") + :alt (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes)) + :on-click on-toggle-snap} + i/nodes-snap]]]))) + diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss new file mode 100644 index 000000000..2864f4968 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss @@ -0,0 +1,61 @@ +// 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) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.sub-actions { + pointer-events: initial; + position: absolute; + top: $s-12; + left: calc(50% - 240px); + display: flex; + align-items: center; + height: $s-56; + padding: $s-8 $s-16; + border-radius: $s-8; + gap: $s-16; + z-index: $z-index-10; + background-color: var(--color-background-primary); + transition: + top 0.3s, + height 0.3s, + opacity 0.3s; + + .sub-actions-group { + position: relative; + display: flex; + align-items: center; + margin: 0; + opacity: $op-10; + transition: opacity 0.3s ease; + + button { + @extend .button-tertiary; + height: $s-36; + width: $s-36; + flex-shrink: 0; + background-color: transparent; + border-radius: $s-8; + border: none; + margin: 0 $s-2; + &.is-disabled { + pointer-events: none; + opacity: 40%; + } + &.is-toggled { + background-color: var(--button-radio-background-color-active); + svg { + stroke: var(--button-radio-foreground-color-active); + } + } + + svg { + @extend .button-icon; + stroke: var(--color-foreground-secondary); + } + } + } +} diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 065984894..adac81fcc 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -75,6 +75,13 @@ grid-edition? (and single? editing? (ctl/grid-layout? shape))] + (mf/use-effect + (mf/deps editing?) + (fn [] + (if editing? + (st/emit! (dw/hide-toolbar)) + (st/emit! (dw/show-toolbar))))) + (cond path-edition? [:div.viewport-actions