github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-12 23:19:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Show preset name when an option is selected

Browse Source
This commit is contained in:
Marina López 2025-07-29 12:33:11 +02:00 committed by Andrey Antukh
parent f4adfe56be
commit 1f42b2f72d
2 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs
View File

@ -21,8 +21,10 @@
(mf/defc options* (mf/defc options*
[{:keys [drawing-state]}] [{:keys [drawing-state]}]
(let [show* (mf/use-state false) (let [show* (mf/use-state false)
show? (deref show*) show? (deref show*)
selected-preset-name* (mf/use-state nil)
selected-preset-name (deref selected-preset-name*)
on-open on-open
(mf/use-fn (mf/use-fn
@ -35,12 +37,16 @@
on-preset-selected on-preset-selected
(mf/use-fn (mf/use-fn
(fn [event] (fn [event]
(let [width (-> (dom/get-current-target event) (let [width (-> (dom/get-current-target event)
(dom/get-data "width") (dom/get-data "width")
(d/read-string)) (d/read-string))
height (-> (dom/get-current-target event) height (-> (dom/get-current-target event)
(dom/get-data "height") (dom/get-data "height")
(d/read-string))] (d/read-string))
name (-> (dom/get-current-target event)
(dom/get-data "name"))]
(reset! selected-preset-name* name)
(st/emit! (dwd/set-default-size width height))))) (st/emit! (dwd/set-default-size width height)))))
orientation orientation
@ -59,7 +65,7 @@
[:div {:class (stl/css-case :presets-wrapper true [:div {:class (stl/css-case :presets-wrapper true
:opened show?) :opened show?)
:on-click on-open} :on-click on-open}
[:span {:class (stl/css :select-name)} (tr "workspace.options.size-presets")] [:span {:class (stl/css :select-name)} (or selected-preset-name (tr "workspace.options.size-presets"))]
[:span {:class (stl/css :collapsed-icon)} i/arrow] [:span {:class (stl/css :collapsed-icon)} i/arrow]
[:& dropdown {:show show? [:& dropdown {:show show?
:on-close on-close} :on-close on-close}
@ -78,6 +84,7 @@
:match preset-match) :match preset-match)
:data-width (str (:width preset)) :data-width (str (:width preset))
:data-height (str (:height preset)) :data-height (str (:height preset))
:data-name (:name preset)
:on-click on-preset-selected} :on-click on-preset-selected}
[:div {:class (stl/css :name-wrapper)} [:div {:class (stl/css :name-wrapper)}
[:span {:class (stl/css :preset-name)} (:name preset)] [:span {:class (stl/css :preset-name)} (:name preset)]

2
frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
View File

@ -17,7 +17,7 @@
.presets-wrapper { .presets-wrapper {
@extend .asset-element; @extend .asset-element;
position: relative; position: relative;
grid-column: span 5; grid-column: span 6;
display: flex; display: flex;
height: $s-32; height: $s-32;
padding: $s-8; padding: $s-8;