WIP

penpot · May 24, 2023 · 1d08fe2 · 1d08fe2
1 parent a09dd95
commit 1d08fe2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 21 deletions.
diff --git 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
@@ -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
@@ -46,9 +46,7 @@
 
 (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)
+  (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 +56,7 @@
         adv-spread-ref     (mf/use-ref nil)
 
         shadow-style       (dm/str (:style value))
+        open-shadow        (:open value)
 
         on-remove-shadow
         (mf/use-fn
@@ -125,15 +124,20 @@
         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 [index]
+          (fn []
+            (st/emit! (dch/update-shapes ids #(update-in % [:shadow index :open] 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 index)}
         i/actions]
 
        [:select.input-select
@@ -148,27 +152,31 @@
                   :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
          {:data-index index
           :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 index)}
        [:div.color-data
         [:div.element-set-actions-button
-         {:on-click #(reset! open-shadow false)}
+         {:on-click (on-toggle-open-shadow index)}
          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")}