Merge remote-tracking branch 'origin/staging' into develop

CHANGES.md

@@ -25,6 +25,15 @@
 - Dashboard search, set focus after shortcut (by @akshay-gupta7) [Github #3196](https://github.com/penpot/penpot/pull/3196)
 - Library name dropdown arrow is overlapped by library name (by @ondrejkonec) [Taiga #5200](https://tree.taiga.io/project/penpot/issue/5200)
 
+## 1.18.4
+
+### :bug: Bugs fixed
+
+- Fix zooming while color picker breaks UI [GH #3214](https://github.com/penpot/penpot/issues/3214)
+- Fix problem with layout not reflowing on shape deletion [Taiga #5289](https://tree.taiga.io/project/penpot/issue/5289)
+- Fix extra long typography names on assets and palette [Taiga #5199](https://tree.taiga.io/project/penpot/issue/5199)
+- Fix background-color property on inspect code [Taiga #5300](https://tree.taiga.io/project/penpot/issue/5300)
+
 ## 1.18.3
 
 ### :bug: Bugs fixed

frontend/resources/styles/main/partials/sidebar-assets.scss

@@ -434,6 +434,14 @@
       cursor: pointer;
       position: relative;
 
+      .name-block {
+        color: $color-gray-20;
+        width: calc(100% - 24px - #{$size-2});
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
       & span {
         margin-left: $size-1;
         color: $color-gray-30;

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -1095,7 +1095,10 @@
     flex-grow: 1;
     font-size: $fs11;
     margin-top: 4px;
+    max-width: calc(var(--width, 256px) - 100px);
+    overflow: hidden;
     white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   .element-set-actions-button svg {

frontend/resources/styles/main/partials/text-palette.scss

@@ -9,6 +9,10 @@
 
   & .typography-name {
     color: $color-white;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   & .typography-font,

frontend/src/app/main/data/workspace/shapes.cljs

@@ -334,9 +334,11 @@
                                                        (->> (map :id starting-flows)
                                                             (reduce ctp/remove-flow flows))))))]
 
-    (rx/of (dc/detach-comment-thread ids)
+    (rx/of (dwu/start-undo-transaction undo-id)
+           (dc/detach-comment-thread ids)
+           (dch/commit-changes changes)
            (ptk/data-event :layout/update all-parents)
-           (dch/commit-changes changes))))
+           (dwu/commit-undo-transaction undo-id))))
 
 (defn create-and-add-shape
   [type frame-x frame-y data]

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -1316,7 +1316,8 @@
          :auto-focus true
          :default-value (cph/merge-path-item (:path color) (:name color))}]
 
-       [:div.name-block {:on-double-click rename-color-clicked}
+       [:div.name-block {:title (:name color)
+                         :on-double-click rename-color-clicked}
         (:name color)
         (when-not (= (:name color) default-name)
           [:span default-name])])

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -509,7 +509,7 @@
                  :font-weight (:font-weight typography)
                  :font-style (:font-style typography)}}
         (tr "workspace.assets.typography.sample")]
-       [:div.typography-name (:name typography)]]
+       [:div.typography-name {:title (:name typography)}(:name typography)]]
       [:div.element-set-actions
        (when on-detach
          [:div.element-set-actions-button
@@ -527,7 +527,7 @@
       (if (not editable?)
         [:div.element-set-content.typography-read-only-data
          [:div.row-flex.typography-name
-          [:span (:name typography)]]
+          [:span {:title (:name typography)} (:name typography)]]
 
          [:div.row-flex
           [:span.label (tr "workspace.assets.typography.font-id")]

frontend/src/app/main/ui/workspace/textpalette.cljs

@@ -42,7 +42,8 @@
                        :attrs attrs}))
                    selected-ids))))]
 
-    [:div.typography-item {:on-click handle-click}
+    [:div.typography-item {:title (:name typography)
+                           :on-click handle-click}
      [:div.typography-name
       {:style {:font-family (:font-family typography)
                :font-weight (:font-weight typography)

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -361,9 +361,10 @@
    (fn [event]
      (let [event  (.getBrowserEvent ^js event)
            target (dom/get-target event)
-           mod? (kbd/mod? event)]
+           mod? (kbd/mod? event)
+           picking-color? (= "pixel-overlay" (.-id target))]
 
-       (when (uwvv/inside-viewport? target)
+       (when (or (uwvv/inside-viewport? target) picking-color?)
          (dom/prevent-default event)
          (dom/stop-propagation event)
          (let [raw-pt (dom/get-client-position event)

frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs

@@ -211,7 +211,8 @@
 
     [:*
      [:div.pixel-overlay
-      {:tab-index 0
+      {:id "pixel-overlay"
+       :tab-index 0
        :style {:cursor cur/picker}
        :on-pointer-down handle-pointer-down-picker
        :on-pointer-up handle-pointer-up-picker

frontend/src/app/util/code_gen.cljs

@@ -95,7 +95,7 @@
                            :height   #(get-size :height %)}
                  :multi   {:r1 [:r1 :r2 :r3 :r4]}}
    :fill        {:props [:fills]
-                 :to-prop {:fills (if (> (count (:fills shape)) 1) "background-image" "background")}
+                 :to-prop {:fills (if (> (count (:fills shape)) 1) "background-image" "background-color")}
                  :format {:fills format-fill-color}}
    :stroke      {:props [:strokes]
                  :to-prop {:strokes "border"}