Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 14:12:36 -05:00
Code Issues Activity

Use editable-select for col-gap/row-gap

Browse source
This commit is contained in:
Florian Schroedl 2024-05-29 09:28:38 +02:00
parent fb5f7e870a
commit 1ad998de23
2 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -27,6 +27,8 @@
[app.main.ui.formats :as fmt] [app.main.ui.formats :as fmt]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.tokens.core :as wtc]
[app.main.ui.workspace.tokens.editable-select :refer [editable-select]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
@ -507,7 +509,7 @@
(mf/defc gap-section (mf/defc gap-section
{::mf/props :obj} {::mf/props :obj}
[{:keys [is-column wrap-type on-change value] [{:keys [is-column wrap-type on-change value options]
:or {wrap-type :none} :or {wrap-type :none}
:as props}] :as props}]
(let [nowrap? (= :nowrap wrap-type) (let [nowrap? (= :nowrap wrap-type)
@ -541,38 +543,45 @@
:disabled row-gap-disabled?) :disabled row-gap-disabled?)
:title "Row gap"} :title "Row gap"}
[:span {:class (stl/css :icon)} i/gap-vertical] [:span {:class (stl/css :icon)} i/gap-vertical]
[:> numeric-input* [:& editable-select
{:class (stl/css :numeric-input true) {:disabled row-gap-disabled?
:no-validate true
:placeholder "--" :placeholder "--"
:data-type "row-gap"
:data-wrap-type (d/name wrap-type)
:on-focus on-gap-focus
:on-change on-change' :on-change on-change'
:on-blur on-gap-blur :on-blur on-gap-blur
:nillable true :on-token-remove js/console.log
:min 0 :options options
:position :left
:value (:row-gap value) :value (:row-gap value)
:disabled row-gap-disabled?}]] :input-props {:type "number"
:data-type "row-gap"
:data-wrap-type (d/name wrap-type)
:no-validate true
:nillable true
:min 0
:class (stl/css :numeric-input)}}]]
[:div {:class (stl/css-case [:div {:class (stl/css-case
:column-gap true :column-gap true
:disabled col-gap-disabled?) :disabled col-gap-disabled?)
:title "Column gap"} :title "Column gap"}
[:span {:class (stl/css :icon)} i/gap-horizontal] [:span {:class (stl/css :icon)} i/gap-horizontal]
[:> numeric-input* [:& editable-select
{:class (stl/css :numeric-input true) {:disabled col-gap-disabled?
:no-validate true
:placeholder "--" :placeholder "--"
:data-type "column-gap"
:data-wrap-type (d/name wrap-type)
:on-focus on-gap-focus
:on-change on-change' :on-change on-change'
:on-blur on-gap-blur :on-blur on-gap-blur
:nillable true :on-token-remove js/console.log
:min 0 :options options
:position :right
:value (:column-gap value) :value (:column-gap value)
:disabled col-gap-disabled?}]]])) :input-props {:type "number"
:data-type "column-gap"
:data-wrap-type (d/name wrap-type)
:no-validate true
:onFocus on-gap-focus
:nillable true
:min 0
:class (stl/css :numeric-input)}}]]]))
;; GRID COMPONENTS ;; GRID COMPONENTS

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -84,6 +84,7 @@
gap: $s-4; gap: $s-4;
.column-gap { .column-gap {
@extend .input-element; @extend .input-element;
position: relative;
width: $s-108; width: $s-108;
&.disabled { &.disabled {
@extend .disabled-input; @extend .disabled-input;
@ -91,6 +92,7 @@
} }
.row-gap { .row-gap {
@extend .input-element; @extend .input-element;
position: relative;
width: $s-108; width: $s-108;
&.disabled { &.disabled {
@extend .disabled-input; @extend .disabled-input;