diff --git a/common/src/app/common/colors.cljc b/common/src/app/common/colors.cljc index 4e7a5dfd0..b668065de 100644 --- a/common/src/app/common/colors.cljc +++ b/common/src/app/common/colors.cljc @@ -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") diff --git a/frontend/resources/images/icons/play-refactor.svg b/frontend/resources/images/icons/play-refactor.svg new file mode 100644 index 000000000..daa0c49f8 --- /dev/null +++ b/frontend/resources/images/icons/play-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/status-alert-refactor.svg b/frontend/resources/images/icons/status-alert-refactor.svg new file mode 100644 index 000000000..aec822b40 --- /dev/null +++ b/frontend/resources/images/icons/status-alert-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/status-tick-refactor.svg b/frontend/resources/images/icons/status-tick-refactor.svg new file mode 100644 index 000000000..d0d0ca6df --- /dev/null +++ b/frontend/resources/images/icons/status-tick-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/status-update-refactor.svg b/frontend/resources/images/icons/status-update-refactor.svg new file mode 100644 index 000000000..7c29996a3 --- /dev/null +++ b/frontend/resources/images/icons/status-update-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/status-wrong-refactor.svg b/frontend/resources/images/icons/status-wrong-refactor.svg new file mode 100644 index 000000000..feb5c7fea --- /dev/null +++ b/frontend/resources/images/icons/status-wrong-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/status-alert-refactor.svg b/frontend/resources/images/status-alert-refactor.svg new file mode 100644 index 000000000..aec822b40 --- /dev/null +++ b/frontend/resources/images/status-alert-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/status-tick-refactor.svg b/frontend/resources/images/status-tick-refactor.svg new file mode 100644 index 000000000..d0d0ca6df --- /dev/null +++ b/frontend/resources/images/status-tick-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/status-update-refactor.svg b/frontend/resources/images/status-update-refactor.svg new file mode 100644 index 000000000..7c29996a3 --- /dev/null +++ b/frontend/resources/images/status-update-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/status-wrong-refactor.svg b/frontend/resources/images/status-wrong-refactor.svg new file mode 100644 index 000000000..feb5c7fea --- /dev/null +++ b/frontend/resources/images/status-wrong-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index b76c10243..03ff9dffc 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -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); + } +} diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index 7896a7986..f9d7e1061 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -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; } diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 585181d91..7c09ab72f 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -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); } diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index 3c48959ea..87f891796 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -52,3 +52,12 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; } + +@keyframes spin-animation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } +} diff --git a/frontend/resources/styles/common/refactor/shadows.scss b/frontend/resources/styles/common/refactor/shadows.scss index bc2be4d61..bcc0f1718 100644 --- a/frontend/resources/styles/common/refactor/shadows.scss +++ b/frontend/resources/styles/common/refactor/shadows.scss @@ -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); +} diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index 6f3c96ba1..67274242f 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/frontend/resources/styles/common/refactor/spacing.scss @@ -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); diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss index f116aa093..00ccc31de 100644 --- a/frontend/resources/styles/common/refactor/themes/default-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss @@ -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); } diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index fbc4c83cb..df7ac6d24 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss @@ -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); } diff --git a/frontend/resources/styles/common/refactor/z-index.scss b/frontend/resources/styles/common/refactor/z-index.scss index c159be3e9..7e20a36f1 100644 --- a/frontend/resources/styles/common/refactor/z-index.scss +++ b/frontend/resources/styles/common/refactor/z-index.scss @@ -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, diff --git a/frontend/resources/styles/main/layouts/inspect.scss b/frontend/resources/styles/main/layouts/inspect.scss index b0ad47bd2..bbf4d1556 100644 --- a/frontend/resources/styles/main/layouts/inspect.scss +++ b/frontend/resources/styles/main/layouts/inspect.scss @@ -121,6 +121,7 @@ $width-settings-bar: 256px; &.settings-bar-right { width: 100%; + grid-area: right-sidebar; } } diff --git a/frontend/resources/styles/main/partials/signup-questions.scss b/frontend/resources/styles/main/partials/signup-questions.scss index ee1f42645..373cae531 100644 --- a/frontend/resources/styles/main/partials/signup-questions.scss +++ b/frontend/resources/styles/main/partials/signup-questions.scss @@ -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 { diff --git a/frontend/resources/styles/main/partials/tab-container.scss b/frontend/resources/styles/main/partials/tab-container.scss index 33c759e0a..2b2da4c50 100644 --- a/frontend/resources/styles/main/partials/tab-container.scss +++ b/frontend/resources/styles/main/partials/tab-container.scss @@ -2,7 +2,7 @@ display: grid; grid-template-rows: auto 1fr; grid-template-columns: 100%; - height: 100%; + height: calc(100% - 45px); } .tab-container-tabs { diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss index 2fdc61e83..d5b93f801 100644 --- a/frontend/resources/styles/main/partials/workspace-header.scss +++ b/frontend/resources/styles/main/partials/workspace-header.scss @@ -322,7 +322,6 @@ display: flex; margin-left: 0px; margin-right: 10px; - /* border: 1px solid red; */ width: 150px; justify-content: flex-end; diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index f7011e178..d18efce90 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -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; } diff --git a/frontend/src/app/main/ui/components/color_bullet_new.css.json b/frontend/src/app/main/ui/components/color_bullet_new.css.json index 7691da781..b30f12311 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.css.json +++ b/frontend/src/app/main/ui/components/color_bullet_new.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.css.json b/frontend/src/app/main/ui/components/context_menu_a11y.css.json index d283cf4da..81be345cf 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.css.json +++ b/frontend/src/app/main/ui/components/context_menu_a11y.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index 6eb30fce9..7dfe7c3f4 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -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; diff --git a/frontend/src/app/main/ui/components/dropdown_menu.cljs b/frontend/src/app/main/ui/components/dropdown_menu.cljs index 75e32b60b..e6a1f06ae 100644 --- a/frontend/src/app/main/ui/components/dropdown_menu.cljs +++ b/frontend/src/app/main/ui/components/dropdown_menu.cljs @@ -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} diff --git a/frontend/src/app/main/ui/components/editable_label.css.json b/frontend/src/app/main/ui/components/editable_label.css.json index 576e6c658..7a8a44c82 100644 --- a/frontend/src/app/main/ui/components/editable_label.css.json +++ b/frontend/src/app/main/ui/components/editable_label.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/radio_buttons.css.json b/frontend/src/app/main/ui/components/radio_buttons.css.json index 127dfd05f..79151b666 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.css.json +++ b/frontend/src/app/main/ui/components/radio_buttons.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/search_bar.css.json b/frontend/src/app/main/ui/components/search_bar.css.json index b98cd6a8d..feda63060 100644 --- a/frontend/src/app/main/ui/components/search_bar.css.json +++ b/frontend/src/app/main/ui/components/search_bar.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/select.css.json b/frontend/src/app/main/ui/components/select.css.json index 2554cd841..c62ab3491 100644 --- a/frontend/src/app/main/ui/components/select.css.json +++ b/frontend/src/app/main/ui/components/select.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index 0bc68cfa0..4e21782f1 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -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; diff --git a/frontend/src/app/main/ui/components/tab_container.css.json b/frontend/src/app/main/ui/components/tab_container.css.json index 066c44f18..e7b2b50b6 100644 --- a/frontend/src/app/main/ui/components/tab_container.css.json +++ b/frontend/src/app/main/ui/components/tab_container.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/title_bar.css.json b/frontend/src/app/main/ui/components/title_bar.css.json index e32410420..0109a09a4 100644 --- a/frontend/src/app/main/ui/components/title_bar.css.json +++ b/frontend/src/app/main/ui/components/title_bar.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/debug/components_preview.css.json b/frontend/src/app/main/ui/debug/components_preview.css.json index 7f5ffe46a..365a0ae62 100644 --- a/frontend/src/app/main/ui/debug/components_preview.css.json +++ b/frontend/src/app/main/ui/debug/components_preview.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs index 9837a05ff..7f164a983 100644 --- a/frontend/src/app/main/ui/export.cljs +++ b/frontend/src/app/main/ui/export.cljs @@ -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"}}]]]]])]))) diff --git a/frontend/src/app/main/ui/export.css.json b/frontend/src/app/main/ui/export.css.json new file mode 100644 index 000000000..ef3f0d517 --- /dev/null +++ b/frontend/src/app/main/ui/export.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss new file mode 100644 index 000000000..dc57d8081 --- /dev/null +++ b/frontend/src/app/main/ui/export.scss @@ -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; + } + } +} diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 0b5b16194..7a80eef68 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/modal.css.json b/frontend/src/app/main/ui/modal.css.json index de8c67e96..a9cbf99c8 100644 --- a/frontend/src/app/main/ui/modal.css.json +++ b/frontend/src/app/main/ui/modal.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/viewer/inspect.cljs b/frontend/src/app/main/ui/viewer/inspect.cljs index aa19349c9..576cbe06b 100644 --- a/frontend/src/app/main/ui/viewer/inspect.cljs +++ b/frontend/src/app/main/ui/viewer/inspect.cljs @@ -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}]]])) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 34c054aac..5176ff396 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace.css.json b/frontend/src/app/main/ui/workspace.css.json index 6fd095888..965afc258 100644 --- a/frontend/src/app/main/ui/workspace.css.json +++ b/frontend/src/app/main/ui/workspace.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss index bb956a4cb..b15b47f5e 100644 --- a/frontend/src/app/main/ui/workspace.scss +++ b/frontend/src/app/main/ui/workspace.scss @@ -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); + } + } } diff --git a/frontend/src/app/main/ui/workspace/color_palette.css.json b/frontend/src/app/main/ui/workspace/color_palette.css.json index 0243ebce7..804a4f212 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.css.json +++ b/frontend/src/app/main/ui/workspace/color_palette.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json index 1123c6df3..aa23a7caf 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss index 1a6127811..74c2f59f1 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -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); diff --git a/frontend/src/app/main/ui/workspace/context_menu.css.json b/frontend/src/app/main/ui/workspace/context_menu.css.json index a35b28847..a8b732fda 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.css.json +++ b/frontend/src/app/main/ui/workspace/context_menu.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss index 9bda90ad9..94f73018e 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/context_menu.scss @@ -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; } diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs new file mode 100644 index 000000000..46961e74d --- /dev/null +++ b/frontend/src/app/main/ui/workspace/left_header.cljs @@ -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}]]])) + diff --git a/frontend/src/app/main/ui/workspace/left_header.css.json b/frontend/src/app/main/ui/workspace/left_header.css.json new file mode 100644 index 000000000..4b755e617 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/left_header.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss new file mode 100644 index 000000000..cd06e8c7b --- /dev/null +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -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; + } + } +} diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index dbb3acab8..678a4760d 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.css.json b/frontend/src/app/main/ui/workspace/left_toolbar.css.json index a632aa88e..63277a027 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.css.json +++ b/frontend/src/app/main/ui/workspace/left_toolbar.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.scss b/frontend/src/app/main/ui/workspace/left_toolbar.scss index 3f3b182d9..e478db05f 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/left_toolbar.scss @@ -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; } diff --git a/frontend/src/app/main/ui/workspace/libraries.css.json b/frontend/src/app/main/ui/workspace/libraries.css.json index caa0e19e2..5dd76fdba 100644 --- a/frontend/src/app/main/ui/workspace/libraries.css.json +++ b/frontend/src/app/main/ui/workspace/libraries.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index 595b0587e..91d81277e 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -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)}]])])])) diff --git a/frontend/src/app/main/ui/workspace/palette.css.json b/frontend/src/app/main/ui/workspace/palette.css.json index aa5cd1e9d..14c0f0415 100644 --- a/frontend/src/app/main/ui/workspace/palette.css.json +++ b/frontend/src/app/main/ui/workspace/palette.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index e2d1d2ea4..692b9689f 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -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; + } } } diff --git a/frontend/src/app/main/ui/workspace/presence.cljs b/frontend/src/app/main/ui/workspace/presence.cljs index 16225650f..a4c9f4c1e 100644 --- a/frontend/src/app/main/ui/workspace/presence.cljs +++ b/frontend/src/app/main/ui/workspace/presence.cljs @@ -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)}])]))) diff --git a/frontend/src/app/main/ui/workspace/presence.css.json b/frontend/src/app/main/ui/workspace/presence.css.json new file mode 100644 index 000000000..0e953c3b6 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/presence.css.json @@ -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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/presence.scss b/frontend/src/app/main/ui/workspace/presence.scss new file mode 100644 index 000000000..9dee5f8b9 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/presence.scss @@ -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; + } + } +} diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs new file mode 100644 index 000000000..3028ef6e6 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -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]])) + diff --git a/frontend/src/app/main/ui/workspace/right_header.css.json b/frontend/src/app/main/ui/workspace/right_header.css.json new file mode 100644 index 000000000..8aa4999e3 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/right_header.css.json @@ -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-"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss new file mode 100644 index 000000000..ee3f2d01a --- /dev/null +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -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; + } + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index f4ed014a7..51ddc1482 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -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?) diff --git a/frontend/src/app/main/ui/workspace/sidebar.css.json b/frontend/src/app/main/ui/workspace/sidebar.css.json index 27146ddc2..a7386bbc0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index c12f02ab6..9be412d6a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -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); + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets.css.json index 80cd459a5..7e2908b9a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index ec1ff46c6..e010929f1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json index e29d95429..10c22da22 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json index 06e8fe22e..347c19180 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json index 952bca499..c144fd238 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json @@ -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"} \ No newline at end of file +{"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--"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json index b104045fd..cbea40395 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json index 397437dd6..714b607f2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json index 4c2c593b4..40237c02a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json index 0837c257f..7850d700b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs index e26638223..f292e9ad4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json index f7a3727a1..54d17f927 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.css.json b/frontend/src/app/main/ui/workspace/sidebar/history.css.json index 2bbdba20b..3852e85f0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/history.css.json @@ -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"} \ No newline at end of file +{"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-"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json b/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json index a71b66901..709283176 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json b/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json index 39d44c4ff..7f622df3f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index e6ec213ff..430dad276 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -258,7 +258,7 @@ [:button {:on-click toggle-filters :class (stl/css-case - :filters-button true + :filter-button true :active active?)} i/filter-refactor]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.css.json b/frontend/src/app/main/ui/workspace/sidebar/layers.css.json index 41ddcc336..3841ec33b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 8d00a150b..a09f2a0cf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json index 5009a9ae2..de3434bf3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 6f0d48a2a..0491e8e2f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json index 5e83dd7e3..e6536eaa5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json index b74252967..bf92e7793 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette.css.json b/frontend/src/app/main/ui/workspace/text_palette.css.json index f90691b47..7d4bcfd8e 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.css.json +++ b/frontend/src/app/main/ui/workspace/text_palette.css.json @@ -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"} \ No newline at end of file +{"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-"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss index 0e8fab650..6e82f1050 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.scss +++ b/frontend/src/app/main/ui/workspace/text_palette.scss @@ -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; } diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json index 0aedf625f..c050d4818 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss index b1bafcd23..202cb2964 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -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); diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs index 7ab650a9a..f5ec67de9 100644 --- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs @@ -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 diff --git a/frontend/translations/en.po b/frontend/translations/en.po index c7079769e..7269bda33 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 85d0d3e29..ceea530b4 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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"