mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 23:31:21 -05:00
✨ Improves the text-size input
This commit is contained in:
parent
7c1b3d1b85
commit
0dbcfcbc0b
3 changed files with 36 additions and 35 deletions
|
@ -373,7 +373,7 @@
|
|||
width: 60%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-40;
|
||||
fill: $color-gray-10;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
@ -385,6 +385,11 @@
|
|||
width: 60%;
|
||||
}
|
||||
|
||||
input.input-text {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.input-select {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
@ -404,12 +409,12 @@
|
|||
|
||||
.dropdown-button {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
&.input-option {
|
||||
height: 2rem;
|
||||
height: 26px;
|
||||
border-bottom: 1px solid #64666A;
|
||||
width: 100%;
|
||||
margin-left: 0.25rem;
|
||||
|
@ -431,6 +436,15 @@
|
|||
}
|
||||
|
||||
.element-set-content .grid-option-main {
|
||||
.editable-select {
|
||||
height: 2rem;
|
||||
}
|
||||
.editable-select svg {
|
||||
fill: $color-gray-40;
|
||||
}
|
||||
.dropdown-button {
|
||||
top: 4px;
|
||||
}
|
||||
.editable-select.input-option .input-text {
|
||||
padding: 0;
|
||||
padding-top: 0.18rem;
|
||||
|
@ -689,6 +703,7 @@
|
|||
&:hover {
|
||||
background: $color-gray-60;
|
||||
|
||||
|
||||
.custom-select,
|
||||
.editable-select,
|
||||
input {
|
||||
|
|
|
@ -197,7 +197,7 @@
|
|||
:stroke-color-ref-file file-id)
|
||||
|
||||
(= (:stroke-style s) :none)
|
||||
(assoc :stroke-style "solid"
|
||||
(assoc :stroke-style :solid
|
||||
:stroke-width 1
|
||||
:stroke-opacity 1)))]
|
||||
(rx/of (dwc/update-shapes ids update-fn))))))
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
[app.main.refs :as refs]
|
||||
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.fill :refer [fill-menu]]
|
||||
[app.main.ui.components.editable-select :refer [editable-select]]
|
||||
[app.util.dom :as dom]
|
||||
[app.main.fonts :as fonts]
|
||||
[app.util.i18n :as i18n :refer [tr t]]
|
||||
|
@ -90,15 +91,13 @@
|
|||
(fonts/ensure-loaded! new-font-id (partial change-font new-font-id))))))
|
||||
|
||||
on-font-size-change
|
||||
(fn [event]
|
||||
(let [new-font-size (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(when-not (str/empty? new-font-size)
|
||||
(run! #(st/emit! (dwt/update-text-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {:font-size new-font-size}}))
|
||||
ids))))
|
||||
(fn [new-font-size]
|
||||
(when-not (str/empty? new-font-size)
|
||||
(run! #(st/emit! (dwt/update-text-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {:font-size (str new-font-size)}}))
|
||||
ids)))
|
||||
|
||||
on-font-variant-change
|
||||
(fn [event]
|
||||
|
@ -125,28 +124,15 @@
|
|||
[:& font-select-optgroups]]]
|
||||
|
||||
[:div.row-flex
|
||||
[:div.editable-select
|
||||
[:select.input-select {:value (attr->string font-size)
|
||||
:on-change on-font-size-change}
|
||||
(when (= font-size :multiple)
|
||||
[:option {:value ""} "--"])
|
||||
[:option {:value "8"} "8"]
|
||||
[:option {:value "9"} "9"]
|
||||
[:option {:value "10"} "10"]
|
||||
[:option {:value "11"} "11"]
|
||||
[:option {:value "12"} "12"]
|
||||
[:option {:value "14"} "14"]
|
||||
[:option {:value "18"} "18"]
|
||||
[:option {:value "24"} "24"]
|
||||
[:option {:value "36"} "36"]
|
||||
[:option {:value "48"} "48"]
|
||||
[:option {:value "72"} "72"]]
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:max "200"
|
||||
:value font-size
|
||||
:placeholder "--"
|
||||
:on-change on-font-size-change}]]
|
||||
(let [size-options [8 9 10 11 12 14 18 24 36 48 72]
|
||||
size-options (if (= font-size :multiple) (concat [{:value "" :label "--"}] size-options) size-options)]
|
||||
[:& editable-select
|
||||
{:value (attr->string font-size)
|
||||
:class "input-option"
|
||||
:options size-options
|
||||
:type "number"
|
||||
:placeholder "--"
|
||||
:on-change on-font-size-change}])
|
||||
|
||||
[:select.input-select {:value (attr->string font-variant-id)
|
||||
:on-change on-font-variant-change}
|
||||
|
|
Loading…
Add table
Reference in a new issue