Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

✨ Show auto placeholder on some elements

Browse source
This commit is contained in:
alonso.torres 2020-05-20 15:37:29 +02:00
parent 0611ce98a3
commit b205e4ab50
3 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/uxbox/main/ui/components/editable_select.cljs
View file

@ -16,7 +16,7 @@
[uxbox.main.ui.icons :as i]
[uxbox.main.ui.components.dropdown :refer [dropdown]]))
(mf/defc editable-select [{:keys [value type options class on-change]}]
(mf/defc editable-select [{:keys [value type options class on-change placeholder]}]
(let [state (mf/use-state {:id (uuid/next)
:is-open? false
:current-value value})
@ -52,6 +52,7 @@
[:div.editable-select {:class class}
[:input.input-text {:value (or (-> @state :current-value value->label) "")
:on-change handle-change-input
:placeholder placeholder
:type type}]
[:span.dropdown-button {:on-click open-dropdown} i/arrow-down]

6
frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
View file

@ -146,6 +146,7 @@
:type (when (number? (:size params)) "number" )
:class "input-option"
:options size-options
:placeholder "Auto"
:on-change handle-change-size}])
[:div.grid-option-main-actions
@ -167,6 +168,7 @@
:options size-options
:value (:size params)
:min 1
:placeholder "Auto"
:on-change handle-change-size}])
(when (= :column type)
@ -175,6 +177,7 @@
:options size-options
:value (:size params)
:min 1
:placeholder "Auto"
:on-change handle-change-size}])
(when (#{:row :column} type)
@ -196,6 +199,7 @@
(t locale "workspace.options.grid.params.height")
(t locale "workspace.options.grid.params.width"))
:class "pixels"
:placeholder "Auto"
:value (or (:item-length params) "")
:on-change handle-change-item-length}])
@ -205,10 +209,12 @@
:class "pixels"
:value (:gutter params)
:min 0
:placeholder "0"
:on-change (handle-change :params :gutter)}]
[:& input-row {:label (t locale "workspace.options.grid.params.margin")
:class "pixels"
:min 0
:placeholder "0"
:value (:margin params)
:on-change (handle-change :params :margin)}]])

8
frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/input_row.cljs
View file

@ -15,7 +15,7 @@
[uxbox.main.ui.components.editable-select :refer [editable-select]]
[uxbox.util.dom :as dom]))
(mf/defc input-row [{:keys [label options value class min max on-change type]}]
(mf/defc input-row [{:keys [label options value class min max on-change type placeholder]}]
[:div.row-flex.input-row
[:span.element-set-subtitle label]
[:div.input-element {:class class}
@ -26,11 +26,13 @@
:class "input-option"
:options options
:on-change on-change}]
:editable-select
[:& editable-select {:value value
:class "input-option"
:options options
:type (when (number? value) "number")
:placeholder placeholder
:on-change on-change}]
(let [handle-change
@ -41,9 +43,9 @@
(or (not max) (<= value max)))
(on-change value))))]
[:input.input-text
{:placeholder label
{:placeholder placeholder
:type "number"
:on-change handle-change
:value value}]))
:value (or value "")}]))
]])