johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

♻️ Remove new-css-system from workspace palettes

Browse Source
This commit is contained in:
Eva
2023-12-28 17:22:09 +01:00
committed by Alonso Torres
parent 412343f3de
commit 93a7a8e856
11 changed files with 120 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/resources/styles/main-default.scss
View File

@@ -58,8 +58,6 @@
@import "main/partials/viewer-header"; @import "main/partials/viewer-header";
@import "main/partials/viewer-thumbnails"; @import "main/partials/viewer-thumbnails";
@import "main/partials/activity-bar"; @import "main/partials/activity-bar";
@import "main/partials/color-palette";
@import "main/partials/text-palette";
@import "main/partials/colorpicker"; @import "main/partials/colorpicker";
@import "main/partials/dashboard"; @import "main/partials/dashboard";
@import "main/partials/dashboard-header"; @import "main/partials/dashboard-header";

293
frontend/resources/styles/main/partials/color-palette.scss
View File

@@ -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;
}
}

30
frontend/resources/styles/main/partials/text-palette.scss
View File

@@ -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;
}
}
}

10
frontend/src/app/main/ui/workspace.cljs
View File

@@ -20,7 +20,6 @@
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.hooks.resize :refer [use-resize-observer]] [app.main.ui.hooks.resize :refer [use-resize-observer]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.colorpalette :refer [colorpalette]]
[app.main.ui.workspace.colorpicker] [app.main.ui.workspace.colorpicker]
[app.main.ui.workspace.context-menu :refer [context-menu]] [app.main.ui.workspace.context-menu :refer [context-menu]]
[app.main.ui.workspace.coordinates :as coordinates] [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 :refer [left-sidebar right-sidebar]]
[app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]] [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
[app.main.ui.workspace.textpalette :refer [textpalette]]
[app.main.ui.workspace.viewport :refer [viewport]] [app.main.ui.workspace.viewport :refer [viewport]]
[app.util.debug :as dbg] [app.util.debug :as dbg]
[app.util.dom :as dom] [app.util.dom :as dom]
@@ -69,7 +67,6 @@
colorpalette? (:colorpalette layout) colorpalette? (:colorpalette layout)
textpalette? (:textpalette layout) textpalette? (:textpalette layout)
hide-ui? (:hide-ui layout) hide-ui? (:hide-ui layout)
new-css-system (mf/use-ctx ctx/new-css-system)
on-resize on-resize
(mf/use-fn (mf/use-fn
@@ -85,16 +82,9 @@
node-ref (use-resize-observer on-resize)] node-ref (use-resize-observer on-resize)]
[:* [:*
(if new-css-system
(when (not hide-ui?) (when (not hide-ui?)
[:& palette {:layout layout [:& palette {:layout layout
:on-change-palette-size on-resize-palette}]) :on-change-palette-size on-resize-palette}])
[:*
(when (and colorpalette? (not hide-ui?))
[:& colorpalette])
(when (and textpalette? (not hide-ui?))
[:& textpalette])])
[:section.workspace-content [:section.workspace-content
{:key (dm/str "workspace-" page-id) {:key (dm/str "workspace-" page-id)

60
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
View File

@@ -5,14 +5,13 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.color-palette-ctx-menu (ns app.main.ui.workspace.color-palette-ctx-menu
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.components.color-bullet-new :as cb] [app.main.ui.components.color-bullet-new :as cb]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@@ -23,72 +22,71 @@
shared-libs (mf/deref refs/workspace-libraries)] shared-libs (mf/deref refs/workspace-libraries)]
[:& dropdown {:show show-menu? [:& dropdown {:show show-menu?
:on-close close-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)] (for [{:keys [data id] :as library} (vals shared-libs)]
(let [colors (-> data :colors vals)] (let [colors (-> data :colors vals)]
[:li [:li {:class (stl/css-case :palette-library true
{:class (dom/classnames (css :palette-library) true :selected (= selected id))
(css :selected) (= selected id))
:key (dm/str "library-" id) :key (dm/str "library-" id)
:on-click on-select-palette :on-click on-select-palette
:data-palette (dm/str id)} :data-palette (dm/str id)}
[:div {:class (dom/classnames (css :option-wrapper) true)} [:div {:class (stl/css :option-wrapper)}
[:div {:class (dom/classnames (css :library-name) true)} [:div {:class (stl/css :library-name)}
[:div {:class (css :lib-name-wrapper)} [:div {:class (stl/css :lib-name-wrapper)}
[:span {:class (css :lib-name)} [:span {:class (stl/css :lib-name)}
(dm/str (:name library))] (dm/str (:name library))]
[:span {:class (css :lib-num)} [:span {:class (stl/css :lib-num)}
(dm/str "(" (count colors) ")")]] (dm/str "(" (count colors) ")")]]
(when (= selected id) (when (= selected id)
[:span {:class (dom/classnames (css :icon-wrapper) true)} [:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])] i/tick-refactor])]
[:div {:class (dom/classnames (css :color-sample) true) [:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}} :style #js {"--bullet-size" "20px"}}
(for [[i {:keys [color id gradient]}] (map-indexed vector (take 7 colors))] (for [[i {:keys [color id gradient]}] (map-indexed vector (take 7 colors))]
[:& cb/color-bullet {:key (dm/str "color-" i) [:& cb/color-bullet {:key (dm/str "color-" i)
:mini? true :mini? true
:color {:color color :id id :gradient gradient}}])]]])) :color {:color color :id id :gradient gradient}}])]]]))
[:li {:class (dom/classnames (css :file-library) true [:li {:class (stl/css-case :file-library true
(css :selected) (= selected :file)) :selected (= selected :file))
:on-click on-select-palette :on-click on-select-palette
:data-palette "file"} :data-palette "file"}
[:div {:class (dom/classnames (css :option-wrapper) true)} [:div {:class (stl/css :option-wrapper)}
[:div {:class (dom/classnames (css :library-name) true)} [:div {:class (stl/css :library-name)}
[:div {:class (css :lib-name-wrapper)} [:div {:class (stl/css :lib-name-wrapper)}
[:span {:class (css :lib-name)} [:span {:class (stl/css :lib-name)}
(dm/str (tr "workspace.libraries.colors.file-library"))] (dm/str (tr "workspace.libraries.colors.file-library"))]
[:span {:class (css :lib-num)} [:span {:class (stl/css :lib-num)}
(dm/str "(" (count file-colors) ")")]] (dm/str "(" (count file-colors) ")")]]
(when (= selected :file) (when (= selected :file)
[:span {:class (dom/classnames (css :icon-wrapper) true)} [:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])] i/tick-refactor])]
[:div {:class (dom/classnames (css :color-sample) true) [:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}} :style #js {"--bullet-size" "20px"}}
(for [[i color] (map-indexed vector (take 7 (vals file-colors)))] (for [[i color] (map-indexed vector (take 7 (vals file-colors)))]
[:& cb/color-bullet {:key (dm/str "color-" i) [:& cb/color-bullet {:key (dm/str "color-" i)
:mini? true :mini? true
:color color}])]]] :color color}])]]]
[:li {:class (dom/classnames (css :recent-colors) true [:li {:class (stl/css :recent-colors true
(css :selected) (= selected :recent)) :selected (= selected :recent))
:on-click on-select-palette :on-click on-select-palette
:data-palette "recent"} :data-palette "recent"}
[:div {:class (css :option-wrapper)} [:div {:class (stl/css :option-wrapper)}
[:div {:class (css :library-name)} [:div {:class (stl/css :library-name)}
[:div {:class (css :lib-name-wrapper)} [:div {:class (stl/css :lib-name-wrapper)}
[:span {:class (css :lib-name)} [:span {:class (stl/css :lib-name)}
(dm/str (tr "workspace.libraries.colors.recent-colors"))] (dm/str (tr "workspace.libraries.colors.recent-colors"))]
[:span {:class (css :lib-num)} [:span {:class (stl/css :lib-num)}
(dm/str "("(count recent-colors) ")")]] (dm/str "("(count recent-colors) ")")]]
(when (= selected :recent) (when (= selected :recent)
[:span {:class (dom/classnames (css :icon-wrapper) true)} [:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])] i/tick-refactor])]
[:div {:class (dom/classnames (css :color-sample) true) [:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}} :style #js {"--bullet-size" "20px"}}
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))] (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))]
[:& cb/color-bullet {:key (str "color-" idx) [:& cb/color-bullet {:key (str "color-" idx)

4
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
View File

@@ -9,7 +9,7 @@
.palette-menu { .palette-menu {
position: absolute; position: absolute;
left: auto; left: auto;
bottom: $s-0; bottom: var(--height);
max-width: $s-480; max-width: $s-480;
padding: $s-4; padding: $s-4;
margin: 0 0 $s-4 0; margin: 0 0 $s-4 0;
@@ -52,8 +52,8 @@
margin-left: $s-4; margin-left: $s-4;
@include flexCenter; @include flexCenter;
svg { svg {
@include flexCenter;
@extend .button-icon-small; @extend .button-icon-small;
@include flexCenter;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }

216
frontend/src/app/main/ui/workspace/colorpalette.cljs
View File

@@ -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}]))

125
frontend/src/app/main/ui/workspace/palette.cljs
View File

@@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.palette (ns app.main.ui.workspace.palette
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
@@ -51,9 +51,13 @@
text-palette? (:textpalette layout) text-palette? (:textpalette layout)
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
container (mf/use-ref nil) 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 (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 %)) on-select (mf/use-fn #(reset! selected %))
rulers? (mf/deref refs/rules?) rulers? (mf/deref refs/rules?)
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
@@ -67,12 +71,12 @@
(fn [_] (fn [_]
(let [dom (mf/ref-val container) (let [dom (mf/ref-val container)
width (obj/get dom "clientWidth")] width (obj/get dom "clientWidth")]
(swap! state assoc :width width)))) (swap! state* assoc :width width))))
on-close-menu on-close-menu
(mf/use-callback (mf/use-callback
(fn [_] (fn [_]
(swap! state assoc :show-menu false))) (swap! state* assoc :show-menu false)))
on-select-palette on-select-palette
(mf/use-fn (mf/use-fn
@@ -84,26 +88,48 @@
(keyword value) (keyword value)
(parse-uuid value)))))) (parse-uuid value))))))
on-select-text-palette on-select-text-palette-menu
(mf/use-fn (mf/use-fn
(mf/deps on-select) (mf/deps on-select)
(fn [lib] (fn [lib]
(if (or (nil? lib) (= :file lib)) (if (or (nil? lib) (= :file lib))
(reset! selected-text :file) (reset! selected-text* :file)
(reset! selected-text (:id lib))))) (reset! selected-text* (:id lib)))))
toggle-palettes toggle-palettes
(mf/use-callback (mf/use-callback
(fn [_] (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?) any-palette? (or color-palette? text-palette?)
size-classname size-classname
(cond (cond
(<= size 64) (css :small-palette) (<= size 64) (stl/css :small-palette)
(<= size 72) (css :mid-palette) (<= size 72) (stl/css :mid-palette)
(<= size 80) (css :big-palette))] (<= size 80) (stl/css :big-palette))]
(mf/with-effect [] (mf/with-effect []
(let [key1 (events/listen js/window "resize" on-resize)] (let [key1 (events/listen js/window "resize" on-resize)]
@@ -112,83 +138,64 @@
(mf/use-layout-effect (mf/use-layout-effect
#(let [dom (mf/ref-val parent-ref) #(let [dom (mf/ref-val parent-ref)
width (obj/get dom "clientWidth")] 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?)} :style (calculate-palette-padding rulers?)}
(when-not workspace-read-only? (when-not workspace-read-only?
[:div {:ref parent-ref [:div {:ref parent-ref
:class (dom/classnames (css :palettes) true :class (dm/str size-classname " " (stl/css-case :palettes true
size-classname true :wide any-palette?
(css :wide) any-palette? :hidden-bts hide-palettes?))
(css :hidden-bts) (:hide-palettes @state))
:style #js {"--height" (dm/str size "px")}} :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-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move}] :on-pointer-move on-pointer-move}]
[:ul {:class (dom/classnames (css :palette-btn-list) true [:ul {:class (dm/str size-classname " " (stl/css-case :palette-btn-list true
(css :hidden-bts) (:hide-palettes @state) :hidden-bts hide-palettes?))}
size-classname true)} [:li {:class (stl/css :palette-item)}
[:li {:class (dom/classnames (css :palette-item) true)} [:button {:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
[:button
{:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:aria-label (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 :class (stl/css-case :palette-btn true
(css :selected) color-palette?) :selected color-palette?)
:on-click (fn [event] :on-click on-select-color-palette}
(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)))}
i/drop-refactor]] i/drop-refactor]]
[:li {:class (dom/classnames (css :palette-item) true)} [:li {:class (stl/css :palette-item)}
[:button [:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
{:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:aria-label (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 :class (stl/css-case :palette-btn true
(css :selected) text-palette?) :selected text-palette?)
:on-click (fn [event] :on-click on-select-text-palette}
(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)))}
i/text-palette-refactor]]] i/text-palette-refactor]]]
(if any-palette? (if any-palette?
[:* [:*
[:button {:class (dom/classnames (css :palette-actions) true) [:button {:class (stl/css :palette-actions)
:on-click #(swap! state update :show-menu not)} :on-click #(swap! state* update :show-menu not)}
i/menu-refactor] i/menu-refactor]
[:div {:class (dom/classnames (css :palette) true) [:div {:class (stl/css :palette)
:ref container} :ref container}
(when text-palette? (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 :close-menu on-close-menu
:on-select-palette on-select-text-palette :on-select-palette on-select-text-palette-menu
:selected @selected-text}] :selected selected-text}]
[:& text-palette {:size size [:& text-palette {:size size
:selected @selected-text :selected selected-text
:width vport-width}]]) :width vport-width}]])
(when color-palette? (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 :close-menu on-close-menu
:on-select-palette on-select-palette :on-select-palette on-select-palette
:selected @selected}] :selected @selected}]
[:& color-palette {:size size [:& color-palette {:size size
:selected @selected :selected @selected
:width vport-width}]])]] :width vport-width}]])]]
[:div {:class (dom/classnames (css :handler) true) [:div {:class (stl/css :handler)
:on-click toggle-palettes} :on-click toggle-palettes}
[:div {:class (dom/classnames (css :handler-btn) true)}]])])])) [:div {:class (stl/css :handler-btn)}]])])]))

