♻️ Update spacing on assets tab

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -231,7 +231,7 @@
   --assets-item-border-color: var(--color-accent-primary);
   --assets-item-background-color-drag: transparent;
   --assets-item-border-color-drag: var(--color-accent-primary-muted);
-  --assets-component-background-color: var(--app-white); // TODO: review this token
+  --assets-component-background-color: var(--color-foreground-secondary);
   --assets-component-background-color-disabled: var(--df-secondary;);
   --assets-component-border-color: var(--color-background-tertiary);
   --assets-component-border-selected: var(--color-accent-tertiary);

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

@@ -71,6 +71,8 @@
         local          (mf/use-state {:offset-y 0
                                       :offset-x 0
                                       :levels nil})
+        width          (gobj/get props "width" "initial")
+
 
         on-local-close
         (mf/use-callback
@@ -204,6 +206,7 @@
           (let [level (-> @local :levels peek)]
             [:ul {:class (stl/css-case :min-width min-width?
                                        :context-menu-items true)
+                  :style {:width width}
                   :role "menu"
                   :ref check-menu-offscreen}
              (when-let [parent-option (:parent-option level)]

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

@@ -377,12 +377,14 @@
   "Calculates the style properties for the given coordinates and position"
   [{vh :height} position x y]
   (let [;; picker height in pixels
-        h 510
+        h        510
 
         ;; Checks for overflow outside the viewport height
-        max-y (- vh h)
+        max-y   (- vh h)
+        rulers? (mf/deref refs/rulers?)
+        left-offset (if rulers? 40 18)
 
-        x-pos 325]
+        x-pos   400]
     (cond
       (or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"}
       (= position :left)
@@ -391,8 +393,11 @@
          :bottom "1rem"}
         {:left (str (- x x-pos) "px")
          :top (str (- y 70) "px")})
-      :else {:left (str (+ x 80) "px")
+      :else (if (> y max-y)
-             :top (str (- y 70) "px")})))
+              {:left (str (+ x left-offset) "px")
+               :bottom "1rem"}
+              {:left (str (+ x left-offset) "px")
+               :top (str (- y 70) "px")}))))
 
 (mf/defc colorpicker-modal
   {::mf/register modal/components
@@ -401,7 +406,9 @@
            disable-gradient
            disable-opacity
            disable-image
-           on-change on-close on-accept] :as props}]
+           on-change
+           on-close
+           on-accept] :as props}]
   (let [vport (mf/deref viewport)
         dirty? (mf/use-var false)
         last-change (mf/use-var nil)

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

@@ -9,13 +9,15 @@
 .workspace-header-left {
   display: flex;
   align-items: center;
-  padding: $s-8 $s-8 $s-4 $s-8;
+  padding: $s-12 $s-12 $s-8 $s-12;
+  min-height: $s-52;
 }
 
 .main-icon {
   @include flexCenter;
   width: $s-32;
   height: $s-32;
+  min-height: $s-32;
   margin-right: $s-4;
   svg {
     min-height: $s-32;
@@ -27,6 +29,8 @@
 .project-tree {
   position: relative;
   flex-grow: 1;
+  height: $s-32;
+  min-height: $s-32;
   max-width: calc(100% - $s-64);
 }
 

frontend/src/app/main/ui/workspace/sidebar.cljs

@@ -116,7 +116,7 @@
           (when-not ^boolean mode-inspect?
             [:& tab-element {:id :assets
                              :title (tr "workspace.toolbar.assets")}
-             [:& assets-toolbox]])]])]]))
+             [:& assets-toolbox {:size (- size 58)}]])]])]]))
 
 ;; --- Right Sidebar (Component)
 

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

@@ -14,8 +14,9 @@ $width-settings-bar-max: $s-500;
   grid-template-areas:
     "header header"
     "content resize";
-  grid-template-rows: $s-48 1fr;
+  grid-template-rows: $s-52 1fr;
   grid-template-columns: 1fr 0;
+  gap: $s-8 0;
   position: relative;
   grid-area: left-sidebar;
   min-width: $width-settings-bar;
