Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 17:21:17 -05:00
Code Issues Activity

✨ Improves the text-size input

Browse source
This commit is contained in:
alonso.torres 2020-09-11 15:53:23 +02:00 • committed by Andrey Antukh
parent 7c1b3d1b85
commit 0dbcfcbc0b
3 changed files with 36 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -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 {

2
frontend/src/app/main/data/colors.cljs
View file

@ -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))))))

48
frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
View file

@ -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}