From 54be06ff1877580909d872ac5cf9f9c07f09712a Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 10 Aug 2020 11:48:41 +0200 Subject: [PATCH] :sparkles: Add the ability to remove the default fill from elements. --- backend/src/uxbox/http/session.clj | 2 + common/uxbox/common/pages.cljc | 6 +- .../ui/workspace/sidebar/options/fill.cljs | 95 ++++++++++++------- .../ui/workspace/sidebar/options/stroke.cljs | 19 ++-- 4 files changed, 79 insertions(+), 43 deletions(-) diff --git a/backend/src/uxbox/http/session.clj b/backend/src/uxbox/http/session.clj index f548725be..19fad6ab5 100644 --- a/backend/src/uxbox/http/session.clj +++ b/backend/src/uxbox/http/session.clj @@ -52,6 +52,8 @@ (handler (assoc request :profile-id profile-id)) (handler request))))) +;; TODO: maybe rename to wrap-session? + (def auth {:nane ::auth :compile (constantly wrap-auth)}) diff --git a/common/uxbox/common/pages.cljc b/common/uxbox/common/pages.cljc index b648a2f10..47e10b735 100644 --- a/common/uxbox/common/pages.cljc +++ b/common/uxbox/common/pages.cljc @@ -219,8 +219,10 @@ :name "root" :shapes []}}}) +(def default-color "#b1b2b5") ;; $color-gray-20 + (def default-shape-attrs - {:fill-color "#000000" + {:fill-color default-color :fill-opacity 1}) (def default-frame-attrs @@ -229,8 +231,6 @@ :fill-opacity 1 :shapes []}) -(def ^:private default-color "#b1b2b5") ;; $color-gray-20 - (def ^:private minimal-shapes [{:type :rect :name "Rect" diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs index 3b705428c..10c84234a 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs @@ -10,17 +10,19 @@ (ns uxbox.main.ui.workspace.sidebar.options.fill (:require [rumext.alpha :as mf] + [uxbox.common.pages :as cp] [uxbox.main.data.workspace.common :as dwc] [uxbox.main.data.workspace.texts :as dwt] - [uxbox.main.store :as st] [uxbox.main.refs :as refs] + [uxbox.main.store :as st] + [uxbox.main.ui.icons :as i] [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] - [uxbox.util.object :as obj] - [uxbox.util.i18n :as i18n :refer [tr t]])) + [uxbox.util.i18n :as i18n :refer [tr t]] + [uxbox.util.object :as obj])) (def fill-attrs [:fill-color :fill-opacity]) -(defn- fill-menu-memo-equals? +(defn- fill-menu-props-equals? [np op] (let [new-ids (obj/get np "ids") old-ids (obj/get op "ids") @@ -30,45 +32,72 @@ old-values (obj/get op "values")] (and (= new-ids old-ids) (= new-editor old-editor) - (identical? (:fill-color new-values) - (:fill-color old-values)) - (identical? (:fill-opacity new-values) - (:fill-opacity old-values))))) + (= (:fill-color new-values) + (:fill-color old-values)) + (= (:fill-opacity new-values) + (:fill-opacity old-values))))) (mf/defc fill-menu - {::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]} + {::mf/wrap [#(mf/memo' % fill-menu-props-equals?)]} [{:keys [ids type values editor] :as props}] - (let [locale (i18n/use-locale) - - shapes (deref (refs/objects-by-id ids)) - text-ids (map :id (filter #(= (:type %) :text) shapes)) + (let [locale (mf/deref i18n/locale) + shapes (deref (refs/objects-by-id ids)) + text-ids (map :id (filter #(= (:type %) :text) shapes)) other-ids (map :id (filter #(not= (:type %) :text) shapes)) + show? (not (nil? (:fill-color values))) label (case type :multiple (t locale "workspace.options.selection-fill") :group (t locale "workspace.options.group-fill") (t locale "workspace.options.fill")) + color {:value (:fill-color values) :opacity (:fill-opacity values)} - handle-change-color (fn [value opacity] - (let [change #(cond-> % - value (assoc :fill-color value) - opacity (assoc :fill-opacity opacity)) - converted-attrs (cond-> {} - value (assoc :fill value) - opacity (assoc :opacity opacity))] + on-add + (mf/use-callback + (mf/deps ids) + (fn [event] + (st/emit! (dwc/update-shapes ids #(assoc % :fill-color cp/default-color))))) + + + on-delete + (mf/use-callback + (mf/deps ids) + (fn [event] + (st/emit! (dwc/update-shapes ids #(dissoc % :fill-color))))) + + on-change + (mf/use-callback + (mf/deps ids) + (fn [value opacity] + (let [change #(cond-> % + value (assoc :fill-color value) + opacity (assoc :fill-opacity opacity)) + converted-attrs (cond-> {} + value (assoc :fill value) + opacity (assoc :opacity opacity))] + + (when-not (empty? other-ids) + (st/emit! (dwc/update-shapes ids change))) + (when-not (empty? text-ids) + (run! #(st/emit! (dwt/update-text-attrs + {:id % + :editor editor + :attrs converted-attrs})) + text-ids)))))] + (prn "fill-menu" ids values) + (if show? + [:div.element-set + [:div.element-set-title + [:span label] + [:div.add-page {:on-click on-delete} i/minus]] + + [:div.element-set-content + [:& color-row {:color color :on-change on-change}]]] + + [:div.element-set + [:div.element-set-title + [:span label] + [:div.add-page {:on-click on-add} i/close]]]))) - (when-not (empty? other-ids) - (st/emit! (dwc/update-shapes ids change))) - (when-not (empty? text-ids) - (run! #(st/emit! (dwt/update-text-attrs - {:id % - :editor editor - :attrs converted-attrs})) - text-ids))))] - [:div.element-set - [:div.element-set-title label] - [:div.element-set-content - [:& color-row {:color color - :on-change handle-change-color}]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs index 8d3d0854b..f9d093846 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs @@ -12,21 +12,26 @@ [cuerdas.core :as str] [rumext.alpha :as mf] [uxbox.common.data :as d] - [uxbox.main.ui.icons :as i] + [uxbox.common.math :as math] [uxbox.main.data.workspace.common :as dwc] [uxbox.main.store :as st] + [uxbox.main.ui.icons :as i] [uxbox.main.ui.modal :as modal] [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]] + [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [uxbox.util.data :refer [classnames]] [uxbox.util.dom :as dom] - [uxbox.util.object :as obj] [uxbox.util.i18n :as i18n :refer [tr t]] - [uxbox.common.math :as math] - [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]])) + [uxbox.util.object :as obj])) -(def stroke-attrs [:stroke-style :stroke-alignment :stroke-width :stroke-color :stroke-opacity]) +(def stroke-attrs + [:stroke-style + :stroke-alignment + :stroke-width + :stroke-color + :stroke-opacity]) -(defn- stroke-menu-memo-equals? +(defn- stroke-menu-props-equals? [np op] (let [new-ids (obj/get np "ids") old-ids (obj/get op "ids") @@ -57,7 +62,7 @@ (pr-str value))) (mf/defc stroke-menu - {::mf/wrap [#(mf/memo' % stroke-menu-memo-equals?)]} + {::mf/wrap [#(mf/memo' % stroke-menu-props-equals?)]} [{:keys [ids type values] :as props}] (let [locale (i18n/use-locale) label (case type