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

Merge pull request #238 from tokens-studio/213-opacity-fixes-03

Browse source 
Fixes Opacity
This commit is contained in:
Florian Schrödl 2024-08-06 10:31:13 +02:00 • committed by GitHub
commit e02611da20
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 55 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/ui/workspace/tokens/CHANGELOG.md
View file

@ -18,6 +18,12 @@ If possible add video here from PR as well
## Changes
### 2024-08-05 - Fix opacity updating
[Link to PR](https://github.com/orgs/tokens-studio/projects/69/views/11?pane=issue&itemId=69801248)
Fixes opacity not being applied correctly to shapes.
### 2024-08-05 - Fix stroke witdth applying breaking app
[Link to PR](https://github.com/orgs/tokens-studio/projects/69/views/11?pane=issue&itemId=73072870)

3
frontend/src/app/main/ui/workspace/tokens/changes.cljs
View file

@ -94,7 +94,8 @@
:attrs ctt/border-radius-keys}))
(defn update-opacity [value shape-ids]
(dch/update-shapes shape-ids #(assoc % :opacity value)))
(when (<= 0 value 1)
(dch/update-shapes shape-ids #(assoc % :opacity value))))
(defn update-rotation [value shape-ids]
(ptk/reify ::update-shape-dimensions

2
frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
View file

@ -89,7 +89,7 @@
(let [resolved-tokens (reduce
(fn [acc ^js cur]
(let [value (.-value cur)
resolved-value (d/parse-integer (.-value cur))
resolved-value (d/parse-double (.-value cur))
original-value (-> cur .-original .-value)
id (uuid (.-uuid (.-id cur)))
missing-reference? (and (not resolved-value)

68
frontend/test/token_tests/logic/token_actions_test.cljs
View file

@ -4,7 +4,6 @@
[app.common.test-helpers.files :as cthf]
[app.common.test-helpers.shapes :as cths]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.core :as wtc]
[cljs.test :as t :include-macros true]
[frontend-tests.helpers.pages :as thp]
[frontend-tests.helpers.state :as ths]
@ -166,27 +165,52 @@
(t/deftest test-apply-opacity
(t/testing "applies opacity token and updates the shapes opacity"
(t/async
done
(let [file (-> (setup-file)
(toht/add-token :token-target {:value "0.5"
:name "opacity.medium"
:type :opacity}))
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:opacity}
:token (toht/get-token file :token-target)
:on-update-shape wtch/update-opacity})]]
(tohs/run-store-async
store done events
(fn [new-state]
(let [file' (ths/get-file-from-store new-state)
token-target' (toht/get-token file' :token-target)
rect-1' (cths/get-shape file' :rect-1)]
(t/is (some? (:applied-tokens rect-1')))
(t/is (= (:opacity (:applied-tokens rect-1')) (:id token-target')))
;; TODO Fix opacity shape update not working?
#_(t/is (= (:opacity rect-1') 0.5)))))))))
done
(let [file (-> (setup-file)
(toht/add-token :opacity-float {:value "0.3"
:name "opacity.float"
:type :opacity})
(toht/add-token :opacity-percent {:value "40%"
:name "opacity.percent"
:type :opacity})
(toht/add-token :opacity-invalid {:value "100"
:name "opacity.invalid"
:type :opacity}))
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2)
rect-3 (cths/get-shape file :rect-3)
events [(wtch/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:opacity}
:token (toht/get-token file :opacity-float)
:on-update-shape wtch/update-opacity})
(wtch/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:opacity}
:token (toht/get-token file :opacity-percent)
:on-update-shape wtch/update-opacity})
(wtch/apply-token {:shape-ids [(:id rect-3)]
:attributes #{:opacity}
:token (toht/get-token file :opacity-invalid)
:on-update-shape wtch/update-opacity})]]
(tohs/run-store-async
store done events
(fn [new-state]
(let [file' (ths/get-file-from-store new-state)
rect-1' (cths/get-shape file' :rect-1)
rect-2' (cths/get-shape file' :rect-2)
rect-3' (cths/get-shape file' :rect-3)
token-opacity-float (toht/get-token file' :opacity-float)
token-opacity-percent (toht/get-token file' :opacity-percent)
token-opacity-invalid (toht/get-token file' :opacity-invalid)]
(t/testing "float value got translated to float and applied to opacity"
(t/is (= (:opacity (:applied-tokens rect-1')) (:id token-opacity-float)))
(t/is (= (:opacity rect-1') 0.3)))
(t/testing "percentage value got translated to float and applied to opacity"
(t/is (= (:opacity (:applied-tokens rect-2')) (:id token-opacity-percent)))
(t/is (= (:opacity rect-2') 0.4)))
(t/testing "invalid opacity value got applied but did not change shape"
(t/is (= (:opacity (:applied-tokens rect-3')) (:id token-opacity-invalid)))
(t/is (nil? (:opacity rect-3')))))))))))
(t/deftest test-apply-rotation
(t/testing "applies rotation token and updates the shapes rotation"