diff --git a/frontend/resources/images/icons/drop-refactor.svg b/frontend/resources/images/icons/drop-refactor.svg new file mode 100644 index 000000000..c90d7bffc --- /dev/null +++ b/frontend/resources/images/icons/drop-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/text-palette-refactor.svg b/frontend/resources/images/icons/text-palette-refactor.svg new file mode 100644 index 000000000..8e6f90d4f --- /dev/null +++ b/frontend/resources/images/icons/text-palette-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index ca0454f67..145658f68 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -23,6 +23,7 @@ body { width: 100vw; height: 100vh; overflow: hidden; + position: relative; } * { diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index ece2050f2..e0d30f8cc 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -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; } diff --git a/frontend/resources/styles/common/refactor/borders.scss b/frontend/resources/styles/common/refactor/borders.scss index 0d9cbecb0..76949a647 100644 --- a/frontend/resources/styles/common/refactor/borders.scss +++ b/frontend/resources/styles/common/refactor/borders.scss @@ -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%; diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss index d5d508479..3149fc6cc 100644 --- a/frontend/resources/styles/common/refactor/common-refactor.scss +++ b/frontend/resources/styles/common/refactor/common-refactor.scss @@ -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; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 2dc2a53ed..27a9b2777 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -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); } diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index 57805d5cd..9aa19c9ba 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -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; } diff --git a/frontend/resources/styles/common/refactor/opacity.scss b/frontend/resources/styles/common/refactor/opacity.scss new file mode 100644 index 000000000..3d1ae7104 --- /dev/null +++ b/frontend/resources/styles/common/refactor/opacity.scss @@ -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; diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index 2c4f06ad2..d61d82664 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/frontend/resources/styles/common/refactor/spacing.scss @@ -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); diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss index 2f621b9a6..d333b79be 100644 --- a/frontend/resources/styles/main/partials/color-bullet.scss +++ b/frontend/resources/styles/main/partials/color-bullet.scss @@ -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%; diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index 0286cbfff..e86e83235 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/frontend/src/app/main/data/workspace/libraries.cljs @@ -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) diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs index 0260aa7ee..9d973db79 100644 --- a/frontend/src/app/main/ui/components/color_bullet.cljs +++ b/frontend/src/app/main/ui/components/color_bullet.cljs @@ -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 %)) diff --git a/frontend/src/app/main/ui/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs new file mode 100644 index 000000000..2a64e1f40 --- /dev/null +++ b/frontend/src/app/main/ui/components/color_bullet_new.cljs @@ -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]))) diff --git a/frontend/src/app/main/ui/components/color_bullet_new.css.json b/frontend/src/app/main/ui/components/color_bullet_new.css.json new file mode 100644 index 000000000..04e955d8e --- /dev/null +++ b/frontend/src/app/main/ui/components/color_bullet_new.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet_new.scss new file mode 100644 index 000000000..66e21258a --- /dev/null +++ b/frontend/src/app/main/ui/components/color_bullet_new.scss @@ -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; +} diff --git a/frontend/src/app/main/ui/components/context_menu_a11y/context_menu_a11y.cljs b/frontend/src/app/main/ui/components/context_menu_a11y.cljs similarity index 99% rename from frontend/src/app/main/ui/components/context_menu_a11y/context_menu_a11y.cljs rename to frontend/src/app/main/ui/components/context_menu_a11y.cljs index a814787d0..7bdd05ff5 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y/context_menu_a11y.cljs +++ b/frontend/src/app/main/ui/components/context_menu_a11y.cljs @@ -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] diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.css.json b/frontend/src/app/main/ui/components/context_menu_a11y.css.json new file mode 100644 index 000000000..480fdf318 --- /dev/null +++ b/frontend/src/app/main/ui/components/context_menu_a11y.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/context_menu_a11y/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss similarity index 96% rename from frontend/src/app/main/ui/components/context_menu_a11y/context_menu_a11y.scss rename to frontend/src/app/main/ui/components/context_menu_a11y.scss index 556bc1acf..f62c2f3dc 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -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 { diff --git a/frontend/src/app/main/ui/components/context_menu_a11y/context_menu_a11y.css.json b/frontend/src/app/main/ui/components/context_menu_a11y/context_menu_a11y.css.json deleted file mode 100644 index 5626dab9d..000000000 --- a/frontend/src/app/main/ui/components/context_menu_a11y/context_menu_a11y.css.json +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/tab_container/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs similarity index 98% rename from frontend/src/app/main/ui/components/tab_container/tab_container.cljs rename to frontend/src/app/main/ui/components/tab_container.cljs index a21d26d34..5bd44abec 100644 --- a/frontend/src/app/main/ui/components/tab_container/tab_container.cljs +++ b/frontend/src/app/main/ui/components/tab_container.cljs @@ -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] diff --git a/frontend/src/app/main/ui/components/tab_container.css.json b/frontend/src/app/main/ui/components/tab_container.css.json new file mode 100644 index 000000000..6a5fd88cd --- /dev/null +++ b/frontend/src/app/main/ui/components/tab_container.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/tab_container/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss similarity index 93% rename from frontend/src/app/main/ui/components/tab_container/tab_container.scss rename to frontend/src/app/main/ui/components/tab_container.scss index e957bd3ba..23e941e3a 100644 --- a/frontend/src/app/main/ui/components/tab_container/tab_container.scss +++ b/frontend/src/app/main/ui/components/tab_container.scss @@ -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; diff --git a/frontend/src/app/main/ui/components/tab_container/tab_container.css.json b/frontend/src/app/main/ui/components/tab_container/tab_container.css.json deleted file mode 100644 index 4b608310f..000000000 --- a/frontend/src/app/main/ui/components/tab_container/tab_container.css.json +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/tests/test_component.cljs b/frontend/src/app/main/ui/components/tests/test_component.cljs deleted file mode 100644 index df154fdc5..000000000 --- a/frontend/src/app/main/ui/components/tests/test_component.cljs +++ /dev/null @@ -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]) diff --git a/frontend/src/app/main/ui/components/tests/test_component.css.json b/frontend/src/app/main/ui/components/tests/test_component.css.json deleted file mode 100644 index e7a2316d8..000000000 --- a/frontend/src/app/main/ui/components/tests/test_component.css.json +++ /dev/null @@ -1 +0,0 @@ -{"button":"tests_test_component_button_8MQZj"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/tests/test_component.scss b/frontend/src/app/main/ui/components/tests/test_component.scss deleted file mode 100644 index 2579a0c1a..000000000 --- a/frontend/src/app/main/ui/components/tests/test_component.scss +++ /dev/null @@ -1,4 +0,0 @@ -.button { - color: var(--button-foreground-active); - background-color: var(--button-background-active); -} diff --git a/frontend/src/app/main/ui/dashboard/file_menu.cljs b/frontend/src/app/main/ui/dashboard/file_menu.cljs index 0a86ec2a7..691100469 100644 --- a/frontend/src/app/main/ui/dashboard/file_menu.cljs +++ b/frontend/src/app/main/ui/dashboard/file_menu.cljs @@ -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]] diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 706b8774b..4384e97b5 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -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))} diff --git a/frontend/src/app/main/ui/dashboard/project_menu.cljs b/frontend/src/app/main/ui/dashboard/project_menu.cljs index be250337a..c85cc543b 100644 --- a/frontend/src/app/main/ui/dashboard/project_menu.cljs +++ b/frontend/src/app/main/ui/dashboard/project_menu.cljs @@ -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] diff --git a/frontend/src/app/main/ui/debug/components_preview.cljs b/frontend/src/app/main/ui/debug/components_preview.cljs index e8a741444..2b950df04 100644 --- a/frontend/src/app/main/ui/debug/components_preview.cljs +++ b/frontend/src/app/main/ui/debug/components_preview.cljs @@ -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"}]]]])) \ No newline at end of file + [:div {:class (css :component-wrapper)}]]])) \ No newline at end of file diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index e83f008c0..41bff1994 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs index 0af7b27de..66606b753 100644 --- a/frontend/src/app/main/ui/settings/access_tokens.cljs +++ b/frontend/src/app/main/ui/settings/access_tokens.cljs @@ -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] diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs index 5399ad70a..6356a9e20 100644 --- a/frontend/src/app/main/ui/settings/options.cljs +++ b/frontend/src/app/main/ui/settings/options.cljs @@ -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 diff --git a/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs b/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs index 0e81b153e..0172a429a 100644 --- a/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs @@ -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] diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 1c5b63bb2..88d741dcc 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs new file mode 100644 index 000000000..b4db61613 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/color_palette.cljs @@ -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}])) diff --git a/frontend/src/app/main/ui/workspace/color_palette.css.json b/frontend/src/app/main/ui/workspace/color_palette.css.json new file mode 100644 index 000000000..f8fedfc2b --- /dev/null +++ b/frontend/src/app/main/ui/workspace/color_palette.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss new file mode 100644 index 000000000..cb3a2b46a --- /dev/null +++ b/frontend/src/app/main/ui/workspace/color_palette.scss @@ -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; + } + } + } +} diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs new file mode 100644 index 000000000..5780cbb27 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs @@ -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}])]]]]])) diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json new file mode 100644 index 000000000..a3d1913bb --- /dev/null +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss new file mode 100644 index 000000000..b18d45314 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -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); + } + } +} diff --git a/frontend/src/app/main/ui/workspace/context_menu/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs similarity index 99% rename from frontend/src/app/main/ui/workspace/context_menu/context_menu.cljs rename to frontend/src/app/main/ui/workspace/context_menu.cljs index 97b3cb886..41b677c77 100644 --- a/frontend/src/app/main/ui/workspace/context_menu/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/context_menu.css.json b/frontend/src/app/main/ui/workspace/context_menu.css.json new file mode 100644 index 000000000..a41facee1 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/context_menu.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/context_menu/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss similarity index 95% rename from frontend/src/app/main/ui/workspace/context_menu/context_menu.scss rename to frontend/src/app/main/ui/workspace/context_menu.scss index c439740ed..9bda90ad9 100644 --- a/frontend/src/app/main/ui/workspace/context_menu/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/context_menu.scss @@ -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); } diff --git a/frontend/src/app/main/ui/workspace/context_menu/context_menu.css.json b/frontend/src/app/main/ui/workspace/context_menu/context_menu.css.json deleted file mode 100644 index 53d0935c2..000000000 --- a/frontend/src/app/main/ui/workspace/context_menu/context_menu.css.json +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index 33776155f..cb8c18a59 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs new file mode 100644 index 000000000..595b0587e --- /dev/null +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -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)}]])])) diff --git a/frontend/src/app/main/ui/workspace/palette.css.json b/frontend/src/app/main/ui/workspace/palette.css.json new file mode 100644 index 000000000..ec0718e28 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/palette.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss new file mode 100644 index 000000000..209593e2f --- /dev/null +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -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; + } + } + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index fb7887865..80a272229 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button/collapsable_button.cljs b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs similarity index 92% rename from frontend/src/app/main/ui/workspace/sidebar/collapsable_button/collapsable_button.cljs rename to frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs index 48eb3e0aa..f132e9e95 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button/collapsable_button.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs @@ -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] - ))) \ No newline at end of file + i/arrow-slide]))) \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json new file mode 100644 index 000000000..e4c9e7e0a --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button/collapsable_button.scss b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss similarity index 90% rename from frontend/src/app/main/ui/workspace/sidebar/collapsable_button/collapsable_button.scss rename to frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss index 608abed96..4163f1d0c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button/collapsable_button.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss @@ -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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button/collapsable_button.css.json b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button/collapsable_button.css.json deleted file mode 100644 index 244c3f094..000000000 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button/collapsable_button.css.json +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/component/sidebar.css.json b/frontend/src/app/main/ui/workspace/sidebar/component/sidebar.css.json deleted file mode 100644 index e356bcc16..000000000 --- a/frontend/src/app/main/ui/workspace/sidebar/component/sidebar.css.json +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_item/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs similarity index 98% rename from frontend/src/app/main/ui/workspace/sidebar/layers/layer_item/layer_item.cljs rename to frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs index ac88e5c35..985095337 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_item/layer_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json b/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json new file mode 100644 index 000000000..96e75da53 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_item/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss similarity index 70% rename from frontend/src/app/main/ui/workspace/sidebar/layers/layer_item/layer_item.scss rename to frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index 16fc90ca6..d43daf24d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_item/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -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; } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_name/layer_name.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs similarity index 98% rename from frontend/src/app/main/ui/workspace/sidebar/layers/layer_name/layer_name.cljs rename to frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs index 67b7ad550..ce118aa43 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_name/layer_name.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs @@ -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] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json b/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json new file mode 100644 index 000000000..40f1367aa --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_name/layer_name.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss similarity index 89% rename from frontend/src/app/main/ui/workspace/sidebar/layers/layer_name/layer_name.scss rename to frontend/src/app/main/ui/workspace/sidebar/layer_name.scss index c07dd9e52..8e6ede570 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_name/layer_name.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss @@ -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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs similarity index 91% rename from frontend/src/app/main/ui/workspace/sidebar/layers/layers.cljs rename to frontend/src/app/main/ui/workspace/sidebar/layers.cljs index deff4a14e..d5682b96d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.css.json b/frontend/src/app/main/ui/workspace/sidebar/layers.css.json new file mode 100644 index 000000000..f9c4de129 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss similarity index 91% rename from frontend/src/app/main/ui/workspace/sidebar/layers/layers.scss rename to frontend/src/app/main/ui/workspace/sidebar/layers.scss index dc4f0c0a2..34f76f574 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_item/layer_item.css.json b/frontend/src/app/main/ui/workspace/sidebar/layers/layer_item/layer_item.css.json deleted file mode 100644 index 00a701dbe..000000000 --- a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_item/layer_item.css.json +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_name/layer_name.css.json b/frontend/src/app/main/ui/workspace/sidebar/layers/layer_name/layer_name.css.json deleted file mode 100644 index 6273495cf..000000000 --- a/frontend/src/app/main/ui/workspace/sidebar/layers/layer_name/layer_name.css.json +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers/layers.css.json b/frontend/src/app/main/ui/workspace/sidebar/layers/layers.css.json deleted file mode 100644 index 4fd8cbda2..000000000 --- a/frontend/src/app/main/ui/workspace/sidebar/layers/layers.css.json +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 4a5653216..5c652acf7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -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])] diff --git a/frontend/src/app/main/ui/workspace/sidebar/component/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar/sidebar.cljs similarity index 95% rename from frontend/src/app/main/ui/workspace/sidebar/component/sidebar.cljs rename to frontend/src/app/main/ui/workspace/sidebar/sidebar.cljs index 0659a8250..fe3b8a403 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/component/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sidebar.cljs @@ -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] diff --git a/frontend/src/app/main/ui/workspace/sidebar/sidebar.css.json b/frontend/src/app/main/ui/workspace/sidebar/sidebar.css.json new file mode 100644 index 000000000..1bc138e4c --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/sidebar.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/component/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar/sidebar.scss similarity index 97% rename from frontend/src/app/main/ui/workspace/sidebar/component/sidebar.scss rename to frontend/src/app/main/ui/workspace/sidebar/sidebar.scss index 825fa66b2..6f2d76f8d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/component/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sidebar.scss @@ -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 { diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs similarity index 95% rename from frontend/src/app/main/ui/workspace/sidebar/sitemap/sitemap.cljs rename to frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 568277040..e16e78789 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json new file mode 100644 index 000000000..46ae1745f --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss similarity index 94% rename from frontend/src/app/main/ui/workspace/sidebar/sitemap/sitemap.scss rename to frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index 3aafc3f3e..037a925f3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -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); diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap/sitemap.css.json b/frontend/src/app/main/ui/workspace/sidebar/sitemap/sitemap.css.json deleted file mode 100644 index 9a4d84fc8..000000000 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap/sitemap.css.json +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette.cljs b/frontend/src/app/main/ui/workspace/text_palette.cljs new file mode 100644 index 000000000..83037e8b0 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/text_palette.cljs @@ -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}])) diff --git a/frontend/src/app/main/ui/workspace/text_palette.css.json b/frontend/src/app/main/ui/workspace/text_palette.css.json new file mode 100644 index 000000000..236e19b66 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/text_palette.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss new file mode 100644 index 000000000..0e8fab650 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/text_palette.scss @@ -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); + } + } + } +} diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs new file mode 100644 index 000000000..2f6e65054 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs @@ -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]) + ]]])) diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json new file mode 100644 index 000000000..3629792d0 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss new file mode 100644 index 000000000..98cbbe191 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -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); + } + } +} diff --git a/frontend/src/app/util/color.cljs b/frontend/src/app/util/color.cljs index 80f60a41e..c4e400568 100644 --- a/frontend/src/app/util/color.cljs +++ b/frontend/src/app/util/color.cljs @@ -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))))) \ No newline at end of file