Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-15 08:21:40 -05:00
Code Issues 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
Show stats 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-secondary: var(--color-accent-secondary);
$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-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/sidebar";
@import "main/partials/sidebar-align-options";
@import "main/partials/sidebar-assets";
@import "main/partials/sidebar-document-history";
@import "main/partials/sidebar-element-options";
@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;
color: var(--modal-title-foreground-color);
text-transform: uppercase;
margin-bottom: $s-8;
input {
@extend .input-element;
color: var(--input-foreground-color-active);
@ -143,6 +143,7 @@
.hint {
@include titleTipography;
color: var(--modal-text-foreground-color);
width: 99%;
}

143
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.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -71,7 +70,6 @@
[]
(let [components-v2 (mf/use-ctx ctx/components-v2)
read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
filters* (mf/use-state
{:term ""
:section "all"
@ -104,17 +102,8 @@
on-search-term-change
(mf/use-fn
(mf/deps new-css-system)
(fn [event]
;; NOTE: When old-css-system is removed this function will recibe value and 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 ""))
(swap! filters* assoc :term event)))
on-section-filter-change
(mf/use-fn
@ -125,23 +114,12 @@
(dom/get-attribute $ "data-test")))]
(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
(mf/use-fn
(fn []
(modal/show! :libraries-dialog {})
(modal/allow-click-outside!)))
on-open-menu
(mf/use-fn #(swap! filters* update :open-menu not))
@ -175,86 +153,43 @@
:option-handler on-section-filter-change
:data-test "typographies"}]))]
(if ^boolean new-css-system
[:div {:class (stl/css :assets-bar)}
[:div {:class (stl/css :assets-header)}
(when-not ^boolean read-only?
[:button {:class (stl/css :libraries-button)
:on-click show-libraries-dialog}
[:span {:class (stl/css :libraries-icon)}
i/library-refactor]
(tr "workspace.assets.libraries")])
[:div {:class (stl/css :assets-bar)}
[:div {:class (stl/css :assets-header)}
(when-not ^boolean read-only?
[:button {:class (stl/css :libraries-button)
:on-click show-libraries-dialog}
[:span {:class (stl/css :libraries-icon)}
i/library-refactor]
(tr "workspace.assets.libraries")])
[:div {:class (stl/css :search-wrapper)}
[:& search-bar {:on-change on-search-term-change
:value term
:placeholder (tr "workspace.assets.search")}
[:button
{:on-click on-open-menu
:class (stl/css :section-button)}
i/filter-refactor]]
[:& context-menu-a11y
{:on-close on-menu-close
:selectable true
:selected section
:show menu-open?
:fixed? true
:min-width? true
:top 152
:left 64
:options options
:workspace? true}]
[:button {:class (stl/css :sort-button)
:on-click toggle-ordering}
(if reverse-sort?
i/asc-sort-refactor
i/desc-sort-refactor)]]]
[:div {:class (stl/css :search-wrapper)}
[:& search-bar {:on-change on-search-term-change
:value term
:placeholder (tr "workspace.assets.search")}
[:button
{:on-click on-open-menu
:class (stl/css :section-button)}
i/filter-refactor]]
[:& context-menu-a11y
{:on-close on-menu-close
:selectable true
:selected section
:show menu-open?
:fixed? true
:min-width? true
:top 152
:left 64
:options options
:workspace? true}]
[:button {:class (stl/css :sort-button)
:on-click toggle-ordering}
(if reverse-sort?
i/asc-sort-refactor
i/desc-sort-refactor)]]]
[:& (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 {:class (stl/css :libraries-wrapper)}
[:& assets-local-library {: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}]]]]]])))
[:& (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 {:class (stl/css :libraries-wrapper)}
[:& assets-local-library {:filters filters}]
[:& assets-libraries {:filters filters}]]]]]]))

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

