Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -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%; width: 60%;
svg { svg {
fill: $color-gray-40; fill: $color-gray-10;
height: 10px; height: 10px;
width: 10px; width: 10px;
} }
@ -385,6 +385,11 @@
width: 60%; width: 60%;
} }
input.input-text {
border: none;
background: none;
}
.input-select { .input-select {
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -404,12 +409,12 @@
.dropdown-button { .dropdown-button {
position: absolute; position: absolute;
top: 4px;
right: 0; right: 0;
padding-right: 4px;
} }
&.input-option { &.input-option {
height: 2rem; height: 26px;
border-bottom: 1px solid #64666A; border-bottom: 1px solid #64666A;
width: 100%; width: 100%;
margin-left: 0.25rem; margin-left: 0.25rem;
@ -431,6 +436,15 @@
} }
.element-set-content .grid-option-main { .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 { .editable-select.input-option .input-text {
padding: 0; padding: 0;
padding-top: 0.18rem; padding-top: 0.18rem;
@ -689,6 +703,7 @@
&:hover { &:hover {
background: $color-gray-60; background: $color-gray-60;
.custom-select, .custom-select,
.editable-select, .editable-select,
input { input {

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

@ -197,7 +197,7 @@
:stroke-color-ref-file file-id) :stroke-color-ref-file file-id)
(= (:stroke-style s) :none) (= (:stroke-style s) :none)
(assoc :stroke-style "solid" (assoc :stroke-style :solid
:stroke-width 1 :stroke-width 1
:stroke-opacity 1)))] :stroke-opacity 1)))]
(rx/of (dwc/update-shapes ids update-fn)))))) (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.refs :as refs]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]] [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.workspace.sidebar.options.fill :refer [fill-menu]]
[app.main.ui.components.editable-select :refer [editable-select]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.main.fonts :as fonts] [app.main.fonts :as fonts]
[app.util.i18n :as i18n :refer [tr t]] [app.util.i18n :as i18n :refer [tr t]]
@ -90,15 +91,13 @@
(fonts/ensure-loaded! new-font-id (partial change-font new-font-id)))))) (fonts/ensure-loaded! new-font-id (partial change-font new-font-id))))))
on-font-size-change on-font-size-change
(fn [event] (fn [new-font-size]
(let [new-font-size (-> (dom/get-target event) (when-not (str/empty? new-font-size)
(dom/get-value))] (run! #(st/emit! (dwt/update-text-attrs
(when-not (str/empty? new-font-size) {:id %
(run! #(st/emit! (dwt/update-text-attrs :editor editor
{:id % :attrs {:font-size (str new-font-size)}}))
:editor editor ids)))
:attrs {:font-size new-font-size}}))
ids))))
on-font-variant-change on-font-variant-change
(fn [event] (fn [event]
@ -125,28 +124,15 @@
[:& font-select-optgroups]]] [:& font-select-optgroups]]]
[:div.row-flex [:div.row-flex
[:div.editable-select (let [size-options [8 9 10 11 12 14 18 24 36 48 72]
[:select.input-select {:value (attr->string font-size) size-options (if (= font-size :multiple) (concat [{:value "" :label "--"}] size-options) size-options)]
:on-change on-font-size-change} [:& editable-select
(when (= font-size :multiple) {:value (attr->string font-size)
[:option {:value ""} "--"]) :class "input-option"
[:option {:value "8"} "8"] :options size-options
[:option {:value "9"} "9"] :type "number"
[:option {:value "10"} "10"] :placeholder "--"
[:option {:value "11"} "11"] :on-change on-font-size-change}])
[: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}]]
[:select.input-select {:value (attr->string font-variant-id) [:select.input-select {:value (attr->string font-variant-id)
:on-change on-font-variant-change} :on-change on-font-variant-change}