3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-13 23:26:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix problem with :multiple for colors and typographies

Browse source
This commit is contained in:
alonso.torres 2021-05-24 21:28:37 +02:00 • committed by Andrey Antukh
parent ed95b59003
commit 95cb6d132b
6 changed files with 43 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -34,6 +34,7 @@
- Fix problem with color picker positioning - Fix problem with color picker positioning
- Fix order on color palette [#961](https://github.com/penpot/penpot/issues/961) - Fix order on color palette [#961](https://github.com/penpot/penpot/issues/961)
- Fix issue when group creation leaves an empty group [#1724](https://tree.taiga.io/project/penpot/issue/1724) - Fix issue when group creation leaves an empty group [#1724](https://tree.taiga.io/project/penpot/issue/1724)
- Fix problem with :multiple for colors and typographies [#1668](https://tree.taiga.io/project/penpot/issue/1668)
### :arrow_up: Deps updates ### :arrow_up: Deps updates

3
frontend/src/app/main/ui/shapes/text/styles.cljs
View file

@ -75,7 +75,8 @@
;; (uc/hex->rgba fill-color fill-opacity)) ;; (uc/hex->rgba fill-color fill-opacity))
[r g b a] (uc/hex->rgba fill-color fill-opacity) [r g b a] (uc/hex->rgba fill-color fill-opacity)
text-color (str/format "rgba(%s, %s, %s, %s)" r g b a) text-color (when (and (some? fill-color) (some? fill-opacity))
(str/format "rgba(%s, %s, %s, %s)" r g b a))
fontsdb (deref fonts/fontsdb) fontsdb (deref fonts/fontsdb)
base #js {:textDecoration text-decoration base #js {:textDecoration text-decoration

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

@ -288,6 +288,8 @@
(fn [changes] (fn [changes]
(st/emit! (dwl/update-typography (merge typography changes) file-id)))) (st/emit! (dwl/update-typography (merge typography changes) file-id))))
multiple? (->> values vals (d/seek #(= % :multiple)))
opts #js {:ids ids opts #js {:ids ids
:values values :values values
:on-change on-change}] :on-change on-change}]
@ -295,7 +297,7 @@
[:div.element-set [:div.element-set
[:div.element-set-title [:div.element-set-title
[:span label] [:span label]
(when (not typography) (when (and (not typography) (not multiple?))
[:div.add-page {:on-click on-convert-to-typography} i/close])] [:div.add-page {:on-click on-convert-to-typography} i/close])]
(cond (cond

30
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -27,7 +27,19 @@
(defn color-picker-callback (defn color-picker-callback
[color disable-gradient disable-opacity handle-change-color handle-open handle-close] [color disable-gradient disable-opacity handle-change-color handle-open handle-close]
(fn [event] (fn [event]
(let [x (.-clientX event) (let [color
(cond
(uc/multiple? color)
{:color cp/default-color
:opacity 1}
(= :multiple (:opacity color))
(assoc color :opacity 1)
:else
color)
x (.-clientX event)
y (.-clientY event) y (.-clientY event)
props {:x x props {:x x
:y y :y y
@ -98,16 +110,12 @@
handle-click-color (mf/use-callback handle-click-color (mf/use-callback
(mf/deps color) (mf/deps color)
(let [;; If multiple, we change to default color (color-picker-callback color
color (if (uc/multiple? color) disable-gradient
{:color cp/default-color :opacity 1} disable-opacity
color)] handle-pick-color
(color-picker-callback color handle-open
disable-gradient handle-close))
disable-opacity
handle-pick-color
handle-open
handle-close)))
prev-color (h/use-previous color)] prev-color (h/use-previous color)]

33
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -148,22 +148,23 @@
extract-attrs extract-attrs
(fn [[ids values] {:keys [id type shapes content] :as shape}] (fn [[ids values] {:keys [id type shapes content] :as shape}]
(let [props (get-in type->props [type attr-type]) (let [props (get-in type->props [type attr-type])]
result (case props (case props
:ignore [ids values] :ignore [ids values]
:shape [(conj ids id) :shape [(conj ids id)
(merge-attrs values (merge (merge-attrs values (merge
(empty-map attrs) (empty-map attrs)
(select-keys shape attrs)))] (select-keys shape attrs)))]
:text [(conj ids id) :text [(conj ids id)
(-> values (-> values
(merge-attrs (select-keys shape attrs)) (merge-attrs (select-keys shape attrs))
(merge-attrs (attrs/get-attrs-multi (txt/node-seq content) attrs)))] (merge-attrs (merge
:children (let [children (->> (:shapes shape []) (map #(get objects %))) (select-keys txt/default-text-attrs attrs)
[new-ids new-values] (get-attrs children objects attr-type)] (attrs/get-attrs-multi (txt/node-seq content) attrs))))]
[(d/concat ids new-ids) (merge-attrs values new-values)]) :children (let [children (->> (:shapes shape []) (map #(get objects %)))
[])] [new-ids new-values] (get-attrs children objects attr-type)]
result))] [(d/concat ids new-ids) (merge-attrs values new-values)])
[])))]
(reduce extract-attrs [[] []] shapes))) (reduce extract-attrs [[] []] shapes)))
(mf/defc options (mf/defc options

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

@ -135,7 +135,7 @@
:else "transparent"))) :else "transparent")))
(defn multiple? [{:keys [id file-id value color gradient]}] (defn multiple? [{:keys [id file-id value color gradient opacity]}]
(or (= value :multiple) (or (= value :multiple)
(= color :multiple) (= color :multiple)
(= gradient :multiple) (= gradient :multiple)