From cf569baabd7dab88f2a67b8d67596036f34d9386 Mon Sep 17 00:00:00 2001 From: Aitor Date: Tue, 16 Jan 2024 15:59:05 +0100 Subject: [PATCH 01/10] :bug: Fix colorpicker outside viewport --- .../src/app/main/ui/workspace/colorpicker.cljs | 15 ++++++++++----- .../src/app/main/ui/workspace/colorpicker.scss | 2 +- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 1477d2b6b..a30aa9d2e 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -378,17 +378,22 @@ [{vh :height} position x y] (let [;; picker height in pixels h 510 + ;; Checks for overflow outside the viewport height - overflow-fix (max 0 (+ y (- 50) h (- vh))) + ;; overflow-fix (max 0 (+ y (- 50) h (- vh))) + max-y (- vh h) x-pos 325] (cond (or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"} - (= position :left) {:left (str (- x x-pos) "px") - :top (str (- y 50 overflow-fix) "px")} + (= position :left) + (if (> y max-y) + {:left (str (- x x-pos) "px") + :bottom "1rem"} + {:left (str (- x x-pos) "px") + :top (str (- y 70) "px")}) :else {:left (str (+ x 80) "px") - :top (str (- y 70 overflow-fix) "px")}))) - + :top (str (- y 70) "px")}))) (mf/defc colorpicker-modal {::mf/register modal/components diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss index 4abe58b46..1df8b8b41 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker.scss @@ -8,7 +8,7 @@ .colorpicker-tooltip { @extend .modal-background; - top: $s-100; + // top: $s-100; left: calc(10 * $s-140); width: auto; } From 70ff72a03a47191d9a74d8c22aefe623b978efcc Mon Sep 17 00:00:00 2001 From: Aitor Date: Tue, 16 Jan 2024 16:04:01 +0100 Subject: [PATCH 02/10] :bug: Fix code block in view mode shows scroll --- frontend/src/app/main/ui/viewer.cljs | 11 +++++------ frontend/src/app/main/ui/viewer.scss | 1 + 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 651a7c806..899dee386 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -542,12 +542,11 @@ :index index :thumbnail-data (:thumbnails file)}] - [:section {:id "viewer-section" - :ref viewer-section-ref - :data-viewer-section true - :class (stl/css-case :viewer-section true - :fulscreen fullscreen?) - :on-click click-on-screen} + [:section#viewer-section {:ref viewer-section-ref + :data-viewer-section true + :class (stl/css-case :viewer-section true + :fulscreen fullscreen?) + :on-click click-on-screen} (cond (empty? frames) [:section {:class (stl/css :empty-state)} diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss index 94f54ae5f..7b98ecfa3 100644 --- a/frontend/src/app/main/ui/viewer.scss +++ b/frontend/src/app/main/ui/viewer.scss @@ -62,6 +62,7 @@ flex-wrap: nowrap; margin-top: 0; height: 100%; + overflow: hidden; } .viewer-go-prev, From b2bbe12a11870f99e86f6593563f8129335a5b5e Mon Sep 17 00:00:00 2001 From: Aitor Date: Wed, 17 Jan 2024 10:22:08 +0100 Subject: [PATCH 03/10] :sparkles: Add tooltipo on colors --- frontend/src/app/main/ui/components/color_bullet_new.cljs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs index f15f3549c..a742d54ec 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.cljs +++ b/frontend/src/app/main/ui/components/color_bullet_new.cljs @@ -26,7 +26,9 @@ (^function on-click color event))))] (if (uc/multiple? color) - [:div {:on-click on-click :class (stl/css :color-bullet :multiple)}] + [:div {:class (stl/css :color-bullet :multiple) + :on-click on-click + :title (:color color)}] ;; No multiple selection (let [color (if (string? color) {:color color :opacity 1} color) id (:id color) @@ -44,7 +46,8 @@ :grid-area area :read-only read-only?) :data-readonly (str read-only?) - :on-click on-click} + :on-click on-click + :title (:color color)} (cond (some? gradient) From 6009f6846a707e1ed56061e7e7fbace91f536ac5 Mon Sep 17 00:00:00 2001 From: Aitor Date: Wed, 17 Jan 2024 11:12:55 +0100 Subject: [PATCH 04/10] :bug: Comments over toolbar --- frontend/resources/styles/common/refactor/z-index.scss | 2 +- frontend/src/app/main/ui/workspace/top_toolbar.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/resources/styles/common/refactor/z-index.scss b/frontend/resources/styles/common/refactor/z-index.scss index fed8066ce..5be8e2e5b 100644 --- a/frontend/resources/styles/common/refactor/z-index.scss +++ b/frontend/resources/styles/common/refactor/z-index.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC $z-index-1: 1; // floating elements -$z-index-2: 2; //sidebars +$z-index-2: 2; // sidebars $z-index-3: 3; // context menu $z-index-4: 4; // modal $z-index-10: 10; diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss index de44be443..03cfac697 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss @@ -16,7 +16,7 @@ height: $s-56; padding: $s-8 $s-16; border-radius: $s-8; - z-index: $z-index-2; + z-index: $z-index-10; background-color: var(--color-background-primary); transition: top 0.3s, From d09cab49aacf079c42d0fa39341ce6d8c9afe5c2 Mon Sep 17 00:00:00 2001 From: Aitor Date: Wed, 17 Jan 2024 11:56:43 +0100 Subject: [PATCH 05/10] :bug: Asset color long names should show ellipsis --- frontend/src/app/main/ui/components/color_bullet_new.cljs | 1 + frontend/src/app/main/ui/components/color_bullet_new.scss | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs index a742d54ec..690a0dd79 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.cljs +++ b/frontend/src/app/main/ui/components/color_bullet_new.cljs @@ -75,6 +75,7 @@ :color-text (< size 72) :small-text (and (>= size 64) (< size 72)) :big-text (>= size 72)) + :title name :on-click on-click :on-double-click on-double-click} (if (some? image) diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet_new.scss index 9da025115..d6e617251 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.scss +++ b/frontend/src/app/main/ui/components/color_bullet_new.scss @@ -85,8 +85,9 @@ .big-text { @include inspectValue; + @include twoLineTextEllipsis; color: var(--palette-text-color); - height: $s-16; + height: $s-28; text-align: center; } From f7f077adb3d4f322178389d2c32a3d6a406b1d6b Mon Sep 17 00:00:00 2001 From: Aitor Date: Wed, 17 Jan 2024 12:29:16 +0100 Subject: [PATCH 06/10] :sparkles: Change cap stroke icons --- frontend/resources/images/icons/cap-circle-marker.svg | 4 +++- frontend/resources/images/icons/cap-diamond-marker.svg | 4 +++- frontend/resources/images/icons/cap-line-arrow.svg | 4 +++- frontend/resources/images/icons/cap-round.svg | 4 +++- frontend/resources/images/icons/cap-square-marker.svg | 4 +++- frontend/resources/images/icons/cap-square.svg | 4 +++- frontend/resources/images/icons/cap-triangle-arrow.svg | 4 +++- frontend/src/app/main/ui/components/select.scss | 2 +- 8 files changed, 22 insertions(+), 8 deletions(-) diff --git a/frontend/resources/images/icons/cap-circle-marker.svg b/frontend/resources/images/icons/cap-circle-marker.svg index 85dd8793b..3068ad7b7 100644 --- a/frontend/resources/images/icons/cap-circle-marker.svg +++ b/frontend/resources/images/icons/cap-circle-marker.svg @@ -1 +1,3 @@ - + + + diff --git a/frontend/resources/images/icons/cap-diamond-marker.svg b/frontend/resources/images/icons/cap-diamond-marker.svg index 58aceb5d2..0391c0ffe 100644 --- a/frontend/resources/images/icons/cap-diamond-marker.svg +++ b/frontend/resources/images/icons/cap-diamond-marker.svg @@ -1 +1,3 @@ - + + + diff --git a/frontend/resources/images/icons/cap-line-arrow.svg b/frontend/resources/images/icons/cap-line-arrow.svg index 5476c2448..c24e84233 100644 --- a/frontend/resources/images/icons/cap-line-arrow.svg +++ b/frontend/resources/images/icons/cap-line-arrow.svg @@ -1 +1,3 @@ - + + + diff --git a/frontend/resources/images/icons/cap-round.svg b/frontend/resources/images/icons/cap-round.svg index c0cf52ab2..c717c13b9 100644 --- a/frontend/resources/images/icons/cap-round.svg +++ b/frontend/resources/images/icons/cap-round.svg @@ -1 +1,3 @@ - + + + diff --git a/frontend/resources/images/icons/cap-square-marker.svg b/frontend/resources/images/icons/cap-square-marker.svg index f3672dd68..00407fd37 100644 --- a/frontend/resources/images/icons/cap-square-marker.svg +++ b/frontend/resources/images/icons/cap-square-marker.svg @@ -1 +1,3 @@ - + + + diff --git a/frontend/resources/images/icons/cap-square.svg b/frontend/resources/images/icons/cap-square.svg index 328608aad..24ad4f43f 100644 --- a/frontend/resources/images/icons/cap-square.svg +++ b/frontend/resources/images/icons/cap-square.svg @@ -1 +1,3 @@ - + + + diff --git a/frontend/resources/images/icons/cap-triangle-arrow.svg b/frontend/resources/images/icons/cap-triangle-arrow.svg index cab940669..6d6f15978 100644 --- a/frontend/resources/images/icons/cap-triangle-arrow.svg +++ b/frontend/resources/images/icons/cap-triangle-arrow.svg @@ -1 +1,3 @@ - + + + diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index 6be8495cc..77f8a3a9e 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -28,7 +28,7 @@ .current-icon { @include flexCenter; - height: $s-24; + /* height: $s-24; */ width: $s-24; padding-right: $s-4; svg { From 15deeacb5ea8b5bc4221ff7aac2ae1a36e09d609 Mon Sep 17 00:00:00 2001 From: Aitor Date: Wed, 17 Jan 2024 12:39:54 +0100 Subject: [PATCH 07/10] :bug: Color name overflows when it is too large --- .../main/ui/workspace/sidebar/options/rows/color_row.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index 5285303c5..bfa232fda 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -49,13 +49,9 @@ } .color-name { @include titleTipography; - display: flex; - align-items: center; - height: $s-28; - padding-left: $s-6; + @include textEllipsis; + padding-inline: $s-6; border-radius: $br-8; - width: 100%; - flex-grow: 1; color: var(--input-foreground-color-active); } .detach-btn { From da5847cc4d1e0ec691c4abd83c9245569834356a Mon Sep 17 00:00:00 2001 From: Aitor Date: Wed, 17 Jan 2024 13:12:16 +0100 Subject: [PATCH 08/10] :bug: Update module disappears without applying the changes --- frontend/src/app/main/data/workspace/libraries.cljs | 3 +-- frontend/src/app/main/ui/workspace/libraries.cljs | 7 ++++++- frontend/src/app/main/ui/workspace/libraries.scss | 4 ++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index ae2d666e8..30106467d 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/frontend/src/app/main/data/workspace/libraries.cljs @@ -1054,8 +1054,7 @@ ignore-until (dm/get-in state [:workspace-file :ignore-sync-until]) libraries-need-sync (filter #(seq (assets-need-sync % file-data ignore-until)) (vals (get state :workspace-libraries))) - do-more-info #(do (modal/show! :libraries-dialog {:starting-tab :updates}) - (st/emit! msg/hide)) + do-more-info #(modal/show! :libraries-dialog {:starting-tab :updates}) do-update #(do (apply st/emit! (map (fn [library] (sync-file (:current-file-id state) (:id library))) diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 3829f7ca3..8d6b7dcc9 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -481,6 +481,11 @@ on-tab-change (mf/use-fn #(reset! selected-tab* %)) + close-dialog-outside + (mf/use-fn (fn [event] + (when (= (dom/get-target event) (dom/get-current-target event)) + (modal/hide!)))) + close-dialog (mf/use-fn (fn [_] (modal/hide!) @@ -490,7 +495,7 @@ (when team-id (st/emit! (dwl/fetch-shared-files {:team-id team-id})))) - [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-overlay) :on-click close-dialog-outside} [:div {:class (stl/css :modal-dialog)} [:button {:class (stl/css :close) :on-click close-dialog} diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 8ebf89b74..e91cedb36 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -15,7 +15,6 @@ width: 100%; z-index: $z-index-modal; background-color: var(--overlay-color); - pointer-events: none; // This is to allow outside click that closes modal. .modal-dialog { position: relative; @@ -25,7 +24,6 @@ padding: $s-32; border-radius: $br-10; background-color: var(--modal-background-color); - pointer-events: all; .close { @extend .button-tertiary; position: absolute; @@ -146,8 +144,10 @@ .section-title { @include titleTipography; + color: var(--modal-title-foreground-color); margin-bottom: $s-12; } + .libraries-search { margin: $s-12 0; .search-icon { From 658d09ccf812ee516715328bf5f13d356cd8e41b Mon Sep 17 00:00:00 2001 From: Aitor Date: Wed, 17 Jan 2024 13:18:32 +0100 Subject: [PATCH 09/10] :bug: Main menu popups are not closed automatically --- frontend/src/app/main/ui/workspace/left_header.cljs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs index 25c47f99f..17bfff9f4 100644 --- a/frontend/src/app/main/ui/workspace/left_header.cljs +++ b/frontend/src/app/main/ui/workspace/left_header.cljs @@ -625,7 +625,9 @@ (keyword))] (st/emit! (-> (dw/toggle-layout-flag flag) - (vary-meta assoc ::ev/origin "workspace-menu"))))))] + (vary-meta assoc ::ev/origin "workspace-menu"))) + (reset! show-menu* false) + (reset! sub-menu* nil))))] [:* From 1de0014de34d867d64d9266a2f0d32d4ffa4f767 Mon Sep 17 00:00:00 2001 From: Aitor Date: Thu, 18 Jan 2024 10:57:17 +0100 Subject: [PATCH 10/10] :bug: Fix code block collapsed truncates dropdown --- frontend/src/app/main/ui/components/select.scss | 1 - frontend/src/app/main/ui/viewer/inspect/code.scss | 1 - frontend/src/app/main/ui/workspace/colorpicker.cljs | 1 - frontend/src/app/main/ui/workspace/colorpicker.scss | 1 - 4 files changed, 4 deletions(-) diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index 77f8a3a9e..1f6621c91 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -28,7 +28,6 @@ .current-icon { @include flexCenter; - /* height: $s-24; */ width: $s-24; padding-right: $s-4; svg { diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss index 1e1e58666..5b6d66c9c 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.scss +++ b/frontend/src/app/main/ui/viewer/inspect/code.scss @@ -28,7 +28,6 @@ flex-direction: column; height: 100%; min-height: 0; - overflow: hidden; padding: 0 $s-4 $s-8 0; pre { diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index a30aa9d2e..8a361d1d0 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -380,7 +380,6 @@ h 510 ;; Checks for overflow outside the viewport height - ;; overflow-fix (max 0 (+ y (- 50) h (- vh))) max-y (- vh h) x-pos 325] diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss index 1df8b8b41..f3049f387 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker.scss @@ -8,7 +8,6 @@ .colorpicker-tooltip { @extend .modal-background; - // top: $s-100; left: calc(10 * $s-140); width: auto; }