Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-01 02:06:53 -05:00
Code Issues Activity

✨ Improve readability of RGBA and HSLA values in inspect mode (#5918)

Browse source 
* ✨ Improve readability of RGBA and HSLA values in inspect mode

* 📎 Remove reader conditionals for format common methods
This commit is contained in:
Elena Torró 2025-02-24 09:08:42 +01:00 • committed by GitHub
parent 1c98c53805
commit bcea19001e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 49 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
common/src/app/common/colors.cljc
View file

@ -342,13 +342,20 @@
(-> (hex->hsl data) (-> (hex->hsl data)
(conj opacity))) (conj opacity)))
#?(:cljs (defn format-hsla
(defn format-hsla
[[h s l a]] [[h s l a]]
(let [precision 2 (let [precision 2
rounded-s (* 100 (parse-double (d/format-precision s precision))) rounded-h (int h)
rounded-l (* 100 (parse-double (d/format-precision l precision)))] rounded-s (d/format-number (* 100 s) precision)
(str/concat "" h ", " rounded-s "%, " rounded-l "%, " a)))) rounded-l (d/format-number (* 100 l) precision)
rounded-a (d/format-number a precision)]
(str/concat "" rounded-h ", " rounded-s "%, " rounded-l "%, " rounded-a)))
(defn format-rgba
[[r g b a]]
(let [precision 2
rounded-a (d/format-number a precision)]
(str/ffmt "%, %, %, %" r g b rounded-a)))
(defn- hue->rgb (defn- hue->rgb
"Helper for hsl->rgb" "Helper for hsl->rgb"

16
common/src/app/common/data.cljc
View file

@ -1007,8 +1007,7 @@
(def ^:const trail-zeros-regex-1 #"\.0+$") (def ^:const trail-zeros-regex-1 #"\.0+$")
(def ^:const trail-zeros-regex-2 #"(\.\d*[^0])0+$") (def ^:const trail-zeros-regex-2 #"(\.\d*[^0])0+$")
#?(:cljs (defn format-precision
(defn format-precision
"Creates a number with predetermined precision and then removes the trailing 0. "Creates a number with predetermined precision and then removes the trailing 0.
Examples: Examples:
12.0123, 0 => 12 12.0123, 0 => 12
@ -1025,9 +1024,18 @@
(if-let [m (re-find trail-zeros-regex-2 num-str)] (if-let [m (re-find trail-zeros-regex-2 num-str)]
(str/replace num-str (first m) (second m)) (str/replace num-str (first m) (second m))
num-str)) num-str))
(catch :default _ (catch #?(:clj Throwable :cljs :default) _
(str num))) (str num)))
(str num)))) (str num)))
(defn format-number
([value]
(format-number value nil))
([value {:keys [precision] :or {precision 2}}]
(let [value (if (string? value) (parse-double value) value)]
(when (num? value)
(let [value (format-precision value precision)]
(str value))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Util protocols ;; Util protocols

10
common/test/common_tests/colors_test.cljc
View file

@ -51,9 +51,13 @@
(t/is (= [0 0 0] (colors/hex->rgb "#kkk"))) (t/is (= [0 0 0] (colors/hex->rgb "#kkk")))
(t/is (= [1 2 3] (colors/hex->rgb "#010203")))) (t/is (= [1 2 3] (colors/hex->rgb "#010203"))))
#?(:cljs (t/deftest format-hsla
(t/deftest format-hsla (t/is (= "210, 50%, 0.78%, 1" (colors/format-hsla [210.0 0.5 0.00784313725490196 1])))
(t/is (= "210, 50%, 1%, 1" (colors/format-hsla [210.0 0.5 0.00784313725490196 1]))))) (t/is (= "220, 5%, 30%, 0.8" (colors/format-hsla [220.0 0.05 0.3 0.8]))))
(t/deftest format-rgba
(t/is (= "210, 199, 12, 0.08" (colors/format-rgba [210 199 12 0.08])))
(t/is (= "210, 199, 12, 1" (colors/format-rgba [210 199 12 1]))))
(t/deftest rgb-to-hsl (t/deftest rgb-to-hsl
(t/is (= [210.0 0.5 0.00784313725490196] (colors/rgb->hsl [1 2 3]))) (t/is (= [210.0 0.5 0.00784313725490196] (colors/rgb->hsl [1 2 3])))

7
frontend/src/app/main/ui/inspect/attributes/common.cljs
View file

@ -129,13 +129,14 @@
[:& cb/color-name {:color color :size 90}] [:& cb/color-name {:color color :size 90}]
(case format (case format
:hex [:& cb/color-name {:color color}] :hex [:& cb/color-name {:color color}]
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))] :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))
(str/ffmt "%, %, %, %" r g b a)) result (cc/format-rgba [r g b a])]
[:* result])
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color)) :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
result (cc/format-hsla [h s l a])] result (cc/format-hsla [h s l a])]
[:* result])))] [:* result])))]
(when-not (:gradient color) (when (and (not (:gradient color)) (= :hex format))
[:span {:class (stl/css :opacity-info)} [:span {:class (stl/css :opacity-info)}
(dm/str (-> color (dm/str (-> color
(:opacity) (:opacity)

4
frontend/src/app/util/color.cljs
View file

@ -63,10 +63,10 @@
(not= color :multiple) (not= color :multiple)
(case format (case format
:rgba (let [[r g b] (cc/hex->rgb color)] :rgba (let [[r g b] (cc/hex->rgb color)]
(str/fmt "rgba(%s, %s, %s, %s)" r g b opacity)) (str/fmt "rgba(%s)" (cc/format-rgba [r g b opacity])))
:hsla (let [[h s l] (cc/hex->hsl color)] :hsla (let [[h s l] (cc/hex->hsl color)]
(str/fmt "hsla(%s, %s, %s, %s)" h (* 100 s) (* 100 l) opacity)) (str/fmt "hsla(%s)" (cc/format-hsla [h s l opacity])))
:hex (str color (str/upper (d/opacity-to-hex opacity)))) :hex (str color (str/upper (d/opacity-to-hex opacity))))