Merge pull request #5419 from penpot/alotor-reorder-icon

✨ Add reorder handler to fills, strokes and shadows

frontend/src/app/main/ui/components/reorder_handler.cljs

@@ -0,0 +1,23 @@
+;; 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
+
+(ns app.main.ui.components.reorder-handler
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as ic]
+   [rumext.v2 :as mf]))
+
+(mf/defc reorder-handler
+  {::mf/forward-ref true}
+  [_ ref]
+  [:*
+   [:div {:ref ref :class (stl/css :reorder)}
+    [:> icon*
+     {:id ic/reorder
+      :class (stl/css :reorder-icon)
+      :aria-hidden true}]]
+   [:hr {:class (stl/css :reorder-separator-top)}]
+   [:hr {:class (stl/css :reorder-separator-bottom)}]])

frontend/src/app/main/ui/components/reorder_handler.scss

@@ -0,0 +1,42 @@
+// 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
+
+.reorder {
+  cursor: grab;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% + var(--sp-m));
+  justify-content: center;
+  left: var(--reorder-left-position, calc(-1 * var(--sp-l)));
+  position: absolute;
+  top: calc(-1 * (var(--sp-m) / 2));
+  z-index: var(--z-index-panels);
+}
+
+.reorder-icon {
+  height: var(--sp-l);
+  pointer-events: none;
+  visibility: var(--reorder-icon-visibility, hidden);
+  --icon-stroke-color: var(--color-foreground-secondary);
+}
+
+.reorder-separator-top,
+.reorder-separator-bottom {
+  border-color: var(--color-accent-primary);
+  margin: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.reorder-separator-top {
+  display: var(--reorder-top-display, none);
+  top: calc(-1 * var(--sp-xxs));
+}
+
+.reorder-separator-bottom {
+  display: var(--reorder-bottom-display, none);
+  bottom: calc(-1 * var(--sp-xxs));
+}

frontend/src/app/main/ui/ds/_sizes.scss

@@ -14,5 +14,7 @@ $sz-36: px2rem(36);
 $sz-160: px2rem(160);
 $sz-200: px2rem(200);
 $sz-224: px2rem(224);
+$sz-252: px2rem(252);
+$sz-284: px2rem(284);
 $sz-400: px2rem(400);
 $sz-964: px2rem(964);

frontend/src/app/main/ui/ds/foundations/assets/icon.scss

@@ -5,6 +5,6 @@
 // Copyright (c) KALEIDOS INC
 
 .icon {
-  fill: none;
-  stroke: currentColor;
+  fill: var(--icon-fill-color, none);
+  stroke: var(--icon-stroke-color, currentColor);
 }

frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss

@@ -29,6 +29,7 @@
   display: flex;
   flex-direction: column;
   gap: $s-8;
+  padding-left: var(--sp-m);
 }
 
 .shape-row {
@@ -98,5 +99,6 @@
 }
 
 .viewer-tab-switcher {
+  --tabs-nav-padding-inline-start: 0;
   --tabs-nav-padding-inline-end: var(--sp-m);
 }

frontend/src/app/main/ui/workspace/colorpicker.scss