29
frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
View File

@@ -5,13 +5,12 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.text-palette-ctx-menu (ns app.main.ui.workspace.text-palette-ctx-menu
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@@ -22,35 +21,35 @@
shared-libs (mf/deref refs/workspace-libraries)] shared-libs (mf/deref refs/workspace-libraries)]
[:& dropdown {:show show-menu? [:& dropdown {:show show-menu?
:on-close close-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))] (for [[idx cur-library] (map-indexed vector (vals shared-libs))]
(let [typographies (-> cur-library (get-in [:data :typographies]) vals)] (let [typographies (-> cur-library (get-in [:data :typographies]) vals)]
[:li [:li
{:class (dom/classnames (css :palette-library) true {:class (stl/css-case :palette-library true
(css :selected) (= selected (:id cur-library))) :selected (= selected (:id cur-library)))
:key (str "library-" idx) :key (str "library-" idx)
:on-click #(on-select-palette cur-library)} :on-click #(on-select-palette cur-library)}
[:div [:div
{:class (dom/classnames (css :library-name) true)} {:class (stl/css :library-name)}
[:span {:class (css :lib-name)} [:span {:class (stl/css :lib-name)}
(dm/str (:name cur-library))] (dm/str (:name cur-library))]
[:span {:class (css :lib-num)} [:span {:class (stl/css :lib-num)}
(dm/str "(" (count typographies) ")")]] (dm/str "(" (count typographies) ")")]]
(when (= selected (:id cur-library)) (when (= selected (:id cur-library))
[:span {:class (dom/classnames (css :icon-wrapper) true)} [:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])])) i/tick-refactor])]))
[:li [:li
{:class (dom/classnames (css :file-library) true {:class (stl/css-case :file-library true
(css :selected) (= selected :file)) :selected (= selected :file))
:on-click #(on-select-palette :file)} :on-click #(on-select-palette :file)}
[:div {:class (dom/classnames (css :library-name) true)} [:div {:class (stl/css :library-name)}
[:span {:class (css :lib-name)} [:span {:class (stl/css :lib-name)}
(tr "workspace.libraries.colors.file-library")] (tr "workspace.libraries.colors.file-library")]
[:span {:class (css :lib-num)} [:span {:class (stl/css :lib-num)}
(dm/str "(" (count file-typographies) ")")]] (dm/str "(" (count file-typographies) ")")]]
(when (= selected :file) (when (= selected :file)
[:span {:class (dom/classnames (css :icon-wrapper) true)} [:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])]]])) i/tick-refactor])]]]))

2
frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
View File

@@ -9,7 +9,7 @@
.workspace-context-menu { .workspace-context-menu {
position: absolute; position: absolute;
left: auto; left: auto;
bottom: $s-0; bottom: var(--height);
max-width: $s-480; max-width: $s-480;
padding: $s-4; padding: $s-4;
margin: 0 0 $s-4 0; margin: 0 0 $s-4 0;

162
frontend/src/app/main/ui/workspace/textpalette.cljs
View File

@@ -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}]))