From 5c3499057eb88e71052948f2034cc0ce23dfd8d6 Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Thu, 9 Apr 2020 11:30:44 +0200 Subject: [PATCH] :tada: Add new text options layout & styles. --- .../resources/images/icons/align-bottom.svg | 3 + .../resources/images/icons/align-middle.svg | 3 + frontend/resources/images/icons/align-top.svg | 3 + frontend/resources/images/icons/auto-fix.svg | 3 + .../resources/images/icons/auto-height.svg | 3 + .../resources/images/icons/auto-width.svg | 3 + .../resources/images/icons/letter-spacing.svg | 3 + .../resources/images/icons/line-height.svg | 3 + frontend/resources/images/icons/lowercase.svg | 3 + .../resources/images/icons/strikethrough.svg | 3 + frontend/resources/images/icons/titlecase.svg | 3 + frontend/resources/images/icons/underline.svg | 3 + frontend/resources/images/icons/uppercase.svg | 3 + frontend/resources/locales.json | 2 +- .../styles/main/partials/colorpicker.scss | 1 + .../partials/sidebar-element-options.scss | 84 +++++++++--- .../styles/main/partials/workspace.scss | 4 +- frontend/src/uxbox/builtins/icons.cljs | 13 ++ .../ui/workspace/sidebar/options/text.cljs | 126 +++++++++++++----- 19 files changed, 219 insertions(+), 50 deletions(-) create mode 100644 frontend/resources/images/icons/align-bottom.svg create mode 100644 frontend/resources/images/icons/align-middle.svg create mode 100644 frontend/resources/images/icons/align-top.svg create mode 100644 frontend/resources/images/icons/auto-fix.svg create mode 100644 frontend/resources/images/icons/auto-height.svg create mode 100644 frontend/resources/images/icons/auto-width.svg create mode 100644 frontend/resources/images/icons/letter-spacing.svg create mode 100644 frontend/resources/images/icons/line-height.svg create mode 100644 frontend/resources/images/icons/lowercase.svg create mode 100644 frontend/resources/images/icons/strikethrough.svg create mode 100644 frontend/resources/images/icons/titlecase.svg create mode 100644 frontend/resources/images/icons/underline.svg create mode 100644 frontend/resources/images/icons/uppercase.svg diff --git a/frontend/resources/images/icons/align-bottom.svg b/frontend/resources/images/icons/align-bottom.svg new file mode 100644 index 000000000..79e156fd8 --- /dev/null +++ b/frontend/resources/images/icons/align-bottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-middle.svg b/frontend/resources/images/icons/align-middle.svg new file mode 100644 index 000000000..60a538eb3 --- /dev/null +++ b/frontend/resources/images/icons/align-middle.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-top.svg b/frontend/resources/images/icons/align-top.svg new file mode 100644 index 000000000..4e95be8d3 --- /dev/null +++ b/frontend/resources/images/icons/align-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-fix.svg b/frontend/resources/images/icons/auto-fix.svg new file mode 100644 index 000000000..38c4d54e8 --- /dev/null +++ b/frontend/resources/images/icons/auto-fix.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-height.svg b/frontend/resources/images/icons/auto-height.svg new file mode 100644 index 000000000..963dda6d3 --- /dev/null +++ b/frontend/resources/images/icons/auto-height.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-width.svg b/frontend/resources/images/icons/auto-width.svg new file mode 100644 index 000000000..c88a331e3 --- /dev/null +++ b/frontend/resources/images/icons/auto-width.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/letter-spacing.svg b/frontend/resources/images/icons/letter-spacing.svg new file mode 100644 index 000000000..6098501c7 --- /dev/null +++ b/frontend/resources/images/icons/letter-spacing.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/line-height.svg b/frontend/resources/images/icons/line-height.svg new file mode 100644 index 000000000..ee08402cc --- /dev/null +++ b/frontend/resources/images/icons/line-height.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/lowercase.svg b/frontend/resources/images/icons/lowercase.svg new file mode 100644 index 000000000..9741dae12 --- /dev/null +++ b/frontend/resources/images/icons/lowercase.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/strikethrough.svg b/frontend/resources/images/icons/strikethrough.svg new file mode 100644 index 000000000..bbec524b4 --- /dev/null +++ b/frontend/resources/images/icons/strikethrough.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/titlecase.svg b/frontend/resources/images/icons/titlecase.svg new file mode 100644 index 000000000..473b6c8cb --- /dev/null +++ b/frontend/resources/images/icons/titlecase.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/underline.svg b/frontend/resources/images/icons/underline.svg new file mode 100644 index 000000000..3e35ddc93 --- /dev/null +++ b/frontend/resources/images/icons/underline.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/uppercase.svg b/frontend/resources/images/icons/uppercase.svg new file mode 100644 index 000000000..3c681ac75 --- /dev/null +++ b/frontend/resources/images/icons/uppercase.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index 776f36fe8..c92565f06 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -912,7 +912,7 @@ "workspace.options.font-options" : { "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:200" ], "translations" : { - "en" : "Fonts & Font Size", + "en" : "Text", "fr" : "TODO" } }, diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index 9ced54c58..5abc8c6e6 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/frontend/resources/styles/main/partials/colorpicker.scss @@ -165,6 +165,7 @@ font-size: $fs13; &:focus { + border-color: $color-primary; color: $color-white; } } diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 37fb6071e..27c72ce40 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -186,7 +186,8 @@ .input-text { background-color: $color-gray-50; - border-color: $color-gray-40; + border: 1px solid transparent; + border-bottom-color: $color-gray-40; color: $color-gray-10; font-size: $fs13; margin: $x-small; @@ -195,7 +196,7 @@ &:focus { color: lighten($color-gray-10, 8%); - border-color: $color-gray-20; + border-color: $color-primary; } } @@ -318,29 +319,31 @@ } .editable-select { - position: relative; - width: 100%; height: 38px; + margin-right: $small; + position: relative; + width: 60%; .input-text { - position: absolute; - top: 0; left: 0; - width: 80%; + position: absolute; + top: -1px; + width: 60%; } - + .input-select { + background-color: transparent; + border: none; + border-bottom: 1px solid $color-gray-40; + color: transparent; + left: 0; position: absolute; top: 0; - left: 0; - border: none; - color: transparent; - background-color: transparent; width: 100%; option { color: $color-gray-60; - background: $color-gray-60; + background: $color-white; font-size: $fs12; } } @@ -381,16 +384,37 @@ } +.row-flex.align-icons { + margin-left: 0; +} + .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; + + &:first-child { + margin-left: 0; + } span { + align-items: center; + display: flex; + height: 18px; + justify-content: center; + margin-right: $small; + position: relative; + width: 18px; svg { fill: $color-gray-30; - height: 20px; - margin: $x-small $small; - width: 20px; + height: 15px; + width: 15px; } &:hover, @@ -402,6 +426,10 @@ } + &:last-child { + margin-right: 0; + } + } @@ -455,3 +483,27 @@ } } } + +.input-icon { + align-items: center; + display: flex; + width: 100%; + + &:first-child { + margin-right: $small; + } + + .icon-before { + align-items: center; + display: flex; + height: 18px; + position: relative; + width: 18px; + + svg { + fill: $color-gray-30; + height: 16px; + width: 16px; + } + } +} diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index b7ab8f403..b49aa5e04 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -50,11 +50,11 @@ background-color: $color-canvas; display: flex; height: 100%; - width: calc(100% - 500px); + width: calc(100% - 520px); padding: 0; margin: 0; position: fixed; - right: 230px; + right: 240px; &.scrolling { cursor: grab; diff --git a/frontend/src/uxbox/builtins/icons.cljs b/frontend/src/uxbox/builtins/icons.cljs index 9e12c7a00..d234e1980 100644 --- a/frontend/src/uxbox/builtins/icons.cljs +++ b/frontend/src/uxbox/builtins/icons.cljs @@ -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)) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs index 9bddea6ed..15a68033d 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs @@ -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 -;; Copyright (c) 2015-2017 Juan de la Cruz +;; Copyright (c) 2015-2020 Andrey Antukh +;; Copyright (c) 2015-2020 Juan de la Cruz (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"