@@ -54,7 +55,7 @@ $width-settings-bar-max: $s-500;
 }
 
 .tab-spacing {
-  margin-inline: $s-8;
+  margin-inline: $s-12;
 }
 
 .right-settings-bar {

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -67,7 +67,7 @@
 (mf/defc assets-toolbox
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
-  []
+  [{:keys [size]}]
   (let [components-v2  (mf/use-ctx ctx/components-v2)
         read-only?     (mf/use-ctx ctx/workspace-read-only?)
         filters*       (mf/use-state
@@ -178,7 +178,8 @@
          :show menu-open?
          :fixed? true
          :min-width? true
-         :top 152
+         :width size
+         :top 158
          :left 18
          :options options
          :workspace? true}]

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

@@ -12,16 +12,19 @@
   grid-auto-rows: max-content;
   // TODO: ugly hack :( Fix this! we shouldn't be hardcoding this height
   max-height: calc(100vh - $s-80);
+  scrollbar-gutter: stable;
+  overflow-y: auto;
+  padding-top: $s-8;
 }
 
 .libraries-button {
-  @include tabTitleTipography;
   @extend .button-secondary;
+  @include tabTitleTipography;
   gap: $s-2;
   height: $s-32;
   width: 100%;
-  border-radius: $s-8;
   margin-bottom: $s-4;
+  border-radius: $s-8;
   .libraries-icon {
     @include flexCenter;
     width: $s-24;
@@ -124,7 +127,7 @@
 }
 
 .assets-header {
-  padding: $s-8 $s-12 $s-12 $s-12;
+  padding: 0 0 $s-24 $s-12;
 }
 
 .search-wrapper {
@@ -133,7 +136,7 @@
 }
 
 .sort-button {
-  @extend .button-secondary;
+  @extend .button-tertiary;
   width: $s-32;
   border-radius: $br-8;
   svg {

frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs

@@ -386,17 +386,23 @@
         (mf/use-fn
          (mf/deps file-id)
          (fn [event]
-           (st/emit! (dw/set-assets-section-open file-id :colors true)
+           (let [bounding-rect (-> event
-                     (ptk/event ::ev/event {::ev/name "add-asset-to-library"
+                                   (dom/get-current-target)
-                                            :asset-type "color"}))
+                                   (dom/get-bounding-rect))
-           ;; FIXME: replace interop with dom helpers
+                 x-position (:right bounding-rect)
-           (modal/show! :colorpicker
+                 y-position  (:top bounding-rect)]
-                        {:x (.-clientX event)
+
-                         :y (.-clientY event)
+             (st/emit! (dw/set-assets-section-open file-id :colors true)
-                         :on-accept add-color
+                       (ptk/event ::ev/event {::ev/name "add-asset-to-library"
-                         :data {:color "#406280"
+                                              :asset-type "color"}))
-                                :opacity 1}
+             ;; FIXME: replace interop with dom helpers
-                         :position :right})))
+             (modal/show! :colorpicker
+                          {:x x-position
+                           :y y-position
+                           :on-accept add-color
+                           :data {:color "#406280"
+                                  :opacity 1}
+                           :position :right}))))
 
         create-group
         (mf/use-fn

frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss

@@ -74,13 +74,13 @@
   overflow: hidden;
   .default-name-only,
   .name {
-    color: var(--assets-item-name-foreground-color-hover);
+    color: var(--assets-item-name-foreground-color);
     margin-right: $s-6;
     @include textEllipsis;
   }
   .default-name {
     min-width: 0;
-    color: var(--assets-item-name-foreground-color);
+    color: var(--assets-item-name-foreground-color-rest);
   }
 }
 

frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs

@@ -144,7 +144,8 @@
         (mf/use-fn
          (mf/deps file-id section open?)
          (fn [_]
-           (st/emit! (dw/set-assets-section-open file-id section (not open?)))))
+           (when (< 0 assets-count)
+             (st/emit! (dw/set-assets-section-open file-id section (not open?))))))
 
         title
         (mf/html
@@ -157,13 +158,15 @@
           [:span {:class (stl/css :num-assets)}
            assets-count]])]
 
