0
Fork 0
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:
Eva 2023-12-28 13:35:30 +01:00 committed by Alonso Torres
parent 831f79d651
commit c707539f6f
16 changed files with 460 additions and 1315 deletions

View file

@ -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 {

View file

@ -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;
} }

View file

@ -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);

View file

@ -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";

View file

@ -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;
}
}
}

View file

@ -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;
}
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}
}

View file

@ -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;

View file

@ -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?}]))])])))

View file

@ -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;
} }

View file

@ -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)} "*"])])))

View file

@ -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 {

View file

@ -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

View file

@ -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%;
} }
}
} }

View file

@ -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);
}
} }
} }
} }