@ -10,121 +10,129 @@
position: relative;
height: 100%;
overflow: hidden;
}
.libraries-button {
@include tabTitleTipography;
@extend .button-secondary;
gap: $s-2;
height: $s-32;
width: 100%;
border-radius: $s-8;
margin-bottom: $s-4;
.libraries-icon {
@include flexCenter;
width: $s-24;
height: 100%;
svg {
@include flexCenter;
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
&:hover {
background-color: var(--button-secondary-background-color-hover);
color: var(--button-secondary-foreground-color-hover);
border: $s-1 solid var(--button-secondary-border-color-hover);
svg {
stroke: var(--button-secondary-foreground-color-hover);
}
}
&:focus {
background-color: var(--button-secondary-background-color-focus);
color: var(--button-secondary-foreground-color-focus);
border: $s-1 solid var(--button-secondary-border-color-focus);
svg {
stroke: var(--button-secondary-foreground-color-focus);
}
}
}
.section-button {
.libraries-button {
@include tabTitleTipography;
@extend .button-secondary;
gap: $s-2;
height: $s-32;
width: 100%;
border-radius: $s-8;
margin-bottom: $s-4;
.libraries-icon {
@include flexCenter;
@include buttonStyle;
height: $s-32;
width: $s-32;
margin: 0;
border: 1px solid var(--color-background-tertiary);
border-radius: $br-8 $br-2 $br-2 $br-8;
background-color: var(--color-background-tertiary);
width: $s-24;
height: 100%;
svg {
height: $s-16;
width: $s-16;
@include flexCenter;
@extend .button-icon;
stroke: var(--icon-foreground);
}
&:focus {
border: 1px solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-active);
color: var(--input-foreground-color-active);
svg {
background-color: var(--input-background-color-active);
}
}
&:hover {
border: 1px solid var(--input-background-color-hover);
background-color: var(--input-background-color-hover);
svg {
background-color: var(--input-background-color-hover);
stroke: var(--button-foreground-hover);
}
}
&:hover {
background-color: var(--button-secondary-background-color-hover);
color: var(--button-secondary-foreground-color-hover);
border: $s-1 solid var(--button-secondary-border-color-hover);
svg {
stroke: var(--button-secondary-foreground-color-hover);
}
}
.sections-container {
@include menuShadow;
@include flexColumn;
position: absolute;
top: $s-84;
left: $s-12;
width: $s-192;
padding: $s-4;
border-radius: $br-8;
background-color: var(--menu-background-color);
z-index: $z-index-2;
.section-item {
@include titleTipography;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: $s-6;
border-radius: $br-8;
.section-btn {
@include buttonStyle;
}
}
}
.libraries-wrapper {
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
padding-left: $s-8;
height: calc(100vh - $s-180);
}
.assets-header {
padding: $s-8 $s-12 $s-12 $s-12;
.search-wrapper {
display: flex;
gap: $s-4;
.sort-button {
@extend .button-secondary;
width: $s-32;
border-radius: $br-8;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
&:focus {
background-color: var(--button-secondary-background-color-focus);
color: var(--button-secondary-foreground-color-focus);
border: $s-1 solid var(--button-secondary-border-color-focus);
svg {
stroke: var(--button-secondary-foreground-color-focus);
}
}
}
.section-button {
@include flexCenter;
@include buttonStyle;
height: $s-32;
width: $s-32;
margin: 0;
border: 1px solid var(--color-background-tertiary);
border-radius: $br-8 $br-2 $br-2 $br-8;
background-color: var(--color-background-tertiary);
svg {
height: $s-16;
width: $s-16;
stroke: var(--icon-foreground);
}
&:focus {
border: 1px solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-active);
color: var(--input-foreground-color-active);
svg {
background-color: var(--input-background-color-active);
}
}
&:hover {
border: 1px solid var(--input-background-color-hover);
background-color: var(--input-background-color-hover);
svg {
background-color: var(--input-background-color-hover);
stroke: var(--button-foreground-hover);
}
}
}
.sections-container {
@include menuShadow;
@include flexColumn;
position: absolute;
top: $s-84;
left: $s-12;
width: $s-192;
padding: $s-4;
border-radius: $br-8;
background-color: var(--menu-background-color);
z-index: $z-index-2;
}
.section-item {
@include titleTipography;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: $s-6;
border-radius: $br-8;
}
.section-btn {
@include buttonStyle;
}
.libraries-wrapper {
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
padding-left: $s-8;
height: calc(100vh - $s-180);
}
.assets-header {
padding: $s-8 $s-12 $s-12 $s-12;
}
.search-wrapper {
display: flex;
gap: $s-4;
}
.sort-button {
@extend .button-secondary;
width: $s-32;
border-radius: $br-8;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}

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

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.assets.colors
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
@ -18,7 +18,6 @@
[app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs]
[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.context :as ctx]
[app.main.ui.icons :as i]
@ -59,7 +58,6 @@
menu-state (mf/use-state cmm/initial-context-menu-state)
read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
default-name (cond
(:gradient color) (uc/gradient-type->string (dm/get-in color [:gradient :type]))
@ -193,113 +191,67 @@
(dom/select-text! input)
nil)))
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :asset-list-item) true
(css :selected) (contains? selected (:id color))
(css :editing) editing?)
:style #js {"--bullet-size" "16px"}
: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}
[:div {:class (stl/css-case :asset-list-item true
:selected (contains? selected (:id color))
:editing editing?)
:style #js {"--bullet-size" "16px"}
: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}
[:div {:class (dom/classnames (css :bullet-block) true)}
[:& cb/color-bullet {:color color
:mini? true}]]
[:div {:class (stl/css :bullet-block)}
[:& cb/color-bullet {:color color
:mini? true}]]
(if ^boolean editing?
[:input
{:type "text"
:class (dom/classnames (css :element-name) true)
: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))}]
(if ^boolean editing?
[:input
{:type "text"
:class (stl/css :element-name)
: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 {:title (:name color)
:class (dom/classnames (css :name-block) true)
:on-double-click rename-color-clicked}
[:div {:title (:name color)
:class (stl/css :name-block)
:on-double-click rename-color-clicked}
(if (= (:name color) default-name)
[:span {:class (dom/classnames (css :default-name-only) true)} default-name]
[:*
[:span {:class (dom/classnames (css :name) true)} (:name color)]
[:span {:class (dom/classnames (css :default-name) true)} default-name]])])
(if (= (:name color) default-name)
[:span {:class (stl/css :default-name-only)} default-name]
[:*
[:span {:class (stl/css :name)} (:name color)]
[:span {:class (stl/css :default-name)} default-name]])])
(when local?
[:& cmm/assets-context-menu
{:on-close on-close-menu
:state @menu-state
:options [(when-not (or multi-colors? multi-assets?)
{:option-name (tr "workspace.assets.rename")
:id "assets-rename-color"
:option-handler rename-color-clicked})
(when-not (or multi-colors? multi-assets?)
{:option-name (tr "workspace.assets.edit")
:id "assets-edit-color"
:option-handler edit-color-clicked})
(when local?
[:& cmm/assets-context-menu
{:on-close on-close-menu
:state @menu-state
:options [(when-not (or multi-colors? multi-assets?)
{:option-name (tr "workspace.assets.rename")
:id "assets-rename-color"
:option-handler rename-color-clicked})
(when-not (or multi-colors? multi-assets?)
{:option-name (tr "workspace.assets.edit")
:id "assets-edit-color"
:option-handler edit-color-clicked})
{:option-name (tr "workspace.assets.delete")
:id "assets-delete-color"
:option-handler delete-color}
(when-not multi-assets?
{:option-name (tr "workspace.assets.group")
:id "assets-group-color"
:option-handler (on-group (:id color))})]}])
{:option-name (tr "workspace.assets.delete")
:id "assets-delete-color"
:option-handler delete-color}
(when-not multi-assets?
{:option-name (tr "workspace.assets.group")
:id "assets-group-color"
:option-handler (on-group (:id color))})]}])
(when ^boolean dragging?
[:div {:class (dom/classnames (css :dragging) true)}])]
[: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])])))
(when ^boolean dragging?
[:div {:class (stl/css :dragging)}])]))
(mf/defc colors-group
[{:keys [file-id prefix groups open-groups force-open? local? selected
@ -308,7 +260,6 @@
selected-full]}]
(let [group-open? (or ^boolean force-open?
^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? (deref dragging*)
@ -338,136 +289,71 @@
(fn [event]
(cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-color)))]
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :colors-group) true)
: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 {:class (dom/classnames (css :asset-list) true)
:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:div {:class (stl/css :colors-group)
: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 {:class (stl/css :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 {:class (dom/classnames (css :grid-placeholder) true)}
"\u00A0"])
(when ^boolean dragging?
[:div {:class (stl/css :grid-placeholder)}
"\u00A0"])
(when (and (empty? colors)
(some? groups))
[:div {:class (dom/classnames (css :drop-space) true)}])
(when (and (empty? colors)
(some? groups))
[:div {:class (stl/css :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 [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}]))])]
[: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}]))])])))
(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
[{:keys [file-id local? colors open? force-open? open-status-ref selected reverse-sort?
@ -491,7 +377,6 @@
(grp/group-assets colors reverse-sort?))
read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
add-color
(mf/use-fn
(fn [value _]
@ -589,19 +474,12 @@
:section :colors
:assets-count (count colors)
:open? open?}
(if ^boolean new-css-system
(when local?
[:& cmm/asset-section-block {:role :title-button}
(when-not read-only?
[:button {:class (dom/classnames (css :assets-btn) true)
:on-click add-color-clicked}
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])]))
(when local?
[:& cmm/asset-section-block {:role :title-button}
(when-not read-only?
[:button {:class (stl/css :assets-btn)
:on-click add-color-clicked}
i/add-refactor])])
[:& cmm/asset-section-block {:role :content}

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

@ -9,7 +9,7 @@
.assets-btn {
@extend .button-tertiary;
height: $s-32;
width: calc($s-24 + $s-4);
width: $s-28;
padding: 0;
border-radius: $br-8;
svg {
@ -20,83 +20,92 @@
.colors-group {
margin-top: $s-4;
.asset-list {
padding: 0 0 0 $s-4;
.asset-list-item {
position: relative;
display: flex;
align-items: center;
height: $s-32;
padding: $s-8;
margin-bottom: $s-4;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
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 {
border: $s-1 solid var(--assets-item-border-color);
}
}
&.editing {
border: $s-1 solid var(--input-border-color-focus);
input.element-name {
@include textEllipsis;
@include titleTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
margin: 0;
color: var(--layer-row-foreground-color);
}
}
&:hover {
background-color: var(--assets-item-background-color-hover);
}
.asset-list {
padding: 0 0 0 $s-4;
}
.asset-list-item {
position: relative;
display: flex;
align-items: center;
height: $s-32;
padding: $s-8;
margin-bottom: $s-4;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
cursor: pointer;
&.selected {
border: $s-1 solid var(--assets-item-border-color);
}
&.editing {
border: $s-1 solid var(--input-border-color-focus);
input.element-name {
@include textEllipsis;
@include titleTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
margin: 0;
color: var(--layer-row-foreground-color);
}
}
.grid-placeholder {
height: $s-2;
margin-bottom: $s-2;
background-color: var(--color-accent-primary);
}
.drop-space {
height: $s-12;
}
.dragging {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: $s-8;
background-color: var(--assets-item-background-color-drag);
border: $s-2 solid var(--assets-item-border-color-drag);
&: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);
}
}
.element-name {
@include textEllipsis;
color: var(--color-foreground-primary);
}
.grid-placeholder {
height: $s-2;
margin-bottom: $s-2;
background-color: var(--color-accent-primary);
}
.drop-space {
height: $s-12;
}
.dragging {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: $s-8;
background-color: var(--assets-item-background-color-drag);
border: $s-2 solid var(--assets-item-border-color-drag);
}

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

@ -6,7 +6,7 @@
(ns app.main.ui.workspace.sidebar.assets.common
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.common.files.helpers :as cfh]
@ -22,7 +22,6 @@
[app.main.refs :as refs]
[app.main.render :refer [component-svg component-svg-thumbnail]]
[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.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
@ -111,24 +110,14 @@
(mf/defc assets-context-menu
{::mf/wrap-props false}
[{:keys [options state on-close]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:& context-menu-a11y
{:show (:open? state)
:fixed? (or (not= (:top state) 0) (not= (:left state) 0))
:on-close on-close
:top (:top state)
:left (:left state)
:options options
:workspace? true}]
[:& context-menu
{:selectable false
:show (:open? state)
:on-close on-close
:top (:top state)
:left (:left state)
:options options}])))
[:& context-menu-a11y
{:show (:open? state)
:fixed? (or (not= (:top state) 0) (not= (:left state) 0))
:on-close on-close
:top (:top state)
:left (:left state)
:options options
:workspace? true}])
(mf/defc section-icon
[{:keys [section] :as props}]
@ -145,34 +134,24 @@
(filter some?))
get-role #(.. % -props -role)
title-buttons (filter #(= (get-role %) :title-button) children)
content (filter #(= (get-role %) :content) children)
new-css-system (mf/use-ctx ctx/new-css-system)]
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :asset-section) true)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
:clickable-all? true
:on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?)))
:class (css :title-spacing)
:title (mf/html [:span {:class (dom/classnames (css :title-name) true)}
[:span {:class (dom/classnames (css :section-icon) true)}
[:& section-icon {:section section}]]
[:span {:class (dom/classnames (css :section-name) true)}
title]
content (filter #(= (get-role %) :content) children)]
[:div {:class (stl/css :asset-section)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
:clickable-all? true
:on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?)))
:class (stl/css :title-spacing)
:title (mf/html [:span {:class (stl/css :title-name)}
[:span {:class (stl/css :section-icon)}
[:& section-icon {:section section}]]
[:span {:class (stl/css :section-name)}
title]
[:span {:class (dom/classnames (css :num-assets) true)}
assets-count]])}
title-buttons]
(when ^boolean open?
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)])))
[:span {:class (stl/css :num-assets)}
assets-count]])}
title-buttons]
(when ^boolean open?
content)]))
(mf/defc asset-section-block
[{:keys [children]}]

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

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

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

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(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
[app.common.data :as d]
[app.common.data.macros :as dm]
@ -77,7 +77,6 @@
read-only? (mf/use-ctx ctx/workspace-read-only?)
components-v2 (mf/use-ctx ctx/components-v2)
new-css-system (mf/use-ctx ctx/new-css-system)
component-id (:id component)
visible? (h/use-visible item-ref :once? true)
@ -144,89 +143,45 @@
(mf/deps on-context-menu component-id)
(partial on-context-menu component-id))]
(if ^boolean new-css-system
[:div {:ref item-ref
:class (dom/classnames
(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))
[:*
[:div {:ref item-ref
:class (stl/css-case :selected (contains? selected (:id component))
:grid-cell listing-thumbs?
: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 (stl/css-case :cell-name listing-thumbs?
:item-name (not listing-thumbs?)
: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}]
(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 (stl/css :dragging)}])])
(when ^boolean dragging?
[:div {:class (dom/classnames (css :dragging) true)}])])
(when visible?
[:& 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?
: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))
[:*
(when visible?
[:& cmm/component-item-thumbnail {:file-id file-id
:root-shape root-shape
:component component
:container container}])
(let [renaming? (= renaming (:id component))]
[:*
[:& editable-label
{:class (dom/classnames
:cell-name listing-thumbs?
:item-name (not listing-thumbs?)
: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.dragging])])])])))
:container container}])])]))
(mf/defc components-group
{::mf/wrap-props false}
@ -236,7 +191,6 @@
(let [group-open? (or ^boolean force-open?
^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? (deref dragging*)
@ -266,162 +220,82 @@
(when (and local (:local? @drag-data*))
(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 (dom/classnames (css :component-group) true)
: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}]
[:div {:class (stl/css :component-group)
: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
(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 group-open?
[:*
(let [components (get groups "" [])]
[:div {:class-name (stl/css-case :asset-grid listing-thumbs?
:asset-enum (not listing-thumbs?)
: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 ^boolean dragging?
[:div {:class (stl/css :grid-placeholder)} "\u00A0"])
(when (and (empty? components)
(some? groups)
local)
[:div {:class (dom/classnames (css :drop-space) true)}])
(when (and (empty? components)
(some? groups)
local)
[:div {:class (stl/css :drop-space)}])
(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 [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?)
: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.grid-placeholder "\u00A0"])
(when (and (empty? components)
(some? groups)
local)
[:div.drop-space])
(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}]))])])))
(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}]))])]))
(mf/defc components-section
{::mf/wrap-props false}
@ -446,7 +320,6 @@
menu-state (mf/use-state cmm/initial-context-menu-state)
read-only? (mf/use-ctx ctx/workspace-read-only?)
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)
selected (:components selected)
@ -623,38 +496,28 @@
:section :components
:assets-count (count components)
:open? open?}
(if ^boolean new-css-system
[:& cmm/asset-section-block {:role :title-button}
[:*
(when open?
[:div {:class (stl/css :listing-options)}
[:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
:on-change toggle-list-style
:name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor
:value "list"
:id "opt-list"}]
[:& radio-button {:icon i/flex-grid-refactor
:value "grid"
:id "opt-grid"}]]])
[:& cmm/asset-section-block {:role :title-button}
[:*
(when open?
[:div {:class (stl/css :listing-options)}
[:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
:on-change toggle-list-style
:name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor
:value "list"
:id "opt-list"}]
[:& radio-button {:icon i/flex-grid-refactor
:value "grid"
:id "opt-grid"}]]])
(when (and components-v2 (not read-only?) local?)
[:div {:on-click add-component
:class (dom/classnames (css :add-component) true)}
i/add-refactor
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref
: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}]])]))
(when (and components-v2 (not read-only?) local?)
[:div {:on-click add-component
:class (stl/css :add-component)}
i/add-refactor
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref
:on-selected on-file-selected}]])]]
[:& cmm/asset-section-block {:role :content}
(when ^boolean open?
@ -680,42 +543,28 @@
[:& cmm/assets-context-menu
{:on-close on-close-menu
:state @menu-state
:options (if new-css-system
[(when (and local? (not (or multi-components? multi-assets? read-only?)))
{:option-name (tr "workspace.assets.rename")
:id "assets-rename-component"
:option-handler on-rename})
(when (and local? (not (or multi-assets? read-only?)))
{:option-name (if components-v2
(tr "workspace.assets.duplicate-main")
(tr "workspace.assets.duplicate"))
:id "assets-duplicate-component"
:option-handler on-duplicate})
:options [(when (and local? (not (or multi-components? multi-assets? read-only?)))
{:option-name (tr "workspace.assets.rename")
:id "assets-rename-component"
:option-handler on-rename})
(when (and local? (not (or multi-assets? read-only?)))
{:option-name (if components-v2
(tr "workspace.assets.duplicate-main")
(tr "workspace.assets.duplicate"))
:id "assets-duplicate-component"
:option-handler on-duplicate})
(when (and local? (not read-only?))
{:option-name (tr "workspace.assets.delete")
:id "assets-delete-component"
:option-handler on-delete})
(when (and local? (not (or multi-assets? read-only?)))
{:option-name (tr "workspace.assets.group")
:id "assets-group-component"
:option-handler on-group})
(when (and local? (not read-only?))
{:option-name (tr "workspace.assets.delete")
:id "assets-delete-component"
:option-handler on-delete})
(when (and local? (not (or multi-assets? read-only?)))
{:option-name (tr "workspace.assets.group")
:id "assets-group-component"
:option-handler on-group})
(when (and components-v2 (not multi-assets?))
{:option-name (tr "workspace.shape.menu.show-main")
:id "assets-show-main-component"
: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])])}]]]))
(when (and components-v2 (not multi-assets?))
{:option-name (tr "workspace.shape.menu.show-main")
:id "assets-show-main-component"
:option-handler on-show-main})]}]]]))

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