@@ -5,19 +5,22 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
+@import "../ds/_sizes.scss";
 
 .colorpicker-tooltip {
   @extend .modal-background;
   left: calc(10 * $s-140);
   width: auto;
+  padding: var(--sp-m) 0;
+  width: $sz-284;
 }
 
 .colorpicker {
   border-radius: $br-8;
-  width: $s-260;
-  & > * {
-    width: $s-260;
-  }
+}
+
+.colorpicker-tabs {
+  padding: 0 var(--sp-m);
 }
 
 .top-actions {
@@ -26,6 +29,7 @@
   flex-direction: row-reverse;
   justify-content: space-between;
   height: $s-40;
+  padding: 0 var(--sp-m);
 }
 
 .top-actions-right {

frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss

@@ -9,6 +9,7 @@
 .color-values {
   @include flexColumn;
   margin-top: $s-8;
+  padding: 0 var(--sp-m);
 
   &.disable-opacity {
     grid-template-columns: 3.5rem repeat(3, 1fr);

frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs

@@ -12,9 +12,9 @@
    [app.common.data.macros :as dm]
    [app.common.math :as mth]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.reorder-handler :refer [reorder-handler]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@@ -140,14 +140,7 @@
                                 :dnd-over-top (= (:over dprops) :top)
                                 :dnd-over-bot (= (:over dprops) :bot))}
 
-     [:div {:ref dref
-            :class (stl/css :reorder)}
-      [:> icon*
-       {:id i/reorder
-        :class (stl/css :reorder-icon)
-        :aria-hidden true}]]
-     [:hr {:class (stl/css :reorder-separator-top)}]
-     [:hr {:class (stl/css :reorder-separator-bottom)}]
+     [:& reorder-handler {:ref dref}]
 
      [:div {:class (stl/css :offset-input-wrapper)}
       [:span {:class (stl/css :icon-text)} "%"]

frontend/src/app/main/ui/workspace/colorpicker/gradients.scss

@@ -18,8 +18,8 @@
   height: 100%;
   display: flex;
   align-items: center;
-  padding: $s-12;
   position: relative;
+  padding: 0 var(--sp-m);
 }
 
 .gradient-background {
@@ -89,6 +89,7 @@
 .gradient-options {
   display: flex;
   justify-content: space-between;
+  padding: 0 var(--sp-m);
 }
 
 .gradient-options-buttons {
@@ -110,7 +111,7 @@
   max-height: $s-180;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: $s-1 0;
+  padding: 0 0 var(--sp-s) var(--sp-m);
 }
 
 .gradient-stops-entry {
@@ -120,60 +121,23 @@
   border-radius: $br-12;
   border: $s-1 solid transparent;
 
-  &:hover .reorder-icon {
-    visibility: visible;
-  }
+  position: relative;
 
   &.is-selected {
     border-color: var(--color-accent-primary-muted);
   }
 
-  &.dnd-over-top .reorder-separator-top {
-    display: block;
+  &:hover {
+    --reorder-icon-visibility: visible;
   }
 
-  &.dnd-over-bot .reorder-separator-bottom {
-    display: block;
+  &.dnd-over-top {
+    --reorder-top-display: block;
   }
-}
 
-.reorder {
-  cursor: grab;
-  display: flex;
-  flex-direction: column;
-  height: $s-36;
-  justify-content: center;
-  left: calc(-1 * $s-2);
-  margin-top: calc(-1 * $s-2);
-  position: absolute;
-  width: $s-16;
-}
-
-.reorder-icon {
-  height: $s-16;
-  pointer-events: none;
-  stroke: var(--color-foreground-secondary);
-  visibility: hidden;
-}
-
-.reorder-separator-top {
-  border-color: var(--color-accent-primary);
-  display: none;
-  left: 0;
-  margin-left: $s-12;
-  margin-top: calc(-1 * $s-6);
-  position: absolute;
-  width: calc(100% - $s-24);
-}
-
-.reorder-separator-bottom {
-  border-color: var(--color-accent-primary);
-  display: none;
-  left: 0;
-  margin-left: $s-12;
-  margin-top: $s-36;
-  position: absolute;
-  width: calc(100% - $s-24);
+  &.dnd-over-bot {
+    --reorder-bottom-display: block;
+  }
 }
 
 .offset-input-wrapper {
@@ -185,9 +149,9 @@
 .gradient-separator {
   border-color: var(--color-background-quaternary);
   border-width: $s-3;
-  margin-left: -4%;
+  margin-left: calc(var(--sp-m) / 2);
   position: relative;
-  width: 108%;
+  width: calc(100% - var(--sp-m));
 }
 
 .gradient-preview-stop-preview {

frontend/src/app/main/ui/workspace/colorpicker/libraries.scss

@@ -9,6 +9,7 @@
 .libraries {
   margin-top: $s-8;
   width: 100%;
+  padding: 0 var(--sp-m);
 }
 
 .selected-colors {

frontend/src/app/main/ui/workspace/sidebar/options.scss

@@ -11,7 +11,6 @@
   display: grid;
   width: 100%;
   height: 100%;
-  padding-left: $s-12;
 }
 
 .tab-spacing {
@@ -41,7 +40,7 @@
 }
 
 .design-options {
-  padding-inline-end: $s-12;
+  padding-inline: var(--sp-m);
 }
 
 .inspect {
@@ -49,5 +48,6 @@
 }
 
 .options-tab-switcher {
-  --tabs-nav-padding-inline-end: 12px;
+  --tabs-nav-padding-inline-start: var(--sp-m);
+  --tabs-nav-padding-inline-end: var(--sp-m);
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss

@@ -10,6 +10,7 @@
   display: flex;
   flex-direction: column;
   gap: $s-8;
+  padding-left: var(--sp-m);
 }
 
 .interaction-options {

frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs

@@ -17,6 +17,7 @@
    [app.main.data.workspace.undo :as dwu]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.reorder-handler :refer [reorder-handler]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -152,8 +153,10 @@
     [:div {:class (stl/css-case :global/shadow-option true
                                 :shadow-element true
                                 :dnd-over-top (= (:over dprops) :top)
-                                :dnd-over-bot (= (:over dprops) :bot))
-           :ref dref}
+                                :dnd-over-bot (= (:over dprops) :bot))}
+     (when (some? on-reorder)
+       [:& reorder-handler {:ref dref}])
+
      [:*
       [:div {:class (stl/css :basic-options)}
        [:div {:class (stl/css-case :shadow-info true

frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss

@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
+@import "../../../../ds/_sizes.scss";
 
 .element-set {
   margin: 0;
@@ -34,6 +35,21 @@
 
 .shadow-element {
   @include flexColumn;
+  position: relative;
+
+  --reorder-left-position: calc(-1 * var(--sp-m) - var(--sp-xxs));
+
+  &:hover {
+    --reorder-icon-visibility: visible;
+  }
+
+  &.dnd-over-top {
+    --reorder-top-display: block;
+  }
+
+  &.dnd-over-bot {
+    --reorder-bottom-display: block;
+  }
 }
 
 .basic-options {
@@ -87,6 +103,7 @@
 
 .shadow-advanced-options {
   @include flexColumn;
+  width: $sz-252;
 }
 
 .first-row,

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -18,6 +18,7 @@
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.color-input :refer [color-input*]]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.reorder-handler :refer [reorder-handler]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.formats :as fmt]
@@ -28,7 +29,6 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-
 (def ^:private detach-icon
   (i/icon-xref :detach (stl/css :detach-icon)))
 
@@ -194,8 +194,12 @@
     [:div {:class (stl/css-case
                    :color-data true
                    :dnd-over-top (= (:over dprops) :top)
-                   :dnd-over-bot (= (:over dprops) :bot))
-           :ref dref}
+                   :dnd-over-bot (= (:over dprops) :bot))}
+
+     ;; Drag handler
+     (when (some? on-reorder)
+       [:& reorder-handler {:ref dref}])
+
      [:div {:class (stl/css :color-info)}
       [:div {:class (stl/css-case :color-name-wrapper true
                                   :no-opacity (or disable-opacity

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss

@@ -9,11 +9,20 @@
 .color-data {
   @include flexRow;
 
-  &.dnd-over-top {
-    border-block-start: $s-1 solid var(--layer-row-foreground-color-drag);
+  position: relative;
+
+  --reorder-left-position: calc(-1 * var(--sp-m) - var(--sp-xxs));
+
+  &:hover {
+    --reorder-icon-visibility: visible;
   }
+
+  &.dnd-over-top {
+    --reorder-top-display: block;
+  }
+
   &.dnd-over-bot {
-    border-block-end: $s-1 solid var(--layer-row-foreground-color-drag);
+    --reorder-bottom-display: block;
   }
 }
 

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs

@@ -9,6 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.reorder-handler :refer [reorder-handler]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
@@ -140,9 +141,12 @@
     [:div {:class (stl/css-case
                    :stroke-data true
                    :dnd-over-top (= (:over dprops) :top)
-                   :dnd-over-bot (= (:over dprops) :bot))
-           :ref dref}
-           ;; Stroke Color
+                   :dnd-over-bot (= (:over dprops) :bot))}
+
+     (when (some? on-reorder)
+       [:& reorder-handler {:ref dref}])
+
+     ;; Stroke Color
      [:& color-row {:color {:color (:stroke-color stroke)
                             :opacity (:stroke-opacity stroke)
                             :id (:stroke-color-ref-id stroke)

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss

@@ -9,11 +9,20 @@
 .stroke-data {
   @include flexColumn;
 
-  &.dnd-over-top {
-    border-top: $s-1 solid var(--layer-row-foreground-color-drag);
+  position: relative;
+
+  --reorder-left-position: calc(-1 * var(--sp-l));
+
+  &:hover {
+    --reorder-icon-visibility: visible;
   }
+
+  &.dnd-over-top {
+    --reorder-top-display: block;
+  }
+
   &.dnd-over-bot {
-    border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
+    --reorder-bottom-display: block;
   }
 }