diff --git a/CHANGES.md b/CHANGES.md index 8469e45ce1..3cc7a1ae0f 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -10,6 +10,7 @@ ### :sparkles: New features & Enhancements +- Show alpha percentage next to library color values to distinguish colors that differ only in opacity (by @rockchris099) [Github #6328](https://github.com/penpot/penpot/issues/6328) - Add "Clear artboard guides" option to right-click context menu for frames (by @eureka0928) [Github #6987](https://github.com/penpot/penpot/issues/6987) - Allow duplicating color and typography styles (by @MkDev11) [Github #2912](https://github.com/penpot/penpot/issues/2912) - Add woff2 support on user uploaded fonts (by @Nivl) [Github #8248](https://github.com/penpot/penpot/pull/8248) diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs index d94938d147..55d9e4c57c 100644 --- a/frontend/src/app/main/ui/components/color_bullet.cljs +++ b/frontend/src/app/main/ui/components/color_bullet.cljs @@ -7,24 +7,33 @@ (ns app.main.ui.components.color-bullet (:require-macros [app.main.style :as stl]) (:require + [app.common.math :as mth] [app.config :as cfg] [app.util.color :as uc] [app.util.i18n :refer [tr]] [cuerdas.core :as str] [rumext.v2 :as mf])) +(defn- format-color-with-alpha + [color opacity] + (if (and (number? opacity) (< opacity 1)) + (str color " " (mth/round (* opacity 100)) "%") + color)) + (defn- color-title [color-item] (let [{:keys [name path]} (meta color-item) path-and-name (if path (str path " / " name) name) gradient (:gradient color-item) image (:image color-item) - color (:color color-item)] + opacity (:opacity color-item) + color (:color color-item) + color-str (when color (format-color-with-alpha color opacity))] (if (some? name) (cond (some? color) - (str/ffmt "% (%)" path-and-name color) + (str/ffmt "% (%)" path-and-name color-str) (some? gradient) (str/ffmt "% (%)" path-and-name (uc/gradient-type->string (:type gradient))) @@ -37,7 +46,7 @@ (cond (some? color) - color + color-str (some? gradient) (uc/gradient-type->string (:type gradient)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs index b2dc3e8e5b..c0395cf4f4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs @@ -9,6 +9,7 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] + [app.common.math :as mth] [app.common.path-names :as cpn] [app.config :as cf] [app.main.constants :refer [max-input-length]] @@ -61,10 +62,16 @@ menu-state (mf/use-state cmm/initial-context-menu-state) read-only? (mf/use-ctx ctx/workspace-read-only?) + opacity (:opacity color) + alpha-suffix (when (and (number? opacity) (< opacity 1)) + (dm/str " " (mth/round (* opacity 100)) "%")) default-name (cond (:gradient color) (uc/gradient-type->string (dm/get-in color [:gradient :type])) (:color color) (:color color) :else (:value color)) + display-name (if (and alpha-suffix (not (:gradient color))) + (dm/str default-name alpha-suffix) + default-name) rename-color (mf/use-fn @@ -231,16 +238,16 @@ :default-value (cpn/merge-path-item (:path color) (:name color))}] [:div {:title (if (= (:name color) default-name) - default-name - (dm/str (:name color) " (" default-name ")")) + display-name + (dm/str (:name color) " (" display-name ")")) :class (stl/css :name-block) :on-double-click rename-color-clicked} (if (= (:name color) default-name) - [:span {:class (stl/css :default-name)} default-name] + [:span {:class (stl/css :default-name)} display-name] [:* (:name color) - [:span {:class (stl/css :default-name :default-name-with-color)} default-name]])]) + [:span {:class (stl/css :default-name :default-name-with-color)} display-name]])]) (when local? [:> cmm/assets-context-menu*