-    [:div {:class (stl/css :asset-section)}
+    [:div {:class (stl/css-case :asset-section true
+                                :opened (and (< 0 assets-count)
+                                             open?))}
      [:& title-bar
-      {:collapsable   true
+      {:collapsable   (< 0 assets-count)
        :collapsed     (not open?)
        :all-clickable true
        :on-collapsed  on-collapsed
-       :class         (stl/css :title-spacing)
+       :class         (stl/css-case :title-spacing open?)
        :title         title}
       buttons]
      (when ^boolean open? content)]))

frontend/src/app/main/ui/workspace/sidebar/assets/common.scss

@@ -41,3 +41,7 @@
 .title-spacing {
   margin-bottom: $s-4;
 }
+
+.asset-section.opened {
+  margin-bottom: $s-12;
+}

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -238,7 +238,7 @@
 
      (when group-open?
        [:*
-        (let [components (get groups "" [])]
+        (when-let [components (not-empty (get groups "" []))]
           [:div {:class-name (stl/css-case :asset-grid listing-thumbs?
                                            :asset-enum (not listing-thumbs?)
                                            :drop-space (and
@@ -512,27 +512,26 @@
                            :assets-count (count components)
                            :open? open?}
      [:& cmm/asset-section-block {:role :title-button}
-      [:*
+      (when ^boolean open?
-       (when open?
+        [:div {:class (stl/css :listing-options)}
-         [:div {:class (stl/css :listing-options)}
+         [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
-          [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
+                            :on-change toggle-list-style
-                             :on-change toggle-list-style
+                            :name "listing-style"}
-                             :name "listing-style"}
+          [:& radio-button {:icon i/view-as-list-refactor
-           [:& radio-button {:icon i/view-as-list-refactor
+                            :value "list"
-                             :value "list"
+                            :id "opt-list"}]
-                             :id "opt-list"}]
+          [:& radio-button {:icon i/flex-grid-refactor
-           [:& radio-button {:icon i/flex-grid-refactor
+                            :value "grid"
-                             :value "grid"
+                            :id "opt-grid"}]]])
-                             :id "opt-grid"}]]])
 
-       (when (and components-v2 (not read-only?) local?)
+      (when (and components-v2 (not read-only?) local?)
-         [:div {:on-click add-component
+        [:div {:on-click add-component
-                :class (stl/css :add-component)}
+               :class (stl/css :add-component)}
-          i/add-refactor
+         i/add-refactor
-          [:& file-uploader {:accept cm/str-image-types
+         [:& file-uploader {:accept cm/str-image-types
-                             :multi true
+                            :multi true
-                             :ref input-ref
+                            :ref input-ref
-                             :on-selected on-file-selected}]])]]
+                            :on-selected on-file-selected}]])]
 
      [:& cmm/asset-section-block {:role :content}
       (when ^boolean open?

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -9,10 +9,10 @@
 .drop-space {
   height: $s-12;
 }
+
 .asset-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr));
-  grid-auto-rows: $s-112;
   max-width: 100%;
   gap: $s-4;
   margin-inline: $s-8;
@@ -21,6 +21,7 @@
 .grid-cell {
   @include flexCenter;
   position: relative;
+  aspect-ratio: 1 / 1;
   padding: $s-8;
   border-radius: $br-8;
   background-color: var(--assets-component-background-color);
@@ -63,7 +64,6 @@
   }
 
   &:hover {
-    background-color: var(--assets-item-background-color-hover);
     .cell-name {
       display: block;
     }
@@ -74,6 +74,12 @@
   }
 }
 
+.component-group {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $s-4;
+}
+
 .thumbnail {
   width: 100%;
   height: 100%;
@@ -89,23 +95,22 @@
   border: $s-2 solid var(--assets-item-border-color-drag);
 }
 
-.asset-enum {
-  margin: 0 $s-12;
-}
-
 .enum-item {
   position: relative;
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   column-gap: $s-8;
-  height: $s-36;
+  height: $s-44;
-  margin-bottom: $s-4;
+
   padding: $s-2;
   border-radius: $br-8;
   background-color: var(--assets-item-background-color);
   cursor: pointer;
 
+  &:not(:last-child) {
+    margin-bottom: $s-4;
+  }
   &:hover {
     background-color: var(--assets-item-background-color-hover);
     .item-name {
@@ -159,8 +164,8 @@
   @include flexCenter;
   flex-shrink: 0;
   padding: $s-2;
-  height: $s-32;
+  height: $s-36;
-  width: $s-32;
+  width: $s-36;
   border-radius: $br-6;
   background-color: var(--assets-component-background-color);
 }

frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs

@@ -51,7 +51,8 @@
          (mf/deps file-id open?)
          (fn []
            (st/emit! (dw/set-assets-section-open file-id :library (not open?)))))]
-    [:div  {:class (stl/css :library-title)}
+    [:div  {:class (stl/css-case :library-title true
+                                 :open open?)}
      [:& title-bar {:collapsable    true
                     :collapsed      (not open?)
                     :all-clickable  true

frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss

@@ -6,14 +6,10 @@
 
 @import "refactor/common-refactor.scss";
 .tool-window {
-  padding-inline-start: $s-12;
+  padding: 0 0 $s-24 $s-12;
-  overflow-y: auto;
   display: grid;
   grid-auto-rows: max-content;
-  scrollbar-gutter: stable;
+  gap: $s-4;
-  &:last-child {
-    margin-block-end: $s-24;
-  }
   height: 100%;
 }
 
@@ -47,6 +43,9 @@
 
 .library-content {
   width: 100%;
+  display: grid;
+  grid-auto-rows: max-content;
+  gap: $s-4;
 }
 
 .asset-title {

frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss

@@ -87,8 +87,7 @@
     }
   }
   .asset-enum {
-    margin: 0 $s-12;
+    padding-bottom: $s-4;
-
     .enum-item {
       position: relative;
       display: flex;

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

@@ -264,7 +264,7 @@
   font-size: $s-12;
   cursor: pointer;
   width: 100%;
-  height: $s-36;
+  height: $s-44;
   border-radius: $br-8;
   background-color: var(--assets-item-background-color);
   color: var(--assets-item-name-foreground-color);
@@ -278,8 +278,8 @@
   img {
     background-color: var(--assets-component-background-color);
     border-radius: $br-8;
-    height: $s-32;
+    height: $s-36;
-    width: $s-32;
+    width: $s-36;
     margin: $s-2 $s-8 $s-2 $s-2;
   }
 

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

@@ -21,43 +21,6 @@
     color: var(--assets-item-name-foreground-color-hover);
   }
 
-  .typography-selection-wrapper {
-    display: grid;
-    grid-template-columns: $s-24 auto 1fr;
-    flex: 1;
-    height: 100%;
-    width: 100%;
-    padding: 0 $s-12;
-
-    &.is-selectable {
-      cursor: pointer;
-    }
-
-    .typography-sample {
-      @include flexCenter;
-      min-width: $s-24;
-      height: $s-32;
-      color: var(--assets-item-name-foreground-color-hover);
-    }
-    .typography-name,
-    .typography-font {
-      @include titleTipography;
-      @include textEllipsis;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      margin-left: $s-6;
-      color: var(--assets-item-name-foreground-color-hover);
-    }
-    .typography-font {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      min-width: 0;
-      color: var(--assets-item-name-foreground-color);
-    }
-  }
-
   &.selected {
     border: $s-1 solid var(--assets-item-border-color);
   }
@@ -78,6 +41,7 @@
       }
     }
   }
+
   &:hover {
     background-color: var(--assets-item-background-color-hover);
     .element-set-actions {
@@ -86,6 +50,45 @@
   }
 }
 
+.typography-selection-wrapper {
+  display: grid;
+  grid-template-columns: $s-24 auto 1fr;
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  padding: 0 $s-12;
+
+  &.is-selectable {
+    cursor: pointer;
+  }
+}
+
+.typography-sample {
+  @include flexCenter;
+  min-width: $s-24;
+  height: $s-32;
+  color: var(--assets-item-name-foreground-color);
+}
+
+.typography-name,
+.typography-font {
+  @include titleTipography;
+  @include textEllipsis;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-left: $s-6;
+  color: var(--assets-item-name-foreground-color);
+}
+
+.typography-font {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
+  color: var(--assets-item-name-foreground-color-rest);
+}
+
 .font-name-wrapper {
   @include titleTipography;
   display: flex;