Merge pull request #2816 from penpot/eva-bugfix-2

Eva polishing

CHANGES.md

@@ -9,6 +9,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
 
@@ -46,6 +47,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
 

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

@@ -433,8 +433,16 @@ button.collapse-sidebar {
         display: flex;
         justify-content: center;
         align-items: center;
-        &.close {
-          transform: rotate(45deg);
+        border: none;
+        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/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))]
-                  [:div (str/fmt "%s, %s, %s, %s" h s l a)])
+          :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color))
+                      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
-          {:on-click on-search-clear-click}
-          i/close])]]
+         [:button.icon-wrapper
+          {:on-click on-search-clear-click
+           :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)
-        (str/fmt "linear-gradient(to bottom, %s)" stops-css)
-        (str/fmt "radial-gradient(circle, %s)" stops-css))))
+    (if (= type :linear)
+      (str/fmt "linear-gradient(to bottom, %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]}]