3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-22 22:56:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Remove new-css-system on assets tab

Browse source
This commit is contained in:
Eva 2023-12-29 17:48:11 +01:00 • committed by Alonso Torres
parent c9200f235e
commit dc4bf82684
19 changed files with 1140 additions and 2283 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/resources/styles/common/refactor/common-refactor.scss
View file

@ -34,7 +34,3 @@ $da-primary: var(--color-accent-primary);
$da-primary-muted: var(--color-accent-primary-muted); $da-primary-muted: var(--color-accent-primary-muted);
$da-secondary: var(--color-accent-secondary); $da-secondary: var(--color-accent-secondary);
$da-tertiary: var(--color-accent-tertiary); $da-tertiary: var(--color-accent-tertiary);
#app {
background-color: var(--app-background);
}

4
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -314,3 +314,7 @@
--viewer-thumbnail-border-color: var(--color-accent-primary); --viewer-thumbnail-border-color: var(--color-accent-primary);
--viewer-thumbnail-background-color-selected: var(--color-accent-primary-muted); --viewer-thumbnail-background-color-selected: var(--color-accent-primary-muted);
} }
#app {
background-color: var(--app-background);
}

1
frontend/resources/styles/main-default.scss
View file

@ -72,7 +72,6 @@
@import "main/partials/project-bar"; @import "main/partials/project-bar";
@import "main/partials/sidebar"; @import "main/partials/sidebar";
@import "main/partials/sidebar-align-options"; @import "main/partials/sidebar-align-options";
@import "main/partials/sidebar-assets";
@import "main/partials/sidebar-document-history"; @import "main/partials/sidebar-document-history";
@import "main/partials/sidebar-element-options"; @import "main/partials/sidebar-element-options";
@import "main/partials/sidebar-interactions"; @import "main/partials/sidebar-interactions";

538
frontend/resources/styles/main/partials/sidebar-assets.scss
View file

@ -1,538 +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
.assets-bar {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
.assets-bar-title {
color: $color-gray-10;
font-size: $fs14;
margin: $size-2 $size-2 0 $size-2;
display: flex;
align-items: center;
cursor: pointer;
& .libraries-button {
margin-left: auto;
display: flex;
align-items: center;
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
padding-right: 6px;
}
}
& .libraries-button:hover {
color: $color-primary;
& svg {
fill: $color-primary;
}
}
}
.search-block {
border: 1px solid $color-gray-30;
margin: $size-2 $size-2 0 $size-2;
padding: $size-1 $size-2;
display: flex;
align-items: center;
&:hover {
border-color: $color-gray-20;
}
&:focus-within {
border-color: $color-primary;
}
& .search-input {
background-color: $color-gray-50;
border: none;
color: $color-gray-10;
font-size: $fs12;
margin: 0;
padding: 0;
flex-grow: 1;
&:focus {
color: lighten($color-gray-10, 8%);
outline: none;
}
}
& .search-icon {
display: flex;
align-items: center;
svg {
fill: $color-gray-30;
height: 16px;
width: 16px;
}
&.close {
transform: rotate(45deg);
cursor: pointer;
}
}
}
.input-select {
background-color: $color-gray-50;
color: $color-gray-10;
border: 1px solid transparent;
border-bottom-color: $color-gray-40;
padding: $size-1;
margin: $size-2 $size-2 $size-4 $size-2;
&:focus {
color: lighten($color-gray-10, 8%);
}
&:active {
border-color: $color-primary;
}
option {
background: $color-white;
color: $color-gray-60;
font-size: $fs12;
}
}
.collapse-library {
margin-right: $size-2;
flex-shrink: inherit; // Inheriting shrink behaviour
&.open svg {
transform: rotate(90deg);
}
}
.library-bar {
cursor: pointer;
}
.listing-options {
background-color: $color-gray-60;
display: flex;
align-items: center;
padding: $size-4 $size-2 0 $size-2;
.selected-count {
color: $color-primary;
font-size: $fs12;
}
.listing-option-btn {
cursor: pointer;
margin-left: $size-2;
&.first {
margin-left: auto;
}
svg {
fill: $color-gray-20;
height: 16px;
width: 16px;
}
}
}
.asset-section {
background-color: $color-gray-60;
padding: $size-2;
font-size: $fs12;
color: $color-gray-20;
/* TODO: see if this is useful, or is better to leave only
one scroll bar in the whole sidebar
(also see .asset-list) */
// max-height: 30rem;
// overflow-y: scroll;
// First child is the listing options buttons
&:not(:nth-child(2)) {
border-top: 1px solid $color-gray-50;
}
.asset-title {
display: flex;
cursor: pointer;
font-size: $fs12;
text-transform: uppercase;
& .num-assets {
color: $color-gray-30;
}
& svg {
height: 8px;
width: 8px;
fill: $color-gray-30;
margin-right: 4px;
transform: rotate(90deg);
}
&.closed svg {
transform: rotate(0deg);
transition: transform 0.3s;
}
}
.group-title {
display: flex;
cursor: pointer;
margin-top: $size-2;
margin-bottom: $size-1;
color: $color-white;
& svg {
height: 8px;
width: 8px;
fill: $color-white;
margin-right: 4px;
transform: rotate(90deg);
}
&.closed svg {
transform: rotate(0deg);
transition: transform 0.3s;
}
& .dim {
color: $color-gray-40;
}
}
.assets-button {
margin-left: auto;
cursor: pointer;
& svg {
width: 0.7rem;
height: 0.7rem;
fill: #f0f0f0;
}
&:hover svg {
fill: $color-primary;
}
}
.asset-title + .asset-grid {
margin-top: $size-2;
}
.asset-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 6vh;
column-gap: 0.5rem;
row-gap: 0.5rem;
&.big {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 10vh;
.three-row & {
grid-template-columns: repeat(3, 1fr);
}
.four-row & {
grid-template-columns: repeat(4, 1fr);
}
.grid-cell {
padding: $size-1;
& svg {
height: 10vh;
}
}
}
}
.grid-cell {
background-color: $color-canvas;
border-radius: $br4;
border: 2px solid transparent;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: $size-2;
position: relative;
cursor: pointer;
& img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
pointer-events: none;
}
}
.cell-name {
background-color: $color-gray-60;
font-size: $fs9;
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.editing {
display: block;
}
.editable-label-input {
border: 1px solid $color-gray-20;
border-radius: $br3;
font-size: $fs12;
padding: 2px;
margin: 0;
height: unset;
width: 100%;
}
.editable-label-close {
display: none;
}
}
.grid-cell:hover {
border: 2px solid $color-primary;
& .cell-name {
display: block;
}
}
.grid-cell.selected {
border: 2px solid $color-primary;
}
.grid-placeholder {
border: 2px solid $color-gray-20;
border-radius: $br4;
}
.drop-space {
height: 10px;
}
.typography-container {
position: relative;
&:last-child {
padding-bottom: 0.5em;
}
}
.drag-counter {
position: absolute;
top: 5px;
left: 4px;
width: 16px;
height: 16px;
background-color: $color-primary;
border-radius: 50%;
color: $color-black;
font-size: $fs12;
display: flex;
justify-content: center;
align-items: center;
}
.asset-title + .asset-enum {
margin-top: $size-2;
}
.asset-enum {
.enum-item {
position: relative;
display: flex;
align-items: center;
margin-bottom: $size-2;
cursor: pointer;
& > svg,
& > img {
background-color: $color-canvas;
border-radius: $br4;
border: 2px solid transparent;
height: 24px;
width: 24px;
margin-right: $size-2;
}
.item-name {
width: calc(100% - 24px - #{$size-2});
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
&.editing {
display: flex;
align-items: center;
.editable-label-input {
height: 24px;
}
.editable-label-close {
display: none;
}
}
}
}
.enum-item:hover,
.enum-item.selected {
color: $color-primary;
}
.grid-placeholder {
margin-bottom: 5px;
}
}
/* TODO: see if this is useful, or is better to leave only
one scroll bar in the whole sidebar
(also see .asset-section) */
// .asset-list {
// max-height: 30rem;
// overflow-y: scroll;
// }
.asset-list-item {
display: flex;
align-items: center;
border: 1px solid transparent;
border-radius: $br3;
margin-top: $size-1;
padding: 2px;
font-size: $fs12;
color: $color-white;
cursor: pointer;
position: relative;
.name-block {
color: $color-gray-20;
width: calc(100% - 24px - #{$size-2});
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
& span {
margin-left: $size-1;
color: $color-gray-30;
text-transform: uppercase;
}
&.selected {
border: 1px solid $color-primary;
}
}
.context-menu {
position: fixed;
top: 10px;
left: 10px;
}
.advanced-options {
border-color: $color-black;
background-color: $color-gray-60;
.input-text,
.input-select,
.adv-typography-name {
background-color: $color-gray-60;
}
}
.dragging {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: color.adjust($color-primary, $alpha: -0.5);
}
}
}
.modal-create-color {
position: relative;
background-color: $color-white;
padding: 4rem;
display: flex;
flex-direction: column;
align-items: center;
& .sketch-picker,
.chrome-picker {
box-shadow: none !important;
border: 1px solid $color-gray-10 !important;
border-radius: $br0 !important;
& input {
background-color: $color-white;
}
}
& .close {
position: absolute;
right: 1rem;
transform: rotate(45deg);
top: 1rem;
svg {
fill: $color-black;
height: 20px;
width: 20px;
&:hover {
fill: $color-danger;
}
}
}
& .btn-primary {
width: 10rem;
padding: 0.5rem;
margin-top: 1rem;
}
}
.modal-create-color-title {
color: $color-black;
font-size: $fs24;
font-weight: $fw400;
}
.libraries-wrapper {
overflow: auto;
display: flex;
flex-direction: column;
flex: 1;
}

3
frontend/src/app/main/ui/components/forms.scss
View file

@ -24,7 +24,7 @@
cursor: pointer; cursor: pointer;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: $s-8;
input { input {
@extend .input-element; @extend .input-element;
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
@ -143,6 +143,7 @@
.hint { .hint {
@include titleTipography; @include titleTipography;
color: var(--modal-text-foreground-color);
width: 99%; width: 99%;
} }

69
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -19,7 +19,6 @@
[app.main.ui.workspace.sidebar.assets.file-library :refer [file-library]] [app.main.ui.workspace.sidebar.assets.file-library :refer [file-library]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -71,7 +70,6 @@
[] []
(let [components-v2 (mf/use-ctx ctx/components-v2) (let [components-v2 (mf/use-ctx ctx/components-v2)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
filters* (mf/use-state filters* (mf/use-state
{:term "" {:term ""
:section "all" :section "all"
@ -104,17 +102,8 @@
on-search-term-change on-search-term-change
(mf/use-fn (mf/use-fn
(mf/deps new-css-system)
(fn [event] (fn [event]
;; NOTE: When old-css-system is removed this function will recibe value and event (swap! filters* assoc :term event)))
;; Let won't be necessary any more
(let [value (if ^boolean new-css-system
event
(dom/get-target-val event))]
(swap! filters* assoc :term value))))
on-search-clear-click
(mf/use-fn #(swap! filters* assoc :term ""))
on-section-filter-change on-section-filter-change
(mf/use-fn (mf/use-fn
@ -125,23 +114,12 @@
(dom/get-attribute $ "data-test")))] (dom/get-attribute $ "data-test")))]
(swap! filters* assoc :section value :open-menu false)))) (swap! filters* assoc :section value :open-menu false))))
handle-key-down
(mf/use-fn
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)
node (dom/get-target event)]
(when ^boolean enter? (dom/blur! node))
(when ^boolean esc? (dom/blur! node)))))
show-libraries-dialog show-libraries-dialog
(mf/use-fn (mf/use-fn
(fn [] (fn []
(modal/show! :libraries-dialog {}) (modal/show! :libraries-dialog {})
(modal/allow-click-outside!))) (modal/allow-click-outside!)))
on-open-menu on-open-menu
(mf/use-fn #(swap! filters* update :open-menu not)) (mf/use-fn #(swap! filters* update :open-menu not))
@ -175,7 +153,6 @@
:option-handler on-section-filter-change :option-handler on-section-filter-change
:data-test "typographies"}]))] :data-test "typographies"}]))]
(if ^boolean new-css-system
[:div {:class (stl/css :assets-bar)} [:div {:class (stl/css :assets-bar)}
[:div {:class (stl/css :assets-header)} [:div {:class (stl/css :assets-header)}
(when-not ^boolean read-only? (when-not ^boolean read-only?
@ -215,46 +192,4 @@
[:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style} [:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
[:div {:class (stl/css :libraries-wrapper)} [:div {:class (stl/css :libraries-wrapper)}
[:& assets-local-library {:filters filters}] [:& assets-local-library {:filters filters}]
[:& assets-libraries {:filters filters}]]]]]] [:& assets-libraries {:filters filters}]]]]]]))
[:div.assets-bar
[:div.tool-window
[:div.tool-window-content
[:div.assets-bar-title
(tr "workspace.assets.assets")
(when-not ^boolean read-only?
[:div.libraries-button {:on-click show-libraries-dialog}
i/text-align-justify
(tr "workspace.assets.libraries")])]
[:div.search-block
[:input.search-input
{:placeholder (tr "workspace.assets.search")
:type "text"
:value term
:on-change on-search-term-change
:on-key-down handle-key-down}]
(if ^boolean (str/empty? term)
[:div.search-icon
i/search]
[:div.search-icon.close
{:on-click on-search-clear-click}
i/close])]
[:select.input-select {:value (:section filters)
:data-mousetrap-dont-stop true
:on-change on-section-filter-change}
[:option {:value "all"} (tr "workspace.assets.box-filter-all")]
[:option {:value "components"} (tr "workspace.assets.components")]
(when-not components-v2
[:option {:value "graphics"} (tr "workspace.assets.graphics")])
[:option {:value "colors"} (tr "workspace.assets.colors")]
[:option {:value "typographies"} (tr "workspace.assets.typography")]]]]
[:& (mf/provider cmm/assets-filters) {:value filters}
[:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
[:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
[:div.libraries-wrapper
[:& assets-local-library {:filters filters}]
[:& assets-libraries {:filters filters}]]]]]])))

