Merge pull request #445 from penpot/issue/848/detach-colors

Issue/848/detach colors

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;
+  }
 }
 

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]]))
 

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}]]]
 

frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs

@@ -37,67 +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 []
+          (when on-change
+            (on-change (-> grid
+                           (d/dissoc-in [:params :color :id])
+                           (d/dissoc-in [:params :color :file-id])))))
 
         handle-use-default
         (fn []
@@ -106,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
@@ -212,7 +218,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")]

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))

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

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}]
 

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

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)}