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

CHANGES.md

@@ -22,6 +22,7 @@
 - Show board miniature in manual overlay setting [Taiga #4475](https://tree.taiga.io/project/penpot/issue/4475)
 - Handoff visual improvements [Taiga #3124](https://tree.taiga.io/project/penpot/us/3124)
 - Dynamic alignment only in sight [Github 1971](https://github.com/penpot/penpot/issues/1971)
+- Add some accessibility to shortcut panel [Taiga #4713](https://tree.taiga.io/project/penpot/issue/4713)
 
 ### :bug: Bugs fixed
 
@@ -59,6 +60,8 @@
 - Fix justified text is stretched [Github #2539](https://github.com/penpot/penpot/issues/2539)
 - Fix mousewheel on viewer inspector [Taiga #4221](https://tree.taiga.io/project/penpot/issue/4221)
 - Fix path edition activated on boards [Taiga #4105](https://tree.taiga.io/project/penpot/issue/4105)
+- Fix hidden layers inside groups become visible after the group visibility is changed[Taiga #4710](https://tree.taiga.io/project/penpot/issue/4710)
+- Fix format of HSLA color on viewer [Taiga #4393](https://tree.taiga.io/project/penpot/issue/4393)
 
 ## 1.16.2-beta
 

common/src/app/common/geom/shapes/modifiers.cljc

@@ -132,7 +132,7 @@
         children (cph/get-immediate-children objects shape-id)]
 
     (cond
-      (cph/mask-shape? shape)
+      (and (cph/mask-shape? shape) (seq children))
       (get-group-bounds objects bounds modif-tree (-> children first))
 
       (cph/group-shape? shape)

common/src/app/common/pages/changes.cljc

@@ -200,21 +200,9 @@
                 (cph/insert-at-index prev-shapes index shapes)
                 (cph/append-at-the-end prev-shapes shapes))))
 
-          (check-insert-items [prev-shapes parent index shapes]
-            (if-not (:masked-group? parent)
-              (insert-items prev-shapes index shapes)
-              ;; For masked groups, the first shape is the mask
-              ;; and it cannot be moved.
-              (let [mask-id         (first prev-shapes)
-                    other-ids       (rest prev-shapes)
-                    not-mask-shapes (without-obj shapes mask-id)
-                    new-index       (if (nil? index) nil (max (dec index) 0))
-                    new-shapes      (insert-items other-ids new-index not-mask-shapes)]
-                (into [mask-id] new-shapes))))
-
           (add-to-parent [parent index shapes]
             (let [parent (-> parent
-                             (update :shapes check-insert-items parent index shapes)
+                             (update :shapes insert-items index shapes)
                              ;; We need to ensure that no `nil` in the
                              ;; shapes list after adding all the
                              ;; incoming shapes to the parent.

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

@@ -433,8 +433,16 @@ button.collapse-sidebar {
         display: flex;
         justify-content: center;
         align-items: center;
-        &.close {
+        border: none;
-          transform: rotate(45deg);
+        background-color: transparent;
+        padding: 0;
+        .icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          &.close {
+            transform: rotate(45deg);
+          }
         }
       }
       svg {

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

@@ -408,7 +408,11 @@
                 (boolean? blocked) (assoc :blocked blocked)
                 (boolean? hidden) (assoc :hidden hidden)))
             objects (wsh/lookup-page-objects state)
-            ids     (into ids (->> ids (mapcat #(cph/get-children-ids objects %))))]
+            ;; We have change only the hidden behaviour, to hide only the
+            ;; selected shape, block behaviour remains the same.
+            ids     (if (boolean? blocked)
+                     (into ids (->> ids (mapcat #(cph/get-children-ids objects %))))
+                      ids)]
         (rx/of (dch/update-shapes ids update-fn))))))
 
 (defn toggle-visibility-selected

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

@@ -81,13 +81,13 @@
         color-style (str/trim (get-in shape [:svg-attrs :style :fill]))
         color-style (if (= color-style "currentColor") clr/black color-style)]
     (cond-> shape
-    ;; Color present as attribute
+      ;; Color present as attribute
       (uc/color? color-attr)
       (-> (update :svg-attrs dissoc :fill)
           (update-in [:svg-attrs :style] dissoc :fill)
           (assoc-in [:fills 0 :fill-color] (uc/parse-color color-attr)))
 
-    ;; Color present as style
+      ;; Color present as style
       (uc/color? color-style)
       (-> (update-in [:svg-attrs :style] dissoc :fill)
           (update :svg-attrs dissoc :fill)
@@ -110,20 +110,22 @@
                                (get-in shape [:svg-attrs :style :stroke-linecap]))
                            ((d/nilf str/trim))
                            ((d/nilf keyword)))
+        color-attr (str/trim (get-in shape [:svg-attrs :stroke]))
+        color-attr (if (= color-attr "currentColor") clr/black color-attr)
+        color-style (str/trim (get-in shape [:svg-attrs :style :stroke]))
+        color-style (if (= color-style "currentColor") clr/black color-style)
 
         shape
         (cond-> shape
-          (uc/color? (str/trim (get-in shape [:svg-attrs :stroke])))
+          ;; Color present as attribute
+          (uc/color? color-attr)
           (-> (update :svg-attrs dissoc :stroke)
-              (assoc-in [:strokes 0 :stroke-color] (-> (get-in shape [:svg-attrs :stroke])
+              (assoc-in [:strokes 0 :stroke-color] (uc/parse-color color-attr)))
-                                                       (str/trim)
-                                                       (uc/parse-color))))
 
-          (uc/color? (str/trim (get-in shape [:svg-attrs :style :stroke])))
+          ;; Color present as style
+          (uc/color? color-style)
           (-> (update-in [:svg-attrs :style] dissoc :stroke)
-              (assoc-in [:strokes 0 :stroke-color] (-> (get-in shape [:svg-attrs :style :stroke])
+              (assoc-in [:strokes 0 :stroke-color] (uc/parse-color color-style)))
-                                                       (str/trim)
-                                                       (uc/parse-color))))
 
           (get-in shape [:svg-attrs :stroke-opacity])
           (-> (update :svg-attrs dissoc :stroke-opacity)
@@ -133,7 +135,7 @@
           (get-in shape [:svg-attrs :style :stroke-opacity])
           (-> (update-in [:svg-attrs :style] dissoc :stroke-opacity)
               (assoc-in [:strokes 0 :stroke-opacity] (-> (get-in shape [:svg-attrs :style :stroke-opacity])
-                                                       (d/parse-double))))
+                                                         (d/parse-double))))
 
           (get-in shape [:svg-attrs :stroke-width])
           (-> (update :svg-attrs dissoc :stroke-width)
@@ -516,12 +518,12 @@
 
           ;; In penpot groups have the size of their children. To respect the imported svg size and empty space let's create a transparent shape as background to respect the imported size
           base-background-shape {:tag :rect
-                                 :attrs {:x "0"
+                                 :attrs {:x      (str vb-x)
-                                         :y "0"
+                                         :y      (str vb-y)
-                                         :width (str (:width root-shape))
+                                         :width  (str vb-width)
-                                         :height (str (:height root-shape))
+                                         :height (str vb-height)
-                                         :fill "none"
+                                         :fill   "none"
-                                         :id "base-background"}
+                                         :id     "base-background"}
                                  :hidden true
                                  :content []}
 

frontend/src/app/main/ui/shapes/attrs.cljs

@@ -147,7 +147,7 @@
 (defn extract-svg-attrs
   [render-id svg-defs svg-attrs]
   (if (and (empty? svg-defs) (empty? svg-attrs))
-    [nil nil]
+    [{} {}]
     (let [replace-id (fn [id]
                        (if (contains? svg-defs id)
                          (str render-id "-" id)

frontend/src/app/main/ui/shapes/mask.cljs

@@ -78,6 +78,13 @@
                :y (:y mask-bb-rect)
                :width (:width mask-bb-rect)
                :height (:height mask-bb-rect)
+
+               ;; This is necesary to prevent a race condition in the dynamic-modifiers whether the modifier
+               ;; triggers afte the render
+               :data-old-x (:x mask-bb-rect)
+               :data-old-y (:y mask-bb-rect)
+               :data-old-width (:width mask-bb-rect)
+               :data-old-height (:height mask-bb-rect)
                :mask-units "userSpaceOnUse"}
         [:g {:filter (when-not svg-text? (filter-url render-id mask))}
          [:& shape-wrapper {:shape (-> mask (dissoc :shadow :blur) (assoc :is-mask? true))}]]]])))

frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs

@@ -60,8 +60,9 @@
         (case format
           :rgba (let [[r g b a] (uc/hex->rgba (:color color) (:opacity color))]
                   [:div (str/fmt "%s, %s, %s, %s" r g b a)])
-          :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color))]
+          :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color))
-                  [:div (str/fmt "%s, %s, %s, %s" h s l a)])
+                      result (uc/format-hsla [h s l a])]
+                  [:div result])
           [:*
            [:& color-name {:color color}]
            (when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])]))

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

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.config :as cf]
    [app.main.data.dashboard.shortcuts]
