mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
♻️ Remove new-css-system from layers
This commit is contained in:
parent
831f79d651
commit
c707539f6f
16 changed files with 460 additions and 1315 deletions
|
@ -17,6 +17,9 @@ body {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
background-color: red; //debugger colors
|
||||||
|
color: #fabada; //debugger colors
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
|
|
|
@ -403,7 +403,6 @@
|
||||||
min-width: $s-16;
|
min-width: $s-16;
|
||||||
min-height: $s-16;
|
min-height: $s-16;
|
||||||
border-radius: $br-6;
|
border-radius: $br-6;
|
||||||
|
|
||||||
background-color: var(--input-checkbox-inactive-background-color);
|
background-color: var(--input-checkbox-inactive-background-color);
|
||||||
border-radius: $br-4;
|
border-radius: $br-4;
|
||||||
box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
|
box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
|
||||||
|
@ -451,6 +450,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: $s-6;
|
gap: $s-6;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: var(--input-checkbox-text-foreground-color);
|
||||||
span {
|
span {
|
||||||
@extend .checkbox-icon;
|
@extend .checkbox-icon;
|
||||||
}
|
}
|
||||||
|
|
|
@ -162,10 +162,11 @@
|
||||||
--input-checkbox-background-color-intermediate: var(--color-foreground-secondary);
|
--input-checkbox-background-color-intermediate: var(--color-foreground-secondary);
|
||||||
|
|
||||||
// Checkbox color
|
// Checkbox color
|
||||||
--input-checkbox-inactive-background-color: var(--off-white);
|
--input-checkbox-inactive-background-color: var(--color-foreground-secondary);
|
||||||
--input-checkbox-inactive-foreground-color: var(--color-background-primary);
|
--input-checkbox-inactive-foreground-color: var(--color-background-primary);
|
||||||
--input-checkbox-active-background-color: var(--color-accent-primary);
|
--input-checkbox-active-background-color: var(--color-accent-primary);
|
||||||
--input-checkbox-active-foreground-color: var(--color-background-primary);
|
--input-checkbox-active-foreground-color: var(--color-background-primary);
|
||||||
|
--input-checkbox-text-foreground-color: var(--color-foreground-secondary);
|
||||||
|
|
||||||
--menu-background-color: var(--color-background-tertiary);
|
--menu-background-color: var(--color-background-tertiary);
|
||||||
--menu-foreground-color: var(--color-foreground-primary);
|
--menu-foreground-color: var(--color-foreground-primary);
|
||||||
|
|
|
@ -75,15 +75,11 @@
|
||||||
@import "main/partials/loader";
|
@import "main/partials/loader";
|
||||||
@import "main/partials/project-bar";
|
@import "main/partials/project-bar";
|
||||||
@import "main/partials/sidebar";
|
@import "main/partials/sidebar";
|
||||||
@import "main/partials/sidebar-layers";
|
|
||||||
@import "main/partials/sidebar-align-options";
|
@import "main/partials/sidebar-align-options";
|
||||||
@import "main/partials/sidebar-assets";
|
@import "main/partials/sidebar-assets";
|
||||||
@import "main/partials/sidebar-document-history";
|
@import "main/partials/sidebar-document-history";
|
||||||
@import "main/partials/sidebar-element-options";
|
@import "main/partials/sidebar-element-options";
|
||||||
@import "main/partials/sidebar-icons";
|
|
||||||
@import "main/partials/sidebar-interactions";
|
@import "main/partials/sidebar-interactions";
|
||||||
@import "main/partials/sidebar-sitemap";
|
|
||||||
@import "main/partials/sidebar-tools";
|
|
||||||
@import "main/partials/tab-container";
|
@import "main/partials/tab-container";
|
||||||
@import "main/partials/tool-bar";
|
@import "main/partials/tool-bar";
|
||||||
@import "main/partials/user-settings";
|
@import "main/partials/user-settings";
|
||||||
|
|
|
@ -1,49 +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
|
|
||||||
|
|
||||||
.figures-catalog {
|
|
||||||
width: 100%;
|
|
||||||
padding: $size-4 $size-4 0 $size-4;
|
|
||||||
|
|
||||||
select {
|
|
||||||
color: $color-gray-10;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.figure-btn {
|
|
||||||
align-items: center;
|
|
||||||
background-color: $color-gray-60;
|
|
||||||
border-radius: $br3;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
flex-shrink: 0;
|
|
||||||
height: 54px;
|
|
||||||
justify-content: center;
|
|
||||||
margin: $size-4 0 0 $size-4;
|
|
||||||
width: 54px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-20;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-gray-10;
|
|
||||||
border-color: $color-gray-60;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
background-color: $color-primary;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,540 +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
|
|
||||||
|
|
||||||
.element-list-body {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
height: 32px;
|
|
||||||
padding: $size-1 $size-2;
|
|
||||||
transition: none;
|
|
||||||
width: 100%;
|
|
||||||
.toggle-content {
|
|
||||||
svg {
|
|
||||||
display: flex;
|
|
||||||
height: 13px;
|
|
||||||
width: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 4px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-20;
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .absolute {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
fill: $color-gray-20;
|
|
||||||
fill-opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected .icon .absolute svg {
|
|
||||||
fill: $color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .icon .absolute svg {
|
|
||||||
fill: $color-gray-60;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.group {
|
|
||||||
&.open {
|
|
||||||
.toggle-content {
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
transform: rotate(270deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.hover {
|
|
||||||
background-color: $color-primary;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-60 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-icon,
|
|
||||||
.element-actions {
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-60;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-actions > * {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: $color-gray-60;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
color: $color-white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-content {
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-60;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
background-color: $color-gray-60;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-icon {
|
|
||||||
svg {
|
|
||||||
fill: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: $color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-primary;
|
|
||||||
|
|
||||||
.element-icon,
|
|
||||||
.element-actions {
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-60;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-name {
|
|
||||||
color: $color-gray-60;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.drag-top {
|
|
||||||
border-top: 40px solid $color-gray-60 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.drag-bottom {
|
|
||||||
border-bottom: 40px solid $color-gray-60 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.drag-inside {
|
|
||||||
border: 2px solid $color-primary !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-list li.sticky {
|
|
||||||
> :first-child {
|
|
||||||
position: sticky;
|
|
||||||
top: 0px;
|
|
||||||
background-color: $color-gray-50;
|
|
||||||
z-index: 1;
|
|
||||||
&.selected {
|
|
||||||
background-color: #1f1f1f;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: #31efb8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-list li.component {
|
|
||||||
.element-list-body {
|
|
||||||
span.element-name {
|
|
||||||
color: $color-component;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-component;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
span.element-name {
|
|
||||||
color: $color-component-highlight;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-component-highlight;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-component-highlight;
|
|
||||||
|
|
||||||
span.element-name {
|
|
||||||
color: $color-gray-60;
|
|
||||||
}
|
|
||||||
input.element-name {
|
|
||||||
color: $color-white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-60;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-list li.masked > .element-children > li {
|
|
||||||
&:first-child {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: " ";
|
|
||||||
border-right: 1px solid $color-gray-40;
|
|
||||||
border-top: 1px solid $color-gray-40;
|
|
||||||
position: absolute;
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
top: -1px;
|
|
||||||
left: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sticky {
|
|
||||||
margin-top: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-left: none;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: " ";
|
|
||||||
border-left: 1px solid $color-gray-40;
|
|
||||||
border-bottom: 1px solid $color-gray-40;
|
|
||||||
height: 1rem;
|
|
||||||
width: 0.3rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-icon {
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-30;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input.element-name {
|
|
||||||
max-width: 75%;
|
|
||||||
margin-right: 5px;
|
|
||||||
background-color: $color-gray-50;
|
|
||||||
color: $color-white;
|
|
||||||
&:focus,
|
|
||||||
&:focus-within {
|
|
||||||
outline: none;
|
|
||||||
border: 1px solid $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.element-name {
|
|
||||||
color: $color-gray-20;
|
|
||||||
display: block;
|
|
||||||
font-size: $fs12;
|
|
||||||
max-width: 75%;
|
|
||||||
min-width: 40px;
|
|
||||||
min-height: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
flex: 1;
|
|
||||||
&.left-ellipsis {
|
|
||||||
direction: rtl; // hack for getting the ellipsis on the left side
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.element-name-touched {
|
|
||||||
color: $color-component;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-shrink: 0;
|
|
||||||
height: 14px;
|
|
||||||
margin-left: auto;
|
|
||||||
position: relative;
|
|
||||||
width: 32px;
|
|
||||||
|
|
||||||
&.is-parent {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
height: 13px;
|
|
||||||
width: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-element,
|
|
||||||
.block-element {
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-20;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-element {
|
|
||||||
left: 18px !important;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-30;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-content {
|
|
||||||
margin-left: 8px;
|
|
||||||
width: 12px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-20;
|
|
||||||
transform: rotate(90deg);
|
|
||||||
width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.inverse {
|
|
||||||
svg {
|
|
||||||
transform: rotate(270deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-60;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-layer {
|
|
||||||
> svg {
|
|
||||||
background-color: rgba(255, 255, 255, 0.6);
|
|
||||||
border-radius: $br3;
|
|
||||||
flex-shrink: 0;
|
|
||||||
fill: $color-black !important;
|
|
||||||
padding: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#layers {
|
|
||||||
.tool-window-bar,
|
|
||||||
.pages-tool-bar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 40px;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&.search {
|
|
||||||
margin-top: 8px;
|
|
||||||
padding: 8px;
|
|
||||||
.search-box {
|
|
||||||
border: 1px solid $color-gray-20;
|
|
||||||
border-radius: $br4;
|
|
||||||
height: 32px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
&:active,
|
|
||||||
&:focus-within {
|
|
||||||
border: 1px solid $color-primary;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
border: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: $color-gray-50;
|
|
||||||
color: $color-white;
|
|
||||||
font-size: $fs12;
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 0;
|
|
||||||
height: 16px;
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
height: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.filter,
|
|
||||||
.clear {
|
|
||||||
width: 35px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
&.active {
|
|
||||||
svg {
|
|
||||||
fill: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin: 0 2px 0 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.page-name {
|
|
||||||
padding: 8px;
|
|
||||||
margin-top: 8px;
|
|
||||||
color: #e3e3e3;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
max-width: 90%;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.icon-search {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
.focus-title {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: grid;
|
|
||||||
align-items: center;
|
|
||||||
grid-template-columns: 16px 1fr auto;
|
|
||||||
grid-column-gap: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.back-button {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
fill: $color-gray-20;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
svg {
|
|
||||||
fill: $color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus-name {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus-mode {
|
|
||||||
color: $color-primary;
|
|
||||||
border: 1px solid $color-primary;
|
|
||||||
border-radius: $br3;
|
|
||||||
font-size: $fs10;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: 0px 4px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.active-filters {
|
|
||||||
margin-top: 5px;
|
|
||||||
line-height: 26px; // Original value was 26px; 26px/11px = 236.363636364% => $lh-236 (rounded)
|
|
||||||
font-size: $fs11;
|
|
||||||
margin: 0 0.5rem;
|
|
||||||
span {
|
|
||||||
background-color: $color-primary;
|
|
||||||
color: $color-black;
|
|
||||||
padding: 3px 5px;
|
|
||||||
margin: 0 2px;
|
|
||||||
border: none;
|
|
||||||
border-radius: $br4;
|
|
||||||
cursor: pointer;
|
|
||||||
svg {
|
|
||||||
width: 7px;
|
|
||||||
height: 7px;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-container {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
top: 40px;
|
|
||||||
left: 8px;
|
|
||||||
background-color: $color-white;
|
|
||||||
color: $color-gray-50;
|
|
||||||
border-radius: $br4;
|
|
||||||
z-index: 1;
|
|
||||||
span {
|
|
||||||
padding: 10px 20px 10px 10px;
|
|
||||||
border-radius: $br4;
|
|
||||||
svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin-right: 10px;
|
|
||||||
vertical-align: middle;
|
|
||||||
fill: $color-gray-30;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-primary-lighter;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,89 +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
|
|
||||||
|
|
||||||
.add-page {
|
|
||||||
align-items: center;
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: $br3;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: auto;
|
|
||||||
padding: $size-1;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-20;
|
|
||||||
height: 0.7rem;
|
|
||||||
width: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-primary;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-60 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-actions {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: auto;
|
|
||||||
.layout-btns {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
.remove-layout {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 21px;
|
|
||||||
width: 21px;
|
|
||||||
padding: 4px;
|
|
||||||
svg {
|
|
||||||
height: 0.7rem;
|
|
||||||
width: 0.7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: $br3;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
color: $color-gray-20;
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-20;
|
|
||||||
height: 0.7rem;
|
|
||||||
width: 0.7rem;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
color: $color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-primary;
|
|
||||||
color: $color-gray-60;
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-60 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-set-title-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex: 1;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
.add-page {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,40 +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
|
|
||||||
|
|
||||||
.drawing-tools {
|
|
||||||
max-height: 185px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-btn {
|
|
||||||
align-items: center;
|
|
||||||
background-color: $color-gray-60;
|
|
||||||
border-radius: $br4;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
flex-shrink: 0;
|
|
||||||
height: 54px;
|
|
||||||
justify-content: center;
|
|
||||||
margin: $size-4 0 0 $size-4;
|
|
||||||
width: 54px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-gray-20;
|
|
||||||
height: 35px;
|
|
||||||
width: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-gray-10;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
background-color: $color-primary;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -327,10 +327,6 @@ button.collapse-sidebar {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#layers.tool-window {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layers-tab {
|
.layers-tab {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
|
|
|
@ -18,7 +18,6 @@
|
||||||
[app.main.data.workspace.collapse :as dwc]
|
[app.main.data.workspace.collapse :as dwc]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.components.shape-icon :as si]
|
|
||||||
[app.main.ui.components.shape-icon-refactor :as sic]
|
[app.main.ui.components.shape-icon-refactor :as sic]
|
||||||
[app.main.ui.context :as ctx]
|
[app.main.ui.context :as ctx]
|
||||||
[app.main.ui.hooks :as hooks]
|
[app.main.ui.hooks :as hooks]
|
||||||
|
@ -130,6 +129,7 @@
|
||||||
:type-comp component-tree?
|
:type-comp component-tree?
|
||||||
:type-frame (cfh/frame-shape? item)
|
:type-frame (cfh/frame-shape? item)
|
||||||
:hidden? hidden?}]
|
:hidden? hidden?}]
|
||||||
|
|
||||||
(when (not read-only?)
|
(when (not read-only?)
|
||||||
[:div {:class (stl/css-case
|
[:div {:class (stl/css-case
|
||||||
:element-actions true
|
:element-actions true
|
||||||
|
@ -159,11 +159,9 @@
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
|
[{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
|
||||||
(let [id (:id item)
|
(let [id (:id item)
|
||||||
name (:name item)
|
|
||||||
blocked? (:blocked item)
|
blocked? (:blocked item)
|
||||||
hidden? (:hidden item)
|
hidden? (:hidden item)
|
||||||
touched? (-> item :touched seq boolean)
|
|
||||||
has-shapes? (-> item :shapes seq boolean)
|
|
||||||
|
|
||||||
drag-disabled* (mf/use-state false)
|
drag-disabled* (mf/use-state false)
|
||||||
drag-disabled? (deref drag-disabled*)
|
drag-disabled? (deref drag-disabled*)
|
||||||
|
@ -179,14 +177,8 @@
|
||||||
|
|
||||||
container? (or (cfh/frame-shape? item)
|
container? (or (cfh/frame-shape? item)
|
||||||
(cfh/group-shape? item))
|
(cfh/group-shape? item))
|
||||||
absolute? (ctl/item-absolute? item)
|
|
||||||
|
|
||||||
components-v2 (mf/use-ctx ctx/components-v2)
|
|
||||||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
|
||||||
main-instance? (if components-v2
|
|
||||||
(:main-instance item)
|
|
||||||
true)
|
|
||||||
parent-board? (and (cfh/frame-shape? item)
|
parent-board? (and (cfh/frame-shape? item)
|
||||||
(= uuid/zero (:parent-id item)))
|
(= uuid/zero (:parent-id item)))
|
||||||
toggle-collapse
|
toggle-collapse
|
||||||
|
@ -346,7 +338,6 @@
|
||||||
#(when (some? subid)
|
#(when (some? subid)
|
||||||
(rx/dispose! subid))))
|
(rx/dispose! subid))))
|
||||||
|
|
||||||
(if new-css-system
|
|
||||||
[:& layer-item-inner
|
[:& layer-item-inner
|
||||||
{:ref dref
|
{:ref dref
|
||||||
:item item
|
:item item
|
||||||
|
@ -391,79 +382,4 @@
|
||||||
:sortable? sortable?
|
:sortable? sortable?
|
||||||
:depth depth
|
:depth depth
|
||||||
:parent-size parent-size
|
:parent-size parent-size
|
||||||
:component-child? component-tree?}]))])]
|
:component-child? component-tree?}]))])]))
|
||||||
|
|
||||||
;; ---- OLD CSS
|
|
||||||
[:li {:on-context-menu on-context-menu
|
|
||||||
:ref dref
|
|
||||||
:class (stl/css-case*
|
|
||||||
:component (some? (:component-id item))
|
|
||||||
:masked (:masked-group item)
|
|
||||||
:dnd-over (= (:over dprops) :center)
|
|
||||||
:dnd-over-top (= (:over dprops) :top)
|
|
||||||
:dnd-over-bot (= (:over dprops) :bot)
|
|
||||||
:selected selected?
|
|
||||||
:type-frame (cfh/frame-shape? item))}
|
|
||||||
|
|
||||||
[:div.element-list-body {:class (stl/css-case*
|
|
||||||
:selected selected?
|
|
||||||
:hover highlighted?
|
|
||||||
:icon-layer (= (:type item) :icon))
|
|
||||||
:on-click select-shape
|
|
||||||
:on-pointer-enter on-pointer-enter
|
|
||||||
:on-pointer-leave on-pointer-leave
|
|
||||||
:on-double-click dom/stop-propagation}
|
|
||||||
|
|
||||||
[:div.icon {:on-double-click zoom-to-selected}
|
|
||||||
(when ^boolean absolute?
|
|
||||||
[:div.absolute i/position-absolute])
|
|
||||||
[:& si/element-icon
|
|
||||||
{:shape item
|
|
||||||
:main-instance? main-instance?}]]
|
|
||||||
[:& layer-name {:ref ref
|
|
||||||
:parent-size parent-size
|
|
||||||
:shape-id id
|
|
||||||
:shape-name name
|
|
||||||
:shape-touched? touched?
|
|
||||||
:on-start-edit disable-drag
|
|
||||||
:on-stop-edit enable-drag
|
|
||||||
:disabled-double-click read-only?
|
|
||||||
:selected? selected?
|
|
||||||
:type-comp component-tree?
|
|
||||||
:type-frame (cfh/frame-shape? item)
|
|
||||||
:hidden? hidden?}]
|
|
||||||
|
|
||||||
[:div.element-actions {:class (when ^boolean has-shapes? "is-parent")}
|
|
||||||
[:div.toggle-element {:class (when ^boolean hidden? "selected")
|
|
||||||
:title (if (:hidden item)
|
|
||||||
(tr "workspace.shape.menu.show")
|
|
||||||
(tr "workspace.shape.menu.hide"))
|
|
||||||
:on-click toggle-visibility}
|
|
||||||
(if ^boolean hidden? i/eye-closed i/eye)]
|
|
||||||
[:div.block-element {:class (when ^boolean blocked? "selected")
|
|
||||||
:on-click toggle-blocking
|
|
||||||
:title (if (:blocked item)
|
|
||||||
(tr "workspace.shape.menu.unlock")
|
|
||||||
(tr "workspace.shape.menu.lock"))}
|
|
||||||
(if ^boolean blocked? i/lock i/unlock)]]
|
|
||||||
|
|
||||||
(when ^boolean has-shapes?
|
|
||||||
(when (not ^boolean filtered?)
|
|
||||||
[:span.toggle-content
|
|
||||||
{:on-click toggle-collapse
|
|
||||||
:class (when ^boolean expanded? "inverse")}
|
|
||||||
i/arrow-slide]))]
|
|
||||||
|
|
||||||
(when (and ^boolean has-shapes?
|
|
||||||
^boolean expanded?)
|
|
||||||
[:ul.element-children
|
|
||||||
(for [[index id] (reverse (d/enumerate (:shapes item)))]
|
|
||||||
(when-let [item (get objects id)]
|
|
||||||
[:& layer-item
|
|
||||||
{:item item
|
|
||||||
:selected selected
|
|
||||||
:highlighted highlighted
|
|
||||||
:index index
|
|
||||||
:objects objects
|
|
||||||
:key (dm/str id)
|
|
||||||
:sortable? sortable?}]))])])))
|
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--layer-row-background-color);
|
background-color: var(--layer-row-background-color);
|
||||||
border: 2px solid transparent;
|
border: $s-2 solid transparent;
|
||||||
|
|
||||||
&.highlight,
|
&.highlight,
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -20,7 +20,7 @@
|
||||||
--context-hover-opacity: $op-10;
|
--context-hover-opacity: $op-10;
|
||||||
background-color: var(--layer-row-background-color-hover);
|
background-color: var(--layer-row-background-color-hover);
|
||||||
color: var(--layer-row-foreground-color-hover);
|
color: var(--layer-row-foreground-color-hover);
|
||||||
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-hover);
|
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover);
|
||||||
&.hidden {
|
&.hidden {
|
||||||
opacity: $op-10;
|
opacity: $op-10;
|
||||||
}
|
}
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
&.selected {
|
&.selected {
|
||||||
background-color: var(--layer-row-background-color-selected);
|
background-color: var(--layer-row-background-color-selected);
|
||||||
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-selected);
|
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.selected.highlight,
|
&.selected.highlight,
|
||||||
|
@ -105,7 +105,6 @@
|
||||||
@include buttonStyle;
|
@include buttonStyle;
|
||||||
position: relative;
|
position: relative;
|
||||||
justify-self: flex-end;
|
justify-self: flex-end;
|
||||||
width: $s-16;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: $s-24;
|
width: $s-24;
|
||||||
padding: 0 $s-8 0 $s-4;
|
padding: 0 $s-8 0 $s-4;
|
||||||
|
@ -138,23 +137,23 @@
|
||||||
.absolute {
|
.absolute {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: var(--layer-row-foreground-color);
|
background-color: var(--layer-row-foreground-color);
|
||||||
opacity: $op-4;
|
|
||||||
width: $s-12;
|
|
||||||
height: $s-12;
|
height: $s-12;
|
||||||
|
width: $s-12;
|
||||||
border-radius: $br-2;
|
border-radius: $br-2;
|
||||||
|
opacity: $op-4;
|
||||||
|
|
||||||
.layer-row.hidden & {
|
.layer-row.hidden {
|
||||||
opacity: $op-1;
|
opacity: $op-1;
|
||||||
}
|
}
|
||||||
.layer-row.type-comp & {
|
.layer-row.type-comp {
|
||||||
background-color: var(--layer-row-component-foreground-color);
|
background-color: var(--layer-row-component-foreground-color);
|
||||||
}
|
}
|
||||||
.layer-row.highlight &,
|
.layer-row.highlight,
|
||||||
.layer-row:hover & {
|
.layer-row:hover {
|
||||||
opacity: $op-4;
|
opacity: $op-4;
|
||||||
background-color: var(--layer-row-foreground-color-hover);
|
background-color: var(--layer-row-foreground-color-hover);
|
||||||
}
|
}
|
||||||
.layer-row.selected & {
|
.layer-row.selected {
|
||||||
background-color: var(--layer-row-foreground-color-selected);
|
background-color: var(--layer-row-foreground-color-selected);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -166,29 +165,29 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: $s-24;
|
width: $s-24;
|
||||||
padding: 0 4px 0 8px;
|
padding: 0 $s-4 0 $s-8;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
@extend .button-icon-small;
|
@extend .button-icon-small;
|
||||||
stroke: var(--icon-foreground);
|
stroke: var(--icon-foreground);
|
||||||
|
|
||||||
.layer-row.hidden & {
|
.layer-row.hidden {
|
||||||
opacity: $op-7;
|
opacity: $op-7;
|
||||||
}
|
}
|
||||||
.layer-row.selected & {
|
.layer-row.selected {
|
||||||
stroke: var(--layer-row-foreground-color-selected);
|
stroke: var(--layer-row-foreground-color-selected);
|
||||||
}
|
}
|
||||||
.layer-row.type-comp & {
|
.layer-row.type-comp {
|
||||||
stroke: var(--layer-row-component-foreground-color);
|
stroke: var(--layer-row-component-foreground-color);
|
||||||
}
|
}
|
||||||
.layer-row.highlight &,
|
.layer-row.highlight,
|
||||||
.layer-row:hover & {
|
.layer-row:hover {
|
||||||
opacity: $op-10;
|
opacity: $op-10;
|
||||||
stroke: var(--layer-row-foreground-color-hover);
|
stroke: var(--layer-row-foreground-color-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-row.selected & {
|
.layer-row.selected {
|
||||||
background-color: var(--layer-row-background-color-selected);
|
background-color: var(--layer-row-background-color-selected);
|
||||||
}
|
}
|
||||||
&.inverse svg {
|
&.inverse svg {
|
||||||
|
@ -209,15 +208,15 @@
|
||||||
@extend .button-icon-small;
|
@extend .button-icon-small;
|
||||||
stroke: var(--icon-foreground);
|
stroke: var(--icon-foreground);
|
||||||
|
|
||||||
.layer-row.hidden & {
|
.layer-row.hidden {
|
||||||
opacity: $op-7;
|
opacity: $op-7;
|
||||||
}
|
}
|
||||||
.type-comp & {
|
.type-comp {
|
||||||
stroke: var(--layer-row-component-foreground-color);
|
stroke: var(--layer-row-component-foreground-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.element-actions.selected & {
|
.element-actions.selected {
|
||||||
display: flex;
|
display: flex;
|
||||||
opacity: $op-0;
|
opacity: $op-0;
|
||||||
|
|
||||||
|
@ -226,15 +225,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-row.highlight &,
|
.layer-row.highlight,
|
||||||
.layer-row:hover & {
|
.layer-row:hover {
|
||||||
display: flex;
|
display: flex;
|
||||||
svg {
|
svg {
|
||||||
opacity: $op-10;
|
opacity: $op-10;
|
||||||
stroke: var(--layer-row-foreground-color-hover);
|
stroke: var(--layer-row-foreground-color-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layer-row.selected & {
|
|
||||||
|
.layer-row.selected {
|
||||||
display: flex;
|
display: flex;
|
||||||
svg {
|
svg {
|
||||||
stroke: var(--layer-row-foreground-color-selected);
|
stroke: var(--layer-row-foreground-color-selected);
|
||||||
|
@ -244,8 +244,8 @@
|
||||||
|
|
||||||
:global(.sticky) {
|
:global(.sticky) {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0px;
|
top: $s-0;
|
||||||
z-index: 3;
|
z-index: $z-index-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-indentation {
|
.tab-indentation {
|
||||||
|
@ -253,6 +253,7 @@
|
||||||
height: $s-16;
|
height: $s-16;
|
||||||
min-width: calc(var(--depth) * var(--layer-indentation-size));
|
min-width: calc(var(--depth) * var(--layer-indentation-size));
|
||||||
}
|
}
|
||||||
|
|
||||||
.filtered {
|
.filtered {
|
||||||
min-width: $s-12;
|
min-width: $s-12;
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,6 @@
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.main.data.workspace :as dw]
|
[app.main.data.workspace :as dw]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.context :as ctx]
|
|
||||||
[app.util.debug :as dbg]
|
[app.util.debug :as dbg]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[app.util.keyboard :as kbd]
|
[app.util.keyboard :as kbd]
|
||||||
|
@ -38,7 +37,6 @@
|
||||||
ref (d/nilv external-ref local-ref)
|
ref (d/nilv external-ref local-ref)
|
||||||
|
|
||||||
shape-for-rename (mf/deref lens:shape-for-rename)
|
shape-for-rename (mf/deref lens:shape-for-rename)
|
||||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
|
||||||
|
|
||||||
has-path? (str/includes? shape-name "/")
|
has-path? (str/includes? shape-name "/")
|
||||||
|
|
||||||
|
@ -90,7 +88,8 @@
|
||||||
|
|
||||||
(if ^boolean edition?
|
(if ^boolean edition?
|
||||||
[:input
|
[:input
|
||||||
{:class (stl/css new-css-system :element-name :element-name-input)
|
{:class (stl/css :element-name
|
||||||
|
:element-name-input)
|
||||||
:style {"--depth" depth "--parent-size" parent-size}
|
:style {"--depth" depth "--parent-size" parent-size}
|
||||||
:type "text"
|
:type "text"
|
||||||
:ref ref
|
:ref ref
|
||||||
|
@ -100,20 +99,16 @@
|
||||||
:default-value (d/nilv shape-name "")}]
|
:default-value (d/nilv shape-name "")}]
|
||||||
[:*
|
[:*
|
||||||
[:span
|
[:span
|
||||||
{:class (if ^boolean new-css-system
|
{:class (stl/css-case
|
||||||
(stl/css-case
|
|
||||||
:element-name true
|
:element-name true
|
||||||
:left-ellipsis has-path?
|
:left-ellipsis has-path?
|
||||||
:selected selected?
|
:selected selected?
|
||||||
:hidden hidden?
|
:hidden hidden?
|
||||||
:type-comp type-comp
|
:type-comp type-comp
|
||||||
:type-frame type-frame)
|
:type-frame type-frame)
|
||||||
(stl/css-case
|
|
||||||
"element-name" true
|
|
||||||
:left-ellipsis has-path?))
|
|
||||||
:style {"--depth" depth "--parent-size" parent-size}
|
:style {"--depth" depth "--parent-size" parent-size}
|
||||||
:ref ref
|
:ref ref
|
||||||
:on-double-click start-edit}
|
:on-double-click start-edit}
|
||||||
(d/nilv shape-name "")]
|
(d/nilv shape-name "")]
|
||||||
(when (and (dbg/enabled? :show-touched) ^boolean shape-touched?)
|
(when (and (dbg/enabled? :show-touched) ^boolean shape-touched?)
|
||||||
[:span {:class (stl/css new-css-system :element-name-touched)} "*"])])))
|
[:span {:class (stl/css :element-name-touched)} "*"])])))
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: $s-6;
|
padding-left: $s-6;
|
||||||
border-radius: $br-8;
|
border-radius: $br-8;
|
||||||
border: 1px solid var(--input-border-color-focus);
|
border: $s-1 solid var(--input-border-color-focus);
|
||||||
color: var(--layer-row-foreground-color);
|
color: var(--layer-row-foreground-color);
|
||||||
}
|
}
|
||||||
.element-name-touched {
|
.element-name-touched {
|
||||||
|
|
|
@ -17,13 +17,11 @@
|
||||||
[app.main.ui.components.search-bar :refer [search-bar]]
|
[app.main.ui.components.search-bar :refer [search-bar]]
|
||||||
[app.main.ui.components.shape-icon-refactor :as sic]
|
[app.main.ui.components.shape-icon-refactor :as sic]
|
||||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||||
[app.main.ui.context :as ctx]
|
|
||||||
[app.main.ui.hooks :as hooks]
|
[app.main.ui.hooks :as hooks]
|
||||||
[app.main.ui.icons :as i]
|
[app.main.ui.icons :as i]
|
||||||
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
|
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[app.util.keyboard :as kbd]
|
|
||||||
[app.util.timers :as ts]
|
[app.util.timers :as ts]
|
||||||
[cuerdas.core :as str]
|
[cuerdas.core :as str]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
@ -45,10 +43,8 @@
|
||||||
selected (hooks/use-equal-memo selected)
|
selected (hooks/use-equal-memo selected)
|
||||||
highlighted (mf/deref refs/highlighted-shapes)
|
highlighted (mf/deref refs/highlighted-shapes)
|
||||||
highlighted (hooks/use-equal-memo highlighted)
|
highlighted (hooks/use-equal-memo highlighted)
|
||||||
root (get objects uuid/zero)
|
root (get objects uuid/zero)]
|
||||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
[:div {:class (stl/css :element-list)}
|
||||||
[:div
|
|
||||||
{:class (stl/css new-css-system :element-list)}
|
|
||||||
[:& hooks/sortable-container {}
|
[:& hooks/sortable-container {}
|
||||||
(for [[index id] (reverse (d/enumerate (:shapes root)))]
|
(for [[index id] (reverse (d/enumerate (:shapes root)))]
|
||||||
(when-let [obj (get objects id)]
|
(when-let [obj (get objects id)]
|
||||||
|
@ -82,9 +78,8 @@
|
||||||
[{:keys [objects parent-size]}]
|
[{:keys [objects parent-size]}]
|
||||||
(let [selected (mf/deref refs/selected-shapes)
|
(let [selected (mf/deref refs/selected-shapes)
|
||||||
selected (hooks/use-equal-memo selected)
|
selected (hooks/use-equal-memo selected)
|
||||||
root (get objects uuid/zero)
|
root (get objects uuid/zero)]
|
||||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
[:ul {:class (stl/css :element-list)}
|
||||||
[:ul {:class (stl/css new-css-system :element-list)}
|
|
||||||
(for [[index id] (d/enumerate (:shapes root))]
|
(for [[index id] (d/enumerate (:shapes root))]
|
||||||
(when-let [obj (get objects id)]
|
(when-let [obj (get objects id)]
|
||||||
[:& layer-item
|
[:& layer-item
|
||||||
|
@ -140,8 +135,7 @@
|
||||||
|
|
||||||
(defn use-search
|
(defn use-search
|
||||||
[page objects]
|
[page objects]
|
||||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
(let [state* (mf/use-state
|
||||||
state* (mf/use-state
|
|
||||||
{:show-search false
|
{:show-search false
|
||||||
:show-menu false
|
:show-menu false
|
||||||
:search-text ""
|
:search-text ""
|
||||||
|
@ -164,13 +158,7 @@
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
#(swap! state* update :show-menu not))
|
#(swap! state* update :show-menu not))
|
||||||
|
|
||||||
update-search-text-v1
|
update-search-text
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(let [value (-> event dom/get-target dom/get-value)]
|
|
||||||
(swap! state* assoc :search-text value :num-items 100))))
|
|
||||||
|
|
||||||
update-search-text-v2
|
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(fn [value _event]
|
(fn [value _event]
|
||||||
(swap! state* assoc :search-text value :num-items 100)))
|
(swap! state* assoc :search-text value :num-items 100)))
|
||||||
|
@ -236,57 +224,29 @@
|
||||||
(mf/deps filtered-objects-total current-items)
|
(mf/deps filtered-objects-total current-items)
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(when (<= current-items filtered-objects-total)
|
(when (<= current-items filtered-objects-total)
|
||||||
(swap! state* update :num-items + 100))))
|
(swap! state* update :num-items + 100))))]
|
||||||
|
|
||||||
handle-key-down
|
|
||||||
(mf/use-fn
|
|
||||||
(fn [event]
|
|
||||||
(when-let [node (dom/get-target event)]
|
|
||||||
(when (kbd/enter? event)
|
|
||||||
(dom/blur! node))
|
|
||||||
(when (kbd/esc? event)
|
|
||||||
(dom/blur! node)))))]
|
|
||||||
|
|
||||||
[filtered-objects
|
[filtered-objects
|
||||||
handle-show-more
|
handle-show-more
|
||||||
#(mf/html
|
#(mf/html
|
||||||
(if show-search?
|
(if show-search?
|
||||||
[:*
|
[:*
|
||||||
[:div {:class (stl/css new-css-system :tool-window-bar :search)}
|
[:div {:class (stl/css :tool-window-bar :search)}
|
||||||
(if ^boolean new-css-system
|
[:& search-bar {:on-change update-search-text
|
||||||
[:& search-bar
|
|
||||||
{:on-change update-search-text-v2
|
|
||||||
:value current-search
|
:value current-search
|
||||||
:on-clear clear-search-text
|
:on-clear clear-search-text
|
||||||
:placeholder (tr "workspace.sidebar.layers.search")}
|
:placeholder (tr "workspace.sidebar.layers.search")}
|
||||||
[:button
|
[:button {:on-click toggle-filters
|
||||||
{:on-click toggle-filters
|
|
||||||
:class (stl/css-case
|
:class (stl/css-case
|
||||||
:filter-button true
|
:filter-button true
|
||||||
:active active?)}
|
:active active?)}
|
||||||
i/filter-refactor]]
|
i/filter-refactor]]
|
||||||
|
|
||||||
[:span.search-box
|
[:button {:class (stl/css :close-search)
|
||||||
[:button.filter
|
|
||||||
{:on-click toggle-filters
|
|
||||||
:class (stl/css-case :active active?)}
|
|
||||||
i/icon-filter]
|
|
||||||
[:div
|
|
||||||
[:input {:on-change update-search-text-v1
|
|
||||||
:value current-search
|
|
||||||
:auto-focus show-search?
|
|
||||||
:placeholder (tr "workspace.sidebar.layers.search")
|
|
||||||
:on-key-down handle-key-down}]
|
|
||||||
(when (not (= "" current-search))
|
|
||||||
[:button.clear {:on-click clear-search-text} i/exclude])]])
|
|
||||||
|
|
||||||
[:button {:class (stl/css-case :close-search new-css-system)
|
|
||||||
:on-click toggle-search}
|
:on-click toggle-search}
|
||||||
(if ^boolean new-css-system
|
i/close-refactor]]
|
||||||
i/close-refactor
|
|
||||||
i/cross)]]
|
|
||||||
|
|
||||||
[:div {:class (stl/css new-css-system :active-filters)}
|
[:div {:class (stl/css :active-filters)}
|
||||||
(for [fkey current-filters]
|
(for [fkey current-filters]
|
||||||
(let [fname (d/name fkey)
|
(let [fname (d/name fkey)
|
||||||
name (case fkey
|
name (case fkey
|
||||||
|
@ -298,11 +258,12 @@
|
||||||
:image (tr "workspace.sidebar.layers.images")
|
:image (tr "workspace.sidebar.layers.images")
|
||||||
:shape (tr "workspace.sidebar.layers.shapes")
|
:shape (tr "workspace.sidebar.layers.shapes")
|
||||||
(tr fkey))]
|
(tr fkey))]
|
||||||
(if ^boolean new-css-system
|
|
||||||
[:button {:class (stl/css :layer-filter)
|
[:button {:class (stl/css :layer-filter)
|
||||||
:key fname
|
:key fname
|
||||||
:data-filter fname
|
:data-filter fname
|
||||||
:on-click remove-filter}
|
:on-click remove-filter}
|
||||||
|
|
||||||
[:span {:class (stl/css :layer-filter-icon)}
|
[:span {:class (stl/css :layer-filter-icon)}
|
||||||
[:& sic/element-icon-refactor-by-type
|
[:& sic/element-icon-refactor-by-type
|
||||||
{:type fkey
|
{:type fkey
|
||||||
|
@ -310,134 +271,113 @@
|
||||||
[:span {:class (stl/css :layer-filter-name)}
|
[:span {:class (stl/css :layer-filter-name)}
|
||||||
name]
|
name]
|
||||||
[:span {:class (stl/css :layer-filter-close)}
|
[:span {:class (stl/css :layer-filter-close)}
|
||||||
i/close-small-refactor]]
|
i/close-small-refactor]]))]
|
||||||
|
|
||||||
[:span {:on-click remove-filter
|
|
||||||
:data-filter fname
|
|
||||||
:key fname}
|
|
||||||
name i/cross])))]
|
|
||||||
|
|
||||||
(when ^boolean show-menu?
|
(when ^boolean show-menu?
|
||||||
(if ^boolean new-css-system
|
|
||||||
[:ul {:class (stl/css :filters-container)}
|
[:ul {:class (stl/css :filters-container)}
|
||||||
[:li {:class (stl/css-case
|
[:li {:class (stl/css-case :filter-menu-item true
|
||||||
:filter-menu-item true
|
|
||||||
:selected (contains? current-filters :frame))
|
:selected (contains? current-filters :frame))
|
||||||
:data-filter "frame"
|
:data-filter "frame"
|
||||||
:on-click add-filter}
|
:on-click add-filter}
|
||||||
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
||||||
[:span {:class (stl/css :filter-menu-item-icon)} i/board-refactor]
|
[:span {:class (stl/css :filter-menu-item-icon)}
|
||||||
|
i/board-refactor]
|
||||||
[:span {:class (stl/css :filter-menu-item-name)}
|
[:span {:class (stl/css :filter-menu-item-name)}
|
||||||
(tr "workspace.sidebar.layers.frames")]]
|
(tr "workspace.sidebar.layers.frames")]]
|
||||||
(when (contains? current-filters :frame)
|
|
||||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
|
||||||
|
|
||||||
[:li {:class (stl/css-case
|
(when (contains? current-filters :frame)
|
||||||
:filter-menu-item true
|
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||||
|
i/tick-refactor])]
|
||||||
|
|
||||||
|
[:li {:class (stl/css-case :filter-menu-item true
|
||||||
:selected (contains? current-filters :group))
|
:selected (contains? current-filters :group))
|
||||||
:data-filter "group"
|
:data-filter "group"
|
||||||
:on-click add-filter}
|
:on-click add-filter}
|
||||||
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
||||||
[:span {:class (stl/css :filter-menu-item-icon)} i/group-refactor]
|
[:span {:class (stl/css :filter-menu-item-icon)}
|
||||||
|
i/group-refactor]
|
||||||
[:span {:class (stl/css :filter-menu-item-name)}
|
[:span {:class (stl/css :filter-menu-item-name)}
|
||||||
(tr "workspace.sidebar.layers.groups")]]
|
(tr "workspace.sidebar.layers.groups")]]
|
||||||
|
|
||||||
(when (contains? current-filters :group)
|
(when (contains? current-filters :group)
|
||||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||||
|
i/tick-refactor])]
|
||||||
|
|
||||||
[:li {:class (stl/css-case
|
[:li {:class (stl/css-case :filter-menu-item true
|
||||||
:filter-menu-item true
|
|
||||||
:selected (contains? current-filters :mask))
|
:selected (contains? current-filters :mask))
|
||||||
:data-filter "mask"
|
:data-filter "mask"
|
||||||
:on-click add-filter}
|
:on-click add-filter}
|
||||||
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
||||||
[:span {:class (stl/css :filter-menu-item-icon)} i/mask-refactor]
|
[:span {:class (stl/css :filter-menu-item-icon)}
|
||||||
|
i/mask-refactor]
|
||||||
[:span {:class (stl/css :filter-menu-item-name)}
|
[:span {:class (stl/css :filter-menu-item-name)}
|
||||||
(tr "workspace.sidebar.layers.masks")]]
|
(tr "workspace.sidebar.layers.masks")]]
|
||||||
(when (contains? current-filters :mask)
|
|
||||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
|
||||||
|
|
||||||
[:li {:class (stl/css-case
|
(when (contains? current-filters :mask)
|
||||||
:filter-menu-item true
|
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||||
|
i/tick-refactor])]
|
||||||
|
|
||||||
|
[:li {:class (stl/css-case :filter-menu-item true
|
||||||
:selected (contains? current-filters :component))
|
:selected (contains? current-filters :component))
|
||||||
:data-filter "component"
|
:data-filter "component"
|
||||||
:on-click add-filter}
|
:on-click add-filter}
|
||||||
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
||||||
[:span {:class (stl/css :filter-menu-item-icon)} i/component-refactor]
|
[:span {:class (stl/css :filter-menu-item-icon)}
|
||||||
|
i/component-refactor]
|
||||||
[:span {:class (stl/css :filter-menu-item-name)}
|
[:span {:class (stl/css :filter-menu-item-name)}
|
||||||
(tr "workspace.sidebar.layers.components")]]
|
(tr "workspace.sidebar.layers.components")]]
|
||||||
|
|
||||||
(when (contains? current-filters :component)
|
(when (contains? current-filters :component)
|
||||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||||
[:li {:class (stl/css-case
|
i/tick-refactor])]
|
||||||
:filter-menu-item true
|
|
||||||
|
[:li {:class (stl/css-case :filter-menu-item true
|
||||||
:selected (contains? current-filters :text))
|
:selected (contains? current-filters :text))
|
||||||
:data-filter "text"
|
:data-filter "text"
|
||||||
:on-click add-filter}
|
:on-click add-filter}
|
||||||
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
||||||
[:span {:class (stl/css :filter-menu-item-icon)} i/text-refactor]
|
[:span {:class (stl/css :filter-menu-item-icon)}
|
||||||
|
i/text-refactor]
|
||||||
[:span {:class (stl/css :filter-menu-item-name)}
|
[:span {:class (stl/css :filter-menu-item-name)}
|
||||||
(tr "workspace.sidebar.layers.texts")]]
|
(tr "workspace.sidebar.layers.texts")]]
|
||||||
(when (contains? current-filters :text)
|
|
||||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
|
||||||
|
|
||||||
[:li {:class (stl/css-case
|
(when (contains? current-filters :text)
|
||||||
:filter-menu-item true
|
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||||
|
i/tick-refactor])]
|
||||||
|
|
||||||
|
[:li {:class (stl/css-case :filter-menu-item true
|
||||||
:selected (contains? current-filters :image))
|
:selected (contains? current-filters :image))
|
||||||
:data-filter "image"
|
:data-filter "image"
|
||||||
:on-click add-filter}
|
:on-click add-filter}
|
||||||
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
||||||
[:span {:class (stl/css :filter-menu-item-icon)} i/img-refactor]
|
[:span {:class (stl/css :filter-menu-item-icon)}
|
||||||
|
i/img-refactor]
|
||||||
[:span {:class (stl/css :filter-menu-item-name)}
|
[:span {:class (stl/css :filter-menu-item-name)}
|
||||||
(tr "workspace.sidebar.layers.images")]]
|
(tr "workspace.sidebar.layers.images")]]
|
||||||
|
|
||||||
(when (contains? current-filters :image)
|
(when (contains? current-filters :image)
|
||||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||||
[:li {:class (stl/css-case
|
i/tick-refactor])]
|
||||||
:filter-menu-item true
|
|
||||||
|
[:li {:class (stl/css-case :filter-menu-item true
|
||||||
:selected (contains? current-filters :shape))
|
:selected (contains? current-filters :shape))
|
||||||
:data-filter "shape"
|
:data-filter "shape"
|
||||||
:on-click add-filter}
|
:on-click add-filter}
|
||||||
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
|
||||||
[:span {:class (stl/css :filter-menu-item-icon)} i/path-refactor]
|
[:span {:class (stl/css :filter-menu-item-icon)}
|
||||||
|
i/path-refactor]
|
||||||
[:span {:class (stl/css :filter-menu-item-name)}
|
[:span {:class (stl/css :filter-menu-item-name)}
|
||||||
(tr "workspace.sidebar.layers.shapes")]]
|
(tr "workspace.sidebar.layers.shapes")]]
|
||||||
|
|
||||||
(when (contains? current-filters :shape)
|
(when (contains? current-filters :shape)
|
||||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]]
|
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||||
|
i/tick-refactor])]])]
|
||||||
|
|
||||||
[:div.filters-container
|
|
||||||
[:span {:data-filter "frame"
|
|
||||||
:on-click add-filter}
|
|
||||||
i/artboard (tr "workspace.sidebar.layers.frames")]
|
|
||||||
[:span {:data-filter "group"
|
|
||||||
:on-click add-filter}
|
|
||||||
i/folder (tr "workspace.sidebar.layers.groups")]
|
|
||||||
[:span {:data-filter "mask"
|
|
||||||
:on-click add-filter}
|
|
||||||
i/mask (tr "workspace.sidebar.layers.masks")]
|
|
||||||
[:span {:data-filter "component"
|
|
||||||
:on-click add-filter}
|
|
||||||
i/component (tr "workspace.sidebar.layers.components")]
|
|
||||||
[:span {:data-filter "text"
|
|
||||||
:on-click add-filter}
|
|
||||||
i/text (tr "workspace.sidebar.layers.texts")]
|
|
||||||
[:span {:data-filter "image"
|
|
||||||
:on-click add-filter}
|
|
||||||
i/image (tr "workspace.sidebar.layers.images")]
|
|
||||||
[:span {:data-filter "shape"
|
|
||||||
:on-click add-filter}
|
|
||||||
i/curve (tr "workspace.sidebar.layers.shapes")]]))]
|
|
||||||
|
|
||||||
(if ^boolean new-css-system
|
|
||||||
[:div {:class (stl/css :tool-window-bar)}
|
[:div {:class (stl/css :tool-window-bar)}
|
||||||
[:& title-bar {:collapsable? false
|
[:& title-bar {:collapsable? false
|
||||||
:title (:name page)
|
:title (:name page)
|
||||||
:on-btn-click toggle-search
|
:on-btn-click toggle-search
|
||||||
:btn-children i/search-refactor}]]
|
:btn-children i/search-refactor}]]))]))
|
||||||
|
|
||||||
[:div.tool-window-bar
|
|
||||||
[:span.page-name
|
|
||||||
(:name page)]
|
|
||||||
[:button.icon-search {:on-click toggle-search}
|
|
||||||
i/search]])))]))
|
|
||||||
|
|
||||||
|
|
||||||
(defn- on-scroll
|
(defn- on-scroll
|
||||||
|
@ -490,7 +430,6 @@
|
||||||
title (when (= 1 (count focus))
|
title (when (= 1 (count focus))
|
||||||
(dm/get-in objects [(first focus) :name]))
|
(dm/get-in objects [(first focus) :name]))
|
||||||
|
|
||||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
|
||||||
observer-var (mf/use-var nil)
|
observer-var (mf/use-var nil)
|
||||||
lazy-load-ref (mf/use-ref nil)
|
lazy-load-ref (mf/use-ref nil)
|
||||||
|
|
||||||
|
@ -513,53 +452,51 @@
|
||||||
|
|
||||||
(and (nil? element) (some? @observer-var))
|
(and (nil? element) (some? @observer-var))
|
||||||
(do (.disconnect ^js @observer-var)
|
(do (.disconnect ^js @observer-var)
|
||||||
(reset! observer-var nil)))))]
|
(reset! observer-var nil)))))
|
||||||
|
|
||||||
[:div#layers
|
toogle-focus-mode
|
||||||
{:class (if ^boolean new-css-system
|
(mf/use-fn
|
||||||
(stl/css :layers)
|
#(st/emit! (dw/toggle-focus-mode)))]
|
||||||
(stl/css* :tool-window))}
|
|
||||||
|
[:div#layers {:class (stl/css :layers)}
|
||||||
(if (d/not-empty? focus)
|
(if (d/not-empty? focus)
|
||||||
[:div
|
[:div {:class (stl/css :tool-window-bar)}
|
||||||
{:class (stl/css new-css-system :tool-window-bar)}
|
[:button {:class (stl/css :focus-title)
|
||||||
[:button {:class (stl/css new-css-system :focus-title)
|
:on-click toogle-focus-mode}
|
||||||
:on-click #(st/emit! (dw/toggle-focus-mode))}
|
[:span {:class (stl/css :back-button)}
|
||||||
[:span {:class (stl/css new-css-system :back-button)}
|
i/arrow-refactor]
|
||||||
(if ^boolean new-css-system
|
|
||||||
i/arrow-refactor
|
|
||||||
i/arrow-slide)]
|
|
||||||
|
|
||||||
[:div {:class (stl/css new-css-system :focus-name)}
|
[:div {:class (stl/css :focus-name)}
|
||||||
(or title (tr "workspace.sidebar.layers"))]
|
(or title (tr "workspace.sidebar.layers"))]
|
||||||
|
|
||||||
(if ^boolean new-css-system
|
|
||||||
[:div {:class (stl/css :focus-mode-tag-wrapper)}
|
[:div {:class (stl/css :focus-mode-tag-wrapper)}
|
||||||
[:div {:class (stl/css :focus-mode-tag)} (tr "workspace.focus.focus-mode")]]
|
[:div {:class (stl/css :focus-mode-tag)}
|
||||||
[:div.focus-mode (tr "workspace.focus.focus-mode")])]]
|
(tr "workspace.focus.focus-mode")]]]]
|
||||||
|
|
||||||
(filter-component))
|
(filter-component))
|
||||||
|
|
||||||
(if (some? filtered-objects)
|
(if (some? filtered-objects)
|
||||||
[:*
|
[:*
|
||||||
[:div {:class (stl/css new-css-system :tool-window-content)
|
[:div {:class (stl/css :tool-window-content)
|
||||||
:data-scroll-container true
|
:data-scroll-container true
|
||||||
:ref on-render-container}
|
:ref on-render-container}
|
||||||
[:& filters-tree {:objects filtered-objects
|
[:& filters-tree {:objects filtered-objects
|
||||||
:key (dm/str (:id page))
|
:key (dm/str (:id page))
|
||||||
:parent-size size-parent}]
|
:parent-size size-parent}]
|
||||||
[:div.lazy {:ref lazy-load-ref
|
[:div {:ref lazy-load-ref
|
||||||
:style {:min-height 16}}]]
|
:style {:min-height 16}}]]
|
||||||
[:div {:on-scroll on-scroll
|
[:div {:on-scroll on-scroll
|
||||||
:class (stl/css new-css-system :tool-window-content)
|
:class (stl/css :tool-window-content)
|
||||||
:data-scroll-container true
|
:data-scroll-container true
|
||||||
:style {:display (when (some? filtered-objects) "none")}}
|
:style {:display (when (some? filtered-objects) "none")}}
|
||||||
|
|
||||||
[:& layers-tree {:objects filtered-objects
|
[:& layers-tree {:objects filtered-objects
|
||||||
:key (dm/str (:id page))
|
:key (dm/str (:id page))
|
||||||
:filtered? true
|
:filtered? true
|
||||||
:parent-size size-parent}]]]
|
:parent-size size-parent}]]]
|
||||||
|
|
||||||
[:div {:on-scroll on-scroll
|
[:div {:on-scroll on-scroll
|
||||||
:class (stl/css new-css-system :tool-window-content)
|
:class (stl/css :tool-window-content)
|
||||||
:data-scroll-container true
|
:data-scroll-container true
|
||||||
:style {:display (when (some? filtered-objects) "none")}}
|
:style {:display (when (some? filtered-objects) "none")}}
|
||||||
[:& layers-tree {:objects objects
|
[:& layers-tree {:objects objects
|
||||||
|
|
|
@ -12,7 +12,9 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.tool-window-bar {
|
}
|
||||||
|
|
||||||
|
.tool-window-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -20,23 +22,7 @@
|
||||||
min-height: $s-32;
|
min-height: $s-32;
|
||||||
margin: $s-4 0 $s-4 $s-8;
|
margin: $s-4 0 $s-4 $s-8;
|
||||||
padding-right: $s-8;
|
padding-right: $s-8;
|
||||||
.page-name {
|
|
||||||
@include tabTitleTipography;
|
|
||||||
padding: 0 $s-12;
|
|
||||||
color: var(--title-foreground-color);
|
|
||||||
}
|
|
||||||
.icon-search {
|
|
||||||
@extend .button-tertiary;
|
|
||||||
height: $s-32;
|
|
||||||
width: $s-28;
|
|
||||||
border-radius: $br-8;
|
|
||||||
margin-right: $s-8;
|
|
||||||
padding: 0;
|
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
stroke: var(--icon-foreground);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.search {
|
&.search {
|
||||||
padding: 0 $s-8 0 $s-12;
|
padding: 0 $s-8 0 $s-12;
|
||||||
gap: $s-4;
|
gap: $s-4;
|
||||||
|
@ -85,13 +71,36 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.focus-title {
|
}
|
||||||
|
|
||||||
|
.page-name {
|
||||||
|
@include tabTitleTipography;
|
||||||
|
padding: 0 $s-12;
|
||||||
|
color: var(--title-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-search {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
height: $s-32;
|
||||||
|
width: $s-28;
|
||||||
|
border-radius: $br-8;
|
||||||
|
margin-right: $s-8;
|
||||||
|
padding: 0;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
|
stroke: var(--icon-foreground);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.focus-title {
|
||||||
@include buttonStyle;
|
@include buttonStyle;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
.back-button-icon {
|
}
|
||||||
|
|
||||||
|
.back-button-icon {
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
height: $s-32;
|
height: $s-32;
|
||||||
width: $s-24;
|
width: $s-24;
|
||||||
|
@ -101,21 +110,24 @@
|
||||||
stroke: var(--icon-foreground);
|
stroke: var(--icon-foreground);
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.focus-name {
|
|
||||||
|
.focus-name {
|
||||||
@include titleTipography;
|
@include titleTipography;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-left: $s-4;
|
padding-left: $s-4;
|
||||||
color: var(--title-foreground-color);
|
color: var(--title-foreground-color);
|
||||||
}
|
}
|
||||||
.focus-mode-tag-wrapper {
|
|
||||||
|
.focus-mode-tag-wrapper {
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-right: $s-12;
|
margin-right: $s-12;
|
||||||
|
}
|
||||||
|
|
||||||
.focus-mode-tag {
|
.focus-mode-tag {
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
@include titleTipography;
|
@include titleTipography;
|
||||||
height: $s-20;
|
height: $s-20;
|
||||||
|
@ -123,41 +135,41 @@
|
||||||
border: $s-1 solid var(--tag-background-color);
|
border: $s-1 solid var(--tag-background-color);
|
||||||
border-radius: $br-6;
|
border-radius: $br-6;
|
||||||
color: var(--tag-background-color);
|
color: var(--tag-background-color);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
.active-filters {
|
||||||
}
|
|
||||||
.active-filters {
|
|
||||||
@include flexRow;
|
@include flexRow;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 0 $s-12;
|
margin: 0 $s-12;
|
||||||
.layer-filter {
|
}
|
||||||
|
|
||||||
|
.layer-filter {
|
||||||
@extend .button-tag;
|
@extend .button-tag;
|
||||||
@include buttonStyle;
|
|
||||||
gap: $s-6;
|
gap: $s-6;
|
||||||
height: $s-24;
|
height: $s-24;
|
||||||
margin: $s-2 0;
|
margin: $s-2 0;
|
||||||
border-radius: $br-6;
|
border-radius: $br-6;
|
||||||
background-color: var(--pill-background-color);
|
background-color: var(--pill-background-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.layer-filter-icon,
|
}
|
||||||
.layer-filter-close {
|
|
||||||
|
.layer-filter-icon,
|
||||||
|
.layer-filter-close {
|
||||||
@extend .button-icon-small;
|
@extend .button-icon-small;
|
||||||
stroke: var(--pill-foreground-color);
|
stroke: var(--pill-foreground-color);
|
||||||
svg {
|
svg {
|
||||||
height: $s-12;
|
height: $s-12;
|
||||||
width: $s-12;
|
width: $s-12;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layer-filter-name {
|
|
||||||
|
.layer-filter-name {
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
@include titleTipography;
|
@include titleTipography;
|
||||||
color: var(--pill-foreground-color);
|
color: var(--pill-foreground-color);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-container {
|
.filters-container {
|
||||||
@extend .menu-dropdown;
|
@extend .menu-dropdown;
|
||||||
top: $s-44;
|
top: $s-44;
|
||||||
left: $s-12;
|
left: $s-12;
|
||||||
|
@ -231,19 +243,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tool-window-content {
|
|
||||||
|
.tool-window-content {
|
||||||
--calculated-height: calc($s-128 + var(--height, $s-200));
|
--calculated-height: calc($s-128 + var(--height, $s-200));
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: calc(100vh - var(--calculated-height));
|
height: calc(100vh - var(--calculated-height));
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
scrollbar-gutter: stable;
|
|
||||||
overflow-y: overlay;
|
overflow-y: overlay;
|
||||||
|
scrollbar-gutter: stable;
|
||||||
.element-list {
|
.element-list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -129,19 +129,26 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: $s-2;
|
gap: $s-2;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: var(--input-checkbox-text-foreground-color);
|
||||||
.check-mark {
|
.check-mark {
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
width: $s-16;
|
width: $s-16;
|
||||||
height: $s-16;
|
height: $s-16;
|
||||||
border-radius: $br-6;
|
border-radius: $br-6;
|
||||||
background-color: var(--input-background-color);
|
background-color: var(--input-checkbox-inactive-background-color);
|
||||||
&.checked {
|
&.checked {
|
||||||
background-color: var(--input-border-color-active);
|
background-color: var(--input-checkbox-active-background-color);
|
||||||
svg {
|
svg {
|
||||||
@extend .button-icon-small;
|
@extend .button-icon-small;
|
||||||
stroke: var(--input-details-color);
|
stroke: var(--input-details-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--input-checkbox-border-color-hover);
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--input-checkbox-border-color-focus);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue