diff --git a/frontend/resources/images/icons/comments-refactor.svg b/frontend/resources/images/icons/comments-refactor.svg new file mode 100644 index 000000000..9e915f77e --- /dev/null +++ b/frontend/resources/images/icons/comments-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/distribute-horizontally-refactor.svg b/frontend/resources/images/icons/distribute-horizontally-refactor.svg new file mode 100644 index 000000000..720f79b73 --- /dev/null +++ b/frontend/resources/images/icons/distribute-horizontally-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/graphics-refactor.svg b/frontend/resources/images/icons/graphics-refactor.svg new file mode 100644 index 000000000..3061f2b75 --- /dev/null +++ b/frontend/resources/images/icons/graphics-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/open-link-refactor.svg b/frontend/resources/images/icons/open-link-refactor.svg index c3bcd5df1..c98940582 100644 --- a/frontend/resources/images/icons/open-link-refactor.svg +++ b/frontend/resources/images/icons/open-link-refactor.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/resources/images/icons/open-refactor.svg b/frontend/resources/images/icons/open-refactor.svg new file mode 100644 index 000000000..294e1741b --- /dev/null +++ b/frontend/resources/images/icons/open-refactor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/icons/text-autoheight-refactor.svg b/frontend/resources/images/icons/text-autoheight-refactor.svg new file mode 100644 index 000000000..e7fe97560 --- /dev/null +++ b/frontend/resources/images/icons/text-autoheight-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/text-ltr-refactor.svg b/frontend/resources/images/icons/text-ltr-refactor.svg new file mode 100644 index 000000000..8acf7188b --- /dev/null +++ b/frontend/resources/images/icons/text-ltr-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/text-rtl-refactor.svg b/frontend/resources/images/icons/text-rtl-refactor.svg new file mode 100644 index 000000000..217b18c12 --- /dev/null +++ b/frontend/resources/images/icons/text-rtl-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index b0dd2f455..6f3c96ba1 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/frontend/resources/styles/common/refactor/spacing.scss @@ -37,6 +37,7 @@ $s-104: calc(var(--s-4) * 25); $s-120: calc(var(--s-4) * 30); $s-136: calc(var(--s-4) * 34); $s-152: calc(var(--s-4) * 38); +$s-160: calc(var(--s-4) * 40); $s-192: calc(var(--s-4) * 48); $s-196: calc(var(--s-4) * 49); $s-200: calc(var(--s-4) * 50); diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index c435ef76d..0b5b16194 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -288,6 +288,7 @@ (def close-refactor (icon-xref :close-refactor)) (def close-small-refactor (icon-xref :close-small-refactor)) (def component-refactor (icon-xref :component-refactor)) +(def comments-refactor (icon-xref :comments-refactor)) (def copy-refactor (icon-xref :copy-refactor)) (def column-refactor (icon-xref :column-refactor)) (def column-reverse-refactor (icon-xref :column-reverse-refactor)) @@ -296,6 +297,7 @@ (def corner-radius-refactor (icon-xref :corner-radius-refactor)) (def curve-refactor (icon-xref :curve-refactor)) (def distribute-vertical-sapcing-refactor (icon-xref :distribute-vertical-spacing-refactor)) +(def distribute-horizontally-refactor (icon-xref :distribute-horizontally-refactor)) (def delete-refactor (icon-xref :delete-refactor)) (def delete-text-refactor (icon-xref :delete-text-refactor)) (def desc-sort-refactor (icon-xref :desc-sort-refactor)) @@ -319,6 +321,7 @@ (def grid-square-refactor (icon-xref :grid-square-refactor)) (def grid-refactor (icon-xref :grid-refactor)) (def group-refactor (icon-xref :group-refactor)) +(def graphics-refactor (icon-xref :graphics-refactor)) (def gutter-horizontal-refactor (icon-xref :gutter-horizontal-refactor)) (def gutter-vertical-refactor (icon-xref :gutter-vertical-refactor)) (def hide-refactor (icon-xref :hide-refactor)) @@ -344,6 +347,7 @@ (def menu-refactor (icon-xref :menu-refactor)) (def move-refactor (icon-xref :move-refactor)) (def open-link-refactor (icon-xref :open-link-refactor)) +(def open-refactor (icon-xref :open-refactor)) (def padding-bottom-refactor (icon-xref :padding-bottom-refactor)) (def padding-top-refactor (icon-xref :padding-top-refactor)) (def padding-top-bottom-refactor (icon-xref :padding-top-bottom-refactor)) @@ -369,22 +373,22 @@ (def text-align-right-refactor (icon-xref :text-align-right-refactor)) (def text-auto-height-refactor (icon-xref :text-auto-height-refactor)) (def text-auto-width-refactor (icon-xref :text-auto-width-refactor)) - (def text-fixed-refactor (icon-xref :textfixed--refactor)) (def text-justify-refactor (icon-xref :text-justify-refactor)) (def text-letterspacing-refactor (icon-xref :text-letterspacing-refactor)) (def text-lineheight-refactor (icon-xref :text-lineheight-refactor)) (def text-lowercase-refactor (icon-xref :text-lowercase-refactor)) -(def text-LTR-refactor (icon-xref :text-LTR-refactor)) -(def text-middle-refactor (icon-xref :text-middle-refactor)) -(def text-mixed-refactor (icon-xref :text-mixed-refactor)) (def text-palette-refactor (icon-xref :text-palette-refactor)) (def text-paragraph-refactor (icon-xref :text-paragraph-refactor)) (def text-refactor (icon-xref :text-refactor)) -(def text-RTL-refactor (icon-xref :text-RTL-refactor)) +(def text-bottom-refactor (icon-xref :text-bottom-refactor)) +(def text-ltr-refactor (icon-xref :text-ltr-refactor)) +(def text-rtl-refactor (icon-xref :text-rtl-refactor)) +(def text-middle-refactor (icon-xref :text-middle-refactor)) +(def text-mixed-refactor (icon-xref :text-mixed-refactor)) (def text-stroked-refactor (icon-xref :text-stroked-refactor)) (def text-top-refactor (icon-xref :text-top-refactor)) -(def text-underlined-refactor (icon-xref :text-underlined-refactor)) +(def text-underlined-refactor (icon-xref :text-undelined-refactor)) (def text-uppercase-refactor (icon-xref :text-uppercase-refactor)) (def tick-refactor (icon-xref :tick-refactor)) (def unlock-refactor (icon-xref :unlock-refactor)) diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index cc2908eb5..0a08ee478 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -5,6 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.left-toolbar + (:require-macros [app.main.style :refer [css]]) (:require [app.common.geom.point :as gpt] [app.common.media :as cm] @@ -51,7 +52,7 @@ {:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :on-click on-click} - i/image + i/img-refactor [:& file-uploader {:input-id "image-upload" :accept cm/str-image-types @@ -70,6 +71,8 @@ read-only? (mf/use-ctx ctx/workspace-read-only?) show-palette-btn? (and (not ^boolean read-only?) (not ^boolean new-css-system)) + hide-toolbar* (mf/use-state false) + hide-toolbar? (deref hide-toolbar*) interrupt @@ -131,7 +134,111 @@ (-> (dw/toggle-layout-flag :debug-panel) (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))) - ] + toggle-toolbar + (mf/use-fn + (fn [] + (swap! hide-toolbar* not)))] + + (if new-css-system + [:aside {:class (dom/classnames (css :main-toolbar) true + (css :hidden-toolbar) hide-toolbar?)} + [:ul {:class (css :main-toolbar-options)} + [:li + [:button + {:title (tr "workspace.toolbar.move" (sc/get-tooltip :move)) + :aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move)) + :class (when (and (nil? selected-drawtool) + (not edition)) "selected") + :on-click interrupt} + i/move-refactor]] + (when-not ^boolean read-only? + [:* + [:li + [:button + {:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) + :aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) + :class (when (= selected-drawtool :frame) "selected") + :on-click select-drawtool + :data-tool "frame" + :data-test "artboard-btn"} + i/board-refactor]] + [:li + [:button + {:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) + :aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) + :class (when (= selected-drawtool :rect) "selected") + :on-click select-drawtool + :data-tool "rect" + :data-test "rect-btn"} + i/rectangle-refactor]] + [:li + [:button + {:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) + :aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) + :class (when (= selected-drawtool :circle) "selected") + :on-click select-drawtool + :data-tool "circle" + :data-test "ellipse-btn"} + i/elipse-refactor]] + [:li + [:button + {:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) + :aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) + :class (when (= selected-drawtool :text) "selected") + :on-click select-drawtool + :data-tool "text"} + i/text-refactor]] + + [:& image-upload] + + [:li + [:button + {:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) + :aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) + :class (when (= selected-drawtool :curve) "selected") + :on-click select-drawtool + :data-tool "curve" + :data-test "curve-btn"} + i/curve-refactor]] + [:li + [:button + {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) + :aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) + :class (when (= selected-drawtool :path) "selected") + :on-click select-drawtool + :data-tool "path" + :data-test "path-btn"} + i/pentool-refactor]]]) + + ;; [:li + ;; [:button + ;; {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) + ;; :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) + ;; :class (when (= selected-drawtool :comments) "selected") + ;; :on-click select-drawtool + ;; :data-tool "comments"} + ;; i/comments-refactor]] + ] + [:button {:class (dom/classnames (css :toolbar-handler) true) + :on-click toggle-toolbar} + [:div {:class (dom/classnames (css :toolbar-handler-btn) true)}]] + + [:ul {:class (dom/classnames (css :main-toolbar-panels) true)} + [:li + [:button + {:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts)) + :aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts)) + :class (when (contains? layout :shortcuts) "selected") + :on-click toggle-shortcuts} + i/shortcut] + + (when *assert* + [:button + {:title "Debugging tool" + :class (when (contains? layout :debug-panel) "selected") + :on-click toggle-debug-panel} + i/bug])]]] + [:aside.left-toolbar [:ul.left-toolbar-options @@ -242,4 +349,6 @@ {:title "Debugging tool" :class (when (contains? layout :debug-panel) "selected") :on-click toggle-debug-panel} - i/bug])]]])) + i/bug])]]]))) + + diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.css.json b/frontend/src/app/main/ui/workspace/left_toolbar.css.json new file mode 100644 index 000000000..a632aa88e --- /dev/null +++ b/frontend/src/app/main/ui/workspace/left_toolbar.css.json @@ -0,0 +1 @@ +{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.scss b/frontend/src/app/main/ui/workspace/left_toolbar.scss new file mode 100644 index 000000000..3f3b182d9 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/left_toolbar.scss @@ -0,0 +1,78 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// 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) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.main-toolbar { + position: absolute; + top: $s-28; + left: calc(50% - $s-160); + display: flex; + align-items: center; + flex-direction: column; + height: $s-56; + padding: $s-8 $s-16; + border-radius: $s-8; + z-index: $z-index-20; + background-color: var(--color-background-primary); + transition: top 1s ease; + + .main-toolbar-options { + position: relative; + display: flex; + align-items: center; + margin: 0; + opacity: $op-10; + transition: opacity 1s ease; + li { + position: relative; + + button { + @extend .button-primary; + height: $s-36; + width: $s-36; + flex-shrink: 0; + background-color: transparent; + border-radius: $s-8; + border: none; + + svg { + @extend .button-icon; + stroke: var(--color-foreground-secondary); + } + } + } + } + .toolbar-handler { + @include flexCenter; + @include buttonStyle; + position: absolute; + left: 0; + bottom: 0; + height: $s-12; + width: 100%; + + .toolbar-handler-btn { + height: $s-4; + width: 100%; + max-width: $s-64; + padding: 0; + border-radius: $s-4; + background-color: var(--palette-handler-background-color); + } + } + &.hidden-toolbar { + top: 0; + z-index: $z-index-1; + .main-toolbar-options { + opacity: $op-0; + } + } + + ul.main-toolbar-panels { + display: none; + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index 92272b96a..5513216c0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss @@ -19,6 +19,8 @@ } .special-title { + @include textEllipsis; + width: calc(var(--width, 256px) - $s-80); color: var(--title-foreground-color-hover); } .special-subtitle { diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss index 4163f1d0c..072a072a5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss @@ -10,7 +10,7 @@ @include flexCenter; position: absolute; top: $s-48; - left: $s-48; + left: 0; padding: $s-4; border-radius: $br-8; background: var(--color-background-primary); @@ -30,7 +30,7 @@ border-radius: $br-5; svg { @include flexCenter; - height: $s-12; + height: $s-16; width: $s-16; color: transparent; fill: none; diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index 51c8984dd..41c6120e7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -84,6 +84,7 @@ transition: none; color: var(--layer-row-foreground-color); .page-name { + @include textEllipsis; flex-grow: 1; padding-left: $s-2; }