Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -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.icons :as i]
[uxbox.main.ui.components.dropdown :refer [dropdown]])) [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) (let [state (mf/use-state {:id (uuid/next)
:is-open? false :is-open? false
:current-value value}) :current-value value})
@ -52,6 +52,7 @@
[:div.editable-select {:class class} [:div.editable-select {:class class}
[:input.input-text {:value (or (-> @state :current-value value->label) "") [:input.input-text {:value (or (-> @state :current-value value->label) "")
:on-change handle-change-input :on-change handle-change-input
:placeholder placeholder
:type type}] :type type}]
[:span.dropdown-button {:on-click open-dropdown} i/arrow-down] [: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" ) :type (when (number? (:size params)) "number" )
:class "input-option" :class "input-option"
:options size-options :options size-options
:placeholder "Auto"
:on-change handle-change-size}]) :on-change handle-change-size}])
[:div.grid-option-main-actions [:div.grid-option-main-actions
@ -167,6 +168,7 @@
:options size-options :options size-options
:value (:size params) :value (:size params)
:min 1 :min 1
:placeholder "Auto"
:on-change handle-change-size}]) :on-change handle-change-size}])
(when (= :column type) (when (= :column type)
@ -175,6 +177,7 @@
:options size-options :options size-options
:value (:size params) :value (:size params)
:min 1 :min 1
:placeholder "Auto"
:on-change handle-change-size}]) :on-change handle-change-size}])
(when (#{:row :column} type) (when (#{:row :column} type)
@ -196,6 +199,7 @@
(t locale "workspace.options.grid.params.height") (t locale "workspace.options.grid.params.height")
(t locale "workspace.options.grid.params.width")) (t locale "workspace.options.grid.params.width"))
:class "pixels" :class "pixels"
:placeholder "Auto"
:value (or (:item-length params) "") :value (or (:item-length params) "")
:on-change handle-change-item-length}]) :on-change handle-change-item-length}])
@ -205,10 +209,12 @@
:class "pixels" :class "pixels"
:value (:gutter params) :value (:gutter params)
:min 0 :min 0
:placeholder "0"
:on-change (handle-change :params :gutter)}] :on-change (handle-change :params :gutter)}]
[:& input-row {:label (t locale "workspace.options.grid.params.margin") [:& input-row {:label (t locale "workspace.options.grid.params.margin")
:class "pixels" :class "pixels"
:min 0 :min 0
:placeholder "0"
:value (:margin params) :value (:margin params)
:on-change (handle-change :params :margin)}]]) :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.main.ui.components.editable-select :refer [editable-select]]
[uxbox.util.dom :as dom])) [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 [:div.row-flex.input-row
[:span.element-set-subtitle label] [:span.element-set-subtitle label]
[:div.input-element {:class class} [:div.input-element {:class class}
@ -26,11 +26,13 @@
:class "input-option" :class "input-option"
:options options :options options
:on-change on-change}] :on-change on-change}]
:editable-select :editable-select
[:& editable-select {:value value [:& editable-select {:value value
:class "input-option" :class "input-option"
:options options :options options
:type (when (number? value) "number") :type (when (number? value) "number")
:placeholder placeholder
:on-change on-change}] :on-change on-change}]
(let [handle-change (let [handle-change
@ -41,9 +43,9 @@
(or (not max) (<= value max))) (or (not max) (<= value max)))
(on-change value))))] (on-change value))))]
[:input.input-text [:input.input-text
{:placeholder label {:placeholder placeholder
:type "number" :type "number"
:on-change handle-change :on-change handle-change
:value value}])) :value (or value "")}]))
]]) ]])