44
frontend/src/app/main/ui/workspace/sidebar/assets.scss
View file

@ -10,8 +10,9 @@
position: relative; position: relative;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
}
.libraries-button { .libraries-button {
@include tabTitleTipography; @include tabTitleTipography;
@extend .button-secondary; @extend .button-secondary;
gap: $s-2; gap: $s-2;
@ -45,8 +46,9 @@
stroke: var(--button-secondary-foreground-color-focus); stroke: var(--button-secondary-foreground-color-focus);
} }
} }
} }
.section-button {
.section-button {
@include flexCenter; @include flexCenter;
@include buttonStyle; @include buttonStyle;
height: $s-32; height: $s-32;
@ -77,8 +79,9 @@
stroke: var(--button-foreground-hover); stroke: var(--button-foreground-hover);
} }
} }
} }
.sections-container {
.sections-container {
@include menuShadow; @include menuShadow;
@include flexColumn; @include flexColumn;
position: absolute; position: absolute;
@ -89,7 +92,9 @@
border-radius: $br-8; border-radius: $br-8;
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
z-index: $z-index-2; z-index: $z-index-2;
.section-item { }
.section-item {
@include titleTipography; @include titleTipography;
display: flex; display: flex;
align-items: center; align-items: center;
@ -97,12 +102,13 @@
width: 100%; width: 100%;
padding: $s-6; padding: $s-6;
border-radius: $br-8; border-radius: $br-8;
.section-btn { }
.section-btn {
@include buttonStyle; @include buttonStyle;
} }
}
} .libraries-wrapper {
.libraries-wrapper {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
scrollbar-gutter: stable; scrollbar-gutter: stable;
@ -110,13 +116,18 @@
flex-direction: column; flex-direction: column;
padding-left: $s-8; padding-left: $s-8;
height: calc(100vh - $s-180); height: calc(100vh - $s-180);
} }
.assets-header {
.assets-header {
padding: $s-8 $s-12 $s-12 $s-12; padding: $s-8 $s-12 $s-12 $s-12;
.search-wrapper { }
.search-wrapper {
display: flex; display: flex;
gap: $s-4; gap: $s-4;
.sort-button { }
.sort-button {
@extend .button-secondary; @extend .button-secondary;
width: $s-32; width: $s-32;
border-radius: $br-8; border-radius: $br-8;
@ -124,7 +135,4 @@
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
}
}
}
} }

