From b9e4861f16ce356972d755c417a2b539340de732 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Thu, 7 Jan 2021 12:00:44 +0100 Subject: [PATCH 1/2] :bug: Allow to detach color styles --- .../styles/main/partials/colorpicker.scss | 7 ++++ .../ui/workspace/sidebar/options/blur.cljs | 1 - .../ui/workspace/sidebar/options/fill.cljs | 39 +++++++++++-------- .../workspace/sidebar/options/frame_grid.cljs | 10 ++++- .../sidebar/options/rows/color_row.cljs | 15 +++++-- .../ui/workspace/sidebar/options/shadow.cljs | 14 ++++++- .../ui/workspace/sidebar/options/stroke.cljs | 13 +++++-- .../ui/workspace/sidebar/options/text.cljs | 6 +-- .../workspace/sidebar/options/typography.cljs | 14 +++---- 9 files changed, 83 insertions(+), 36 deletions(-) diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index dd88e6b85..115ee933e 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/frontend/resources/styles/main/partials/colorpicker.scss @@ -488,6 +488,8 @@ } .color-info { + flex: 1 1 0; + input { background-color: $color-gray-50; border: 1px solid $color-gray-30; @@ -526,5 +528,10 @@ .number { color: $color-gray-60; } + + .element-set-actions-button svg { + width: 10px; + height: 10px; + } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/blur.cljs index dd1a8b313..58566a00c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/blur.cljs @@ -17,7 +17,6 @@ [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] - [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [t]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs index 016dc9652..7ced7afb9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs @@ -60,34 +60,40 @@ on-add (mf/use-callback - (mf/deps ids) - (fn [event] - (st/emit! (dc/change-fill ids {:color cp/default-color - :opacity 1})))) + (mf/deps ids) + (fn [event] + (st/emit! (dc/change-fill ids {:color cp/default-color + :opacity 1})))) on-delete (mf/use-callback - (mf/deps ids) - (fn [event] - (st/emit! (dc/change-fill ids nil)))) + (mf/deps ids) + (fn [event] + (st/emit! (dc/change-fill ids nil)))) on-change (mf/use-callback - (mf/deps ids) - (fn [color] - (st/emit! (dc/change-fill ids color)))) + (mf/deps ids) + (fn [color] + (st/emit! (dc/change-fill ids color)))) + + on-detach + (mf/use-callback + (mf/deps ids) + (fn [] + (st/emit! (dc/change-fill ids (dissoc color :id :file-id))))) on-open-picker (mf/use-callback - (mf/deps ids) - (fn [value opacity id file-id] - (st/emit! (dwc/start-undo-transaction)))) + (mf/deps ids) + (fn [value opacity id file-id] + (st/emit! (dwc/start-undo-transaction)))) on-close-picker (mf/use-callback - (mf/deps ids) - (fn [value opacity id file-id] - (st/emit! (dwc/commit-undo-transaction))))] + (mf/deps ids) + (fn [value opacity id file-id] + (st/emit! (dwc/commit-undo-transaction))))] (if show? [:div.element-set @@ -98,6 +104,7 @@ [:div.element-set-content [:& color-row {:color color :on-change on-change + :on-detach on-detach :on-open on-open-picker :on-close on-close-picker}]]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs index cc0e88175..408dfe3df 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs @@ -99,6 +99,13 @@ (fn [color] (emit-changes! #(-> % (assoc-in [:params :color] color)))) + handle-detach-color + (fn [] + (emit-changes! #(-> % (assoc-in [:params :color] + (-> (:color params) + (assoc :id nil) + (assoc :file-id nil)))))) + handle-use-default (fn [] (let [params ((:type grid) default-grid-params) @@ -212,7 +219,8 @@ [:& color-row {:color (:color params) :disable-gradient true - :on-change handle-change-color}] + :on-change handle-change-color + :on-detach handle-detach-color}] [:div.row-flex [:button.btn-options {:disabled is-default :on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 58a378da5..473ae5377 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -21,6 +21,7 @@ [app.main.refs :as refs] [app.main.data.modal :as modal] [app.main.ui.hooks :as h] + [app.main.ui.icons :as i] [app.main.ui.context :as ctx] [app.main.ui.components.color-bullet :as cb] [app.main.ui.components.numeric-input :refer [numeric-input]])) @@ -59,10 +60,11 @@ (if (= v :multiple) nil v)) (mf/defc color-row - [{:keys [color disable-gradient disable-opacity on-change on-open on-close]}] + [{:keys [color disable-gradient disable-opacity on-change on-detach on-open on-close]}] (let [current-file-id (mf/use-ctx ctx/current-file-id) file-colors (mf/deref refs/workspace-file-colors) shared-libs (mf/deref refs/workspace-libraries) + hover-detach (mf/use-state false) get-color-name (fn [{:keys [id file-id]}] (let [src-colors (if (= file-id current-file-id) @@ -132,8 +134,15 @@ (cond ;; Rendering a color with ID (:id color) - [:div.color-info - [:div.color-name (str (get-color-name color))]] + [:* + [:div.color-info + [:div.color-name (str (get-color-name color))]] + (when on-detach + [:div.element-set-actions-button + {:on-mouse-enter #(reset! hover-detach true) + :on-mouse-leave #(reset! hover-detach false) + :on-click on-detach} + (if @hover-detach i/unchain i/chain)])] ;; Rendering a gradient (and (not (uc/multiple? color)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs index 4525a4c90..ededae846 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs @@ -74,7 +74,7 @@ (when (or (not valid?) (valid? value)) (do (st/emit! (dwc/update-shapes ids #(assoc-in % [:shadow index attr] value))) (when update-ref (dom/set-value! (mf/ref-val update-ref) value))))))) - + update-color (fn [index] (fn [color opacity] @@ -84,6 +84,15 @@ (assoc-in [:shadow index :color] color) (assoc-in [:shadow index :opacity] opacity)))))) + detach-color + (fn [index] + (fn [color opacity] + (if-not (string? (:color value)) + (st/emit! (dwc/update-shapes + ids + #(assoc-in % [:shadow index :color] + (dissoc (:color value) :id :file-id))))))) + toggle-visibility (fn [index] (fn [] @@ -125,7 +134,7 @@ (st/emit! (dwc/update-shapes ids #(assoc-in % [:shadow index :style] value)))))} [:option {:value ":drop-shadow"} (t locale "workspace.options.shadow-options.drop-shadow")] [:option {:value ":inner-shadow"} (t locale "workspace.options.shadow-options.inner-shadow")]]] - + [:div.row-grid-2 [:div.input-element [:> numeric-input {:ref adv-offset-x-ref @@ -173,6 +182,7 @@ (:color value)) :disable-gradient true :on-change (update-color index) + :on-detach (detach-color index) :on-open #(st/emit! (dwc/start-undo-transaction)) :on-close #(st/emit! (dwc/commit-undo-transaction))}]]]])) (mf/defc shadow-menu diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs index 12903f28f..740e491da 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs @@ -73,9 +73,15 @@ handle-change-stroke-color (mf/use-callback - (mf/deps ids) - (fn [color] - (st/emit! (dc/change-stroke ids color)))) + (mf/deps ids) + (fn [color] + (st/emit! (dc/change-stroke ids color)))) + + handle-detach + (mf/use-callback + (mf/deps ids) + (fn [] + (st/emit! (dc/change-stroke ids (dissoc current-stroke-color :id :file-id))))) on-stroke-style-change (fn [event] @@ -134,6 +140,7 @@ ;; Stroke Color [:& color-row {:color current-stroke-color :on-change handle-change-stroke-color + :on-detach handle-detach :on-open on-open-picker :on-close on-close-picker}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs index d4730192b..dab2ff829 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs @@ -225,7 +225,7 @@ (run! #(emit-update! % {:typography-ref-id id :typography-ref-file current-file-id}) ids))))) - handle-deattach-typography + handle-detach-typography (fn [] (run! #(emit-update! % {:typography-ref-file nil :typography-ref-id nil}) @@ -253,13 +253,13 @@ [:& typography-entry {:typography typography :read-only? (not= (:typography-ref-file values) current-file-id) :file (get shared-libs (:typography-ref-file values)) - :on-deattach handle-deattach-typography + :on-detach handle-detach-typography :on-change handle-change-typography}] (= (:typography-ref-id values) :multiple) [:div.multiple-typography [:div.multiple-typography-text (t locale "workspace.libraries.text.multiple-typography")] - [:div.multiple-typography-button {:on-click handle-deattach-typography + [:div.multiple-typography-button {:on-click handle-detach-typography :title (t locale "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]] :else diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs index 5af24e253..a9ec6087f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs @@ -210,11 +210,11 @@ (mf/defc typography-entry - [{:keys [typography read-only? on-select on-change on-deattach on-context-menu editting? focus-name? file]}] + [{:keys [typography read-only? on-select on-change on-detach on-context-menu editting? focus-name? file]}] (let [locale (mf/deref i18n/locale) open? (mf/use-state editting?) selected (mf/deref refs/selected-shapes) - hover-deattach (mf/use-state false) + hover-detach (mf/use-state false) name-input-ref (mf/use-ref nil) #_(rt/resolve router :workspace @@ -254,12 +254,12 @@ (t locale "workspace.assets.typography.sample")] [:div.typography-name (:name typography)]] [:div.element-set-actions - (when on-deattach + (when on-detach [:div.element-set-actions-button - {:on-mouse-enter #(reset! hover-deattach true) - :on-mouse-leave #(reset! hover-deattach false) - :on-click on-deattach} - (if @hover-deattach i/unchain i/chain)]) + {:on-mouse-enter #(reset! hover-detach true) + :on-mouse-leave #(reset! hover-detach false) + :on-click on-detach} + (if @hover-detach i/unchain i/chain)]) [:div.element-set-actions-button {:on-click #(reset! open? true)} From f75ec43b7135da64544a61fd1b48470c2f61c422 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Fri, 8 Jan 2021 11:24:12 +0100 Subject: [PATCH 2/2] :recycle: Refactor frame grid options --- .../workspace/sidebar/options/frame_grid.cljs | 75 +++++++++---------- 1 file changed, 37 insertions(+), 38 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs index 408dfe3df..ac2a76463 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs @@ -37,74 +37,72 @@ :separator 18 12 10 8 6 4 3 2]) -(mf/defc grid-options [{:keys [frame grid default-grid-params on-change on-remove on-save-grid]}] +(mf/defc grid-options + [{:keys [grid frame default-grid-params on-change on-remove on-save-grid]}] (let [locale (i18n/use-locale) size-options (get-size-options locale) - state (mf/use-state {:show-advanced-options false - :changes {}}) - {:keys [type display params] :as grid} (d/deep-merge grid (:changes @state)) + state (mf/use-state {:show-advanced-options false}) + {:keys [type display params]} grid - toggle-advanced-options #(swap! state update :show-advanced-options not) - - emit-changes! - (fn [update-fn] - (swap! state update :changes update-fn) - (when on-change (on-change (d/deep-merge grid (-> @state :changes update-fn))))) + toggle-advanced-options + #(swap! state update :show-advanced-options not) handle-toggle-visibility (fn [event] - (emit-changes! (fn [changes] (update changes :display #(if (nil? %) false (not %)))))) + (when on-change + (on-change (update grid :display #(if (nil? %) false (not %)))))) handle-remove-grid (fn [event] (when on-remove (on-remove))) handle-change-type - (fn [type] - (let [defaults (type default-grid-params) - keys (keys defaults) - current-changes (-> @state :changes :params (select-keys keys)) - ;; We give more priority to the current changes - params (merge defaults current-changes) - to-merge {:type type :params params}] - (emit-changes! #(d/deep-merge % to-merge)))) + (fn [grid-type] + (let [defaults (grid-type default-grid-params)] + (when on-change + (on-change (assoc grid + :type grid-type + :params defaults))))) handle-change (fn [& keys] (fn [value] - (emit-changes! #(assoc-in % keys value)))) + (when on-change + (on-change (assoc-in grid keys value))))) handle-change-size (fn [size] - (let [grid (d/deep-merge grid (:changes @state)) - {:keys [margin gutter item-length]} (:params grid) + (let [{:keys [margin gutter item-length]} (:params grid) frame-length (if (= :column (:type grid)) (:width frame) (:height frame)) item-length (if (or (nil? size) (= :auto size)) (-> (gg/calculate-default-item-length frame-length margin gutter) (mth/precision 2)) item-length)] - (emit-changes! #(-> % - (assoc-in [:params :size] size) - (assoc-in [:params :item-length] item-length))))) + (when on-change + (on-change (-> grid + (assoc-in [:params :size] size) + (assoc-in [:params :item-length] item-length)))))) handle-change-item-length (fn [item-length] - (let [{:keys [margin gutter size]} (->> @state :changes :params (d/deep-merge (:params grid))) + (let [{:keys [margin gutter size]} (:params grid) size (if (and (nil? item-length) (or (nil? size) (= :auto size))) 12 size)] - (emit-changes! #(-> % - (assoc-in [:params :size] size) - (assoc-in [:params :item-length] item-length))))) + (when on-change + (on-change (-> grid + (assoc-in [:params :size] size) + (assoc-in [:params :item-length] item-length)))))) handle-change-color (fn [color] - (emit-changes! #(-> % (assoc-in [:params :color] color)))) + (when on-change + (on-change (assoc-in grid [:params :color] color)))) handle-detach-color (fn [] - (emit-changes! #(-> % (assoc-in [:params :color] - (-> (:color params) - (assoc :id nil) - (assoc :file-id nil)))))) + (when on-change + (on-change (-> grid + (d/dissoc-in [:params :color :id]) + (d/dissoc-in [:params :color :file-id]))))) handle-use-default (fn [] @@ -113,14 +111,15 @@ params (-> params (assoc-in [:color :color] color) (update :color dissoc :value))] - (emit-changes! #(hash-map :params params)))) + (when on-change + (on-change (assoc grid :params params))))) handle-set-as-default (fn [] - (let [current-grid (d/deep-merge grid (-> @state :changes))] - (on-save-grid current-grid))) + (when on-save-grid + (on-save-grid grid))) - is-default (= (->> @state :changes (d/deep-merge grid) :params) + is-default (= (->> grid :params) (->> grid :type default-grid-params))] [:div.grid-option