Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

Merge pull request #392 from penpot/text-options-ui

Browse source 
Text options ui & bug fixing
This commit is contained in:
Andrey Antukh 2020-11-23 15:17:14 +01:00 • committed by GitHub
commit e1db6d3a37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 123 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/resources/styles/common/framework.scss
View file

@ -373,9 +373,10 @@ ul.slider-dots {
font-size: $fs12;
height: 20px;
position: absolute;
right: 3px;
right: $small;
text-align: right;
top: 26%;
width: 20px;
width: 18px;
}
.after {
@ -539,7 +540,7 @@ input.element-name {
@extend .input-text;
background-image: url("/images/icons/arrow-down-white.svg");
background-repeat: no-repeat;
background-position: 95% 48%;
background-position: calc(100% - 4px) 48%;
background-size: 10px;
cursor: pointer;

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

@ -226,17 +226,17 @@
.element-set-subtitle {
color: $color-gray-20;
font-size: $fs11;
width: 12rem;
width: 64px;
}
.lock-size {
cursor: pointer;
width: 20%;
margin: auto;
svg {
fill: $color-gray-20;
height: 15px;
width: 15px;
height: 14px;
width: 14px;
&:hover {
fill: $color-primary;
@ -518,16 +518,15 @@
}
.align-icons {
border: 1px solid $color-gray-60;
border-radius: $br-small;
cursor: pointer;
display: flex;
flex: 1;
justify-content: space-between;
margin-left: $small;
padding: $small;
justify-content: flex-end;
margin: $small 0 $small $small;
padding: 0 $x-small;
&:first-child {
justify-content: space-between;
margin-left: 0;
}
@ -542,8 +541,8 @@
svg {
fill: $color-gray-30;
height: 15px;
width: 15px;
height: 14px;
width: 14px;
}
&:hover,
@ -651,12 +650,12 @@
display: flex;
height: 18px;
position: relative;
width: 18px;
width: 14px;
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
height: 14px;
width: 14px;
}
}
}
@ -927,6 +926,10 @@
}
}
.spacing-options {
display: flex;
}
.asset-group {
.typography-entry {
margin: 0.25rem 0;

17
frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs
View file

@ -114,13 +114,6 @@
(when (options :size)
[:div.row-flex
[:span.element-set-subtitle (t locale "workspace.options.size")]
[:div.lock-size {:class (classnames
:selected (true? proportion-lock)
:disabled (= proportion-lock :multiple))
:on-click on-proportion-lock-change}
(if proportion-lock
i/lock
i/unlock)]
[:div.input-element.width
[:input.input-text {:type "number"
:min "0"
@ -138,7 +131,15 @@
:placeholder "--"
:on-click select-all
:on-change on-height-change
:value (attr->string :height values)}]]])
:value (attr->string :height values)}]]
[:div.lock-size {:class (classnames
:selected (true? proportion-lock)
:disabled (= proportion-lock :multiple))
:on-click on-proportion-lock-change}
(if proportion-lock
i/lock
i/unlock)]])
;; POSITION
(when (options :position)

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

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