mirror of
https://github.com/penpot/penpot.git
synced 2025-02-12 18:18:24 -05:00
✨ Add new palette UI
This commit is contained in:
Eva
Andrés Moya
parent
68c1d9afaf
commit
36b016a37b
83 changed files with 1710 additions and 267 deletions
3
frontend/resources/images/icons/drop-refactor.svg
Normal file
3
frontend/resources/images/icons/drop-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M7.99996 1.793L11.773 5.567C13.299 7.092 13.756 9.386 12.931 11.379C12.106 13.373 10.161 14.672 8.00296 14.672C5.84596 14.672 3.90096 13.373 3.07596 11.379C2.24996 9.386 2.70696 7.092 4.23296 5.567L7.99996 1.793Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 343 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M13.333 4.667V2.667H7.99999M7.99999 2.667H2.66699V4.667M7.99999 2.667V13.333M9.99999 13.333H7.99999M7.99999 13.333H5.99999"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 253 B |
|
|
@ -23,6 +23,7 @@ body {
|
|||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,12 @@
|
|||
}
|
||||
}
|
||||
&:active {
|
||||
border: 1px solid var(--button-border-focus);
|
||||
outline: none;
|
||||
}
|
||||
&:focus-visible {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -46,6 +51,10 @@
|
|||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:focus-visible {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
|
|
@ -55,10 +64,12 @@
|
|||
color: transparent;
|
||||
fill: none;
|
||||
stroke: var(--icon-foreground);
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.button-icon-small {
|
||||
@extend .button-icon;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
stroke-width: 1.33px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,17 +5,12 @@
|
|||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// Border radius
|
||||
$br0: 0px;
|
||||
$br2: $s-2;
|
||||
$br3: 3px;
|
||||
$br4: 4px;
|
||||
$br5: 5px;
|
||||
$br6: 6px;
|
||||
$br7: 7px;
|
||||
$br8: 8px;
|
||||
$br10: 10px;
|
||||
$br12: 12px;
|
||||
$br25: 25px;
|
||||
$br50: 50px;
|
||||
$br99: 99px;
|
||||
$br-0: $s-0;
|
||||
$br-2: $s-2;
|
||||
$br-4: $s-4;
|
||||
$br-5: 0.313rem;
|
||||
$br-6: $s-6;
|
||||
$br-8: $s-8;
|
||||
$br-10: calc($s-8 + $s-2);
|
||||
$br-12: $s-12;
|
||||
$br-circle: 50%;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
@import "common/refactor/fonts.scss";
|
||||
@import "common/refactor/spacing.scss";
|
||||
@import "common/refactor/borders.scss";
|
||||
@import "common/refactor/opacity.scss";
|
||||
@import "common/refactor/shadows.scss";
|
||||
@import "common/refactor/z-index.scss";
|
||||
@import "common/refactor/mixins.scss";
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
background-color: rgba(170, 181, 186, 0.3);
|
||||
background-clip: content-box;
|
||||
border: $s-2 solid transparent;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
&:hover {
|
||||
background-color: rgba(170, 181, 186, 0.7);
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
--button-background-focus: var(--color-background-secondary);
|
||||
--button-foreground-focus: var(--color-foreground-primary);
|
||||
--button-border-focus: var(--color-accent-primary);
|
||||
--button-foreground-color-disabled: var(--color-background-quaternary);
|
||||
|
||||
--icon-foreground: var(--color-foreground-secondary);
|
||||
--icon-foreground-hover: var(--color-foreground-primary);
|
||||
|
|
@ -36,7 +37,6 @@
|
|||
--layer-row-foreground-color-hover: var(--color-accent-primary);
|
||||
--layer-row-foreground-color-selected: var(--color-accent-primary);
|
||||
--layer-row-foreground-color-drag: var(--color-accent-primary);
|
||||
--layer-row-foreground-color-hidden: rgba(var(--color-foreground-secondary-rgb), 0.7);
|
||||
--layer-row-foreground-color-focus: var(--color-foreground-primary);
|
||||
--layer-row-border-color-focus: var(--color-accent-primary);
|
||||
--layer-child-row-background-color: var(--color-background-tertiary);
|
||||
|
|
@ -51,12 +51,9 @@
|
|||
--input-placeholder-color: var(--color-foreground-secondary);
|
||||
--input-foreground-color: var(--color-foreground-primary);
|
||||
--input-foreground-color-active: var(--color-foreground-primary);
|
||||
--input-foreground-color-hover: var();
|
||||
--input-foreground-color-focus: var();
|
||||
--input-border-color-active: var(--color-accent-primary);
|
||||
--input-border-outline-color-active: var(--color-accent-primary-muted);
|
||||
--input-border-color-focus: var(--color-accent-primary);
|
||||
--input-border-color-disabled: var();
|
||||
|
||||
--pill-background-color: var(--color-background-tertiary);
|
||||
--pill-foreground-color: var(--color-foreground-primary);
|
||||
|
|
@ -77,4 +74,24 @@
|
|||
--menu-shadow-color: var(--color-background-subtle);
|
||||
|
||||
--tag-background-color: var(--color-accent-primary);
|
||||
|
||||
--palette-background-color: var(--color-background-primary);
|
||||
--palette-btn-background-color-selected: var(--color-background-secondary);
|
||||
--palette-btn-border-color-selected: var(--color-background-quaternary);
|
||||
--palette-btn-foreground-color-selected: var(--color-accent-primary);
|
||||
--palette-text-color: var(--color-foreground-secondary);
|
||||
--palette-text-color-selected: var(--color-foreground-primary);
|
||||
--palette-text-background-color: var(--color-background-tertiary);
|
||||
--palette-text-background-color-hover: var(--color-background-quaternary);
|
||||
--palette-button-shadow-initial: var(--color-background-primary);
|
||||
--palette-button-shadow-final: transparent;
|
||||
|
||||
--context-menu-background-color: var(--color-background-tertiary);
|
||||
--context-menu-foreground-color: var(--color-foreground-secondary);
|
||||
--context-menu-background-color-selected: var(--color-background-quaternary);
|
||||
--context-menu-foreground-color-selected: var(--color-foreground-primary);
|
||||
|
||||
--color-bullet-background-color: var(--white); // We don't want this color to change with palette
|
||||
--color-bullet-border-color: var(--color-background-quaternary);
|
||||
--palette-handler-background-color: var(--color-background-quaternary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,16 +31,19 @@
|
|||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin buttonSmallTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-10;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin textEllipsis {
|
||||
max-width: 99%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@mixin twoLineTextEllipsis {
|
||||
max-width: 99%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
|
|
|||
12
frontend/resources/styles/common/refactor/opacity.scss
Normal file
12
frontend/resources/styles/common/refactor/opacity.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// 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
|
||||
|
||||
// Opacity values
|
||||
$op-0: 0;
|
||||
$op-1: 0.1;
|
||||
$op-4: 0.3;
|
||||
$op-7: 0.7;
|
||||
$op-10: 1;
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
--layer-indentation-size: calc(var(--s-4) * 5);
|
||||
}
|
||||
|
||||
$s-0: 0px;
|
||||
$s-2: math.div(0.25rem, 2);
|
||||
$s-4: var(--s-4);
|
||||
$s-6: calc($s-2 + $s-4);
|
||||
|
|
@ -34,8 +35,12 @@ $s-72: calc(var(--s-4) * 18);
|
|||
$s-76: calc(var(--s-4) * 19);
|
||||
$s-80: calc(var(--s-4) * 20);
|
||||
$s-96: calc(var(--s-4) * 24);
|
||||
$s-104: calc(var(--s-4) * 25);
|
||||
$s-120: calc(var(--s-4) * 30);
|
||||
$s-136: calc(var(--s-4) * 34);
|
||||
$s-152: calc(var(--s-4) * 38);
|
||||
$s-192: calc(var(--s-4) * 48);
|
||||
$s-240: calc(var(--s-4) * 60);
|
||||
$s-248: calc(var(--s-4) * 61);
|
||||
$s-480: calc(var(--s-4) * 120);
|
||||
$s-736: calc(var(--s-4) * 184);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,16 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
.color-bullet {
|
||||
border: 2px solid $color-gray-30;
|
||||
position: relative;
|
||||
width: var(--bullet-size);
|
||||
height: var(--bullet-size);
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
.color-cell {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
[app.main.refs :as refs]
|
||||
[app.main.repo :as rp]
|
||||
[app.main.store :as st]
|
||||
[app.util.color :as uc]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.router :as rt]
|
||||
[app.util.time :as dt]
|
||||
|
|
@ -98,19 +99,14 @@
|
|||
item
|
||||
(assoc item :path path :name name))))
|
||||
|
||||
(defn default-color-name [color]
|
||||
(or (:color color)
|
||||
(case (get-in color [:gradient :type])
|
||||
:linear (tr "workspace.gradients.linear")
|
||||
:radial (tr "workspace.gradients.radial"))))
|
||||
|
||||
(defn add-color
|
||||
[color]
|
||||
(let [id (uuid/next)
|
||||
color (-> color
|
||||
(assoc :id id)
|
||||
(assoc :name (default-color-name color)))]
|
||||
(dm/assert! (ctc/color? color))
|
||||
(assoc :name (or (:color color)
|
||||
(uc/gradient-type->string (get-in color [:gradient :type])))))]
|
||||
(dm/assert! ::ctc/color color)
|
||||
(ptk/reify ::add-color
|
||||
IDeref
|
||||
(-deref [_] color)
|
||||
|
|
|
|||
|
|
@ -8,15 +8,8 @@
|
|||
(:require
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(defn gradient-type->string [type]
|
||||
(case type
|
||||
:linear (tr "workspace.gradients.linear")
|
||||
:radial (tr "workspace.gradients.radial")
|
||||
nil))
|
||||
|
||||
(mf/defc color-bullet
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [color on-click]}]
|
||||
|
|
@ -36,7 +29,7 @@
|
|||
:is-not-library-color (nil? (:id color))
|
||||
:is-gradient (some? (:gradient color)))
|
||||
:on-click on-click
|
||||
:title (or (:color-library-name color) (:name color) (:color color) (gradient-type->string (:type (:gradient color))))}
|
||||
:title (uc/get-color-name color)}
|
||||
(if (:gradient color)
|
||||
[:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
|
||||
[:div.color-bullet-wrapper
|
||||
|
|
@ -46,7 +39,7 @@
|
|||
(mf/defc color-name [{:keys [color size on-click on-double-click]}]
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)
|
||||
{:keys [name color gradient]} color
|
||||
color-str (or name color (gradient-type->string (:type gradient)))]
|
||||
color-str (or name color (uc/gradient-type->string (:type gradient)))]
|
||||
(when (or (not size) (= size :big))
|
||||
[:span.color-text {:on-click #(when on-click (on-click %))
|
||||
:on-double-click #(when on-double-click (on-double-click %))
|
||||
|
|
|
|||
54
frontend/src/app/main/ui/components/color_bullet_new.cljs
Normal file
54
frontend/src/app/main/ui/components/color_bullet_new.cljs
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
;; 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.components.color-bullet-new
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
||||
(mf/defc color-bullet
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [color on-click mini?]}]
|
||||
(let [on-click (mf/use-fn
|
||||
(mf/deps color on-click)
|
||||
(fn [event]
|
||||
(when (fn? on-click)
|
||||
(^function on-click color event))))]
|
||||
(if (uc/multiple? color)
|
||||
[:div {:on-click on-click
|
||||
:class (dom/classnames (css :color-bullet) true
|
||||
(css :multiple) true)}]
|
||||
;; No multiple selection
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)]
|
||||
[:div
|
||||
{:class (dom/classnames (css :color-bullet) true
|
||||
(css :mini) mini?
|
||||
(css :is-library-color) (some? (:id color))
|
||||
(css :is-not-library-color) (nil? (:id color))
|
||||
(css :is-gradient) (some? (:gradient color))
|
||||
(css :is-transparent) (and (:opacity color) (> 1 (:opacity color))))
|
||||
:on-click on-click}
|
||||
(if (:gradient color)
|
||||
[:div {:class (dom/classnames (css :color-bullet-wrapper) true)
|
||||
:style {:background (uc/color->background color)}}]
|
||||
[:div {:class (dom/classnames (css :color-bullet-wrapper) true)}
|
||||
[:div {:class (dom/classnames (css :color-bullet-left) true)
|
||||
:style {:background (uc/color->background (assoc color :opacity 1))}}]
|
||||
[:div {:class (dom/classnames (css :color-bullet-right) true)
|
||||
:style {:background (uc/color->background color)}}]])]))))
|
||||
(mf/defc color-name [{:keys [color size on-click on-double-click]}]
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)
|
||||
{:keys [name color gradient]} color
|
||||
color-str (or name color (uc/gradient-type->string (:type gradient)))
|
||||
text-small (and (>= size 64) (< size 72))]
|
||||
(when (or (not size) (> size 64))
|
||||
[:span {:class (dom/classnames (css :color-text) true
|
||||
(css :small-text) text-small)
|
||||
:on-click #(when on-click (on-click %))
|
||||
:on-double-click #(when on-double-click (on-double-click %))} color-str])))
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"components_color_bullet_new_button-primary_pDkQg","button-secondary":"components_color_bullet_new_button-secondary_y3A8V","button-icon":"components_color_bullet_new_button-icon_uAC1e","button-icon-small":"components_color_bullet_new_button-icon-small_rz5pc","color-bullet":"components_color_bullet_new_color-bullet_b1w8U","mini":"components_color_bullet_new_mini_B261Z","is-not-library-color":"components_color_bullet_new_is-not-library-color_PSveA","color-bullet-wrapper":"components_color_bullet_new_color-bullet-wrapper_clt4r","is-gradient":"components_color_bullet_new_is-gradient_6RdV2","is-transparent":"components_color_bullet_new_is-transparent_g0iwn","color-text":"components_color_bullet_new_color-text_HM6mp","small-text":"components_color_bullet_new_small-text_Y4OeK","no-text":"components_color_bullet_new_no-text_pbTQf"}
|
||||
74
frontend/src/app/main/ui/components/color_bullet_new.scss
Normal file
74
frontend/src/app/main/ui/components/color_bullet_new.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.color-bullet {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: var(--bullet-size);
|
||||
height: var(--bullet-size);
|
||||
margin-top: $s-4;
|
||||
border: $s-2 solid var(--color-bullet-border-color);
|
||||
border-radius: $br-circle;
|
||||
&.mini {
|
||||
border: 1px solid var(--color-bullet-border-color);
|
||||
}
|
||||
|
||||
&.is-not-library-color {
|
||||
overflow: hidden;
|
||||
border-radius: $br-8;
|
||||
|
||||
& .color-bullet-wrapper {
|
||||
clip-path: none;
|
||||
}
|
||||
&.mini {
|
||||
border-radius: $br-4;
|
||||
}
|
||||
}
|
||||
&.is-gradient {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
&.is-transparent {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
}
|
||||
.color-bullet-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
clip-path: circle(50%);
|
||||
}
|
||||
.color-bullet-wrapper > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.color-text {
|
||||
@include twoLineTextEllipsis;
|
||||
@include titleTipography;
|
||||
width: $s-80;
|
||||
text-align: center;
|
||||
margin-top: $s-2;
|
||||
max-height: $s-28;
|
||||
color: var(--palette-text-color);
|
||||
&.small-text {
|
||||
@include textEllipsis;
|
||||
max-height: $s-16;
|
||||
}
|
||||
}
|
||||
|
||||
.no-text {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.context-menu-a11y.context-menu-a11y
|
||||
(ns app.main.ui.components.context-menu-a11y
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"components_context_menu_a11y_button-primary_FTrG6","button-secondary":"components_context_menu_a11y_button-secondary_tIeiM","button-icon":"components_context_menu_a11y_button-icon_eOLGl","button-icon-small":"components_context_menu_a11y_button-icon-small_bQvvB","context-menu":"components_context_menu_a11y_context-menu_bS2vM","context-menu-items":"components_context_menu_a11y_context-menu-items_lQC7H","context-menu-item":"components_context_menu_a11y_context-menu-item_E2GpJ","context-menu-action":"components_context_menu_a11y_context-menu-action_E53yg","submenu-back":"components_context_menu_a11y_submenu-back_AboXg","submenu-icon-back":"components_context_menu_a11y_submenu-icon-back_gy-B6","submenu":"components_context_menu_a11y_submenu_MuyM8","submenu-icon":"components_context_menu_a11y_submenu-icon_tWTVU","is-open":"components_context_menu_a11y_is-open_FbqIp","fixed":"components_context_menu_a11y_fixed_iJxPr","separator":"components_context_menu_a11y_separator_DrZoB","min-width":"components_context_menu_a11y_min-width_w-ron","is-selected":"components_context_menu_a11y_is-selected_UPMXx","is-selectable":"components_context_menu_a11y_is-selectable_n7sdb"}
|
||||
|
|
@ -9,13 +9,13 @@
|
|||
.context-menu {
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
opacity: $op-0;
|
||||
z-index: $z-index-2;
|
||||
|
||||
&.is-open {
|
||||
position: relative;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
visibility: visible;
|
||||
}
|
||||
&.fixed {
|
||||
|
|
@ -28,9 +28,9 @@
|
|||
left: calc(-1 * $s-6);
|
||||
max-height: $s-480;
|
||||
min-width: $s-96;
|
||||
margin: 0;
|
||||
margin: $s-0;
|
||||
padding: $s-4;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--menu-background-color);
|
||||
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
|
||||
overflow: auto;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
height: $s-28;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
white-space: nowrap;
|
||||
color: var(--menu-foreground-color);
|
||||
&.submenu {
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"context_menu_a11y_context_menu_a11y_button-primary_-nqKB","button-secondary":"context_menu_a11y_context_menu_a11y_button-secondary_3sivR","button-icon":"context_menu_a11y_context_menu_a11y_button-icon_45j80","button-icon-small":"context_menu_a11y_context_menu_a11y_button-icon-small_TNORx","context-menu":"context_menu_a11y_context_menu_a11y_context-menu_HLzPl","context-menu-items":"context_menu_a11y_context_menu_a11y_context-menu-items_r2JIA","context-menu-item":"context_menu_a11y_context_menu_a11y_context-menu-item_KB64Q","context-menu-action":"context_menu_a11y_context_menu_a11y_context-menu-action_x7nPU","submenu-back":"context_menu_a11y_context_menu_a11y_submenu-back_8iOw0","submenu-icon-back":"context_menu_a11y_context_menu_a11y_submenu-icon-back_vlCP7","submenu":"context_menu_a11y_context_menu_a11y_submenu_pUX19","submenu-icon":"context_menu_a11y_context_menu_a11y_submenu-icon_mlof4","is-open":"context_menu_a11y_context_menu_a11y_is-open_ASqQk","fixed":"context_menu_a11y_context_menu_a11y_fixed_5h8sL","separator":"context_menu_a11y_context_menu_a11y_separator_b1CzA","min-width":"context_menu_a11y_context_menu_a11y_min-width_jirG8","is-selected":"context_menu_a11y_context_menu_a11y_is-selected_jihDn","is-selectable":"context_menu_a11y_context_menu_a11y_is-selectable_wqvJa"}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.tab-container.tab-container
|
||||
(ns app.main.ui.components.tab-container
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"components_tab_container_button-primary_ibiAz","button-secondary":"components_tab_container_button-secondary_wZR80","button-icon":"components_tab_container_button-icon_2NhVr","button-icon-small":"components_tab_container_button-icon-small_yU7na","tab-container":"components_tab_container_tab-container_P6HRr","tab-container-content":"components_tab_container_tab-container-content_yfM9F","tab-element":"components_tab_container_tab-element_gBIwV","tab-container-tabs":"components_tab_container_tab-container-tabs_6gXOY","tab-container-tab-wrapper":"components_tab_container_tab-container-tab-wrapper_-ngrN","tab-container-tab-title":"components_tab_container_tab-container-tab-title_IN1Dx","current":"components_tab_container_current_jrovp","collapse-sidebar":"components_tab_container_collapse-sidebar_e5hFv","collapsed":"components_tab_container_collapsed_lfkjK"}
|
||||
|
|
@ -26,9 +26,9 @@
|
|||
flex-direction: row;
|
||||
gap: $s-2;
|
||||
height: $s-32;
|
||||
margin: $s-2 $s-2 0 $s-2;
|
||||
padding: $s-2;
|
||||
border-radius: $br8;
|
||||
margin: $s-4 $s-4 0 $s-4;
|
||||
padding: $s-2 $s-2 $s-2 0;
|
||||
border-radius: $br-8;
|
||||
background: var(--color-background-secondary);
|
||||
cursor: pointer;
|
||||
font-size: $fs12;
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
height: $s-28;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: $br5;
|
||||
border-radius: $br-5;
|
||||
background-color: transparent;
|
||||
color: var(--tab-foreground-color);
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
height: 100%;
|
||||
width: $s-24;
|
||||
padding: 0;
|
||||
border-radius: $br5;
|
||||
border-radius: $br-5;
|
||||
svg {
|
||||
@include flexCenter;
|
||||
height: 12px;
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"tab_container_tab_container_button-primary_83Zqm","button-secondary":"tab_container_tab_container_button-secondary_lnkfT","button-icon":"tab_container_tab_container_button-icon_9pt7Y","button-icon-small":"tab_container_tab_container_button-icon-small_A8MNz","tab-container":"tab_container_tab_container_tab-container_UElWL","tab-container-content":"tab_container_tab_container_tab-container-content_5dioy","tab-element":"tab_container_tab_container_tab-element_ehGDK","tab-container-tabs":"tab_container_tab_container_tab-container-tabs_Vrl6C","tab-container-tab-wrapper":"tab_container_tab_container_tab-container-tab-wrapper_-g0lU","tab-container-tab-title":"tab_container_tab_container_tab-container-tab-title_lR2I4","current":"tab_container_tab_container_current_jHyvE","collapse-sidebar":"tab_container_tab_container_collapse-sidebar_cuRC2","collapsed":"tab_container_tab_container_collapsed_KWhAl"}
|
||||
|
|
@ -1,23 +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.components.tests.test-component
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.util.keyboard :as kbd]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc test-component [{:keys [action icon name ]}]
|
||||
[:button.test-component
|
||||
{:class (css :button)
|
||||
:tab-index "0"
|
||||
:on-click action
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(action event)))}
|
||||
|
||||
(when icon [:span.logo icon])
|
||||
name])
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button":"tests_test_component_button_8MQZj"}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.button {
|
||||
color: var(--button-foreground-active);
|
||||
background-color: var(--button-background-active);
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
[app.main.data.modal :as modal]
|
||||
[app.main.repo :as rp]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.context-menu-a11y.context-menu-a11y :refer [context-menu-a11y]]
|
||||
[app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
[app.main.ui.hooks :as h]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.worker :as wrk]
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.dom.dnd :as dnd]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
|
|
@ -126,7 +127,7 @@
|
|||
[:div.asset-list
|
||||
(for [color (:sample colors)]
|
||||
(let [default-name (cond
|
||||
(:gradient color) (bc/gradient-type->string (get-in color [:gradient :type]))
|
||||
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
|
||||
(:color color) (:color color)
|
||||
:else (:value color))]
|
||||
[:div.asset-list-item {:key (str "assets-color-" (:id color))}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
[app.main.data.modal :as modal]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.context-menu-a11y.context-menu-a11y :refer [context-menu-a11y]]
|
||||
[app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.dashboard.import :as udi]
|
||||
[app.util.dom :as dom]
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
[app.main.data.users :as du]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.tests.test-component :as tc]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
|
@ -55,6 +54,4 @@
|
|||
(d/name color)]))]]
|
||||
[:div {:class (css :components-row)}
|
||||
[:h2 {:class (css :title)} "Components"]
|
||||
[:div {:class (css :component-wrapper)}
|
||||
[:& tc/test-component
|
||||
{:action #(prn "ey soy un botón") :name "Click me"}]]]]))
|
||||
[:div {:class (css :component-wrapper)}]]]))
|
||||
|
|
@ -263,6 +263,10 @@
|
|||
(def arrow-refactor (icon-xref :arrow-refactor))
|
||||
(def board-refactor (icon-xref :board-refactor))
|
||||
(def boards-thumbnail-refactor (icon-xref :boards-thumbnail-refactor))
|
||||
(def boolean-difference-refactor (icon-xref :boolean-difference-refactor))
|
||||
(def boolean-exclude-refactor (icon-xref :boolean-exclude-refactor))
|
||||
(def boolean-flatten-refactor (icon-xref :boolean-flatten-refactor))
|
||||
(def boolean-intersection-refactor (icon-xref :boolean-intersection-refactor))
|
||||
(def close-refactor (icon-xref :close-refactor))
|
||||
(def close-small-refactor (icon-xref :close-small-refactor))
|
||||
(def component-refactor (icon-xref :component-refactor))
|
||||
|
|
@ -270,12 +274,10 @@
|
|||
(def curve-refactor (icon-xref :curve-refactor))
|
||||
(def delete-refactor (icon-xref :delete-refactor))
|
||||
(def delete-text-refactor (icon-xref :delete-text-refactor))
|
||||
(def boolean-difference-refactor (icon-xref :boolean-difference-refactor))
|
||||
(def document-refactor (icon-xref :document-refactor))
|
||||
(def drop-refactor (icon-xref :drop-refactor))
|
||||
(def elipse-refactor (icon-xref :elipse-refactor))
|
||||
(def boolean-exclude-refactor (icon-xref :boolean-exclude-refactor))
|
||||
(def filter-refactor (icon-xref :filter-refactor))
|
||||
(def boolean-flatten-refactor (icon-xref :boolean-flatten-refactor))
|
||||
(def flex-refactor (icon-xref :flex-refactor))
|
||||
(def flex-horizontal-refactor (icon-xref :flex-horizontal-refactor))
|
||||
(def flex-grid-refactor (icon-xref :flex-grid-refactor))
|
||||
|
|
@ -284,14 +286,15 @@
|
|||
(def group-refactor (icon-xref :group-refactor))
|
||||
(def hide-refactor (icon-xref :hide-refactor))
|
||||
(def img-refactor (icon-xref :img-refactor))
|
||||
(def boolean-intersection-refactor (icon-xref :boolean-intersection-refactor))
|
||||
(def lock-refactor (icon-xref :lock-refactor))
|
||||
(def mask-refactor (icon-xref :mask-refactor))
|
||||
(def menu-refactor (icon-xref :menu-refactor))
|
||||
(def path-refactor (icon-xref :path-refactor))
|
||||
(def rectangle-refactor (icon-xref :rectangle-refactor))
|
||||
(def search-refactor (icon-xref :search-refactor))
|
||||
(def shown-refactor (icon-xref :shown-refactor))
|
||||
(def text-refactor (icon-xref :text-refactor))
|
||||
(def text-palette-refactor (icon-xref :text-palette-refactor))
|
||||
(def tick-refactor (icon-xref :tick-refactor))
|
||||
(def unlock-refactor (icon-xref :unlock-refactor))
|
||||
(def boolean-union-refactor (icon-xref :boolean-union-refactor))
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
[app.main.data.modal :as modal]
|
||||
[app.main.data.users :as du]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.context-menu-a11y.context-menu-a11y :refer [context-menu-a11y]]
|
||||
[app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
|
||||
[app.main.ui.components.forms :as fm]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
[app.common.spec :as us]
|
||||
[app.main.data.messages :as dm]
|
||||
[app.main.data.users :as du]
|
||||
[app.main.features :as features]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.forms :as fm]
|
||||
|
|
@ -39,7 +40,8 @@
|
|||
initial (mf/with-memo [profile]
|
||||
(update profile :lang #(or % "")))
|
||||
form (fm/use-form :spec ::options-form
|
||||
:initial initial)]
|
||||
:initial initial)
|
||||
new-css-system (features/use-feature :new-css-system)]
|
||||
|
||||
[:& fm/form {:class "options-form"
|
||||
:on-submit on-submit
|
||||
|
|
@ -55,14 +57,15 @@
|
|||
:name :lang
|
||||
:data-test "setting-lang"}]]
|
||||
|
||||
[:h2 (tr "dashboard.theme-change")]
|
||||
[:div.fields-row
|
||||
[:& fm/select {:label (tr "dashboard.select-ui-theme")
|
||||
:name :theme
|
||||
:default "default"
|
||||
:options [{:label "Penpot Dark (default)" :value "default"}
|
||||
{:label "Penpot Light" :value "light"}]
|
||||
:data-test "setting-theme"}]]
|
||||
(when new-css-system
|
||||
[:h2 (tr "dashboard.theme-change")]
|
||||
[:div.fields-row
|
||||
[:& fm/select {:label (tr "dashboard.select-ui-theme")
|
||||
:name :theme
|
||||
:default "default"
|
||||
:options [{:label "Penpot Dark (default)" :value "default"}
|
||||
{:label "Penpot Light" :value "light"}]
|
||||
:data-test "setting-theme"}]])
|
||||
[:& fm/submit-button
|
||||
{:label (tr "dashboard.update-settings")
|
||||
:data-test "submit-lang-change"}]]))
|
||||
|
|
@ -72,7 +75,7 @@
|
|||
(mf/defc options-page
|
||||
[]
|
||||
(mf/use-effect
|
||||
#(dom/set-html-title (tr "title.settings.options")))
|
||||
#(dom/set-html-title (tr "title.settings.options")))
|
||||
|
||||
[:div.dashboard-settings
|
||||
[:div.form-container
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
[app.main.store :as st]
|
||||
[app.main.ui.components.shape-icon :as si]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.layers.layer-name.layer-name :refer [layer-name]]
|
||||
[app.main.ui.workspace.sidebar.layer-name :refer [layer-name]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.keyboard :as kbd]
|
||||
[okulary.core :as l]
|
||||
|
|
|
|||
|
|
@ -21,15 +21,16 @@
|
|||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.colorpalette :refer [colorpalette]]
|
||||
[app.main.ui.workspace.colorpicker]
|
||||
[app.main.ui.workspace.context-menu.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.header :refer [header]]
|
||||
[app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
|
||||
[app.main.ui.workspace.libraries]
|
||||
[app.main.ui.workspace.nudge]
|
||||
[app.main.ui.workspace.sidebar.collapsable-button.collapsable-button :refer [collapsed-button]]
|
||||
[app.main.ui.workspace.sidebar.component.sidebar :refer [left-sidebar right-sidebar]]
|
||||
[app.main.ui.workspace.palette :refer [palette]]
|
||||
[app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
|
||||
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.sidebar :refer [left-sidebar right-sidebar]]
|
||||
[app.main.ui.workspace.textpalette :refer [textpalette]]
|
||||
[app.main.ui.workspace.viewport :refer [viewport]]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -58,6 +59,7 @@
|
|||
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-callback
|
||||
|
|
@ -68,11 +70,14 @@
|
|||
|
||||
node-ref (use-resize-observer on-resize)]
|
||||
[:*
|
||||
(when (and colorpalette? (not hide-ui?))
|
||||
(if new-css-system
|
||||
[:& palette {:layout layout}]
|
||||
[:*
|
||||
(when (and colorpalette? (not hide-ui?))
|
||||
[:& colorpalette])
|
||||
|
||||
(when (and textpalette? (not hide-ui?))
|
||||
[:& textpalette])
|
||||
[:& textpalette])])
|
||||
|
||||
[:section.workspace-content {:key (dm/str "workspace-" page-id)
|
||||
:ref node-ref}
|
||||
|
|
@ -179,22 +184,22 @@
|
|||
[:& (mf/provider ctx/components-v2) {:value components-v2}
|
||||
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
|
||||
[:& (mf/provider ctx/workspace-read-only?) {:value workspace-read-only?}
|
||||
[:section#workspace {:style {:background-color background-color
|
||||
:touch-action "none"}}
|
||||
(when (not (:hide-ui layout))
|
||||
[:& header {:file file
|
||||
:page-id page-id
|
||||
:project project
|
||||
:layout layout}])
|
||||
[:section#workspace {:style {:background-color background-color
|
||||
:touch-action "none"}}
|
||||
(when (not (:hide-ui layout))
|
||||
[:& header {:file file
|
||||
:page-id page-id
|
||||
:project project
|
||||
:layout layout}])
|
||||
|
||||
[:& context-menu]
|
||||
[:& context-menu]
|
||||
|
||||
(if ready?
|
||||
[:& workspace-page {:page-id page-id
|
||||
:file file
|
||||
:wglobal wglobal
|
||||
:layout layout}]
|
||||
[:& workspace-loader])]]]]]]]]))
|
||||
(if ready?
|
||||
[:& workspace-page {:page-id page-id
|
||||
:file file
|
||||
:wglobal wglobal
|
||||
:layout layout}]
|
||||
[:& workspace-loader])]]]]]]]]))
|
||||
|
||||
(mf/defc remove-graphics-dialog
|
||||
{::mf/register modal/components
|
||||
|
|
@ -206,10 +211,10 @@
|
|||
reload-file #(dom/reload-current-window)
|
||||
nav-out #(st/emit! (rt/navigate :dashboard-files
|
||||
{:team-id (:team-id project)
|
||||
:project-id (:id project)}))]
|
||||
:project-id (:id project)}))]
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
#(st/emit! (dw/clear-remove-graphics))))
|
||||
(fn []
|
||||
#(st/emit! (dw/clear-remove-graphics))))
|
||||
[:div.modal-overlay
|
||||
[:div.modal-container.remove-graphics-dialog
|
||||
[:div.modal-header
|
||||
|
|
|
|||
166
frontend/src/app/main/ui/workspace/color_palette.cljs
Normal file
166
frontend/src/app/main/ui/workspace/color_palette.cljs
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
;; 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.color-palette
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(: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-new :as cb]
|
||||
[app.main.ui.hooks :as h]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.object :as obj]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc palette-item
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [color size]}]
|
||||
(letfn [(select-color [event]
|
||||
(st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))]
|
||||
[:div {:class (dom/classnames (css :color-cell) true
|
||||
(css :is-not-library-color) (nil? (:id color))
|
||||
(css :no-text) (<= size 64))
|
||||
:title (uc/get-color-name color)
|
||||
:on-click select-color}
|
||||
[:& cb/color-bullet {:color color}]
|
||||
[:& cb/color-name {:color color :size size}]]))
|
||||
|
||||
|
||||
(mf/defc palette
|
||||
[{:keys [current-colors size width]}]
|
||||
(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 %)) current-colors))
|
||||
state (mf/use-state {:show-menu false})
|
||||
offset-step (cond
|
||||
(<= size 64) 40
|
||||
(<= size 72) 88
|
||||
(<= size 80) 88
|
||||
:else 88)
|
||||
buttons-size (cond
|
||||
(<= size 64) 164
|
||||
(<= size 72) 164
|
||||
(<= size 80) 132
|
||||
:else 132)
|
||||
width (- width buttons-size)
|
||||
visible (int (/ width offset-step))
|
||||
show-arrows? (> (count current-colors) visible)
|
||||
offset (:offset @state 0)
|
||||
max-offset (- (count current-colors)
|
||||
visible)
|
||||
|
||||
container (mf/use-ref nil)
|
||||
bullet-size (cond
|
||||
(<= size 64) "32"
|
||||
(<= size 72) "28"
|
||||
(<= size 80) "32"
|
||||
:else "32")
|
||||
|
||||
on-left-arrow-click
|
||||
(mf/use-callback
|
||||
(mf/deps max-offset visible)
|
||||
(fn [_]
|
||||
(swap! state update :offset
|
||||
(fn [offset]
|
||||
(if (pos? offset)
|
||||
(max (- offset 1) 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 1))
|
||||
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)))))]
|
||||
|
||||
(mf/use-layout-effect
|
||||
#(let [dom (mf/ref-val container)
|
||||
width (obj/get dom "clientWidth")]
|
||||
(swap! state assoc :width width)))
|
||||
|
||||
(mf/with-effect [width current-colors]
|
||||
(when (not= 0 (:offset @state))
|
||||
(swap! state assoc :offset 0)))
|
||||
|
||||
[:div {:class (dom/classnames (css :color-palette) true
|
||||
(css :no-text) (< size 64))
|
||||
:style #js {"--bullet-size" (dm/str bullet-size "px")}}
|
||||
|
||||
(when show-arrows?
|
||||
[:button {:class (dom/classnames (css :left-arrow) true)
|
||||
:disabled (= offset 0)
|
||||
:on-click on-left-arrow-click} i/arrow-refactor])
|
||||
[:div {:class (dom/classnames (css :color-palette-content) true)
|
||||
:ref container
|
||||
:on-wheel on-scroll}
|
||||
(if (empty? current-colors)
|
||||
[:div {:class (dom/classnames (css :color-palette-empty) true)
|
||||
:style {:position "absolute"
|
||||
:left "50%"
|
||||
:top "50%"
|
||||
:transform "translate(-50%, -50%)"}}
|
||||
(tr "workspace.libraries.colors.empty-palette")]
|
||||
[:div {:class (dom/classnames (css :color-palette-inside) true)
|
||||
:style {:position "relative"
|
||||
:max-width (str width "px")
|
||||
:right (str (* offset-step offset) "px")}}
|
||||
(for [[idx item] (map-indexed vector current-colors)]
|
||||
[:& palette-item {:color item :key idx :size size}])])]
|
||||
(when show-arrows?
|
||||
[:button {:class (dom/classnames (css :right-arrow) true)
|
||||
:disabled (= offset max-offset)
|
||||
:on-click on-right-arrow-click} i/arrow-refactor])]))
|
||||
|
||||
(defn library->colors [shared-libs selected]
|
||||
(map #(merge % {:file-id selected})
|
||||
(-> shared-libs
|
||||
(get-in [selected :data :colors])
|
||||
(vals))))
|
||||
|
||||
(mf/defc color-palette
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [size width selected] :as props}]
|
||||
(let [recent-colors (mf/deref refs/workspace-recent-colors)
|
||||
file-colors (mf/deref refs/workspace-file-colors)
|
||||
shared-libs (mf/deref refs/workspace-libraries)
|
||||
colors (mf/use-state [])]
|
||||
|
||||
(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
|
||||
:size size
|
||||
:width width}]))
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"workspace_color_palette_button-primary_0d2e2","button-secondary":"workspace_color_palette_button-secondary_C8qJL","button-icon":"workspace_color_palette_button-icon_-tBR6","color-palette":"workspace_color_palette_color-palette_hfJPA","left-arrow":"workspace_color_palette_left-arrow_PK7sj","right-arrow":"workspace_color_palette_right-arrow_swpS9","button-icon-small":"workspace_color_palette_button-icon-small_RrGTg","disabled":"workspace_color_palette_disabled_bz-he","color-palette-content":"workspace_color_palette_color-palette-content_okg18","color-palette-inside":"workspace_color_palette_color-palette-inside_dCIeR","color-cell":"workspace_color_palette_color-cell_ITDgl","is-not-library-color":"workspace_color_palette_is-not-library-color_EqCM6","no-text":"workspace_color_palette_no-text_QMPK0"}
|
||||
96
frontend/src/app/main/ui/workspace/color_palette.scss
Normal file
96
frontend/src/app/main/ui/workspace/color_palette.scss
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.color-palette {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.left-arrow,
|
||||
.right-arrow {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
padding: 0;
|
||||
z-index: $z-index-4;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: $z-index-1;
|
||||
bottom: 0;
|
||||
left: calc(-1 * $s-80);
|
||||
height: 100%;
|
||||
width: $s-80;
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
var(--palette-button-shadow-initial) 0%,
|
||||
var(--palette-button-shadow-final) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: var(--button-foreground-hover);
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
svg {
|
||||
stroke: var(--button-foreground-color-disabled);
|
||||
}
|
||||
&::after {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-arrow {
|
||||
&::after {
|
||||
left: $s-24;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--palette-button-shadow-initial) 0%,
|
||||
var(--palette-button-shadow-final) 100%
|
||||
);
|
||||
}
|
||||
&.disabled ::after {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
.color-palette-inside {
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
}
|
||||
.color-cell {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto 1fr;
|
||||
justify-items: center;
|
||||
height: 100%;
|
||||
width: $s-80;
|
||||
&.is-not-library-color {
|
||||
width: $s-64;
|
||||
}
|
||||
&.no-text {
|
||||
@include flexCenter;
|
||||
width: $s-32;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
;; 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.color-palette-ctx-menu
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(: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]]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc color-palette-ctx-menu
|
||||
[{:keys [show-menu? close-menu on-select-palette selected]}]
|
||||
(let [recent-colors (mf/deref refs/workspace-recent-colors)
|
||||
file-colors (mf/deref refs/workspace-file-colors)
|
||||
shared-libs (mf/deref refs/workspace-libraries)]
|
||||
[:& dropdown {:show show-menu?
|
||||
:on-close close-menu}
|
||||
[:ul {:class (dom/classnames (css :palette-menu) true)}
|
||||
(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)}
|
||||
(str (:name library) " " (str/ffmt "(%)" (count colors)))
|
||||
(when (= selected id)
|
||||
[:span {:class (dom/classnames (css :icon-wrapper) true)}
|
||||
i/tick-refactor])]
|
||||
[:div {:class (dom/classnames (css :color-sample) true)
|
||||
: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))
|
||||
:on-click on-select-palette
|
||||
:data-palette "file"}
|
||||
|
||||
[:div {:class (dom/classnames (css :option-wrapper) true)}
|
||||
[:div {:class (dom/classnames (css :library-name) true)}
|
||||
(dm/str
|
||||
(tr "workspace.libraries.colors.file-library")
|
||||
(str/ffmt " (%)" (count file-colors)))
|
||||
|
||||
(when (= selected :file)
|
||||
[:span {:class (dom/classnames (css :icon-wrapper) true)}
|
||||
i/tick-refactor])]
|
||||
[:div {:class (dom/classnames (css :color-sample) true)
|
||||
: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))
|
||||
:on-click on-select-palette
|
||||
:data-palette "recent"}
|
||||
[:div {:class (dom/classnames (css :option-wrapper) true)}
|
||||
[:div {:class (dom/classnames (css :library-name) true)}
|
||||
(str (tr "workspace.libraries.colors.recent-colors")
|
||||
(str/format " (%s)" (count recent-colors)))
|
||||
(when (= selected :recent)
|
||||
[:span {:class (dom/classnames (css :icon-wrapper) true)}
|
||||
i/tick-refactor])]
|
||||
[:div {:class (dom/classnames (css :color-sample) true)
|
||||
:style #js {"--bullet-size" "20px"}}
|
||||
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))]
|
||||
[:& cb/color-bullet {:key (str "color-" idx)
|
||||
:mini? true
|
||||
:color color}])]]]]]))
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"workspace_color_palette_ctx_menu_button-primary_2ka4z","button-secondary":"workspace_color_palette_ctx_menu_button-secondary_jfajf","button-icon":"workspace_color_palette_ctx_menu_button-icon_cCaY2","button-icon-small":"workspace_color_palette_ctx_menu_button-icon-small_-knT4","palette-menu":"workspace_color_palette_ctx_menu_palette-menu_Vrjfy","palette-library":"workspace_color_palette_ctx_menu_palette-library_0LFV5","selected":"workspace_color_palette_ctx_menu_selected_lfchf","icon-wrapper":"workspace_color_palette_ctx_menu_icon-wrapper_v8-ys","recent-colors":"workspace_color_palette_ctx_menu_recent-colors_Q4fss","file-library":"workspace_color_palette_ctx_menu_file-library_8qsbr","option-wrapper":"workspace_color_palette_ctx_menu_option-wrapper_st9Cq","library-name":"workspace_color_palette_ctx_menu_library-name_BL8b8","color-sample":"workspace_color_palette_ctx_menu_color-sample_jQUGL"}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.palette-menu {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
bottom: $s-0;
|
||||
padding: $s-4;
|
||||
margin: 0 0 $s-4 0;
|
||||
z-index: $z-index-10;
|
||||
border-radius: $br-10;
|
||||
background-color: var(--context-menu-background-color);
|
||||
|
||||
.palette-library,
|
||||
.recent-colors,
|
||||
.file-library {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
margin-bottom: $s-4;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.option-wrapper {
|
||||
.library-name {
|
||||
@include titleTipography;
|
||||
color: var(--context-menu-foreground-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.color-sample {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $s-8;
|
||||
margin-top: $s-4;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&:hover {
|
||||
.icon-wrapper {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@include flexCenter;
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
}
|
||||
.option-wrapper .library-name {
|
||||
color: var(--context-menu-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--context-menu-background-color-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.context-menu.context-menu
|
||||
(ns app.main.ui.workspace.context-menu
|
||||
"A workspace specific context menu (mouse right click)."
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
1
frontend/src/app/main/ui/workspace/context_menu.css.json
Normal file
1
frontend/src/app/main/ui/workspace/context_menu.css.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"workspace_context_menu_button-primary_d6q-P","button-secondary":"workspace_context_menu_button-secondary_bIdqe","button-icon":"workspace_context_menu_button-icon_tXvxe","button-icon-small":"workspace_context_menu_button-icon-small_c0rVU","workspace-context-menu":"workspace_context_menu_workspace-context-menu_2NyvR","icon-menu-item":"workspace_context_menu_icon-menu-item_P3-bA","shape-icon":"workspace_context_menu_shape-icon_xx1Ll","workspace-context-submenu":"workspace_context_menu_workspace-context-submenu_BUNLt","selected-icon":"workspace_context_menu_selected-icon_pZqBp","context-menu-item":"workspace_context_menu_context-menu-item_Tx-Ty","submenu-icon":"workspace_context_menu_submenu-icon_JwYm8","separator":"workspace_context_menu_separator_E9-aR","title":"workspace_context_menu_title_P8iFL","shortcut":"workspace_context_menu_shortcut_rypUe","shortcut-key":"workspace_context_menu_shortcut-key_3rF3t","icon-wrapper":"workspace_context_menu_icon-wrapper_n7VO2"}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
flex-direction: column;
|
||||
width: $s-240;
|
||||
padding: $s-4;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--menu-background-color);
|
||||
z-index: $z-index-20;
|
||||
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
height: $s-28;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
@include flexCenter;
|
||||
height: $s-20;
|
||||
padding: $s-2 $s-6;
|
||||
border-radius: $br6;
|
||||
border-radius: $br-6;
|
||||
background-color: var(--menu-shortcut-background-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
align-items: center;
|
||||
height: $s-28;
|
||||
padding: $s-6;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"context_menu_context_menu_button-primary_RH3ML","button-secondary":"context_menu_context_menu_button-secondary_b46I0","button-icon":"context_menu_context_menu_button-icon_3liUK","button-icon-small":"context_menu_context_menu_button-icon-small_TEk7r","workspace-context-menu":"context_menu_context_menu_workspace-context-menu_1ttcO","icon-menu-item":"context_menu_context_menu_icon-menu-item_aII2v","shape-icon":"context_menu_context_menu_shape-icon_Jje3F","workspace-context-submenu":"context_menu_context_menu_workspace-context-submenu_CJdTO","selected-icon":"context_menu_context_menu_selected-icon_LPfha","context-menu-item":"context_menu_context_menu_context-menu-item_wMn3O","submenu-icon":"context_menu_context_menu_submenu-icon_BbOET","separator":"context_menu_context_menu_separator_adR3k","title":"context_menu_context_menu_title_LFn2G","shortcut":"context_menu_context_menu_shortcut_C0492","shortcut-key":"context_menu_context_menu_shortcut-key_EElQO","icon-wrapper":"context_menu_context_menu_icon-wrapper_zC0vW"}
|
||||
|
|
@ -69,7 +69,10 @@
|
|||
selected-drawtool (mf/deref refs/selected-drawing-tool)
|
||||
select-drawtool #(st/emit! :interrupt (dw/select-for-drawing %))
|
||||
edition (mf/deref refs/selected-edition)
|
||||
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)]
|
||||
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
show-palette-btn? (and (not workspace-read-only?) (not new-css-system))
|
||||
]
|
||||
[:aside.left-toolbar
|
||||
[:ul.left-toolbar-options
|
||||
[:li
|
||||
|
|
@ -142,7 +145,7 @@
|
|||
i/chat]]]
|
||||
|
||||
[:ul.left-toolbar-options.panels
|
||||
(when-not workspace-read-only?
|
||||
(when show-palette-btn?
|
||||
[:*
|
||||
[:li
|
||||
[:button
|
||||
|
|
|
|||
176
frontend/src/app/main/ui/workspace/palette.cljs
Normal file
176
frontend/src/app/main/ui/workspace/palette.cljs
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
;; 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.palette
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.colors :as mdc]
|
||||
[app.main.data.workspace.shortcuts :as sc]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as h]
|
||||
[app.main.ui.hooks.resize :as r]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.color-palette :refer [color-palette]]
|
||||
[app.main.ui.workspace.color-palette-ctx-menu :refer [color-palette-ctx-menu]]
|
||||
[app.main.ui.workspace.text-palette :refer [text-palette]]
|
||||
[app.main.ui.workspace.text-palette-ctx-menu :refer [text-palette-ctx-menu]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
[app.util.timers :as ts]
|
||||
[goog.events :as events]
|
||||
[okulary.core :as l]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def viewport
|
||||
(l/derived :vport refs/workspace-local))
|
||||
|
||||
(mf/defc palette
|
||||
[{:keys [layout]}]
|
||||
(let [color-palette? (:colorpalette layout)
|
||||
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})
|
||||
selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
|
||||
selected-text (mf/use-state :file)
|
||||
on-select (mf/use-fn #(reset! selected %))
|
||||
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
|
||||
(r/use-resize-hook :palette 72 54 80 :y true :bottom)
|
||||
|
||||
vport (mf/deref viewport)
|
||||
vport-width (:width vport)
|
||||
on-resize
|
||||
(mf/use-callback
|
||||
(fn [_]
|
||||
(let [dom (mf/ref-val container)
|
||||
width (obj/get dom "clientWidth")]
|
||||
(swap! state assoc :width width))))
|
||||
|
||||
on-close-menu
|
||||
(mf/use-callback
|
||||
(fn [_]
|
||||
(swap! state assoc :show-menu false)))
|
||||
|
||||
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))))))
|
||||
|
||||
on-select-text-palette
|
||||
(mf/use-fn
|
||||
(mf/deps on-select)
|
||||
(fn [lib]
|
||||
(if (or (nil? lib) (= :file lib))
|
||||
(reset! selected-text :file)
|
||||
(reset! selected-text (:id lib)))))
|
||||
|
||||
toggle-palettes
|
||||
(mf/use-callback
|
||||
(fn [_]
|
||||
(swap! state update :hide-palettes not)))
|
||||
|
||||
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))]
|
||||
|
||||
(mf/with-effect []
|
||||
(let [key1 (events/listen js/window "resize" on-resize)]
|
||||
#(events/unlistenByKey key1)))
|
||||
|
||||
(mf/use-layout-effect
|
||||
#(let [dom (mf/ref-val parent-ref)
|
||||
width (obj/get dom "clientWidth")]
|
||||
(swap! state assoc :width width)))
|
||||
|
||||
[:div {:ref parent-ref
|
||||
:class (dom/classnames (css :palettes) true
|
||||
size-classname true
|
||||
(css :wide) any-palette?
|
||||
(css :hidden-bts) (:hide-palettes @state))
|
||||
:style #js {"--height" (dm/str size "px")}}
|
||||
|
||||
[:div {:class (dom/classnames (css :resize-area) true)
|
||||
:on-pointer-down on-pointer-down
|
||||
:on-lost-pointer-capture on-lost-pointer-capture
|
||||
:on-pointer-move on-pointer-move}]
|
||||
(when-not workspace-read-only?
|
||||
[: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)))}
|
||||
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)))}
|
||||
i/text-palette-refactor]]])
|
||||
|
||||
(if any-palette?
|
||||
[:*
|
||||
[:button {:class (dom/classnames (css :palette-actions) true)
|
||||
:on-click #(swap! state update :show-menu not)}
|
||||
i/menu-refactor]
|
||||
[:div {:class (dom/classnames (css :palette) true)
|
||||
:ref container}
|
||||
(when text-palette?
|
||||
[:*
|
||||
[:& text-palette-ctx-menu {:show-menu? (:show-menu @state)
|
||||
:close-menu on-close-menu
|
||||
:on-select-palette on-select-text-palette
|
||||
:selected @selected-text}]
|
||||
[:& text-palette {:size size
|
||||
:selected @selected-text
|
||||
:width vport-width}]])
|
||||
(when color-palette?
|
||||
[:* [:& color-palette-ctx-menu {:show-menu? (:show-menu @state)
|
||||
: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)
|
||||
:on-click toggle-palettes}
|
||||
[:div {:class (dom/classnames (css :handler-btn) true)}]])]))
|
||||
1
frontend/src/app/main/ui/workspace/palette.css.json
Normal file
1
frontend/src/app/main/ui/workspace/palette.css.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"workspace_palette_button-primary_zEUyD","palettes":"workspace_palette_palettes_JHGUw","palette-actions":"workspace_palette_palette-actions_2GwR6","palette-btn-list":"workspace_palette_palette-btn-list_x7gPS","palette-item":"workspace_palette_palette-item_50uj6","palette-btn":"workspace_palette_palette-btn_kP66y","button-secondary":"workspace_palette_button-secondary_ksr24","button-icon":"workspace_palette_button-icon_pmEDv","button-icon-small":"workspace_palette_button-icon-small_vbLDq","wide":"workspace_palette_wide_3G4e1","mid-palette":"workspace_palette_mid-palette_rGR5I","small-palette":"workspace_palette_small-palette_18Otk","resize-area":"workspace_palette_resize-area_0LwVu","selected":"workspace_palette_selected_Z6BFo","palette":"workspace_palette_palette_eqp3q","handler":"workspace_palette_handler_4JV0J","handler-btn":"workspace_palette_handler-btn_7lnlF","hidden-bts":"workspace_palette_hidden-bts_mhbc0"}
|
||||
133
frontend/src/app/main/ui/workspace/palette.scss
Normal file
133
frontend/src/app/main/ui/workspace/palette.scss
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.palettes {
|
||||
position: relative;
|
||||
right: 0;
|
||||
grid-area: color-palette;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"resize resize resize"
|
||||
"buttons actions palette";
|
||||
grid-template-rows: $s-8 1fr;
|
||||
grid-template-columns: $s-32 auto 1fr;
|
||||
max-height: $s-80;
|
||||
height: var(--height);
|
||||
width: fit-content;
|
||||
padding: $s-0 $s-0 $s-8 $s-8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--palette-background-color);
|
||||
transition: right 1s ease, opacity 1s ease;
|
||||
&.wide {
|
||||
width: 100%;
|
||||
}
|
||||
&.mid-palette,
|
||||
&.small-palette {
|
||||
grid-template-columns: $s-64 auto 1fr;
|
||||
}
|
||||
.resize-area {
|
||||
grid-area: resize;
|
||||
height: $s-8;
|
||||
z-index: $z-index-4;
|
||||
width: calc(100% - $s-8);
|
||||
border-radius: $br-circle;
|
||||
cursor: ns-resize;
|
||||
background-color: var(--palette-background-color);
|
||||
}
|
||||
.palette-btn-list {
|
||||
grid-area: buttons;
|
||||
background-color: var(--palette-background-color);
|
||||
height: calc(var(--height) - $s-16);
|
||||
width: $s-32;
|
||||
margin: $s-0;
|
||||
list-style: none;
|
||||
z-index: $z-index-1;
|
||||
&.mid-palette,
|
||||
&.small-palette {
|
||||
display: flex;
|
||||
}
|
||||
.palette-item {
|
||||
@include flexCenter;
|
||||
border-radius: $br-8;
|
||||
opacity: $op-10;
|
||||
transition: opacity 1s ease;
|
||||
.palette-btn {
|
||||
@extend .button-primary;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid transparent;
|
||||
background-clip: padding-box;
|
||||
padding: 0;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
&.selected {
|
||||
border: $s-2 solid var(--palette-btn-border-color-selected);
|
||||
background-color: var(--palette-btn-background-color-selected);
|
||||
color: var(--palette-btn-foreground-color-selected);
|
||||
svg {
|
||||
stroke: var(--palette-btn-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border: $s-2 solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.palette-actions {
|
||||
@extend .button-primary;
|
||||
grid-area: actions;
|
||||
height: calc(var(--height) - $s-16);
|
||||
width: $s-32;
|
||||
padding: 0;
|
||||
margin-left: $s-4;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--palette-background-color);
|
||||
z-index: $z-index-1;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
.palette {
|
||||
grid-area: palette;
|
||||
width: 100%;
|
||||
}
|
||||
.handler {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
width: $s-12;
|
||||
height: 100%;
|
||||
|
||||
.handler-btn {
|
||||
width: $s-4;
|
||||
height: 100%;
|
||||
max-height: $s-40;
|
||||
margin: $s-8 $s-4;
|
||||
padding: 0;
|
||||
border-radius: $s-4;
|
||||
background-color: var(--palette-handler-background-color);
|
||||
}
|
||||
}
|
||||
&.hidden-bts {
|
||||
right: $s-40;
|
||||
z-index: 0;
|
||||
&.small-palette,
|
||||
&.mid-palette {
|
||||
right: $s-72;
|
||||
}
|
||||
.palette-btn-list {
|
||||
.palette-item {
|
||||
opacity: $op-0;
|
||||
visibility: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1182,7 +1182,7 @@
|
|||
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
|
||||
default-name (cond
|
||||
(:gradient color) (bc/gradient-type->string (get-in color [:gradient :type]))
|
||||
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
|
||||
(:color color) (:color color)
|
||||
:else (:value color))
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.collapsable-button.collapsable-button
|
||||
(ns app.main.ui.workspace.sidebar.collapsable-button
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.main.data.workspace :as dw]
|
||||
|
|
@ -29,5 +29,4 @@
|
|||
[:button.collapse-sidebar.collapsed
|
||||
{:on-click #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))
|
||||
:aria-label (tr "workspace.sidebar.expand")}
|
||||
i/arrow-slide]
|
||||
)))
|
||||
i/arrow-slide])))
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"sidebar_collapsable_button_button-primary_qaRce","button-secondary":"sidebar_collapsable_button_button-secondary_OqDpe","button-icon":"sidebar_collapsable_button_button-icon_P4-xy","button-icon-small":"sidebar_collapsable_button_button-icon-small_lQUE3","collapsed-sidebar":"sidebar_collapsable_button_collapsed-sidebar_uQnGJ","collapsed-title":"sidebar_collapsable_button_collapsed-title_Jb62g","collapsed-button":"sidebar_collapsable_button_collapsed-button_LT5ME"}
|
||||
|
|
@ -11,15 +11,15 @@
|
|||
position: absolute;
|
||||
top: $s-48;
|
||||
left: $s-48;
|
||||
padding: $s-8;
|
||||
border-radius: $br8;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
background: var(--color-background-primary);
|
||||
}
|
||||
.collapsed-title {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-24;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
.collapsed-button {
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
height: $s-24;
|
||||
width: $s-16;
|
||||
padding: 0;
|
||||
border-radius: $br5;
|
||||
border-radius: $br-5;
|
||||
svg {
|
||||
@include flexCenter;
|
||||
height: $s-12;
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"collapsable_button_collapsable_button_button-primary_sHqxQ","button-secondary":"collapsable_button_collapsable_button_button-secondary_f66GY","button-icon":"collapsable_button_collapsable_button_button-icon_bKnW3","button-icon-small":"collapsable_button_collapsable_button_button-icon-small_xnfYB","collapsed-sidebar":"collapsable_button_collapsable_button_collapsed-sidebar_JUHji","collapsed-title":"collapsable_button_collapsable_button_collapsed-title_v8MhF","collapsed-button":"collapsable_button_collapsable_button_collapsed-button_MGz3x"}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"component_sidebar_button-primary_hM5wy","button-secondary":"component_sidebar_button-secondary_XalRe","button-icon":"component_sidebar_button-icon_3XEKH","button-icon-small":"component_sidebar_button-icon-small_iWwQF","left-settings-bar":"component_sidebar_left-settings-bar_eKx6q","resize-area":"component_sidebar_resize-area_1IyNp","settings-bar-inside":"component_sidebar_settings-bar-inside_AaJEH","layers-tab":"component_sidebar_layers-tab_wQLFe"}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.layers.layer-item.layer-item
|
||||
(ns app.main.ui.workspace.sidebar.layer-item
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.layers.layer-name.layer-name :refer [layer-name]]
|
||||
[app.main.ui.workspace.sidebar.layer-name :refer [layer-name]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.timers :as ts]
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
:on-pointer-leave on-pointer-leave
|
||||
:on-double-click #(dom/stop-propagation %)}
|
||||
|
||||
(if (:shapes item)
|
||||
(if (< 0 (count (:shapes item)))
|
||||
[:div {:class (dom/classnames (css :button-content) true)}
|
||||
(when (not filtered?)
|
||||
[:button {:class (dom/classnames (css :toggle-content) true
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"sidebar_layer_item_button-primary_74ST4","button-secondary":"sidebar_layer_item_button-secondary_e4u9V","button-icon":"sidebar_layer_item_button-icon_-D7KH","button-icon-small":"sidebar_layer_item_button-icon-small_1RfDl","layer-row":"sidebar_layer_item_layer-row_KibLX","element-list-body":"sidebar_layer_item_element-list-body_832JO","element-actions":"sidebar_layer_item_element-actions_ACGJI","toggle-element":"sidebar_layer_item_toggle-element_4bhRW","block-element":"sidebar_layer_item_block-element_RhKz-","button-content":"sidebar_layer_item_button-content_bPwop","icon-shape":"sidebar_layer_item_icon-shape_g9Wxn","toggle-content":"sidebar_layer_item_toggle-content_MKhsv","filtered":"sidebar_layer_item_filtered_V5CHf","inverse":"sidebar_layer_item_inverse_zzZ54","absolute":"sidebar_layer_item_absolute_mYIKg","selected":"sidebar_layer_item_selected_O7P-j","element-children":"sidebar_layer_item_element-children_3iA4Q","parent-selected":"sidebar_layer_item_parent-selected_uIIyQ","hidden":"sidebar_layer_item_hidden_JRbJO","type-comp":"sidebar_layer_item_type-comp_FBSRt","tab-indentation":"sidebar_layer_item_tab-indentation_e-2dQ"}
|
||||
|
|
@ -62,10 +62,10 @@
|
|||
.absolute {
|
||||
position: absolute;
|
||||
background-color: var(--layer-row-foreground-color);
|
||||
opacity: 0.4;
|
||||
opacity: $op-4;
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
border-radius: $br2;
|
||||
border-radius: $br-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,9 +89,9 @@
|
|||
.toggle-element,
|
||||
.block-element {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
opacity: $op-0;
|
||||
&.selected {
|
||||
opacity: 100%;
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -113,15 +113,15 @@
|
|||
.button-content {
|
||||
.toggle-content {
|
||||
svg {
|
||||
opacity: 0.7;
|
||||
opacity: $op-7;
|
||||
}
|
||||
}
|
||||
.icon-shape {
|
||||
svg {
|
||||
opacity: 0.7;
|
||||
opacity: $op-7;
|
||||
}
|
||||
.absolute {
|
||||
opacity: 0.1;
|
||||
opacity: $op-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
.toggle-element,
|
||||
.block-element {
|
||||
svg {
|
||||
opacity: 0.7;
|
||||
opacity: $op-7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -137,27 +137,27 @@
|
|||
}
|
||||
&:hover {
|
||||
--context-hover-color: var(--layer-row-foreground-color-hover);
|
||||
--context-hover-opacity: 1;
|
||||
--context-hover-opacity: $op-10;
|
||||
background-color: var(--layer-row-background-color-hover);
|
||||
&.hidden {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
}
|
||||
.element-list-body {
|
||||
.button-content {
|
||||
.toggle-content {
|
||||
background-color: var(--layer-row-background-color-hover);
|
||||
svg {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.icon-shape {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
& .absolute {
|
||||
opacity: 0.4;
|
||||
opacity: $op-4;
|
||||
background-color: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -168,14 +168,14 @@
|
|||
.block-element {
|
||||
display: flex;
|
||||
svg {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
.toggle-element,
|
||||
.block-element {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -221,9 +221,9 @@
|
|||
.toggle-element,
|
||||
.block-element {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -240,7 +240,6 @@
|
|||
background-color: var(--layer-row-background-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
&.type-comp {
|
||||
.button-content {
|
||||
.toggle-content {
|
||||
|
|
@ -272,12 +271,12 @@
|
|||
.element-list-body {
|
||||
.button-content {
|
||||
.toggle-content {
|
||||
opacity: 0.7;
|
||||
opacity: $op-7;
|
||||
}
|
||||
.icon-shape {
|
||||
opacity: 0.7;
|
||||
opacity: $op-7;
|
||||
.absolute {
|
||||
opacity: 0.1;
|
||||
opacity: $op-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -285,7 +284,7 @@
|
|||
.toggle-element,
|
||||
.block-element {
|
||||
svg {
|
||||
opacity: 0.7;
|
||||
opacity: $op-7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -294,12 +293,18 @@
|
|||
.element-list-body {
|
||||
.button-content {
|
||||
.toggle-content {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.icon-shape {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
& .absolute {
|
||||
opacity: 0.4;
|
||||
opacity: $op-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -307,7 +312,8 @@
|
|||
.toggle-element,
|
||||
.block-element {
|
||||
svg {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -315,6 +321,108 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&.type-comp.selected {
|
||||
.button-content {
|
||||
.toggle-content {
|
||||
svg {
|
||||
stroke: var(--layer-row-component-foreground-color);
|
||||
}
|
||||
}
|
||||
.icon-shape {
|
||||
svg {
|
||||
stroke: var(--layer-row-component-foreground-color);
|
||||
}
|
||||
.absolute {
|
||||
background-color: var(--layer-row-component-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-actions {
|
||||
.toggle-element,
|
||||
.block-element {
|
||||
svg {
|
||||
stroke: var(--layer-row-component-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-children {
|
||||
color: var(--layer-row-component-foreground-color);
|
||||
}
|
||||
&.hidden {
|
||||
.element-list-body {
|
||||
.button-content {
|
||||
.toggle-content {
|
||||
opacity: $op-7;
|
||||
}
|
||||
.icon-shape {
|
||||
opacity: $op-7;
|
||||
.absolute {
|
||||
opacity: $op-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-actions {
|
||||
.toggle-element,
|
||||
.block-element {
|
||||
svg {
|
||||
opacity: $op-7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.element-list-body {
|
||||
.button-content {
|
||||
.toggle-content {
|
||||
opacity: $op-10;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.icon-shape {
|
||||
opacity: $op-10;
|
||||
& .absolute {
|
||||
opacity: $op-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-actions {
|
||||
.toggle-element,
|
||||
.block-element {
|
||||
svg {
|
||||
opacity: $op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.element-list-body {
|
||||
.button-content {
|
||||
.toggle-content {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.icon-shape {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-actions {
|
||||
.toggle-element,
|
||||
.block-element {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:global(.sticky) {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
|
|
@ -326,7 +434,7 @@
|
|||
&:hover {
|
||||
background-color: var(--layer-row-background-color-hover);
|
||||
&.hidden {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
}
|
||||
.element-list-body {
|
||||
.button-content {
|
||||
|
|
@ -356,7 +464,7 @@
|
|||
&.selected {
|
||||
.toggle-element,
|
||||
.block-element {
|
||||
opacity: 100%;
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.layers.layer-name.layer-name
|
||||
(ns app.main.ui.workspace.sidebar.layer-name
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.main.data.workspace :as dw]
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"sidebar_layer_name_button-primary_V-6Cp","button-secondary":"sidebar_layer_name_button-secondary_Q14Qj","button-icon":"sidebar_layer_name_button-icon_UQXjw","button-icon-small":"sidebar_layer_name_button-icon-small_At5P8","element-name":"sidebar_layer_name_element-name_hZ-lA","selected":"sidebar_layer_name_selected_MKxdm","type-comp":"sidebar_layer_name_type-comp_TNGM-","hidden":"sidebar_layer_name_hidden_e-K3G","element-name-input":"sidebar_layer_name_element-name-input_Wpnkf"}
|
||||
|
|
@ -18,11 +18,11 @@
|
|||
&.type-comp {
|
||||
color: var(--context-hover-color, var(--layer-row-component-foreground-color));
|
||||
&.hidden {
|
||||
opacity: var(--context-hover-opacity, 0.7);
|
||||
opacity: var(--context-hover-opacity, $op-7);
|
||||
}
|
||||
}
|
||||
&.hidden {
|
||||
opacity: var(--context-hover-opacity, 0.7);
|
||||
opacity: var(--context-hover-opacity, $op-7);
|
||||
}
|
||||
}
|
||||
.element-name-input {
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
|
||||
margin: 0;
|
||||
padding-left: $s-6;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
border: 1px solid var(--input-border-color-focus);
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.layers.layers
|
||||
(ns app.main.ui.workspace.sidebar.layers
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.layers.layer-item.layer-item :refer [layer-item]]
|
||||
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
|
|
@ -135,12 +135,14 @@
|
|||
|
||||
toggle-search
|
||||
(mf/use-callback
|
||||
(fn []
|
||||
(swap! filter-state assoc :search-text "")
|
||||
(swap! filter-state assoc :active-filters #{})
|
||||
(swap! filter-state assoc :show-filters-menu false)
|
||||
(swap! filter-state assoc :num-items 100)
|
||||
(swap! filter-state update :show-search-box not)))
|
||||
(fn [event]
|
||||
(let [node (dom/get-current-target event)]
|
||||
(swap! filter-state assoc :search-text "")
|
||||
(swap! filter-state assoc :active-filters #{})
|
||||
(swap! filter-state assoc :show-filters-menu false)
|
||||
(swap! filter-state assoc :num-items 100)
|
||||
(swap! filter-state update :show-search-box not)
|
||||
(dom/blur! node))))
|
||||
|
||||
toggle-filters
|
||||
(mf/use-callback
|
||||
|
|
@ -296,10 +298,8 @@
|
|||
name]
|
||||
[:span {:class (dom/classnames (css :layer-filter-close) true)}
|
||||
i/close-small-refactor]]
|
||||
[:span {:on-click (remove-filter f)}
|
||||
name i/cross]
|
||||
)
|
||||
))]
|
||||
[:span {:on-click (remove-filter f)}
|
||||
name i/cross])))]
|
||||
|
||||
(when (:show-filters-menu @filter-state)
|
||||
(if new-css-system
|
||||
|
|
@ -446,31 +446,36 @@
|
|||
|
||||
on-scroll
|
||||
(fn [event]
|
||||
(let [target (dom/get-target event)
|
||||
target-top (:top (dom/get-bounding-rect target))
|
||||
frames (dom/get-elements-by-class "root-board")
|
||||
(let [children (dom/get-elements-by-class "sticky-children")
|
||||
length (.-length children)]
|
||||
(when (< 0 length)
|
||||
(let [target (dom/get-target event)
|
||||
target-top (:top (dom/get-bounding-rect target))
|
||||
frames (dom/get-elements-by-class "root-board")
|
||||
|
||||
last-hidden-frame (->> frames
|
||||
(filter #(<= (- (:top (dom/get-bounding-rect %)) target-top) 0))
|
||||
last)
|
||||
frame-id (dom/get-attribute last-hidden-frame "id")
|
||||
children (dom/get-elements-by-class "sticky-children")
|
||||
last-hidden-children (->> children
|
||||
(filter #(< (- (:top (dom/get-bounding-rect %)) target-top) 0))
|
||||
last)
|
||||
is-children-shown? (> (- (:bottom (dom/get-bounding-rect last-hidden-children)) target-top) 0)
|
||||
last-hidden-frame (->> frames
|
||||
(filter #(<= (- (:top (dom/get-bounding-rect %)) target-top) 0))
|
||||
last)
|
||||
frame-id (dom/get-attribute last-hidden-frame "id")
|
||||
|
||||
children-frame-id (dom/get-attribute last-hidden-children "data-id")
|
||||
last-hidden-children (->> children
|
||||
(filter #(< (- (:top (dom/get-bounding-rect %)) target-top) 0))
|
||||
last)
|
||||
|
||||
is-children-shown? (and last-hidden-children
|
||||
(> (- (:bottom (dom/get-bounding-rect last-hidden-children)) target-top) 0))
|
||||
|
||||
children-frame-id (dom/get-attribute last-hidden-children "data-id")
|
||||
;; We want to check that root-board is out of view but its children are not.
|
||||
;; only in that case we make root board sticky.
|
||||
sticky? (and last-hidden-frame
|
||||
is-children-shown?
|
||||
(= frame-id children-frame-id))]
|
||||
(doseq [frame frames]
|
||||
(dom/remove-class! frame "sticky"))
|
||||
sticky? (and last-hidden-frame
|
||||
is-children-shown?
|
||||
(= frame-id children-frame-id))]
|
||||
(doseq [frame frames]
|
||||
(dom/remove-class! frame "sticky"))
|
||||
|
||||
(when sticky?
|
||||
(dom/add-class! last-hidden-frame "sticky"))))]
|
||||
(when sticky?
|
||||
(dom/add-class! last-hidden-frame "sticky"))))))]
|
||||
[:div#layers
|
||||
{:class (if new-css-system
|
||||
(dom/classnames (css :layers) true)
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"sidebar_layers_button-primary_q9e2I","layers":"sidebar_layers_layers_87ZOo","tool-window-bar":"sidebar_layers_tool-window-bar_lg54C","search":"sidebar_layers_search_zjs2x","close-search":"sidebar_layers_close-search_baIhK","icon-search":"sidebar_layers_icon-search_6kWUn","button-secondary":"sidebar_layers_button-secondary_H4lpi","active-filters":"sidebar_layers_active-filters_-JMMP","layer-filter":"sidebar_layers_layer-filter_rHZTz","search-box":"sidebar_layers_search-box_JtqOV","search-input-wrapper":"sidebar_layers_search-input-wrapper_oJa-7","clear":"sidebar_layers_clear_sLcl1","button-icon":"sidebar_layers_button-icon_SD8PP","button-icon-small":"sidebar_layers_button-icon-small_v5L-u","filters-container":"sidebar_layers_filters-container_c1Ux9","filter-menu-item":"sidebar_layers_filter-menu-item_aZd0D","filter-menu-item-tick":"sidebar_layers_filter-menu-item-tick_JNdIK","filter-menu-item-name-wrapper":"sidebar_layers_filter-menu-item-name-wrapper_DtGkH","filter-menu-item-icon":"sidebar_layers_filter-menu-item-icon_Oi3Ix","layer-filter-icon":"sidebar_layers_layer-filter-icon_0yKrb","layer-filter-close":"sidebar_layers_layer-filter-close_3mV4i","focus-title":"sidebar_layers_focus-title_35PvQ","back-button-icon":"sidebar_layers_back-button-icon_mHv6g","page-name":"sidebar_layers_page-name_8ZDRR","filter-button":"sidebar_layers_filter-button_KXxHh","focus-name":"sidebar_layers_focus-name_Fderf","focus-mode-tag-wrapper":"sidebar_layers_focus-mode-tag-wrapper_OHXCG","focus-mode-tag":"sidebar_layers_focus-mode-tag_J5ItD","layer-filter-name":"sidebar_layers_layer-filter-name_Y4PuB","filter-menu-item-name":"sidebar_layers_filter-menu-item-name_rxeut","selected":"sidebar_layers_selected_V5Vv3","tool-window-content":"sidebar_layers_tool-window-content_YnpDB","element-list":"sidebar_layers_element-list_nAntB"}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
justify-content: space-between;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin-top: $s-8;
|
||||
margin-top: $s-2;
|
||||
margin-bottom: $s-4;
|
||||
.page-name {
|
||||
@include tabTitleTipography;
|
||||
|
|
@ -27,17 +27,17 @@
|
|||
}
|
||||
.icon-search {
|
||||
@extend .button-primary;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
border-radius: $br8;
|
||||
margin-right: $s-12;
|
||||
height: $s-32;
|
||||
width: calc($s-24 + $s-4);
|
||||
border-radius: $br-8;
|
||||
margin-right: $s-8;
|
||||
padding: 0;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
margin: 0;
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
&.search {
|
||||
padding: 0 $s-12;
|
||||
padding: 0 $s-8 0 $s-12;
|
||||
.search-box {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
|
@ -45,8 +45,7 @@
|
|||
height: $s-32;
|
||||
width: 100%;
|
||||
margin-right: $s-4;
|
||||
margin-bottom: $s-4;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--color-background-primary);
|
||||
.filter-button {
|
||||
@include flexCenter;
|
||||
|
|
@ -55,7 +54,7 @@
|
|||
width: $s-32;
|
||||
margin: 0;
|
||||
border: 1px solid var(--color-background-tertiary);
|
||||
border-radius: $br8 $br2 $br2 $br8;
|
||||
border-radius: $br-8 $br-2 $br-2 $br-8;
|
||||
background-color: var(--color-background-tertiary);
|
||||
svg {
|
||||
height: $s-16;
|
||||
|
|
@ -85,7 +84,7 @@
|
|||
height: $s-32;
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-background-tertiary);
|
||||
border-radius: $br2 $br8 $br8 $br2;
|
||||
border-radius: $br-2 $br-8 $br-8 $br-2;
|
||||
background-color: var(--color-background-tertiary);
|
||||
input {
|
||||
width: 100%;
|
||||
|
|
@ -116,7 +115,7 @@
|
|||
|
||||
.clear {
|
||||
@extend .button-secondary;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
height: 100%;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
|
|
@ -129,8 +128,9 @@
|
|||
@extend .button-primary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
margin-bottom: $s-4;
|
||||
border-radius: $br8;
|
||||
min-width: $s-28;
|
||||
padding: 0;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
height: $s-20;
|
||||
padding: $s-4 $s-6;
|
||||
border: 1px solid var(--tag-background-color);
|
||||
border-radius: $br6;
|
||||
border-radius: $br-6;
|
||||
color: var(--tag-background-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -186,10 +186,10 @@
|
|||
.layer-filter {
|
||||
@extend .button-secondary;
|
||||
@include buttonStyle;
|
||||
gap: $s-4;
|
||||
gap: $s-6;
|
||||
height: $s-24;
|
||||
margin: $s-2 0;
|
||||
border-radius: $br6;
|
||||
border-radius: $br-6;
|
||||
background-color: var(--pill-background-color);
|
||||
cursor: pointer;
|
||||
.layer-filter-icon,
|
||||
|
|
@ -198,11 +198,12 @@
|
|||
stroke: var(--pill-foreground-color);
|
||||
svg {
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
}
|
||||
.layer-filter-name {
|
||||
@include flexCenter;
|
||||
@include buttonSmallTipography;
|
||||
@include titleTipography;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -216,7 +217,7 @@
|
|||
gap: $s-4;
|
||||
width: $s-192;
|
||||
padding: $s-4;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--menu-background-color);
|
||||
z-index: $z-index-4;
|
||||
box-shadow: 0px 0px 10px 0px var(--menu-shadow-color);
|
||||
|
|
@ -227,7 +228,7 @@
|
|||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
|
||||
.filter-menu-item-name-wrapper {
|
||||
display: flex;
|
||||
|
|
@ -295,6 +296,7 @@
|
|||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: $br-8;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-gutter: stable;
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"layer_item_layer_item_button-primary_kAdM3","button-secondary":"layer_item_layer_item_button-secondary_8h38L","button-icon":"layer_item_layer_item_button-icon_VcZvz","button-icon-small":"layer_item_layer_item_button-icon-small_T3K6R","layer-row":"layer_item_layer_item_layer-row_w-zf5","element-list-body":"layer_item_layer_item_element-list-body_Re3av","element-actions":"layer_item_layer_item_element-actions_DdAbM","toggle-element":"layer_item_layer_item_toggle-element_r9y4-","block-element":"layer_item_layer_item_block-element_FlRIg","button-content":"layer_item_layer_item_button-content_Yp5xy","icon-shape":"layer_item_layer_item_icon-shape_nfE87","toggle-content":"layer_item_layer_item_toggle-content_6eVXm","filtered":"layer_item_layer_item_filtered_X5Nuq","inverse":"layer_item_layer_item_inverse_7rUY7","absolute":"layer_item_layer_item_absolute_xq8KU","selected":"layer_item_layer_item_selected_AMvUN","element-children":"layer_item_layer_item_element-children_oFioa","parent-selected":"layer_item_layer_item_parent-selected_ANFtr","hidden":"layer_item_layer_item_hidden_wk3Yo","type-comp":"layer_item_layer_item_type-comp_n71sd","tab-indentation":"layer_item_layer_item_tab-indentation_gm6TA"}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"layer_name_layer_name_button-primary_44JkR","button-secondary":"layer_name_layer_name_button-secondary_-2vFA","button-icon":"layer_name_layer_name_button-icon_88NHi","button-icon-small":"layer_name_layer_name_button-icon-small_XTt-A","element-name":"layer_name_layer_name_element-name_zNpYC","selected":"layer_name_layer_name_selected_RPmXO","type-comp":"layer_name_layer_name_type-comp_KGgxt","hidden":"layer_name_layer_name_hidden_Ka-JZ","element-name-input":"layer_name_layer_name_element-name-input_59MCD"}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"layers_layers_button-primary_kTW1N","layers":"layers_layers_layers_UoyQo","tool-window-bar":"layers_layers_tool-window-bar_wNnsi","search":"layers_layers_search_HR-CX","close-search":"layers_layers_close-search_f0s6R","icon-search":"layers_layers_icon-search_s-Pu5","button-secondary":"layers_layers_button-secondary_Fwe4E","active-filters":"layers_layers_active-filters_zYWOS","layer-filter":"layers_layers_layer-filter_D9YhT","search-box":"layers_layers_search-box_Z1aaC","search-input-wrapper":"layers_layers_search-input-wrapper_e3k9C","clear":"layers_layers_clear_I3ZI3","button-icon":"layers_layers_button-icon_6BwkV","button-icon-small":"layers_layers_button-icon-small_B6dfY","filters-container":"layers_layers_filters-container_Mq4fc","filter-menu-item":"layers_layers_filter-menu-item_NKqSw","filter-menu-item-tick":"layers_layers_filter-menu-item-tick_CpoIk","filter-menu-item-name-wrapper":"layers_layers_filter-menu-item-name-wrapper_e6K3Q","filter-menu-item-icon":"layers_layers_filter-menu-item-icon_K-qNz","layer-filter-icon":"layers_layers_layer-filter-icon_9BZaV","layer-filter-close":"layers_layers_layer-filter-close_TB6GH","focus-title":"layers_layers_focus-title_FpLeI","back-button-icon":"layers_layers_back-button-icon_5LJV1","page-name":"layers_layers_page-name_ojguA","filter-button":"layers_layers_filter-button_036bM","focus-name":"layers_layers_focus-name_v53pl","focus-mode-tag-wrapper":"layers_layers_focus-mode-tag-wrapper_0QsfU","focus-mode-tag":"layers_layers_focus-mode-tag_ZVK1e","layer-filter-name":"layers_layers_layer-filter-name_BboGy","filter-menu-item-name":"layers_layers_filter-menu-item-name_88Gj4","selected":"layers_layers_selected_FQSrA","tool-window-content":"layers_layers_tool-window-content_g-XI4","element-list":"layers_layers_element-list_XKN8R"}
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
(get-in color [:gradient :type]))
|
||||
[:*
|
||||
[:div.color-info
|
||||
[:div.color-name (cb/gradient-type->string (get-in color [:gradient :type]))]]
|
||||
[:div.color-name (uc/gradient-type->string (get-in color [:gradient :type]))]]
|
||||
(when select-only
|
||||
[:div.element-set-actions-button {:on-click handle-select}
|
||||
i/pointer-inner])]
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.component.sidebar
|
||||
(ns app.main.ui.workspace.sidebar.sidebar
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.tab-container.tab-container :refer [tab-container tab-element]]
|
||||
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks.resize :refer [use-resize-hook]]
|
||||
[app.main.ui.icons :as i]
|
||||
|
|
@ -18,10 +18,10 @@
|
|||
[app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.debug :refer [debug-panel]]
|
||||
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.layers.layers :refer [layers-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.shortcuts :refer [shortcuts-container]]
|
||||
[app.main.ui.workspace.sidebar.sitemap.sitemap :refer [sitemap]]
|
||||
[app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"sidebar_sidebar_button-primary_-etRs","button-secondary":"sidebar_sidebar_button-secondary_TYLoJ","button-icon":"sidebar_sidebar_button-icon_NkfeE","button-icon-small":"sidebar_sidebar_button-icon-small_0BIQX","left-settings-bar":"sidebar_sidebar_left-settings-bar_SKQmM","resize-area":"sidebar_sidebar_resize-area_XoVT-","settings-bar-inside":"sidebar_sidebar_settings-bar-inside_nbHPB","layers-tab":"sidebar_sidebar_layers-tab_EaINq"}
|
||||
|
|
@ -17,7 +17,7 @@ $width-settings-bar-max: 500px;
|
|||
max-width: 500px;
|
||||
width: var(--width, $width-settings-bar);
|
||||
height: 100%;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--color-background-primary);
|
||||
|
||||
.resize-area {
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.sitemap.sitemap
|
||||
(ns app.main.ui.workspace.sidebar.sitemap
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
|
|
@ -166,12 +166,10 @@
|
|||
(dom/classnames (css :page-actions) true)
|
||||
(dom/classnames :page-actions true))}
|
||||
(when (and deletable? (not workspace-read-only?))
|
||||
[:button {:on-click on-delete}
|
||||
[:button {:on-click on-delete}
|
||||
(if new-css-system
|
||||
i/delete-refactor
|
||||
i/trash
|
||||
)
|
||||
])]])]]]))
|
||||
i/trash)])]])]]]))
|
||||
|
||||
;; --- Page Item Wrapper
|
||||
|
||||
|
|
@ -225,9 +223,11 @@
|
|||
file (mf/deref refs/workspace-file)
|
||||
create (mf/use-callback
|
||||
(mf/deps file)
|
||||
(fn []
|
||||
(st/emit! (dw/create-page {:file-id (:id file)
|
||||
:project-id (:project-id file)}))))
|
||||
(fn [event]
|
||||
(let [node (dom/get-current-target event)]
|
||||
(st/emit! (dw/create-page {:file-id (:id file)
|
||||
:project-id (:project-id file)}))
|
||||
(dom/blur! node))))
|
||||
show-pages? (mf/use-state true)
|
||||
size (if @show-pages? size 32)
|
||||
toggle-pages (mf/use-callback #(reset! show-pages? not))
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","sitemap":"sidebar_sitemap_sitemap_kvKKx","pages-tool-bar":"sidebar_sitemap_pages-tool-bar_n1yfA","add-page":"sidebar_sitemap_add-page_r8Ibb","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-icon":"sidebar_sitemap_button-icon_MkibT","page-tool-bar-title":"sidebar_sitemap_page-tool-bar-title_D7h-S","collapsable-button":"sidebar_sitemap_collapsable-button_Xt79y","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn"}
|
||||
|
|
@ -18,7 +18,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
min-height: $s-32;
|
||||
padding: 0 $s-12 0 0;
|
||||
padding: 0 $s-8 0 0;
|
||||
margin: $s-2 0;
|
||||
.page-tool-bar-title {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
|
|
@ -34,7 +35,7 @@
|
|||
height: $s-24;
|
||||
width: $s-24;
|
||||
padding: 0 $s-4 0 $s-8;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-12;
|
||||
|
|
@ -51,13 +52,12 @@
|
|||
}
|
||||
.add-page {
|
||||
@extend .button-primary;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
border-radius: $br8;
|
||||
height: $s-32;
|
||||
width: calc($s-24 + $s-4);
|
||||
padding: 0;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
height: $s-20;
|
||||
padding: $s-4 $s-6;
|
||||
border: 1px solid var(--tag-background-color);
|
||||
border-radius: $br6;
|
||||
border-radius: $br-6;
|
||||
color: var(--tag-background-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
@include flexCenter;
|
||||
width: $s-24;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
opacity: $op-0;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
height: $s-12;
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
|
||||
margin: 0;
|
||||
padding-left: $s-6;
|
||||
border-radius: $br8;
|
||||
border-radius: $br-8;
|
||||
border: 1px solid var(--input-border-color-focus);
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
color: var(--layer-row-foreground-color-hover);
|
||||
background-color: var(--layer-row-background-color-hover);
|
||||
.page-actions button {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
border: 1px solid var(--layer-row-border-color-focus);
|
||||
outline: none;
|
||||
.page-actions button {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -234,7 +234,7 @@
|
|||
.element-list-body {
|
||||
outline: none;
|
||||
.page-actions button {
|
||||
opacity: 1;
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-hidden);
|
||||
background-color: var(--layer-row-background-color-hidden);
|
||||
opacity: 70%;
|
||||
opacity: $op-7;
|
||||
.page-actions button {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hidden);
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"button-primary":"sitemap_sitemap_button-primary_1gEjD","sitemap":"sitemap_sitemap_sitemap_m6IpN","pages-tool-bar":"sitemap_sitemap_pages-tool-bar_p1-rd","add-page":"sitemap_sitemap_add-page_kW83X","button-secondary":"sitemap_sitemap_button-secondary_7vEHl","button-icon":"sitemap_sitemap_button-icon_Z3FXu","page-tool-bar-title":"sitemap_sitemap_page-tool-bar-title_CnAA4","collapsable-button":"sitemap_sitemap_collapsable-button_4Ro7F","button-icon-small":"sitemap_sitemap_button-icon-small_KzWqW","tool-window-content":"sitemap_sitemap_tool-window-content_nNkLz","pages-list":"sitemap_sitemap_pages-list_DQpTN","page-element":"sitemap_sitemap_page-element_Rmi9A","element-list-body":"sitemap_sitemap_element-list-body_KTWqV","page-actions":"sitemap_sitemap_page-actions_h1mkc","page-icon":"sitemap_sitemap_page-icon_r-7lT","view-only-mode":"sitemap_sitemap_view-only-mode_-cCDa","resize-area":"sitemap_sitemap_resize-area_K6Zed","dnd-over-top":"sitemap_sitemap_dnd-over-top_Ol01I","dnd-over-bot":"sitemap_sitemap_dnd-over-bot_Ovzua","dnd-over":"sitemap_sitemap_dnd-over_AJCMi","page-name":"sitemap_sitemap_page-name_eRLcv","element-name":"sitemap_sitemap_element-name_pP758","on-drag":"sitemap_sitemap_on-drag_ORh57","selected":"sitemap_sitemap_selected_eF0GM","hidden":"sitemap_sitemap_hidden_Iayiv"}
|
||||
184
frontend/src/app/main/ui/workspace/text_palette.cljs
Normal file
184
frontend/src/app/main/ui/workspace/text_palette.cljs
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
;; 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.text-palette
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(: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.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc typography-item
|
||||
[{:keys [file-id selected-ids typography name-only? size]}]
|
||||
(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 {:on-click handle-click
|
||||
:class (dom/classnames (css :typography-item) true
|
||||
(css :mid-item) (<= size 72)
|
||||
(css :small-item) (<= size 64))}
|
||||
[:div
|
||||
{:class (dom/classnames (css :typography-name) true)
|
||||
:title (:name typography)
|
||||
:style {:font-family (:font-family typography)
|
||||
:font-weight (:font-weight typography)
|
||||
:font-style (:font-style typography)}}
|
||||
(:name typography)]
|
||||
(when-not name-only?
|
||||
[:*
|
||||
[:div {:class (dom/classnames (css :typography-font) true)}
|
||||
(:name font-data)]
|
||||
[:div {:class (dom/classnames (css :typography-data) true)}
|
||||
(str (:font-size typography) "px | " (:name variant-data))]])]))
|
||||
|
||||
(mf/defc palette
|
||||
[{:keys [selected selected-ids current-file-id file-typographies shared-libs size width]}]
|
||||
(let [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]))))
|
||||
state (mf/use-state {:offset 0})
|
||||
offset-step 144
|
||||
buttons-size (cond
|
||||
(<= size 64) 164
|
||||
(<= size 72) 164
|
||||
(<= size 80) 132
|
||||
:else 132)
|
||||
width (- width buttons-size)
|
||||
visible (int (/ width offset-step))
|
||||
show-arrows? (> (count current-typographies) visible)
|
||||
offset (:offset @state 0)
|
||||
max-offset (- (count current-typographies)
|
||||
visible)
|
||||
container (mf/use-ref nil)
|
||||
|
||||
|
||||
on-left-arrow-click
|
||||
(mf/use-callback
|
||||
(mf/deps max-offset visible)
|
||||
(fn [_]
|
||||
(swap! state update :offset
|
||||
(fn [offset]
|
||||
(if (pos? offset)
|
||||
(max (- offset 1) 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 1))
|
||||
offset)))))
|
||||
|
||||
on-wheel
|
||||
(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)))))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps current-typographies)
|
||||
(fn []
|
||||
(let [fonts (into #{} (keep :font-id) current-typographies)]
|
||||
(run! f/ensure-loaded! fonts))))
|
||||
|
||||
(mf/use-layout-effect
|
||||
#(let [dom (mf/ref-val container)
|
||||
width (obj/get dom "clientWidth")]
|
||||
(swap! state assoc :width width)))
|
||||
|
||||
(mf/with-effect [width selected]
|
||||
(when (not= 0 (:offset @state))
|
||||
(swap! state assoc :offset 0)))
|
||||
|
||||
[:div {:class (dom/classnames (css :text-palette) true)
|
||||
:style #js {"--height" (str size "px")}}
|
||||
|
||||
(when show-arrows?
|
||||
[:button {:class (dom/classnames (css :left-arrow) true)
|
||||
:disabled (= offset 0)
|
||||
:on-click on-left-arrow-click} i/arrow-refactor])
|
||||
|
||||
[:div {:class (dom/classnames (css :text-palette-content) true)
|
||||
:ref container
|
||||
:on-wheel on-wheel}
|
||||
(if (empty? current-typographies)
|
||||
[:div {:class (dom/classnames (css :text-palette-empty) true)
|
||||
:style {:position "absolute"
|
||||
:left "50%"
|
||||
:top "50%"
|
||||
:transform "translate(-50%, -50%)"}}
|
||||
(tr "workspace.libraries.colors.empty-typography-palette")]
|
||||
[:div
|
||||
{:class (dom/classnames (css :text-palette-inside) true)
|
||||
:style {:position "relative"
|
||||
:max-width (str width "px")
|
||||
:right (str (* offset-step offset) "px")}}
|
||||
(for [[idx item] (map-indexed vector current-typographies)]
|
||||
[:& typography-item
|
||||
{:key idx
|
||||
:file-id file-id
|
||||
:selected-ids selected-ids
|
||||
:typography item
|
||||
:size size}])])]
|
||||
|
||||
(when show-arrows?
|
||||
[:button {:class (dom/classnames (css :right-arrow) true)
|
||||
:disabled (= offset max-offset)
|
||||
:on-click on-right-arrow-click} i/arrow-refactor])]))
|
||||
|
||||
(mf/defc text-palette
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [size width selected] :as props}]
|
||||
(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
|
||||
:width width
|
||||
:selected selected
|
||||
:size size}]))
|
||||
1
frontend/src/app/main/ui/workspace/text_palette.css.json
Normal file
1
frontend/src/app/main/ui/workspace/text_palette.css.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"workspace_text_palette_button-primary_1umSD","button-secondary":"workspace_text_palette_button-secondary_VOIWz","button-icon":"workspace_text_palette_button-icon_bcydd","text-palette":"workspace_text_palette_text-palette_0yeGp","left-arrow":"workspace_text_palette_left-arrow_iSjPL","right-arrow":"workspace_text_palette_right-arrow_cWHr6","button-icon-small":"workspace_text_palette_button-icon-small_wGyH7","disabled":"workspace_text_palette_disabled_EF36J","text-palette-content":"workspace_text_palette_text-palette-content_anJb5","text-palette-inside":"workspace_text_palette_text-palette-inside_LgHnf","typography-item":"workspace_text_palette_typography-item_d0vFL","typography-name":"workspace_text_palette_typography-name_NVBRv","typography-font":"workspace_text_palette_typography-font_paqmC","typography-data":"workspace_text_palette_typography-data_eKyme","mid-item":"workspace_text_palette_mid-item_uTcD2","small-item":"workspace_text_palette_small-item_1Y6mx"}
|
||||
134
frontend/src/app/main/ui/workspace/text_palette.scss
Normal file
134
frontend/src/app/main/ui/workspace/text_palette.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.text-palette {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.left-arrow,
|
||||
.right-arrow {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
padding: 0;
|
||||
z-index: $z-index-4;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: calc(-1 * $s-80);
|
||||
height: 100%;
|
||||
width: $s-80;
|
||||
z-index: $z-index-1;
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
var(--palette-button-shadow-initial) 0%,
|
||||
var(--palette-button-shadow-final) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: var(--button-foreground-hover);
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
svg {
|
||||
stroke: var(--button-foreground-color-disabled);
|
||||
}
|
||||
&::after {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-arrow {
|
||||
&::after {
|
||||
left: $s-24;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--palette-button-shadow-initial) 0%,
|
||||
var(--palette-button-shadow-final) 100%
|
||||
);
|
||||
}
|
||||
&.disabled ::after {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.text-palette-content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
.text-palette-inside {
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
}
|
||||
.typography-item {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
width: $s-136;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--palette-text-background-color);
|
||||
&:first-child {
|
||||
margin-left: $s-8;
|
||||
}
|
||||
.typography-name {
|
||||
@include tabTitleTipography;
|
||||
@include textEllipsis;
|
||||
height: $s-16;
|
||||
width: $s-120;
|
||||
color: var(--palette-text-color-selected);
|
||||
}
|
||||
.typography-font {
|
||||
@include textEllipsis;
|
||||
height: $s-16;
|
||||
width: $s-120;
|
||||
color: var(--palette-text-color);
|
||||
}
|
||||
.typography-data {
|
||||
@include textEllipsis;
|
||||
height: $s-16;
|
||||
width: $s-120;
|
||||
color: var(--palette-text-color);
|
||||
}
|
||||
&.mid-item {
|
||||
.typography-name {
|
||||
height: $s-16;
|
||||
}
|
||||
.typography-data {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.small-item {
|
||||
.typography-name {
|
||||
height: $s-12;
|
||||
}
|
||||
.typography-data,
|
||||
.typography-font {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--palette-text-background-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
;; 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.text-palette-ctx-menu
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require
|
||||
[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]]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
||||
(mf/defc text-palette-ctx-menu
|
||||
[{:keys [show-menu? close-menu on-select-palette selected]}]
|
||||
(let [file-typographies (mf/deref refs/workspace-file-typography)
|
||||
shared-libs (mf/deref refs/workspace-libraries)]
|
||||
[:& dropdown {:show show-menu?
|
||||
:on-close close-menu}
|
||||
[:ul {:class (dom/classnames (css :workspace-context-menu) true)}
|
||||
(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)))
|
||||
:key (str "library-" idx)
|
||||
:on-click #(on-select-palette cur-library)}
|
||||
[:div
|
||||
{:class (dom/classnames (css :library-name) true)}
|
||||
(str (:name cur-library) " " (str/format "(%s)" (count typographies)))]
|
||||
|
||||
(when (= selected (:id cur-library))
|
||||
[:span {:class (dom/classnames (css :icon-wrapper) true)}
|
||||
i/tick-refactor])]))
|
||||
|
||||
[:li
|
||||
{:class (dom/classnames (css :file-library) true
|
||||
(css :selected) (= selected :file))
|
||||
:on-click #(on-select-palette :file)}
|
||||
|
||||
[:div {:class (dom/classnames (css :library-name) true)}
|
||||
(str (tr "workspace.libraries.colors.file-library")
|
||||
(str/format " (%s)" (count file-typographies)))]
|
||||
(when (= selected :file)
|
||||
[:span {:class (dom/classnames (css :icon-wrapper) true)}
|
||||
i/tick-refactor])
|
||||
]]]))
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"button-primary":"workspace_text_palette_ctx_menu_button-primary_bkGXB","button-secondary":"workspace_text_palette_ctx_menu_button-secondary_mbPs7","button-icon":"workspace_text_palette_ctx_menu_button-icon_oklnh","button-icon-small":"workspace_text_palette_ctx_menu_button-icon-small_ebriD","workspace-context-menu":"workspace_text_palette_ctx_menu_workspace-context-menu_OShZn","palette-library":"workspace_text_palette_ctx_menu_palette-library_pDyi5","selected":"workspace_text_palette_ctx_menu_selected_k3kOd","icon-wrapper":"workspace_text_palette_ctx_menu_icon-wrapper_Xoj9o","file-library":"workspace_text_palette_ctx_menu_file-library_t-25M","library-name":"workspace_text_palette_ctx_menu_library-name_TGs9Z"}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.workspace-context-menu {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
bottom: $s-0;
|
||||
max-width: $s-248;
|
||||
padding: $s-4;
|
||||
margin: 0 0 $s-4 0;
|
||||
z-index: $z-index-10;
|
||||
border-radius: $br-10;
|
||||
background-color: var(--context-menu-background-color);
|
||||
|
||||
.palette-library,
|
||||
.file-library {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: $s-8;
|
||||
padding: $s-8;
|
||||
margin-bottom: $s-4;
|
||||
border-radius: $br-8;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.library-name {
|
||||
@include titleTipography;
|
||||
color: var(--context-menu-foreground-color);
|
||||
}
|
||||
&.selected,
|
||||
&:hover {
|
||||
.icon-wrapper {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@include flexCenter;
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
}
|
||||
.library-name {
|
||||
color: var(--context-menu-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--context-menu-background-color-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.util.color
|
||||
"Color conversion utils."
|
||||
(:require
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
[app.util.strings :as ust]
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -129,6 +130,12 @@
|
|||
(str/fmt "linear-gradient(to bottom, %s)" stops-css)
|
||||
(str/fmt "radial-gradient(circle, %s)" stops-css))))
|
||||
|
||||
(defn gradient-type->string [type]
|
||||
(case type
|
||||
:linear (tr "workspace.gradients.linear")
|
||||
:radial (tr "workspace.gradients.radial")
|
||||
nil))
|
||||
|
||||
;; TODO: REMOVE `VALUE` WHEN COLOR IS INTEGRATED
|
||||
(defn color->background [{:keys [color opacity gradient value]}]
|
||||
(let [color (or color value)
|
||||
|
|
@ -180,3 +187,10 @@
|
|||
|
||||
:else
|
||||
[r g (inc b)]))
|
||||
|
||||
(defn get-color-name
|
||||
[color]
|
||||
(or (:color-library-name color)
|
||||
(:name color)
|
||||
(:color color)
|
||||
(gradient-type->string (:type (:gradient color)))))
|
||||
Loading…
Add table
Reference in a new issue