diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index d19935e44..67abb7774 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/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);
diff --git a/frontend/src/app/main/data/workspace/thumbnails.cljs b/frontend/src/app/main/data/workspace/thumbnails.cljs
index bc24e69e0..b1328b98a 100644
--- a/frontend/src/app/main/data/workspace/thumbnails.cljs
+++ b/frontend/src/app/main/data/workspace/thumbnails.cljs
@@ -237,39 +237,45 @@
(rx/buffer 2 1)
(rx/share))
- changes-s
+ local-changes-s
+ (->> stream
+ (rx/filter dch/commit-changes?)
+ (rx/with-latest-from workspace-data-s)
+ (rx/merge-map (partial extract-root-frame-changes page-id))
+ (rx/tap #(l/trc :hint "incoming change" :origin "local" :frame-id (dm/str %))))
+
+ notification-changes-s
+ (->> stream
+ (rx/filter (ptk/type? ::wnt/handle-file-change))
+ (rx/observe-on :async)
+ (rx/with-latest-from workspace-data-s)
+ (rx/merge-map (partial extract-root-frame-changes page-id))
+ (rx/tap #(l/trc :hint "incoming change" :origin "notifications" :frame-id (dm/str %))))
+
+ persistence-changes-s
+ (->> stream
+ (rx/filter (ptk/type? ::update))
+ (rx/map deref)
+ (rx/filter (fn [[file-id page-id]]
+ (and (= file-id file-id)
+ (= page-id page-id))))
+ (rx/map (fn [[_ _ frame-id]] frame-id))
+ (rx/tap #(l/trc :hint "incoming change" :origin "persistence" :frame-id (dm/str %))))
+
+ all-changes-s
(->> (rx/merge
;; LOCAL CHANGES
- (->> stream
- (rx/filter dch/commit-changes?)
- (rx/observe-on :async)
- (rx/with-latest-from workspace-data-s)
- (rx/merge-map (partial extract-root-frame-changes page-id))
- (rx/tap #(l/trc :hint "incoming change" :origin "local" :frame-id (dm/str %))))
-
+ local-changes-s
;; NOTIFICATIONS CHANGES
- (->> stream
- (rx/filter (ptk/type? ::wnt/handle-file-change))
- (rx/observe-on :async)
- (rx/with-latest-from workspace-data-s)
- (rx/merge-map (partial extract-root-frame-changes page-id))
- (rx/tap #(l/trc :hint "incoming change" :origin "notifications" :frame-id (dm/str %))))
-
+ notification-changes-s
;; PERSISTENCE CHANGES
- (->> stream
- (rx/filter (ptk/type? ::update))
- (rx/map deref)
- (rx/filter (fn [[file-id page-id]]
- (and (= file-id file-id)
- (= page-id page-id))))
- (rx/map (fn [[_ _ frame-id]] frame-id))
- (rx/tap #(l/trc :hint "incoming change" :origin "persistence" :frame-id (dm/str %)))))
+ persistence-changes-s)
(rx/share))
;; BUFFER NOTIFIER (window of 5s of inactivity)
notifier-s
- (->> changes-s
+ (->> all-changes-s
(rx/debounce 1000)
(rx/tap #(l/trc :hint "buffer initialized")))]
@@ -277,12 +283,12 @@
;; Perform instant thumbnail cleaning of affected frames
;; and interrupt any ongoing update-thumbnail process
;; related to current frame-id
- (->> changes-s
+ (->> all-changes-s
(rx/map #(clear-thumbnail file-id page-id % "frame")))
;; Generate thumbnails in batchs, once user becomes
;; inactive for some instant
- (->> changes-s
+ (->> all-changes-s
(rx/buffer-until notifier-s)
(rx/mapcat #(into #{} %))
(rx/map #(request-thumbnail file-id page-id % "frame"))))
diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.cljs b/frontend/src/app/main/ui/components/context_menu_a11y.cljs
index e6a230bf5..f6fd0c424 100644
--- a/frontend/src/app/main/ui/components/context_menu_a11y.cljs
+++ b/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)]
diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs
index b364bb23f..308ef8e42 100644
--- a/frontend/src/app/main/ui/components/numeric_input.cljs
+++ b/frontend/src/app/main/ui/components/numeric_input.cljs
@@ -53,14 +53,13 @@
;; This `value` represents the previous value and is used as
;; initil value for the simple math expression evaluation.
- value (d/parse-double value-str default)
+ value (when (not= :multiple value-str) (d/parse-double value-str default))
;; We need to store the handle-blur ref so we can call it on unmount
dirty-ref (mf/use-ref false)
;; Last value input by the user we need to store to save on unmount
-
- last-value* (mf/use-var nil)
+ last-value* (mf/use-var value)
parse-value
(mf/use-fn
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index 8a361d1d0..b4c80e044 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/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")
- :top (str (- y 70) "px")})))
+ :else (if (> y max-y)
+ {: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)
diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss
index 1b441f83b..394ab5890 100644
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/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);
}
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 0cfcb8ddb..9c27fff3a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/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)
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index 57e839013..b2ece935e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/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 {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index 62338f4ec..f43724ca1 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/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}]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
index 723ac54fa..b5b44d3db 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss
+++ b/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 {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
index d81994303..50e2ed940 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
+++ b/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)
- (ptk/event ::ev/event {::ev/name "add-asset-to-library"
- :asset-type "color"}))
- ;; FIXME: replace interop with dom helpers
- (modal/show! :colorpicker
- {:x (.-clientX event)
- :y (.-clientY event)
- :on-accept add-color
- :data {:color "#406280"
- :opacity 1}
- :position :right})))
+ (let [bounding-rect (-> event
+ (dom/get-current-target)
+ (dom/get-bounding-rect))
+ x-position (:right bounding-rect)
+ y-position (:top bounding-rect)]
+
+ (st/emit! (dw/set-assets-section-open file-id :colors true)
+ (ptk/event ::ev/event {::ev/name "add-asset-to-library"
+ :asset-type "color"}))
+ ;; FIXME: replace interop with dom helpers
+ (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
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
index 28dced5b4..c2ad1f970 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
+++ b/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);
}
}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
index 58b4a1c0f..d2f3ed1db 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
+++ b/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)]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
index a546e71a7..84d86bdc8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
+++ b/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;
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
index 54d9e2d33..65b87340c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/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 open?
- [:div {:class (stl/css :listing-options)}
- [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
- :on-change toggle-list-style
- :name "listing-style"}
- [:& radio-button {:icon i/view-as-list-refactor
- :value "list"
- :id "opt-list"}]
- [:& radio-button {:icon i/flex-grid-refactor
- :value "grid"
- :id "opt-grid"}]]])
+ (when ^boolean open?
+ [:div {:class (stl/css :listing-options)}
+ [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
+ :on-change toggle-list-style
+ :name "listing-style"}
+ [:& radio-button {:icon i/view-as-list-refactor
+ :value "list"
+ :id "opt-list"}]
+ [:& radio-button {:icon i/flex-grid-refactor
+ :value "grid"
+ :id "opt-grid"}]]])
- (when (and components-v2 (not read-only?) local?)
- [:div {:on-click add-component
- :class (stl/css :add-component)}
- i/add-refactor
- [:& file-uploader {:accept cm/str-image-types
- :multi true
- :ref input-ref
- :on-selected on-file-selected}]])]]
+ (when (and components-v2 (not read-only?) local?)
+ [:div {:on-click add-component
+ :class (stl/css :add-component)}
+ i/add-refactor
+ [:& file-uploader {:accept cm/str-image-types
+ :multi true
+ :ref input-ref
+ :on-selected on-file-selected}]])]
[:& cmm/asset-section-block {:role :content}
(when ^boolean open?
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
index 78fe72fd4..d5189b67e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
+++ b/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;
- margin-bottom: $s-4;
+ height: $s-44;
+
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;
- width: $s-32;
+ height: $s-36;
+ width: $s-36;
border-radius: $br-6;
background-color: var(--assets-component-background-color);
}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
index 2b025708b..257418869 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
+++ b/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
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
index 313f225b2..73068d685 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
+++ b/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;
- overflow-y: auto;
+ padding: 0 0 $s-24 $s-12;
display: grid;
grid-auto-rows: max-content;
- scrollbar-gutter: stable;
- &:last-child {
- margin-block-end: $s-24;
- }
+ gap: $s-4;
height: 100%;
}
@@ -47,6 +43,9 @@
.library-content {
width: 100%;
+ display: grid;
+ grid-auto-rows: max-content;
+ gap: $s-4;
}
.asset-title {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
index 48b103eb4..d875778a6 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
+++ b/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;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index fb0e5a34b..028e98536 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/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;
- width: $s-32;
+ height: $s-36;
+ width: $s-36;
margin: $s-2 $s-8 $s-2 $s-2;
}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 530ee7ed4..1eeba68c8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -391,7 +391,7 @@
[:span {:class (stl/css :icon-text)} "W"]
[:> numeric-input* {:min 0.01
:no-validate true
- :placeholder "--"
+ :placeholder (if (= :multiple (:width values)) (tr "settings.multiple") "--")
:on-change on-width-change
:disabled disabled-width-sizing?
:className (stl/css :numeric-input)
@@ -402,7 +402,7 @@
[:span {:class (stl/css :icon-text)} "H"]
[:> numeric-input* {:min 0.01
:no-validate true
- :placeholder "--"
+ :placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--")
:on-change on-height-change
:disabled disabled-height-sizing?
:className (stl/css :numeric-input)
@@ -422,7 +422,7 @@
:title (tr "workspace.options.x")}
[:span {:class (stl/css :icon-text)} "X"]
[:> numeric-input* {:no-validate true
- :placeholder "--"
+ :placeholder (if (= :multiple (:x values)) (tr "settings.multiple") "--")
:on-change on-pos-x-change
:disabled disabled-position-x?
:className (stl/css :numeric-input)
@@ -433,7 +433,7 @@
:title (tr "workspace.options.y")}
[:span {:class (stl/css :icon-text)} "Y"]
[:> numeric-input* {:no-validate true
- :placeholder "--"
+ :placeholder (if (= :multiple (:y values)) (tr "settings.multiple") "--")
:disabled disabled-position-y?
:on-change on-pos-y-change
:className (stl/css :numeric-input)
@@ -450,7 +450,7 @@
:min 0
:max 359
:data-wrap true
- :placeholder "--"
+ :placeholder (if (= :multiple (:rotation values)) (tr "settings.multiple") "--")
:on-change on-rotation-change
:className (stl/css :numeric-input)
:value (:rotation values)}]])
@@ -464,7 +464,7 @@
:title (tr "workspace.options.radius")}
[:span {:class (stl/css :icon)} i/corner-radius-refactor]
[:> numeric-input*
- {:placeholder "Mixed"
+ {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:ref radius-input-ref
:min 0
:on-change on-radius-1-change
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
index f69ab2804..c2ab44d9a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
+++ b/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;