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

Merge remote-tracking branch 'origin/develop' into develop

Browse source
This commit is contained in:
Andrey Antukh 2023-08-07 12:59:50 +02:00
commit 39741f98c0
97 changed files with 2194 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

6
common/src/app/common/colors.cljc
View file

@ -21,3 +21,9 @@
(def primary "#31EFB8")
(def danger "#E65244")
(def warning "#FC8802")
;; new-css-system colors
(def new-primary "#91fadb")
(def new-danger "#ff4986")
(def new-warning "#ff9b49")
(def canvas-background "#1d1f20")

3
frontend/resources/images/icons/play-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 2l9.6 6L4 14V2z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 149 B

3
frontend/resources/images/icons/status-alert-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 4v4m-.015 3.07v.263"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 154 B

3
frontend/resources/images/icons/status-tick-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M13.333 4L6 11.333 2.667 8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 158 B

3
frontend/resources/images/icons/status-update-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.11 3.556V6.89m0 0h-3.333m3.334 0l-2.578-2.423a5 5 0 00-8.25 1.867m1.94 2.777H1.889m0 0v3.333m0-3.333l2.578 2.423a5 5 0 008.25-1.867"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 267 B

3
frontend/resources/images/icons/status-wrong-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 4L8 8m0 0l-4 4m4-4l4 4M8 8L4 4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 166 B

3
frontend/resources/images/status-alert-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 4v4m-.015 3.07v.263"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 154 B

3
frontend/resources/images/status-tick-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M13.333 4L6 11.333 2.667 8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 158 B

3
frontend/resources/images/status-update-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.11 3.556V6.89m0 0h-3.333m3.334 0l-2.578-2.423a5 5 0 00-8.25 1.867m1.94 2.777H1.889m0 0v3.333m0-3.333l2.578 2.423a5 5 0 008.25-1.867"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 267 B

3
frontend/resources/images/status-wrong-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 4L8 8m0 0l-4 4m4-4l4 4M8 8L4 4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 166 B

54
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -187,3 +187,57 @@
}
}
}
.menu-dropdown {
@include menuShadow;
display: flex;
flex-direction: column;
gap: $s-4;
width: $s-192;
padding: $s-4;
border-radius: $br-8;
background-color: var(--menu-background-color);
z-index: $z-index-10;
}
.menu-item {
@include titleTipography;
display: flex;
align-items: center;
justify-content: space-between;
height: $s-28;
width: 100%;
padding: $s-6;
border-radius: $br-8;
cursor: pointer;
&:hover {
background-color: var(--menu-background-color-hover);
}
}
.shortcut {
@include flexCenter;
gap: $s-2;
color: var(--menu-shortcut-foreground-color);
}
.shortcut-key {
@include titleTipography;
@include flexCenter;
height: $s-20;
padding: $s-2 $s-6;
border-radius: $br-6;
background-color: var(--menu-shortcut-background-color);
}
.user-icon {
@include flexCenter;
@include titleTipography;
height: $s-24;
width: $s-24;
border-radius: $br-circle;
img {
border-radius: $br-circle;
border: $s-2 solid var(--user-count-foreground-color);
}
}

14
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -17,6 +17,11 @@
--green-30: rgba(145, 250, 219, 0.3);
--lilac: #bb97d8;
--strong-green: #00d1b8;
// NOTIFICATION
--dark-ok-color: var(--strong-green);
--dark-warning-color: #ff9b49;
--dark-pending-color: var(--lilac);
--dark-error-color: #ff4986;
// LIGHT
--light-gray-1: #fff;
@ -30,4 +35,13 @@
--purple-30: rgba(105, 17, 212, 0.2);
--blue: #1345aa;
--strong-purple: #8c33eb;
// NOTIFICATION WILL CHANGE
--light-ok-color: var(--strong-green);
--light-warning-color: #ff9b49;
--light-pending-color: var(--lilac);
--light-error-color: #ff4986;
//GENERIC
--color-canvas: #e8e9ea;
}

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

@ -7,6 +7,9 @@
.light,
.default {
--canvas-background-color: var(--color-background-primary);
--canvas-fill-color: var(--canvas-color);
--scrollbar-background-color: var(--color-foreground-secondary);
--panel-background-color: var(--color-background-primary);
--panel-title-background-color: var(--color-background-secondary);
@ -175,4 +178,17 @@
--empty-message-background-color: var(--color-background-tertiary);
--empty-message-foreground-color: var(--color-foreground-secondary);
--status-ok-background-color: var(--ok-color);
--status-warning-background-color: var(--warning-color);
--status-pending-background-color: var(--pending-color);
--status-error-background-color: var(--error-color);
--status-icon-foreground-color: var(--color-background-primary);
--user-count-background-color: var(--color-background-secondary);
--user-count-foreground-color: var(--color-accent-primary);
--modal-background-color: var(--color-background-quaternary);
--modal-foreground-color: var(--color-foreground-primary);
--modal-foreground-color-secondary: var(--color-foreground-secondary);
}

9
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -52,3 +52,12 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@keyframes spin-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

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

@ -3,3 +3,7 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@mixin menuShadow {
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
}

7
frontend/resources/styles/common/refactor/spacing.scss
View file

@ -34,10 +34,14 @@ $s-84: calc(var(--s-4) * 21);
$s-92: calc(var(--s-4) * 23);
$s-96: calc(var(--s-4) * 24);
$s-104: calc(var(--s-4) * 25);
$s-116: calc(var(--s-4) * 29);
$s-120: calc(var(--s-4) * 30);
$s-136: calc(var(--s-4) * 34);
$s-148: calc(var(--s-4) * 37);
$s-152: calc(var(--s-4) * 38);
$s-160: calc(var(--s-4) * 40);
$s-168: calc(var(--s-4) * 42);
$s-184: calc(var(--s-4) * 46);
$s-192: calc(var(--s-4) * 48);
$s-196: calc(var(--s-4) * 49);
$s-200: calc(var(--s-4) * 50);
@ -46,13 +50,16 @@ $s-240: calc(var(--s-4) * 60);
$s-248: calc(var(--s-4) * 62);
$s-256: calc(var(--s-4) * 64);
$s-272: calc(var(--s-4) * 68);
$s-276: calc(var(--s-4) * 69);
$s-280: calc(var(--s-4) * 70);
$s-284: calc(var(--s-4) * 71);
$s-300: calc(var(--s-4) * 75);
$s-320: calc(var(--s-4) * 80);
$s-348: calc(var(--s-4) * 87);
$s-380: calc(var(--s-4) * 95);
$s-400: calc(var(--s-4) * 100);
$s-480: calc(var(--s-4) * 120);
$s-500: calc(var(--s-4) * 125);
$s-520: calc(var(--s-4) * 130);
$s-664: calc(var(--s-4) * 166);
$s-712: calc(var(--s-4) * 178);

5
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -17,4 +17,9 @@
--color-accent-secondary: var(--lilac);
--color-accent-tertiary: var(--strong-green);
--overlay-color: rgba(0, 0, 0, 0.4);
--ok-color: var(--dark-ok-color);
--warning-color: var(--dark-warning-color);
--pending-color: var(--dark-pending-color);
--error-color: var(--dark-error-color);
--canvas-color: var(--color-canvas);
}

5
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -16,4 +16,9 @@
--color-accent-primary-muted: var(--purple-30);
--color-accent-secondary: var(--blue);
--color-accent-tertiary: var(--strong-purple);
--ok-color: var(--light-ok-color);
--warning-color: var(--light-warning-color);
--pending-color: var(--light-pending-color);
--error-color: var(--light-error-color);
--canvas-color: var(--color-canvas);
}

7
frontend/resources/styles/common/refactor/z-index.scss
View file

@ -4,9 +4,10 @@
//
// Copyright (c) KALEIDOS INC
$z-index-1: 1;
$z-index-2: 2;
$z-index-4: 4;
$z-index-1: 1; // floating elements
$z-index-2: 2; //sidebars
$z-index-3: 3; // context menu
$z-index-4: 4; // modal
$z-index-10: 10;
$z-index-20: 20;
$z-index-modal: 30; // When refactor finish we can reduce this number,

1
frontend/resources/styles/main/layouts/inspect.scss
View file

@ -121,6 +121,7 @@ $width-settings-bar: 256px;
&.settings-bar-right {
width: 100%;
grid-area: right-sidebar;
}
}

4
frontend/resources/styles/main/partials/signup-questions.scss
View file

