Merge pull request #4172 from penpot/ladybenko-6982-ui-fixes-design-tab

🐛 UI fixes for the design tab

frontend/resources/images/icons/detached-refactor.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10 4.667h1.333a3.333 3.333 0 010 6.666H10m-4 0H4.667a3.333 3.333 0 010-6.666H6"/>
+</svg>

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -130,6 +130,8 @@
   color: var(--button-tertiary-foreground-color-rest);
   background-color: transparent;
   border: var(--button-tertiary-border-width) solid transparent;
+  display: grid;
+  place-content: center;
   svg,
   span svg {
     stroke: var(--button-tertiary-foreground-color-rest);

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

@@ -21,7 +21,6 @@
   flex-grow: 1;
   border-radius: $s-8;
   box-sizing: border-box;
-  border: $s-2 solid var(--radio-btn-border-color);
   input {
     display: none;
   }

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

@@ -11,10 +11,13 @@
    [app.main.ui.icons :as i]
    [rumext.v2 :as mf]))
 
+(def ^:private chevron-icon
+  (i/icon-xref :arrow-refactor (stl/css :chevron-icon)))
+
 (mf/defc title-bar
   {::mf/wrap-props false}
   [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}]
-  (let [klass (dm/str (stl/css :title-bar) " " class)]
+  (let [klass (dm/str (stl/css-case :title-bar true :all-clickable all-clickable) " " class)]
     [:div {:class klass}
      (if ^boolean collapsable
        [:div {:class (stl/css :title-wrapper)}
@@ -23,15 +26,15 @@
                     :on-click on-collapsed}
            [:span {:class (stl/css-case
                            :collapsabled-icon true
-                           :rotated collapsed)}
+                           :collapsed collapsed)}
-            i/arrow-refactor]
+            chevron-icon]
            [:div {:class (stl/css :title)} title]]
           [:*
            [:button {:class (stl/css-case
                              :collapsabled-icon true
-                             :rotated collapsed)
+                             :collapsed collapsed)
                      :on-click on-collapsed}
-            i/arrow-refactor]
+            chevron-icon]
            [:div {:class (stl/css :title)} title]])]
        [:div {:class (stl/css-case :title-only true
                                    :title-only-icon-gap add-icon-gap

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

@@ -45,63 +45,12 @@
   color: var(--title-foreground-color);
   stroke: var(--title-foreground-color);
   overflow: hidden;
-  .toggle-btn {
+
-    @include buttonStyle;
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    padding: 0;
-    color: var(--title-foreground-color);
-    stroke: var(--title-foreground-color);
-    overflow: hidden;
-    .collapsabled-icon {
-      @include flexCenter;
-      height: $s-24;
-      border-radius: $br-8;
-      svg {
-        @extend .button-icon-small;
-        transform: rotate(90deg);
-        stroke: var(--icon-foreground);
-      }
-      &.rotated svg {
-        transform: rotate(0deg);
-      }
-    }
-    &:hover {
-      color: var(--title-foreground-color-hover);
-      stroke: var(--title-foreground-color-hover);
-      .title {
-        color: var(--title-foreground-color-hover);
-        stroke: var(--title-foreground-color-hover);
-      }
-      .collapsabled-icon svg {
-        stroke: var(--title-foreground-color-hover);
-      }
-    }
-  }
-  .collapsabled-icon {
-    @include buttonStyle;
-    @include flexCenter;
-    height: $s-24;
-    border-radius: $br-8;
-    svg {
-      @extend .button-icon-small;
-      transform: rotate(90deg);
-      stroke: var(--icon-foreground);
-    }
-    &.rotated svg {
-      transform: rotate(0deg);
-    }
-  }
   &:hover {
     color: var(--title-foreground-color-hover);
-    stroke: var(--title-foreground-color-hover);
     .title {
       stroke: var(--title-foreground-color-hover);
     }
-    .collapsabled-icon svg {
-      stroke: var(--title-foreground-color-hover);
-    }
   }
 }
 
@@ -137,3 +86,49 @@
 .title-only-icon-gap {
   --title-bar-title-margin: #{$s-12};
 }
+
+.toggle-btn {
+  @include buttonStyle;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  padding: 0;
+  color: var(--title-foreground-color);
+  stroke: var(--title-foreground-color);
+  overflow: hidden;
+
+  --chevron-icon-color: var(--icon-foreground);
+
+  &:hover {
+    --chevron-icon-color: var(--title-foreground-color-hover);
+
+    color: var(--title-foreground-color-hover);
+    .title {
+      color: var(--title-foreground-color-hover);
+      stroke: var(--title-foreground-color-hover);
+    }
+  }
+}
+
+.collapsabled-icon {
+  @include buttonStyle;
+  @include flexCenter;
+  height: $s-24;
+  border-radius: $br-8;
+
+  --chevron-icon-rotation: 90deg;
+
+  &.collapsed {
+    --chevron-icon-rotation: 0deg;
+  }
+
+  &:hover {
+    --chevron-icon-color: var(--title-foreground-color-hover);
+  }
+}
+
+.chevron-icon {
+  @extend .button-icon-small;
+  transform: rotate(var(--chevron-icon-rotation));
+  stroke: var(--chevron-icon-color);
+}

frontend/src/app/main/ui/icons.cljs

@@ -337,6 +337,7 @@
 (def ^:icon delete-text-refactor (icon-xref :delete-text-refactor))
 (def ^:icon desc-sort-refactor (icon-xref :desc-sort-refactor))
 (def ^:icon detach-refactor (icon-xref :detach-refactor))
+(def ^:icon detached-refactor (icon-xref :detached-refactor))
 (def ^:icon document-refactor (icon-xref :document-refactor))
 (def ^:icon download-refactor (icon-xref :download-refactor))
 (def ^:icon drop-refactor (icon-xref :drop-refactor))

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

@@ -85,13 +85,11 @@
                            :title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")")
                            :id "bool-opt-exclude"}]]]
 
