johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🐛 Fix color row opacity (#7550)

Browse Source
This commit is contained in:
Eva Marco
2025-10-22 12:20:58 +02:00
committed by Andrey Antukh
parent 7de95e108b
commit e45994e836
2 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View File

@@ -157,11 +157,11 @@
color-name (dm/get-in src-colors [color-id :name]) color-name (dm/get-in src-colors [color-id :name])
has-multiple-colors (uc/multiple? color) has-multiple-colors (uc/multiple? color)
library-color? (and (or (:id color) (:ref-id color)) color-name (not has-multiple-colors)) library-color? (and (or (:id color) (:ref-id color)) color-name (not ^boolean has-multiple-colors))
gradient-color? (and (not has-multiple-colors) gradient-color? (and (not ^boolean has-multiple-colors)
(:gradient color) (:gradient color)
(dm/get-in color [:gradient :type])) (dm/get-in color [:gradient :type]))
image-color? (and (not has-multiple-colors) image-color? (and (not ^boolean has-multiple-colors)
(:image color)) (:image color))
editing-text* (mf/use-state false) editing-text* (mf/use-state false)
@@ -236,7 +236,7 @@
(mf/deps disable-gradient disable-opacity disable-image disable-picker on-change on-close on-open tokens) (mf/deps disable-gradient disable-opacity disable-image disable-picker on-change on-close on-open tokens)
(fn [color pos tab] (fn [color pos tab]
(let [color (cond (let [color (cond
has-multiple-colors ^boolean has-multiple-colors
{:color default-color {:color default-color
:opacity 1} :opacity 1}
@@ -355,6 +355,7 @@
[:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true [:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true
:library-name-wrapper true) :library-name-wrapper true)
:handle-click-color handle-click-color :handle-click-color handle-click-color
:opacity false
:color color} :color color}
[:* [:*
[:div {:class (stl/css :color-name) [:div {:class (stl/css :color-name)
@@ -369,11 +370,11 @@
gradient-color? gradient-color?
[:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true [:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true
:no-opacity disable-opacity :no-opacity ^boolean disable-opacity
:gradient-name-wrapper true) :gradient-name-wrapper true)
:handle-click-color handle-click-color :handle-click-color handle-click-color
:color color :color color
:opacity true :opacity (not ^boolean disable-opacity)
:select-on-focus select-on-focus :select-on-focus select-on-focus
:on-focus on-focus' :on-focus on-focus'
:on-blur on-blur' :on-blur on-blur'
@@ -383,10 +384,10 @@
image-color? image-color?
[:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true [:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true
:no-opacity disable-opacity) :no-opacity ^boolean disable-opacity)
:handle-click-color handle-click-color :handle-click-color handle-click-color
:color color :color color
:opacity true :opacity (not ^boolean disable-opacity)
:select-on-focus select-on-focus :select-on-focus select-on-focus
:on-focus on-focus' :on-focus on-focus'
:on-blur on-blur' :on-blur on-blur'
@@ -396,19 +397,20 @@
:else :else
[:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true [:> color-info-wrapper* {:class (stl/css-case :color-name-wrapper true
:no-opacity (or disable-opacity :no-opacity (or ^boolean disable-opacity
has-multiple-colors) ^boolean has-multiple-colors)
:editing is-editing-text) :editing is-editing-text)
:handle-click-color handle-click-color :handle-click-color handle-click-color
:color color :color color
:opacity true :opacity (not (or ^boolean disable-opacity
^boolean has-multiple-colors))
:select-on-focus select-on-focus :select-on-focus select-on-focus
:on-focus on-focus' :on-focus on-focus'
:on-blur on-blur' :on-blur on-blur'
:on-opacity-change on-opacity-change} :on-opacity-change on-opacity-change}
[:span {:class (stl/css :color-input-wrapper)} [:span {:class (stl/css :color-input-wrapper)}
[:> color-input* {:value (if has-multiple-colors [:> color-input* {:value (if ^boolean has-multiple-colors
"" ""
color-without-hash) color-without-hash)
:placeholder (tr "settings.multiple") :placeholder (tr "settings.multiple")

1
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View File

@@ -186,6 +186,7 @@
align-items: center; align-items: center;
block-size: $sz-32; block-size: $sz-32;
inline-size: px2rem(60); inline-size: px2rem(60);
padding-inline-start: var(--sp-xs);
border-radius: 0 $br-8 $br-8 0; border-radius: 0 $br-8 $br-8 0;
border: $b-1 solid var(--opacity-input-boder-color); border: $b-1 solid var(--opacity-input-boder-color);
background-color: var(--opacity-input-background-color); background-color: var(--opacity-input-background-color);