From 1a1e9b4ecd222b970d479cee181df7dbf540d700 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 27 Dec 2023 10:07:31 +0100 Subject: [PATCH] :lipstick: Fix some frontend bugs --- .../styles/common/refactor/color-defs.scss | 3 +- .../styles/common/refactor/design-tokens.scss | 4 + .../main/data/workspace/notifications.cljs | 2 +- .../src/app/main/ui/components/title_bar.scss | 1 - .../src/app/main/ui/dashboard/sidebar.scss | 1 + .../app/main/ui/viewer/inspect/exports.scss | 4 +- .../src/app/main/ui/workspace/libraries.cljs | 2 +- .../src/app/main/ui/workspace/libraries.scss | 8 +- .../src/app/main/ui/workspace/sidebar.scss | 6 +- .../workspace/sidebar/assets/components.cljs | 11 +- .../workspace/sidebar/assets/components.scss | 3 +- .../app/main/ui/workspace/sidebar/layers.scss | 16 +- .../main/ui/workspace/sidebar/options.scss | 4 +- .../workspace/sidebar/options/menus/blur.scss | 6 +- .../options/menus/color_selection.scss | 5 +- .../sidebar/options/menus/component.scss | 2 + .../sidebar/options/menus/constraints.scss | 1 + .../sidebar/options/menus/exports.scss | 6 +- .../workspace/sidebar/options/menus/fill.scss | 15 +- .../sidebar/options/menus/frame_grid.scss | 5 +- .../sidebar/options/menus/interactions.cljs | 35 ++-- .../sidebar/options/menus/interactions.scss | 91 +++++++++-- .../sidebar/options/menus/layer.scss | 1 + .../options/menus/layout_container.scss | 5 +- .../sidebar/options/menus/layout_item.cljs | 150 +++++++++--------- .../sidebar/options/menus/layout_item.scss | 4 +- .../sidebar/options/menus/measures.scss | 1 + .../sidebar/options/menus/shadow.scss | 5 +- .../sidebar/options/menus/stroke.cljs | 3 +- .../sidebar/options/menus/stroke.scss | 9 +- .../sidebar/options/menus/svg_attrs.scss | 6 +- .../workspace/sidebar/options/menus/text.scss | 3 + .../sidebar/options/menus/typography.scss | 3 +- .../sidebar/options/rows/color_row.cljs | 2 +- .../main/ui/workspace/sidebar/sitemap.scss | 24 +-- .../main/ui/workspace/viewport/comments.cljs | 73 ++++++--- .../main/ui/workspace/viewport/comments.scss | 24 +++ frontend/src/app/util/avatars.cljs | 10 +- 38 files changed, 364 insertions(+), 190 deletions(-) create mode 100644 frontend/src/app/main/ui/workspace/viewport/comments.scss diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index b7438f76d..4efe6a28f 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -25,7 +25,8 @@ --dark-ok-color: var(--strong-green); --dark-warning-color: #ff6432; --dark-pending-color: var(--lilac); - --dark-error-color: #ec1f1f; + --dark-error-color: #ff3277; + --default-presence-color: #dee563; // LIGHT --light-gray-1: #fff; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 559d779c9..cd3433b51 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -14,6 +14,7 @@ --scrollbar-background-color: var(--color-foreground-secondary); --panel-background-color: var(--color-background-primary); --panel-title-background-color: var(--color-background-secondary); + --presence-color: var(--default-presence-color); // BUTTONS --button-foreground-hover: var(--color-accent-primary); @@ -298,6 +299,9 @@ --link-foreground-color: var(--color-accent-primary); + --resize-area-background-color: var(--color-background-primary); + --resize-area-border-color: var(--color-background-quaternary); + // VIEWER --viewer-background-color: var(--color-background-secondary); --viewer-paginator-background-color: var(--color-background-tertiary); diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index 8a88ddf70..c1e505ced 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/frontend/src/app/main/data/workspace/notifications.cljs @@ -132,7 +132,7 @@ "#faa6b7" ; salmon "#f9b489" ; orange "#fdcd79" ; soft-orange - "#dee563" ; yellow + "#dee563" ; yellow -> default presence color "#b1e96f" ; yellow-green }) diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index acea5d58f..2ec13406b 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -13,7 +13,6 @@ height: $s-32; width: 100%; min-height: $s-32; - margin: $s-4 0; background-color: var(--title-background-color); .title, .title-only { diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index ba97239ea..dffbf86c1 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -220,6 +220,7 @@ .team-icon { &.new-team { background-color: $da-primary; + color: $db-primary; svg { fill: $db-secondary; } diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.scss b/frontend/src/app/main/ui/viewer/inspect/exports.scss index 6e2301fd7..7feb5785c 100644 --- a/frontend/src/app/main/ui/viewer/inspect/exports.scss +++ b/frontend/src/app/main/ui/viewer/inspect/exports.scss @@ -8,10 +8,12 @@ .element-set { padding-bottom: $s-16; - + margin: 0; .element-title { + margin: 0; .title-spacing-export-viewer { @extend .attr-title; + margin: 0; } .add-export { @extend .button-tertiary; diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index c8b222d0b..5164a8f04 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -289,7 +289,7 @@ :type "button" :data-library-id (dm/str id) :on-click unlink-library} - i/delete-refactor]])]] + i/detach-refactor]])]] [:div {:class (stl/css :section)} [:& title-bar {:collapsable? false diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index b1efd730e..6b7825bf6 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -119,15 +119,15 @@ height: $s-32; border-radius: $br-8; margin-right: $s-2; + padding: $s-8; + width: $s-32; + margin-left: $s-8; svg { @extend .button-icon; stroke: var(--icon-foreground); } } - .item-button-shared { - padding: $s-8; - width: $s-32; - } + .item-button-icon { width: $s-28; height: $s-28; diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index b74e5601a..e4775f0d7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -32,8 +32,8 @@ $width-settings-bar-max: $s-500; left: 0; width: 100%; height: $s-12; - border-top: 2px solid var(--color-background-quaternary); - background-color: var(--color-background-primary); + border-top: $s-2 solid var(--resize-area-border-color); + background-color: var(--resize-area-background-color); cursor: ns-resize; } .settings-bar-inside { @@ -54,7 +54,7 @@ $width-settings-bar-max: $s-500; } } .tab-spacing { - margin: $s-4 $s-12 0 $s-12; + margin: $s-4 $s-8 0 $s-8; } .right-settings-bar { grid-area: right-sidebar; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index 9905ba70a..7fbf833b5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -163,10 +163,7 @@ (when (and (some? root-shape) (some? container)) [:* - [:& cmm/component-item-thumbnail {:file-id file-id - :root-shape root-shape - :component component - :container container}] + (let [renaming? (= renaming (:id component))] [:* [:& editable-label @@ -183,7 +180,11 @@ :on-cancel cancel-rename}] (when ^boolean dragging? - [:div {:class (dom/classnames (css :dragging) true)}])])])] + [:div {:class (dom/classnames (css :dragging) true)}])]) + [:& cmm/component-item-thumbnail {:file-id file-id + :root-shape root-shape + :component component + :container container}]])] [:div {:ref item-ref :class (dom/classnames diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index 50753ed7b..82fa009bc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -22,7 +22,7 @@ padding: $s-8; border: $s-4 solid transparent; border-radius: $br-8; - background-color: var(--color-foreground-secondary); + background-color: var(--assets-component-background-color); overflow: hidden; cursor: pointer; img { @@ -44,7 +44,6 @@ bottom: 0; width: 100%; padding: $s-2; - &.editing { display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 37e87b02e..77f50b02e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -18,10 +18,8 @@ justify-content: space-between; height: $s-32; min-height: $s-32; - margin-top: $s-2; - margin-bottom: $s-4; + margin: $s-4 0 $s-4 $s-8; padding-right: $s-8; - margin-left: $s-8; .page-name { @include tabTitleTipography; padding: 0 $s-12; @@ -30,7 +28,7 @@ .icon-search { @extend .button-tertiary; height: $s-32; - width: calc($s-24 + $s-4); + width: $s-28; border-radius: $br-8; margin-right: $s-8; padding: 0; @@ -48,7 +46,7 @@ height: $s-32; width: $s-32; margin: 0; - border: 1px solid var(--color-background-tertiary); + border: $s-1 solid var(--color-background-tertiary); border-radius: $br-8 $br-2 $br-2 $br-8; background-color: var(--color-background-tertiary); svg { @@ -57,7 +55,7 @@ stroke: var(--icon-foreground); } &:focus { - border: 1px solid var(--input-border-color-focus); + border: $s-1 solid var(--input-border-color-focus); outline: 0; background-color: var(--input-background-color-active); color: var(--input-foreground-color-active); @@ -66,7 +64,7 @@ } } &:hover { - border: 1px solid var(--input-background-color-hover); + border: $s-1 solid var(--input-background-color-hover); background-color: var(--input-background-color-hover); svg { background-color: var(--input-background-color-hover); @@ -122,7 +120,7 @@ @include titleTipography; height: $s-20; padding: $s-4 $s-6; - border: 1px solid var(--tag-background-color); + border: $s-1 solid var(--tag-background-color); border-radius: $br-6; color: var(--tag-background-color); } @@ -235,7 +233,7 @@ } } .tool-window-content { - --calculated-height: calc(128px + var(--height, 200px)); + --calculated-height: calc($s-128 + var(--height, $s-200)); display: flex; flex-direction: column; height: calc(100vh - var(--calculated-height)); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss index 09d9a1f82..46aeb7745 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss @@ -16,7 +16,7 @@ .tab-spacing { margin-right: $s-12; - margin-bottom: $s-16; + margin-bottom: $s-8; } .content-class { @@ -31,6 +31,6 @@ height: 100%; display: flex; flex-direction: column; - gap: $s-16; + gap: $s-8; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index 2c59dcdd9..6559fdd1d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -7,9 +7,11 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-title { .title-spacing-blur { - padding-left: $s-12; + padding-left: $s-2; + margin: 0; } .add-blur { @extend .button-tertiary; @@ -22,7 +24,7 @@ } .element-set-content { @include flexColumn; - margin-bottom: $s-4; + margin-bottom: $s-8; .first-row { @include flexRow; width: 100%; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss index 5563bea17..eb8ca850c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss @@ -7,9 +7,11 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-title { .title-spacing-selected-colors { - padding-left: $s-12; + padding-left: $s-2; + margin: 0; } .add-fill { @extend .button-tertiary; @@ -22,6 +24,7 @@ } .element-content { @include flexColumn; + margin-bottom: $s-8; .selected-color-group { @include flexColumn; .more-colors-btn { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index c5557bc2f..a98ec453a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -6,8 +6,10 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-content { @include flexColumn; + margin-bottom: $s-8; .component-wrapper { display: flex; margin: 0 $s-4 0 $s-8; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss index 35c90e3c9..78e261776 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss @@ -7,6 +7,7 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-set-content { display: flex; gap: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss index 3e8465da7..414d9f7cb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss @@ -7,9 +7,11 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-title { .title-spacing-export { - padding-left: $s-12; + padding-left: $s-2; + margin: 0; } .add-export { @extend .button-tertiary; @@ -22,7 +24,7 @@ } .element-set-content { @include flexColumn; - margin-bottom: $s-4; + margin: $s-4 0 $s-8 0; .multiple-exports { @include flexRow; .label { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss index 20c80fcfb..7bcc45db9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss @@ -7,9 +7,12 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-title { + margin: 0; .title-spacing-fill { - padding-left: $s-12; + padding-left: $s-2; + margin: 0; } .add-fill { @extend .button-tertiary; @@ -24,6 +27,7 @@ display: flex; flex-direction: column; gap: $s-12; + margin: $s-4 0 $s-8 0; .element-set-options-group { @include flexRow; .group-label { @@ -40,9 +44,14 @@ } .checkbox { @extend .input-checkbox; - margin-bottom: $s-8; - margin-top: calc(-1 * $s-4); padding-left: $s-8; + span.checked { + background-color: var(--input-border-color-active); + svg { + @extend .button-icon-small; + stroke: var(--input-details-color); + } + } } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index dfbb3cadf..0435242e8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -7,8 +7,10 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .title-spacing-board-grid { - padding-left: $s-12; + padding-left: $s-2; + margin: 0; } .add-grid { @extend .button-tertiary; @@ -20,6 +22,7 @@ } .element-set-content { @include flexColumn; + margin: $s-4 0 $s-8 0; .grid-option { .grid-title { @include flexRow; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index 7c506f71b..d99ca6ba1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -173,26 +173,23 @@ nil)) (if new-css-system [:div {:class (stl/css :flow-element)} - [:button {:class (stl/css :start-flow-btn) - :on-click start-flow} - [:span {:class (stl/css :button-icon)} - i/play-refactor]] + [:span {:class (stl/css :flow-info)} + [:span {:class (stl/css :flow-name-wrapper)} + [:button {:class (stl/css :start-flow-btn) + :on-click start-flow} + [:span {:class (stl/css :button-icon)} + i/play-refactor]] + [:span {:class (stl/css :flow-input-wrapper)} + [:input + {:class (stl/css :flow-input) + :type "text" + :ref name-ref + :on-blur accept-edit + :on-key-down on-key-down + :default-value (:name flow "")}]]]] - (if @editing? - [:input - {:class (stl/css :input-text) - :type "text" - :ref name-ref - :on-blur accept-edit - :on-key-down on-key-down - :auto-focus true - :default-value (:name flow "")}] - [:span - {:class (stl/css :flow-name-label) - :on-double-click rename-flow} - (:name flow)]) - [:div {:class (stl/css :remove-flow-btn) - :on-click remove-flow} + [:button {:class (stl/css :remove-flow-btn) + :on-click remove-flow} i/remove-refactor]] [:div.flow-element diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index 4e7d12708..87eb4017a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -230,27 +230,90 @@ } .flow-element { - @extend .asset-element; - padding: 0; - gap: $s-4; - .start-flow-btn { - @extend .button-tertiary; + @include flexRow; + .flow-info { + display: flex; + align-items: center; + gap: $s-2; + border-radius: $s-8; + background-color: var(--input-details-color); height: $s-32; - width: $s-28; - svg { - @extend .button-icon; + width: 100%; + flex-grow: 1; + .flow-name-wrapper { + @include titleTipography; + @include focusInput; + display: flex; + align-items: center; + gap: $s-4; + flex-grow: 1; + height: $s-32; + width: 100%; + border-radius: $br-8; + padding: 0; + margin-right: 0; + background-color: var(--input-background-color); + border: $s-1 solid var(--input-background-color); + color: var(--input-foreground-color); + .start-flow-btn { + @include buttonStyle; + height: $s-32; + width: $s-28; + padding: 0 $s-2 0 $s-8; + border-radius: $br-8 0 0 $br-8; + background-color: transparent; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + &:hover { + stroke: var(--input-foreground-color-active); + } + } + } + .flow-input { + @extend .input-base; + background-color: transparent; + height: $s-28; + } + .flow-input-wrapper { + @include titleTipography; + display: flex; + align-items: center; + height: $s-28; + padding: 0; + width: 100%; + margin: 0; + flex-grow: 1; + background-color: transparent; + color: var(--input-foreground-color); + border-radius: $br-8; + } + &:hover { + background-color: var(--input-background-color-hover); + border: $s-1 solid var(--input-background-color-hover); + &:active { + background-color: var(--input-background-color-active); + .flow-input-wrapper { + background-color: var(--input-background-color-active); + } + } + } + &:focus, + &:focus-within { + background-color: var(--input-background-color-active); + } + + &.editing { + background-color: var(--input-background-color-active); + } } } - .input-text { - @extend .input-base; - } - .flow-name-label { - flex-grow: 1; - } + .remove-flow-btn { @extend .button-tertiary; height: $s-32; width: $s-28; + min-width: $s-28; svg { @extend .button-icon; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss index 2fc16a24b..7d8f31d76 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss @@ -7,6 +7,7 @@ @import "refactor/common-refactor.scss"; .element-set { + margin-bottom: $s-8; .element-set-content { display: flex; height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 97fe318b2..4c66d2c37 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -7,9 +7,11 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-title { .title-spacing-layout { - padding-left: $s-12; + padding-left: $s-2; + margin: 0; } .title-actions { @@ -36,6 +38,7 @@ } } .flex-layout-menu { + margin-bottom: $s-8; .first-row { display: flex; gap: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 207423787..4162175b7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -509,17 +509,17 @@ :title-spacing-empty (not has-content?))}]] (when open? [:div {:class (stl/css :flex-element-menu)} - [:div {:class (stl/css :row)} - (when (or is-layout-child? is-absolute?) - [:div {:class (stl/css :position-options)} - [:& radio-buttons {:selected (if is-absolute? "absolute" "static") - :on-change on-change-position - :name "layout-style" - :wide true} - [:& radio-button {:value "static" - :id :static-position}] - [:& radio-button {:value "absolute" - :id :absolute-position}]]]) + (when (or is-layout-child? is-absolute?) + [:div {:class (stl/css :row)} + [:div {:class (stl/css :position-options)} + [:& radio-buttons {:selected (if is-absolute? "absolute" "static") + :on-change on-change-position + :name "layout-style" + :wide true} + [:& radio-button {:value "static" + :id :static-position}] + [:& radio-button {:value "absolute" + :id :absolute-position}]]] (when is-absolute? [:div {:class (stl/css :z-index-wrapper) @@ -533,7 +533,7 @@ :on-focus #(dom/select-target %) :on-change #(on-change-z-index %) :nillable true - :value (:layout-item-z-index values)}]])] + :value (:layout-item-z-index values)}]])]) [:div {:class (stl/css :row)} [:& element-behaviour {:fill? is-layout-child? @@ -556,73 +556,75 @@ :change-margin-style change-margin-style :on-margin-change on-margin-change}]]) - [:div {:class (stl/css :row)} - [:div {:class (stl/css :advanced-options)} - (when (= (:layout-item-h-sizing values) :fill) - [:div {:class (stl/css :horizontal-fill)} - [:div {:class (stl/css :layout-item-min-w) - :title (tr "workspace.options.layout-item.layout-item-min-w")} + (when (or (= (:layout-item-h-sizing values) :fill) + (= (:layout-item-v-sizing values) :fill)) + [:div {:class (stl/css :row)} + [:div {:class (stl/css :advanced-options)} + (when (= (:layout-item-h-sizing values) :fill) + [:div {:class (stl/css :horizontal-fill)} + [:div {:class (stl/css :layout-item-min-w) + :title (tr "workspace.options.layout-item.layout-item-min-w")} - [:span {:class (stl/css :icon-text)} - "MIN W"] - [:> numeric-input* - {:className (stl/css :numeric-input) - :no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change :layout-item-min-w) - :value (get values :layout-item-min-w) - :nillable true}]] + [:span {:class (stl/css :icon-text)} + "MIN W"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-min-w) + :value (get values :layout-item-min-w) + :nillable true}]] - [:div {:class (stl/css :layout-item-max-w) - :title (tr "workspace.options.layout-item.layout-item-max-w")} - [:span {:class (stl/css :icon-text)} - "MAX W"] - [:> numeric-input* - {:className (stl/css :numeric-input) - :no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change :layout-item-max-w) - :value (get values :layout-item-max-w) - :nillable true}]]]) - (when (= (:layout-item-v-sizing values) :fill) - [:div {:class (stl/css :vertical-fill)} - [:div {:class (stl/css :layout-item-min-h) - :title (tr "workspace.options.layout-item.layout-item-min-h")} + [:div {:class (stl/css :layout-item-max-w) + :title (tr "workspace.options.layout-item.layout-item-max-w")} + [:span {:class (stl/css :icon-text)} + "MAX W"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-max-w) + :value (get values :layout-item-max-w) + :nillable true}]]]) + (when (= (:layout-item-v-sizing values) :fill) + [:div {:class (stl/css :vertical-fill)} + [:div {:class (stl/css :layout-item-min-h) + :title (tr "workspace.options.layout-item.layout-item-min-h")} - [:span {:class (stl/css :icon-text)} - "MIN H"] - [:> numeric-input* - {:className (stl/css :numeric-input) - :no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change :layout-item-min-h) - :value (get values :layout-item-min-h) - :nillable true}]] + [:span {:class (stl/css :icon-text)} + "MIN H"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-min-h) + :value (get values :layout-item-min-h) + :nillable true}]] - [:div {:class (stl/css :layout-item-max-h) - :title (tr "workspace.options.layout-item.layout-item-max-h")} + [:div {:class (stl/css :layout-item-max-h) + :title (tr "workspace.options.layout-item.layout-item-max-h")} - [:span {:class (stl/css :icon-text)} - "MAX H"] - [:> numeric-input* - {:className (stl/css :numeric-input) - :no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change :layout-item-max-h) - :value (get values :layout-item-max-h) - :nillable true}]]])]]])] + [:span {:class (stl/css :icon-text)} + "MAX H"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-max-h) + :value (get values :layout-item-max-h) + :nillable true}]]])]])])] [:div.element-set diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss index 131c5aac4..689966404 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss @@ -7,12 +7,13 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-title { .title-spacing-layout-element { margin: 0 0 $s-4 0; } .title-spacing-empty { - padding-left: $s-12; + padding-left: $s-2; } } .flex-element-menu { @@ -62,6 +63,7 @@ .position-options { width: $s-188; } + .margin-row { display: flex; align-items: flex-start; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index 7431421b0..b0a5cb1a6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -8,6 +8,7 @@ .element-set { @include flexColumn; + margin-bottom: $s-8; .presets { display: flex; align-items: flex-start; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss index b3017e94b..e5c27782a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss @@ -7,9 +7,11 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-title { .title-spacing-shadow { - padding-left: $s-12; + margin: 0; + padding-left: $s-2; } .add-shadow { @extend .button-tertiary; @@ -21,6 +23,7 @@ } } .element-set-content { + margin-top: $s-4; @include flexColumn; .multiple-shadows { @include flexRow; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index b968deb62..90d4d9ac3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -219,7 +219,8 @@ [:button {:class (stl/css :add-stroke) :on-click on-add-stroke} i/add-refactor]]] (when open? - [:div {:class (stl/css :element-content)} + [:div {:class (stl/css-case :element-content true + :empty-content (not has-strokes?))} (cond (= :multiple strokes) [:div {:class (stl/css :element-set-options-group)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss index 669c614b1..252334692 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss @@ -7,9 +7,12 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-title { + margin: 0; .title-spacing-stroke { - padding-left: $s-12; + padding-left: $s-2; + margin: 0; } .add-stroke { @extend .button-tertiary; @@ -25,6 +28,7 @@ display: flex; flex-direction: column; gap: $s-12; + margin: $s-4 0 $s-8 0; .element-set-options-group { @include flexRow; .group-label { @@ -39,5 +43,8 @@ } } } + &.empty-content { + margin: 0; + } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss index 8dc2d5bb6..5926c782b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss @@ -7,12 +7,14 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .title-spacing-svg-attrs { - padding-left: $s-12; + padding-left: $s-2; + margin: 0; } .element-set-content { @include flexColumn; - + margin: $s-4 0 0 0; .attr-content { display: flex; gap: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss index 2a35d7502..2504fa5e7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss @@ -7,7 +7,9 @@ @import "refactor/common-refactor.scss"; .element-set { + margin: 0; .element-title { + margin: 0; .add-typography { @extend .button-tertiary; height: $s-32; @@ -19,6 +21,7 @@ } .element-content { @include flexColumn; + margin-top: $s-4; .multiple-typography { @extend .mixed-bar; .multiple-text { 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 dee18f34b..305fc6e83 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 @@ -245,8 +245,9 @@ } .text-options { - position: relative; @include flexColumn; + position: relative; + margin-bottom: $s-8; .font-option { @include titleTipography; @extend .asset-element; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 34dde8861..cad09c56a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -89,6 +89,7 @@ (reset! editing-text* false) (when on-blur (on-blur event)))) + parse-color (mf/use-fn (fn [color] @@ -162,7 +163,6 @@ (modal/show! :colorpicker props)))) - prev-color (h/use-previous color) on-drop diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index b62a7560f..a974a5a5c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -12,18 +12,19 @@ flex-direction: column; flex: 1; width: 100%; - height: var(--height, 200px); + height: var(--height, $s-200); .title-bar { .title { margin-left: $s-2; + color: var(--title-foreground-color-hover); } } .add-page { @extend .button-tertiary; height: $s-32; - width: calc($s-24 + $s-4); - margin-right: $s-8; + width: $s-28; + margin-right: $s-12; padding: 0; border-radius: $br-8; svg { @@ -37,7 +38,7 @@ @include titleTipography; height: $s-20; padding: $s-4 $s-6; - border: 1px solid var(--tag-background-color); + border: $s-1 solid var(--tag-background-color); border-radius: $br-6; color: var(--tag-background-color); } @@ -47,11 +48,11 @@ left: 0; width: 100%; height: $s-12; - border-top: 2px solid var(--color-background-secondary); - background-color: var(--color-background-primary); + border-top: $s-2 solid var(--resize-area-border-color); + background-color: var(--resize-area-background-color); cursor: ns-resize; &:hover { - border-color: var(--color-background-quaternary); + border-color: var(--resize-area-border-color); } } .tool-window-content { @@ -61,7 +62,7 @@ overflow-x: hidden; scrollbar-gutter: stable; overflow-y: overlay; - height: calc(-38px + var(--height, 200px)); + height: calc(-38px + var(--height, $s-200)); width: 100%; .pages-list { @@ -74,13 +75,13 @@ width: 100%; cursor: pointer; &.dnd-over-top { - border-top: 1px solid var(--layer-row-foreground-color-drag); + border-top: $s-1 solid var(--layer-row-foreground-color-drag); } &.dnd-over-bot { - border-bottom: 1px solid var(--layer-row-foreground-color-drag); + border-bottom: $s-1 solid var(--layer-row-foreground-color-drag); } .dnd-over > .element-list-body { - border: 1px solid var(--layer-row-foreground-color-drag); + border: $s-1 solid var(--layer-row-foreground-color-drag); } .element-list-body { display: flex; @@ -232,5 +233,6 @@ } .title-spacing-sitemap { padding-left: $s-8; + margin-top: $s-8; } } diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.cljs b/frontend/src/app/main/ui/workspace/viewport/comments.cljs index a63f97ca2..f036cbde9 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/comments.cljs @@ -5,19 +5,22 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.viewport.comments + (:require-macros [app.main.style :as stl]) (:require [app.main.data.comments :as dcm] [app.main.data.workspace.comments :as dwcm] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.comments :as cmt] + [app.main.ui.context :as ctx] [cuerdas.core :as str] [okulary.core :as l] [rumext.v2 :as mf])) (mf/defc comments-layer [{:keys [vbox vport zoom file-id page-id drawing] :as props}] - (let [pos-x (* (- (:x vbox)) zoom) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + pos-x (* (- (:x vbox)) zoom) pos-y (* (- (:y vbox)) zoom) profile (mf/deref refs/profile) @@ -54,26 +57,54 @@ (st/emit! (dwcm/initialize-comments file-id)) (fn [] (st/emit! ::dwcm/finalize)))) + (if new-css-system + [:div {:class (stl/css :comments-section)} + [:div + {:class (stl/css :workspace-comments-container) + :style {:width (str (:width vport) "px") + :height (str (:height vport) "px")}} + [:div {:class (stl/css :threads) + :style {:transform (str/format "translate(%spx, %spx)" pos-x pos-y)}} + (for [item threads] + [:& cmt/thread-bubble {:thread item + :zoom zoom + :open? (= (:id item) (:open local)) + :key (:seqn item)}]) - [:div.comments-section - [:div.workspace-comments-container - {:style {:width (str (:width vport) "px") - :height (str (:height vport) "px")}} - [:div.threads {:style {:transform (str/format "translate(%spx, %spx)" pos-x pos-y)}} - (for [item threads] - [:& cmt/thread-bubble {:thread item - :zoom zoom - :open? (= (:id item) (:open local)) - :key (:seqn item)}]) + (when-let [id (:open local)] + (when-let [thread (get threads-map id)] + [:& cmt/thread-comments {:thread (update-thread-position thread) + :users users + :zoom zoom}])) - (when-let [id (:open local)] - (when-let [thread (get threads-map id)] - [:& cmt/thread-comments {:thread (update-thread-position thread) - :users users - :zoom zoom}])) + (when-let [draft (:comment drawing)] + [:& cmt/draft-thread {:draft draft + :on-cancel on-draft-cancel + :on-submit on-draft-submit + :zoom zoom}])]]] - (when-let [draft (:comment drawing)] - [:& cmt/draft-thread {:draft draft - :on-cancel on-draft-cancel - :on-submit on-draft-submit - :zoom zoom}])]]])) + ;; OLD + [:div.comments-section + [:div.workspace-comments-container + {:style {:width (str (:width vport) "px") + :height (str (:height vport) "px")}} + [:div.threads {:style {:transform (str/format "translate(%spx, %spx)" pos-x pos-y)}} + (for [item threads] + [:& cmt/thread-bubble {:thread item + :zoom zoom + :open? (= (:id item) (:open local)) + :key (:seqn item)}]) + + (when-let [id (:open local)] + (when-let [thread (get threads-map id)] + [:& cmt/thread-comments {:thread (update-thread-position thread) + :users users + :zoom zoom}])) + + (when-let [draft (:comment drawing)] + [:& cmt/draft-thread {:draft draft + :on-cancel on-draft-cancel + :on-submit on-draft-submit + :zoom zoom}])]]]) + + )) diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.scss b/frontend/src/app/main/ui/workspace/viewport/comments.scss new file mode 100644 index 000000000..ee56bc948 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/viewport/comments.scss @@ -0,0 +1,24 @@ +// 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-comments-container { + width: 100%; + height: 100%; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + z-index: 1000; + pointer-events: none; + overflow: hidden; + user-select: text; +} + +.threads { + position: absolute; + top: $s-0; + left: $s-0; +} diff --git a/frontend/src/app/util/avatars.cljs b/frontend/src/app/util/avatars.cljs index a42544361..a72664b9a 100644 --- a/frontend/src/app/util/avatars.cljs +++ b/frontend/src/app/util/avatars.cljs @@ -11,14 +11,18 @@ (defn generate* [{:keys [name color size] - :or {color "#000000" size 128}}] + :or {size 128}}] (let [parts (str/words (str/upper name)) letters (if (= 1 (count parts)) (ffirst parts) (str (ffirst parts) (first (second parts)))) canvas (.createElement js/document "canvas") - context (.getContext canvas "2d")] + context (.getContext canvas "2d") + text-color (if color + "#2e3434" + "#fff") + color (or color "#000000")] (obj/set! canvas "width" size) (obj/set! canvas "height" size) @@ -28,7 +32,7 @@ (obj/set! context "font" (str (/ size 2) "px Arial")) (obj/set! context "textAlign" "center") - (obj/set! context "fillStyle" "#2e3434") + (obj/set! context "fillStyle" text-color) (.fillText context letters (/ size 2) (/ size 1.5)) (.toDataURL canvas)))