diff --git a/CHANGES.md b/CHANGES.md index c517fbf8ec..e6c8c676d5 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -24,6 +24,7 @@ - Removed sizing variables from radius (by @ondrejkonec) [Github #3184](https://github.com/penpot/penpot/pull/3184) - Dashboard search, set focus after shortcut (by @akshay-gupta7) [Github #3196](https://github.com/penpot/penpot/pull/3196) - Library name dropdown arrow is overlapped by library name (by @ondrejkonec) [Taiga #5200](https://tree.taiga.io/project/penpot/issue/5200) +- Reorder shadows (by @akshay-gupta7) [Github #3236](https://github.com/penpot/penpot/pull/3236) ## 1.18.3 diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index e611d4a768..720cb859ed 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -786,7 +786,8 @@ } } -.grid-option { +.grid-option, +.shadow-option { margin-bottom: 0.5rem; .advanced-options { .row-flex { @@ -797,6 +798,15 @@ position: absolute; top: 12px; } + .element-set-actions-button { + min-width: auto; + min-height: auto; + padding-right: 10px; + svg { + width: 12px; + height: 12px; + } + } } } @@ -807,7 +817,8 @@ margin-left: 0.25rem; } -.element-set-content .grid-option-main { +.element-set-content .grid-option-main, +.element-set-content .shadow-option-main { align-items: center; display: flex; padding: 0.3rem 0; @@ -857,11 +868,13 @@ } } -.grid-option-main-actions { +.grid-option-main-actions, +.shadow-option-main-actions { display: flex; visibility: hidden; - .grid-option:hover & { + .grid-option:hover &, + .shadow-option:hover & { visibility: visible; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 63cace23b2..83cc9a414f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -22,6 +22,7 @@ [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] + [okulary.core :as l] [rumext.v2 :as mf])) (def shadow-attrs [:shadow]) @@ -45,10 +46,8 @@ (mapv second))) (mf/defc shadow-entry - [{:keys [ids index value on-reorder disable-drag? on-blur]}] - (let [open-shadow (mf/use-state false) - - basic-offset-x-ref (mf/use-ref nil) + [{:keys [ids index value on-reorder disable-drag? on-blur open-state-ref]}] + (let [basic-offset-x-ref (mf/use-ref nil) basic-offset-y-ref (mf/use-ref nil) basic-blur-ref (mf/use-ref nil) @@ -58,6 +57,12 @@ adv-spread-ref (mf/use-ref nil) shadow-style (dm/str (:style value)) + shadow-id (:id value) + + open-status-ref (mf/with-memo [open-state-ref shadow-id] + (-> (l/key shadow-id) + (l/derived open-state-ref))) + open-shadow (mf/deref open-status-ref) on-remove-shadow (mf/use-fn @@ -125,15 +130,19 @@ toggle-visibility (fn [index] (fn [] - (st/emit! (dch/update-shapes ids #(update-in % [:shadow index :hidden] not)))))] + (st/emit! (dch/update-shapes ids #(update-in % [:shadow index :hidden] not))))) + + on-toggle-open-shadow + (fn [] + (swap! open-state-ref update shadow-id not))] [:* - [:div.border-data {:class (dom/classnames - :dnd-over-top (= (:over dprops) :top) - :dnd-over-bot (= (:over dprops) :bot)) - :ref dref} - [:div.element-set-options-group {:style {:display (when @open-shadow "none")}} + [:div.shadow-option {:class (dom/classnames + :dnd-over-top (= (:over dprops) :top) + :dnd-over-bot (= (:over dprops) :bot)) + :ref dref} + [:div.shadow-option-main {:style {:display (when open-shadow "none")}} [:div.element-set-actions-button - {:on-click #(reset! open-shadow true)} + {:on-click on-toggle-open-shadow} i/actions] [:select.input-select @@ -148,7 +157,7 @@ :selected (when (= shadow-style ":inner-shadow") "selected")} (tr "workspace.options.shadow-options.inner-shadow")]] - [:div.element-set-actions + [:div.shadow-option-main-actions [:div.element-set-actions-button {:on-click (toggle-visibility index)} (if (:hidden value) i/eye-closed i/eye)] [:div.element-set-actions-button @@ -156,19 +165,23 @@ :on-click on-remove-shadow} i/minus]]] - [:& advanced-options {:visible? @open-shadow - :on-close #(reset! open-shadow false)} + [:& advanced-options {:visible? open-shadow + :on-close on-toggle-open-shadow} [:div.color-data [:div.element-set-actions-button - {:on-click #(reset! open-shadow false)} + {:on-click on-toggle-open-shadow} i/actions] [:select.input-select - {:default-value (str (:style value)) + {:default-value shadow-style :on-change (fn [event] (let [value (-> event dom/get-target dom/get-value d/read-string)] (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))} - [:option {:value ":drop-shadow"} (tr "workspace.options.shadow-options.drop-shadow")] - [:option {:value ":inner-shadow"} (tr "workspace.options.shadow-options.inner-shadow")]]] + [:option {:value ":drop-shadow" + :selected (when (= shadow-style ":drop-shadow") "selected")} + (tr "workspace.options.shadow-options.drop-shadow")] + [:option {:value ":inner-shadow" + :selected (when (= shadow-style ":inner-shadow") "selected")} + (tr "workspace.options.shadow-options.inner-shadow")]]] [:div.row-grid-2 [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")} @@ -227,14 +240,15 @@ (mf/defc shadow-menu {::mf/wrap-props false} [props] - (let [ids (unchecked-get props "ids") - type (unchecked-get props "type") - values (unchecked-get props "values") + (let [ids (unchecked-get props "ids") + type (unchecked-get props "type") + values (unchecked-get props "values") - shadows (:shadow values []) + shadows (:shadow values []) + open-state-ref (mf/with-memo [] (l/atom {})) - disable-drag* (mf/use-state false) - disable-drag? (deref disable-drag*) + disable-drag* (mf/use-state false) + disable-drag? (deref disable-drag*) on-remove-all (mf/use-fn @@ -288,4 +302,5 @@ :on-reorder handle-reorder :disable-drag? disable-drag? :on-blur on-blur - :index index}])]])])) + :index index + :open-state-ref open-state-ref}])]])]))