@ -85,7 +85,7 @@
grid-template-areas: "previous next";
.step-prev {
display: flex;
align-items: end;
align-items: flex-end;
justify-content: flex-start;
grid-area: previous;
button {
@ -99,7 +99,7 @@
.step-next {
display: flex;
align-items: end;
align-items: flex-end;
justify-content: flex-end;
grid-area: next;
input {

2
frontend/resources/styles/main/partials/tab-container.scss
View file

@ -2,7 +2,7 @@
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 100%;
height: 100%;
height: calc(100% - 45px);
}
.tab-container-tabs {

1
frontend/resources/styles/main/partials/workspace-header.scss
View file

@ -322,7 +322,6 @@
display: flex;
margin-left: 0px;
margin-right: 10px;
/* border: 1px solid red; */
width: 150px;
justify-content: flex-end;

4
frontend/resources/styles/main/partials/workspace.scss
View file

@ -161,7 +161,7 @@ $height-palette-max: 80px;
justify-content: center;
align-items: center;
svg#loader-pencil {
svg {
fill: $color-gray-50;
}
}
@ -171,7 +171,7 @@ $height-palette-max: 80px;
display: flex;
padding: 0;
margin: 0;
grid-area: viewport;
&.scrolling {
cursor: grab;
}

2
frontend/src/app/main/ui/components/color_bullet_new.css.json
View file

@ -1 +1 @@
{"button-primary":"components_color_bullet_new_button-primary_pDkQg","button-secondary":"components_color_bullet_new_button-secondary_y3A8V","button-tertiary":"components_color_bullet_new_button-tertiary_zPQ8t","button-tag":"components_color_bullet_new_button-tag_2Ur4i","button-icon":"components_color_bullet_new_button-icon_uAC1e","button-icon-small":"components_color_bullet_new_button-icon-small_rz5pc","asset-element":"components_color_bullet_new_asset-element_s3Yqx","new-scrollbar":"components_color_bullet_new_new-scrollbar_7U23G","color-bullet":"components_color_bullet_new_color-bullet_b1w8U","mini":"components_color_bullet_new_mini_B261Z","is-not-library-color":"components_color_bullet_new_is-not-library-color_PSveA","color-bullet-wrapper":"components_color_bullet_new_color-bullet-wrapper_clt4r","is-gradient":"components_color_bullet_new_is-gradient_6RdV2","is-transparent":"components_color_bullet_new_is-transparent_g0iwn","color-text":"components_color_bullet_new_color-text_HM6mp","small-text":"components_color_bullet_new_small-text_Y4OeK","no-text":"components_color_bullet_new_no-text_pbTQf"}
{"button-primary":"components_color_bullet_new_button-primary_pDkQg","button-secondary":"components_color_bullet_new_button-secondary_y3A8V","button-tertiary":"components_color_bullet_new_button-tertiary_zPQ8t","button-tag":"components_color_bullet_new_button-tag_2Ur4i","button-icon":"components_color_bullet_new_button-icon_uAC1e","button-icon-small":"components_color_bullet_new_button-icon-small_rz5pc","asset-element":"components_color_bullet_new_asset-element_s3Yqx","new-scrollbar":"components_color_bullet_new_new-scrollbar_7U23G","menu-dropdown":"components_color_bullet_new_menu-dropdown_tyRPJ","menu-item":"components_color_bullet_new_menu-item_fPc3j","shortcut":"components_color_bullet_new_shortcut_qAY-Y","shortcut-key":"components_color_bullet_new_shortcut-key_sq-iu","user-icon":"components_color_bullet_new_user-icon_0LhmU","color-bullet":"components_color_bullet_new_color-bullet_b1w8U","mini":"components_color_bullet_new_mini_B261Z","is-not-library-color":"components_color_bullet_new_is-not-library-color_PSveA","color-bullet-wrapper":"components_color_bullet_new_color-bullet-wrapper_clt4r","is-gradient":"components_color_bullet_new_is-gradient_6RdV2","is-transparent":"components_color_bullet_new_is-transparent_g0iwn","color-text":"components_color_bullet_new_color-text_HM6mp","small-text":"components_color_bullet_new_small-text_Y4OeK","no-text":"components_color_bullet_new_no-text_pbTQf","spin-animation":"components_color_bullet_new_spin-animation_X38rj"}

2
frontend/src/app/main/ui/components/context_menu_a11y.css.json
View file

@ -1 +1 @@
{"button-primary":"components_context_menu_a11y_button-primary_FTrG6","button-secondary":"components_context_menu_a11y_button-secondary_tIeiM","button-tertiary":"components_context_menu_a11y_button-tertiary_0A2mW","button-tag":"components_context_menu_a11y_button-tag_iLpM-","context-menu":"components_context_menu_a11y_context-menu_bS2vM","context-menu-items":"components_context_menu_a11y_context-menu-items_lQC7H","context-menu-item":"components_context_menu_a11y_context-menu-item_E2GpJ","selected":"components_context_menu_a11y_selected_on-en","selected-icon":"components_context_menu_a11y_selected-icon_H2S7W","button-icon":"components_context_menu_a11y_button-icon_eOLGl","button-icon-small":"components_context_menu_a11y_button-icon-small_bQvvB","context-menu-action":"components_context_menu_a11y_context-menu-action_E53yg","submenu-back":"components_context_menu_a11y_submenu-back_AboXg","submenu-icon-back":"components_context_menu_a11y_submenu-icon-back_gy-B6","submenu":"components_context_menu_a11y_submenu_MuyM8","submenu-icon":"components_context_menu_a11y_submenu-icon_tWTVU","asset-element":"components_context_menu_a11y_asset-element_r3q1-","new-scrollbar":"components_context_menu_a11y_new-scrollbar_tgX6p","is-open":"components_context_menu_a11y_is-open_FbqIp","fixed":"components_context_menu_a11y_fixed_iJxPr","separator":"components_context_menu_a11y_separator_DrZoB","min-width":"components_context_menu_a11y_min-width_w-ron","is-selected":"components_context_menu_a11y_is-selected_UPMXx","is-selectable":"components_context_menu_a11y_is-selectable_n7sdb"}
{"button-primary":"components_context_menu_a11y_button-primary_FTrG6","button-secondary":"components_context_menu_a11y_button-secondary_tIeiM","button-tertiary":"components_context_menu_a11y_button-tertiary_0A2mW","button-tag":"components_context_menu_a11y_button-tag_iLpM-","context-menu":"components_context_menu_a11y_context-menu_bS2vM","context-menu-items":"components_context_menu_a11y_context-menu-items_lQC7H","context-menu-item":"components_context_menu_a11y_context-menu-item_E2GpJ","selected":"components_context_menu_a11y_selected_on-en","selected-icon":"components_context_menu_a11y_selected-icon_H2S7W","button-icon":"components_context_menu_a11y_button-icon_eOLGl","button-icon-small":"components_context_menu_a11y_button-icon-small_bQvvB","context-menu-action":"components_context_menu_a11y_context-menu-action_E53yg","submenu-back":"components_context_menu_a11y_submenu-back_AboXg","submenu-icon-back":"components_context_menu_a11y_submenu-icon-back_gy-B6","submenu":"components_context_menu_a11y_submenu_MuyM8","submenu-icon":"components_context_menu_a11y_submenu-icon_tWTVU","asset-element":"components_context_menu_a11y_asset-element_r3q1-","new-scrollbar":"components_context_menu_a11y_new-scrollbar_tgX6p","menu-dropdown":"components_context_menu_a11y_menu-dropdown_-wxYa","menu-item":"components_context_menu_a11y_menu-item_J-5tZ","shortcut":"components_context_menu_a11y_shortcut_xHDI7","shortcut-key":"components_context_menu_a11y_shortcut-key_kpESe","user-icon":"components_context_menu_a11y_user-icon_Z4800","is-open":"components_context_menu_a11y_is-open_FbqIp","fixed":"components_context_menu_a11y_fixed_iJxPr","separator":"components_context_menu_a11y_separator_DrZoB","min-width":"components_context_menu_a11y_min-width_w-ron","is-selected":"components_context_menu_a11y_is-selected_UPMXx","is-selectable":"components_context_menu_a11y_is-selectable_n7sdb","spin-animation":"components_context_menu_a11y_spin-animation_QUc-i"}

4
frontend/src/app/main/ui/components/context_menu_a11y.scss
View file

@ -10,7 +10,7 @@
position: relative;
visibility: hidden;
opacity: $op-0;
z-index: $z-index-2;
z-index: $z-index-3;
&.is-open {
position: relative;
@ -23,6 +23,7 @@
}
.context-menu-items {
@include menuShadow;
position: absolute;
top: $s-12;
left: calc(-1 * $s-6);
@ -32,7 +33,6 @@
padding: $s-4;
border-radius: $br-8;
background-color: var(--menu-background-color);
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
overflow: auto;
& .separator {
height: $s-12;

16
frontend/src/app/main/ui/components/dropdown_menu.cljs
View file

@ -20,18 +20,20 @@
{::mf/wrap-props false}
[props]
(let [children (gobj/get props "children")
on-click (gobj/get props "on-click")
on-key-down (gobj/get props "on-key-down")
id (gobj/get props "id")
klass (gobj/get props "klass")
key (gobj/get props "unique-key")
data-test (gobj/get props "data-test")]
(let [children (gobj/get props "children")
on-click (gobj/get props "on-click")
on-key-down (gobj/get props "on-key-down")
on-pointer-enter (gobj/get props "on-pointer-enter")
id (gobj/get props "id")
klass (gobj/get props "klass")
key (gobj/get props "unique-key")
data-test (gobj/get props "data-test")]
[:li {:id id
:class klass
:tab-index "0"
:on-key-down on-key-down
:on-click on-click
:on-pointer-enter on-pointer-enter
:key key
:role "menuitem"
:data-test data-test}

2
frontend/src/app/main/ui/components/editable_label.css.json
View file

@ -1 +1 @@
{"button-primary":"components_editable_label_button-primary_fp-ma","button-secondary":"components_editable_label_button-secondary_QPaT-","button-tertiary":"components_editable_label_button-tertiary_wOORv","button-tag":"components_editable_label_button-tag_pwEqY","button-icon":"components_editable_label_button-icon_acX7H","button-icon-small":"components_editable_label_button-icon-small_tSz5O","asset-element":"components_editable_label_asset-element_Bs5bh","new-scrollbar":"components_editable_label_new-scrollbar_wEEzl","editable-label-input":"components_editable_label_editable-label-input_q2Puk"}
{"button-primary":"components_editable_label_button-primary_fp-ma","button-secondary":"components_editable_label_button-secondary_QPaT-","button-tertiary":"components_editable_label_button-tertiary_wOORv","button-tag":"components_editable_label_button-tag_pwEqY","button-icon":"components_editable_label_button-icon_acX7H","button-icon-small":"components_editable_label_button-icon-small_tSz5O","asset-element":"components_editable_label_asset-element_Bs5bh","new-scrollbar":"components_editable_label_new-scrollbar_wEEzl","menu-dropdown":"components_editable_label_menu-dropdown_3EWKG","menu-item":"components_editable_label_menu-item_lLMBv","shortcut":"components_editable_label_shortcut_sumJi","shortcut-key":"components_editable_label_shortcut-key_ZxlB1","user-icon":"components_editable_label_user-icon_bNZJf","editable-label-input":"components_editable_label_editable-label-input_q2Puk","spin-animation":"components_editable_label_spin-animation_ziMDb"}

2
frontend/src/app/main/ui/components/radio_buttons.css.json
View file

@ -1 +1 @@
{"button-primary":"components_radio_buttons_button-primary_-XZNO","button-secondary":"components_radio_buttons_button-secondary_yj3Oe","button-tertiary":"components_radio_buttons_button-tertiary_s2RvI","radio-icon":"components_radio_buttons_radio-icon_1OnG1","button-tag":"components_radio_buttons_button-tag_4VTp-","button-icon":"components_radio_buttons_button-icon_jP0XC","button-icon-small":"components_radio_buttons_button-icon-small_3AO-R","asset-element":"components_radio_buttons_asset-element_l2wMX","new-scrollbar":"components_radio_buttons_new-scrollbar_m-Mwb","radio-btn-wrapper":"components_radio_buttons_radio-btn-wrapper_mH6QX","checked":"components_radio_buttons_checked_sjVzy"}
{"button-primary":"components_radio_buttons_button-primary_-XZNO","button-secondary":"components_radio_buttons_button-secondary_yj3Oe","button-tertiary":"components_radio_buttons_button-tertiary_s2RvI","radio-icon":"components_radio_buttons_radio-icon_1OnG1","button-tag":"components_radio_buttons_button-tag_4VTp-","button-icon":"components_radio_buttons_button-icon_jP0XC","button-icon-small":"components_radio_buttons_button-icon-small_3AO-R","asset-element":"components_radio_buttons_asset-element_l2wMX","new-scrollbar":"components_radio_buttons_new-scrollbar_m-Mwb","menu-dropdown":"components_radio_buttons_menu-dropdown_Qn0oF","menu-item":"components_radio_buttons_menu-item_SWV2N","shortcut":"components_radio_buttons_shortcut_25Uf9","shortcut-key":"components_radio_buttons_shortcut-key_S2Y64","user-icon":"components_radio_buttons_user-icon_Ab9su","radio-btn-wrapper":"components_radio_buttons_radio-btn-wrapper_mH6QX","checked":"components_radio_buttons_checked_sjVzy","spin-animation":"components_radio_buttons_spin-animation_iz1sC"}

2
frontend/src/app/main/ui/components/search_bar.css.json
View file

@ -1 +1 @@
{"button-primary":"components_search_bar_button-primary_-9D1J","button-secondary":"components_search_bar_button-secondary_GbDgI","button-tertiary":"components_search_bar_button-tertiary_VTCfX","button-tag":"components_search_bar_button-tag_dKink","search-box":"components_search_bar_search-box_AFEzz","search-input-wrapper":"components_search_bar_search-input-wrapper_Djsml","clear":"components_search_bar_clear_B6lfz","button-icon":"components_search_bar_button-icon_CdwNa","button-icon-small":"components_search_bar_button-icon-small_gSOsT","asset-element":"components_search_bar_asset-element_rH-5k","new-scrollbar":"components_search_bar_new-scrollbar_rN-Bt","has-children":"components_search_bar_has-children_u-VSq"}
{"button-primary":"components_search_bar_button-primary_-9D1J","button-secondary":"components_search_bar_button-secondary_GbDgI","button-tertiary":"components_search_bar_button-tertiary_VTCfX","button-tag":"components_search_bar_button-tag_dKink","search-box":"components_search_bar_search-box_AFEzz","search-input-wrapper":"components_search_bar_search-input-wrapper_Djsml","clear":"components_search_bar_clear_B6lfz","button-icon":"components_search_bar_button-icon_CdwNa","button-icon-small":"components_search_bar_button-icon-small_gSOsT","asset-element":"components_search_bar_asset-element_rH-5k","new-scrollbar":"components_search_bar_new-scrollbar_rN-Bt","menu-dropdown":"components_search_bar_menu-dropdown_BDHD4","menu-item":"components_search_bar_menu-item_7wbp0","shortcut":"components_search_bar_shortcut_sPxgB","shortcut-key":"components_search_bar_shortcut-key_fp81A","user-icon":"components_search_bar_user-icon_QZlpB","has-children":"components_search_bar_has-children_u-VSq","spin-animation":"components_search_bar_spin-animation_Uxq5m"}

2
frontend/src/app/main/ui/components/select.css.json
View file

@ -1 +1 @@
{"button-primary":"components_select_button-primary_peYzv","button-secondary":"components_select_button-secondary_Kse6w","button-tertiary":"components_select_button-tertiary_srwoV","button-tag":"components_select_button-tag_AJXtX","button-icon":"components_select_button-icon_86LWm","custom-select":"components_select_custom-select_OM8-6","dropdown-button":"components_select_dropdown-button_IcpuR","button-icon-small":"components_select_button-icon-small_H0Bue","checked-element":"components_select_checked-element_c5-i4","check-icon":"components_select_check-icon_9x082","asset-element":"components_select_asset-element_5vxj7","new-scrollbar":"components_select_new-scrollbar_-E7lz","current-label":"components_select_current-label_CUaQs","custom-select-dropdown":"components_select_custom-select-dropdown_2yZj9","label":"components_select_label_kTY8t","is-selected":"components_select_is-selected_nTUGr"}
{"button-primary":"components_select_button-primary_peYzv","button-secondary":"components_select_button-secondary_Kse6w","button-tertiary":"components_select_button-tertiary_srwoV","button-tag":"components_select_button-tag_AJXtX","button-icon":"components_select_button-icon_86LWm","custom-select":"components_select_custom-select_OM8-6","dropdown-button":"components_select_dropdown-button_IcpuR","button-icon-small":"components_select_button-icon-small_H0Bue","checked-element":"components_select_checked-element_c5-i4","check-icon":"components_select_check-icon_9x082","asset-element":"components_select_asset-element_5vxj7","new-scrollbar":"components_select_new-scrollbar_-E7lz","menu-dropdown":"components_select_menu-dropdown_kxQ7x","menu-item":"components_select_menu-item_ZCcV2","shortcut":"components_select_shortcut_RvVt6","shortcut-key":"components_select_shortcut-key_CLR8L","user-icon":"components_select_user-icon_tLWU4","current-label":"components_select_current-label_CUaQs","custom-select-dropdown":"components_select_custom-select-dropdown_2yZj9","label":"components_select_label_kTY8t","is-selected":"components_select_is-selected_nTUGr","spin-animation":"components_select_spin-animation_YEDae"}

4
frontend/src/app/main/ui/components/select.scss
View file

@ -25,6 +25,7 @@
}
}
.custom-select-dropdown {
@include menuShadow;
position: absolute;
top: $s-32;
left: 0;
@ -33,10 +34,9 @@
margin: 0;
margin-top: $s-4;
border-radius: $br-8;
z-index: $z-index-10;
z-index: $z-index-3;
overflow-y: auto;
background-color: var(--menu-background-color);
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
}
.checked-element {
display: flex;

2
frontend/src/app/main/ui/components/tab_container.css.json
View file

@ -1 +1 @@
{"button-primary":"components_tab_container_button-primary_ibiAz","button-secondary":"components_tab_container_button-secondary_wZR80","button-tertiary":"components_tab_container_button-tertiary_JHJAx","button-tag":"components_tab_container_button-tag_NnL8y","button-icon":"components_tab_container_button-icon_2NhVr","button-icon-small":"components_tab_container_button-icon-small_yU7na","asset-element":"components_tab_container_asset-element_1-YWa","new-scrollbar":"components_tab_container_new-scrollbar_L-puJ","tab-container":"components_tab_container_tab-container_P6HRr","tab-container-content":"components_tab_container_tab-container-content_yfM9F","tab-element":"components_tab_container_tab-element_gBIwV","tab-container-tabs":"components_tab_container_tab-container-tabs_6gXOY","tab-container-tab-wrapper":"components_tab_container_tab-container-tab-wrapper_-ngrN","tab-container-tab-title":"components_tab_container_tab-container-tab-title_IN1Dx","current":"components_tab_container_current_jrovp","collapse-sidebar":"components_tab_container_collapse-sidebar_e5hFv","collapsed":"components_tab_container_collapsed_lfkjK"}
{"button-primary":"components_tab_container_button-primary_ibiAz","button-secondary":"components_tab_container_button-secondary_wZR80","button-tertiary":"components_tab_container_button-tertiary_JHJAx","button-tag":"components_tab_container_button-tag_NnL8y","button-icon":"components_tab_container_button-icon_2NhVr","button-icon-small":"components_tab_container_button-icon-small_yU7na","asset-element":"components_tab_container_asset-element_1-YWa","new-scrollbar":"components_tab_container_new-scrollbar_L-puJ","menu-dropdown":"components_tab_container_menu-dropdown_hkr9S","menu-item":"components_tab_container_menu-item_jbhvD","shortcut":"components_tab_container_shortcut_PBP6z","shortcut-key":"components_tab_container_shortcut-key_eFC8J","user-icon":"components_tab_container_user-icon_pY-wv","tab-container":"components_tab_container_tab-container_P6HRr","tab-container-content":"components_tab_container_tab-container-content_yfM9F","tab-element":"components_tab_container_tab-element_gBIwV","tab-container-tabs":"components_tab_container_tab-container-tabs_6gXOY","tab-container-tab-wrapper":"components_tab_container_tab-container-tab-wrapper_-ngrN","tab-container-tab-title":"components_tab_container_tab-container-tab-title_IN1Dx","current":"components_tab_container_current_jrovp","collapse-sidebar":"components_tab_container_collapse-sidebar_e5hFv","collapsed":"components_tab_container_collapsed_lfkjK","spin-animation":"components_tab_container_spin-animation_mPm0p"}

2
frontend/src/app/main/ui/components/title_bar.css.json
View file

@ -1 +1 @@
{"button-primary":"components_title_bar_button-primary_svLtU","button-secondary":"components_title_bar_button-secondary_JA5NP","button-tertiary":"components_title_bar_button-tertiary_yqQfO","title-bar":"components_title_bar_title-bar_oUkS0","title-button":"components_title_bar_title-button_xTE-7","button-tag":"components_title_bar_button-tag_o9yFT","button-icon":"components_title_bar_button-icon_ROHrz","button-icon-small":"components_title_bar_button-icon-small_WibJp","toggle-btn":"components_title_bar_toggle-btn_9ekUv","collased-icon":"components_title_bar_collased-icon_SJ1ls","asset-element":"components_title_bar_asset-element_64u6f","new-scrollbar":"components_title_bar_new-scrollbar_dkyAb","title":"components_title_bar_title_qPuju","title-only":"components_title_bar_title-only_aSsdC","rotated":"components_title_bar_rotated_9z7Rn"}
{"button-primary":"components_title_bar_button-primary_svLtU","button-secondary":"components_title_bar_button-secondary_JA5NP","button-tertiary":"components_title_bar_button-tertiary_yqQfO","title-bar":"components_title_bar_title-bar_oUkS0","title-button":"components_title_bar_title-button_xTE-7","button-tag":"components_title_bar_button-tag_o9yFT","button-icon":"components_title_bar_button-icon_ROHrz","button-icon-small":"components_title_bar_button-icon-small_WibJp","toggle-btn":"components_title_bar_toggle-btn_9ekUv","collased-icon":"components_title_bar_collased-icon_SJ1ls","asset-element":"components_title_bar_asset-element_64u6f","new-scrollbar":"components_title_bar_new-scrollbar_dkyAb","menu-dropdown":"components_title_bar_menu-dropdown_uk31D","menu-item":"components_title_bar_menu-item_cGiAC","shortcut":"components_title_bar_shortcut_M9Wv0","shortcut-key":"components_title_bar_shortcut-key_w8Q95","user-icon":"components_title_bar_user-icon_FMwxz","title":"components_title_bar_title_qPuju","title-only":"components_title_bar_title-only_aSsdC","rotated":"components_title_bar_rotated_9z7Rn","spin-animation":"components_title_bar_spin-animation_7EFXa"}

2
frontend/src/app/main/ui/debug/components_preview.css.json
View file

@ -1 +1 @@
{"button-primary":"debug_components_preview_button-primary_Q2m40","button-secondary":"debug_components_preview_button-secondary_yPp3n","button-tertiary":"debug_components_preview_button-tertiary_FIKgJ","button-tag":"debug_components_preview_button-tag_NNepE","button-icon":"debug_components_preview_button-icon_J36A6","button-icon-small":"debug_components_preview_button-icon-small_Pf3jb","asset-element":"debug_components_preview_asset-element_LhcNS","new-scrollbar":"debug_components_preview_new-scrollbar_KrmL7","themes-row":"debug_components_preview_themes-row_wEU8d","wrapper":"debug_components_preview_wrapper_535-4","rect":"debug_components_preview_rect_jomnq","bg-primary":"debug_components_preview_bg-primary_Rt4oW","bg-secondary":"debug_components_preview_bg-secondary_rcmll","bg-tertiary":"debug_components_preview_bg-tertiary_7rITE","bg-cuaternary":"debug_components_preview_bg-cuaternary_UEBPN","fg-primary":"debug_components_preview_fg-primary_naliT","fg-secondary":"debug_components_preview_fg-secondary_zT9IX","acc":"debug_components_preview_acc_h3Bia","acc-muted":"debug_components_preview_acc-muted_uingh","acc-secondary":"debug_components_preview_acc-secondary_oHH6y","acc-tertiary":"debug_components_preview_acc-tertiary_SwBjy","components-row":"debug_components_preview_components-row_N3f-J","title":"debug_components_preview_title_TVtzz","components-wrapper":"debug_components_preview_components-wrapper_A8IgV","component-group":"debug_components_preview_component-group_dI55k","component":"debug_components_preview_component_xBMSU","component-name":"debug_components_preview_component-name_3ZJMW"}
{"button-primary":"debug_components_preview_button-primary_Q2m40","button-secondary":"debug_components_preview_button-secondary_yPp3n","button-tertiary":"debug_components_preview_button-tertiary_FIKgJ","button-tag":"debug_components_preview_button-tag_NNepE","button-icon":"debug_components_preview_button-icon_J36A6","button-icon-small":"debug_components_preview_button-icon-small_Pf3jb","asset-element":"debug_components_preview_asset-element_LhcNS","new-scrollbar":"debug_components_preview_new-scrollbar_KrmL7","menu-dropdown":"debug_components_preview_menu-dropdown_1-d0F","menu-item":"debug_components_preview_menu-item_xb46E","shortcut":"debug_components_preview_shortcut_RsfIk","shortcut-key":"debug_components_preview_shortcut-key_5y-OI","user-icon":"debug_components_preview_user-icon_JBBfp","themes-row":"debug_components_preview_themes-row_wEU8d","wrapper":"debug_components_preview_wrapper_535-4","rect":"debug_components_preview_rect_jomnq","bg-primary":"debug_components_preview_bg-primary_Rt4oW","bg-secondary":"debug_components_preview_bg-secondary_rcmll","bg-tertiary":"debug_components_preview_bg-tertiary_7rITE","bg-cuaternary":"debug_components_preview_bg-cuaternary_UEBPN","fg-primary":"debug_components_preview_fg-primary_naliT","fg-secondary":"debug_components_preview_fg-secondary_zT9IX","acc":"debug_components_preview_acc_h3Bia","acc-muted":"debug_components_preview_acc-muted_uingh","acc-secondary":"debug_components_preview_acc-secondary_oHH6y","acc-tertiary":"debug_components_preview_acc-tertiary_SwBjy","components-row":"debug_components_preview_components-row_N3f-J","title":"debug_components_preview_title_TVtzz","components-wrapper":"debug_components_preview_components-wrapper_A8IgV","component-group":"debug_components_preview_component-group_dI55k","component":"debug_components_preview_component_xBMSU","component-name":"debug_components_preview_component-name_3ZJMW","spin-animation":"debug_components_preview_spin-animation_WfTTo"}

47
frontend/src/app/main/ui/export.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.export
"Assets exportation common components."
(:require-macros [app.main.style :as stl])
(:require
[app.common.colors :as clr]
[app.common.data :as d]
@ -14,6 +15,7 @@
[app.main.data.modal :as modal]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.shapes :refer [shape-wrapper]]
[app.util.dom :as dom]
@ -169,7 +171,8 @@
(mf/defc export-progress-widget
{::mf/wrap [mf/memo]}
[]
(let [state (mf/deref refs/export)
(let [new-css-system (mf/use-ctx ctx/new-css-system)
state (mf/deref refs/export)
error? (:error state)
healthy? (:healthy? state)
detail-visible? (:detail-visible state)
@ -184,10 +187,15 @@
pwidth (if error?
280
(/ (* progress 280) total))
color (cond
color (if new-css-system
(cond
error? clr/new-danger
healthy? clr/new-primary
(not healthy?) clr/new-warning)
(cond
error? clr/danger
healthy? clr/primary
(not healthy?) clr/warning)
(not healthy?) clr/warning))
title (cond
error? (tr "workspace.options.exporting-object-error")
complete? (tr "workspace.options.exporting-complete")
@ -200,7 +208,36 @@
toggle-detail-visibility
(mf/use-fn #(st/emit! (de/toggle-detail-visibililty)))]
[:*
(if new-css-system
(when detail-visible?
[:div {:class (stl/css :export-progress-modal-overlay)}
[:div {:class (stl/css :export-progress-modal-container)}
[:div {:class (stl/css :export-progress-modal-header)}
[:p {:class (stl/css :export-progress-modal-title)}
[:span {:class (stl/css :title-text)}
title]
(if error?
[:button {:class (stl/css :retry-btn)
:on-click retry-last-export} (tr "workspace.options.retry")]
[:p {:class (stl/css :progress)} (dm/str progress " / " total)])]
[:button {:class (stl/css :modal-close-button)
:on-click toggle-detail-visibility} i/close-refactor]]
[:svg {:class (stl/css :progress-bar)
:height 5 :width 280}
[:g
[:path {:d "M0 0 L280 0"
:stroke clr/black
:stroke-width 30}]
[:path {:d (dm/str "M0 0 L280 0")
:stroke color
:stroke-width 30
:fill "transparent"
:stroke-dasharray 280
:stroke-dashoffset (- 280 pwidth)
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])
[:*
(when widget-visible?
[:div.export-progress-widget {:on-click toggle-detail-visibility}
[:svg {:width "32" :height "32"}
@ -243,5 +280,5 @@
:fill "transparent"
:stroke-dasharray 280
:stroke-dashoffset (- 280 pwidth)
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])]))
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])])))

1
frontend/src/app/main/ui/export.css.json Normal file
View file

@ -0,0 +1 @@
{"button-primary":"ui_export_button-primary_dgIrA","button-secondary":"ui_export_button-secondary_5H2Cl","button-tertiary":"ui_export_button-tertiary_8kym9","export-progress-modal-overlay":"ui_export_export-progress-modal-overlay_AAFul","export-progress-modal-container":"ui_export_export-progress-modal-container_1pPaw","export-progress-modal-header":"ui_export_export-progress-modal-header_aulHx","modal-close-button":"ui_export_modal-close-button_zi01-","export-progress-modal-title":"ui_export_export-progress-modal-title_DJyJK","retry-btn":"ui_export_retry-btn_61ygN","button-tag":"ui_export_button-tag_AaPgd","button-icon":"ui_export_button-icon_xc1O3","button-icon-small":"ui_export_button-icon-small_7Gu5A","asset-element":"ui_export_asset-element_jhF3N","new-scrollbar":"ui_export_new-scrollbar_sAcwV","menu-dropdown":"ui_export_menu-dropdown_O3IGG","menu-item":"ui_export_menu-item_J9ztX","shortcut":"ui_export_shortcut_PS6FL","shortcut-key":"ui_export_shortcut-key_F--h2","user-icon":"ui_export_user-icon_3goUU","title-text":"ui_export_title-text_B1EGQ","progress":"ui_export_progress_toR5B","progress-bar":"ui_export_progress-bar_Avs-j","spin-animation":"ui_export_spin-animation_aAhh4"}

67
frontend/src/app/main/ui/export.scss Normal file
View file

@ -0,0 +1,67 @@
// 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
@import "refactor/common-refactor.scss";
.export-progress-modal-overlay {
display: flex;
justify-content: center;
position: fixed;
right: $s-16;
top: $s-48;
background-color: var(--modal-background-color);
border-radius: $br-8;
z-index: $z-index-20;
overflow: hidden;
.export-progress-modal-container {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
width: 100%;
.export-progress-modal-header {
display: flex;
align-items: center;
justify-content: stretch;
padding: $s-8;
.export-progress-modal-title {
display: flex;
flex-grow: 1;
padding: 0;
margin: 0;
.title-text {
@include flexCenter;
@include titleTipography;
padding: 0;
margin: 0;
color: var(--modal-foreground-color);
padding-left: $s-4;
}
.progress {
@include titleTipography;
padding-left: $s-8;
margin: 0;
color: var(--modal-foreground-color-secondary);
}
.retry-btn {
@extend .button-tertiary;
@include titleTipography;
}
}
.modal-close-button {
@extend .button-tertiary;
svg {
@extend .button-icon-small;
}
}
}
.progress-bar {
margin-top: 0;
}
}
}

5
frontend/src/app/main/ui/icons.cljs
View file

@ -357,6 +357,7 @@
(def padding-extended-refactor (icon-xref :padding-extended-refactor))
(def path-refactor (icon-xref :path-refactor))
(def pentool-refactor (icon-xref :pentool-refactor))
(def play-refactor (icon-xref :play-refactor))
(def rectangle-refactor (icon-xref :rectangle-refactor))
(def remove-refactor (icon-xref :remove-refactor))
(def rotation-refactor (icon-xref :rotation-refactor))
@ -365,6 +366,10 @@
(def size-horizontal-refactor (icon-xref :size-horizontal-refactor))
(def size-vertical-refactor (icon-xref :size-vertical-refactor))
(def shown-refactor (icon-xref :shown-refactor))
(def status-alert-refactor (icon-xref :status-alert-refactor))
(def status-update-refactor (icon-xref :status-update-refactor))
(def status-tick-refactor (icon-xref :status-tick-refactor))
(def status-wrong-refactor (icon-xref :status-wrong-refactor))
(def stroke-size-refactor (icon-xref :stroke-size-refactor))
(def svg-refactor (icon-xref :svg-refactor))
(def swatches-refactor (icon-xref :swatches-refactor))

2
frontend/src/app/main/ui/modal.css.json
View file

@ -1 +1 @@
{"button-primary":"ui_modal_button-primary_f2CEg","button-secondary":"ui_modal_button-secondary_1wH6N","button-tertiary":"ui_modal_button-tertiary_vNip8","button-tag":"ui_modal_button-tag_pLwhJ","button-icon":"ui_modal_button-icon_aRFFQ","button-icon-small":"ui_modal_button-icon-small_HY5lR","asset-element":"ui_modal_asset-element_43PW9","new-scrollbar":"ui_modal_new-scrollbar_zPDI7","modal-wrapper":"ui_modal_modal-wrapper_NLvfo"}
{"button-primary":"ui_modal_button-primary_f2CEg","button-secondary":"ui_modal_button-secondary_1wH6N","button-tertiary":"ui_modal_button-tertiary_vNip8","button-tag":"ui_modal_button-tag_pLwhJ","button-icon":"ui_modal_button-icon_aRFFQ","button-icon-small":"ui_modal_button-icon-small_HY5lR","asset-element":"ui_modal_asset-element_43PW9","new-scrollbar":"ui_modal_new-scrollbar_zPDI7","modal-wrapper":"ui_modal_modal-wrapper_NLvfo","menu-dropdown":"ui_modal_menu-dropdown_G1sWX","menu-item":"ui_modal_menu-item_5LLIh","shortcut":"ui_modal_shortcut_6E-Cq","shortcut-key":"ui_modal_shortcut-key_GaCtX","user-icon":"ui_modal_user-icon_ZrqXs","spin-animation":"ui_modal_spin-animation_yREim"}

7
frontend/src/app/main/ui/viewer/inspect.cljs
View file

@ -67,7 +67,7 @@
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move]
set-right-size :set-size
right-size :size}
(use-resize-hook :code 256 256 768 :x true :right)
(use-resize-hook :code 276 276 768 :x true :right)
handle-change-section
(mf/use-callback
@ -77,7 +77,7 @@
handle-expand
(mf/use-callback
(mf/deps right-size)
#(set-right-size (if (> right-size 256) 256 768)))]
#(set-right-size (if (> right-size 276) 276 768)))]
(mf/use-effect on-mount)
@ -108,5 +108,4 @@
:file file
:on-change-section handle-change-section
:on-expand handle-expand
:share-id share-id
}]]]))
:share-id share-id}]]]))

57
frontend/src/app/main/ui/workspace.cljs
View file

@ -112,15 +112,21 @@
[:& left-toolbar {:layout layout}]
(if (:collapse-left-sidebar layout)
[:& collapsed-button]
[:& left-sidebar {:layout layout}])
[:& left-sidebar {:layout layout
:file file
:page-id page-id}])
[:& right-sidebar {:section options-mode
:selected selected
:layout layout}]])]))
:layout layout
:file file
:page-id page-id}]])]))
(mf/defc workspace-loader
[]
[:div.workspace-loader
i/loader-pencil])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
[:div {:class (if new-css-system (css :workspace-loader)
(dom/classnames :workspace-loader true))}
i/loader-pencil]))
(mf/defc workspace-page
{::mf/wrap-props false}
@ -195,23 +201,36 @@
[:& (mf/provider ctx/components-v2) {:value components-v2?}
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
[:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
[:section#workspace {:class (when new-css-system (css :workspace))
:style {:background-color background-color
:touch-action "none"}}
(when (not (:hide-ui layout))
[:& header {:file file
:page-id page-id
:project project
:layout layout}])
(if new-css-system
[:section#workspace-refactor {:class (css :workspace)
:style {:background-color background-color
:touch-action "none"}}
[:& context-menu]
[:& context-menu]
(if ^boolean file-ready?
[:& workspace-page {:page-id page-id
:file file
:wglobal wglobal
:layout layout}]
[:& workspace-loader])]
(if ^boolean file-ready?
[:& workspace-page {:page-id page-id
:file file
:wglobal wglobal
:layout layout}]
[:& workspace-loader])]]]]]]]]))
[:section#workspace {:style {:background-color background-color
:touch-action "none"}}
(when (not (:hide-ui layout))
[:& header {:file file
:page-id page-id
:project project
:layout layout}])
[:& context-menu]
(if ^boolean file-ready?
[:& workspace-page {:page-id page-id
:file file
:wglobal wglobal
:layout layout}]
[:& workspace-loader])])]]]]]]]))
(mf/defc remove-graphics-dialog
{::mf/register modal/components

2
frontend/src/app/main/ui/workspace.css.json
View file

@ -1 +1 @@
{"button-primary":"ui_workspace_button-primary_FZJ-T","button-secondary":"ui_workspace_button-secondary_oDzCJ","button-tertiary":"ui_workspace_button-tertiary_LVpr3","button-tag":"ui_workspace_button-tag_cU1Th","button-icon":"ui_workspace_button-icon_L5y8h","button-icon-small":"ui_workspace_button-icon-small_Ppp3W","asset-element":"ui_workspace_asset-element_LTbhl","new-scrollbar":"ui_workspace_new-scrollbar_tkRN6","workspace":"ui_workspace_workspace_xutJr"}
{"button-primary":"ui_workspace_button-primary_FZJ-T","button-secondary":"ui_workspace_button-secondary_oDzCJ","button-tertiary":"ui_workspace_button-tertiary_LVpr3","button-tag":"ui_workspace_button-tag_cU1Th","button-icon":"ui_workspace_button-icon_L5y8h","button-icon-small":"ui_workspace_button-icon-small_Ppp3W","asset-element":"ui_workspace_asset-element_LTbhl","new-scrollbar":"ui_workspace_new-scrollbar_tkRN6","workspace":"ui_workspace_workspace_xutJr","menu-dropdown":"ui_workspace_menu-dropdown_C5UnV","menu-item":"ui_workspace_menu-item_JOhDR","shortcut":"ui_workspace_shortcut_ksV9H","shortcut-key":"ui_workspace_shortcut-key_Npd85","user-icon":"ui_workspace_user-icon_-DyAD","workspace-loader":"ui_workspace_workspace-loader_INSav","spin-animation":"ui_workspace_spin-animation_kD9o3"}

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

@ -1,3 +1,9 @@
// 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
@import "refactor/common-refactor.scss";
// Work Sans
@ -15,4 +21,21 @@
.workspace {
@extend .new-scrollbar;
width: 100vw;
height: 100%;
user-select: none;
display: grid;
grid-template-areas: "left-sidebar viewport right-sidebar";
grid-template-rows: 1fr;
grid-template-columns: auto 1fr auto;
.workspace-loader {
display: flex;
justify-content: center;
align-items: center;
grid-area: viewport;
svg {
fill: var(--icon-foreground);
}
}
}

2
frontend/src/app/main/ui/workspace/color_palette.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_color_palette_button-primary_0d2e2","button-secondary":"workspace_color_palette_button-secondary_C8qJL","button-tertiary":"workspace_color_palette_button-tertiary_X6-9C","button-tag":"workspace_color_palette_button-tag_GtZK2","button-icon":"workspace_color_palette_button-icon_-tBR6","color-palette":"workspace_color_palette_color-palette_hfJPA","left-arrow":"workspace_color_palette_left-arrow_PK7sj","right-arrow":"workspace_color_palette_right-arrow_swpS9","button-icon-small":"workspace_color_palette_button-icon-small_RrGTg","asset-element":"workspace_color_palette_asset-element_3Q2Mp","new-scrollbar":"workspace_color_palette_new-scrollbar_ChE0u","disabled":"workspace_color_palette_disabled_bz-he","color-palette-content":"workspace_color_palette_color-palette-content_okg18","color-palette-inside":"workspace_color_palette_color-palette-inside_dCIeR","color-cell":"workspace_color_palette_color-cell_ITDgl","is-not-library-color":"workspace_color_palette_is-not-library-color_EqCM6","no-text":"workspace_color_palette_no-text_QMPK0"}
{"button-primary":"workspace_color_palette_button-primary_0d2e2","button-secondary":"workspace_color_palette_button-secondary_C8qJL","button-tertiary":"workspace_color_palette_button-tertiary_X6-9C","button-tag":"workspace_color_palette_button-tag_GtZK2","button-icon":"workspace_color_palette_button-icon_-tBR6","color-palette":"workspace_color_palette_color-palette_hfJPA","left-arrow":"workspace_color_palette_left-arrow_PK7sj","right-arrow":"workspace_color_palette_right-arrow_swpS9","button-icon-small":"workspace_color_palette_button-icon-small_RrGTg","asset-element":"workspace_color_palette_asset-element_3Q2Mp","new-scrollbar":"workspace_color_palette_new-scrollbar_ChE0u","menu-dropdown":"workspace_color_palette_menu-dropdown_VygMh","menu-item":"workspace_color_palette_menu-item_y2vU0","shortcut":"workspace_color_palette_shortcut_CFccJ","shortcut-key":"workspace_color_palette_shortcut-key_5etoa","user-icon":"workspace_color_palette_user-icon_eRKoT","disabled":"workspace_color_palette_disabled_bz-he","color-palette-content":"workspace_color_palette_color-palette-content_okg18","color-palette-inside":"workspace_color_palette_color-palette-inside_dCIeR","color-cell":"workspace_color_palette_color-cell_ITDgl","is-not-library-color":"workspace_color_palette_is-not-library-color_EqCM6","no-text":"workspace_color_palette_no-text_QMPK0","spin-animation":"workspace_color_palette_spin-animation_LKFRB"}

2
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_color_palette_ctx_menu_button-primary_2ka4z","button-secondary":"workspace_color_palette_ctx_menu_button-secondary_jfajf","button-tertiary":"workspace_color_palette_ctx_menu_button-tertiary_NLctS","button-tag":"workspace_color_palette_ctx_menu_button-tag_GN3ad","button-icon":"workspace_color_palette_ctx_menu_button-icon_cCaY2","button-icon-small":"workspace_color_palette_ctx_menu_button-icon-small_-knT4","palette-menu":"workspace_color_palette_ctx_menu_palette-menu_Vrjfy","palette-library":"workspace_color_palette_ctx_menu_palette-library_0LFV5","selected":"workspace_color_palette_ctx_menu_selected_lfchf","option-wrapper":"workspace_color_palette_ctx_menu_option-wrapper_st9Cq","library-name":"workspace_color_palette_ctx_menu_library-name_BL8b8","icon-wrapper":"workspace_color_palette_ctx_menu_icon-wrapper_v8-ys","recent-colors":"workspace_color_palette_ctx_menu_recent-colors_Q4fss","file-library":"workspace_color_palette_ctx_menu_file-library_8qsbr","asset-element":"workspace_color_palette_ctx_menu_asset-element_pV16m","new-scrollbar":"workspace_color_palette_ctx_menu_new-scrollbar_0BINh","lib-name-wrapper":"workspace_color_palette_ctx_menu_lib-name-wrapper_-F9D4","lib-name":"workspace_color_palette_ctx_menu_lib-name_VPSM1","lib-num":"workspace_color_palette_ctx_menu_lib-num_neRQe","color-sample":"workspace_color_palette_ctx_menu_color-sample_jQUGL"}
{"button-primary":"workspace_color_palette_ctx_menu_button-primary_2ka4z","button-secondary":"workspace_color_palette_ctx_menu_button-secondary_jfajf","button-tertiary":"workspace_color_palette_ctx_menu_button-tertiary_NLctS","button-tag":"workspace_color_palette_ctx_menu_button-tag_GN3ad","button-icon":"workspace_color_palette_ctx_menu_button-icon_cCaY2","button-icon-small":"workspace_color_palette_ctx_menu_button-icon-small_-knT4","palette-menu":"workspace_color_palette_ctx_menu_palette-menu_Vrjfy","palette-library":"workspace_color_palette_ctx_menu_palette-library_0LFV5","selected":"workspace_color_palette_ctx_menu_selected_lfchf","option-wrapper":"workspace_color_palette_ctx_menu_option-wrapper_st9Cq","library-name":"workspace_color_palette_ctx_menu_library-name_BL8b8","icon-wrapper":"workspace_color_palette_ctx_menu_icon-wrapper_v8-ys","recent-colors":"workspace_color_palette_ctx_menu_recent-colors_Q4fss","file-library":"workspace_color_palette_ctx_menu_file-library_8qsbr","asset-element":"workspace_color_palette_ctx_menu_asset-element_pV16m","new-scrollbar":"workspace_color_palette_ctx_menu_new-scrollbar_0BINh","menu-dropdown":"workspace_color_palette_ctx_menu_menu-dropdown_3nduz","menu-item":"workspace_color_palette_ctx_menu_menu-item_hVz--","shortcut":"workspace_color_palette_ctx_menu_shortcut_jqDHK","shortcut-key":"workspace_color_palette_ctx_menu_shortcut-key_VPYPv","user-icon":"workspace_color_palette_ctx_menu_user-icon_wv-bR","lib-name-wrapper":"workspace_color_palette_ctx_menu_lib-name-wrapper_-F9D4","lib-name":"workspace_color_palette_ctx_menu_lib-name_VPSM1","lib-num":"workspace_color_palette_ctx_menu_lib-num_neRQe","color-sample":"workspace_color_palette_ctx_menu_color-sample_jQUGL","spin-animation":"workspace_color_palette_ctx_menu_spin-animation_WUYef"}

2
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
View file

@ -13,7 +13,7 @@
bottom: $s-0;
padding: $s-4;
margin: 0 0 $s-4 0;
z-index: $z-index-10;
z-index: $z-index-3;
border-radius: $br-10;
background-color: var(--context-menu-background-color);

2
frontend/src/app/main/ui/workspace/context_menu.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_context_menu_button-primary_d6q-P","button-secondary":"workspace_context_menu_button-secondary_bIdqe","button-tertiary":"workspace_context_menu_button-tertiary_vGSns","button-tag":"workspace_context_menu_button-tag_rOUbd","button-icon":"workspace_context_menu_button-icon_tXvxe","button-icon-small":"workspace_context_menu_button-icon-small_c0rVU","workspace-context-menu":"workspace_context_menu_workspace-context-menu_2NyvR","icon-menu-item":"workspace_context_menu_icon-menu-item_P3-bA","shape-icon":"workspace_context_menu_shape-icon_xx1Ll","workspace-context-submenu":"workspace_context_menu_workspace-context-submenu_BUNLt","selected-icon":"workspace_context_menu_selected-icon_pZqBp","context-menu-item":"workspace_context_menu_context-menu-item_Tx-Ty","submenu-icon":"workspace_context_menu_submenu-icon_JwYm8","asset-element":"workspace_context_menu_asset-element_jkrbj","new-scrollbar":"workspace_context_menu_new-scrollbar_xGQzu","separator":"workspace_context_menu_separator_E9-aR","title":"workspace_context_menu_title_P8iFL","shortcut":"workspace_context_menu_shortcut_rypUe","shortcut-key":"workspace_context_menu_shortcut-key_3rF3t","icon-wrapper":"workspace_context_menu_icon-wrapper_n7VO2"}
{"button-primary":"workspace_context_menu_button-primary_d6q-P","button-secondary":"workspace_context_menu_button-secondary_bIdqe","button-tertiary":"workspace_context_menu_button-tertiary_vGSns","button-tag":"workspace_context_menu_button-tag_rOUbd","button-icon":"workspace_context_menu_button-icon_tXvxe","button-icon-small":"workspace_context_menu_button-icon-small_c0rVU","workspace-context-menu":"workspace_context_menu_workspace-context-menu_2NyvR","icon-menu-item":"workspace_context_menu_icon-menu-item_P3-bA","shape-icon":"workspace_context_menu_shape-icon_xx1Ll","workspace-context-submenu":"workspace_context_menu_workspace-context-submenu_BUNLt","selected-icon":"workspace_context_menu_selected-icon_pZqBp","context-menu-item":"workspace_context_menu_context-menu-item_Tx-Ty","submenu-icon":"workspace_context_menu_submenu-icon_JwYm8","asset-element":"workspace_context_menu_asset-element_jkrbj","new-scrollbar":"workspace_context_menu_new-scrollbar_xGQzu","menu-dropdown":"workspace_context_menu_menu-dropdown_UF-Oq","menu-item":"workspace_context_menu_menu-item_uHHBH","shortcut":"workspace_context_menu_shortcut_rypUe","shortcut-key":"workspace_context_menu_shortcut-key_3rF3t","user-icon":"workspace_context_menu_user-icon_pLDVU","separator":"workspace_context_menu_separator_E9-aR","title":"workspace_context_menu_title_P8iFL","icon-wrapper":"workspace_context_menu_icon-wrapper_n7VO2","spin-animation":"workspace_context_menu_spin-animation_Y8j2J"}

4
frontend/src/app/main/ui/workspace/context_menu.scss
View file

@ -8,6 +8,7 @@
.workspace-context-menu,
.workspace-context-submenu {
@include menuShadow;
position: absolute;
top: $s-40;
left: $s-736;
@ -17,8 +18,7 @@
padding: $s-4;
border-radius: $br-8;
background-color: var(--menu-background-color);
z-index: $z-index-20;
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
z-index: $z-index-3;
.separator {
height: $s-12;
}

830
frontend/src/app/main/ui/workspace/left_header.cljs Normal file
View file

@ -0,0 +1,830 @@
;; 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
(ns app.main.ui.workspace.left-header (:require-macros [app.main.style :as stl])
(:require
[app.common.pages.helpers :as cph]
[app.common.uuid :as uuid]
[app.config :as cf]
[app.main.data.events :as ev]
[app.main.data.exports :as de]
[app.main.data.modal :as modal]
[app.main.data.shortcuts :as scd]
[app.main.data.workspace :as dw]
[app.main.data.workspace.colors :as dc]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.shortcuts :as sc]
[app.main.refs :as refs]
[app.main.repo :as rp]
[app.main.store :as st]
[app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item]]
[app.main.ui.context :as ctx]
[app.main.ui.hooks.resize :as r]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.router :as rt]
[beicon.core :as rx]
[cuerdas.core :as str]
[potok.core :as ptk]
[rumext.v2 :as mf]))
;; --- Header menu and submenus
(mf/defc help-info-menu
{::mf/wrap-props false
::mf/wrap [mf/memo]}
[{:keys [layout on-close]}]
(let [nav-to-helpc-center
(mf/use-fn #(dom/open-new-window "https://help.penpot.app"))
nav-to-community
(mf/use-fn #(dom/open-new-window "https://community.penpot.app"))
nav-to-youtube
(mf/use-fn #(dom/open-new-window "https://www.youtube.com/c/Penpot"))
nav-to-templates
(mf/use-fn #(dom/open-new-window "https://penpot.app/libraries-templates"))
nav-to-github
(mf/use-fn #(dom/open-new-window "https://github.com/penpot/penpot"))
nav-to-terms
(mf/use-fn #(dom/open-new-window "https://penpot.app/terms"))
nav-to-feedback
(mf/use-fn #(st/emit! (rt/nav-new-window* {:rname :settings-feedback})))
show-shortcuts
(mf/use-fn
(mf/deps layout)
(fn []
(when (contains? layout :collapse-left-sidebar)
(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
(st/emit!
(-> (dw/toggle-layout-flag :shortcuts)
(vary-meta assoc ::ev/origin "workspace-header")))))
show-release-notes
(mf/use-fn
(fn [event]
(let [version (:main cf/version)]
(st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version}))
(if (and (kbd/alt? event) (kbd/mod? event))
(st/emit! (modal/show {:type :onboarding}))
(st/emit! (modal/show {:type :release-notes :version version}))))))]
[:& dropdown-menu {:show true
:on-close on-close
:list-class (stl/css-case :sub-menu true
:help-info true)}
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click nav-to-helpc-center
:on-key-down (fn [event]
(when (kbd/enter? event)
(nav-to-helpc-center event)))
:id "file-menu-help-center"
:unique-key "file-menu-help-center"}
[:span {:class (stl/css :item-name)} (tr "labels.help-center")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click nav-to-community
:on-key-down (fn [event]
(when (kbd/enter? event)
(nav-to-community event)))
:id "file-menu-community"
:unique-key "file-menu-community"}
[:span {:class (stl/css :item-name)} (tr "labels.community")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click nav-to-youtube
:on-key-down (fn [event]
(when (kbd/enter? event)
(nav-to-youtube event)))
:id "file-menu-youtube"
:unique-key "file-menu-youtube"}
[:span {:class (stl/css :item-name)} (tr "labels.tutorials")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click show-release-notes
:on-key-down (fn [event]
(when (kbd/enter? event)
(show-release-notes event)))
:id "file-menu-release-notes"
:unique-key "file-menu-release-notes"}
[:span {:class (stl/css :item-name)} (tr "labels.release-notes")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click nav-to-templates
:on-key-down (fn [event]
(when (kbd/enter? event)
(nav-to-templates event)))
:id "file-menu-templates"
:unique-key "file-menu-templates"}
[:span {:class (stl/css :item-name)} (tr "labels.libraries-and-templates")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click nav-to-github
:on-key-down (fn [event]
(when (kbd/enter? event)
(nav-to-github event)))
:id "file-menu-github"
:unique-key "file-menu-github"}
[:span {:class (stl/css :item-name)} (tr "labels.github-repo")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click nav-to-terms
:on-key-down (fn [event]
(when (kbd/enter? event)
(nav-to-terms event)))
:id "file-menu-terms"
:unique-key "file-menu-terms"}
[:span {:class (stl/css :item-name)} (tr "auth.terms-of-service")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click show-shortcuts
:on-key-down (fn [event]
(when (kbd/enter? event)
(show-shortcuts event)))
:id "file-menu-shortcuts"
:unique-key "file-menu-shortcuts"}
[:span {:class (stl/css :item-name)} (tr "label.shortcuts")]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :show-shortcuts))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
(when (contains? cf/flags :user-feedback)
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click nav-to-feedback
:on-key-down (fn [event]
(when (kbd/enter? event)
(nav-to-feedback event)))
:id "file-menu-feedback"
:unique-key "file-menu-feedback"}
[:span {:class (stl/css-case :feedback true
:item-name true)} (tr "labels.give-feedback")]])]))
(mf/defc preferences-menu
{::mf/wrap-props false
::mf/wrap [mf/memo]}
[{:keys [layout toggle-flag on-close]}]
(let [show-nudge-options (mf/use-fn #(modal/show! {:type :nudge-option}))]
[:& dropdown-menu {:show true
:list-class (stl/css-case :sub-menu true
:preferences true)
:on-close on-close}
[:& dropdown-menu-item {:on-click toggle-flag
:klass (stl/css :submenu-item)
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "scale.-text"
:id "file-menu-scale-text"
:unique-key "file-menu-scale-text"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :scale-text)
(tr "workspace.header.menu.disable-scale-content")
(tr "workspace.header.menu.enable-scale-content"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-scale-text))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:on-click toggle-flag
:klass (stl/css :submenu-item)
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "snap-guides"
:id "file-menu-snap-guides"
:unique-key "file-menu-snap-guides"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :snap-guides)
(tr "workspace.header.menu.disable-snap-guides")
(tr "workspace.header.menu.enable-snap-guides"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-guide))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:on-click toggle-flag
:klass (stl/css :submenu-item)
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "snap-grid"
:id "file-menu-snap-grid"
:unique-key "file-menu-snap-grid"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :snap-grid)
(tr "workspace.header.menu.disable-snap-grid")
(tr "workspace.header.menu.enable-snap-grid"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-grid))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:on-click toggle-flag
:klass (stl/css :submenu-item)
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "dynamic-alignment"
:id "file-menu-dynamic-alignment"
:unique-key "file-menu-dynamic-alignment"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :dynamic-alignment)
(tr "workspace.header.menu.disable-dynamic-alignment")
(tr "workspace.header.menu.enable-dynamic-alignment"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-alignment))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:on-click toggle-flag
:klass (stl/css :submenu-item)
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "snap-pixel-grid"
:id "file-menu-pixel-grid"
:unique-key "file-menu-pixel-grid"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :snap-pixel-grid)
(tr "workspace.header.menu.disable-snap-pixel-grid")
(tr "workspace.header.menu.enable-snap-pixel-grid"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :snap-pixel-grid))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:on-click show-nudge-options
:klass (stl/css :submenu-item)
:on-key-down (fn [event]
(when (kbd/enter? event)
(show-nudge-options event)))
:data-test "snap-pixel-grid"
:id "file-menu-nudge"
:unique-key "file-menu-nudge"}
[:span {:class (stl/css :item-name)} (tr "modals.nudge-title")]]]))
(mf/defc view-menu
{::mf/wrap-props false
::mf/wrap [mf/memo]}
[{:keys [layout toggle-flag on-close]}]
(let [read-only? (mf/use-ctx ctx/workspace-read-only?)
toggle-color-palette
(mf/use-fn
(fn []
(r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flag :textpalette)
(-> (dw/toggle-layout-flag :colorpalette)
(vary-meta assoc ::ev/origin "workspace-menu")))))
toggle-text-palette
(mf/use-fn
(fn []
(r/set-resize-type! :bottom)
(st/emit! (dw/remove-layout-flag :colorpalette)
(-> (dw/toggle-layout-flag :textpalette)
(vary-meta assoc ::ev/origin "workspace-menu")))))]
[:& dropdown-menu {:show true
:list-class (stl/css-case :sub-menu true
:view true)
:on-close on-close}
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click toggle-flag
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "rules"
:id "file-menu-rules"
:unique-key "file-menu-rules"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :rules)
(tr "workspace.header.menu.hide-rules")
(tr "workspace.header.menu.show-rules"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-rules))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click toggle-flag
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "display-grid"
:id "file-menu-grid"
:unique-key "file-menu-grid"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :display-grid)
(tr "workspace.header.menu.hide-grid")
(tr "workspace.header.menu.show-grid"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-grid))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
(when-not ^boolean read-only?
[:*
[:& dropdown-menu-item {:klass (stl/css :submenu-item) :on-click toggle-color-palette
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-color-palette event)))
:id "file-menu-color-palette"
:unique-key "file-menu-color-palette"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :colorpalette)
(tr "workspace.header.menu.hide-palette")
(tr "workspace.header.menu.show-palette"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-colorpalette))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) :on-click toggle-text-palette
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-text-palette event)))
:id "file-menu-text-palette"
:unique-key "file-menu-text-palette"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :textpalette)
(tr "workspace.header.menu.hide-palette")
(tr "workspace.header.menu.show-palette"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-textpalette))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]])
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click toggle-flag
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "display-artboard-names"
:id "file-menu-artboards"
:unique-key "file-menu-artboards"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :display-artboard-names)
(tr "workspace.header.menu.hide-artboard-names")
(tr "workspace.header.menu.show-artboard-names"))]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click toggle-flag
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "show-pixel-grid"
:id "file-menu-pixel-grid"
:unique-key "file-menu-pixel-grid"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :show-pixel-grid)
(tr "workspace.header.menu.hide-pixel-grid")
(tr "workspace.header.menu.show-pixel-grid"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :show-pixel-grid))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click toggle-flag
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "hide-ui"
:id "file-menu-hide-ui"
:unique-key "file-menu-hide-ui"}
[:span {:class (stl/css :item-name)}
(tr "workspace.shape.menu.hide-ui")]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :hide-ui))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]]))
(mf/defc edit-menu
{::mf/wrap-props false
::mf/wrap [mf/memo]}
[{:keys [on-close]}]
(let [select-all (mf/use-fn #(st/emit! (dw/select-all)))
undo (mf/use-fn #(st/emit! dwc/undo))
redo (mf/use-fn #(st/emit! dwc/redo))]
[:& dropdown-menu {:show true
:list-class (stl/css-case :sub-menu true
:edit true)
:on-close on-close}
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click select-all
:on-key-down (fn [event]
(when (kbd/enter? event)
(select-all event)))
:id "file-menu-select-all"
:unique-key "file-menu-select-all"}
[:span {:class (stl/css :item-name)}
(tr "workspace.header.menu.select-all")]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :select-all))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click undo
:on-key-down (fn [event]
(when (kbd/enter? event)
(undo event)))
:id "file-menu-undo"
:unique-key "file-menu-undo"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.undo")]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :undo))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click redo
:on-key-down (fn [event]
(when (kbd/enter? event)
(redo event)))
:id "file-menu-redo"
:unique-key "file-menu-redo"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.redo")]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :redo))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]]))
(mf/defc file-menu
{::mf/wrap-props false}
[{:keys [on-close file team-id]}]
(let [file-id (:id file)
file-name (:name file)
shared? (:is-shared file)
objects (mf/deref refs/workspace-page-objects)
frames (->> (cph/get-immediate-children objects uuid/zero)
(filterv cph/frame-shape?))
add-shared-fn
(mf/use-fn
(mf/deps file-id)
#(st/emit! (dwl/set-file-shared file-id true)))
on-add-shared
(mf/use-fn
(mf/deps file-name add-shared-fn)
#(modal/show! {:type :confirm
:message ""
:title (tr "modals.add-shared-confirm.message" file-name)
:hint (tr "modals.add-shared-confirm.hint")
:cancel-label :omit
:accept-label (tr "modals.add-shared-confirm.accept")
:accept-style :primary
:on-accept add-shared-fn}))
on-remove-shared
(mf/use-fn (mf/deps file-id)
(fn [event]
(dom/prevent-default event)
(dom/stop-propagation event)
(modal/show!
{:type :delete-shared-libraries
:origin :unpublish
:ids #{file-id}
:on-accept #(st/emit! (dwl/set-file-shared file-id false))
:count-libraries 1})))
on-export-shapes
(mf/use-fn #(st/emit! (de/show-workspace-export-dialog)))
on-export-file
(mf/use-fn
(mf/deps file)
(fn [event-name binary?]
(st/emit! (ptk/event ::ev/event {::ev/name event-name
::ev/origin "workspace"
:num-files 1}))
(->> (rx/of file)
(rx/flat-map
(fn [file]
(->> (rp/cmd! :has-file-libraries {:file-id (:id file)})
(rx/map #(assoc file :has-libraries? %)))))
(rx/reduce conj [])
(rx/subs
(fn [files]
(modal/show!
{:type :export
:team-id team-id
:has-libraries? (->> files (some :has-libraries?))
:files files
:binary? binary?}))))))
on-export-binary-file
(mf/use-fn
(mf/deps on-export-file)
(partial on-export-file "export-binary-files" true))
on-export-standard-file
(mf/use-fn
(mf/deps on-export-file)
(partial on-export-file "export-standard-files" false))
on-export-frames
(mf/use-fn
(mf/deps frames)
(fn [_]
(st/emit! (de/show-workspace-export-frames-dialog (reverse frames)))))]
[:& dropdown-menu {:show true
:list-class (stl/css-case :sub-menu true
:file true)
:on-close on-close}
(if ^boolean shared?
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click on-remove-shared
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-remove-shared event)))
:id "file-menu-remove-shared"
:unique-key "file-menu-remove-shared"}
[:span {:class (stl/css :item-name)} (tr "dashboard.unpublish-shared")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click on-add-shared
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-add-shared event)))
:id "file-menu-add-shared"
:unique-key "file-menu-add-shared"}
[:span {:class (stl/css :item-name)} (tr "dashboard.add-shared")]])
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click on-export-shapes
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-export-shapes event)))
:id "file-menu-export-shapes"
:unique-key "file-menu-export-shapes"}
[:span {:class (stl/css :item-name)} (tr "dashboard.export-shapes")]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :export-shapes))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click on-export-binary-file
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-export-binary-file event)))
:id "file-menu-binary-file"
:unique-key "file-menu-binary-file"}
[:span {:class (stl/css :item-name)} (tr "dashboard.download-binary-file")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click on-export-standard-file
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-export-standard-file event)))
:id "file-menu-standard-file"
:unique-key "file-menu-standard-file"}
[:span {:class (stl/css :item-name)} (tr "dashboard.download-standard-file")]]
(when (seq frames)
[:& dropdown-menu-item {:klass (stl/css :submenu-item)
:on-click on-export-frames
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-export-frames event)))
:id "file-menu-export-frames"
:unique-key "file-menu-export-frames"}
[:span {:class (stl/css :item-name)}
(tr "dashboard.export-frames")]])]))
(mf/defc menu
{::mf/wrap-props false}
[{:keys [layout file team-id]}]
(let [show-menu* (mf/use-state false)
show-menu? (deref show-menu*)
sub-menu* (mf/use-state false)
sub-menu (deref sub-menu*)
open-menu (mf/use-fn #(reset! show-menu* true))
close-menu (mf/use-fn #(reset! show-menu* false))
close-sub-menu (mf/use-fn #(reset! sub-menu* nil))
on-menu-click
(mf/use-fn
(fn [event]
(dom/stop-propagation event)
(let [menu (-> (dom/get-current-target event)
(dom/get-data "test")
(keyword))]
(reset! sub-menu* menu))))
toggle-flag
(mf/use-fn
(fn [event]
(let [flag (-> (dom/get-current-target event)
(dom/get-data "test")
(keyword))]
(st/emit!
(-> (dw/toggle-layout-flag flag)
(vary-meta assoc ::ev/origin "workspace-menu"))))))]
[:*
[:div {:on-click open-menu
:class (stl/css :menu-btn)} i/menu-refactor]
[:& dropdown-menu {:show show-menu?
:on-close close-menu
:list-class (stl/css :menu)}
[:& dropdown-menu-item {:klass (stl/css :menu-item)
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-menu-click event)))
:on-pointer-enter on-menu-click
:data-test "file"
:id "file-menu-file"
:unique-key "file-menu-file"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.file")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:& dropdown-menu-item {:klass (stl/css :menu-item)
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-menu-click event)))
:on-pointer-enter on-menu-click
:data-test "edit"
:id "file-menu-edit"
:unique-key "file-menu-edit"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.edit")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:& dropdown-menu-item {:klass (stl/css :menu-item)
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-menu-click event)))
:on-pointer-enter on-menu-click
:data-test "view"
:id "file-menu-view"
:unique-key "file-menu-view"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.view")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:& dropdown-menu-item {:klass (stl/css :menu-item)
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-menu-click event)))
:on-pointer-enter on-menu-click
:data-test "preferences"
:id "file-menu-preferences"
:unique-key "file-menu-preferences"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.preferences")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:div {:class (stl/css :separator)}]
[:& dropdown-menu-item {:klass (stl/css-case :menu-item true)
:on-click on-menu-click
:on-key-down (fn [event]
(when (kbd/enter? event)
(on-menu-click event)))
:on-pointer-enter on-menu-click
:data-test "help-info"
:id "file-menu-help-info"
:unique-key "file-menu-help-info"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.help-info")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]]
(case sub-menu
:file
[:& file-menu
{:file file
:team-id team-id
:on-close close-sub-menu}]
:edit
[:& edit-menu
{:on-close close-sub-menu}]
:view
[:& view-menu
{:layout layout
:toggle-flag toggle-flag
:on-close close-sub-menu}]
:preferences
[:& preferences-menu
{:layout layout
:toggle-flag toggle-flag
:on-close close-sub-menu}]
:help-info
[:& help-info-menu
{:layout layout
:on-close close-sub-menu}]
nil)]))
;; --- Header Component
(mf/defc left-header
{::mf/wrap-props false}
[{:keys [file layout project page-id]}]
(let [file-id (:id file)
file-name (:name file)
project-id (:id project)
team-id (:team-id project)
shared? (:is-shared file)
read-only? (mf/use-ctx ctx/workspace-read-only?)
editing* (mf/use-state false)
editing? (deref editing*)
input-ref (mf/use-ref nil)
handle-blur
(mf/use-fn
(mf/deps file-id)
(fn [_]
(let [value (str/trim (-> input-ref mf/ref-val dom/get-value))]
(when (not= value "")
(st/emit! (dw/rename-file file-id value)))
(reset! editing* false))))
handle-name-keydown
(mf/use-fn
(mf/deps handle-blur)
(fn [event]
(when (kbd/enter? event)
(handle-blur event))))
start-editing-name
(mf/use-fn
(fn [event]
(dom/prevent-default event)
(reset! editing* true)))
close-modals
(mf/use-fn
#(st/emit! (dc/stop-picker)
(modal/hide)))
go-back
(mf/use-fn
(mf/deps project)
(fn []
(close-modals)
(st/emit! (dw/go-to-dashboard project))))
nav-to-project
(mf/use-fn
(mf/deps team-id project-id)
#(st/emit! (rt/nav-new-window* {:rname :dashboard-files
:path-params {:team-id team-id
:project-id project-id}})))]
(mf/with-effect [editing?]
(when ^boolean editing?
(dom/select-text! (mf/ref-val input-ref))))
[:header {:class (stl/css :workspace-header-left)}
[:a {:on-click go-back
:class (stl/css :main-icon)} i/logo-icon]
[:div {:alt (tr "workspace.sitemap")
:class (stl/css :project-tree)}
[:div
{:class (stl/css :project-name)
:on-click nav-to-project}
(:name project)]
(if ^boolean editing?
[:input
{:class (stl/css :file-name-input)
:type "text"
:ref input-ref
:on-blur handle-blur
:on-key-down handle-name-keydown
:auto-focus true
:default-value (:name file "")}]
[:div
{:class (stl/css :file-name)
:title file-name
:on-double-click start-editing-name}
file-name])
(when ^boolean shared?
[:div {:class (stl/css :shared-badge)} i/library-refactor])]
[:div {:class (stl/css :menu-section)}
[:& menu {:layout layout
:file file
:read-only? read-only?
:team-id team-id
:page-id page-id}]]]))

