3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-24 00:57:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Layout changes

Browse source
This commit is contained in:
alonso.torres 2020-11-18 13:36:37 +01:00
parent 6e57d93f74
commit 08589889fd
2 changed files with 93 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -62,7 +62,7 @@
(on-change {:text-align new-align}))] (on-change {:text-align new-align}))]
;; --- Align ;; --- Align
[:div.row-flex.align-icons [:div.align-icons
[:span.tooltip.tooltip-bottom [:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.align-left") {:alt (t locale "workspace.options.text-options.align-left")
:class (dom/classnames :current (= "left" text-align)) :class (dom/classnames :current (= "left" text-align))
@ -85,58 +85,55 @@
i/text-align-justify]])) i/text-align-justify]]))
(mf/defc additional-options (mf/defc vertical-align
[{:keys [shapes editor ids values locale on-change] :as props}] [{:keys [shapes editor ids values locale on-change] :as props}]
(let [{:keys [vertical-align]} values (let [{:keys [vertical-align]} values
to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll)))
grow-type (->> shapes (map :grow-type) (remove nil?) (into #{}) to-single-value)
vertical-align (or vertical-align "top") vertical-align (or vertical-align "top")
handle-change-grow
(fn [event grow-type]
(st/emit! (dwc/update-shapes ids #(assoc % :grow-type grow-type))))
handle-change handle-change
(fn [event new-align] (fn [event new-align]
(on-change {:vertical-align new-align}))] (on-change {:vertical-align new-align}))]
[:div.row-flex [:div.align-icons
[:div.align-icons [:span.tooltip.tooltip-bottom
[:span.tooltip.tooltip-bottom {:alt (t locale "workspace.options.text-options.align-top")
{:alt (t locale "workspace.options.text-options.align-top") :class (dom/classnames :current (= "top" vertical-align))
:class (dom/classnames :current (= "top" vertical-align)) :on-click #(handle-change % "top")}
:on-click #(handle-change % "top")} i/align-top]
i/align-top] [:span.tooltip.tooltip-bottom
[:span.tooltip.tooltip-bottom {:alt (t locale "workspace.options.text-options.align-middle")
{:alt (t locale "workspace.options.text-options.align-middle") :class (dom/classnames :current (= "center" vertical-align))
:class (dom/classnames :current (= "center" vertical-align)) :on-click #(handle-change % "center")}
:on-click #(handle-change % "center")} i/align-middle]
i/align-middle] [:span.tooltip.tooltip-bottom
[:span.tooltip.tooltip-bottom {:alt (t locale "workspace.options.text-options.align-bottom")
{:alt (t locale "workspace.options.text-options.align-bottom") :class (dom/classnames :current (= "bottom" vertical-align))
:class (dom/classnames :current (= "bottom" vertical-align)) :on-click #(handle-change % "bottom")}
:on-click #(handle-change % "bottom")} i/align-bottom]]))
i/align-bottom]]
[:div.align-icons (mf/defc grow-options
[:span.tooltip.tooltip-bottom [{:keys [shapes editor ids values locale on-change] :as props}]
{:alt (t locale "workspace.options.text-options.grow-fixed") (let [to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll)))
:class (dom/classnames :current (= :fixed grow-type)) grow-type (->> shapes (map :grow-type) (remove nil?) (into #{}) to-single-value)
:on-click #(handle-change-grow % :fixed)} handle-change-grow
i/auto-fix] (fn [event grow-type]
[:span.tooltip.tooltip-bottom (st/emit! (dwc/update-shapes ids #(assoc % :grow-type grow-type))))]
{:alt (t locale "workspace.options.text-options.grow-auto-width")
:class (dom/classnames :current (= :auto-width grow-type)) [:div.align-icons
:on-click #(handle-change-grow % :auto-width)} [:span.tooltip.tooltip-bottom
i/auto-width] {:alt (t locale "workspace.options.text-options.grow-fixed")
[:span.tooltip.tooltip-bottom :class (dom/classnames :current (= :fixed grow-type))
{:alt (t locale "workspace.options.text-options.grow-auto-height") :on-click #(handle-change-grow % :fixed)}
:class (dom/classnames :current (= :auto-height grow-type)) i/auto-fix]
:on-click #(handle-change-grow % :auto-height)} [:span.tooltip.tooltip-bottom
i/auto-height]]])) {:alt (t locale "workspace.options.text-options.grow-auto-width")
:class (dom/classnames :current (= :auto-width grow-type))
:on-click #(handle-change-grow % :auto-width)}
i/auto-width]
[:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.grow-auto-height")
:class (dom/classnames :current (= :auto-height grow-type))
:on-click #(handle-change-grow % :auto-height)}
i/auto-height]]))
(mf/defc text-decoration-options (mf/defc text-decoration-options
[{:keys [editor ids values locale on-change] :as props}] [{:keys [editor ids values locale on-change] :as props}]
@ -147,26 +144,24 @@
handle-change handle-change
(fn [event type] (fn [event type]
(on-change {:text-decoration type}))] (on-change {:text-decoration type}))]
[:div.row-flex [:div.align-icons
[:span.element-set-subtitle (t locale "workspace.options.text-options.decoration")] [:span.tooltip.tooltip-bottom
[:div.align-icons {:alt (t locale "workspace.options.text-options.none")
[:span.tooltip.tooltip-bottom :class (dom/classnames :current (= "none" text-decoration))
{:alt (t locale "workspace.options.text-options.none") :on-click #(handle-change % "none")}
:class (dom/classnames :current (= "none" text-decoration)) i/minus]
:on-click #(handle-change % "none")}
i/minus]
[:span.tooltip.tooltip-bottom [:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.underline") {:alt (t locale "workspace.options.text-options.underline")
:class (dom/classnames :current (= "underline" text-decoration)) :class (dom/classnames :current (= "underline" text-decoration))
:on-click #(handle-change % "underline")} :on-click #(handle-change % "underline")}
i/underline] i/underline]
[:span.tooltip.tooltip-bottom [:span.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.strikethrough") {:alt (t locale "workspace.options.text-options.strikethrough")
:class (dom/classnames :current (= "line-through" text-decoration)) :class (dom/classnames :current (= "line-through" text-decoration))
:on-click #(handle-change % "line-through")} :on-click #(handle-change % "line-through")}
i/strikethrough]]])) i/strikethrough]]))
(defn generate-typography-name [{:keys [font-id font-variant-id] :as typography}] (defn generate-typography-name [{:keys [font-id font-variant-id] :as typography}]
(let [{:keys [name]} (fonts/get-font-data font-id)] (let [{:keys [name]} (fonts/get-font-data font-id)]
@ -273,9 +268,16 @@
[:> typography-options opts]) [:> typography-options opts])
[:div.element-set-content [:div.element-set-content
[:> text-align-options opts]
[:> additional-options opts] [:div.row-flex
[:> text-decoration-options opts]]])) [:> text-align-options opts]
[:> vertical-align opts]]
[:div.row-flex
[:> grow-options opts]
[:> text-decoration-options opts]]
]]))
(mf/defc options (mf/defc options
[{:keys [shape] :as props}] [{:keys [shape] :as props}]

51
frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
View file

@ -135,7 +135,7 @@
(let [new-spacing (dom/get-target-val event)] (let [new-spacing (dom/get-target-val event)]
(on-change {attr new-spacing})))] (on-change {attr new-spacing})))]
[:div.row-flex [:div.spacing-options
[:div.input-icon [:div.input-icon
[:span.icon-before.tooltip.tooltip-bottom [:span.icon-before.tooltip.tooltip-bottom
{:alt (t locale "workspace.options.text-options.line-height")} {:alt (t locale "workspace.options.text-options.line-height")}
@ -171,29 +171,27 @@
handle-change handle-change
(fn [event type] (fn [event type]
(on-change {:text-transform type}))] (on-change {:text-transform type}))]
[:div.row-flex [:div.align-icons
[:span.element-set-subtitle (t locale "workspace.options.text-options.text-case")] [:span.tooltip.tooltip-bottom
[:div.align-icons {:alt (t locale "workspace.options.text-options.none")
[:span.tooltip.tooltip-bottom :class (dom/classnames :current (= "none" text-transform))
{:alt (t locale "workspace.options.text-options.none") :on-click #(handle-change % "none")}
:class (dom/classnames :current (= "none" text-transform)) i/minus]
:on-click #(handle-change % "none")} [:span.tooltip.tooltip-bottom
i/minus] {:alt (t locale "workspace.options.text-options.uppercase")
[:span.tooltip.tooltip-bottom :class (dom/classnames :current (= "uppercase" text-transform))
{:alt (t locale "workspace.options.text-options.uppercase") :on-click #(handle-change % "uppercase")}
:class (dom/classnames :current (= "uppercase" text-transform)) i/uppercase]
:on-click #(handle-change % "uppercase")} [:span.tooltip.tooltip-bottom
i/uppercase] {:alt (t locale "workspace.options.text-options.lowercase")
[:span.tooltip.tooltip-bottom :class (dom/classnames :current (= "lowercase" text-transform))
{:alt (t locale "workspace.options.text-options.lowercase") :on-click #(handle-change % "lowercase")}
:class (dom/classnames :current (= "lowercase" text-transform)) i/lowercase]
:on-click #(handle-change % "lowercase")} [:span.tooltip.tooltip-bottom
i/lowercase] {:alt (t locale "workspace.options.text-options.titlecase")
[:span.tooltip.tooltip-bottom :class (dom/classnames :current (= "capitalize" text-transform))
{:alt (t locale "workspace.options.text-options.titlecase") :on-click #(handle-change % "capitalize")}
:class (dom/classnames :current (= "capitalize" text-transform)) i/titlecase]]))
:on-click #(handle-change % "capitalize")}
i/titlecase]]]))
(mf/defc typography-options (mf/defc typography-options
[{:keys [ids editor values on-change]}] [{:keys [ids editor values on-change]}]
@ -206,8 +204,9 @@
[:div.element-set-content [:div.element-set-content
[:> font-options opts] [:> font-options opts]
[:> spacing-options opts] [:div.row-flex
[:> text-transform-options opts]])) [:> spacing-options opts]
[:> text-transform-options opts]]]))
(mf/defc typography-entry (mf/defc typography-entry