diff --git a/frontend/resources/images/icons/align-bottom.svg b/frontend/resources/images/icons/align-bottom.svg
new file mode 100644
index 0000000000..79e156fd82
--- /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 0000000000..60a538eb39
--- /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 0000000000..4e95be8d3b
--- /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 0000000000..38c4d54e88
--- /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 0000000000..963dda6d35
--- /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 0000000000..c88a331e38
--- /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 0000000000..6098501c73
--- /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 0000000000..ee08402cc1
--- /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 0000000000..9741dae12c
--- /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 0000000000..bbec524b4b
--- /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 0000000000..473b6c8cb5
--- /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 0000000000..3e35ddc931
--- /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 0000000000..3c681ac759
--- /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 776f36fe85..c92565f065 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 9ced54c589..5abc8c6e6d 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 37fb6071eb..27c72ce406 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 b7ab8f4032..b49aa5e04c 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 9e12c7a000..d234e1980c 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 9bddea6ede..15a68033d7 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"