@ -6,213 +6,217 @@
@import "refactor/common-refactor.scss";
.component-group {
.drop-space {
height: $s-12;
}
.asset-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: calc(10vh + $s-16);
gap: $s-4;
margin-left: $s-8;
.grid-cell {
@include flexCenter;
position: relative;
padding: $s-8;
border: $s-4 solid transparent;
border-radius: $br-8;
background-color: var(--assets-component-background-color);
overflow: hidden;
cursor: pointer;
img {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
pointer-events: none;
}
svg {
height: 10vh;
}
.cell-name {
@include titleTipography;
@include textEllipsis;
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: $s-2;
&.editing {
display: flex;
align-items: center;
height: $s-32;
border: $s-1 solid var(--input-border-color-focus);
border-radius: $br-8;
background-color: var(--input-background-color);
input {
@include textEllipsis;
@include titleTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
padding-left: $s-6;
margin: 0;
border-radius: $br-8;
color: var(--input-foreground-color);
}
span {
@include flexCenter;
height: $s-28;
background-color: transparent;
border-radius: $br-8;
svg {
@extend .button-icon-small;
stroke: var(--input-foreground-color);
transform: rotate(90deg);
}
}
}
}
.drop-space {
height: $s-12;
}
.asset-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: calc(10vh + $s-16);
gap: $s-4;
margin-left: $s-8;
}
&:hover {
background-color: var(--assets-item-background-color-hover);
.cell-name {
display: block;
color: var(--assets-item-name-foreground-color-hover);
background: linear-gradient(to top, rgba(52, 57, 59, 1) 0%, rgba(52, 57, 59, 0) 100%);
&.editing {
display: flex;
background: var(--input-background-color);
input {
color: var(--input-foreground-color-active);
}
span svg {
stroke: var(--input-foreground-color-active);
}
}
}
}
&.selected {
border: $s-4 solid var(--assets-item-border-color);
}
}
.grid-placeholder {
width: 100%;
border-radius: $br-8;
background-color: var(--assets-item-background-color-drag);
border: $s-2 solid var(--assets-item-border-color-drag);
}
.grid-cell {
@include flexCenter;
position: relative;
padding: $s-8;
border: $s-4 solid transparent;
border-radius: $br-8;
background-color: var(--assets-component-background-color);
overflow: hidden;
cursor: pointer;
img {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
pointer-events: none;
}
.asset-enum {
margin: 0 $s-12;
.enum-item {
position: relative;
svg {
height: 10vh;
}
.cell-name {
@include titleTipography;
@include textEllipsis;
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: $s-2;
&.editing {
display: flex;
align-items: center;
height: $s-36;
margin-bottom: $s-4;
padding: $s-2;
height: $s-32;
border: $s-1 solid var(--input-border-color-focus);
border-radius: $br-8;
background-color: var(--assets-item-background-color);
cursor: pointer;
svg,
img {
@include flexCenter;
flex-shrink: 0;
padding: $s-2;
height: $s-32;
width: $s-32;
border-radius: $br-6;
background-color: var(--color-foreground-secondary);
}
.item-name {
@include titleTipography;
background-color: var(--input-background-color);
input {
@include textEllipsis;
padding-left: $s-8;
color: var(--assets-item-name-foreground-color);
&.editing {
display: flex;
align-items: center;
height: $s-32;
border: $s-1 solid var(--input-border-color-focus);
border-radius: $br-8;
background-color: var(--input-background-color);
input {
@include textEllipsis;
@include titleTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
padding-left: $s-6;
margin: 0;
border-radius: $br-8;
color: var(--input-foreground-color);
}
span {
@include flexCenter;
height: $s-28;
background-color: transparent;
border-radius: $br-8;
svg {
@extend .button-icon-small;
stroke: var(--input-foreground-color);
transform: rotate(90deg);
}
}
@include titleTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
padding-left: $s-6;
margin: 0;
border-radius: $br-8;
color: var(--input-foreground-color);
}
span {
@include flexCenter;
height: $s-28;
background-color: transparent;
border-radius: $br-8;
svg {
@extend .button-icon-small;
stroke: var(--input-foreground-color);
transform: rotate(90deg);
}
}
&:hover {
background-color: var(--assets-item-background-color-hover);
.item-name {
color: var(--assets-item-name-foreground-color-hover);
&.editing {
background: var(--input-background-color);
input {
color: var(--input-foreground-color-active);
}
span svg {
stroke: var(--input-foreground-color-active);
}
}
}
}
&.selected {
border: $s-1 solid var(--assets-item-border-color);
}
}
.grid-placeholder {
height: $s-2;
width: 100%;
background-color: var(--color-accent-primary);
}
}
&:hover {
background-color: var(--assets-item-background-color-hover);
.cell-name {
display: block;
color: var(--assets-item-name-foreground-color-hover);
background: linear-gradient(to top, rgba(52, 57, 59, 1) 0%, rgba(52, 57, 59, 0) 100%);
&.editing {
display: flex;
background: var(--input-background-color);
input {
color: var(--input-foreground-color-active);
}
span svg {
stroke: var(--input-foreground-color-active);
}
}
}
}
&.selected {
border: $s-4 solid var(--assets-item-border-color);
}
}
.grid-placeholder {
width: 100%;
border-radius: $br-8;
background-color: var(--assets-item-background-color-drag);
border: $s-2 solid var(--assets-item-border-color-drag);
}
.asset-enum {
margin: 0 $s-12;
}
.enum-item {
position: relative;
display: flex;
align-items: center;
height: $s-36;
margin-bottom: $s-4;
padding: $s-2;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
cursor: pointer;
svg,
img {
@include flexCenter;
flex-shrink: 0;
padding: $s-2;
height: $s-32;
width: $s-32;
border-radius: $br-6;
background-color: var(--color-foreground-secondary);
}
.item-name {
@include titleTipography;
@include textEllipsis;
padding-left: $s-8;
color: var(--assets-item-name-foreground-color);
&.editing {
display: flex;
align-items: center;
height: $s-32;
border: $s-1 solid var(--input-border-color-focus);
border-radius: $br-8;
background-color: var(--input-background-color);
input {
@include textEllipsis;
@include titleTipography;
@include removeInputStyle;
flex-grow: 1;
height: $s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
padding-left: $s-6;
margin: 0;
border-radius: $br-8;
color: var(--input-foreground-color);
}
span {
@include flexCenter;
height: $s-28;
background-color: transparent;
border-radius: $br-8;
svg {
@extend .button-icon-small;
stroke: var(--input-foreground-color);
transform: rotate(90deg);
}
}
}
}
&:hover {
background-color: var(--assets-item-background-color-hover);
.item-name {
color: var(--assets-item-name-foreground-color-hover);
&.editing {
background: var(--input-background-color);
input {
color: var(--input-foreground-color-active);
}
span svg {
stroke: var(--input-foreground-color-active);
}
}
}
}
&.selected {
border: $s-1 solid var(--assets-item-border-color);
}
}
.grid-placeholder {
height: $s-2;
width: 100%;
background-color: var(--color-accent-primary);
}
.listing-options {
display: flex;
align-items: center;
}
.listing-option-btn {
@include flexCenter;
cursor: pointer;
background-color: var(--button-radio-background-color-rest);
.listing-option-btn {
@include flexCenter;
cursor: pointer;
background-color: var(--button-radio-background-color-rest);
&.first {
margin-left: auto;
}
&.first {
margin-left: auto;
}
svg {
@extend .button-icon;
}
svg {
@extend .button-icon;
}
}
.add-component {
@extend .button-tertiary;
height: $s-32;
@ -224,6 +228,7 @@
stroke: var(--icon-foreground);
}
}
:global(.three-row) {
.asset-grid {
grid-template-columns: repeat(3, 1fr);

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

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.assets.file-library
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
@ -40,62 +40,41 @@
(mf/defc file-library-title
{::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)
url (rt/resolve router :workspace
{:project-id project-id
:file-id file-id}
{:page-id page-id})
new-css-system (mf/use-ctx ctx/new-css-system)
toggle-open
(mf/use-fn
(mf/deps file-id open?)
(fn []
(st/emit! (dw/set-assets-section-open file-id :library (not open?)))))]
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :library-title) true)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
:clickable-all? true
:on-collapsed toggle-open
:title (if local?
(mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")])
[:div {:class (stl/css :library-title)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
:clickable-all? true
:on-collapsed toggle-open
:title (if local?
(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]))}
(when-not local?
[:span.tool-link.tooltip.tooltip-left {:alt "Open library file"}
[:a {:class (dom/classnames (css :file-link) true)
:href (str "#" url)
:target "_blank"
:on-click dom/stop-propagation}
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/html [:div {:class (stl/css :special-title)}
file-name]))}
(when-not local?
[:span.tool-link.tooltip.tooltip-left {:alt "Open library file"}
[:a {:class (dom/classnames true)
:href (str "#" url)
:target "_blank"
:on-click dom/stop-propagation}
i/open-link-refactor]])]]))
(mf/defc file-library-content
{::mf/wrap-props false}
[{:keys [file local? open-status-ref on-clear-selection]}]
(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)
file-id (:id file)
@ -111,9 +90,6 @@
reverse-sort? (= :desc filters-ordering)
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]
(create-file-library-ref file-id))
@ -155,10 +131,6 @@
(l/derived lens:selected)))
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))
force-open-components? (when ^boolean has-term? (> 60 (count components)))
@ -246,166 +218,80 @@
(st/emit! (dwu/commit-undo-transaction undo-id)))))]
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :library-content) true)}
(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}])
[:div {:class (stl/css :library-content)}
(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-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-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 ^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 {:class (css :asset-title)}
[:span {:class (css :no-found-icon)}
i/search-refactor]
[:span {:class (css :no-found-text)}
(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")]])])))
(when (and (not ^boolean show-components?)
(not ^boolean show-graphics?)
(not ^boolean show-colors?)
(not ^boolean show-typography?))
[:div {:class (stl/css :asset-title)}
[:span {:class (stl/css :no-found-icon)}
i/search-refactor]
[:span {:class (stl/css :no-found-text)}
(tr "workspace.assets.not-found")]])]))
(mf/defc file-library
@ -416,7 +302,6 @@
shared? (:is-shared file)
project-id (:project-id file)
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]
(-> (l/key file-id)
@ -429,8 +314,7 @@
(mf/deps file-id)
(fn []
(st/emit! (dw/unselect-all-assets file-id))))]
[:div {:class (dom/classnames (css :tool-window) new-css-system
:tool-window (not new-css-system))
[:div {:class (stl/css :tool-window)
:on-context-menu dom/prevent-default
:on-click unselect-all}
[:& file-library-title

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

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

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

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

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

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

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

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

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

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