1
frontend/src/app/main/ui/workspace/left_header.css.json Normal file
View file

@ -0,0 +1 @@
{"button-primary":"workspace_left_header_button-primary_lyfQC","button-secondary":"workspace_left_header_button-secondary_MfwN-","button-tertiary":"workspace_left_header_button-tertiary_fJlY9","workspace-header-left":"workspace_left_header_workspace-header-left_HdnMy","menu-btn":"workspace_left_header_menu-btn_fdwlZ","button-tag":"workspace_left_header_button-tag_H77gD","button-icon":"workspace_left_header_button-icon_DD7ag","menu":"workspace_left_header_menu_yxGIs","menu-item":"workspace_left_header_menu-item_1wh4b","open-arrow":"workspace_left_header_open-arrow_bcWEe","sub-menu":"workspace_left_header_sub-menu_MMoV5","submenu-item":"workspace_left_header_submenu-item_ZKiY7","button-icon-small":"workspace_left_header_button-icon-small_gYHAj","asset-element":"workspace_left_header_asset-element_iYXcu","new-scrollbar":"workspace_left_header_new-scrollbar_dOPeK","menu-dropdown":"workspace_left_header_menu-dropdown_3LtHG","shortcut":"workspace_left_header_shortcut_7lGBb","shortcut-key":"workspace_left_header_shortcut-key_31FAP","user-icon":"workspace_left_header_user-icon_ektpZ","main-icon":"workspace_left_header_main-icon_qnAm2","project-tree":"workspace_left_header_project-tree_WoAdo","project-name":"workspace_left_header_project-name_petDL","file-name":"workspace_left_header_file-name_QiMm1","file-name-input":"workspace_left_header_file-name-input_yjzqX","shared-badge":"workspace_left_header_shared-badge_N-vOg","separator":"workspace_left_header_separator_TyuDr","file":"workspace_left_header_file_2A0Xu","edit":"workspace_left_header_edit_XN7-M","view":"workspace_left_header_view_IsL62","preferences":"workspace_left_header_preferences_R20sp","help-info":"workspace_left_header_help-info_NVGJQ","spin-animation":"workspace_left_header_spin-animation_buAeE"}

