diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index dd88e6b85e..115ee933e0 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 dd1a8b3130..58566a00c5 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 016dc9652c..7ced7afb97 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 cc0e881755..408dfe3df4 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 58a378da57..473ae5377d 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 4525a4c909..ededae846d 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 12903f28f0..740e491dae 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 d4730192b9..dab2ff829a 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 5af24e2539..a9ec6087ff 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)}