diff --git a/common/src/app/common/pages/common.cljc b/common/src/app/common/pages/common.cljc index 41e1e9e3a..6356f4bbe 100644 --- a/common/src/app/common/pages/common.cljc +++ b/common/src/app/common/pages/common.cljc @@ -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 diff --git a/common/src/app/common/pages/init.cljc b/common/src/app/common/pages/init.cljc index 0a5713cc3..8e3b5bb92 100644 --- a/common/src/app/common/pages/init.cljc +++ b/common/src/app/common/pages/init.cljc @@ -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 diff --git a/common/src/app/common/pages/spec.cljc b/common/src/app/common/pages/spec.cljc index 0a426ef60..cc74339ed 100644 --- a/common/src/app/common/pages/spec.cljc +++ b/common/src/app/common/pages/spec.cljc @@ -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 diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 5d0fe7387..37e5c275e 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -724,6 +724,15 @@ input[type="radio"]:checked + label:before { } } + input[type="checkbox"][indeterminate] { + & + label { + &::after { + content: "?"; + left: 4px; + } + } + } + &.right { label { margin-right: 35px; diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index e2aaa734d..017cc967d 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -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] diff --git a/frontend/src/app/main/ui/render.cljs b/frontend/src/app/main/ui/render.cljs index db8802a25..2ce3ddf24 100644 --- a/frontend/src/app/main/ui/render.cljs +++ b/frontend/src/app/main/ui/render.cljs @@ -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))) diff --git a/frontend/src/app/main/ui/shapes/export.cljs b/frontend/src/app/main/ui/shapes/export.cljs index 0e1b0efde..052dce5ab 100644 --- a/frontend/src/app/main/ui/shapes/export.cljs +++ b/frontend/src/app/main/ui/shapes/export.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 3d26b8daa..4de4cb4e9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -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"} diff --git a/frontend/src/app/util/import/parser.cljs b/frontend/src/app/util/import/parser.cljs index f17b7f915..4f1431b48 100644 --- a/frontend/src/app/util/import/parser.cljs +++ b/frontend/src/app/util/import/parser.cljs @@ -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]