172
frontend/src/app/main/ui/workspace/left_header.scss Normal file
View file

@ -0,0 +1,172 @@
// 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
@import "refactor/common-refactor.scss";
.workspace-header-left {
display: flex;
align-items: center;
height: $s-48;
max-width: var(--width, $s-256);
padding: $s-8 $s-8 $s-4 $s-8;
.main-icon {
@include flexCenter;
width: $s-32;
height: $s-32;
margin-right: $s-4;
svg {
height: $s-32;
fill: var(--icon-foreground-hover);
}
}
.project-tree {
flex-grow: 1;
max-width: calc(100% - $s-64);
position: relative;
.project-name,
.file-name {
@include tabTitleTipography;
@include textEllipsis;
height: $s-16;
width: 100%;
padding-bottom: $s-2;
color: var(--title-foreground-color);
cursor: pointer;
}
.file-name {
@include titleTipography;
text-transform: none;
color: var(--title-foreground-color-hover);
}
.file-name-input {
@include flexCenter;
height: 100%;
width: 100%;
margin: 0;
border: 0;
border-radius: $br-8;
background-color: var(--input-background-color);
font-size: $fs-12;
color: var(--input-foreground-color);
z-index: 20;
white-space: break-spaces;
&:focus {
outline: none;
}
}
}
.shared-badge {
@include flexCenter;
width: $s-32;
height: $s-32;
svg {
height: $s-28;
width: $s-28;
}
}
.menu-btn {
@extend .button-tertiary;
height: $s-32;
width: calc($s-24 + $s-4);
padding: 0;
border-radius: $br-8;
svg {
@extend .button-icon;
}
}
.menu {
@extend .menu-dropdown;
position: absolute;
top: $s-48;
left: calc(var(--width, $s-256) - $s-32);
margin: 0;
.menu-item {
@extend .menu-item;
cursor: pointer;
}
.separator {
height: $s-12;
}
.shortcut {
@extend .shortcut;
}
.shortcut-key {
@extend .shortcut-key;
}
.menu-item {
@extend .menu-item;
.open-arrow {
@include flexCenter;
svg {
@extend .button-icon;
}
}
&:hover {
color: var(--menu-foreground-color-hover);
.open-arrow {
svg {
stroke: var(--menu-foreground-color-hover);
}
}
.shortcut-key {
color: var(--menu-shortcut-foreground-color-hover);
}
}
}
}
.sub-menu {
@extend .menu-dropdown;
position: absolute;
left: calc(var(--width, $s-256) + $s-168);
width: 270px;
.shortcut {
@extend .shortcut;
}
.shortcut-key {
@extend .shortcut-key;
}
.submenu-item {
@extend .menu-item;
&:hover {
color: var(--menu-foreground-color-hover);
.shortcut-key {
color: var(--menu-shortcut-foreground-color-hover);
}
}
}
.shortcut {
@extend .shortcut;
}
.shortcut-key {
@extend .shortcut-key;
}
&.file {
top: $s-48;
}
&.edit {
top: $s-76;
}
&.view {
top: $s-116;
}
&.preferences {
top: $s-148;
}
&.help-info {
top: $s-196;
}
}
}

73
frontend/src/app/main/ui/workspace/left_toolbar.cljs
View file

