Merge pull request #4017 from penpot/azazeln28-bugfixes-3

🐛 Bugfixes

frontend/resources/images/icons/cap-circle-marker.svg

@@ -1 +1,3 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><rect rx="6" ry="6" x="10" width="6" height="6"/><path d="M0 3h14.5" fill="none"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 8H1m7 0a3.5 3.5 0 107 0 3.5 3.5 0 00-7 0zm1 1.25h.295m.882 1.25h.294M9 6.75h.295M10.177 8h.294m.882 1.25h.294m.882 1.25h.295m-2.647-5h.294m.882 1.25h.294M12.529 8h.295m.882 1.25H14M12.53 5.5h.294m.882 1.25H14"/>
+</svg>

frontend/resources/images/icons/cap-diamond-marker.svg

@@ -1 +1,3 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><rect rx="0" ry="0" x="11" y="1" transform="rotate(45 13 3)" width="4" height="4"/><path d="M0 3h14.5" fill="none"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M7.5 8H1m8 1.25h.295m.882 1.25h.294M9 6.75h.295M10.177 8h.294m.882 1.25h.294m.882 1.25h.295m-2.647-5h.294m.882 1.25h.294M12.529 8h.295m.882 1.25H14M12.53 5.5h.294m.882 1.25H14M7.556 8.136l3.808 3.808a.192.192 0 00.272 0l3.808-3.808a.192.192 0 000-.272l-3.808-3.808a.192.192 0 00-.272 0L7.556 7.864a.192.192 0 000 .272z"/>
+</svg>

frontend/resources/images/icons/cap-line-arrow.svg

@@ -1 +1,3 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h14.5M11.7 0l1 1 1.6 2-2.6 3" fill="none"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14.667 8H1.333M9.5 4l5.278 3.838a.2.2 0 010 .324L9.5 12.5"/>
+</svg>

frontend/resources/images/icons/cap-round.svg

@@ -1 +1,3 @@
-<svg viewBox="1863 1374 16 8" width="16" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M1879 1374h-12s-4 0-4 4 4 4 4 4h12" fill="none"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2 5h9.823C13.578 5 15 6.343 15 8s-1.422 3-3.177 3H2"/>
+</svg>

frontend/resources/images/icons/cap-square-marker.svg

@@ -1 +1,3 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><rect rx="0" ry="0" x="10" width="6" height="6"/><path d="M0 3h14.5" fill="none"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 8H1m8 1.25h.295m.882 1.25h.294M9 6.75h.295M10.177 8h.294m.882 1.25h.294m.882 1.25h.295m-2.647-5h.294m.882 1.25h.294M12.529 8h.295m.882 1.25H14M12.53 5.5h.294m.882 1.25H14M8.5 5h6v6h-6V5z"/>
+</svg>

frontend/resources/images/icons/cap-square.svg

@@ -1 +1,3 @@
-<svg viewBox="1863 1407 16 8" width="16" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M1879 1407h-16v8h16" fill="none"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2 5h13v6H2"/>
+</svg>

frontend/resources/images/icons/cap-triangle-arrow.svg

@@ -1 +1,3 @@
-<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h14.5" fill="none"/><path d="M13 0l2.9 3L13 6V0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M9 9.25h.295m.882 1.25h.294M9 6.75h.295M10.177 8h.294m.882 1.25h.294m-1.47-3.75h.294m.882 1.25h.294M12.529 8h.295M8 8H1m13.723-.17L8.805 4.188a.2.2 0 00-.305.17v7.284a.2.2 0 00.305.17l5.918-3.642a.2.2 0 000-.34z"/>
+</svg>

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;

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)))

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)

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;
 }
 

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 {

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)}

frontend/src/app/main/ui/viewer.scss

@@ -62,6 +62,7 @@
   flex-wrap: nowrap;
   margin-top: 0;
   height: 100%;
+  overflow: hidden;
 }
 
 .viewer-go-prev,

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 {

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

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;
 }

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))))]
 
 
     [:*

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}

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 {

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 {

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,