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/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/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/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs
index f15f3549c..690a0dd79 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)
@@ -72,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;
}
diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss
index 6be8495cc..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.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,
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 1477d2b6b..8a361d1d0 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -378,17 +378,21 @@
[{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)))
+ 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..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;
}
diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs
index e1019c97a..c5d57c29d 100644
--- a/frontend/src/app/main/ui/workspace/left_header.cljs
+++ b/frontend/src/app/main/ui/workspace/left_header.cljs
@@ -626,7 +626,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))))]
[:*
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 {
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 {
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,