-       [:div {:class (stl/css :bool-group)}
+       [:button
-        [:button
+        {:title (tr "workspace.shape.menu.flatten")
-         {:title (tr "workspace.shape.menu.flatten")
+         :class (stl/css-case
-          :class (stl/css-case
+                 :flatten-button true
-                  :flatten-button true
+                 :disabled disabled-flatten)
-                  :disabled disabled-flatten)
+         :disabled disabled-flatten
-          :disabled disabled-flatten
+         :on-click flatten-objects}
-          :on-click flatten-objects}
+        flatten-icon]])))
-         flatten-icon]]])))
-

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

@@ -7,15 +7,16 @@
 @import "refactor/common-refactor.scss";
 
 .boolean-options {
-  display: flex;
+  display: grid;
-  gap: $s-4;
+  grid-template-columns: repeat(8, $s-28);
+  column-gap: $s-4;
   height: $s-32;
-  margin: 0 calc(-1 * $s-2);
 }
 
 .bool-group {
-  display: flex;
+  display: grid;
-  align-items: center;
+  grid-template-columns: subgrid;
+  grid-column: 1 / span 4;
 }
 
 .flatten-button {
@@ -23,6 +24,7 @@
   height: $s-32;
   width: $s-32;
   border-radius: $br-8;
+  grid-column: 5 / span 1;
   --flatten-icon-foreground-color: var(--icon-foreground);
 
   &.disabled {

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

@@ -21,6 +21,7 @@
 .flex-element-menu {
   @include flexColumn;
   gap: $s-12;
+  margin-block-end: $s-8;
 }
 
 .behaviour-menu {

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

@@ -52,6 +52,11 @@
    :svg-raw #{:size :position :rotation}
    :text    #{:size :position :rotation}})
 
+(def ^:private clip-content-icon (i/icon-xref :clip-content-refactor (stl/css :checkbox-button)))
+(def ^:private play-icon (i/icon-xref :play-refactor (stl/css :checkbox-button)))
+(def ^:private locked-icon (i/icon-xref :detach-refactor (stl/css :lock-ratio-icon)))
+(def ^:private unlocked-icon (i/icon-xref :detached-refactor (stl/css :lock-ratio-icon)))
+
 (defn select-measure-keys
   "Consider some shapes can be drawn from bottom to top or from left to right"
   [shape]
@@ -413,8 +418,8 @@
                           :disabled (= proportion-lock :multiple))
                   :on-click on-proportion-lock-change}
          (if proportion-lock
-           i/lock-refactor
+           locked-icon
-           i/unlock-refactor)]])
+           unlocked-icon)]])
      (when (options :position)
        [:div {:class (stl/css :position)}
         [:div {:class (stl/css-case :x-position true
@@ -543,8 +548,7 @@
                     :title (tr "workspace.options.clip-content")
                     :class (stl/css-case  :clip-content-label true
                                           :selected (not (:show-content values)))}
-            [:span {:class (stl/css :icon)}
+            clip-content-icon]])
-             i/clip-content-refactor]]])
         (when (options :show-in-viewer)
           [:div {:class (stl/css :show-in-viewer)}
            [:input {:type "checkbox"
@@ -559,4 +563,4 @@
                     :class (stl/css-case  :clip-content-label true
                                           :selected (not (:hide-in-viewer values)))}
             [:span {:class (stl/css :icon)}
-             i/play-refactor]]])])]))
+             play-icon]]])])]))

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

@@ -128,15 +128,16 @@
   border-radius: $br-8;
   height: $s-32;
   width: $s-28;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-  }
   &.selected {
     @extend .button-icon-selected;
   }
 }
 
+.lock-ratio-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+}
+
 .position {
   @include flexRow;
 }
@@ -219,20 +220,19 @@
   .clip-content-input {
     display: none;
   }
-  .clip-content-label {
+}
-    @extend .button-tertiary;
+
-    height: $s-32;
+.clip-content-label {
-    width: $s-28;
+  @extend .button-tertiary;
-    border-radius: $br-8;
+  height: $s-32;
-    .icon {
+  width: $s-28;
-      @include flexCenter;
+  border-radius: $br-8;
-      svg {
+}
-        @extend .button-icon;
+
-        stroke: var(--icon-foreground);
+.selected {
-      }
+  @extend .button-icon-selected;
-    }
+}
-    &.selected {
+
-      @extend .button-icon-selected;
+.checkbox-button {
-    }
+  @extend .button-icon;
-  }
 }