From 93a7a8e8561808b253ea7168a405acdaa9c822b3 Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 28 Dec 2023 17:22:09 +0100 Subject: [PATCH] :recycle: Remove new-css-system from workspace palettes --- frontend/resources/styles/main-default.scss | 2 - .../styles/main/partials/color-palette.scss | 293 ------------------ .../styles/main/partials/text-palette.scss | 30 -- frontend/src/app/main/ui/workspace.cljs | 16 +- .../ui/workspace/color_palette_ctx_menu.cljs | 66 ++-- .../ui/workspace/color_palette_ctx_menu.scss | 4 +- .../app/main/ui/workspace/colorpalette.cljs | 216 ------------- .../src/app/main/ui/workspace/palette.cljs | 129 ++++---- .../ui/workspace/text_palette_ctx_menu.cljs | 29 +- .../ui/workspace/text_palette_ctx_menu.scss | 2 +- .../app/main/ui/workspace/textpalette.cljs | 162 ---------- 11 files changed, 120 insertions(+), 829 deletions(-) delete mode 100644 frontend/resources/styles/main/partials/color-palette.scss delete mode 100644 frontend/resources/styles/main/partials/text-palette.scss delete mode 100644 frontend/src/app/main/ui/workspace/colorpalette.cljs delete mode 100644 frontend/src/app/main/ui/workspace/textpalette.cljs diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index 3d8346fc5e..8aae767cf1 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -58,8 +58,6 @@ @import "main/partials/viewer-header"; @import "main/partials/viewer-thumbnails"; @import "main/partials/activity-bar"; -@import "main/partials/color-palette"; -@import "main/partials/text-palette"; @import "main/partials/colorpicker"; @import "main/partials/dashboard"; @import "main/partials/dashboard-header"; diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss deleted file mode 100644 index 2b622490c2..0000000000 --- a/frontend/resources/styles/main/partials/color-palette.scss +++ /dev/null @@ -1,293 +0,0 @@ -// 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 - -.color-palette { - @include animation(0, 0.3s, fadeInUp); - align-items: center; - background-color: $color-gray-50; - border-top: 1px solid $color-gray-60; - - display: grid; - grid-template-columns: auto auto 1fr auto auto; - - z-index: 11; - - & .right-arrow, - & .left-arrow { - cursor: pointer; - - svg { - fill: $color-gray-20; - height: 1rem; - margin: 0 0.5rem; - width: 1rem; - } - - &:hover { - svg { - fill: $color-gray-30; - } - } - &.disabled { - display: none; - } - } - - .left-arrow { - transform: rotate(180deg); - padding-top: 10px; - } - - &.fade-out-down { - @include animation(0, 0.3s, fadeOutDown); - } - - & .context-menu-items { - bottom: 1.5rem; - top: initial; - min-width: 10rem; - } - - & .resize-area { - position: absolute; - height: 8px; - width: 100%; - z-index: 10; - cursor: ns-resize; - top: 0; - left: 0; - } -} - -.color-palette-actions { - align-self: stretch; - border: 1px solid #1f1f1f; - cursor: pointer; - display: flex; - flex-direction: column; - flex-shrink: 0; - justify-content: center; - margin-right: 0.5rem; - padding: 0.5rem; - - .color-palette-buttons { - align-items: center; - display: flex; - justify-content: space-around; - } -} - -.color-palette-actions-button { - cursor: pointer; - display: flex; - & svg { - width: 1rem; - height: 1rem; - fill: #afb2bf; - } -} - -.btn-palette { - align-items: center; - border: 2px solid $color-gray-10; - border-radius: 50%; - cursor: pointer; - display: flex; - flex-shrink: 0; - justify-content: center; - padding: 0.6rem; - svg { - fill: $color-gray-10; - height: 20px; - width: 20px; - } - &:hover { - border-color: $color-gray-40; - svg { - fill: $color-gray-40; - } - } - &.current { - background-color: $color-primary; - border-color: $color-white; - svg { - fill: $color-white; - } - } -} - -.color-palette-content { - align-items: center; - display: flex; - overflow: hidden; - width: 100%; - padding: 0.25rem; - height: 100%; - - &.size-small { - height: 3.5rem; - } -} - -.color-palette-inside { - position: relative; - align-items: center; - display: flex; - transition: all 0.6s ease; - width: 100%; - scroll-behavior: smooth; - height: 100%; -} - -.color-cell { - align-items: center; - cursor: pointer; - display: flex; - flex-direction: column; - flex-shrink: 0; - position: relative; - - .color-text { - color: $color-gray-20; - font-size: $fs12; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 65px; - text-align: center; - margin-top: 0.25rem; - - .no-text & { - display: none; - } - } - - &.current { - .color-text { - color: $color-gray-50; - font-weight: $fw700; - } - &::before { - background-color: $color-gray-50; - border-radius: $br3; - color: $color-white; - content: "selected"; - font-size: $fs10; - left: 12px; - padding: 1px 4px; - position: absolute; - top: 38px; - } - } - &:hover { - .color { - border-color: $color-gray-50; - } - .color-text { - color: $color-primary; - } - } - &.add-color { - margin-left: 1.5rem; - - .color-text { - font-weight: $fw700; - } - &:hover { - .color-text { - color: $color-gray-40; - } - } - } -} - -.close-palette { - align-self: flex-start; - cursor: pointer; - flex-shrink: 0; - svg { - fill: $color-gray-20; - height: 25px; - transform: rotate(45deg); - width: 25px; - } - &:hover { - svg { - fill: $color-danger; - } - } -} - -.color-tooltip { - background-color: $color-gray-50; - border: 1px solid $color-gray-10; - border-radius: $br3; - left: -102px; - padding: 1rem; - position: absolute; - top: -85%; - z-index: 11; - .row-flex { - position: relative; - .input-text { - font-size: $fs12; - margin: 0 0.5rem; - max-width: 100px; - } - &::after { - background-color: $color-gray-50; - bottom: -32px; - border-bottom: 1px solid $color-gray-10; - border-right: 1px solid $color-gray-10; - content: ""; - height: 20px; - left: 105px; - position: absolute; - transform: rotate(45deg); - width: 20px; - } - } -} - -ul.palette-menu { - left: 8px; - top: auto; - bottom: var(--height); - color: $color-black; - - li { - position: relative; - padding: 5px 1.5rem; - } - - hr { - margin: 0.5rem 0; - } - - svg { - width: 9px; - height: 9px; - position: absolute; - left: 0.5rem; - top: 10px; - } - - hr { - border-color: $color-gray-20; - } - - .palette-library { - display: flex; - flex-direction: column; - align-items: flex-start; - } - - .color-sample { - display: flex; - flex-direction: row; - margin-top: 0.5rem; - } -} diff --git a/frontend/resources/styles/main/partials/text-palette.scss b/frontend/resources/styles/main/partials/text-palette.scss deleted file mode 100644 index 677b981456..0000000000 --- a/frontend/resources/styles/main/partials/text-palette.scss +++ /dev/null @@ -1,30 +0,0 @@ -.typography-item { - padding: 0 1rem; - margin-right: 1rem; - cursor: pointer; - - & > * { - white-space: nowrap; - } - - & .typography-name { - color: $color-white; - max-width: 160px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - & .typography-font, - & .typography-data { - font-size: $fs16; - color: $color-gray-30; - } - - .no-text & { - & .typography-font, - & .typography-data { - display: none; - } - } -} diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index d32af2ee8d..95ba8d26fa 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -20,7 +20,6 @@ [app.main.ui.hooks :as hooks] [app.main.ui.hooks.resize :refer [use-resize-observer]] [app.main.ui.icons :as i] - [app.main.ui.workspace.colorpalette :refer [colorpalette]] [app.main.ui.workspace.colorpicker] [app.main.ui.workspace.context-menu :refer [context-menu]] [app.main.ui.workspace.coordinates :as coordinates] @@ -31,7 +30,6 @@ [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox]] - [app.main.ui.workspace.textpalette :refer [textpalette]] [app.main.ui.workspace.viewport :refer [viewport]] [app.util.debug :as dbg] [app.util.dom :as dom] @@ -69,7 +67,6 @@ colorpalette? (:colorpalette layout) textpalette? (:textpalette layout) hide-ui? (:hide-ui layout) - new-css-system (mf/use-ctx ctx/new-css-system) on-resize (mf/use-fn @@ -85,16 +82,9 @@ node-ref (use-resize-observer on-resize)] [:* - (if new-css-system - (when (not hide-ui?) - [:& palette {:layout layout - :on-change-palette-size on-resize-palette}]) - [:* - (when (and colorpalette? (not hide-ui?)) - [:& colorpalette]) - - (when (and textpalette? (not hide-ui?)) - [:& textpalette])]) + (when (not hide-ui?) + [:& palette {:layout layout + :on-change-palette-size on-resize-palette}]) [:section.workspace-content {:key (dm/str "workspace-" page-id) diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs index 8ac0282cf9..c3a5ea5413 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs @@ -5,14 +5,13 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.color-palette-ctx-menu - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] [app.main.refs :as refs] [app.main.ui.components.color-bullet-new :as cb] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.icons :as i] - [app.util.dom :as dom] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -23,72 +22,71 @@ shared-libs (mf/deref refs/workspace-libraries)] [:& dropdown {:show show-menu? :on-close close-menu} - [:ul {:class (dom/classnames (css :palette-menu) true)} + [:ul {:class (stl/css :palette-menu)} (for [{:keys [data id] :as library} (vals shared-libs)] (let [colors (-> data :colors vals)] - [:li - {:class (dom/classnames (css :palette-library) true - (css :selected) (= selected id)) - :key (dm/str "library-" id) - :on-click on-select-palette - :data-palette (dm/str id)} - [:div {:class (dom/classnames (css :option-wrapper) true)} - [:div {:class (dom/classnames (css :library-name) true)} - [:div {:class (css :lib-name-wrapper)} - [:span {:class (css :lib-name)} + [:li {:class (stl/css-case :palette-library true + :selected (= selected id)) + :key (dm/str "library-" id) + :on-click on-select-palette + :data-palette (dm/str id)} + [:div {:class (stl/css :option-wrapper)} + [:div {:class (stl/css :library-name)} + [:div {:class (stl/css :lib-name-wrapper)} + [:span {:class (stl/css :lib-name)} (dm/str (:name library))] - [:span {:class (css :lib-num)} + [:span {:class (stl/css :lib-num)} (dm/str "(" (count colors) ")")]] (when (= selected id) - [:span {:class (dom/classnames (css :icon-wrapper) true)} + [:span {:class (stl/css :icon-wrapper)} i/tick-refactor])] - [:div {:class (dom/classnames (css :color-sample) true) + [:div {:class (stl/css :color-sample) :style #js {"--bullet-size" "20px"}} (for [[i {:keys [color id gradient]}] (map-indexed vector (take 7 colors))] [:& cb/color-bullet {:key (dm/str "color-" i) :mini? true :color {:color color :id id :gradient gradient}}])]]])) - [:li {:class (dom/classnames (css :file-library) true - (css :selected) (= selected :file)) + [:li {:class (stl/css-case :file-library true + :selected (= selected :file)) :on-click on-select-palette :data-palette "file"} - [:div {:class (dom/classnames (css :option-wrapper) true)} - [:div {:class (dom/classnames (css :library-name) true)} + [:div {:class (stl/css :option-wrapper)} + [:div {:class (stl/css :library-name)} - [:div {:class (css :lib-name-wrapper)} - [:span {:class (css :lib-name)} + [:div {:class (stl/css :lib-name-wrapper)} + [:span {:class (stl/css :lib-name)} (dm/str (tr "workspace.libraries.colors.file-library"))] - [:span {:class (css :lib-num)} + [:span {:class (stl/css :lib-num)} (dm/str "(" (count file-colors) ")")]] (when (= selected :file) - [:span {:class (dom/classnames (css :icon-wrapper) true)} + [:span {:class (stl/css :icon-wrapper)} i/tick-refactor])] - [:div {:class (dom/classnames (css :color-sample) true) + [:div {:class (stl/css :color-sample) :style #js {"--bullet-size" "20px"}} (for [[i color] (map-indexed vector (take 7 (vals file-colors)))] [:& cb/color-bullet {:key (dm/str "color-" i) :mini? true :color color}])]]] - [:li {:class (dom/classnames (css :recent-colors) true - (css :selected) (= selected :recent)) + [:li {:class (stl/css :recent-colors true + :selected (= selected :recent)) :on-click on-select-palette :data-palette "recent"} - [:div {:class (css :option-wrapper)} - [:div {:class (css :library-name)} - [:div {:class (css :lib-name-wrapper)} - [:span {:class (css :lib-name)} + [:div {:class (stl/css :option-wrapper)} + [:div {:class (stl/css :library-name)} + [:div {:class (stl/css :lib-name-wrapper)} + [:span {:class (stl/css :lib-name)} (dm/str (tr "workspace.libraries.colors.recent-colors"))] - [:span {:class (css :lib-num)} + [:span {:class (stl/css :lib-num)} (dm/str "("(count recent-colors) ")")]] (when (= selected :recent) - [:span {:class (dom/classnames (css :icon-wrapper) true)} + [:span {:class (stl/css :icon-wrapper)} i/tick-refactor])] - [:div {:class (dom/classnames (css :color-sample) true) + [:div {:class (stl/css :color-sample) :style #js {"--bullet-size" "20px"}} (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))] [:& cb/color-bullet {:key (str "color-" idx) diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss index f43f09038b..4aa4b27167 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -9,7 +9,7 @@ .palette-menu { position: absolute; left: auto; - bottom: $s-0; + bottom: var(--height); max-width: $s-480; padding: $s-4; margin: 0 0 $s-4 0; @@ -52,8 +52,8 @@ margin-left: $s-4; @include flexCenter; svg { - @include flexCenter; @extend .button-icon-small; + @include flexCenter; stroke: var(--icon-foreground); } } diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs deleted file mode 100644 index fc8ce9ed80..0000000000 --- a/frontend/src/app/main/ui/workspace/colorpalette.cljs +++ /dev/null @@ -1,216 +0,0 @@ -;; 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 - -(ns app.main.ui.workspace.colorpalette - (:require - [app.common.data.macros :as dm] - [app.main.data.workspace.colors :as mdc] - [app.main.refs :as refs] - [app.main.store :as st] - [app.main.ui.components.color-bullet :as cb] - [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.hooks :as h] - [app.main.ui.hooks.resize :refer [use-resize-hook]] - [app.main.ui.icons :as i] - [app.util.dom :as dom] - [app.util.i18n :refer [tr]] - [app.util.keyboard :as kbd] - [app.util.object :as obj] - [cuerdas.core :as str] - [goog.events :as events] - [rumext.v2 :as mf])) - -;; --- Components - -(mf/defc palette-item - {::mf/wrap [mf/memo]} - [{:keys [color]}] - (letfn [(select-color [event] - (st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))] - [:div.color-cell {:on-click select-color} - [:& cb/color-bullet {:color color}] - [:& cb/color-name {:color color}]])) - -(mf/defc palette - [{:keys [current-colors recent-colors file-colors shared-libs selected on-select]}] - (let [;; We had to do this due to a bug that leave some bugged colors - current-colors (h/use-equal-memo (filter #(or (:gradient %) (:color %) (:image %)) current-colors)) - state (mf/use-state {:show-menu false}) - - width (:width @state 0) - visible (/ width 66) - - offset (:offset @state 0) - max-offset (- (count current-colors) - visible) - - container (mf/use-ref nil) - - {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} - (use-resize-hook :palette 72 54 80 :y true :bottom) - - on-left-arrow-click - (mf/use-callback - (mf/deps max-offset visible) - (fn [_] - (swap! state update :offset - (fn [offset] - (if (pos? offset) - (max (- offset (/ visible 2)) 0) - offset))))) - - on-right-arrow-click - (mf/use-callback - (mf/deps max-offset visible) - (fn [_] - (swap! state update :offset - (fn [offset] - (if (< offset max-offset) - (min max-offset (+ offset (/ visible 2))) - offset))))) - - on-scroll - (mf/use-callback - (mf/deps max-offset) - (fn [event] - (let [delta (+ (.. event -nativeEvent -deltaY) (.. event -nativeEvent -deltaX))] - (if (pos? delta) - (on-right-arrow-click event) - (on-left-arrow-click event))))) - - on-resize - (mf/use-callback - (fn [_] - (let [dom (mf/ref-val container) - width (obj/get dom "clientWidth")] - (swap! state assoc :width width)))) - - on-select-palette - (mf/use-fn - (mf/deps on-select) - (fn [event] - (let [node (dom/get-current-target event) - value (dom/get-attribute node "data-palette")] - (on-select (if (or (= "file" value) (= "recent" value)) - (keyword value) - (parse-uuid value))))))] - - (mf/use-layout-effect - #(let [dom (mf/ref-val container) - width (obj/get dom "clientWidth")] - (swap! state assoc :width width))) - - (mf/with-effect [] - (let [key1 (events/listen js/window "resize" on-resize)] - #(events/unlistenByKey key1))) - - [:div.color-palette {:ref parent-ref - :class (dom/classnames :no-text (< size 72)) - :style #js {"--height" (dm/str size "px") - "--bullet-size" (dm/str (if (< size 72) (- size 15) (- size 30)) "px")}} - [:div.resize-area {:on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move}] - [:& dropdown {:show (:show-menu @state) - :on-close #(swap! state assoc :show-menu false)} - [:ul.workspace-context-menu.palette-menu - (for [{:keys [data id] :as library} (vals shared-libs)] - (let [colors (->> data :colors vals (sort-by :name))] - [:li.palette-library - {:key (dm/str "library-" id) - :on-click on-select-palette - :data-palette (dm/str id)} - (when (= selected id) i/tick) - [:div.library-name (str (:name library) " " (str/ffmt "(%)" (count colors)))] - [:div.color-sample - (for [[i {:keys [color]}] (map-indexed vector (take 7 colors))] - [:& cb/color-bullet {:key (dm/str "color-" i) - :color color}])]])) - - [:li.palette-library - {:on-click on-select-palette - :data-palette "file"} - (when (= selected :file) i/tick) - [:div.library-name (dm/str - (tr "workspace.libraries.colors.file-library") - (str/ffmt " (%)" (count file-colors)))] - [:div.color-sample - (for [[i color] (map-indexed vector (take 7 (->> (vals file-colors) (sort-by :name))))] - [:& cb/color-bullet {:key (dm/str "color-" i) - :color color}])]] - - [:li.palette-library - {:on-click on-select-palette - :data-palette "recent"} - (when (= selected :recent) i/tick) - [:div.library-name (str (tr "workspace.libraries.colors.recent-colors") - (str/format " (%s)" (count recent-colors)))] - [:div.color-sample - (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))] - [:& cb/color-bullet {:key (str "color-" idx) - :color color}])]]]] - - [:div.color-palette-actions - {:on-click - (fn [event] - (dom/stop-propagation event) - (swap! state assoc :show-menu true))} - [:div.color-palette-actions-button i/actions]] - - [:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide] - [:div.color-palette-content {:ref container :on-wheel on-scroll} - (if (empty? current-colors) - [:div.color-palette-empty {:style {:position "absolute" - :left "50%" - :top "50%" - :transform "translate(-50%, -50%)"}} - (tr "workspace.libraries.colors.empty-palette")] - [:div.color-palette-inside {:style {:position "relative" - :right (str (* 66 offset) "px")}} - (for [[idx item] (map-indexed vector current-colors)] - [:& palette-item {:color item :key idx}])])] - - [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]])) - -(defn library->colors [shared-libs selected] - (map #(merge % {:file-id selected}) - (-> shared-libs - (get-in [selected :data :colors]) - (vals)))) - -(mf/defc colorpalette - {::mf/wrap [mf/memo]} - [] - (let [recent-colors (mf/deref refs/workspace-recent-colors) - file-colors (mf/deref refs/workspace-file-colors) - shared-libs (mf/deref refs/workspace-libraries) - selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent) - - colors (mf/use-state []) - on-select (mf/use-fn #(reset! selected %))] - - (mf/with-effect [@selected] - (let [colors' (cond - (= @selected :recent) (reverse recent-colors) - (= @selected :file) (->> (vals file-colors) (sort-by :name)) - :else (->> (library->colors shared-libs @selected) (sort-by :name)))] - (reset! colors (into [] colors')))) - - (mf/with-effect [recent-colors @selected] - (when (= @selected :recent) - (reset! colors (reverse recent-colors)))) - - (mf/with-effect [file-colors @selected] - (when (= @selected :file) - (reset! colors (into [] (->> (vals file-colors) - (sort-by :name)))))) - - [:& palette {:current-colors @colors - :recent-colors recent-colors - :file-colors file-colors - :shared-libs shared-libs - :selected @selected - :on-select on-select}])) diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index 431443cfea..26c220c3a9 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.palette - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] @@ -51,9 +51,13 @@ text-palette? (:textpalette layout) workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) container (mf/use-ref nil) - state (mf/use-state {:show-menu false :hide-palettes false}) + state* (mf/use-state {:show-menu false :hide-palettes false}) + state (deref state*) + show-menu? (:show-menu state) + hide-palettes? (:hide-palettes state) selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent) - selected-text (mf/use-state :file) + selected-text* (mf/use-state :file) + selected-text (deref selected-text*) on-select (mf/use-fn #(reset! selected %)) rulers? (mf/deref refs/rules?) {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} @@ -67,12 +71,12 @@ (fn [_] (let [dom (mf/ref-val container) width (obj/get dom "clientWidth")] - (swap! state assoc :width width)))) + (swap! state* assoc :width width)))) on-close-menu (mf/use-callback (fn [_] - (swap! state assoc :show-menu false))) + (swap! state* assoc :show-menu false))) on-select-palette (mf/use-fn @@ -84,26 +88,48 @@ (keyword value) (parse-uuid value)))))) - on-select-text-palette + on-select-text-palette-menu (mf/use-fn (mf/deps on-select) (fn [lib] (if (or (nil? lib) (= :file lib)) - (reset! selected-text :file) - (reset! selected-text (:id lib))))) + (reset! selected-text* :file) + (reset! selected-text* (:id lib))))) toggle-palettes (mf/use-callback (fn [_] - (swap! state update :hide-palettes not))) + (swap! state* update :hide-palettes not))) + + on-select-color-palette + (mf/use-fn + (fn [event] + (let [node (dom/get-current-target event)] + (r/set-resize-type! :top) + (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down") + (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette) + (-> (dw/toggle-layout-flag :colorpalette) + (vary-meta assoc ::ev/origin "workspace-left-toolbar")))) + (dom/blur! node)))) + + on-select-text-palette + (mf/use-fn + (fn [event] + (let [node (dom/get-current-target event)] + (r/set-resize-type! :top) + (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down") + (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette) + (-> (dw/toggle-layout-flag :textpalette) + (vary-meta assoc ::ev/origin "workspace-left-toolbar")))) + (dom/blur! node)))) any-palette? (or color-palette? text-palette?) size-classname (cond - (<= size 64) (css :small-palette) - (<= size 72) (css :mid-palette) - (<= size 80) (css :big-palette))] + (<= size 64) (stl/css :small-palette) + (<= size 72) (stl/css :mid-palette) + (<= size 80) (stl/css :big-palette))] (mf/with-effect [] (let [key1 (events/listen js/window "resize" on-resize)] @@ -112,83 +138,64 @@ (mf/use-layout-effect #(let [dom (mf/ref-val parent-ref) width (obj/get dom "clientWidth")] - (swap! state assoc :width width))) + (swap! state* assoc :width width))) - [:div {:class (dom/classnames (css :palette-wrapper) true) + [:div {:class (stl/css :palette-wrapper) :style (calculate-palette-padding rulers?)} (when-not workspace-read-only? [:div {:ref parent-ref - :class (dom/classnames (css :palettes) true - size-classname true - (css :wide) any-palette? - (css :hidden-bts) (:hide-palettes @state)) + :class (dm/str size-classname " " (stl/css-case :palettes true + :wide any-palette? + :hidden-bts hide-palettes?)) :style #js {"--height" (dm/str size "px")}} - [:div {:class (dom/classnames (css :resize-area) true) + [:div {:class (stl/css :resize-area) :on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture :on-pointer-move on-pointer-move}] - [:ul {:class (dom/classnames (css :palette-btn-list) true - (css :hidden-bts) (:hide-palettes @state) - size-classname true)} - [:li {:class (dom/classnames (css :palette-item) true)} - [:button - {:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette)) - :aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette)) - :class (dom/classnames (css :palette-btn) true - (css :selected) color-palette?) - :on-click (fn [event] - (let [node (dom/get-current-target event)] - (r/set-resize-type! :top) - (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down") - (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette) - (-> (dw/toggle-layout-flag :colorpalette) - (vary-meta assoc ::ev/origin "workspace-left-toolbar")))) - - (dom/blur! node)))} + [:ul {:class (dm/str size-classname " " (stl/css-case :palette-btn-list true + :hidden-bts hide-palettes?))} + [:li {:class (stl/css :palette-item)} + [:button {:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette)) + :aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette)) + :class (stl/css-case :palette-btn true + :selected color-palette?) + :on-click on-select-color-palette} i/drop-refactor]] - [:li {:class (dom/classnames (css :palette-item) true)} - [:button - {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) - :aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) - :class (dom/classnames (css :palette-btn) true - (css :selected) text-palette?) - :on-click (fn [event] - (let [node (dom/get-current-target event)] - (r/set-resize-type! :top) - (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down") - (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette) - (-> (dw/toggle-layout-flag :textpalette) - (vary-meta assoc ::ev/origin "workspace-left-toolbar")))) - (dom/blur! node)))} + [:li {:class (stl/css :palette-item)} + [:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) + :aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) + :class (stl/css-case :palette-btn true + :selected text-palette?) + :on-click on-select-text-palette} i/text-palette-refactor]]] (if any-palette? [:* - [:button {:class (dom/classnames (css :palette-actions) true) - :on-click #(swap! state update :show-menu not)} + [:button {:class (stl/css :palette-actions) + :on-click #(swap! state* update :show-menu not)} i/menu-refactor] - [:div {:class (dom/classnames (css :palette) true) + [:div {:class (stl/css :palette) :ref container} (when text-palette? [:* - [:& text-palette-ctx-menu {:show-menu? (:show-menu @state) + [:& text-palette-ctx-menu {:show-menu? show-menu? :close-menu on-close-menu - :on-select-palette on-select-text-palette - :selected @selected-text}] + :on-select-palette on-select-text-palette-menu + :selected selected-text}] [:& text-palette {:size size - :selected @selected-text + :selected selected-text :width vport-width}]]) (when color-palette? - [:* [:& color-palette-ctx-menu {:show-menu? (:show-menu @state) + [:* [:& color-palette-ctx-menu {:show-menu? show-menu? :close-menu on-close-menu :on-select-palette on-select-palette :selected @selected}] [:& color-palette {:size size :selected @selected :width vport-width}]])]] - [:div {:class (dom/classnames (css :handler) true) + [:div {:class (stl/css :handler) :on-click toggle-palettes} - [:div {:class (dom/classnames (css :handler-btn) true)}]])])])) + [:div {:class (stl/css :handler-btn)}]])])])) diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs index 4912a2a394..bd8a902007 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs @@ -5,13 +5,12 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.text-palette-ctx-menu - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] [app.main.refs :as refs] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.icons :as i] - [app.util.dom :as dom] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -22,35 +21,35 @@ shared-libs (mf/deref refs/workspace-libraries)] [:& dropdown {:show show-menu? :on-close close-menu} - [:ul {:class (dom/classnames (css :workspace-context-menu) true)} + [:ul {:class (stl/css :workspace-context-menu) } (for [[idx cur-library] (map-indexed vector (vals shared-libs))] (let [typographies (-> cur-library (get-in [:data :typographies]) vals)] [:li - {:class (dom/classnames (css :palette-library) true - (css :selected) (= selected (:id cur-library))) + {:class (stl/css-case :palette-library true + :selected (= selected (:id cur-library))) :key (str "library-" idx) :on-click #(on-select-palette cur-library)} [:div - {:class (dom/classnames (css :library-name) true)} - [:span {:class (css :lib-name)} + {:class (stl/css :library-name)} + [:span {:class (stl/css :lib-name)} (dm/str (:name cur-library))] - [:span {:class (css :lib-num)} + [:span {:class (stl/css :lib-num)} (dm/str "(" (count typographies) ")")]] (when (= selected (:id cur-library)) - [:span {:class (dom/classnames (css :icon-wrapper) true)} + [:span {:class (stl/css :icon-wrapper)} i/tick-refactor])])) [:li - {:class (dom/classnames (css :file-library) true - (css :selected) (= selected :file)) + {:class (stl/css-case :file-library true + :selected (= selected :file)) :on-click #(on-select-palette :file)} - [:div {:class (dom/classnames (css :library-name) true)} - [:span {:class (css :lib-name)} + [:div {:class (stl/css :library-name)} + [:span {:class (stl/css :lib-name)} (tr "workspace.libraries.colors.file-library")] - [:span {:class (css :lib-num)} + [:span {:class (stl/css :lib-num)} (dm/str "(" (count file-typographies) ")")]] (when (= selected :file) - [:span {:class (dom/classnames (css :icon-wrapper) true)} + [:span {:class (stl/css :icon-wrapper)} i/tick-refactor])]]])) diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss index 6c153cff1e..d624d565a6 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -9,7 +9,7 @@ .workspace-context-menu { position: absolute; left: auto; - bottom: $s-0; + bottom: var(--height); max-width: $s-480; padding: $s-4; margin: 0 0 $s-4 0; diff --git a/frontend/src/app/main/ui/workspace/textpalette.cljs b/frontend/src/app/main/ui/workspace/textpalette.cljs deleted file mode 100644 index 35a349b802..0000000000 --- a/frontend/src/app/main/ui/workspace/textpalette.cljs +++ /dev/null @@ -1,162 +0,0 @@ -;; 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 - -(ns app.main.ui.workspace.textpalette - (:require - [app.common.data :as d] - [app.main.data.workspace.texts :as dwt] - [app.main.fonts :as f] - [app.main.refs :as refs] - [app.main.store :as st] - [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.context :as ctx] - [app.main.ui.hooks.resize :refer [use-resize-hook]] - [app.main.ui.icons :as i] - [app.util.dom :as dom] - [app.util.i18n :refer [tr]] - [cuerdas.core :as str] - [rumext.v2 :as mf])) - -(mf/defc typography-item - [{:keys [file-id selected-ids typography name-only?]}] - (let [font-data (f/get-font-data (:font-id typography)) - font-variant-id (:font-variant-id typography) - variant-data (->> font-data :variants (d/seek #(= (:id %) font-variant-id))) - - handle-click - (mf/use-callback - (mf/deps typography selected-ids) - (fn [] - (let [attrs (merge - {:typography-ref-file file-id - :typography-ref-id (:id typography)} - (dissoc typography :id :name))] - - (run! #(st/emit! - (dwt/update-text-attrs - {:id % - :editor (get @refs/workspace-editor-state %) - :attrs attrs})) - selected-ids))))] - - [:div.typography-item {:title (:name typography) - :on-click handle-click} - [:div.typography-name - {:style {:font-family (:font-family typography) - :font-weight (:font-weight typography) - :font-style (:font-style typography)}} - (:name typography)] - (when-not name-only? - [:* - [:div.typography-font (:name font-data)] - [:div.typography-data (str (:font-size typography) "px | " (:name variant-data))]])])) - -(mf/defc palette - [{:keys [selected-ids current-file-id file-typographies shared-libs]}] - - (let [state (mf/use-state {:show-menu false}) - selected (mf/use-state :file) - - file-id - (case @selected - :recent nil - :file current-file-id - @selected) - - current-typographies - (case @selected - :recent [] - :file (sort-by #(str/lower (:name %)) (vals file-typographies)) - (sort-by #(str/lower (:name %)) (vals (get-in shared-libs [@selected :data :typographies])))) - - container (mf/use-ref nil) - - on-left-arrow-click - (mf/use-callback - (fn [] - (when-let [node (mf/ref-val container)] - (.scrollBy node #js {:left -200 :behavior "smooth"})))) - - on-right-arrow-click - (mf/use-callback - (fn [] - (when-let [node (mf/ref-val container)] - (.scrollBy node #js {:left 200 :behavior "smooth"})))) - - on-wheel - (mf/use-callback - (fn [event] - (let [delta (+ (.. event -nativeEvent -deltaY) (.. event -nativeEvent -deltaX))] - (if (pos? delta) - (on-right-arrow-click) - (on-left-arrow-click))))) - - {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} - (use-resize-hook :palette 72 54 80 :y true :bottom)] - - [:div.color-palette {:ref parent-ref - :class (dom/classnames :no-text (< size 72)) - :style #js {"--height" (str size "px")}} - [:div.resize-area {:on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move}] - [:& dropdown {:show (:show-menu @state) - :on-close #(swap! state assoc :show-menu false)} - - [:ul.workspace-context-menu.palette-menu - (for [[idx cur-library] (map-indexed vector (vals shared-libs))] - (let [typographies (-> cur-library (get-in [:data :typographies]) vals)] - [:li.palette-library - {:key (str "library-" idx) - :on-click #(reset! selected (:id cur-library))} - - (when (= @selected (:id cur-library)) i/tick) - - [:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count typographies)))]])) - - [:li.palette-library - {:on-click #(reset! selected :file)} - (when (= selected :file) i/tick) - [:div.library-name (str (tr "workspace.libraries.colors.file-library") - (str/format " (%s)" (count file-typographies)))]]]] - - [:div.color-palette-actions - {:on-click - (fn [event] - (dom/stop-propagation event) - (swap! state assoc :show-menu true))} - [:div.color-palette-actions-button i/actions]] - - [:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide] - - [:div.color-palette-content {:ref container :on-wheel on-wheel} - (if (empty? current-typographies) - [:div.color-palette-empty {:style {:position "absolute" - :left "50%" - :top "50%" - :transform "translate(-50%, -50%)"}} - (tr "workspace.libraries.colors.empty-typography-palette")] - [:div.color-palette-inside - (for [[idx item] (map-indexed vector current-typographies)] - [:& typography-item - {:key idx - :file-id file-id - :selected-ids selected-ids - :typography item}])])] - - [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]])) - -(mf/defc textpalette - {::mf/wrap [mf/memo]} - [] - (let [selected-ids (mf/deref refs/selected-shapes) - file-typographies (mf/deref refs/workspace-file-typography) - shared-libs (mf/deref refs/workspace-libraries) - current-file-id (mf/use-ctx ctx/current-file-id)] - [:& palette {:current-file-id current-file-id - :selected-ids selected-ids - :file-typographies file-typographies - :shared-libs shared-libs}]))