mirror of
https://github.com/penpot/penpot.git
synced 2025-04-15 00:12:33 -05:00
♻️ Remove new-css-system from workspace palettes
This commit is contained in:
Eva
Alonso Torres
parent
412343f3de
commit
93a7a8e856
11 changed files with 120 additions and 829 deletions
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}]))
|
||||
|
|
@ -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)}]])])]))
|
||||
|
|
|
|||
|
|
@ -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])]]]))
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}]))
|
||||
Loading…
Add table
Reference in a new issue