3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-11 22:46:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add new text options layout & styles.

Browse source
This commit is contained in:
Juan de la Cruz 2020-04-09 11:30:44 +02:00 • committed by Andrey Antukh
parent c1a2b3c868
commit 5c3499057e
19 changed files with 219 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/uxbox/builtins/icons.cljs
View file

@ -15,6 +15,12 @@
(def text-align-justify (icon-xref :text-align-justify))
(def text-align-left (icon-xref :text-align-left))
(def text-align-right (icon-xref :text-align-right))
(def align-top (icon-xref :align-top))
(def align-bottom (icon-xref :align-bottom))
(def align-middle (icon-xref :align-middle))
(def auto-fix (icon-xref :auto-fix))
(def auto-width (icon-xref :auto-width))
(def auto-height (icon-xref :auto-height))
(def alignment (icon-xref :alignment))
(def arrow (icon-xref :arrow))
(def arrow-down (icon-xref :arrow-down))
@ -46,12 +52,15 @@
(def image (icon-xref :image))
(def infocard (icon-xref :infocard))
(def layers (icon-xref :layers))
(def letter-spacing (icon-xref :letter-spacing))
(def line (icon-xref :line))
(def line-height (icon-xref :line-height))
(def loader (icon-xref :loader))
(def lock (icon-xref :lock))
(def lock-open (icon-xref :lock-open))
(def logo (icon-xref :uxbox-logo))
(def logo-icon (icon-xref :uxbox-logo-icon))
(def lowercase (icon-xref :lowercase))
(def mail (icon-xref :mail))
(def minus (icon-xref :minus))
(def move (icon-xref :move))
@ -79,9 +88,11 @@
(def shape-vdistribute (icon-xref :shape-vdistribute))
(def size-horiz (icon-xref :size-horiz))
(def size-vert (icon-xref :size-vert))
(def strikethrough (icon-xref :strikethrough))
(def stroke (icon-xref :stroke))
(def sublevel (icon-xref :sublevel))
(def text (icon-xref :text))
(def titlecase (icon-xref :titlecase))
(def toggle (icon-xref :toggle))
(def trash (icon-xref :trash))
(def tree (icon-xref :tree))
@ -89,6 +100,8 @@
(def undo-history (icon-xref :undo-history))
(def ungroup (icon-xref :ungroup))
(def unlock (icon-xref :unlock))
(def underline (icon-xref :underline))
(def uppercase (icon-xref :uppercase))
(def user (icon-xref :user))
(def recent (icon-xref :recent))

126
frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs
View file

@ -2,8 +2,8 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.workspace.sidebar.options.text
(:require
@ -65,12 +65,11 @@
on-pos-y-change #(on-position-change % :y)]
[:div.element-set
[:div.element-set-title (tr "workspace.options.measures")]
[:div.element-set-content
[:span (tr "workspace.options.size")]
;; WIDTH & HEIGHT
[:div.row-flex
[:span (tr "workspace.options.size")]
[:div.input-element.pixels
[:input.input-text {:type "number"
:min "0"
@ -199,7 +198,6 @@
[:div.element-set
[:div.element-set-title (tr "workspace.options.font-options")]
[:div.element-set-content
[:span (tr "workspace.options.font-family")]
[:div.row-flex
[:select.input-select {:value font-family
:on-change on-font-family-change}
@ -208,7 +206,6 @@
:key (:id font)}
(:name font)])]]
[:span (tr "workspace.options.font-weight")]
[:div.row-flex
[:div.editable-select
[:select.input-select {:value font-size
@ -240,39 +237,106 @@
:key (:name style)}
(:name style)])]]
[:span (tr "workspace.options.line-height-letter-spacing")]
[:div.row-flex
[:input.input-text {:type "number"
:step "0.1"
:min "0"
:max "200"
:value (-> line-height
(math/precision 2)
(d/coalesce-str "0"))
:on-change on-font-line-height-change}]
[:input.input-text {:type "number"
:step "0.1"
:min "0"
:max "200"
:value (-> letter-spacing
(math/precision 2)
(d/coalesce-str "0"))
:on-change on-font-letter-spacing-change}]]
[:span (tr "workspace.options.text-align")]
[:div.row-flex.align-icons
[:span {:class (when (= text-align "left") "current")
[:span.tooltip.tooltip-bottom
{:alt "Align left"
:class (when (= text-align "left") "current")
:on-click #(on-font-align-change % "left")}
i/text-align-left]
[:span {:class (when (= text-align "center") "current")
[:span.tooltip.tooltip-bottom
{:alt "Align center"
:class (when (= text-align "center") "current")
:on-click #(on-font-align-change % "center")}
i/text-align-center]
[:span {:class (when (= text-align "right") "current")
[:span.tooltip.tooltip-bottom
{:alt "Align right"
:class (when (= text-align "right") "current")
:on-click #(on-font-align-change % "right")}
i/text-align-right]
[:span {:class (when (= text-align "justify") "current")
[:span.tooltip.tooltip-bottom
{:alt "Justify"
:class (when (= text-align "justify") "current")
:on-click #(on-font-align-change % "justify")}
i/text-align-justify]]]]))
i/text-align-justify]]
[:div.row-flex
[:div.input-icon
[:span.icon-before.tooltip.tooltip-bottom
{:alt "Line height"}
i/line-height]
[:input.input-text {:type "number"
:step "0.1"
:min "0"
:max "200"
:value (-> line-height
(math/precision 2)
(d/coalesce-str "0"))
:on-change on-font-line-height-change}]]
[:div.input-icon
[:span.icon-before.tooltip.tooltip-bottom
{:alt "Letter spacing"}
i/letter-spacing]
[:input.input-text {:type "number"
:step "0.1"
:min "0"
:max "200"
:value (-> letter-spacing
(math/precision 2)
(d/coalesce-str "0"))
:on-change on-font-letter-spacing-change}]]]
[:div.row-flex
[:div.align-icons
[:span.tooltip.tooltip-bottom
{:alt "Align top"}
i/align-top]
[:span.tooltip.tooltip-bottom
{:alt "Align middle"}
i/align-middle]
[:span.tooltip.tooltip-bottom
{:alt "Align bottom"}
i/align-bottom]]
[:div.align-icons
[:span.tooltip.tooltip-bottom
{:alt "Auto height"}
i/auto-height]
[:span.tooltip.tooltip-bottom
{:alt "Auto width"}
i/auto-width]
[:span.tooltip.tooltip-bottom
{:alt "Fixed size"}
i/auto-fix]]]
[:div.row-flex
[:span.element-set-subtitle "Decoration"]
[:div.align-icons
[:span.tooltip.tooltip-bottom
{:alt "None"}
i/minus]
[:span.tooltip.tooltip-bottom
{:alt "Underline"}
i/underline]
[:span.tooltip.tooltip-bottom
{:alt "Strikethrough"}
i/strikethrough]]]
[:div.row-flex
[:span.element-set-subtitle "Case"]
[:div.align-icons
[:span.tooltip.tooltip-bottom
{:alt "None"}
i/minus]
[:span.tooltip.tooltip-bottom
{:alt "Uppercase"}
i/uppercase]
[:span.tooltip.tooltip-bottom
{:alt "Lowercase"}
i/lowercase]
[:span.tooltip.tooltip-bottom
{:alt "Titlecase"}
i/titlecase]]]
]]))
(def +fonts+
[{:id "sourcesanspro"