diff --git a/CHANGES.md b/CHANGES.md index 154cb3fd5..712b9bc9f 100644 --- a/CHANGES.md +++ b/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 diff --git a/common/src/app/common/geom/shapes/modifiers.cljc b/common/src/app/common/geom/shapes/modifiers.cljc index 15cfdd9c0..9b859a5ae 100644 --- a/common/src/app/common/geom/shapes/modifiers.cljc +++ b/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) diff --git a/common/src/app/common/pages/changes.cljc b/common/src/app/common/pages/changes.cljc index 334edefb1..e8abf30fb 100644 --- a/common/src/app/common/pages/changes.cljc +++ b/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. diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index ffae5942e..c5765c444 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/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 { diff --git a/frontend/src/app/main/data/workspace/shapes.cljs b/frontend/src/app/main/data/workspace/shapes.cljs index a8551942d..a87f4fbb5 100644 --- a/frontend/src/app/main/data/workspace/shapes.cljs +++ b/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 diff --git a/frontend/src/app/main/data/workspace/svg_upload.cljs b/frontend/src/app/main/data/workspace/svg_upload.cljs index 096bd0464..07b510349 100644 --- a/frontend/src/app/main/data/workspace/svg_upload.cljs +++ b/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]) - (str/trim) - (uc/parse-color)))) + (assoc-in [:strokes 0 :stroke-color] (uc/parse-color color-attr))) - (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]) - (str/trim) - (uc/parse-color)))) + (assoc-in [:strokes 0 :stroke-color] (uc/parse-color color-style))) (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" - :y "0" - :width (str (:width root-shape)) - :height (str (:height root-shape)) - :fill "none" - :id "base-background"} + :attrs {:x (str vb-x) + :y (str vb-y) + :width (str vb-width) + :height (str vb-height) + :fill "none" + :id "base-background"} :hidden true :content []} diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index 7b9275ba7..acaad65e9 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/shapes/mask.cljs b/frontend/src/app/main/ui/shapes/mask.cljs index d0685a5f5..f74e3a664 100644 --- a/frontend/src/app/main/ui/shapes/mask.cljs +++ b/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))}]]]]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs index cd3b7e180..76e593f4c 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs +++ b/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)) "%")])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs index 4a2a6d6fc..853c49c9a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs +++ b/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] diff --git a/frontend/src/app/util/color.cljs b/frontend/src/app/util/color.cljs index 30ee9415e..80f60a41e 100644 --- a/frontend/src/app/util/color.cljs +++ b/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]}]