+   [app.main.data.events :as ev]
    [app.main.data.shortcuts :as ds]
    [app.main.data.viewer.shortcuts]
    [app.main.data.workspace :as dw]
@@ -18,6 +19,7 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
+   [app.util.keyboard :as kbd]
    [app.util.strings :refer [matches-search]]
    [clojure.set :as set]
    [clojure.string]
@@ -450,7 +452,24 @@
         (mf/use-callback
          (fn [_]
            (reset! open-sections [[1]])
-           (reset! filter-term "")))]
+           (reset! filter-term "")))
+
+        manage-key-down
+        (mf/use-callback
+         (fn [event]
+           (when (kbd/esc? event)
+             (st/emit! (-> (dw/toggle-layout-flag :shortcuts)
+                           (vary-meta assoc ::ev/origin "shortcuts-panel"))))))
+
+        on-key-down
+        (mf/use-callback
+         (fn [event]
+           (when (kbd/enter? event)
+             (on-search-clear-click)
+             (dom/focus! (dom/get-element "shortcut-search")))))]
+    
+      (mf/with-effect []
+        (dom/focus! (dom/get-element "shortcut-search")))
 
     [:div.shortcuts
      [:div.shortcuts-header
@@ -465,13 +484,16 @@
          :type "text"
          :value @filter-term
          :on-change on-search-term-change
-         :auto-complete "off"}]
+         :auto-complete "off"
+         :on-key-down manage-key-down}]
        (if (str/empty? @filter-term)
          [:span.icon-wrapper
           i/search]
-         [:span.icon-wrapper.close
+         [:button.icon-wrapper
-          {:on-click on-search-clear-click}
+          {:on-click on-search-clear-click
-          i/close])]]
+           :on-key-down on-key-down}
+          [:span.icon.close
+           i/close]])]]
      (if match-any?
        [:div.shortcut-list
         (for [section all-shortcuts]

frontend/src/app/util/color.cljs

@@ -8,6 +8,7 @@
   "Color conversion utils."
   (:require
    [app.util.object :as obj]
+   [app.util.strings :as ust]
    [cuerdas.core :as str]
    [goog.color :as gcolor]))
 
@@ -55,6 +56,14 @@
   (-> (hex->hsl data)
       (conj opacity)))
 
+(defn format-hsla
+  [[h s l a]]
+  (let [precision 2
+        rounded-s (* 100 (ust/format-precision s precision))
+        rounded-l (* 100 (ust/format-precision l precision))]
+
+    (str/fmt "%s, %s%, %s%, %s" h rounded-s rounded-l a)))
+
 (defn hsl->rgb
   [[h s l]]
   (gcolor/hslToRgb h s l))
@@ -116,9 +125,9 @@
 
         stops-css (str/join "," (map parse-stop stops))]
 
-      (if (= type :linear)
+    (if (= type :linear)
-        (str/fmt "linear-gradient(to bottom, %s)" stops-css)
+      (str/fmt "linear-gradient(to bottom, %s)" stops-css)
-        (str/fmt "radial-gradient(circle, %s)" stops-css))))
+      (str/fmt "radial-gradient(circle, %s)" stops-css))))
 
 ;; TODO: REMOVE `VALUE` WHEN COLOR IS INTEGRATED
 (defn color->background [{:keys [color opacity gradient value]}]