156
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.assets.colors (ns app.main.ui.workspace.sidebar.assets.colors
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
@ -18,7 +18,6 @@
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.color-bullet :as bc]
[app.main.ui.components.color-bullet-new :as cb] [app.main.ui.components.color-bullet-new :as cb]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
@ -59,7 +58,6 @@
menu-state (mf/use-state cmm/initial-context-menu-state) menu-state (mf/use-state cmm/initial-context-menu-state)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
default-name (cond default-name (cond
(:gradient color) (uc/gradient-type->string (dm/get-in color [:gradient :type])) (:gradient color) (uc/gradient-type->string (dm/get-in color [:gradient :type]))
@ -193,10 +191,9 @@
(dom/select-text! input) (dom/select-text! input)
nil))) nil)))
(if ^boolean new-css-system [:div {:class (stl/css-case :asset-list-item true
[:div {:class (dom/classnames (css :asset-list-item) true :selected (contains? selected (:id color))
(css :selected) (contains? selected (:id color)) :editing editing?)
(css :editing) editing?)
:style #js {"--bullet-size" "16px"} :style #js {"--bullet-size" "16px"}
:on-context-menu on-context-menu :on-context-menu on-context-menu
:on-click (when-not editing? on-click) :on-click (when-not editing? on-click)
@ -208,14 +205,14 @@
:on-drag-over dom/prevent-default :on-drag-over dom/prevent-default
:on-drop on-drop} :on-drop on-drop}
[:div {:class (dom/classnames (css :bullet-block) true)} [:div {:class (stl/css :bullet-block)}
[:& cb/color-bullet {:color color [:& cb/color-bullet {:color color
:mini? true}]] :mini? true}]]
(if ^boolean editing? (if ^boolean editing?
[:input [:input
{:type "text" {:type "text"
:class (dom/classnames (css :element-name) true) :class (stl/css :element-name)
:ref input-ref :ref input-ref
:on-blur input-blur :on-blur input-blur
:on-key-down input-key-down :on-key-down input-key-down
@ -223,14 +220,14 @@
:default-value (cfh/merge-path-item (:path color) (:name color))}] :default-value (cfh/merge-path-item (:path color) (:name color))}]
[:div {:title (:name color) [:div {:title (:name color)
:class (dom/classnames (css :name-block) true) :class (stl/css :name-block)
:on-double-click rename-color-clicked} :on-double-click rename-color-clicked}
(if (= (:name color) default-name) (if (= (:name color) default-name)
[:span {:class (dom/classnames (css :default-name-only) true)} default-name] [:span {:class (stl/css :default-name-only)} default-name]
[:* [:*
[:span {:class (dom/classnames (css :name) true)} (:name color)] [:span {:class (stl/css :name)} (:name color)]
[:span {:class (dom/classnames (css :default-name) true)} default-name]])]) [:span {:class (stl/css :default-name)} default-name]])])
(when local? (when local?
[:& cmm/assets-context-menu [:& cmm/assets-context-menu
@ -254,52 +251,7 @@
:option-handler (on-group (:id color))})]}]) :option-handler (on-group (:id color))})]}])
(when ^boolean dragging? (when ^boolean dragging?
[:div {:class (dom/classnames (css :dragging) true)}])] [:div {:class (stl/css :dragging)}])]))
[:div.asset-list-item
{:class-name (dom/classnames
:selected (contains? selected (:id color)))
:on-context-menu on-context-menu
:on-click (when-not editing? on-click)
:ref item-ref
:draggable (and (not read-only?) (not editing?))
:on-drag-start on-color-drag-start
:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:& bc/color-bullet {:color color}]
(if ^boolean editing?
[:input.element-name
{:type "text"
:ref input-ref
:on-blur input-blur
:on-key-down input-key-down
:auto-focus true
:default-value (cfh/merge-path-item (:path color) (:name color))}]
[:div.name-block {:title (:name color)
:on-double-click rename-color-clicked}
(:name color)
(when-not (= (:name color) default-name)
[:span default-name])])
(when local?
[:& cmm/assets-context-menu
{:on-close on-close-menu
:state @menu-state
:options [(when-not (or multi-colors? multi-assets?)
[(tr "workspace.assets.rename") rename-color-clicked])
(when-not (or multi-colors? multi-assets?)
[(tr "workspace.assets.edit") edit-color-clicked])
[(tr "workspace.assets.delete") delete-color]
(when-not multi-assets?
[(tr "workspace.assets.group") (on-group (:id color))])]}])
(when ^boolean dragging?
[:div.dragging])])))
(mf/defc colors-group (mf/defc colors-group
[{:keys [file-id prefix groups open-groups force-open? local? selected [{:keys [file-id prefix groups open-groups force-open? local? selected
@ -308,7 +260,6 @@
selected-full]}] selected-full]}]
(let [group-open? (or ^boolean force-open? (let [group-open? (or ^boolean force-open?
^boolean (get open-groups prefix (if (= prefix "") true false))) ^boolean (get open-groups prefix (if (= prefix "") true false)))
new-css-system (mf/use-ctx ctx/new-css-system)
dragging* (mf/use-state false) dragging* (mf/use-state false)
dragging? (deref dragging*) dragging? (deref dragging*)
@ -338,8 +289,7 @@
(fn [event] (fn [event]
(cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-color)))] (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-color)))]
(if ^boolean new-css-system [:div {:class (stl/css :colors-group)
[:div {:class (dom/classnames (css :colors-group) true)
:on-drag-enter on-drag-enter :on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave :on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default :on-drag-over dom/prevent-default
@ -353,19 +303,19 @@
(when group-open? (when group-open?
[:* [:*
(let [colors (get groups "" [])] (let [colors (get groups "" [])]
[:div {:class (dom/classnames (css :asset-list) true) [:div {:class (stl/css :asset-list)
:on-drag-enter on-drag-enter :on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave :on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default :on-drag-over dom/prevent-default
:on-drop on-drop} :on-drop on-drop}
(when ^boolean dragging? (when ^boolean dragging?
[:div {:class (dom/classnames (css :grid-placeholder) true)} [:div {:class (stl/css :grid-placeholder)}
"\u00A0"]) "\u00A0"])
(when (and (empty? colors) (when (and (empty? colors)
(some? groups)) (some? groups))
[:div {:class (dom/classnames (css :drop-space) true)}]) [:div {:class (stl/css :drop-space)}])
(for [color colors] (for [color colors]
[:& color-item {:key (dm/str (:id color)) [:& color-item {:key (dm/str (:id color))
@ -403,71 +353,7 @@
:on-rename-group on-rename-group :on-rename-group on-rename-group
:on-ungroup on-ungroup :on-ungroup on-ungroup
:colors colors :colors colors
:selected-full selected-full}]))])] :selected-full selected-full}]))])]))
[:div {:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:& grp/asset-group-title {:file-id file-id
:section :colors
:path prefix
:group-open? group-open?
:on-rename on-rename-group
:on-ungroup on-ungroup}]
(when group-open?
[:*
(let [colors (get groups "" [])]
[:div.asset-list {:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
(when ^boolean dragging?
[:div.grid-placeholder "\u00A0"])
(when (and (empty? colors)
(some? groups))
[:div.drop-space])
(for [color colors]
[:& color-item {:key (dm/str (:id color))
:color color
:file-id file-id
:local? local?
:selected selected
:multi-colors? multi-colors?
:multi-assets? multi-assets?
:on-asset-click on-asset-click
:on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection
:on-group on-group
:colors colors
:selected-full selected-full
:selected-paths selected-paths
:move-color move-color}])])
(for [[path-item content] groups]
(when-not (empty? path-item)
[:& colors-group {:file-id file-id
:prefix (cfh/merge-path-item prefix path-item)
:key (dm/str "group-" path-item)
:groups content
:open-groups open-groups
:force-open? force-open?
:local? local?
:selected selected
:multi-colors? multi-colors?
:multi-assets? multi-assets?
:on-asset-click on-asset-click
:on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection
:on-group on-group
:on-rename-group on-rename-group
:on-ungroup on-ungroup
:colors colors
:selected-full selected-full}]))])])))
(mf/defc colors-section (mf/defc colors-section
[{:keys [file-id local? colors open? force-open? open-status-ref selected reverse-sort? [{:keys [file-id local? colors open? force-open? open-status-ref selected reverse-sort?
@ -491,7 +377,6 @@
(grp/group-assets colors reverse-sort?)) (grp/group-assets colors reverse-sort?))
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
add-color add-color
(mf/use-fn (mf/use-fn
(fn [value _] (fn [value _]
@ -589,20 +474,13 @@
:section :colors :section :colors
:assets-count (count colors) :assets-count (count colors)
:open? open?} :open? open?}
(if ^boolean new-css-system
(when local? (when local?
[:& cmm/asset-section-block {:role :title-button} [:& cmm/asset-section-block {:role :title-button}
(when-not read-only? (when-not read-only?
[:button {:class (dom/classnames (css :assets-btn) true) [:button {:class (stl/css :assets-btn)
:on-click add-color-clicked} :on-click add-color-clicked}
i/add-refactor])]) i/add-refactor])])
(when local?
[:& cmm/asset-section-block {:role :title-button}
(when-not read-only?
[:div.assets-button {:on-click add-color-clicked}
i/plus])]))
[:& cmm/asset-section-block {:role :content} [:& cmm/asset-section-block {:role :content}
[:& colors-group {:file-id file-id [:& colors-group {:file-id file-id

81
frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
View file

@ -9,7 +9,7 @@
.assets-btn { .assets-btn {
@extend .button-tertiary; @extend .button-tertiary;
height: $s-32; height: $s-32;
width: calc($s-24 + $s-4); width: $s-28;
padding: 0; padding: 0;
border-radius: $br-8; border-radius: $br-8;
svg { svg {
@ -20,9 +20,13 @@
.colors-group { .colors-group {
margin-top: $s-4; margin-top: $s-4;
.asset-list { }
.asset-list {
padding: 0 0 0 $s-4; padding: 0 0 0 $s-4;
.asset-list-item { }
.asset-list-item {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@ -32,33 +36,7 @@
border-radius: $br-8; border-radius: $br-8;
background-color: var(--assets-item-background-color); background-color: var(--assets-item-background-color);
cursor: pointer; cursor: pointer;
.bullet-block {
@include flexCenter;
height: 100%;
justify-content: flex-start;
margin-right: $s-4;
}
.name-block {
@include titleTipography;
display: grid;
grid-template-columns: auto 1fr;
margin: 0;
overflow: hidden;
.default-name-only,
.name {
color: var(--assets-item-name-foreground-color-hover);
margin-right: $s-6;
@include textEllipsis;
}
.default-name {
min-width: 0;
color: var(--assets-item-name-foreground-color);
}
}
.element-name {
@include textEllipsis;
color: var(--color-foreground-primary);
}
&.selected { &.selected {
border: $s-1 solid var(--assets-item-border-color); border: $s-1 solid var(--assets-item-border-color);
} }
@ -79,17 +57,49 @@
&:hover { &:hover {
background-color: var(--assets-item-background-color-hover); background-color: var(--assets-item-background-color-hover);
} }
}
.bullet-block {
@include flexCenter;
height: 100%;
justify-content: flex-start;
margin-right: $s-4;
}
.name-block {
@include titleTipography;
display: grid;
grid-template-columns: auto 1fr;
margin: 0;
overflow: hidden;
.default-name-only,
.name {
color: var(--assets-item-name-foreground-color-hover);
margin-right: $s-6;
@include textEllipsis;
} }
.default-name {
min-width: 0;
color: var(--assets-item-name-foreground-color);
} }
.grid-placeholder { }
.element-name {
@include textEllipsis;
color: var(--color-foreground-primary);
}
.grid-placeholder {
height: $s-2; height: $s-2;
margin-bottom: $s-2; margin-bottom: $s-2;
background-color: var(--color-accent-primary); background-color: var(--color-accent-primary);
} }
.drop-space {
.drop-space {
height: $s-12; height: $s-12;
} }
.dragging {
.dragging {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -98,5 +108,4 @@
border-radius: $s-8; border-radius: $s-8;
background-color: var(--assets-item-background-color-drag); background-color: var(--assets-item-background-color-drag);
border: $s-2 solid var(--assets-item-border-color-drag); border: $s-2 solid var(--assets-item-border-color-drag);
}
} }

41
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View file

@ -6,7 +6,7 @@
(ns app.main.ui.workspace.sidebar.assets.common (ns app.main.ui.workspace.sidebar.assets.common
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.files.helpers :as cfh] [app.common.files.helpers :as cfh]
@ -22,7 +22,6 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.render :refer [component-svg component-svg-thumbnail]] [app.main.render :refer [component-svg component-svg-thumbnail]]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.context-menu :refer [context-menu]]
[app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]] [app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
@ -111,8 +110,6 @@
(mf/defc assets-context-menu (mf/defc assets-context-menu
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [options state on-close]}] [{:keys [options state on-close]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:& context-menu-a11y [:& context-menu-a11y
{:show (:open? state) {:show (:open? state)
:fixed? (or (not= (:top state) 0) (not= (:left state) 0)) :fixed? (or (not= (:top state) 0) (not= (:left state) 0))
@ -120,15 +117,7 @@
:top (:top state) :top (:top state)
:left (:left state) :left (:left state)
:options options :options options
:workspace? true}] :workspace? true}])
[:& context-menu
{:selectable false
:show (:open? state)
:on-close on-close
:top (:top state)
:left (:left state)
:options options}])))
(mf/defc section-icon (mf/defc section-icon
[{:keys [section] :as props}] [{:keys [section] :as props}]
@ -145,34 +134,24 @@
(filter some?)) (filter some?))
get-role #(.. % -props -role) get-role #(.. % -props -role)
title-buttons (filter #(= (get-role %) :title-button) children) title-buttons (filter #(= (get-role %) :title-button) children)
content (filter #(= (get-role %) :content) children) content (filter #(= (get-role %) :content) children)]
new-css-system (mf/use-ctx ctx/new-css-system)] [:div {:class (stl/css :asset-section)}
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :asset-section) true)}
[:& title-bar {:collapsable? true [:& title-bar {:collapsable? true
:collapsed? (not open?) :collapsed? (not open?)
:clickable-all? true :clickable-all? true
:on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?))) :on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?)))
:class (css :title-spacing) :class (stl/css :title-spacing)
:title (mf/html [:span {:class (dom/classnames (css :title-name) true)} :title (mf/html [:span {:class (stl/css :title-name)}
[:span {:class (dom/classnames (css :section-icon) true)} [:span {:class (stl/css :section-icon)}
[:& section-icon {:section section}]] [:& section-icon {:section section}]]
[:span {:class (dom/classnames (css :section-name) true)} [:span {:class (stl/css :section-name)}
title] title]
[:span {:class (dom/classnames (css :num-assets) true)} [:span {:class (stl/css :num-assets)}
assets-count]])} assets-count]])}
title-buttons] title-buttons]
(when ^boolean open? (when ^boolean open?
content)] content)]))
[:div.asset-section
[:div.asset-title {:class (when (not ^boolean open?) "closed")}
[:span {:on-click #(st/emit! (dw/set-assets-section-open file-id section (not open?)))}
i/arrow-slide title]
[:span.num-assets (dm/str "\u00A0(") assets-count ")"] ;; Unicode 00A0 is non-breaking space
title-buttons]
(when ^boolean open?
content)])))
(mf/defc asset-section-block (mf/defc asset-section-block
[{:keys [children]}] [{:keys [children]}]

20
frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
View file

@ -6,14 +6,15 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.asset-section { .title-name {
.title-name {
@include tabTitleTipography; @include tabTitleTipography;
display: flex; display: flex;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
.section-icon { }
.section-icon {
@include flexCenter; @include flexCenter;
padding-right: $s-2; padding-right: $s-2;
svg { svg {
@ -23,19 +24,20 @@
color: transparent; color: transparent;
fill: none; fill: none;
} }
} }
.section-name {
.section-name {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 $s-2; margin: 0 $s-2;
} }
.num-assets {
.num-assets {
@include flexCenter; @include flexCenter;
height: 100%; height: 100%;
padding-left: $s-8; padding-left: $s-8;
}
}
} }
.title-spacing { .title-spacing {
margin-bottom: $s-4; margin-bottom: $s-4;
} }

189
frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.assets.components (ns app.main.ui.workspace.sidebar.assets.components
(:require-macros [app.main.style :as stl :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
@ -77,7 +77,6 @@
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
components-v2 (mf/use-ctx ctx/components-v2) components-v2 (mf/use-ctx ctx/components-v2)
new-css-system (mf/use-ctx ctx/new-css-system)
component-id (:id component) component-id (:id component)
visible? (h/use-visible item-ref :once? true) visible? (h/use-visible item-ref :once? true)
@ -144,51 +143,8 @@
(mf/deps on-context-menu component-id) (mf/deps on-context-menu component-id)
(partial on-context-menu component-id))] (partial on-context-menu component-id))]
(if ^boolean new-css-system
[:div {:ref item-ref [:div {:ref item-ref
:class (dom/classnames :class (stl/css-case :selected (contains? selected (:id component))
(css :selected) (contains? selected (:id component))
(css :grid-cell) listing-thumbs?
(css :enum-item) (not listing-thumbs?))
:id (dm/str "component-shape-id-" (:id component))
:draggable (not read-only?)
:on-click on-component-click
:on-double-click on-component-double-click
:on-context-menu on-context-menu
:on-drag-start on-component-drag-start
:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
(when (and (some? root-shape)
(some? container))
[:*
(let [renaming? (= renaming (:id component))]
[:*
[:& editable-label
{:class (dom/classnames
(css :cell-name) listing-thumbs?
(css :item-name) (not listing-thumbs?)
(css :editing) renaming?)
:value (cfh/merge-path-item (:path component) (:name component))
:tooltip (cfh/merge-path-item (:path component) (:name component))
:display-value (:name component)
:editing renaming?
:disable-dbl-click true
:on-change do-rename
:on-cancel cancel-rename}]
(when ^boolean dragging?
[:div {:class (dom/classnames (css :dragging) true)}])])
[:& cmm/component-item-thumbnail {:file-id file-id
:root-shape root-shape
:component component
:container container}]])]
[:div {:ref item-ref
:class (dom/classnames
:selected (contains? selected (:id component))
:grid-cell listing-thumbs? :grid-cell listing-thumbs?
:enum-item (not listing-thumbs?)) :enum-item (not listing-thumbs?))
:id (dm/str "component-shape-id-" (:id component)) :id (dm/str "component-shape-id-" (:id component))
@ -201,20 +157,13 @@
:on-drag-leave on-drag-leave :on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default :on-drag-over dom/prevent-default
:on-drop on-drop} :on-drop on-drop}
(when (and (some? root-shape) (when (and (some? root-shape)
(some? container)) (some? container))
[:* [:*
(when visible?
[:& cmm/component-item-thumbnail {:file-id file-id
:root-shape root-shape
:component component
:container container}])
(let [renaming? (= renaming (:id component))] (let [renaming? (= renaming (:id component))]
[:* [:*
[:& editable-label [:& editable-label
{:class (dom/classnames {:class (stl/css-case :cell-name listing-thumbs?
:cell-name listing-thumbs?
:item-name (not listing-thumbs?) :item-name (not listing-thumbs?)
:editing renaming?) :editing renaming?)
:value (cfh/merge-path-item (:path component) (:name component)) :value (cfh/merge-path-item (:path component) (:name component))
@ -226,7 +175,13 @@
:on-cancel cancel-rename}] :on-cancel cancel-rename}]
(when ^boolean dragging? (when ^boolean dragging?
[:div.dragging])])])]))) [:div {:class (stl/css :dragging)}])])
(when visible?
[:& cmm/component-item-thumbnail {:file-id file-id
:root-shape root-shape
:component component
:container container}])])]))
(mf/defc components-group (mf/defc components-group
{::mf/wrap-props false} {::mf/wrap-props false}
@ -236,7 +191,6 @@
(let [group-open? (or ^boolean force-open? (let [group-open? (or ^boolean force-open?
^boolean (get open-groups prefix (if (= prefix "") true false))) ^boolean (get open-groups prefix (if (= prefix "") true false)))
new-css-system (mf/use-ctx ctx/new-css-system)
dragging* (mf/use-state false) dragging* (mf/use-state false)
dragging? (deref dragging*) dragging? (deref dragging*)
@ -266,8 +220,7 @@
(when (and local (:local? @drag-data*)) (when (and local (:local? @drag-data*))
(cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-component-and-main-instance))))] (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-component-and-main-instance))))]
(if ^boolean new-css-system [:div {:class (stl/css :component-group)
[:div {:class (dom/classnames (css :component-group) true)
:on-drag-enter on-drag-enter :on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave :on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default :on-drag-over dom/prevent-default
@ -284,87 +237,7 @@
(when group-open? (when group-open?
[:* [:*
(let [components (get groups "" [])] (let [components (get groups "" [])]
[:div {:class-name (dom/classnames [:div {:class-name (stl/css-case :asset-grid listing-thumbs?
(css :asset-grid) listing-thumbs?
(css :asset-enum) (not listing-thumbs?)
(css :drop-space) (and
(empty? components)
(some? groups)
(not dragging?)
local))
:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
(when ^boolean dragging?
[:div {:class (dom/classnames (css :grid-placeholder) true)} "\u00A0"])
(when (and (empty? components)
(some? groups)
local)
[:div {:class (dom/classnames (css :drop-space) true)}])
(for [component components]
[:& components-item
{:component component
:key (dm/str "component-" (:id component))
:renaming renaming
:listing-thumbs? listing-thumbs?
:file-id file-id
:selected selected
:selected-full selected-full
:selected-paths selected-paths
:on-asset-click on-asset-click
:on-context-menu on-context-menu
:on-drag-start on-drag-start
:on-group on-group
:do-rename do-rename
:cancel-rename cancel-rename
:local local}])])
(for [[path-item content] groups]
(when-not (empty? path-item)
[:& components-group {:file-id file-id
:key path-item
:prefix (cfh/merge-path-item prefix path-item)
:groups content
:open-groups open-groups
:force-open? force-open?
:renaming renaming
:listing-thumbs? listing-thumbs?
:selected selected
:on-asset-click on-asset-click
:on-drag-start on-drag-start
:do-rename do-rename
:cancel-rename cancel-rename
:on-rename-group on-rename-group
:on-ungroup on-ungroup
:on-context-menu on-context-menu
:selected-full selected-full
:local local}]))])]
[:div {:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:& grp/asset-group-title
{:file-id file-id
:section :components
:path prefix
:group-open? group-open?
:on-rename on-rename-group
:on-ungroup on-ungroup}]
(when group-open?
[:*
(let [components (get groups "" [])]
[:div {:class-name (dom/classnames
:asset-grid listing-thumbs?
:big listing-thumbs?
:asset-enum (not listing-thumbs?) :asset-enum (not listing-thumbs?)
:drop-space (and :drop-space (and
(empty? components) (empty? components)
@ -377,12 +250,13 @@
:on-drop on-drop} :on-drop on-drop}
(when ^boolean dragging? (when ^boolean dragging?
[:div.grid-placeholder "\u00A0"]) [:div {:class (stl/css :grid-placeholder)} "\u00A0"])
(when (and (empty? components) (when (and (empty? components)
(some? groups) (some? groups)
local) local)
[:div.drop-space]) [:div {:class (stl/css :drop-space)}])
(for [component components] (for [component components]
[:& components-item [:& components-item
@ -421,7 +295,7 @@
:on-ungroup on-ungroup :on-ungroup on-ungroup
:on-context-menu on-context-menu :on-context-menu on-context-menu
:selected-full selected-full :selected-full selected-full
:local local}]))])]))) :local local}]))])]))
(mf/defc components-section (mf/defc components-section
{::mf/wrap-props false} {::mf/wrap-props false}
@ -446,7 +320,6 @@
menu-state (mf/use-state cmm/initial-context-menu-state) menu-state (mf/use-state cmm/initial-context-menu-state)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
components-v2 (mf/use-ctx ctx/components-v2) components-v2 (mf/use-ctx ctx/components-v2)
new-css-system (mf/use-ctx ctx/new-css-system)
toggle-list-style (mf/use-ctx cmm/assets-toggle-list-style) toggle-list-style (mf/use-ctx cmm/assets-toggle-list-style)
selected (:components selected) selected (:components selected)
@ -623,7 +496,6 @@
:section :components :section :components
:assets-count (count components) :assets-count (count components)
:open? open?} :open? open?}
(if ^boolean new-css-system
[:& cmm/asset-section-block {:role :title-button} [:& cmm/asset-section-block {:role :title-button}
[:* [:*
(when open? (when open?
@ -640,21 +512,12 @@
(when (and components-v2 (not read-only?) local?) (when (and components-v2 (not read-only?) local?)
[:div {:on-click add-component [:div {:on-click add-component
:class (dom/classnames (css :add-component) true)} :class (stl/css :add-component)}
i/add-refactor i/add-refactor
[:& file-uploader {:accept cm/str-image-types [:& file-uploader {:accept cm/str-image-types
:multi true :multi true
:ref input-ref :ref input-ref
:on-selected on-file-selected}]])]] :on-selected on-file-selected}]])]]
(when local?
[:& cmm/asset-section-block {:role :title-button}
(when (and components-v2 (not read-only?))
[:div.assets-button {:on-click add-component}
i/plus
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref
:on-selected on-file-selected}]])]))
[:& cmm/asset-section-block {:role :content} [:& cmm/asset-section-block {:role :content}
(when ^boolean open? (when ^boolean open?
@ -680,8 +543,7 @@
[:& cmm/assets-context-menu [:& cmm/assets-context-menu
{:on-close on-close-menu {:on-close on-close-menu
:state @menu-state :state @menu-state
:options (if new-css-system :options [(when (and local? (not (or multi-components? multi-assets? read-only?)))
[(when (and local? (not (or multi-components? multi-assets? read-only?)))
{:option-name (tr "workspace.assets.rename") {:option-name (tr "workspace.assets.rename")
:id "assets-rename-component" :id "assets-rename-component"
:option-handler on-rename}) :option-handler on-rename})
@ -704,18 +566,5 @@
(when (and components-v2 (not multi-assets?)) (when (and components-v2 (not multi-assets?))
{:option-name (tr "workspace.shape.menu.show-main") {:option-name (tr "workspace.shape.menu.show-main")
:id "assets-show-main-component" :id "assets-show-main-component"
:option-handler on-show-main})] :option-handler on-show-main})]}]]]))
[(when (and local? (not (or multi-components? multi-assets? read-only?)))
[(tr "workspace.assets.rename") on-rename])
(when (and local? (not (or multi-assets? read-only?)))
[(if components-v2
(tr "workspace.assets.duplicate-main")
(tr "workspace.assets.duplicate")) on-duplicate])
(when (and local? (not read-only?))
[(tr "workspace.assets.delete") on-delete])
(when (and local? (not (or multi-assets? read-only?)))
[(tr "workspace.assets.group") on-group])
(when (and components-v2 (not multi-assets?))
[(tr "workspace.shape.menu.show-main") on-show-main])])}]]]))

39
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

@ -6,17 +6,18 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.component-group { .drop-space {
.drop-space {
height: $s-12; height: $s-12;
} }
.asset-grid { .asset-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-auto-rows: calc(10vh + $s-16); grid-auto-rows: calc(10vh + $s-16);
gap: $s-4; gap: $s-4;
margin-left: $s-8; margin-left: $s-8;
.grid-cell { }
.grid-cell {
@include flexCenter; @include flexCenter;
position: relative; position: relative;
padding: $s-8; padding: $s-8;
@ -99,17 +100,19 @@
&.selected { &.selected {
border: $s-4 solid var(--assets-item-border-color); border: $s-4 solid var(--assets-item-border-color);
} }
} }
.grid-placeholder {
.grid-placeholder {
width: 100%; width: 100%;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--assets-item-background-color-drag); background-color: var(--assets-item-background-color-drag);
border: $s-2 solid var(--assets-item-border-color-drag); border: $s-2 solid var(--assets-item-border-color-drag);
} }
}
.asset-enum { .asset-enum {
margin: 0 $s-12; margin: 0 $s-12;
.enum-item { }
.enum-item {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@ -187,19 +190,20 @@
&.selected { &.selected {
border: $s-1 solid var(--assets-item-border-color); border: $s-1 solid var(--assets-item-border-color);
} }
} }
.grid-placeholder {
.grid-placeholder {
height: $s-2; height: $s-2;
width: 100%; width: 100%;
background-color: var(--color-accent-primary); background-color: var(--color-accent-primary);
}
}
} }
.listing-options { .listing-options {
display: flex; display: flex;
align-items: center; align-items: center;
}
.listing-option-btn { .listing-option-btn {
@include flexCenter; @include flexCenter;
cursor: pointer; cursor: pointer;
background-color: var(--button-radio-background-color-rest); background-color: var(--button-radio-background-color-rest);
@ -211,8 +215,8 @@
svg { svg {
@extend .button-icon; @extend .button-icon;
} }
}
} }
.add-component { .add-component {
@extend .button-tertiary; @extend .button-tertiary;
height: $s-32; height: $s-32;
@ -224,6 +228,7 @@
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
:global(.three-row) { :global(.three-row) {
.asset-grid { .asset-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);

148
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.assets.file-library (ns app.main.ui.workspace.sidebar.assets.file-library
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
@ -40,62 +40,41 @@
(mf/defc file-library-title (mf/defc file-library-title
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [open? local? shared? project-id file-id page-id file-name]}] [{:keys [open? local? project-id file-id page-id file-name]}]
(let [router (mf/deref refs/router) (let [router (mf/deref refs/router)
url (rt/resolve router :workspace url (rt/resolve router :workspace
{:project-id project-id {:project-id project-id
:file-id file-id} :file-id file-id}
{:page-id page-id}) {:page-id page-id})
new-css-system (mf/use-ctx ctx/new-css-system)
toggle-open toggle-open
(mf/use-fn (mf/use-fn
(mf/deps file-id open?) (mf/deps file-id open?)
(fn [] (fn []
(st/emit! (dw/set-assets-section-open file-id :library (not open?)))))] (st/emit! (dw/set-assets-section-open file-id :library (not open?)))))]
(if ^boolean new-css-system [:div {:class (stl/css :library-title)}
[:div {:class (dom/classnames (css :library-title) true)}
[:& title-bar {:collapsable? true [:& title-bar {:collapsable? true
:collapsed? (not open?) :collapsed? (not open?)
:clickable-all? true :clickable-all? true
:on-collapsed toggle-open :on-collapsed toggle-open
:title (if local? :title (if local?
(mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")]) (mf/html [:div {:class (stl/css :special-title)}
(tr "workspace.assets.local-library")])
;; Do we need to add shared info here?
(mf/html [:div {:class (dom/classnames (css :special-title) true)} file-name]))} (mf/html [:div {:class (stl/css :special-title)}
file-name]))}
(when-not local? (when-not local?
[:span.tool-link.tooltip.tooltip-left {:alt "Open library file"} [:span.tool-link.tooltip.tooltip-left {:alt "Open library file"}
[:a {:class (dom/classnames (css :file-link) true) [:a {:class (dom/classnames true)
:href (str "#" url) :href (str "#" url)
:target "_blank" :target "_blank"
:on-click dom/stop-propagation} :on-click dom/stop-propagation}
i/open-link-refactor]])]] i/open-link-refactor]])]]))
[:div.tool-window-bar.library-bar
{:on-click toggle-open}
[:div.collapse-library
{:class (dom/classnames :open open?)}
i/arrow-slide]
(if local?
[:*
[:span.library-title (tr "workspace.assets.local-library")]
(when shared?
[:span.shared-library {:alt (tr "workspace.assets.shared-library") :title (tr "workspace.assets.shared-library")}
i/library]
)]
[:*
[:span.library-title {:title file-name} file-name]
[:span.tool-link {:alt (tr "workspace.assets.open-library") :title (tr "workspace.assets.open-library")}
[:a {:href (str "#" url)
:target "_blank"
:on-click dom/stop-propagation}
i/chain]]])])))
(mf/defc file-library-content (mf/defc file-library-content
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [file local? open-status-ref on-clear-selection]}] [{:keys [file local? open-status-ref on-clear-selection]}]
(let [components-v2 (mf/use-ctx ctx/components-v2) (let [components-v2 (mf/use-ctx ctx/components-v2)
new-css-system (mf/use-ctx ctx/new-css-system)
open-status (mf/deref open-status-ref) open-status (mf/deref open-status-ref)
file-id (:id file) file-id (:id file)
@ -111,9 +90,6 @@
reverse-sort? (= :desc filters-ordering) reverse-sort? (= :desc filters-ordering)
listing-thumbs? (= :thumbs filters-list-style) listing-thumbs? (= :thumbs filters-list-style)
toggle-ordering (mf/use-ctx cmm/assets-toggle-ordering)
toggle-list-style (mf/use-ctx cmm/assets-toggle-list-style)
library-ref (mf/with-memo [file-id] library-ref (mf/with-memo [file-id]
(create-file-library-ref file-id)) (create-file-library-ref file-id))
@ -155,10 +131,6 @@
(l/derived lens:selected))) (l/derived lens:selected)))
selected (mf/deref selected-lens) selected (mf/deref selected-lens)
selected-count (+ (count (get selected :components))
(count (get selected :graphics))
(count (get selected :colors))
(count (get selected :typographies)))
has-term? (not ^boolean (str/empty? filters-term)) has-term? (not ^boolean (str/empty? filters-term))
force-open-components? (when ^boolean has-term? (> 60 (count components))) force-open-components? (when ^boolean has-term? (> 60 (count components)))
@ -246,8 +218,7 @@
(st/emit! (dwu/commit-undo-transaction undo-id)))))] (st/emit! (dwu/commit-undo-transaction undo-id)))))]
(if ^boolean new-css-system [:div {:class (stl/css :library-content)}
[:div {:class (dom/classnames (css :library-content) true)}
(when ^boolean show-components? (when ^boolean show-components?
[:& components-section [:& components-section
{:file-id file-id {:file-id file-id
@ -316,96 +287,11 @@
(not ^boolean show-graphics?) (not ^boolean show-graphics?)
(not ^boolean show-colors?) (not ^boolean show-colors?)
(not ^boolean show-typography?)) (not ^boolean show-typography?))
[:div {:class (css :asset-title)} [:div {:class (stl/css :asset-title)}
[:span {:class (css :no-found-icon)} [:span {:class (stl/css :no-found-icon)}
i/search-refactor] i/search-refactor]
[:span {:class (css :no-found-text)} [:span {:class (stl/css :no-found-text)}
(tr "workspace.assets.not-found")]])] (tr "workspace.assets.not-found")]])]))
[:div.tool-window-content
[:div.listing-options
(when (> selected-count 0)
[:span.selected-count
(tr "workspace.assets.selected-count" (i18n/c selected-count))])
[:div.listing-option-btn.first {:on-click toggle-ordering}
(if reverse-sort?
i/sort-ascending
i/sort-descending)]
[:div.listing-option-btn {:on-click toggle-list-style}
(if listing-thumbs?
i/listing-enum
i/listing-thumbs)]]
(when ^boolean show-components?
[:& components-section
{:file-id file-id
:local? local?
:components components
:listing-thumbs? listing-thumbs?
:open? (or ^boolean force-open-components?
^boolean (get open-status :components false))
:force-open? force-open-components?
:open-status-ref open-status-ref
:reverse-sort? reverse-sort?
:selected selected
:on-asset-click on-component-click
:on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection}])
(when ^boolean show-graphics?
[:& graphics-section
{:file-id file-id
:project-id project-id
:local? local?
:objects media
:listing-thumbs? listing-thumbs?
:open? (or ^boolean force-open-graphics?
^boolean (get open-status :graphics false))
:force-open? force-open-graphics?
:open-status-ref open-status-ref
:reverse-sort? reverse-sort?
:selected selected
:on-asset-click on-graphics-click
:on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection}])
(when ^boolean show-colors?
[:& colors-section
{:file-id file-id
:local? local?
:colors colors
:open? (or ^boolean force-open-colors?
^boolean (get open-status :colors false))
:force-open? force-open-colors?
:open-status-ref open-status-ref
:reverse-sort? reverse-sort?
:selected selected
:on-asset-click on-colors-click
:on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection}])
(when ^boolean show-typography?
[:& typographies-section
{:file file
:file-id (:id file)
:local? local?
:typographies typographies
:open? (or ^boolean force-open-typographies?
^boolean (get open-status :typographies false))
:force-open? force-open-typographies?
:open-status-ref open-status-ref
:reverse-sort? reverse-sort?
:selected selected
:on-asset-click on-typography-click
:on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection}])
(when (and (not ^boolean show-components?)
(not ^boolean show-graphics?)
(not ^boolean show-colors?)
(not ^boolean show-typography?))
[:div.asset-section
[:div.asset-title
(tr "workspace.assets.not-found")]])])))
(mf/defc file-library (mf/defc file-library
@ -416,7 +302,6 @@
shared? (:is-shared file) shared? (:is-shared file)
project-id (:project-id file) project-id (:project-id file)
page-id (dm/get-in file [:data :pages 0]) page-id (dm/get-in file [:data :pages 0])
new-css-system (mf/use-ctx ctx/new-css-system)
open-status-ref (mf/with-memo [file-id] open-status-ref (mf/with-memo [file-id]
(-> (l/key file-id) (-> (l/key file-id)
@ -429,8 +314,7 @@
(mf/deps file-id) (mf/deps file-id)
(fn [] (fn []
(st/emit! (dw/unselect-all-assets file-id))))] (st/emit! (dw/unselect-all-assets file-id))))]
[:div {:class (dom/classnames (css :tool-window) new-css-system [:div {:class (stl/css :tool-window)
:tool-window (not new-css-system))
:on-context-menu dom/prevent-default :on-context-menu dom/prevent-default
:on-click unselect-all} :on-click unselect-all}
[:& file-library-title [:& file-library-title

23
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
View file

@ -8,24 +8,24 @@
.tool-window { .tool-window {
margin-bottom: $s-24; margin-bottom: $s-24;
} }
.library-title {
.file-name { .file-name {
@include titleTipography; @include titleTipography;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex-grow: 100; flex-grow: 100;
height: 100%; height: 100%;
} }
.special-title { .special-title {
@include textEllipsis; @include textEllipsis;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
margin-left: $s-2; margin-left: $s-2;
text-align: left; text-align: left;
} }
.file-link { .file-link {
@extend .button-tertiary; @extend .button-tertiary;
height: $s-32; height: $s-32;
width: $s-28; width: $s-28;
@ -35,8 +35,8 @@
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
fill: var(--title-foreground-color-hover); fill: var(--title-foreground-color-hover);
} }
}
} }
.library-content { .library-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -53,7 +53,9 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: $s-8; gap: $s-8;
.no-found-icon { }
.no-found-icon {
@include flexCenter; @include flexCenter;
background-color: var(--not-found-background-color); background-color: var(--not-found-background-color);
border-radius: $br-circle; border-radius: $br-circle;
@ -65,10 +67,9 @@
width: $s-24; width: $s-24;
stroke: var(--not-found-foreground-color); stroke: var(--not-found-foreground-color);
} }
} }
.no-found-text { .no-found-text {
@include titleTipography; @include titleTipography;
color: var(--not-found-foreground-color); color: var(--not-found-foreground-color);
}
} }

61
frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
View file

@ -14,7 +14,6 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.forms :as fm] [app.main.ui.components.forms :as fm]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -27,7 +26,6 @@
(when-not (empty? path) (when-not (empty? path)
(let [[other-path last-path truncated] (cfh/compact-path path 35 true) (let [[other-path last-path truncated] (cfh/compact-path path 35 true)
menu-state (mf/use-state cmm/initial-context-menu-state) menu-state (mf/use-state cmm/initial-context-menu-state)
new-css-system (mf/use-ctx ctx/new-css-system)
on-fold-group on-fold-group
(mf/use-fn (mf/use-fn
(mf/deps file-id section path group-open?) (mf/deps file-id section path group-open?)
@ -46,7 +44,6 @@
on-close-menu on-close-menu
(mf/use-fn #(swap! menu-state cmm/close-context-menu))] (mf/use-fn #(swap! menu-state cmm/close-context-menu))]
(if new-css-system
[:div {:class (stl/css :group-title) [:div {:class (stl/css :group-title)
:on-context-menu on-context-menu} :on-context-menu on-context-menu}
[:& title-bar {:collapsable? true [:& title-bar {:collapsable? true
@ -68,23 +65,7 @@
:option-handler #(on-rename % path last-path)} :option-handler #(on-rename % path last-path)}
{:option-name (tr "workspace.assets.ungroup") {:option-name (tr "workspace.assets.ungroup")
:id "assets-ungroup-group" :id "assets-ungroup-group"
:option-handler #(on-ungroup path)}]}]] :option-handler #(on-ungroup path)}]}]])))
[:div.group-title {:class (when-not group-open? "closed")
:on-click on-fold-group
:on-context-menu on-context-menu}
[:span i/arrow-slide]
(when-not (empty? other-path)
[:span.dim {:title (when truncated path)}
other-path "\u00A0/\u00A0"])
[:span {:title (when truncated path)}
last-path]
[:& cmm/assets-context-menu
{:on-close on-close-menu
:state @menu-state
:options [[(tr "workspace.assets.rename") #(on-rename % path last-path)]
[(tr "workspace.assets.ungroup") #(on-ungroup path)]]}]]))))
(defn group-assets (defn group-assets
"Convert a list of assets in a nested structure like this: "Convert a list of assets in a nested structure like this:
@ -120,8 +101,7 @@
::mf/register-as :name-group-dialog} ::mf/register-as :name-group-dialog}
[{:keys [path last-path accept] :as ctx [{:keys [path last-path accept] :as ctx
:or {path "" last-path ""}}] :or {path "" last-path ""}}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [initial (mf/use-memo
initial (mf/use-memo
(mf/deps last-path) (mf/deps last-path)
(constantly {:asset-name last-path})) (constantly {:asset-name last-path}))
form (fm/use-form :spec ::name-group-form form (fm/use-form :spec ::name-group-form
@ -142,7 +122,6 @@
(accept asset-name) (accept asset-name)
(accept path asset-name)) (accept path asset-name))
(modal/hide!))))] (modal/hide!))))]
(if new-css-system
[:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)} [:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
@ -172,39 +151,7 @@
[:input [:input
{:type "button" {:type "button"
:class (stl/css-case :accept-btn true :class (stl/css-case :accept-btn true
:global/disabled (not (:valid @form) )) :global/disabled (not (:valid @form)))
:disabled (not (:valid @form)) :disabled (not (:valid @form))
:value (if create? (tr "labels.create") (tr "labels.rename")) :value (if create? (tr "labels.create") (tr "labels.rename"))
:on-click on-accept}]]]]] :on-click on-accept}]]]]]))
[:div.modal-overlay
[:div.modal-container.confirm-dialog
[:div.modal-header
[:div.modal-header-title
[:h2 (if create?
(tr "workspace.assets.create-group")
(tr "workspace.assets.rename-group"))]]
[:div.modal-close-button
{:on-click on-close} i/close]]
[:div.modal-content.generic-form
[:& fm/form {:form form :on-submit on-accept}
[:& fm/input {:name :asset-name
:auto-focus? true
:label (tr "workspace.assets.group-name")
:hint (tr "workspace.assets.create-group-hint")}]]]
[:div.modal-footer
[:div.action-buttons
[:input.cancel-button
{:type "button"
:value (tr "labels.cancel")
:on-click on-close}]
[:input.accept-button.primary
{:type "button"
:class (when-not (:valid @form) "btn-disabled")
:disabled (not (:valid @form))
:value (if create? (tr "labels.create") (tr "labels.rename"))
:on-click on-accept}]]]]])))

53
frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
View file

@ -8,52 +8,57 @@
.group-title { .group-title {
padding-left: $s-4; padding-left: $s-4;
.pre-path { }
.pre-path {
margin-left: $s-2; margin-left: $s-2;
text-transform: initial; text-transform: initial;
color: var(--title-foreground-color); color: var(--title-foreground-color);
} }
.path {
.path {
margin-left: $s-2; margin-left: $s-2;
text-transform: initial; text-transform: initial;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
}
} }
.modal-overlay { .modal-overlay {
@extend .modal-overlay-base; @extend .modal-overlay-base;
.modal-container { }
.modal-container {
@extend .modal-container-base; @extend .modal-container-base;
.modal-header { }
.modal-header {
margin-bottom: $s-24; margin-bottom: $s-24;
.modal-title { }
.modal-title {
@include tabTitleTipography; @include tabTitleTipography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.modal-close-btn { .modal-close-btn {
@extend .modal-close-btn-base; @extend .modal-close-btn-base;
} }
}
.modal-content { .modal-content {
@include titleTipography; @include titleTipography;
margin-bottom: $s-24; margin-bottom: $s-24;
.input-wrapper { }
.input-wrapper {
@extend .input-with-label; @extend .input-with-label;
} }
} .action-buttons {
.modal-footer {
.action-buttons {
@extend .modal-action-btns; @extend .modal-action-btns;
.cancel-button { }
.cancel-button {
@extend .modal-cancel-btn; @extend .modal-cancel-btn;
} }
.accept-btn {
.accept-btn {
@extend .modal-accept-btn; @extend .modal-accept-btn;
&.danger { &.danger {
@extend .modal-danger-btn; @extend .modal-danger-btn;
} }
}
}
}
}
} }

124
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
View file

@ -46,7 +46,6 @@
dragging? (deref dragging*) dragging? (deref dragging*)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
editing? (= editing-id (:id typography)) editing? (= editing-id (:id typography))
renaming? (= renaming-id (:id typography)) renaming? (= renaming-id (:id typography))
@ -100,7 +99,6 @@
(mf/deps typography apply-typography on-asset-click) (mf/deps typography apply-typography on-asset-click)
(partial on-asset-click typography-id apply-typography))] (partial on-asset-click typography-id apply-typography))]
(if ^boolean new-css-system
[:div {:class (stl/css :typography-item) [:div {:class (stl/css :typography-item)
:ref item-ref :ref item-ref
:draggable (and (not read-only?) (not open?)) :draggable (and (not read-only?) (not open?))
@ -123,29 +121,7 @@
:external-open* open* :external-open* open*
:file-id file-id}] :file-id file-id}]
(when ^boolean dragging? (when ^boolean dragging?
[:div {:class (stl/css :dragging)}])] [:div {:class (stl/css :dragging)}])]))
[:div.typography-container {:ref item-ref
:draggable (and (not read-only?) (not open?))
:on-drag-start on-typography-drag-start
:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:& typography-entry
{:typography typography
:local? local?
:on-context-menu on-context-menu
:on-change handle-change
:selected? (contains? selected typography-id)
:on-click on-asset-click
:editing? editing?
:focus-name? rename?
:external-open* open*
:file-id file-id}]
(when ^boolean dragging?
[:div.dragging])])))
(mf/defc typographies-group (mf/defc typographies-group
{::mf/wrap-props false} {::mf/wrap-props false}
@ -155,7 +131,6 @@
(let [group-open? (get open-groups prefix true) (let [group-open? (get open-groups prefix true)
dragging* (mf/use-state false) dragging* (mf/use-state false)
dragging? (deref dragging*) dragging? (deref dragging*)
new-css-system (mf/use-ctx ctx/new-css-system)
selected-paths (mf/with-memo [selected-full] selected-paths (mf/with-memo [selected-full]
(into #{} (into #{}
(comp (map :path) (d/nilv "")) (comp (map :path) (d/nilv ""))
@ -183,7 +158,6 @@
(fn [event] (fn [event]
(cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-typography)))] (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-typography)))]
(if ^boolean new-css-system
[:div {:class (stl/css :typographies-group) [:div {:class (stl/css :typographies-group)
:on-drag-enter on-drag-enter :on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave :on-drag-leave on-drag-leave
@ -249,68 +223,7 @@
:on-rename-group on-rename-group :on-rename-group on-rename-group
:on-ungroup on-ungroup :on-ungroup on-ungroup
:on-context-menu on-context-menu :on-context-menu on-context-menu
:selected-full selected-full}]))])] :selected-full selected-full}]))])]))
[:div {:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:& grp/asset-group-title {:file-id file-id
:section :typographies
:path prefix
:group-open? group-open?
:on-rename on-rename-group
:on-ungroup on-ungroup}]
(when group-open?
[:*
(let [typographies (get groups "" [])]
[:div.asset-list {:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
(when ^boolean dragging?
[:div.grid-placeholder "\u00A0"])
(when (and
(empty? typographies)
(some? groups))
[:div.drop-space])
(for [{:keys [id] :as typography} typographies]
[:& typography-item {:typography typography
:key (dm/str "typography-" id)
:file-id file-id
:local? local?
:handle-change handle-change
:selected selected
:apply-typography apply-typography
:editing-id editing-id
:rename? (= (:rename-typography local-data) id)
:on-asset-click on-asset-click
:on-context-menu on-context-menu
:selected-full selected-full
:selected-paths selected-paths
:move-typography move-typography}])])
(for [[path-item content] groups]
(when-not (empty? path-item)
[:& typographies-group {:file-id file-id
:prefix (cfh/merge-path-item prefix path-item)
:key (dm/str "group-" path-item)
:groups content
:open-groups open-groups
:force-open? force-open?
:file file
:local? local?
:selected selected
:editing-id editing-id
:local-data local-data
:on-asset-click on-asset-click
:handle-change handle-change
:apply-typography apply-typography
:on-rename-group on-rename-group
:on-ungroup on-ungroup
:on-context-menu on-context-menu
:selected-full selected-full}]))])])))
(mf/defc typographies-section (mf/defc typographies-section
{::mf/wrap-props false} {::mf/wrap-props false}
@ -320,7 +233,6 @@
local-data (mf/deref lens:typography-section-state) local-data (mf/deref lens:typography-section-state)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
menu-state (mf/use-state cmm/initial-context-menu-state) menu-state (mf/use-state cmm/initial-context-menu-state)
typographies (mf/with-memo [typographies] typographies (mf/with-memo [typographies]
(mapv dwl/extract-path-if-missing typographies)) (mapv dwl/extract-path-if-missing typographies))
@ -465,10 +377,7 @@
(dwl/sync-file file-id file-id :typographies (:id @state)) (dwl/sync-file file-id file-id :typographies (:id @state))
(dwu/commit-undo-transaction undo-id)))))) (dwu/commit-undo-transaction undo-id))))))
editing-id (if new-css-system editing-id (:edit-typography local-data)
(:edit-typography local-data)
(or (:rename-typography local-data)
(:edit-typography local-data)))
renaming-id (:rename-typography local-data) renaming-id (:rename-typography local-data)
@ -478,10 +387,8 @@
(partial on-asset-click groups))] (partial on-asset-click groups))]
(mf/use-effect (mf/use-effect
(mf/deps local-data new-css-system) (mf/deps local-data )
(fn [] (fn []
(when (and (not new-css-system)(:rename-typography local-data))
(st/emit! #(update % :workspace-global dissoc :rename-typography)))
(when (:edit-typography local-data) (when (:edit-typography local-data)
(st/emit! #(update % :workspace-global dissoc :edit-typography))))) (st/emit! #(update % :workspace-global dissoc :edit-typography)))))
@ -491,7 +398,6 @@
:section :typographies :section :typographies
:assets-count (count typographies) :assets-count (count typographies)
:open? open?} :open? open?}
(if ^boolean new-css-system
(when local? (when local?
[:& cmm/asset-section-block {:role :title-button} [:& cmm/asset-section-block {:role :title-button}
(when-not read-only? (when-not read-only?
@ -499,12 +405,6 @@
:on-click add-typography} :on-click add-typography}
i/add-refactor])]) i/add-refactor])])
(when local?
[:& cmm/asset-section-block {:role :title-button}
(when-not read-only?
[:div.assets-button {:on-click add-typography}
i/plus])]))
[:& cmm/asset-section-block {:role :content} [:& cmm/asset-section-block {:role :content}
[:& typographies-group {:file-id file-id [:& typographies-group {:file-id file-id
:prefix "" :prefix ""
@ -530,8 +430,7 @@
[:& cmm/assets-context-menu [:& cmm/assets-context-menu
{:on-close on-close-menu {:on-close on-close-menu
:state @menu-state :state @menu-state
:options (if new-css-system :options [(when-not (or multi-typographies? multi-assets?)
[(when-not (or multi-typographies? multi-assets?)
{:option-name (tr "workspace.assets.rename") {:option-name (tr "workspace.assets.rename")
:id "assets-rename-typography" :id "assets-rename-typography"
:option-handler handle-rename-typography-clicked}) :option-handler handle-rename-typography-clicked})
@ -548,20 +447,11 @@
(when-not multi-assets? (when-not multi-assets?
{:option-name (tr "workspace.assets.group") {:option-name (tr "workspace.assets.group")
:id "assets-group-typography" :id "assets-group-typography"
:option-handler on-group})] :option-handler on-group})]}]
[(when-not (or multi-typographies? multi-assets?)
[(tr "workspace.assets.rename") handle-rename-typography-clicked])
(when-not (or multi-typographies? multi-assets?)
[(tr "workspace.assets.edit") handle-edit-typography-clicked])
[(tr "workspace.assets.delete") handle-delete-typography]
(when-not multi-assets?
[(tr "workspace.assets.group") on-group])])}]
(when new-css-system
[:& cmm/assets-context-menu [:& cmm/assets-context-menu
{:on-close on-close-menu {:on-close on-close-menu
:state @menu-state :state @menu-state
:options [{:option-name "show info" :options [{:option-name "show info"
:id "assets-rename-typography" :id "assets-rename-typography"
:option-handler handle-edit-typography-clicked}]}]))]]])) :option-handler handle-edit-typography-clicked}]}])]]]))

25
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
View file

@ -17,26 +17,31 @@
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
.typographies-group {
.assets-list { .assets-list {
padding: 0 0 0 $s-4; padding: 0 0 0 $s-4;
.drop-space { }
.drop-space {
height: $s-12; height: $s-12;
} }
.grid-placeholder {
.grid-placeholder {
height: $s-2; height: $s-2;
width: 100%; width: 100%;
background-color: var(--color-accent-primary); background-color: var(--color-accent-primary);
} }
.typography-item {
.typography-item {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: $s-4; margin-bottom: $s-4;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--assets-item-background-color); background-color: var(--assets-item-background-color);
} }
.dragging {
.dragging {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -45,6 +50,4 @@
border: $s-2 solid var(--assets-item-border-color-drag); border: $s-2 solid var(--assets-item-border-color-drag);
border-radius: $s-8; border-radius: $s-8;
background-color: var(--assets-item-background-color-drag); background-color: var(--assets-item-background-color-drag);
}
}
} }