Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-16 08:51:32 -05:00
Code Issues Activity

🐛 Fix several questions about frame background export

Browse source
This commit is contained in:
Andrés Moya 2022-01-18 16:13:26 +01:00 • committed by Andrey Antukh
parent f754c12e8c
commit 36bb5cbe01
9 changed files with 50 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
common/src/app/common/pages/common.cljc
View file

@ -20,7 +20,7 @@
:fill-color-gradient :fill-group
:fill-color-ref-file :fill-group
:fill-color-ref-id :fill-group
:show-fill-on-export? :fill-group
:hide-fill-on-export :fill-group
:content :content-group
:hidden :visibility-group
:blocked :modifiable-group

2
common/src/app/common/pages/init.cljc
View file

@ -36,7 +36,7 @@
:fill-color clr/white
:fill-opacity 1
:shapes []
:show-fill-on-export? true})
:hide-fill-on-export false})
(def ^:private minimal-shapes
[{:type :rect

2
common/src/app/common/pages/spec.cljc
View file

@ -180,6 +180,7 @@
(s/def :internal.shape/fill-color-gradient (s/nilable ::gradient))
(s/def :internal.shape/fill-color-ref-file (s/nilable uuid?))
(s/def :internal.shape/fill-color-ref-id (s/nilable uuid?))
(s/def :internal.shape/hide-fill-on-export boolean?)
(s/def :internal.shape/font-family string?)
(s/def :internal.shape/font-size ::us/safe-integer)
@ -286,6 +287,7 @@
:internal.shape/fill-color-gradient
:internal.shape/fill-color-ref-file
:internal.shape/fill-color-ref-id
:internal.shape/hide-fill-on-export ;; only for frames
:internal.shape/font-family
:internal.shape/font-size
:internal.shape/font-style

9
frontend/resources/styles/common/framework.scss
View file

@ -724,6 +724,15 @@ input[type="radio"]:checked + label:before {
}
}
input[type="checkbox"][indeterminate] {
& + label {
&::after {
content: "?";
left: 4px;
}
}
}
&.right {
label {
margin-right: 35px;

13
frontend/src/app/main/data/workspace/colors.cljs
View file

@ -148,17 +148,20 @@
(rx/from (map #(dwt/update-text-attrs {:id % :attrs attrs}) text-ids))
(rx/of (dch/update-shapes shape-ids (fn [shape] (d/merge shape attrs)))))))))
(defn change-show-fill-on-export
[ids show-fill-on-export?]
(ptk/reify ::change-show-fill-on-export
(defn change-hide-fill-on-export
[ids hide-fill-on-export]
(ptk/reify ::change-hide-fill-on-export
ptk/WatchEvent
(watch [_ state _]
(let [page-id (:current-page-id state)
objects (wsh/lookup-page-objects state page-id)
is-text? #(= :text (:type (get objects %)))
shape-ids (filter (complement is-text?) ids)
attrs {:show-fill-on-export? show-fill-on-export?}]
(rx/of (dch/update-shapes shape-ids (fn [shape] (d/merge shape attrs))))))))
attrs {:hide-fill-on-export hide-fill-on-export}]
(rx/of (dch/update-shapes shape-ids (fn [shape]
(if (= (:type shape) :frame)
(d/merge shape attrs)
shape))))))))
(defn change-stroke
[ids color]

4
frontend/src/app/main/ui/render.cljs
View file

@ -69,8 +69,8 @@
object (get objects object-id)
object (cond-> object
(not (:show-fill-on-export? object))
(assoc :fill-color nil :fill-opacity 0))
(:hide-fill-on-export object)
(assoc :fill-color nil :fill-opacity 0))
{:keys [x y width height] :as bs} (calc-bounds object objects)
[_ _ width height :as coords] (->> [x y width height] (map #(* % zoom)))

1
frontend/src/app/main/ui/shapes/export.cljs
View file

@ -76,6 +76,7 @@
(add! :type)
(add! :stroke-style)
(add! :stroke-alignment)
(add! :hide-fill-on-export)
(add! :transform)
(add! :transform-inverse)
(add! :flip-x)

27
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -21,10 +21,11 @@
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient])
:fill-color-gradient
:hide-fill-on-export])
(def fill-attrs-shape
(conj fill-attrs :show-fill-on-export?))
(conj fill-attrs :hide-fill-on-export))
(mf/defc fill-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]}
@ -43,7 +44,9 @@
:file-id (:fill-color-ref-file values)
:gradient (:fill-color-gradient values)}
show-fill-on-export? (:show-fill-on-export? values true)
hide-fill-on-export? (:hide-fill-on-export values false)
checkbox-ref (mf/use-ref)
on-add
(mf/use-callback
@ -80,7 +83,17 @@
(mf/deps ids)
(fn [event]
(let [value (-> event dom/get-target dom/checked?)]
(st/emit! (dc/change-show-fill-on-export ids value)))))]
(st/emit! (dc/change-hide-fill-on-export ids (not value))))))]
(mf/use-layout-effect
(mf/deps hide-fill-on-export?)
#(let [checkbox (mf/ref-val checkbox-ref)]
(when checkbox
;; Note that the "indeterminate" attribute only may be set by code, not as a static attribute.
;; See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate
(if (= hide-fill-on-export? :multiple)
(dom/set-attribute checkbox "indeterminate" true)
(dom/remove-attribute checkbox "indeterminate")))))
(if show?
[:div.element-set
@ -95,11 +108,13 @@
:on-change on-change
:on-detach on-detach}]
(when (contains? values :show-fill-on-export?)
(when (or (= type :frame)
(and (= type :multiple) (some? hide-fill-on-export?)))
[:div.input-checkbox
[:input {:type "checkbox"
:id "show-fill-on-export"
:checked show-fill-on-export?
:ref checkbox-ref
:checked (not hide-fill-on-export?)
:on-change on-change-show-fill-on-export}]
[:label {:for "show-fill-on-export"}

6
frontend/src/app/util/import/parser.cljs
View file

@ -361,6 +361,7 @@
[props node svg-data]
(let [fill (:fill svg-data)
hide-fill-on-export (get-meta node :hide-fill-on-export str->bool)
gradient (when (str/starts-with? fill "url")
(parse-gradient node fill))]
(cond-> props
@ -375,7 +376,10 @@
(uc/hex? fill)
(assoc :fill-color fill
:fill-opacity (-> svg-data (:fill-opacity "1") d/parse-double)))))
:fill-opacity (-> svg-data (:fill-opacity "1") d/parse-double))
(some? hide-fill-on-export)
(assoc :hide-fill-on-export hide-fill-on-export))))
(defn add-stroke
[props node svg-data]