mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
♻️ Remove new-css-system from layers
This commit is contained in:
Eva
Alonso Torres
parent
831f79d651
commit
c707539f6f
16 changed files with 460 additions and 1315 deletions
|
|
@ -17,6 +17,9 @@ body {
|
|||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: red; //debugger colors
|
||||
color: #fabada; //debugger colors
|
||||
}
|
||||
|
||||
#app {
|
||||
|
|
|
|||
|
|
@ -403,7 +403,6 @@
|
|||
min-width: $s-16;
|
||||
min-height: $s-16;
|
||||
border-radius: $br-6;
|
||||
|
||||
background-color: var(--input-checkbox-inactive-background-color);
|
||||
border-radius: $br-4;
|
||||
box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
|
||||
|
|
@ -451,6 +450,7 @@
|
|||
align-items: center;
|
||||
gap: $s-6;
|
||||
cursor: pointer;
|
||||
color: var(--input-checkbox-text-foreground-color);
|
||||
span {
|
||||
@extend .checkbox-icon;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -162,10 +162,11 @@
|
|||
--input-checkbox-background-color-intermediate: var(--color-foreground-secondary);
|
||||
|
||||
// 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-active-background-color: var(--color-accent-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-foreground-color: var(--color-foreground-primary);
|
||||
|
|
|
|||
|
|
@ -75,15 +75,11 @@
|
|||
@import "main/partials/loader";
|
||||
@import "main/partials/project-bar";
|
||||
@import "main/partials/sidebar";
|
||||
@import "main/partials/sidebar-layers";
|
||||
@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-icons";
|
||||
@import "main/partials/sidebar-interactions";
|
||||
@import "main/partials/sidebar-sitemap";
|
||||
@import "main/partials/sidebar-tools";
|
||||
@import "main/partials/tab-container";
|
||||
@import "main/partials/tool-bar";
|
||||
@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 {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
[app.main.data.workspace.collapse :as dwc]
|
||||
[app.main.refs :as refs]
|
||||
[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.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
|
|
@ -130,6 +129,7 @@
|
|||
:type-comp component-tree?
|
||||
:type-frame (cfh/frame-shape? item)
|
||||
:hidden? hidden?}]
|
||||
|
||||
(when (not read-only?)
|
||||
[:div {:class (stl/css-case
|
||||
:element-actions true
|
||||
|
|
@ -159,11 +159,9 @@
|
|||
{::mf/wrap-props false}
|
||||
[{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
|
||||
(let [id (:id item)
|
||||
name (:name item)
|
||||
blocked? (:blocked item)
|
||||
hidden? (:hidden item)
|
||||
touched? (-> item :touched seq boolean)
|
||||
has-shapes? (-> item :shapes seq boolean)
|
||||
|
||||
|
||||
drag-disabled* (mf/use-state false)
|
||||
drag-disabled? (deref drag-disabled*)
|
||||
|
|
@ -179,14 +177,8 @@
|
|||
|
||||
container? (or (cfh/frame-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?)
|
||||
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)
|
||||
(= uuid/zero (:parent-id item)))
|
||||
toggle-collapse
|
||||
|
|
@ -346,124 +338,48 @@
|
|||
#(when (some? subid)
|
||||
(rx/dispose! subid))))
|
||||
|
||||
(if new-css-system
|
||||
[:& layer-item-inner
|
||||
{:ref dref
|
||||
:item item
|
||||
:depth depth
|
||||
:parent-size parent-size
|
||||
:name-ref ref
|
||||
:read-only? read-only?
|
||||
:highlighted? highlighted?
|
||||
:selected? selected?
|
||||
:component-tree? component-tree?
|
||||
:filtered? filtered?
|
||||
:expanded? expanded?
|
||||
:dnd-over? (= (:over dprops) :center)
|
||||
:dnd-over-top? (= (:over dprops) :top)
|
||||
:dnd-over-bot? (= (:over dprops) :bot)
|
||||
:on-select-shape select-shape
|
||||
:on-context-menu on-context-menu
|
||||
:on-pointer-enter on-pointer-enter
|
||||
:on-pointer-leave on-pointer-leave
|
||||
:on-zoom-to-selected zoom-to-selected
|
||||
:on-toggle-collapse toggle-collapse
|
||||
:on-enable-drag enable-drag
|
||||
:on-disable-drag disable-drag
|
||||
:on-toggle-visibility toggle-visibility
|
||||
:on-toggle-blocking toggle-blocking}
|
||||
[:& layer-item-inner
|
||||
{:ref dref
|
||||
:item item
|
||||
:depth depth
|
||||
:parent-size parent-size
|
||||
:name-ref ref
|
||||
:read-only? read-only?
|
||||
:highlighted? highlighted?
|
||||
:selected? selected?
|
||||
:component-tree? component-tree?
|
||||
:filtered? filtered?
|
||||
:expanded? expanded?
|
||||
:dnd-over? (= (:over dprops) :center)
|
||||
:dnd-over-top? (= (:over dprops) :top)
|
||||
:dnd-over-bot? (= (:over dprops) :bot)
|
||||
:on-select-shape select-shape
|
||||
:on-context-menu on-context-menu
|
||||
:on-pointer-enter on-pointer-enter
|
||||
:on-pointer-leave on-pointer-leave
|
||||
:on-zoom-to-selected zoom-to-selected
|
||||
:on-toggle-collapse toggle-collapse
|
||||
:on-enable-drag enable-drag
|
||||
:on-disable-drag disable-drag
|
||||
:on-toggle-visibility toggle-visibility
|
||||
:on-toggle-blocking toggle-blocking}
|
||||
|
||||
(when (and (:shapes item) expanded?)
|
||||
[:div {:class (stl/css-case
|
||||
:element-children true
|
||||
:parent-selected selected?
|
||||
:sticky-children parent-board?)
|
||||
:data-id (when ^boolean parent-board? id)}
|
||||
(for [[index id] (reverse (d/enumerate (:shapes item)))]
|
||||
(when-let [item (get objects id)]
|
||||
[:& layer-item
|
||||
{:item item
|
||||
:highlighted highlighted
|
||||
:selected selected
|
||||
:index index
|
||||
:objects objects
|
||||
:key (dm/str id)
|
||||
:sortable? sortable?
|
||||
:depth depth
|
||||
:parent-size parent-size
|
||||
: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?}]))])])))
|
||||
(when (and (:shapes item) expanded?)
|
||||
[:div {:class (stl/css-case
|
||||
:element-children true
|
||||
:parent-selected selected?
|
||||
:sticky-children parent-board?)
|
||||
:data-id (when ^boolean parent-board? id)}
|
||||
(for [[index id] (reverse (d/enumerate (:shapes item)))]
|
||||
(when-let [item (get objects id)]
|
||||
[:& layer-item
|
||||
{:item item
|
||||
:highlighted highlighted
|
||||
:selected selected
|
||||
:index index
|
||||
:objects objects
|
||||
:key (dm/str id)
|
||||
:sortable? sortable?
|
||||
:depth depth
|
||||
:parent-size parent-size
|
||||
:component-child? component-tree?}]))])]))
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: var(--layer-row-background-color);
|
||||
border: 2px solid transparent;
|
||||
border: $s-2 solid transparent;
|
||||
|
||||
&.highlight,
|
||||
&:hover {
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
--context-hover-opacity: $op-10;
|
||||
background-color: var(--layer-row-background-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 {
|
||||
opacity: $op-10;
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
&.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,
|
||||
|
|
@ -105,7 +105,6 @@
|
|||
@include buttonStyle;
|
||||
position: relative;
|
||||
justify-self: flex-end;
|
||||
width: $s-16;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
padding: 0 $s-8 0 $s-4;
|
||||
|
|
@ -138,23 +137,23 @@
|
|||
.absolute {
|
||||
position: absolute;
|
||||
background-color: var(--layer-row-foreground-color);
|
||||
opacity: $op-4;
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
border-radius: $br-2;
|
||||
opacity: $op-4;
|
||||
|
||||
.layer-row.hidden & {
|
||||
.layer-row.hidden {
|
||||
opacity: $op-1;
|
||||
}
|
||||
.layer-row.type-comp & {
|
||||
.layer-row.type-comp {
|
||||
background-color: var(--layer-row-component-foreground-color);
|
||||
}
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
.layer-row.highlight,
|
||||
.layer-row:hover {
|
||||
opacity: $op-4;
|
||||
background-color: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
.layer-row.selected & {
|
||||
.layer-row.selected {
|
||||
background-color: var(--layer-row-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
|
|
@ -166,29 +165,29 @@
|
|||
align-items: center;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
padding: 0 4px 0 8px;
|
||||
padding: 0 $s-4 0 $s-8;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
|
||||
.layer-row.hidden & {
|
||||
.layer-row.hidden {
|
||||
opacity: $op-7;
|
||||
}
|
||||
.layer-row.selected & {
|
||||
.layer-row.selected {
|
||||
stroke: var(--layer-row-foreground-color-selected);
|
||||
}
|
||||
.layer-row.type-comp & {
|
||||
.layer-row.type-comp {
|
||||
stroke: var(--layer-row-component-foreground-color);
|
||||
}
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
.layer-row.highlight,
|
||||
.layer-row:hover {
|
||||
opacity: $op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-row.selected & {
|
||||
.layer-row.selected {
|
||||
background-color: var(--layer-row-background-color-selected);
|
||||
}
|
||||
&.inverse svg {
|
||||
|
|
@ -209,15 +208,15 @@
|
|||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
|
||||
.layer-row.hidden & {
|
||||
.layer-row.hidden {
|
||||
opacity: $op-7;
|
||||
}
|
||||
.type-comp & {
|
||||
.type-comp {
|
||||
stroke: var(--layer-row-component-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.element-actions.selected & {
|
||||
.element-actions.selected {
|
||||
display: flex;
|
||||
opacity: $op-0;
|
||||
|
||||
|
|
@ -226,15 +225,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
.layer-row.highlight,
|
||||
.layer-row:hover {
|
||||
display: flex;
|
||||
svg {
|
||||
opacity: $op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.layer-row.selected & {
|
||||
|
||||
.layer-row.selected {
|
||||
display: flex;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-selected);
|
||||
|
|
@ -244,8 +244,8 @@
|
|||
|
||||
:global(.sticky) {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
z-index: 3;
|
||||
top: $s-0;
|
||||
z-index: $z-index-3;
|
||||
}
|
||||
|
||||
.tab-indentation {
|
||||
|
|
@ -253,6 +253,7 @@
|
|||
height: $s-16;
|
||||
min-width: calc(var(--depth) * var(--layer-indentation-size));
|
||||
}
|
||||
|
||||
.filtered {
|
||||
min-width: $s-12;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.util.debug :as dbg]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.keyboard :as kbd]
|
||||
|
|
@ -38,7 +37,6 @@
|
|||
ref (d/nilv external-ref local-ref)
|
||||
|
||||
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 "/")
|
||||
|
||||
|
|
@ -90,7 +88,8 @@
|
|||
|
||||
(if ^boolean edition?
|
||||
[: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}
|
||||
:type "text"
|
||||
:ref ref
|
||||
|
|
@ -100,20 +99,16 @@
|
|||
:default-value (d/nilv shape-name "")}]
|
||||
[:*
|
||||
[:span
|
||||
{:class (if ^boolean new-css-system
|
||||
(stl/css-case
|
||||
:element-name true
|
||||
:left-ellipsis has-path?
|
||||
:selected selected?
|
||||
:hidden hidden?
|
||||
:type-comp type-comp
|
||||
:type-frame type-frame)
|
||||
(stl/css-case
|
||||
"element-name" true
|
||||
:left-ellipsis has-path?))
|
||||
{:class (stl/css-case
|
||||
:element-name true
|
||||
:left-ellipsis has-path?
|
||||
:selected selected?
|
||||
:hidden hidden?
|
||||
:type-comp type-comp
|
||||
:type-frame type-frame)
|
||||
:style {"--depth" depth "--parent-size" parent-size}
|
||||
:ref ref
|
||||
:on-double-click start-edit}
|
||||
(d/nilv shape-name "")]
|
||||
(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;
|
||||
padding-left: $s-6;
|
||||
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);
|
||||
}
|
||||
.element-name-touched {
|
||||
|
|
|
|||
|
|
@ -17,13 +17,11 @@
|
|||
[app.main.ui.components.search-bar :refer [search-bar]]
|
||||
[app.main.ui.components.shape-icon-refactor :as sic]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.timers :as ts]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
|
@ -45,10 +43,8 @@
|
|||
selected (hooks/use-equal-memo selected)
|
||||
highlighted (mf/deref refs/highlighted-shapes)
|
||||
highlighted (hooks/use-equal-memo highlighted)
|
||||
root (get objects uuid/zero)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
[:div
|
||||
{:class (stl/css new-css-system :element-list)}
|
||||
root (get objects uuid/zero)]
|
||||
[:div {:class (stl/css :element-list)}
|
||||
[:& hooks/sortable-container {}
|
||||
(for [[index id] (reverse (d/enumerate (:shapes root)))]
|
||||
(when-let [obj (get objects id)]
|
||||
|
|
@ -82,9 +78,8 @@
|
|||
[{:keys [objects parent-size]}]
|
||||
(let [selected (mf/deref refs/selected-shapes)
|
||||
selected (hooks/use-equal-memo selected)
|
||||
root (get objects uuid/zero)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
[:ul {:class (stl/css new-css-system :element-list)}
|
||||
root (get objects uuid/zero)]
|
||||
[:ul {:class (stl/css :element-list)}
|
||||
(for [[index id] (d/enumerate (:shapes root))]
|
||||
(when-let [obj (get objects id)]
|
||||
[:& layer-item
|
||||
|
|
@ -140,8 +135,7 @@
|
|||
|
||||
(defn use-search
|
||||
[page objects]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
state* (mf/use-state
|
||||
(let [state* (mf/use-state
|
||||
{:show-search false
|
||||
:show-menu false
|
||||
:search-text ""
|
||||
|
|
@ -164,13 +158,7 @@
|
|||
(mf/use-fn
|
||||
#(swap! state* update :show-menu not))
|
||||
|
||||
update-search-text-v1
|
||||
(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
|
||||
update-search-text
|
||||
(mf/use-fn
|
||||
(fn [value _event]
|
||||
(swap! state* assoc :search-text value :num-items 100)))
|
||||
|
|
@ -236,57 +224,29 @@
|
|||
(mf/deps filtered-objects-total current-items)
|
||||
(fn [_]
|
||||
(when (<= current-items filtered-objects-total)
|
||||
(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)))))]
|
||||
(swap! state* update :num-items + 100))))]
|
||||
|
||||
[filtered-objects
|
||||
handle-show-more
|
||||
#(mf/html
|
||||
(if show-search?
|
||||
[:*
|
||||
[:div {:class (stl/css new-css-system :tool-window-bar :search)}
|
||||
(if ^boolean new-css-system
|
||||
[:& search-bar
|
||||
{:on-change update-search-text-v2
|
||||
:value current-search
|
||||
:on-clear clear-search-text
|
||||
:placeholder (tr "workspace.sidebar.layers.search")}
|
||||
[:button
|
||||
{:on-click toggle-filters
|
||||
:class (stl/css-case
|
||||
:filter-button true
|
||||
:active active?)}
|
||||
i/filter-refactor]]
|
||||
[:div {:class (stl/css :tool-window-bar :search)}
|
||||
[:& search-bar {:on-change update-search-text
|
||||
:value current-search
|
||||
:on-clear clear-search-text
|
||||
:placeholder (tr "workspace.sidebar.layers.search")}
|
||||
[:button {:on-click toggle-filters
|
||||
:class (stl/css-case
|
||||
:filter-button true
|
||||
:active active?)}
|
||||
i/filter-refactor]]
|
||||
|
||||
[:span.search-box
|
||||
[: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)
|
||||
[:button {:class (stl/css :close-search)
|
||||
:on-click toggle-search}
|
||||
(if ^boolean new-css-system
|
||||
i/close-refactor
|
||||
i/cross)]]
|
||||
i/close-refactor]]
|
||||
|
||||
[:div {:class (stl/css new-css-system :active-filters)}
|
||||
[:div {:class (stl/css :active-filters)}
|
||||
(for [fkey current-filters]
|
||||
(let [fname (d/name fkey)
|
||||
name (case fkey
|
||||
|
|
@ -298,146 +258,126 @@
|
|||
:image (tr "workspace.sidebar.layers.images")
|
||||
:shape (tr "workspace.sidebar.layers.shapes")
|
||||
(tr fkey))]
|
||||
(if ^boolean new-css-system
|
||||
[:button {:class (stl/css :layer-filter)
|
||||
:key fname
|
||||
:data-filter fname
|
||||
:on-click remove-filter}
|
||||
[:span {:class (stl/css :layer-filter-icon)}
|
||||
[:& sic/element-icon-refactor-by-type
|
||||
{:type fkey
|
||||
:main-instance? (= fkey :component)}]]
|
||||
[:span {:class (stl/css :layer-filter-name)}
|
||||
name]
|
||||
[:span {:class (stl/css :layer-filter-close)}
|
||||
i/close-small-refactor]]
|
||||
|
||||
[:span {:on-click remove-filter
|
||||
[:button {:class (stl/css :layer-filter)
|
||||
:key fname
|
||||
:data-filter fname
|
||||
:key fname}
|
||||
name i/cross])))]
|
||||
:on-click remove-filter}
|
||||
|
||||
[:span {:class (stl/css :layer-filter-icon)}
|
||||
[:& sic/element-icon-refactor-by-type
|
||||
{:type fkey
|
||||
:main-instance? (= fkey :component)}]]
|
||||
[:span {:class (stl/css :layer-filter-name)}
|
||||
name]
|
||||
[:span {:class (stl/css :layer-filter-close)}
|
||||
i/close-small-refactor]]))]
|
||||
|
||||
(when ^boolean show-menu?
|
||||
(if ^boolean new-css-system
|
||||
[:ul {:class (stl/css :filters-container)}
|
||||
[:li {:class (stl/css-case
|
||||
:filter-menu-item true
|
||||
:selected (contains? current-filters :frame))
|
||||
:data-filter "frame"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.frames")]]
|
||||
(when (contains? current-filters :frame)
|
||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
||||
[:ul {:class (stl/css :filters-container)}
|
||||
[:li {:class (stl/css-case :filter-menu-item true
|
||||
:selected (contains? current-filters :frame))
|
||||
:data-filter "frame"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.frames")]]
|
||||
|
||||
[:li {:class (stl/css-case
|
||||
:filter-menu-item true
|
||||
:selected (contains? current-filters :group))
|
||||
:data-filter "group"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.groups")]]
|
||||
(when (contains? current-filters :frame)
|
||||
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||
i/tick-refactor])]
|
||||
|
||||
(when (contains? current-filters :group)
|
||||
[: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))
|
||||
:data-filter "group"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.groups")]]
|
||||
|
||||
[:li {:class (stl/css-case
|
||||
:filter-menu-item true
|
||||
:selected (contains? current-filters :mask))
|
||||
:data-filter "mask"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.masks")]]
|
||||
(when (contains? current-filters :mask)
|
||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
||||
(when (contains? current-filters :group)
|
||||
[: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))
|
||||
:data-filter "component"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.components")]]
|
||||
(when (contains? current-filters :component)
|
||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
||||
[:li {:class (stl/css-case
|
||||
:filter-menu-item true
|
||||
:selected (contains? current-filters :text))
|
||||
:data-filter "text"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(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 :filter-menu-item true
|
||||
:selected (contains? current-filters :mask))
|
||||
:data-filter "mask"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.masks")]]
|
||||
|
||||
[:li {:class (stl/css-case
|
||||
:filter-menu-item true
|
||||
:selected (contains? current-filters :image))
|
||||
:data-filter "image"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.images")]]
|
||||
(when (contains? current-filters :image)
|
||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
||||
[:li {:class (stl/css-case
|
||||
:filter-menu-item true
|
||||
:selected (contains? current-filters :shape))
|
||||
:data-filter "shape"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.shapes")]]
|
||||
(when (contains? current-filters :shape)
|
||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]]
|
||||
(when (contains? current-filters :mask)
|
||||
[: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")]]))]
|
||||
[:li {:class (stl/css-case :filter-menu-item true
|
||||
:selected (contains? current-filters :component))
|
||||
:data-filter "component"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.components")]]
|
||||
|
||||
(if ^boolean new-css-system
|
||||
[:div {:class (stl/css :tool-window-bar)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (:name page)
|
||||
:on-btn-click toggle-search
|
||||
:btn-children i/search-refactor}]]
|
||||
(when (contains? current-filters :component)
|
||||
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||
i/tick-refactor])]
|
||||
|
||||
[:div.tool-window-bar
|
||||
[:span.page-name
|
||||
(:name page)]
|
||||
[:button.icon-search {:on-click toggle-search}
|
||||
i/search]])))]))
|
||||
[:li {:class (stl/css-case :filter-menu-item true
|
||||
:selected (contains? current-filters :text))
|
||||
:data-filter "text"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(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 :filter-menu-item true
|
||||
:selected (contains? current-filters :image))
|
||||
:data-filter "image"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.images")]]
|
||||
|
||||
(when (contains? current-filters :image)
|
||||
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||
i/tick-refactor])]
|
||||
|
||||
[:li {:class (stl/css-case :filter-menu-item true
|
||||
:selected (contains? current-filters :shape))
|
||||
:data-filter "shape"
|
||||
:on-click add-filter}
|
||||
[: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-name)}
|
||||
(tr "workspace.sidebar.layers.shapes")]]
|
||||
|
||||
(when (contains? current-filters :shape)
|
||||
[:span {:class (stl/css :filter-menu-item-tick)}
|
||||
i/tick-refactor])]])]
|
||||
|
||||
[:div {:class (stl/css :tool-window-bar)}
|
||||
[:& title-bar {:collapsable? false
|
||||
:title (:name page)
|
||||
:on-btn-click toggle-search
|
||||
:btn-children i/search-refactor}]]))]))
|
||||
|
||||
|
||||
(defn- on-scroll
|
||||
|
|
@ -490,7 +430,6 @@
|
|||
title (when (= 1 (count focus))
|
||||
(dm/get-in objects [(first focus) :name]))
|
||||
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
observer-var (mf/use-var nil)
|
||||
lazy-load-ref (mf/use-ref nil)
|
||||
|
||||
|
|
@ -513,53 +452,51 @@
|
|||
|
||||
(and (nil? element) (some? @observer-var))
|
||||
(do (.disconnect ^js @observer-var)
|
||||
(reset! observer-var nil)))))]
|
||||
(reset! observer-var nil)))))
|
||||
|
||||
[:div#layers
|
||||
{:class (if ^boolean new-css-system
|
||||
(stl/css :layers)
|
||||
(stl/css* :tool-window))}
|
||||
toogle-focus-mode
|
||||
(mf/use-fn
|
||||
#(st/emit! (dw/toggle-focus-mode)))]
|
||||
|
||||
[:div#layers {:class (stl/css :layers)}
|
||||
(if (d/not-empty? focus)
|
||||
[:div
|
||||
{:class (stl/css new-css-system :tool-window-bar)}
|
||||
[:button {:class (stl/css new-css-system :focus-title)
|
||||
:on-click #(st/emit! (dw/toggle-focus-mode))}
|
||||
[:span {:class (stl/css new-css-system :back-button)}
|
||||
(if ^boolean new-css-system
|
||||
i/arrow-refactor
|
||||
i/arrow-slide)]
|
||||
[:div {:class (stl/css :tool-window-bar)}
|
||||
[:button {:class (stl/css :focus-title)
|
||||
:on-click toogle-focus-mode}
|
||||
[:span {:class (stl/css :back-button)}
|
||||
i/arrow-refactor]
|
||||
|
||||
[:div {:class (stl/css new-css-system :focus-name)}
|
||||
[:div {:class (stl/css :focus-name)}
|
||||
(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)} (tr "workspace.focus.focus-mode")]]
|
||||
[:div.focus-mode (tr "workspace.focus.focus-mode")])]]
|
||||
[:div {:class (stl/css :focus-mode-tag-wrapper)}
|
||||
[:div {:class (stl/css :focus-mode-tag)}
|
||||
(tr "workspace.focus.focus-mode")]]]]
|
||||
|
||||
(filter-component))
|
||||
|
||||
(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
|
||||
:ref on-render-container}
|
||||
[:& filters-tree {:objects filtered-objects
|
||||
:key (dm/str (:id page))
|
||||
:parent-size size-parent}]
|
||||
[:div.lazy {:ref lazy-load-ref
|
||||
:style {:min-height 16}}]]
|
||||
[:div {:ref lazy-load-ref
|
||||
:style {:min-height 16}}]]
|
||||
[:div {:on-scroll on-scroll
|
||||
:class (stl/css new-css-system :tool-window-content)
|
||||
:class (stl/css :tool-window-content)
|
||||
:data-scroll-container true
|
||||
:style {:display (when (some? filtered-objects) "none")}}
|
||||
|
||||
[:& layers-tree {:objects filtered-objects
|
||||
:key (dm/str (:id page))
|
||||
:filtered? true
|
||||
:parent-size size-parent}]]]
|
||||
|
||||
[:div {:on-scroll on-scroll
|
||||
:class (stl/css new-css-system :tool-window-content)
|
||||
:class (stl/css :tool-window-content)
|
||||
:data-scroll-container true
|
||||
:style {:display (when (some? filtered-objects) "none")}}
|
||||
[:& layers-tree {:objects objects
|
||||
|
|
|
|||
|
|
@ -12,238 +12,249 @@
|
|||
flex-direction: column;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
.tool-window-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin: $s-4 0 $s-4 $s-8;
|
||||
padding-right: $s-8;
|
||||
.page-name {
|
||||
@include tabTitleTipography;
|
||||
padding: 0 $s-12;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.tool-window-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin: $s-4 0 $s-4 $s-8;
|
||||
padding-right: $s-8;
|
||||
|
||||
&.search {
|
||||
padding: 0 $s-8 0 $s-12;
|
||||
gap: $s-4;
|
||||
.filter-button {
|
||||
@include flexCenter;
|
||||
@include buttonStyle;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
margin: 0;
|
||||
border: $s-1 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: $s-1 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: $s-1 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-search {
|
||||
.close-search {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
border-radius: $br-8;
|
||||
margin-right: $s-8;
|
||||
min-width: $s-28;
|
||||
padding: 0;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
&.search {
|
||||
padding: 0 $s-8 0 $s-12;
|
||||
gap: $s-4;
|
||||
.filter-button {
|
||||
@include flexCenter;
|
||||
@include buttonStyle;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
margin: 0;
|
||||
border: $s-1 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: $s-1 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: $s-1 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.close-search {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
min-width: $s-28;
|
||||
padding: 0;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.focus-title {
|
||||
@include buttonStyle;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
.back-button-icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-24;
|
||||
padding: 0 $s-4 0 $s-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.focus-name {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-left: $s-4;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
.focus-mode-tag-wrapper {
|
||||
@include flexCenter;
|
||||
height: 100%;
|
||||
margin-right: $s-12;
|
||||
|
||||
.focus-mode-tag {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
height: $s-20;
|
||||
padding: $s-4 $s-6;
|
||||
border: $s-1 solid var(--tag-background-color);
|
||||
border-radius: $br-6;
|
||||
color: var(--tag-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.active-filters {
|
||||
@include flexRow;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 $s-12;
|
||||
.layer-filter {
|
||||
@extend .button-tag;
|
||||
@include buttonStyle;
|
||||
gap: $s-6;
|
||||
height: $s-24;
|
||||
margin: $s-2 0;
|
||||
border-radius: $br-6;
|
||||
background-color: var(--pill-background-color);
|
||||
cursor: pointer;
|
||||
.layer-filter-icon,
|
||||
.layer-filter-close {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--pill-foreground-color);
|
||||
svg {
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
}
|
||||
.layer-filter-name {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
@extend .menu-dropdown;
|
||||
top: $s-44;
|
||||
left: $s-12;
|
||||
width: $s-192;
|
||||
.filter-menu-item {
|
||||
@include titleTipography;
|
||||
.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;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-24;
|
||||
padding: 0 $s-4 0 $s-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.focus-name {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-left: $s-4;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.focus-mode-tag-wrapper {
|
||||
@include flexCenter;
|
||||
height: 100%;
|
||||
margin-right: $s-12;
|
||||
}
|
||||
|
||||
.focus-mode-tag {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
height: $s-20;
|
||||
padding: $s-4 $s-6;
|
||||
border: $s-1 solid var(--tag-background-color);
|
||||
border-radius: $br-6;
|
||||
color: var(--tag-background-color);
|
||||
}
|
||||
|
||||
.active-filters {
|
||||
@include flexRow;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 $s-12;
|
||||
}
|
||||
|
||||
.layer-filter {
|
||||
@extend .button-tag;
|
||||
gap: $s-6;
|
||||
height: $s-24;
|
||||
margin: $s-2 0;
|
||||
border-radius: $br-6;
|
||||
background-color: var(--pill-background-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layer-filter-icon,
|
||||
.layer-filter-close {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--pill-foreground-color);
|
||||
svg {
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
}
|
||||
|
||||
.layer-filter-name {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
@extend .menu-dropdown;
|
||||
top: $s-44;
|
||||
left: $s-12;
|
||||
width: $s-192;
|
||||
.filter-menu-item {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
|
||||
.filter-menu-item-name-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
|
||||
.filter-menu-item-name-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
.filter-menu-item-icon {
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
.filter-menu-item-name {
|
||||
padding-top: $s-2;
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
.filter-menu-item-tick {
|
||||
gap: $s-8;
|
||||
.filter-menu-item-icon {
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
.filter-menu-item-name {
|
||||
padding-top: $s-2;
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
.filter-menu-item-tick {
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--menu-background-color-selected);
|
||||
.filter-menu-item-name-wrapper {
|
||||
.filter-menu-item-icon {
|
||||
svg {
|
||||
stroke: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
.filter-menu-item-name {
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
.filter-menu-item-tick {
|
||||
&.selected {
|
||||
background-color: var(--menu-background-color-selected);
|
||||
.filter-menu-item-name-wrapper {
|
||||
.filter-menu-item-icon {
|
||||
svg {
|
||||
stroke: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
.filter-menu-item-name-wrapper {
|
||||
.filter-menu-item-icon {
|
||||
svg {
|
||||
stroke: var(--menu-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.filter-menu-item-name {
|
||||
color: var(--menu-foreground-color-hover);
|
||||
}
|
||||
.filter-menu-item-name {
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
.filter-menu-item-tick {
|
||||
}
|
||||
.filter-menu-item-tick {
|
||||
svg {
|
||||
stroke: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
.filter-menu-item-name-wrapper {
|
||||
.filter-menu-item-icon {
|
||||
svg {
|
||||
stroke: var(--menu-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.filter-menu-item-name {
|
||||
color: var(--menu-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.filter-menu-item-tick {
|
||||
svg {
|
||||
stroke: var(--menu-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tool-window-content {
|
||||
--calculated-height: calc($s-128 + var(--height, $s-200));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--calculated-height));
|
||||
}
|
||||
|
||||
.tool-window-content {
|
||||
--calculated-height: calc($s-128 + var(--height, $s-200));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--calculated-height));
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: overlay;
|
||||
scrollbar-gutter: stable;
|
||||
.element-list {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-gutter: stable;
|
||||
overflow-y: overlay;
|
||||
.element-list {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,19 +129,26 @@
|
|||
align-items: center;
|
||||
gap: $s-2;
|
||||
cursor: pointer;
|
||||
color: var(--input-checkbox-text-foreground-color);
|
||||
.check-mark {
|
||||
@include flexCenter;
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
border-radius: $br-6;
|
||||
background-color: var(--input-background-color);
|
||||
background-color: var(--input-checkbox-inactive-background-color);
|
||||
&.checked {
|
||||
background-color: var(--input-border-color-active);
|
||||
background-color: var(--input-checkbox-active-background-color);
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
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