@ -31,7 +31,7 @@
file-id (mf/use-ctx ctx/current-file-id)
on-click
(mf/use-fn
(mf/use-fn
(fn []
(st/emit! :interrupt dw/clear-edition-mode)
(dom/click (mf/ref-val ref))))
@ -142,18 +142,18 @@
(swap! hide-toolbar* not)))]
(if new-css-system
[:aside {:class (dom/classnames (css :main-toolbar) true
(css :hidden-toolbar) hide-toolbar?)}
[:ul {:class (css :main-toolbar-options)}
[:li
[:button
{:title (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:class (when (and (nil? selected-drawtool)
(not edition)) "selected")
:on-click interrupt}
i/move-refactor]]
(when-not ^boolean read-only?
(when-not ^boolean read-only?
[:aside {:class (dom/classnames (css :main-toolbar) true
(css :hidden-toolbar) hide-toolbar?)}
[:ul {:class (css :main-toolbar-options)}
[:li
[:button
{:title (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:class (when (and (nil? selected-drawtool)
(not edition)) "selected")
:on-click interrupt}
i/move-refactor]]
[:*
[:li
[:button
@ -210,36 +210,27 @@
:on-click select-drawtool
:data-tool "path"
:data-test "path-btn"}
i/pentool-refactor]]])
i/pentool-refactor]]]]
[:button {:class (dom/classnames (css :toolbar-handler) true)
:on-click toggle-toolbar}
[:div {:class (dom/classnames (css :toolbar-handler-btn) true)}]]
;; [:li
;; [:button
;; {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
;; :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
;; :class (when (= selected-drawtool :comments) "selected")
;; :on-click select-drawtool
;; :data-tool "comments"}
;; i/comments-refactor]]
]
[:button {:class (dom/classnames (css :toolbar-handler) true)
:on-click toggle-toolbar}
[:div {:class (dom/classnames (css :toolbar-handler-btn) true)}]]
[:ul {:class (dom/classnames (css :main-toolbar-panels) true)}
[:li
[:button
{:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:class (when (contains? layout :shortcuts) "selected")
:on-click toggle-shortcuts}
i/shortcut]
(when *assert*
[:ul {:class (dom/classnames (css :main-toolbar-panels) true)}
[:li
[:button
{:title "Debugging tool"
:class (when (contains? layout :debug-panel) "selected")
:on-click toggle-debug-panel}
i/bug])]]]
{:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:class (when (contains? layout :shortcuts) "selected")
:on-click toggle-shortcuts}
i/shortcut]
(when *assert*
[:button
{:title "Debugging tool"
:class (when (contains? layout :debug-panel) "selected")
:on-click toggle-debug-panel}
i/bug])]]])
[:aside.left-toolbar

2
frontend/src/app/main/ui/workspace/left_toolbar.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk"}
{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"}

8
frontend/src/app/main/ui/workspace/left_toolbar.scss
View file

@ -16,9 +16,9 @@
height: $s-56;
padding: $s-8 $s-16;
border-radius: $s-8;
z-index: $z-index-20;
z-index: $z-index-2;
background-color: var(--color-background-primary);
transition: top 1s ease;
transition: top 1s, height 1s, opacity 1s;
.main-toolbar-options {
position: relative;
@ -65,8 +65,10 @@
}
}
&.hidden-toolbar {
top: 0;
top: $s-20;
height: $s-16;
z-index: $z-index-1;
border-radius: 0 0 $s-8 $s-8;
.main-toolbar-options {
opacity: $op-0;
}

2
frontend/src/app/main/ui/workspace/libraries.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_libraries_button-primary_Hsioh","modal-overlay":"workspace_libraries_modal-overlay_qC-df","modal-dialog":"workspace_libraries_modal-dialog_Kj293","modal-content":"workspace_libraries_modal-content_4EVEQ","libraries-content":"workspace_libraries_libraries-content_ycQdm","section":"workspace_libraries_section_SUsgi","section-list":"workspace_libraries_section-list_lGSrM","section-list-item":"workspace_libraries_section-list-item_hwASN","item-publish":"workspace_libraries_item-publish_ZMopF","item-unpublish":"workspace_libraries_item-unpublish_1seca","item-update":"workspace_libraries_item-update_GklIE","section-list-shared":"workspace_libraries_section-list-shared_XZE10","updates-content":"workspace_libraries_updates-content_lqMoE","button-secondary":"workspace_libraries_button-secondary_l5M0x","item-button":"workspace_libraries_item-button_dKUeX","item-button-shared":"workspace_libraries_item-button-shared_hxOmT","button-tertiary":"workspace_libraries_button-tertiary_C54rH","close":"workspace_libraries_close_bED7B","button-tag":"workspace_libraries_button-tag_wAh-s","button-icon":"workspace_libraries_button-icon_kxS7q","item-button-icon":"workspace_libraries_item-button-icon_CeJWg","button-icon-small":"workspace_libraries_button-icon-small_Q9eo3","section-list-empty":"workspace_libraries_section-list-empty_mOKkJ","libraries-search":"workspace_libraries_libraries-search_JS70w","search-icon":"workspace_libraries_search-icon_y7N9S","asset-element":"workspace_libraries_asset-element_-FuJl","new-scrollbar":"workspace_libraries_new-scrollbar_9V-Nb","modal-title":"workspace_libraries_modal-title_Z1xKU","libraries-header":"workspace_libraries_libraries-header_-W6bJ","item-name":"workspace_libraries_item-name_Zjbsw","item-contents":"workspace_libraries_item-contents_EPTF6","section-title":"workspace_libraries_section-title_7rsm7","element-count":"workspace_libraries_element-count_07SV2"}
{"button-primary":"workspace_libraries_button-primary_Hsioh","modal-overlay":"workspace_libraries_modal-overlay_qC-df","modal-dialog":"workspace_libraries_modal-dialog_Kj293","modal-content":"workspace_libraries_modal-content_4EVEQ","libraries-content":"workspace_libraries_libraries-content_ycQdm","section":"workspace_libraries_section_SUsgi","section-list":"workspace_libraries_section-list_lGSrM","section-list-item":"workspace_libraries_section-list-item_hwASN","item-publish":"workspace_libraries_item-publish_ZMopF","item-unpublish":"workspace_libraries_item-unpublish_1seca","item-update":"workspace_libraries_item-update_GklIE","section-list-shared":"workspace_libraries_section-list-shared_XZE10","updates-content":"workspace_libraries_updates-content_lqMoE","button-secondary":"workspace_libraries_button-secondary_l5M0x","item-button":"workspace_libraries_item-button_dKUeX","item-button-shared":"workspace_libraries_item-button-shared_hxOmT","button-tertiary":"workspace_libraries_button-tertiary_C54rH","close":"workspace_libraries_close_bED7B","button-tag":"workspace_libraries_button-tag_wAh-s","button-icon":"workspace_libraries_button-icon_kxS7q","item-button-icon":"workspace_libraries_item-button-icon_CeJWg","button-icon-small":"workspace_libraries_button-icon-small_Q9eo3","section-list-empty":"workspace_libraries_section-list-empty_mOKkJ","libraries-search":"workspace_libraries_libraries-search_JS70w","search-icon":"workspace_libraries_search-icon_y7N9S","asset-element":"workspace_libraries_asset-element_-FuJl","new-scrollbar":"workspace_libraries_new-scrollbar_9V-Nb","menu-dropdown":"workspace_libraries_menu-dropdown_frrTQ","menu-item":"workspace_libraries_menu-item_1PSqe","shortcut":"workspace_libraries_shortcut_ZBbd3","shortcut-key":"workspace_libraries_shortcut-key_qBs5D","user-icon":"workspace_libraries_user-icon_IjCsd","modal-title":"workspace_libraries_modal-title_Z1xKU","libraries-header":"workspace_libraries_libraries-header_-W6bJ","item-name":"workspace_libraries_item-name_Zjbsw","item-contents":"workspace_libraries_item-contents_EPTF6","section-title":"workspace_libraries_section-title_7rsm7","element-count":"workspace_libraries_element-count_07SV2","spin-animation":"workspace_libraries_spin-animation_mW-An"}

160
frontend/src/app/main/ui/workspace/palette.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.palette
(:require-macros [app.main.style :refer [css]])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.events :as ev]
[app.main.data.workspace :as dw]
@ -33,6 +34,18 @@
(def viewport
(l/derived :vport refs/workspace-local))
(defn calculate-palette-padding []
(let [left-sidebar (dom/get-element "left-sidebar-aside")
left-sidebar-size (d/parse-integer (dom/get-data left-sidebar "size"))
rulers? (:rules (mf/deref refs/workspace-layout))
rulers-width (if rulers? 26 4)
min-left-sidebar-width 27
calculate-padding-left (+ rulers-width (or left-sidebar-size
min-left-sidebar-width))]
#js {"paddingLeft" (dm/str calculate-padding-left "px")
"paddingRight" "280px"}))
(mf/defc palette
[{:keys [layout]}]
(let [color-palette? (:colorpalette layout)
@ -99,78 +112,81 @@
width (obj/get dom "clientWidth")]
(swap! state assoc :width width)))
[:div {:ref parent-ref
:class (dom/classnames (css :palettes) true
size-classname true
(css :wide) any-palette?
(css :hidden-bts) (:hide-palettes @state))
:style #js {"--height" (dm/str size "px")}}
[:div {:class (dom/classnames (css :resize-area) true)
:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move}]
[:div {:class (dom/classnames (css :palette-wrapper) true)
:style (calculate-palette-padding)}
(when-not workspace-read-only?
[:ul {:class (dom/classnames (css :palette-btn-list) true
(css :hidden-bts) (:hide-palettes @state)
size-classname true)}
[:li {:class (dom/classnames (css :palette-item) true)}
[:button
{:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:class (dom/classnames (css :palette-btn) true
(css :selected) color-palette?)
:on-click (fn [event]
(let [node (dom/get-current-target event)]
(r/set-resize-type! :top)
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
(-> (dw/toggle-layout-flag :colorpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
[:div {:ref parent-ref
:class (dom/classnames (css :palettes) true
size-classname true
(css :wide) any-palette?
(css :hidden-bts) (:hide-palettes @state))
:style #js {"--height" (dm/str size "px")}}
(dom/blur! node)))}
i/drop-refactor]]
[:li {:class (dom/classnames (css :palette-item) true)}
[:button
{:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:class (dom/classnames (css :palette-btn) true
(css :selected) text-palette?)
:on-click (fn [event]
(let [node (dom/get-current-target event)]
(r/set-resize-type! :top)
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette)
(-> (dw/toggle-layout-flag :textpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
(dom/blur! node)))}
i/text-palette-refactor]]])
[:div {:class (dom/classnames (css :resize-area) true)
:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move}]
[:ul {:class (dom/classnames (css :palette-btn-list) true
(css :hidden-bts) (:hide-palettes @state)
size-classname true)}
[:li {:class (dom/classnames (css :palette-item) true)}
[:button
{:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:class (dom/classnames (css :palette-btn) true
(css :selected) color-palette?)
:on-click (fn [event]
(let [node (dom/get-current-target event)]
(r/set-resize-type! :top)
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
(-> (dw/toggle-layout-flag :colorpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
(if any-palette?
[:*
[:button {:class (dom/classnames (css :palette-actions) true)
:on-click #(swap! state update :show-menu not)}
i/menu-refactor]
[:div {:class (dom/classnames (css :palette) true)
:ref container}
(when text-palette?
[:*
[:& text-palette-ctx-menu {:show-menu? (:show-menu @state)
:close-menu on-close-menu
:on-select-palette on-select-text-palette
:selected @selected-text}]
[:& text-palette {:size size
:selected @selected-text
:width vport-width}]])
(when color-palette?
[:* [:& color-palette-ctx-menu {:show-menu? (:show-menu @state)
:close-menu on-close-menu
:on-select-palette on-select-palette
:selected @selected}]
[:& color-palette {:size size
:selected @selected
:width vport-width}]])]]
[:div {:class (dom/classnames (css :handler) true)
:on-click toggle-palettes}
[:div {:class (dom/classnames (css :handler-btn) true)}]])]))
(dom/blur! node)))}
i/drop-refactor]]
[:li {:class (dom/classnames (css :palette-item) true)}
[:button
{:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:class (dom/classnames (css :palette-btn) true
(css :selected) text-palette?)
:on-click (fn [event]
(let [node (dom/get-current-target event)]
(r/set-resize-type! :top)
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
(ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette)
(-> (dw/toggle-layout-flag :textpalette)
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
(dom/blur! node)))}
i/text-palette-refactor]]]
(if any-palette?
[:*
[:button {:class (dom/classnames (css :palette-actions) true)
:on-click #(swap! state update :show-menu not)}
i/menu-refactor]
[:div {:class (dom/classnames (css :palette) true)
:ref container}
(when text-palette?
[:*
[:& text-palette-ctx-menu {:show-menu? (:show-menu @state)
:close-menu on-close-menu
:on-select-palette on-select-text-palette
:selected @selected-text}]
[:& text-palette {:size size
:selected @selected-text
:width vport-width}]])
(when color-palette?
[:* [:& color-palette-ctx-menu {:show-menu? (:show-menu @state)
:close-menu on-close-menu
:on-select-palette on-select-palette
:selected @selected}]
[:& color-palette {:size size
:selected @selected
:width vport-width}]])]]
[:div {:class (dom/classnames (css :handler) true)
:on-click toggle-palettes}
[:div {:class (dom/classnames (css :handler-btn) true)}]])])]))

2
frontend/src/app/main/ui/workspace/palette.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_palette_button-primary_zEUyD","button-secondary":"workspace_palette_button-secondary_ksr24","button-tertiary":"workspace_palette_button-tertiary_91YQK","palettes":"workspace_palette_palettes_JHGUw","palette-actions":"workspace_palette_palette-actions_2GwR6","palette-btn-list":"workspace_palette_palette-btn-list_x7gPS","palette-item":"workspace_palette_palette-item_50uj6","palette-btn":"workspace_palette_palette-btn_kP66y","button-tag":"workspace_palette_button-tag_S9v-Z","button-icon":"workspace_palette_button-icon_pmEDv","button-icon-small":"workspace_palette_button-icon-small_vbLDq","asset-element":"workspace_palette_asset-element_4bXi3","new-scrollbar":"workspace_palette_new-scrollbar_3WWqd","wide":"workspace_palette_wide_3G4e1","mid-palette":"workspace_palette_mid-palette_rGR5I","small-palette":"workspace_palette_small-palette_18Otk","resize-area":"workspace_palette_resize-area_0LwVu","selected":"workspace_palette_selected_Z6BFo","palette":"workspace_palette_palette_eqp3q","handler":"workspace_palette_handler_4JV0J","handler-btn":"workspace_palette_handler-btn_7lnlF","hidden-bts":"workspace_palette_hidden-bts_mhbc0"}
{"button-primary":"workspace_palette_button-primary_zEUyD","button-secondary":"workspace_palette_button-secondary_ksr24","button-tertiary":"workspace_palette_button-tertiary_91YQK","palettes":"workspace_palette_palettes_JHGUw","palette-actions":"workspace_palette_palette-actions_2GwR6","palette-btn-list":"workspace_palette_palette-btn-list_x7gPS","palette-item":"workspace_palette_palette-item_50uj6","palette-btn":"workspace_palette_palette-btn_kP66y","button-tag":"workspace_palette_button-tag_S9v-Z","button-icon":"workspace_palette_button-icon_pmEDv","button-icon-small":"workspace_palette_button-icon-small_vbLDq","asset-element":"workspace_palette_asset-element_4bXi3","new-scrollbar":"workspace_palette_new-scrollbar_3WWqd","menu-dropdown":"workspace_palette_menu-dropdown_2S40O","menu-item":"workspace_palette_menu-item_qSC6U","shortcut":"workspace_palette_shortcut_mZ4Tp","shortcut-key":"workspace_palette_shortcut-key_EeW-I","user-icon":"workspace_palette_user-icon_8VKTf","palette-wrapper":"workspace_palette_palette-wrapper_ciUIx","wide":"workspace_palette_wide_3G4e1","mid-palette":"workspace_palette_mid-palette_rGR5I","small-palette":"workspace_palette_small-palette_18Otk","resize-area":"workspace_palette_resize-area_0LwVu","selected":"workspace_palette_selected_Z6BFo","palette":"workspace_palette_palette_eqp3q","handler":"workspace_palette_handler_4JV0J","handler-btn":"workspace_palette_handler-btn_7lnlF","hidden-bts":"workspace_palette_hidden-bts_mhbc0","spin-animation":"workspace_palette_spin-animation_ezmwC"}

45
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -6,7 +6,15 @@
@import "refactor/common-refactor.scss";
.palette-wrapper {
position: absolute;
width: 100vw;
left: 0;
bottom: 0;
padding-bottom: $s-4;
}
.palettes {
z-index: $z-index-2;
position: relative;
right: 0;
grid-area: color-palette;
@ -22,7 +30,7 @@
padding: $s-0 $s-0 $s-8 $s-8;
border-radius: $br-8;
background-color: var(--palette-background-color);
transition: right 1s ease, opacity 1s ease;
transition: right 1s, opacity 1s, width 1s;
&.wide {
width: 100%;
}
@ -33,7 +41,7 @@
.resize-area {
grid-area: resize;
height: $s-8;
z-index: $z-index-4;
z-index: $z-index-3;
width: calc(100% - $s-8);
border-radius: $br-circle;
cursor: ns-resize;
@ -46,7 +54,7 @@
width: $s-32;
margin: $s-0;
list-style: none;
z-index: $z-index-1;
z-index: $z-index-2;
&.mid-palette,
&.small-palette {
display: flex;
@ -90,7 +98,7 @@
margin-left: $s-4;
border-radius: $br-8;
background-color: var(--palette-background-color);
z-index: $z-index-1;
z-index: $z-index-2;
svg {
@extend .button-icon;
}
@ -104,7 +112,6 @@
@include flexCenter;
width: $s-12;
height: 100%;
.handler-btn {
width: $s-4;
height: 100%;
@ -116,18 +123,40 @@
}
}
&.hidden-bts {
right: $s-40;
z-index: 0;
right: 10px;
z-index: 1;
width: 22px;
grid-template-columns: $s-8 auto 1fr;
padding: 0;
&.small-palette,
&.mid-palette {
right: $s-72;
right: 10px;
}
.palette-btn-list {
opacity: $op-0;
visibility: hidden;
width: 0;
.palette-item {
opacity: $op-0;
visibility: hidden;
z-index: 0;
}
}
.resize-area {
visibility: hidden;
z-index: 0;
width: 0;
}
.palette-actions {
visibility: hidden;
z-index: 0;
}
.palette {
visibility: hidden;
z-index: 0;
}
.handler {
padding-bottom: $s-8;
}
}
}

71
frontend/src/app/main/ui/workspace/presence.cljs
View file

@ -5,17 +5,24 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.presence
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.config :as cfg]
[app.main.refs :as refs]
[app.main.ui.context :as ctx]
[app.util.dom :as dom]
[app.util.timers :as tm]
[rumext.v2 :as mf]))
;; --- SESSION WIDGET
(mf/defc session-widget
[{:keys [session profile] :as props}]
[{:keys [session profile index] :as props}]
[:li.tooltip.tooltip-bottom
{:alt (:fullname profile)}
{:class (stl/css :session-icon)
:style #js {"zIndex" (str (or (+ 1 (* -1 index)) 0))}
:alt (:fullname profile)}
[:img {:alt (:fullname profile)
:style {:border-color (:color session)}
:src (cfg/resolve-profile-photo-url profile)}]])
@ -23,13 +30,57 @@
(mf/defc active-sessions
{::mf/wrap [mf/memo]}
[]
(let [users (mf/deref refs/users)
presence (mf/deref refs/workspace-presence)]
[:ul.active-users
(for [session (vals presence)]
[:& session-widget
{:session session
:profile (get users (:profile-id session))
:key (:id session)}])]))
(let [new-css-system (mf/use-ctx ctx/new-css-system)
users (mf/deref refs/users)
presence (mf/deref refs/workspace-presence)
user-ids (vals presence)
num-users (count user-ids)
first-users (take 2 user-ids)
open* (mf/use-state false)
open? (deref open*)
open-users-widget
(mf/use-fn
(fn []
(reset! open* true)
(tm/schedule-on-idle
#(dom/focus! (dom/get-element "users-close")))))
close-users-widget (mf/use-fn #(reset! open* false))]
(if new-css-system
[:*
(when (and (< 2 num-users) open?)
[:button
{:id "users-close"
:class (stl/css :active-users-opened)
:on-click close-users-widget
:on-blur close-users-widget}
[:ul {:class (stl/css :active-users-list)}
(when (< 2 num-users)
[:span {:class (stl/css :users-num)} num-users])
(for [session user-ids]
[:& session-widget
{:session session
:index 0
:profile (get users (:profile-id session))
:key (:id session)}])]])
[:button {:class (stl/css-case :active-users true)
:on-click open-users-widget}
[:ul {:class (stl/css :active-users-list)}
(when (< 2 num-users) [:span {:class (stl/css :users-num)} num-users])
(for [[index session] (d/enumerate first-users)]
[:& session-widget
{:session session
:index index
:profile (get users (:profile-id session))
:key (:id session)}])]]]
[:ul.active-users
(for [session (vals presence)]
[:& session-widget
{:session session
:profile (get users (:profile-id session))
:key (:id session)}])])))

1
frontend/src/app/main/ui/workspace/presence.css.json Normal file
View file

@ -0,0 +1 @@
{"button-primary":"workspace_presence_button-primary_As6Ix","button-secondary":"workspace_presence_button-secondary_wChpa","button-tertiary":"workspace_presence_button-tertiary_XLZQY","button-tag":"workspace_presence_button-tag_Hp7-u","button-icon":"workspace_presence_button-icon_wQdM5","button-icon-small":"workspace_presence_button-icon-small_cxrR5","asset-element":"workspace_presence_asset-element_ALwzT","new-scrollbar":"workspace_presence_new-scrollbar_u3DSM","menu-dropdown":"workspace_presence_menu-dropdown_pc2zP","menu-item":"workspace_presence_menu-item_QIKwl","shortcut":"workspace_presence_shortcut_nbmw6","shortcut-key":"workspace_presence_shortcut-key_w0Pys","user-icon":"workspace_presence_user-icon_hDghc","active-users":"workspace_presence_active-users_wkbu6","active-users-list":"workspace_presence_active-users-list_VzK-2","session-icon":"workspace_presence_session-icon_lzaZ6","active-users-opened":"workspace_presence_active-users-opened_EWyvR","users-num":"workspace_presence_users-num_2zRDj","spin-animation":"workspace_presence_spin-animation_g1IPu"}

56
frontend/src/app/main/ui/workspace/presence.scss Normal file
View file

@ -0,0 +1,56 @@
// 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
@import "refactor/common-refactor.scss";
.active-users,
.active-users-opened {
@include buttonStyle;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
margin: 0 0 0 $s-4;
padding: $s-4;
border-radius: $br-8;
.active-users-list {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
margin: 0;
.users-num {
@extend .user-icon;
height: $s-28;
width: $s-28;
background-color: var(--user-count-background-color);
color: var(--user-count-foreground-color);
margin-left: calc(-1 * $s-4);
z-index: $z-index-2;
margin-top: calc(-1 * $s-1);
}
.session-icon {
@extend .user-icon;
margin-left: calc(-1 * $s-4);
}
}
}
.active-users-opened {
position: absolute;
right: calc(-1 * $s-4);
top: calc(-1 * $s-4);
padding: $s-8;
margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0;
background-color: var(--menu-background-color);
z-index: $z-index-3;
.active-users-list {
gap: $s-4;
.users-num,
.session-icon {
margin-left: 0;
}
}
}

232
frontend/src/app/main/ui/workspace/right_header.cljs Normal file
View file

@ -0,0 +1,232 @@
;; 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
(ns app.main.ui.workspace.right-header
(:require-macros [app.main.style :as stl])
(:require
[app.main.data.events :as ev]
[app.main.data.shortcuts :as scd]
[app.main.data.workspace :as dw]
[app.main.data.workspace.shortcuts :as sc]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.export :refer [export-progress-widget]]
[app.main.ui.formats :as fmt]
[app.main.ui.icons :as i]
[app.main.ui.workspace.presence :refer [active-sessions]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.timers :as ts]
[okulary.core :as l]
[rumext.v2 :as mf]))
(def ref:workspace-persistence
(l/derived :workspace-persistence st/state))
;; --- Persistence state Widget
(mf/defc persistence-state-widget
{::mf/wrap [mf/memo]}
[]
(let [{:keys [status]} (mf/deref ref:workspace-persistence)]
[:div {:class (stl/css :persistence-status-widget)}
(case status
:pending
[:div {:class (stl/css-case :status-icon true
:pending-status true)
:title (tr "workspace.header.unsaved")}
i/status-alert-refactor]
:saving
[:div {:class (stl/css-case :status-icon true
:saving-status true)
:title (tr "workspace.header.saving")}
i/status-update-refactor]
:saved
[:div {:class (stl/css-case :status-icon true
:saved-status true)
:title (tr "workspace.header.saved")}
i/status-tick-refactor]
:error
[:div {:class (stl/css-case :status-icon true
:error-status true)
:title "There was an error saving the data. Please refresh if this persists."}
i/status-wrong-refactor]
nil)]))
;; --- Zoom Widget
(mf/defc zoom-widget-workspace
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[{:keys [zoom on-increase on-decrease on-zoom-reset on-zoom-fit on-zoom-selected]}]
(let [open* (mf/use-state false)
open? (deref open*)
open-dropdown
(mf/use-fn #(reset! open* true))
close-dropdown
(mf/use-fn #(reset! open* false))
on-increase
(mf/use-fn
(mf/deps on-increase)
(fn [event]
(dom/stop-propagation event)
(on-increase)))
on-decrease
(mf/use-fn
(mf/deps on-decrease)
(fn [event]
(dom/stop-propagation event)
(on-decrease)))
zoom (fmt/format-percent zoom {:precision 0})]
[:*
[:div {:on-click open-dropdown
:class (stl/css-case :zoom-widget true
:selected open?)
:title (tr "workspace.header.zoom")}
[:span {:class (stl/css :label)} zoom]
[:span {:class (stl/css :icon)} i/arrow-refactor]]
[:& dropdown {:show open? :on-close close-dropdown}
[:ul {:class (stl/css :dropdown)}
[:li {:class (stl/css :basic-zoom-bar)}
[:span {:class (stl/css :zoom-btns)}
[:button {:class (stl/css :zoom-btn)
:on-click on-decrease}
[:span {:class (stl/css :zoom-icon)}
i/remove-refactor]]
[:p {:class (stl/css :zoom-text)} zoom]
[:button {:class (stl/css :zoom-btn)
:on-click on-increase}
[:span {:class (stl/css :zoom-icon)}
i/add-refactor]]]
[:button {:class (stl/css :reset-btn)
:on-click on-zoom-reset}
(tr "workspace.header.reset-zoom")]]
[:li {:class (stl/css :zoom-option)
:on-click on-zoom-fit}
(tr "workspace.header.zoom-fit-all")
[:span {:class (stl/css :shortcuts)}
(for [sc (scd/split-sc (sc/get-tooltip :fit-all))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]
[:li {:class (stl/css :zoom-option)
:on-click on-zoom-selected}
(tr "workspace.header.zoom-selected")
[:span {:class (stl/css :shortcuts)}
(for [sc (scd/split-sc (sc/get-tooltip :zoom-selected))]
[:span {:class (dom/classnames (stl/css :shortcut-key) true)} sc])]]]]]))
;; --- Header Component
(mf/defc right-header
{::mf/wrap-props false}
[{:keys [file layout page-id]}]
(let [file-id (:id file)
zoom (mf/deref refs/selected-zoom)
read-only? (mf/use-ctx ctx/workspace-read-only?)
selected-drawtool (mf/deref refs/selected-drawing-tool)
on-increase (mf/use-fn #(st/emit! (dw/increase-zoom nil)))
on-decrease (mf/use-fn #(st/emit! (dw/decrease-zoom nil)))
on-zoom-reset (mf/use-fn #(st/emit! dw/reset-zoom))
on-zoom-fit (mf/use-fn #(st/emit! dw/zoom-to-fit-all))
on-zoom-selected (mf/use-fn #(st/emit! dw/zoom-to-selected-shape))
editing* (mf/use-state false)
editing? (deref editing*)
input-ref (mf/use-ref nil)
nav-to-viewer
(mf/use-fn
(mf/deps file-id page-id)
(fn []
(let [params {:page-id page-id
:file-id file-id
:section "interactions"}]
(st/emit! (dw/go-to-viewer params)))))
active-comments
(mf/use-fn
(fn []
(st/emit! :interrupt
dw/clear-edition-mode)
;; Delay so anything that launched :interrupt can finish
(ts/schedule 100 #(st/emit! (dw/select-for-drawing :comments)))))
toggle-comments
(mf/use-fn
(mf/deps selected-drawtool)
(fn [_]
(if (= :comments selected-drawtool)
(st/emit! :interrupt)
(active-comments))))
toggle-history
(mf/use-fn
(mf/deps selected-drawtool)
(fn []
(when (= :comments selected-drawtool)
(st/emit! :interrupt))
(st/emit! (-> (dw/toggle-layout-flag :document-history)
(vary-meta assoc ::ev/origin "workspace-header")))))]
(mf/with-effect [editing?]
(when ^boolean editing?
(dom/select-text! (mf/ref-val input-ref))))
[:div {:class (stl/css :workspace-header-right)}
[:div {:class (stl/css :users-section)}
[:& active-sessions]]
[:div {:class (stl/css :zoom-section)}
[:& zoom-widget-workspace
{:zoom zoom
:on-increase on-increase
:on-decrease on-decrease
:on-zoom-reset on-zoom-reset
:on-zoom-fit on-zoom-fit
:on-zoom-selected on-zoom-selected}]]
[:& persistence-state-widget]
[:& export-progress-widget]
[:div {:class (stl/css :comments-section)}
[:button {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:class (stl/css-case :comments-btn true
:selected (= selected-drawtool :comments))
:on-click toggle-comments
:data-tool "comments"}
i/comments-refactor]]
(when-not ^boolean read-only?
[:div {:class (stl/css :history-section)}
[:button
{:title (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
:aria-label (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
:class (stl/css-case :selected (contains? layout :document-history)
:history-button true)
:on-click toggle-history}
i/history-refactor]])
[:a {:class (stl/css :viewer-btn)
:title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
:on-click nav-to-viewer}
i/play-refactor]]))

1
frontend/src/app/main/ui/workspace/right_header.css.json Normal file
View file

@ -0,0 +1 @@
{"button-primary":"workspace_right_header_button-primary_85-jx","button-secondary":"workspace_right_header_button-secondary_3-qmf","button-tertiary":"workspace_right_header_button-tertiary_fRTli","workspace-header-right":"workspace_right_header_workspace-header-right_aEp3-","viewer-btn":"workspace_right_header_viewer-btn_NXJbl","history-section":"workspace_right_header_history-section_-2kJh","history-button":"workspace_right_header_history-button_UqeiD","comments-section":"workspace_right_header_comments-section_jUB3P","comments-btn":"workspace_right_header_comments-btn_1Caqy","zoom-section":"workspace_right_header_zoom-section_8qteN","dropdown":"workspace_right_header_dropdown_5j2hb","basic-zoom-bar":"workspace_right_header_basic-zoom-bar_3NdtC","reset-btn":"workspace_right_header_reset-btn_mvSYS","zoom-btns":"workspace_right_header_zoom-btns_XP7R1","zoom-btn":"workspace_right_header_zoom-btn_RDxOf","button-tag":"workspace_right_header_button-tag_k9kn3","button-icon":"workspace_right_header_button-icon_ONOzL","persistence-status-widget":"workspace_right_header_persistence-status-widget_wcska","status-icon":"workspace_right_header_status-icon_D6pD5","zoom-icon":"workspace_right_header_zoom-icon_hzk3v","zoom-widget":"workspace_right_header_zoom-widget_zFiLv","icon":"workspace_right_header_icon_4xmYx","button-icon-small":"workspace_right_header_button-icon-small_9J3iP","asset-element":"workspace_right_header_asset-element_i-xUp","new-scrollbar":"workspace_right_header_new-scrollbar_i-KWQ","menu-dropdown":"workspace_right_header_menu-dropdown_0AKsJ","menu-item":"workspace_right_header_menu-item_ZJVN4","zoom-option":"workspace_right_header_zoom-option_fpEoB","shortcut":"workspace_right_header_shortcut_y3tfM","shortcuts":"workspace_right_header_shortcuts_HBkyp","shortcut-key":"workspace_right_header_shortcut-key_fg92X","user-icon":"workspace_right_header_user-icon_kP9lj","users-section":"workspace_right_header_users-section_kq2VA","label":"workspace_right_header_label_gBAC0","selected":"workspace_right_header_selected_ChwQW","zoom-text":"workspace_right_header_zoom-text_-xaiw","pending-status":"workspace_right_header_pending-status_GAQfv","saving-status":"workspace_right_header_saving-status_pUkV7","spin-animation":"workspace_right_header_spin-animation_XH76b","saved-status":"workspace_right_header_saved-status_kWULe","error-status":"workspace_right_header_error-status_Gchf-"}

216
frontend/src/app/main/ui/workspace/right_header.scss Normal file
View file

@ -0,0 +1,216 @@
// 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
@import "refactor/common-refactor.scss";
.workspace-header-right {
display: flex;
justify-content: space-between;
align-items: center;
min-width: $s-256;
padding: $s-8;
gap: $s-2;
background-color: var(--panel-background-color);
.users-section {
position: relative;
min-width: $s-32;
}
.zoom-section {
.zoom-widget {
@include buttonStyle;
display: flex;
align-items: center;
justify-content: flex-end;
height: $s-28;
width: $s-72;
max-width: $s-72;
padding: $s-4;
border-radius: $br-8;
.label {
@include titleTipography;
color: var(--menu-foreground-color);
}
.icon {
@include flexCenter;
svg {
@extend .button-icon;
stroke: var(--menu-foreground-color);
transform: rotate(90deg);
}
}
&:hover {
background-color: var(--button-tertiary-background-color-hover);
.label {
color: var(--button-tertiary-foreground-color-hover);
}
.icon svg {
stroke: var(--button-tertiary-foreground-color-hover);
}
}
&.selected {
background-color: var(--button-tertiary-background-color-selected);
border: $s-2 solid var(--button-tertiary-border-color-selected);
.label {
color: var(--button-tertiary-foreground-color-selected);
}
.icon svg {
stroke: var(--button-tertiary-foreground-color-selected);
}
}
}
.dropdown {
@extend .menu-dropdown;
position: absolute;
right: 0;
top: $s-48;
width: $s-280;
.basic-zoom-bar {
display: flex;
justify-content: space-between;
padding: $s-6;
cursor: auto;
.zoom-btns {
display: flex;
.zoom-btn {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
border-radius: $br-8;
.zoom-icon {
@include flexCenter;
svg {
@extend .button-icon;
}
}
&:hover {
.zoom-icon svg {
stroke: var(--button-tertiary-foreground-color-hover);
}
}
}
.zoom-text {
@include flexCenter;
height: 100%;
min-width: $s-68;
padding: 0 $s-8;
margin: 0;
color: var(--modal-foreground-color);
}
}
.reset-btn {
@extend .button-tertiary;
height: $s-28;
border-radius: $br-8;
}
}
.zoom-option {
@extend .menu-item;
.shortcuts {
@extend .shortcut;
.shortcut-key {
@extend .shortcut-key;
}
}
&:hover {
color: var(--menu-foreground-color-hover);
.shortcuts {
.shortcut-key {
color: var(--menu-foreground-color-hover);
}
}
}
}
}
}
.comments-section {
.comments-btn {
@extend .button-tertiary;
border-radius: $br-8;
margin: 0;
height: $s-28;
width: $s-28;
svg {
@extend .button-icon;
height: $s-16;
width: $s-16;
}
&.selected {
background-color: var(--button-tertiary-background-color-selected);
border: $s-2 solid var(--button-tertiary-border-color-selected);
svg {
stroke: var(--button-tertiary-foreground-color-selected);
}
}
}
}
.history-section {
.history-button {
@extend .button-tertiary;
border-radius: $br-8;
margin: 0;
height: $s-28;
width: $s-28;
svg {
@extend .button-icon;
height: $s-16;
width: $s-16;
}
&.selected {
background-color: var(--button-tertiary-background-color-selected);
border: $s-2 solid var(--button-tertiary-border-color-selected);
svg {
stroke: var(--button-tertiary-foreground-color-selected);
}
}
}
}
.persistence-status-widget {
@include flexCenter;
width: $s-28;
height: $s-28;
.status-icon {
@include flexCenter;
margin: 0;
width: $s-16;
height: $s-16;
border-radius: $br-circle;
svg {
@extend .button-icon;
height: $s-12;
width: $s-12;
stroke: var(--status-icon-foreground-color);
}
}
.pending-status {
background-color: var(--status-warning-background-color);
}
.saving-status {
background-color: var(--status-pending-background-color);
svg {
animation: spin-animation 1s infinite;
animation-timing-function: linear;
}
}
.saved-status {
background-color: var(--status-ok-background-color);
}
.error-status {
background-color: var(--status-error-background-color);
}
}
.viewer-btn {
@extend .button-tertiary;
border-radius: $br-8;
margin: 0;
width: $s-28;
height: $s-28;
svg {
@extend .button-icon;
height: $s-16;
width: $s-16;
}
}
}

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

@ -17,6 +17,8 @@
[app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.comments :refer [comments-sidebar]]
[app.main.ui.workspace.left-header :refer [left-header]]
[app.main.ui.workspace.right-header :refer [right-header]]
[app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]]
[app.main.ui.workspace.sidebar.debug :refer [debug-panel]]
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
@ -34,9 +36,10 @@
(mf/defc left-sidebar
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[{:keys [layout] :as props}]
[{:keys [layout file page-id] :as props}]
(let [options-mode (mf/deref refs/options-mode-global)
mode-inspect? (= options-mode :inspect)
project (mf/deref refs/workspace-project)
section (cond (or mode-inspect? (contains? layout :layers)) :layers
(contains? layout :assets) :assets)
@ -45,7 +48,7 @@
new-css-system (mf/use-ctx ctx/new-css-system)
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(use-resize-hook :left-sidebar 255 255 500 :x false :left)
(use-resize-hook :left-sidebar 275 275 500 :x false :left)
handle-collapse
(mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
@ -54,6 +57,8 @@
(mf/use-fn #(st/emit! (dw/go-to-layout %)))]
[:aside {:ref parent-ref
:id "left-sidebar-aside"
:data-size size
:class (if ^boolean new-css-system
(dom/classnames (css :left-settings-bar) true
:two-row (<= size 300)
@ -65,6 +70,8 @@
:three-row (and (> size 300) (<= size 400))
:four-row (> size 400)))
:style #js {"--width" (dm/str size "px")}}
(when new-css-system
[:& left-header {:file file :layout layout :project project :page-id page-id}])
[:div {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
@ -128,8 +135,9 @@
(mf/defc right-sidebar
{::mf/wrap-props false
::mf/wrap [mf/memo]}
[{:keys [layout section] :as props}]
[{:keys [layout section file page-id ] :as props}]
(let [drawing-tool (:tool (mf/deref refs/workspace-drawing))
new-css-system (mf/use-ctx ctx/new-css-system)
is-comments? (= drawing-tool :comments)
is-history? (contains? layout :document-history)
@ -139,7 +147,7 @@
;;prev-expanded? (hooks/use-previous expanded?)
current-section* (mf/use-state :info)
current-section (deref current-section*)
current-section (deref current-section*)
can-be-expanded? (and (not is-comments?)
(not is-history?)
@ -147,7 +155,7 @@
(= current-section :code))
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move set-size size]}
(use-resize-hook :code 256 256 768 :x true :right)
(use-resize-hook :code 276 276 768 :x true :right)
handle-change-section
(mf/use-callback
@ -158,7 +166,7 @@
(mf/use-callback
(mf/deps size)
(fn []
(set-size (if (> size 256) 256 768))))
(set-size (if (> size 276) 276 768))))
props
(-> props
@ -166,14 +174,25 @@
(obj/set! "on-change-section" handle-change-section)
(obj/set! "on-expand" handle-expand))]
[:aside.settings-bar.settings-bar-right
{:class (when (not can-be-expanded?) "not-expand")
:style #js {"--width" (when can-be-expanded? (dm/str size "px"))}}
[:aside {:class (if ^boolean new-css-system
(dom/classnames (css :settings-bar) true
(css :right-settings-bar) true
(css :not-expand) (not can-be-expanded?)
(css :expanded) (> size 276))
(dom/classnames :settings-bar true
:settings-bar-right true
:not-expand (not can-be-expanded?)))
:id "right-sidebar-aside"
:data-size size
:style #js {"--width" (when can-be-expanded? (dm/str size "px"))}}
(when can-be-expanded?
[:div.resize-area
{:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move}])
(when new-css-system
[:& right-header {:file file :layout layout :page-id page-id}])
[:div.settings-bar-inside
(cond
(true? is-comments?)

2
frontend/src/app/main/ui/workspace/sidebar.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_sidebar_button-primary_K7xW6","button-secondary":"workspace_sidebar_button-secondary_e2eQE","button-tertiary":"workspace_sidebar_button-tertiary_QKqHT","button-tag":"workspace_sidebar_button-tag_Xc0Sm","button-icon":"workspace_sidebar_button-icon_OXdmL","button-icon-small":"workspace_sidebar_button-icon-small_EYb9x","asset-element":"workspace_sidebar_asset-element_vzrfV","new-scrollbar":"workspace_sidebar_new-scrollbar_zGNNO","left-settings-bar":"workspace_sidebar_left-settings-bar_7co5t","resize-area":"workspace_sidebar_resize-area_ny1v0","settings-bar-inside":"workspace_sidebar_settings-bar-inside_YnFv8","tabs-wrapper":"workspace_sidebar_tabs-wrapper_YDo4o","layers-tab":"workspace_sidebar_layers-tab_soxRL"}
{"button-primary":"workspace_sidebar_button-primary_K7xW6","button-secondary":"workspace_sidebar_button-secondary_e2eQE","button-tertiary":"workspace_sidebar_button-tertiary_QKqHT","button-tag":"workspace_sidebar_button-tag_Xc0Sm","button-icon":"workspace_sidebar_button-icon_OXdmL","button-icon-small":"workspace_sidebar_button-icon-small_EYb9x","asset-element":"workspace_sidebar_asset-element_vzrfV","new-scrollbar":"workspace_sidebar_new-scrollbar_zGNNO","menu-dropdown":"workspace_sidebar_menu-dropdown_yPcl7","menu-item":"workspace_sidebar_menu-item_eS58p","shortcut":"workspace_sidebar_shortcut_FO4pn","shortcut-key":"workspace_sidebar_shortcut-key_fS0-y","user-icon":"workspace_sidebar_user-icon_SzjFB","left-settings-bar":"workspace_sidebar_left-settings-bar_7co5t","resize-area":"workspace_sidebar_resize-area_ny1v0","settings-bar-inside":"workspace_sidebar_settings-bar-inside_YnFv8","tabs-wrapper":"workspace_sidebar_tabs-wrapper_YDo4o","layers-tab":"workspace_sidebar_layers-tab_soxRL","right-settings-bar":"workspace_sidebar_right-settings-bar_bGP1x","not-expand":"workspace_sidebar_not-expand_YltWC","expanded":"workspace_sidebar_expanded_SOYSs","spin-animation":"workspace_sidebar_spin-animation_CNSmq"}

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

@ -6,24 +6,22 @@
@import "refactor/common-refactor.scss";
$width-settings-bar: 256px;
$width-settings-bar-min: 255px;
$width-settings-bar-max: 500px;
$width-settings-bar: $s-276;
$width-settings-bar-max: $s-500;
.left-settings-bar {
position: relative;
grid-area: left-sidebar;
min-width: $width-settings-bar;
max-width: 500px;
max-width: $width-settings-bar-max;
width: var(--width, $width-settings-bar);
height: 100%;
border-radius: $br-8;
background-color: var(--panel-background-color);
.resize-area {
position: absolute;
right: -8px;
z-index: $z-index-10;
z-index: $z-index-3;
width: $s-8;
height: 100%;
cursor: ew-resize;
@ -32,7 +30,7 @@ $width-settings-bar-max: 500px;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
height: calc(100% - 2px);
height: calc(100% - 50px);
.tabs-wrapper {
.layers-tab {
display: grid;
@ -47,3 +45,14 @@ $width-settings-bar-max: 500px;
:global(.tab-spacing) {
margin: $s-4 $s-4 0 $s-4;
}
.right-settings-bar {
grid-area: right-sidebar;
width: $width-settings-bar;
&.not-expand {
max-width: $width-settings-bar;
}
&.expanded {
width: var(--width, $width-settings-bar);
}
}

2
frontend/src/app/main/ui/workspace/sidebar/assets.css.json
View file

@ -1 +1 @@
{"button-primary":"sidebar_assets_button-primary_a9p4J","button-secondary":"sidebar_assets_button-secondary_hbgBA","assets-bar":"sidebar_assets_assets-bar_gzAPj","assets-header":"sidebar_assets_assets-header_aFHCj","search-wrapper":"sidebar_assets_search-wrapper_n5kE7","sort-button":"sidebar_assets_sort-button_UvVYu","libraries-button":"sidebar_assets_libraries-button_cKUY7","button-tertiary":"sidebar_assets_button-tertiary_KoPen","button-tag":"sidebar_assets_button-tag_yzpPm","button-icon":"sidebar_assets_button-icon_M5Yy6","libraries-icon":"sidebar_assets_libraries-icon_ikusB","button-icon-small":"sidebar_assets_button-icon-small_xZWe1","asset-element":"sidebar_assets_asset-element_xHJzG","new-scrollbar":"sidebar_assets_new-scrollbar_2SXio","section-button":"sidebar_assets_section-button_RSjn8","sections-container":"sidebar_assets_sections-container_r2YTM","section-item":"sidebar_assets_section-item_u6EYM","section-btn":"sidebar_assets_section-btn_s4h2P","libraries-wrapper":"sidebar_assets_libraries-wrapper_agaHg"}
{"button-primary":"sidebar_assets_button-primary_a9p4J","button-secondary":"sidebar_assets_button-secondary_hbgBA","assets-bar":"sidebar_assets_assets-bar_gzAPj","assets-header":"sidebar_assets_assets-header_aFHCj","search-wrapper":"sidebar_assets_search-wrapper_n5kE7","sort-button":"sidebar_assets_sort-button_UvVYu","libraries-button":"sidebar_assets_libraries-button_cKUY7","button-tertiary":"sidebar_assets_button-tertiary_KoPen","button-tag":"sidebar_assets_button-tag_yzpPm","button-icon":"sidebar_assets_button-icon_M5Yy6","libraries-icon":"sidebar_assets_libraries-icon_ikusB","button-icon-small":"sidebar_assets_button-icon-small_xZWe1","asset-element":"sidebar_assets_asset-element_xHJzG","new-scrollbar":"sidebar_assets_new-scrollbar_2SXio","menu-dropdown":"sidebar_assets_menu-dropdown_YLEyF","menu-item":"sidebar_assets_menu-item_NV7hO","shortcut":"sidebar_assets_shortcut_4ngAb","shortcut-key":"sidebar_assets_shortcut-key_H48e8","user-icon":"sidebar_assets_user-icon_p-VBP","section-button":"sidebar_assets_section-button_RSjn8","sections-container":"sidebar_assets_sections-container_r2YTM","section-item":"sidebar_assets_section-item_u6EYM","section-btn":"sidebar_assets_section-btn_s4h2P","libraries-wrapper":"sidebar_assets_libraries-wrapper_agaHg","spin-animation":"sidebar_assets_spin-animation_ReXkJ"}

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

@ -78,6 +78,7 @@
}
}
.sections-container {
@include menuShadow;
position: absolute;
top: $s-84;
left: $s-12;
@ -88,8 +89,7 @@
padding: $s-4;
border-radius: $br-8;
background-color: var(--menu-background-color);
z-index: $z-index-4;
box-shadow: 0px 0px 10px 0px var(--menu-shadow-color);
z-index: $z-index-2;
.section-item {
@include titleTipography;
display: flex;

2
frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json
View file

@ -1 +1 @@
{"button-primary":"assets_colors_button-primary_6ZMmx","button-secondary":"assets_colors_button-secondary_dNSLH","button-tertiary":"assets_colors_button-tertiary_h20-o","assets-btn":"assets_colors_assets-btn_t8DHG","button-tag":"assets_colors_button-tag_ux-NH","button-icon":"assets_colors_button-icon_f-EVH","button-icon-small":"assets_colors_button-icon-small_zq8dv","asset-element":"assets_colors_asset-element_XSxD1","new-scrollbar":"assets_colors_new-scrollbar_wIoIr","colors-group":"assets_colors_colors-group_fUsuo","asset-list":"assets_colors_asset-list_wMm1l","asset-list-item":"assets_colors_asset-list-item_ZFtXC","bullet-block":"assets_colors_bullet-block_ZRR2Y","name-block":"assets_colors_name-block_Zvmy3","default-name-only":"assets_colors_default-name-only_JFCGo","name":"assets_colors_name_AjZzr","default-name":"assets_colors_default-name_8gEAb","element-name":"assets_colors_element-name_ADGM8","selected":"assets_colors_selected_ElMu0","editing":"assets_colors_editing_FWnHU","grid-placeholder":"assets_colors_grid-placeholder_7wTFd","drop-space":"assets_colors_drop-space_lbzeC","dragging":"assets_colors_dragging_EmBOk"}
{"button-primary":"assets_colors_button-primary_6ZMmx","button-secondary":"assets_colors_button-secondary_dNSLH","button-tertiary":"assets_colors_button-tertiary_h20-o","assets-btn":"assets_colors_assets-btn_t8DHG","button-tag":"assets_colors_button-tag_ux-NH","button-icon":"assets_colors_button-icon_f-EVH","button-icon-small":"assets_colors_button-icon-small_zq8dv","asset-element":"assets_colors_asset-element_XSxD1","new-scrollbar":"assets_colors_new-scrollbar_wIoIr","menu-dropdown":"assets_colors_menu-dropdown_WpZbI","menu-item":"assets_colors_menu-item_jPeYs","shortcut":"assets_colors_shortcut_4XD-P","shortcut-key":"assets_colors_shortcut-key_s2Qcm","user-icon":"assets_colors_user-icon_Pxni6","colors-group":"assets_colors_colors-group_fUsuo","asset-list":"assets_colors_asset-list_wMm1l","asset-list-item":"assets_colors_asset-list-item_ZFtXC","bullet-block":"assets_colors_bullet-block_ZRR2Y","name-block":"assets_colors_name-block_Zvmy3","default-name-only":"assets_colors_default-name-only_JFCGo","name":"assets_colors_name_AjZzr","default-name":"assets_colors_default-name_8gEAb","element-name":"assets_colors_element-name_ADGM8","selected":"assets_colors_selected_ElMu0","editing":"assets_colors_editing_FWnHU","grid-placeholder":"assets_colors_grid-placeholder_7wTFd","drop-space":"assets_colors_drop-space_lbzeC","dragging":"assets_colors_dragging_EmBOk","spin-animation":"assets_colors_spin-animation_zeSlr"}

2
frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json
View file

@ -1 +1 @@
{"button-primary":"assets_common_button-primary_-eBqD","button-secondary":"assets_common_button-secondary_qo2kg","button-tertiary":"assets_common_button-tertiary_ApdBb","button-tag":"assets_common_button-tag_MHJlj","button-icon":"assets_common_button-icon_0R1zt","button-icon-small":"assets_common_button-icon-small_5kQfO","asset-element":"assets_common_asset-element_frsFR","new-scrollbar":"assets_common_new-scrollbar_JN2v-","asset-section":"assets_common_asset-section_uKhc8","title-name":"assets_common_title-name_ZOz9E","section-icon":"assets_common_section-icon_Kitcf","section-name":"assets_common_section-name_RVo-u","num-assets":"assets_common_num-assets_Dguaz"}
{"button-primary":"assets_common_button-primary_-eBqD","button-secondary":"assets_common_button-secondary_qo2kg","button-tertiary":"assets_common_button-tertiary_ApdBb","button-tag":"assets_common_button-tag_MHJlj","button-icon":"assets_common_button-icon_0R1zt","button-icon-small":"assets_common_button-icon-small_5kQfO","asset-element":"assets_common_asset-element_frsFR","new-scrollbar":"assets_common_new-scrollbar_JN2v-","menu-dropdown":"assets_common_menu-dropdown_l6JLU","menu-item":"assets_common_menu-item_d2IzY","shortcut":"assets_common_shortcut_Uk4nm","shortcut-key":"assets_common_shortcut-key_F0DUJ","user-icon":"assets_common_user-icon_rLf8F","asset-section":"assets_common_asset-section_uKhc8","title-name":"assets_common_title-name_ZOz9E","section-icon":"assets_common_section-icon_Kitcf","section-name":"assets_common_section-name_RVo-u","num-assets":"assets_common_num-assets_Dguaz","spin-animation":"assets_common_spin-animation_7inPz"}

2
frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json
View file

@ -1 +1 @@
{"button-primary":"assets_components_button-primary_lsoWq","button-secondary":"assets_components_button-secondary_P8v5X","button-tertiary":"assets_components_button-tertiary_7wMqf","add-component":"assets_components_add-component_X9o2C","button-tag":"assets_components_button-tag_ibmtY","button-icon":"assets_components_button-icon_4Lapr","button-icon-small":"assets_components_button-icon-small_7WrRR","component-group":"assets_components_component-group_AYXVI","asset-enum":"assets_components_asset-enum_iLlfH","enum-item":"assets_components_enum-item_l4zuE","item-name":"assets_components_item-name_Hwadc","editing":"assets_components_editing_3RdZy","asset-grid":"assets_components_asset-grid_mK75F","grid-cell":"assets_components_grid-cell_ctU6T","cell-name":"assets_components_cell-name_DUUMt","asset-element":"assets_components_asset-element_UsbdX","new-scrollbar":"assets_components_new-scrollbar_IvvMB","drop-space":"assets_components_drop-space_QhD1-","selected":"assets_components_selected_QLPO7","grid-placeholder":"assets_components_grid-placeholder_a3PoY","listing-options":"assets_components_listing-options_-vPIQ","listing-option-btn":"assets_components_listing-option-btn_-d9cg","first":"assets_components_first_sri1T","dragging":"assets_components_dragging_bWqQC"}
{"button-primary":"assets_components_button-primary_lsoWq","button-secondary":"assets_components_button-secondary_P8v5X","button-tertiary":"assets_components_button-tertiary_7wMqf","add-component":"assets_components_add-component_X9o2C","button-tag":"assets_components_button-tag_ibmtY","button-icon":"assets_components_button-icon_4Lapr","button-icon-small":"assets_components_button-icon-small_7WrRR","component-group":"assets_components_component-group_AYXVI","asset-enum":"assets_components_asset-enum_iLlfH","enum-item":"assets_components_enum-item_l4zuE","item-name":"assets_components_item-name_Hwadc","editing":"assets_components_editing_3RdZy","asset-grid":"assets_components_asset-grid_mK75F","grid-cell":"assets_components_grid-cell_ctU6T","cell-name":"assets_components_cell-name_DUUMt","asset-element":"assets_components_asset-element_UsbdX","new-scrollbar":"assets_components_new-scrollbar_IvvMB","menu-dropdown":"assets_components_menu-dropdown_PEOsj","menu-item":"assets_components_menu-item_BTWp5","shortcut":"assets_components_shortcut_R6d2o","shortcut-key":"assets_components_shortcut-key_cf4Uh","user-icon":"assets_components_user-icon_37v1Y","drop-space":"assets_components_drop-space_QhD1-","selected":"assets_components_selected_QLPO7","grid-placeholder":"assets_components_grid-placeholder_a3PoY","listing-options":"assets_components_listing-options_-vPIQ","listing-option-btn":"assets_components_listing-option-btn_-d9cg","first":"assets_components_first_sri1T","dragging":"assets_components_dragging_bWqQC","spin-animation":"assets_components_spin-animation_WBo--"}

2
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json
View file

@ -1 +1 @@
{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","special-subtitle":"assets_file_library_special-subtitle_9xOl9","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV"}
{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","special-subtitle":"assets_file_library_special-subtitle_9xOl9","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"}

2
frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json
View file

@ -1 +1 @@
{"button-primary":"assets_graphics_button-primary_6qIO6","button-secondary":"assets_graphics_button-secondary_0qkG4","button-tertiary":"assets_graphics_button-tertiary_bWZ1s","assets-btn":"assets_graphics_assets-btn_BIoeo","add-component":"assets_graphics_add-component_bgwrr","button-tag":"assets_graphics_button-tag_K3ckf","button-icon":"assets_graphics_button-icon_En5qq","button-icon-small":"assets_graphics_button-icon-small_xNHzC","asset-element":"assets_graphics_asset-element_-VwmF","new-scrollbar":"assets_graphics_new-scrollbar_10lYW","graphics-group":"assets_graphics_graphics-group_kibPf","drop-space":"assets_graphics_drop-space_2UAKf","asset-grid":"assets_graphics_asset-grid_6ET0K","grid-cell":"assets_graphics_grid-cell_EHW4x","cell-name":"assets_graphics_cell-name_JgbUS","editing":"assets_graphics_editing_O-Ozt","editable-label-input":"assets_graphics_editable-label-input_Yc2zA","editable-label-close":"assets_graphics_editable-label-close_16VT8","selected":"assets_graphics_selected_Q9YJC","dragging":"assets_graphics_dragging_oVA41","asset-enum":"assets_graphics_asset-enum_TS6Je","enum-item":"assets_graphics_enum-item_UFh4c","item-name":"assets_graphics_item-name_HGIQs","grid-placeholder":"assets_graphics_grid-placeholder_9brkO","listing-options":"assets_graphics_listing-options_Jw51P","listing-option-btn":"assets_graphics_listing-option-btn_3IkTO","first":"assets_graphics_first_kU3zf"}
{"button-primary":"assets_graphics_button-primary_6qIO6","button-secondary":"assets_graphics_button-secondary_0qkG4","button-tertiary":"assets_graphics_button-tertiary_bWZ1s","assets-btn":"assets_graphics_assets-btn_BIoeo","add-component":"assets_graphics_add-component_bgwrr","button-tag":"assets_graphics_button-tag_K3ckf","button-icon":"assets_graphics_button-icon_En5qq","button-icon-small":"assets_graphics_button-icon-small_xNHzC","asset-element":"assets_graphics_asset-element_-VwmF","new-scrollbar":"assets_graphics_new-scrollbar_10lYW","menu-dropdown":"assets_graphics_menu-dropdown_r8D0N","menu-item":"assets_graphics_menu-item_cbQq8","shortcut":"assets_graphics_shortcut_vxxjT","shortcut-key":"assets_graphics_shortcut-key_G6mgB","user-icon":"assets_graphics_user-icon_2W6f-","graphics-group":"assets_graphics_graphics-group_kibPf","drop-space":"assets_graphics_drop-space_2UAKf","asset-grid":"assets_graphics_asset-grid_6ET0K","grid-cell":"assets_graphics_grid-cell_EHW4x","cell-name":"assets_graphics_cell-name_JgbUS","editing":"assets_graphics_editing_O-Ozt","editable-label-input":"assets_graphics_editable-label-input_Yc2zA","editable-label-close":"assets_graphics_editable-label-close_16VT8","selected":"assets_graphics_selected_Q9YJC","dragging":"assets_graphics_dragging_oVA41","asset-enum":"assets_graphics_asset-enum_TS6Je","enum-item":"assets_graphics_enum-item_UFh4c","item-name":"assets_graphics_item-name_HGIQs","grid-placeholder":"assets_graphics_grid-placeholder_9brkO","listing-options":"assets_graphics_listing-options_Jw51P","listing-option-btn":"assets_graphics_listing-option-btn_3IkTO","first":"assets_graphics_first_kU3zf","spin-animation":"assets_graphics_spin-animation_9EfUf"}

2
frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json
View file

@ -1 +1 @@
{"button-primary":"assets_groups_button-primary_2o3Db","button-secondary":"assets_groups_button-secondary_-qdxB","button-tertiary":"assets_groups_button-tertiary_1f4Jy","button-tag":"assets_groups_button-tag_yIgd9","button-icon":"assets_groups_button-icon_MSptS","button-icon-small":"assets_groups_button-icon-small_73Ir0","asset-element":"assets_groups_asset-element_RgKXH","new-scrollbar":"assets_groups_new-scrollbar_MiZuY","group-title":"assets_groups_group-title_cV4AQ","pre-path":"assets_groups_pre-path_1rE71","path":"assets_groups_path_m0esc"}
{"button-primary":"assets_groups_button-primary_2o3Db","button-secondary":"assets_groups_button-secondary_-qdxB","button-tertiary":"assets_groups_button-tertiary_1f4Jy","button-tag":"assets_groups_button-tag_yIgd9","button-icon":"assets_groups_button-icon_MSptS","button-icon-small":"assets_groups_button-icon-small_73Ir0","asset-element":"assets_groups_asset-element_RgKXH","new-scrollbar":"assets_groups_new-scrollbar_MiZuY","menu-dropdown":"assets_groups_menu-dropdown_TL814","menu-item":"assets_groups_menu-item_xbSue","shortcut":"assets_groups_shortcut_oaCl2","shortcut-key":"assets_groups_shortcut-key_zz6aG","user-icon":"assets_groups_user-icon_wj5J2","group-title":"assets_groups_group-title_cV4AQ","pre-path":"assets_groups_pre-path_1rE71","path":"assets_groups_path_m0esc","spin-animation":"assets_groups_spin-animation_NvY-S"}

2
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json
View file

@ -1 +1 @@
{"button-primary":"assets_typographies_button-primary_njVYq","button-secondary":"assets_typographies_button-secondary_Wzmmw","button-tertiary":"assets_typographies_button-tertiary_k3V5a","assets-btn":"assets_typographies_assets-btn_wCF-m","button-tag":"assets_typographies_button-tag_grTbB","button-icon":"assets_typographies_button-icon_7peoi","button-icon-small":"assets_typographies_button-icon-small_oHD9w","asset-element":"assets_typographies_asset-element_hvNzY","new-scrollbar":"assets_typographies_new-scrollbar_P2gpd","typographies-group":"assets_typographies_typographies-group_iCR4V","assets-list":"assets_typographies_assets-list_wS3At","drop-space":"assets_typographies_drop-space_kGrjB","grid-placeholder":"assets_typographies_grid-placeholder_FvcCI","typography-item":"assets_typographies_typography-item_qkADe","dragging":"assets_typographies_dragging_Ns4o7"}
{"button-primary":"assets_typographies_button-primary_njVYq","button-secondary":"assets_typographies_button-secondary_Wzmmw","button-tertiary":"assets_typographies_button-tertiary_k3V5a","assets-btn":"assets_typographies_assets-btn_wCF-m","button-tag":"assets_typographies_button-tag_grTbB","button-icon":"assets_typographies_button-icon_7peoi","button-icon-small":"assets_typographies_button-icon-small_oHD9w","asset-element":"assets_typographies_asset-element_hvNzY","new-scrollbar":"assets_typographies_new-scrollbar_P2gpd","menu-dropdown":"assets_typographies_menu-dropdown_aHaua","menu-item":"assets_typographies_menu-item_WXEmJ","shortcut":"assets_typographies_shortcut_Sa3Di","shortcut-key":"assets_typographies_shortcut-key_dBq78","user-icon":"assets_typographies_user-icon_9eYTE","typographies-group":"assets_typographies_typographies-group_iCR4V","assets-list":"assets_typographies_assets-list_wS3At","drop-space":"assets_typographies_drop-space_kGrjB","grid-placeholder":"assets_typographies_grid-placeholder_FvcCI","typography-item":"assets_typographies_typography-item_qkADe","dragging":"assets_typographies_dragging_Ns4o7","spin-animation":"assets_typographies_spin-animation_lnxba"}

4
frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
View file

@ -21,7 +21,9 @@
(let [new-css-system (mf/use-ctx ctx/new-css-system)
on-click (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))]
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :collapsed-sidebar) true)}
[:div {:id "left-sidebar-aside"
:data-size 0
:class (dom/classnames (css :collapsed-sidebar) true)}
[:div {:class (dom/classnames (css :collapsed-title) true)}
[:button {:class (dom/classnames (css :collapsed-button) true)
:on-click on-click

2
frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json
View file

@ -1 +1 @@
{"button-primary":"sidebar_collapsable_button_button-primary_qaRce","button-secondary":"sidebar_collapsable_button_button-secondary_OqDpe","button-tertiary":"sidebar_collapsable_button_button-tertiary_NuJrA","button-tag":"sidebar_collapsable_button_button-tag_unQKq","button-icon":"sidebar_collapsable_button_button-icon_P4-xy","button-icon-small":"sidebar_collapsable_button_button-icon-small_lQUE3","asset-element":"sidebar_collapsable_button_asset-element_BboJ7","new-scrollbar":"sidebar_collapsable_button_new-scrollbar_cYoQj","collapsed-sidebar":"sidebar_collapsable_button_collapsed-sidebar_uQnGJ","collapsed-title":"sidebar_collapsable_button_collapsed-title_Jb62g","collapsed-button":"sidebar_collapsable_button_collapsed-button_LT5ME"}
{"button-primary":"sidebar_collapsable_button_button-primary_qaRce","button-secondary":"sidebar_collapsable_button_button-secondary_OqDpe","button-tertiary":"sidebar_collapsable_button_button-tertiary_NuJrA","button-tag":"sidebar_collapsable_button_button-tag_unQKq","button-icon":"sidebar_collapsable_button_button-icon_P4-xy","button-icon-small":"sidebar_collapsable_button_button-icon-small_lQUE3","asset-element":"sidebar_collapsable_button_asset-element_BboJ7","new-scrollbar":"sidebar_collapsable_button_new-scrollbar_cYoQj","menu-dropdown":"sidebar_collapsable_button_menu-dropdown_Dgfng","menu-item":"sidebar_collapsable_button_menu-item_w9GKP","shortcut":"sidebar_collapsable_button_shortcut_frmAH","shortcut-key":"sidebar_collapsable_button_shortcut-key_IULZO","user-icon":"sidebar_collapsable_button_user-icon_1axL9","collapsed-sidebar":"sidebar_collapsable_button_collapsed-sidebar_uQnGJ","collapsed-title":"sidebar_collapsable_button_collapsed-title_Jb62g","collapsed-button":"sidebar_collapsable_button_collapsed-button_LT5ME","spin-animation":"sidebar_collapsable_button_spin-animation_bwtJ0"}

2
frontend/src/app/main/ui/workspace/sidebar/history.css.json
View file

@ -1 +1 @@
{"button-primary":"sidebar_history_button-primary_3QHPC","button-secondary":"sidebar_history_button-secondary_-f-3z","button-tertiary":"sidebar_history_button-tertiary_IzuLu","history-toolbox":"sidebar_history_history-toolbox_-jdvy","history-toolbox-title":"sidebar_history_history-toolbox-title_9pxvS","close-button":"sidebar_history_close-button_CmY2q","button-tag":"sidebar_history_button-tag_9aylo","button-icon":"sidebar_history_button-icon_UeFr2","history-entry-empty":"sidebar_history_history-entry-empty_SINxx","history-entry-empty-icon":"sidebar_history_history-entry-empty-icon_XJdB6","button-icon-small":"sidebar_history_button-icon-small_9M0oh","history-entries":"sidebar_history_history-entries_NgKRp","history-entry":"sidebar_history_history-entry_lGPio","history-entry-summary":"sidebar_history_history-entry-summary_S3Glf","history-entry-summary-button":"sidebar_history_history-entry-summary-button_AjNW8","history-entry-summary-icon":"sidebar_history_history-entry-summary-icon_F-iya","asset-element":"sidebar_history_asset-element_Lm478","new-scrollbar":"sidebar_history_new-scrollbar_lmxNu","history-entry-empty-msg":"sidebar_history_history-entry-empty-msg_S3wX7","disabled":"sidebar_history_disabled_u0U-e","hover":"sidebar_history_hover_RnLwu","button-opened":"sidebar_history_button-opened_PdprO","history-entry-summary-text":"sidebar_history_history-entry-summary-text_bBYso","history-entry-detail":"sidebar_history_history-entry-detail_-QXf6","history-entry-details-list":"sidebar_history_history-entry-details-list_shkso"}
{"button-primary":"sidebar_history_button-primary_3QHPC","button-secondary":"sidebar_history_button-secondary_-f-3z","button-tertiary":"sidebar_history_button-tertiary_IzuLu","history-toolbox":"sidebar_history_history-toolbox_-jdvy","history-toolbox-title":"sidebar_history_history-toolbox-title_9pxvS","close-button":"sidebar_history_close-button_CmY2q","button-tag":"sidebar_history_button-tag_9aylo","button-icon":"sidebar_history_button-icon_UeFr2","history-entry-empty":"sidebar_history_history-entry-empty_SINxx","history-entry-empty-icon":"sidebar_history_history-entry-empty-icon_XJdB6","button-icon-small":"sidebar_history_button-icon-small_9M0oh","history-entries":"sidebar_history_history-entries_NgKRp","history-entry":"sidebar_history_history-entry_lGPio","history-entry-summary":"sidebar_history_history-entry-summary_S3Glf","history-entry-summary-button":"sidebar_history_history-entry-summary-button_AjNW8","history-entry-summary-icon":"sidebar_history_history-entry-summary-icon_F-iya","asset-element":"sidebar_history_asset-element_Lm478","new-scrollbar":"sidebar_history_new-scrollbar_lmxNu","menu-dropdown":"sidebar_history_menu-dropdown_gDAqh","menu-item":"sidebar_history_menu-item_6Yf8k","shortcut":"sidebar_history_shortcut_OhzVN","shortcut-key":"sidebar_history_shortcut-key_-sdvq","user-icon":"sidebar_history_user-icon_GHiNr","history-entry-empty-msg":"sidebar_history_history-entry-empty-msg_S3wX7","disabled":"sidebar_history_disabled_u0U-e","hover":"sidebar_history_hover_RnLwu","button-opened":"sidebar_history_button-opened_PdprO","history-entry-summary-text":"sidebar_history_history-entry-summary-text_bBYso","history-entry-detail":"sidebar_history_history-entry-detail_-QXf6","history-entry-details-list":"sidebar_history_history-entry-details-list_shkso","spin-animation":"sidebar_history_spin-animation_-Oo4-"}

2
frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json
View file

@ -1 +1 @@
{"button-primary":"sidebar_layer_item_button-primary_74ST4","button-secondary":"sidebar_layer_item_button-secondary_e4u9V","button-tertiary":"sidebar_layer_item_button-tertiary_Mo--6","button-tag":"sidebar_layer_item_button-tag_lFKoD","button-icon":"sidebar_layer_item_button-icon_-D7KH","button-icon-small":"sidebar_layer_item_button-icon-small_1RfDl","layer-row":"sidebar_layer_item_layer-row_KibLX","element-list-body":"sidebar_layer_item_element-list-body_832JO","element-actions":"sidebar_layer_item_element-actions_ACGJI","toggle-element":"sidebar_layer_item_toggle-element_4bhRW","block-element":"sidebar_layer_item_block-element_RhKz-","button-content":"sidebar_layer_item_button-content_bPwop","icon-shape":"sidebar_layer_item_icon-shape_g9Wxn","toggle-content":"sidebar_layer_item_toggle-content_MKhsv","asset-element":"sidebar_layer_item_asset-element_AXTD0","new-scrollbar":"sidebar_layer_item_new-scrollbar_zvlI0","filtered":"sidebar_layer_item_filtered_V5CHf","inverse":"sidebar_layer_item_inverse_zzZ54","absolute":"sidebar_layer_item_absolute_mYIKg","selected":"sidebar_layer_item_selected_O7P-j","element-children":"sidebar_layer_item_element-children_3iA4Q","parent-selected":"sidebar_layer_item_parent-selected_uIIyQ","hidden":"sidebar_layer_item_hidden_JRbJO","type-comp":"sidebar_layer_item_type-comp_FBSRt","tab-indentation":"sidebar_layer_item_tab-indentation_e-2dQ"}
{"button-primary":"sidebar_layer_item_button-primary_74ST4","button-secondary":"sidebar_layer_item_button-secondary_e4u9V","button-tertiary":"sidebar_layer_item_button-tertiary_Mo--6","button-tag":"sidebar_layer_item_button-tag_lFKoD","button-icon":"sidebar_layer_item_button-icon_-D7KH","button-icon-small":"sidebar_layer_item_button-icon-small_1RfDl","layer-row":"sidebar_layer_item_layer-row_KibLX","element-list-body":"sidebar_layer_item_element-list-body_832JO","element-actions":"sidebar_layer_item_element-actions_ACGJI","toggle-element":"sidebar_layer_item_toggle-element_4bhRW","block-element":"sidebar_layer_item_block-element_RhKz-","button-content":"sidebar_layer_item_button-content_bPwop","icon-shape":"sidebar_layer_item_icon-shape_g9Wxn","toggle-content":"sidebar_layer_item_toggle-content_MKhsv","asset-element":"sidebar_layer_item_asset-element_AXTD0","new-scrollbar":"sidebar_layer_item_new-scrollbar_zvlI0","menu-dropdown":"sidebar_layer_item_menu-dropdown_Xviyp","menu-item":"sidebar_layer_item_menu-item_NwoKO","shortcut":"sidebar_layer_item_shortcut_38vBX","shortcut-key":"sidebar_layer_item_shortcut-key_OCkoW","user-icon":"sidebar_layer_item_user-icon_88ou5","filtered":"sidebar_layer_item_filtered_V5CHf","inverse":"sidebar_layer_item_inverse_zzZ54","absolute":"sidebar_layer_item_absolute_mYIKg","selected":"sidebar_layer_item_selected_O7P-j","element-children":"sidebar_layer_item_element-children_3iA4Q","parent-selected":"sidebar_layer_item_parent-selected_uIIyQ","hidden":"sidebar_layer_item_hidden_JRbJO","type-comp":"sidebar_layer_item_type-comp_FBSRt","tab-indentation":"sidebar_layer_item_tab-indentation_e-2dQ","spin-animation":"sidebar_layer_item_spin-animation_1fYW9"}

2
frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json
View file

@ -1 +1 @@
{"button-primary":"sidebar_layer_name_button-primary_V-6Cp","button-secondary":"sidebar_layer_name_button-secondary_Q14Qj","button-tertiary":"sidebar_layer_name_button-tertiary_dA-v0","button-tag":"sidebar_layer_name_button-tag_fr2K0","button-icon":"sidebar_layer_name_button-icon_UQXjw","button-icon-small":"sidebar_layer_name_button-icon-small_At5P8","asset-element":"sidebar_layer_name_asset-element_WVekz","new-scrollbar":"sidebar_layer_name_new-scrollbar_gOiJo","element-name":"sidebar_layer_name_element-name_hZ-lA","selected":"sidebar_layer_name_selected_MKxdm","type-comp":"sidebar_layer_name_type-comp_TNGM-","hidden":"sidebar_layer_name_hidden_e-K3G","element-name-input":"sidebar_layer_name_element-name-input_Wpnkf"}
{"button-primary":"sidebar_layer_name_button-primary_V-6Cp","button-secondary":"sidebar_layer_name_button-secondary_Q14Qj","button-tertiary":"sidebar_layer_name_button-tertiary_dA-v0","button-tag":"sidebar_layer_name_button-tag_fr2K0","button-icon":"sidebar_layer_name_button-icon_UQXjw","button-icon-small":"sidebar_layer_name_button-icon-small_At5P8","asset-element":"sidebar_layer_name_asset-element_WVekz","new-scrollbar":"sidebar_layer_name_new-scrollbar_gOiJo","menu-dropdown":"sidebar_layer_name_menu-dropdown_st1b2","menu-item":"sidebar_layer_name_menu-item_ZR1Xe","shortcut":"sidebar_layer_name_shortcut_Nbhk9","shortcut-key":"sidebar_layer_name_shortcut-key_q4DMU","user-icon":"sidebar_layer_name_user-icon_SidW9","element-name":"sidebar_layer_name_element-name_hZ-lA","selected":"sidebar_layer_name_selected_MKxdm","type-comp":"sidebar_layer_name_type-comp_TNGM-","hidden":"sidebar_layer_name_hidden_e-K3G","element-name-input":"sidebar_layer_name_element-name-input_Wpnkf","spin-animation":"sidebar_layer_name_spin-animation_PtsAu"}

2
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -258,7 +258,7 @@
[:button
{:on-click toggle-filters
:class (stl/css-case
:filters-button true
:filter-button true
:active active?)}
i/filter-refactor]]

2
frontend/src/app/main/ui/workspace/sidebar/layers.css.json
View file

@ -1 +1 @@
{"button-primary":"sidebar_layers_button-primary_q9e2I","button-secondary":"sidebar_layers_button-secondary_H4lpi","button-tertiary":"sidebar_layers_button-tertiary_5mq-9","layers":"sidebar_layers_layers_87ZOo","tool-window-bar":"sidebar_layers_tool-window-bar_lg54C","search":"sidebar_layers_search_zjs2x","close-search":"sidebar_layers_close-search_baIhK","icon-search":"sidebar_layers_icon-search_6kWUn","button-tag":"sidebar_layers_button-tag_FT7oa","active-filters":"sidebar_layers_active-filters_-JMMP","layer-filter":"sidebar_layers_layer-filter_rHZTz","button-icon":"sidebar_layers_button-icon_SD8PP","button-icon-small":"sidebar_layers_button-icon-small_v5L-u","filters-container":"sidebar_layers_filters-container_c1Ux9","filter-menu-item":"sidebar_layers_filter-menu-item_aZd0D","filter-menu-item-tick":"sidebar_layers_filter-menu-item-tick_JNdIK","filter-menu-item-name-wrapper":"sidebar_layers_filter-menu-item-name-wrapper_DtGkH","filter-menu-item-icon":"sidebar_layers_filter-menu-item-icon_Oi3Ix","layer-filter-icon":"sidebar_layers_layer-filter-icon_0yKrb","layer-filter-close":"sidebar_layers_layer-filter-close_3mV4i","focus-title":"sidebar_layers_focus-title_35PvQ","back-button-icon":"sidebar_layers_back-button-icon_mHv6g","asset-element":"sidebar_layers_asset-element_-dbA7","new-scrollbar":"sidebar_layers_new-scrollbar_62eFS","page-name":"sidebar_layers_page-name_8ZDRR","filter-button":"sidebar_layers_filter-button_KXxHh","focus-name":"sidebar_layers_focus-name_Fderf","focus-mode-tag-wrapper":"sidebar_layers_focus-mode-tag-wrapper_OHXCG","focus-mode-tag":"sidebar_layers_focus-mode-tag_J5ItD","layer-filter-name":"sidebar_layers_layer-filter-name_Y4PuB","filter-menu-item-name":"sidebar_layers_filter-menu-item-name_rxeut","selected":"sidebar_layers_selected_V5Vv3","tool-window-content":"sidebar_layers_tool-window-content_YnpDB","element-list":"sidebar_layers_element-list_nAntB"}
{"button-primary":"sidebar_layers_button-primary_q9e2I","button-secondary":"sidebar_layers_button-secondary_H4lpi","button-tertiary":"sidebar_layers_button-tertiary_5mq-9","layers":"sidebar_layers_layers_87ZOo","tool-window-bar":"sidebar_layers_tool-window-bar_lg54C","search":"sidebar_layers_search_zjs2x","close-search":"sidebar_layers_close-search_baIhK","icon-search":"sidebar_layers_icon-search_6kWUn","button-tag":"sidebar_layers_button-tag_FT7oa","active-filters":"sidebar_layers_active-filters_-JMMP","layer-filter":"sidebar_layers_layer-filter_rHZTz","button-icon":"sidebar_layers_button-icon_SD8PP","button-icon-small":"sidebar_layers_button-icon-small_v5L-u","filters-container":"sidebar_layers_filters-container_c1Ux9","filter-menu-item":"sidebar_layers_filter-menu-item_aZd0D","filter-menu-item-tick":"sidebar_layers_filter-menu-item-tick_JNdIK","filter-menu-item-name-wrapper":"sidebar_layers_filter-menu-item-name-wrapper_DtGkH","filter-menu-item-icon":"sidebar_layers_filter-menu-item-icon_Oi3Ix","layer-filter-icon":"sidebar_layers_layer-filter-icon_0yKrb","layer-filter-close":"sidebar_layers_layer-filter-close_3mV4i","focus-title":"sidebar_layers_focus-title_35PvQ","back-button-icon":"sidebar_layers_back-button-icon_mHv6g","asset-element":"sidebar_layers_asset-element_-dbA7","new-scrollbar":"sidebar_layers_new-scrollbar_62eFS","menu-dropdown":"sidebar_layers_menu-dropdown_ENGDz","menu-item":"sidebar_layers_menu-item_d4Oxp","shortcut":"sidebar_layers_shortcut_f-AXl","shortcut-key":"sidebar_layers_shortcut-key_i2kbB","user-icon":"sidebar_layers_user-icon_AoGvD","page-name":"sidebar_layers_page-name_8ZDRR","filter-button":"sidebar_layers_filter-button_KXxHh","focus-name":"sidebar_layers_focus-name_Fderf","focus-mode-tag-wrapper":"sidebar_layers_focus-mode-tag-wrapper_OHXCG","focus-mode-tag":"sidebar_layers_focus-mode-tag_J5ItD","layer-filter-name":"sidebar_layers_layer-filter-name_Y4PuB","filter-menu-item-name":"sidebar_layers_filter-menu-item-name_rxeut","selected":"sidebar_layers_selected_V5Vv3","tool-window-content":"sidebar_layers_tool-window-content_YnpDB","element-list":"sidebar_layers_element-list_nAntB","spin-animation":"sidebar_layers_spin-animation_jMW0C"}

10
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -157,18 +157,10 @@
}
}
.filters-container {
@extend .menu-dropdown;
position: absolute;
top: $s-44;
left: $s-12;
display: flex;
flex-direction: column;
gap: $s-4;
width: $s-192;
padding: $s-4;
border-radius: $br-8;
background-color: var(--menu-background-color);
z-index: $z-index-4;
box-shadow: 0px 0px 10px 0px var(--menu-shadow-color);
.filter-menu-item {
@include titleTipography;
display: flex;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json
View file

@ -1 +1 @@
{"button-primary":"menus_typography_button-primary_s1c9M","button-secondary":"menus_typography_button-secondary_RjAsk","button-tertiary":"menus_typography_button-tertiary_Qt18f","font-name-wrapper":"menus_typography_font-name-wrapper_Njxb6","action-btn":"menus_typography_action-btn_hCakz","button-tag":"menus_typography_button-tag_32-df","button-icon":"menus_typography_button-icon_jucwh","advanced-options-wrapper":"menus_typography_advanced-options-wrapper_k3FD6","typography-options":"menus_typography_typography-options_j1u8l","font-modifiers":"menus_typography_font-modifiers_P8cSa","font-variant-options":"menus_typography_font-variant-options_qlgLr","icon":"menus_typography_icon_eDU2Z","font-size-options":"menus_typography_font-size-options_sKQdL","font-option":"menus_typography_font-option_7mgxF","button-icon-small":"menus_typography_button-icon-small_g3fsU","font-selector":"menus_typography_font-selector_TzuGa","font-selector-dropdown":"menus_typography_font-selector-dropdown_4s6s8","font-wrapper":"menus_typography_font-wrapper_GPkHS","font-item":"menus_typography_font-item_YQffA","typography-variations":"menus_typography_typography-variations_wbNM3","spacing-options":"menus_typography_spacing-options_RUpAK","line-height":"menus_typography_line-height_S7zsF","letter-spacing":"menus_typography_letter-spacing_8R6p2","asset-element":"menus_typography_asset-element_-LlIX","text-transform":"menus_typography_text-transform_U7Y3U","new-scrollbar":"menus_typography_new-scrollbar_mfxWK","typography-entry":"menus_typography_typography-entry_Y6lvA","typography-selection-wrapper":"menus_typography_typography-selection-wrapper_W6ewx","is-selectable":"menus_typography_is-selectable_O6-D2","typography-sample":"menus_typography_typography-sample_6ruld","typography-name":"menus_typography_typography-name_b14xj","typography-font":"menus_typography_typography-font_hJIgO","selected":"menus_typography_selected_Ka-O9","typography-sample-input":"menus_typography_typography-sample-input_u2i8b","adv-typography-name":"menus_typography_adv-typography-name_PvB1X","name":"menus_typography_name_1SJal","font-size-select":"menus_typography_font-size-select_yexav","font-variant-select":"menus_typography_font-variant-select_-OQsO","line-height-input":"menus_typography_line-height-input_SG7be","letter-spacing-input":"menus_typography_letter-spacing-input_LShRc","header":"menus_typography_header_e-rUh","title":"menus_typography_title_uPejx","fonts-list":"menus_typography_fonts-list_ki8X-","label":"menus_typography_label_S-7jI"}
{"button-primary":"menus_typography_button-primary_s1c9M","button-secondary":"menus_typography_button-secondary_RjAsk","button-tertiary":"menus_typography_button-tertiary_Qt18f","font-name-wrapper":"menus_typography_font-name-wrapper_Njxb6","action-btn":"menus_typography_action-btn_hCakz","button-tag":"menus_typography_button-tag_32-df","button-icon":"menus_typography_button-icon_jucwh","advanced-options-wrapper":"menus_typography_advanced-options-wrapper_k3FD6","typography-options":"menus_typography_typography-options_j1u8l","font-modifiers":"menus_typography_font-modifiers_P8cSa","font-variant-options":"menus_typography_font-variant-options_qlgLr","icon":"menus_typography_icon_eDU2Z","font-size-options":"menus_typography_font-size-options_sKQdL","font-option":"menus_typography_font-option_7mgxF","button-icon-small":"menus_typography_button-icon-small_g3fsU","font-selector":"menus_typography_font-selector_TzuGa","font-selector-dropdown":"menus_typography_font-selector-dropdown_4s6s8","font-wrapper":"menus_typography_font-wrapper_GPkHS","font-item":"menus_typography_font-item_YQffA","typography-variations":"menus_typography_typography-variations_wbNM3","spacing-options":"menus_typography_spacing-options_RUpAK","line-height":"menus_typography_line-height_S7zsF","letter-spacing":"menus_typography_letter-spacing_8R6p2","asset-element":"menus_typography_asset-element_-LlIX","text-transform":"menus_typography_text-transform_U7Y3U","new-scrollbar":"menus_typography_new-scrollbar_mfxWK","menu-dropdown":"menus_typography_menu-dropdown_2oGkX","menu-item":"menus_typography_menu-item_QSUt6","shortcut":"menus_typography_shortcut_5kPnH","shortcut-key":"menus_typography_shortcut-key_WhTgH","user-icon":"menus_typography_user-icon_CRNHv","typography-entry":"menus_typography_typography-entry_Y6lvA","typography-selection-wrapper":"menus_typography_typography-selection-wrapper_W6ewx","is-selectable":"menus_typography_is-selectable_O6-D2","typography-sample":"menus_typography_typography-sample_6ruld","typography-name":"menus_typography_typography-name_b14xj","typography-font":"menus_typography_typography-font_hJIgO","selected":"menus_typography_selected_Ka-O9","typography-sample-input":"menus_typography_typography-sample-input_u2i8b","adv-typography-name":"menus_typography_adv-typography-name_PvB1X","name":"menus_typography_name_1SJal","font-size-select":"menus_typography_font-size-select_yexav","font-variant-select":"menus_typography_font-variant-select_-OQsO","line-height-input":"menus_typography_line-height-input_SG7be","letter-spacing-input":"menus_typography_letter-spacing-input_LShRc","header":"menus_typography_header_e-rUh","title":"menus_typography_title_uPejx","fonts-list":"menus_typography_fonts-list_ki8X-","label":"menus_typography_label_S-7jI","spin-animation":"menus_typography_spin-animation_8ALMW"}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View file

@ -238,7 +238,7 @@
left: 0;
height: 100%;
width: 100%;
z-index: $z-index-10;
z-index: $z-index-3;
.font-selector-dropdown {
display: flex;
@ -256,6 +256,7 @@
}
}
.fonts-list {
@include menuShadow;
position: absolute;
top: $s-36;
left: 0;
@ -268,7 +269,6 @@
padding: $s-2;
border-radius: $br-8;
background-color: var(--dropdown-background-color);
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
}
.font-wrapper {
padding-bottom: $s-4;

2
frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json
View file

@ -1 +1 @@
{"button-primary":"sidebar_shortcuts_button-primary_aIZ1F","button-secondary":"sidebar_shortcuts_button-secondary_dtWEN","button-tertiary":"sidebar_shortcuts_button-tertiary_3VDIw","shortcuts":"sidebar_shortcuts_shortcuts_cOJNo","shortcuts-header":"sidebar_shortcuts_shortcuts-header_0SZ19","shortcuts-close-button":"sidebar_shortcuts_shortcuts-close-button_gT7kn","button-tag":"sidebar_shortcuts_button-tag_3LImZ","button-icon":"sidebar_shortcuts_button-icon_rCHmV","button-icon-small":"sidebar_shortcuts_button-icon-small_9BnNh","shortcuts-list":"sidebar_shortcuts_shortcuts-list_z7osI","section-title":"sidebar_shortcuts_section-title_Dv7S-","collapsed-shortcuts":"sidebar_shortcuts_collapsed-shortcuts_XrOj5","subsection-title":"sidebar_shortcuts_subsection-title_--5j4","search-field":"sidebar_shortcuts_search-field_cDecA","search-icon":"sidebar_shortcuts_search-icon_NSAwd","search-box":"sidebar_shortcuts_search-box_vmYAl","clear-btn":"sidebar_shortcuts_clear-btn_vRbGu","clear-icon":"sidebar_shortcuts_clear-icon_ZL4ae","icon-wrapper":"sidebar_shortcuts_icon-wrapper_XaR8m","asset-element":"sidebar_shortcuts_asset-element_-zk6N","new-scrollbar":"sidebar_shortcuts_new-scrollbar_bRqNw","shortcuts-title":"sidebar_shortcuts_shortcuts-title_P38o9","input-text":"sidebar_shortcuts_input-text_e9n1x","section":"sidebar_shortcuts_section_Jxkqa","open":"sidebar_shortcuts_open_SxghD","subsection-name":"sidebar_shortcuts_subsection-name_rWvFY","section-name":"sidebar_shortcuts_section-name_SyF9-","subsection-menu":"sidebar_shortcuts_subsection-menu_FdH9L","sub-menu":"sidebar_shortcuts_sub-menu_95jTY","shortcuts-name":"sidebar_shortcuts_shortcuts-name_hPkq6","command-name":"sidebar_shortcuts_command-name_Cujed","keys":"sidebar_shortcuts_keys_-pUnF","key":"sidebar_shortcuts_key_QyU8q","space":"sidebar_shortcuts_space_aODdu","not-found":"sidebar_shortcuts_not-found_bKEb0"}
{"button-primary":"sidebar_shortcuts_button-primary_aIZ1F","button-secondary":"sidebar_shortcuts_button-secondary_dtWEN","button-tertiary":"sidebar_shortcuts_button-tertiary_3VDIw","shortcuts":"sidebar_shortcuts_shortcuts_cOJNo","shortcuts-header":"sidebar_shortcuts_shortcuts-header_0SZ19","shortcuts-close-button":"sidebar_shortcuts_shortcuts-close-button_gT7kn","button-tag":"sidebar_shortcuts_button-tag_3LImZ","button-icon":"sidebar_shortcuts_button-icon_rCHmV","button-icon-small":"sidebar_shortcuts_button-icon-small_9BnNh","shortcuts-list":"sidebar_shortcuts_shortcuts-list_z7osI","section-title":"sidebar_shortcuts_section-title_Dv7S-","collapsed-shortcuts":"sidebar_shortcuts_collapsed-shortcuts_XrOj5","subsection-title":"sidebar_shortcuts_subsection-title_--5j4","search-field":"sidebar_shortcuts_search-field_cDecA","search-icon":"sidebar_shortcuts_search-icon_NSAwd","search-box":"sidebar_shortcuts_search-box_vmYAl","clear-btn":"sidebar_shortcuts_clear-btn_vRbGu","clear-icon":"sidebar_shortcuts_clear-icon_ZL4ae","icon-wrapper":"sidebar_shortcuts_icon-wrapper_XaR8m","asset-element":"sidebar_shortcuts_asset-element_-zk6N","new-scrollbar":"sidebar_shortcuts_new-scrollbar_bRqNw","menu-dropdown":"sidebar_shortcuts_menu-dropdown_JXnjP","menu-item":"sidebar_shortcuts_menu-item_jQMwx","shortcut":"sidebar_shortcuts_shortcut_QSmns","shortcut-key":"sidebar_shortcuts_shortcut-key_WMaSV","user-icon":"sidebar_shortcuts_user-icon_HElXz","shortcuts-title":"sidebar_shortcuts_shortcuts-title_P38o9","input-text":"sidebar_shortcuts_input-text_e9n1x","section":"sidebar_shortcuts_section_Jxkqa","open":"sidebar_shortcuts_open_SxghD","subsection-name":"sidebar_shortcuts_subsection-name_rWvFY","section-name":"sidebar_shortcuts_section-name_SyF9-","subsection-menu":"sidebar_shortcuts_subsection-menu_FdH9L","sub-menu":"sidebar_shortcuts_sub-menu_95jTY","shortcuts-name":"sidebar_shortcuts_shortcuts-name_hPkq6","command-name":"sidebar_shortcuts_command-name_Cujed","keys":"sidebar_shortcuts_keys_-pUnF","key":"sidebar_shortcuts_key_QyU8q","space":"sidebar_shortcuts_space_aODdu","not-found":"sidebar_shortcuts_not-found_bKEb0","spin-animation":"sidebar_shortcuts_spin-animation_4xq0t"}

2
frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json
View file

@ -1 +1 @@
{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn"}
{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","menu-dropdown":"sidebar_sitemap_menu-dropdown_jAZ-g","menu-item":"sidebar_sitemap_menu-item_cQrV2","shortcut":"sidebar_sitemap_shortcut_Oywax","shortcut-key":"sidebar_sitemap_shortcut-key_IIYlf","user-icon":"sidebar_sitemap_user-icon_l-DH7","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn","spin-animation":"sidebar_sitemap_spin-animation_SVOeo"}

2
frontend/src/app/main/ui/workspace/text_palette.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_text_palette_button-primary_1umSD","button-secondary":"workspace_text_palette_button-secondary_VOIWz","button-tertiary":"workspace_text_palette_button-tertiary_4AWFN","button-tag":"workspace_text_palette_button-tag_TMcKw","button-icon":"workspace_text_palette_button-icon_bcydd","text-palette":"workspace_text_palette_text-palette_0yeGp","left-arrow":"workspace_text_palette_left-arrow_iSjPL","right-arrow":"workspace_text_palette_right-arrow_cWHr6","button-icon-small":"workspace_text_palette_button-icon-small_wGyH7","asset-element":"workspace_text_palette_asset-element_edxQB","new-scrollbar":"workspace_text_palette_new-scrollbar_51-wH","disabled":"workspace_text_palette_disabled_EF36J","text-palette-content":"workspace_text_palette_text-palette-content_anJb5","text-palette-inside":"workspace_text_palette_text-palette-inside_LgHnf","typography-item":"workspace_text_palette_typography-item_d0vFL","typography-name":"workspace_text_palette_typography-name_NVBRv","typography-font":"workspace_text_palette_typography-font_paqmC","typography-data":"workspace_text_palette_typography-data_eKyme","mid-item":"workspace_text_palette_mid-item_uTcD2","small-item":"workspace_text_palette_small-item_1Y6mx"}
{"button-primary":"workspace_text_palette_button-primary_1umSD","button-secondary":"workspace_text_palette_button-secondary_VOIWz","button-tertiary":"workspace_text_palette_button-tertiary_4AWFN","button-tag":"workspace_text_palette_button-tag_TMcKw","button-icon":"workspace_text_palette_button-icon_bcydd","text-palette":"workspace_text_palette_text-palette_0yeGp","left-arrow":"workspace_text_palette_left-arrow_iSjPL","right-arrow":"workspace_text_palette_right-arrow_cWHr6","button-icon-small":"workspace_text_palette_button-icon-small_wGyH7","asset-element":"workspace_text_palette_asset-element_edxQB","new-scrollbar":"workspace_text_palette_new-scrollbar_51-wH","menu-dropdown":"workspace_text_palette_menu-dropdown_IFwlC","menu-item":"workspace_text_palette_menu-item_kSAv3","shortcut":"workspace_text_palette_shortcut_L4FpC","shortcut-key":"workspace_text_palette_shortcut-key_zksbN","user-icon":"workspace_text_palette_user-icon_xRT71","disabled":"workspace_text_palette_disabled_EF36J","text-palette-content":"workspace_text_palette_text-palette-content_anJb5","text-palette-inside":"workspace_text_palette_text-palette-inside_LgHnf","typography-item":"workspace_text_palette_typography-item_d0vFL","typography-name":"workspace_text_palette_typography-name_NVBRv","typography-font":"workspace_text_palette_typography-font_paqmC","typography-data":"workspace_text_palette_typography-data_eKyme","mid-item":"workspace_text_palette_mid-item_uTcD2","small-item":"workspace_text_palette_small-item_1Y6mx","spin-animation":"workspace_text_palette_spin-animation_RlzM-"}

2
frontend/src/app/main/ui/workspace/text_palette.scss
View file

@ -17,7 +17,7 @@
height: 100%;
width: $s-24;
padding: 0;
z-index: $z-index-4;
z-index: $z-index-2;
svg {
@extend .button-icon;
}

2
frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json
View file

@ -1 +1 @@
{"button-primary":"workspace_text_palette_ctx_menu_button-primary_bkGXB","button-secondary":"workspace_text_palette_ctx_menu_button-secondary_mbPs7","button-tertiary":"workspace_text_palette_ctx_menu_button-tertiary_Z74wM","button-tag":"workspace_text_palette_ctx_menu_button-tag_OmlzA","button-icon":"workspace_text_palette_ctx_menu_button-icon_oklnh","button-icon-small":"workspace_text_palette_ctx_menu_button-icon-small_ebriD","workspace-context-menu":"workspace_text_palette_ctx_menu_workspace-context-menu_OShZn","palette-library":"workspace_text_palette_ctx_menu_palette-library_pDyi5","selected":"workspace_text_palette_ctx_menu_selected_k3kOd","icon-wrapper":"workspace_text_palette_ctx_menu_icon-wrapper_Xoj9o","file-library":"workspace_text_palette_ctx_menu_file-library_t-25M","asset-element":"workspace_text_palette_ctx_menu_asset-element_-ynNV","new-scrollbar":"workspace_text_palette_ctx_menu_new-scrollbar_6G8rs","library-name":"workspace_text_palette_ctx_menu_library-name_TGs9Z","lib-name":"workspace_text_palette_ctx_menu_lib-name_-5-Hj","lib-num":"workspace_text_palette_ctx_menu_lib-num_O7Nbx"}
{"button-primary":"workspace_text_palette_ctx_menu_button-primary_bkGXB","button-secondary":"workspace_text_palette_ctx_menu_button-secondary_mbPs7","button-tertiary":"workspace_text_palette_ctx_menu_button-tertiary_Z74wM","button-tag":"workspace_text_palette_ctx_menu_button-tag_OmlzA","button-icon":"workspace_text_palette_ctx_menu_button-icon_oklnh","button-icon-small":"workspace_text_palette_ctx_menu_button-icon-small_ebriD","workspace-context-menu":"workspace_text_palette_ctx_menu_workspace-context-menu_OShZn","palette-library":"workspace_text_palette_ctx_menu_palette-library_pDyi5","selected":"workspace_text_palette_ctx_menu_selected_k3kOd","icon-wrapper":"workspace_text_palette_ctx_menu_icon-wrapper_Xoj9o","file-library":"workspace_text_palette_ctx_menu_file-library_t-25M","asset-element":"workspace_text_palette_ctx_menu_asset-element_-ynNV","new-scrollbar":"workspace_text_palette_ctx_menu_new-scrollbar_6G8rs","menu-dropdown":"workspace_text_palette_ctx_menu_menu-dropdown_2vkCl","menu-item":"workspace_text_palette_ctx_menu_menu-item_bDG-3","shortcut":"workspace_text_palette_ctx_menu_shortcut_szqU2","shortcut-key":"workspace_text_palette_ctx_menu_shortcut-key_CNAAP","user-icon":"workspace_text_palette_ctx_menu_user-icon_C9fc6","library-name":"workspace_text_palette_ctx_menu_library-name_TGs9Z","lib-name":"workspace_text_palette_ctx_menu_lib-name_-5-Hj","lib-num":"workspace_text_palette_ctx_menu_lib-num_O7Nbx","spin-animation":"workspace_text_palette_ctx_menu_spin-animation_y-su6"}

2
frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
View file

@ -13,7 +13,7 @@
max-width: $s-248;
padding: $s-4;
margin: 0 0 $s-4 0;
z-index: $z-index-10;
z-index: $z-index-3;
border-radius: $br-10;
background-color: var(--context-menu-background-color);

16
frontend/src/app/main/ui/workspace/viewport/rules.cljs
View file

@ -11,6 +11,7 @@
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
[app.common.math :as mth]
[app.main.ui.context :as ctx]
[app.main.ui.formats :as fmt]
[app.main.ui.hooks :as hooks]
[app.util.object :as obj]
@ -22,6 +23,7 @@
(def rule-area-size 22)
(def rule-area-half-size (/ rule-area-size 2))
(def rules-background "var(--color-gray-50)")
(def new-css-rules-background "var(--dark-gray-1)")
(def selection-area-color "var(--color-primary)")
(def selection-area-opacity 0.3)
(def over-number-size 50)
@ -116,7 +118,9 @@
[{:keys [zoom zoom-inverse vbox axis offset]}]
(let [rules-width (* rules-width zoom-inverse)
step (calculate-step-size zoom)
clip-id (str "clip-rule-" (d/name axis))]
clip-id (str "clip-rule-" (d/name axis))
new-css-system (mf/use-ctx ctx/new-css-system)
rules-background (if new-css-system new-css-rules-background rules-background)]
[:*
(let [{:keys [x y width height]} (get-background-area vbox zoom-inverse axis)]
@ -134,11 +138,11 @@
minv (* (mth/ceil (/ minv step)) step)
maxv (min end 100000)
maxv (* (mth/floor (/ maxv step)) step)
;; These extra operations ensure that we are selecting a frame its initial location is rendered in the rule
minv (+ minv (mod offset step))
maxv (+ maxv (mod offset step))]
(for [step-val (range minv (inc maxv) step)]
(let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
(get-rule-axis step-val vbox zoom-inverse axis)]
@ -165,7 +169,9 @@
(mf/defc selection-area
[{:keys [vbox zoom-inverse selection-rect offset-x offset-y]}]
;; When using the format-number callls we consider if the guide is associated to a frame and we show the position relative to it with the offset
[:g.selection-area
(let [new-css-system (mf/use-ctx ctx/new-css-system)
rules-background (if new-css-system new-css-rules-background rules-background)]
[:g.selection-area
[:g
[:rect {:x (:x selection-rect)
:y (:y vbox)
@ -247,7 +253,7 @@
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (- (:y1 selection-rect) offset-y))]])])
(fmt/format-number (- (:y1 selection-rect) offset-y))]])]))
(mf/defc rules
{::mf/wrap-props false

4
frontend/translations/en.po
View file

@ -3250,6 +3250,10 @@ msgstr "Unsaved changes"
msgid "workspace.header.viewer"
msgstr "View mode (%s)"
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.zoom"
msgstr "Zoom"
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.zoom-fill"
msgstr "Fill - Scale to fill"

4
frontend/translations/es.po
View file

@ -3338,6 +3338,10 @@ msgstr "Cambios sin guardar"
msgid "workspace.header.viewer"
msgstr "Modo de visualización (%s)"
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.zoom"
msgstr "Zoom"
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.zoom-fill"
msgstr "Escalar para rellenar"