🎉 Group color assets

common/app/common/pages/spec.cljc

@@ -90,6 +90,7 @@
 ;;; COLORS
 
 (s/def :internal.color/name ::string)
+(s/def :internal.color/path (s/nilable ::string))
 (s/def :internal.color/value (s/nilable ::string))
 (s/def :internal.color/color (s/nilable ::string))
 (s/def :internal.color/opacity (s/nilable ::safe-number))
@@ -98,13 +99,13 @@
 (s/def ::color
   (s/keys :opt-un [::id
                    :internal.color/name
+                   :internal.color/path
                    :internal.color/value
                    :internal.color/color
                    :internal.color/opacity
                    :internal.color/gradient]))
 
 
-
 ;;; SHADOW EFFECT
 
 (s/def :internal.shadow/id uuid?)

frontend/resources/styles/main/partials/sidebar-assets.scss

@@ -371,10 +371,6 @@
     //   overflow-y: scroll;
     // }
 
-    .asset-list {
-      margin-top: $medium;
-    }
-
     .asset-list-item {
       display: flex;
       align-items: center;

frontend/src/app/main/data/workspace/libraries.cljs

@@ -93,7 +93,7 @@
                     :id id}]
           (rx/of #(assoc-in % [:workspace-local :color-for-rename] id)
                  (dch/commit-changes {:redo-changes [rchg]
-                                      :undo-chages [uchg]
+                                      :undo-changes [uchg]
                                       :origin it})))))))
 (defn add-recent-color
   [color]
@@ -104,7 +104,7 @@
       (let [rchg {:type :add-recent-color
                   :color color}]
         (rx/of (dch/commit-changes {:redo-changes [rchg]
-                                    :undo-chages []
+                                    :undo-changes []
                                     :origin it}))))))
 
 (def clear-color-for-rename
@@ -120,13 +120,15 @@
   (ptk/reify ::update-color
     ptk/WatchEvent
     (watch [it state stream]
-      (let [prev (get-in state [:workspace-data :colors id])
+      (let [[path name] (cp/parse-path-name (:name color))
+            color (assoc color :path path :name name)
+            prev (get-in state [:workspace-data :colors id])
             rchg {:type :mod-color
                   :color color}
             uchg {:type :mod-color
                   :color prev}]
         (rx/of (dch/commit-changes {:redo-changes [rchg]
-                                    :undo-chages [uchg]
+                                    :undo-changes [uchg]
                                     :origin it})
                (sync-file (:current-file-id state) file-id))))))
 
@@ -142,7 +144,7 @@
             uchg {:type :add-color
                   :color prev}]
         (rx/of (dch/commit-changes {:redo-changes [rchg]
-                                    :undo-chages [uchg]
+                                    :undo-changes [uchg]
                                     :origin it}))))))
 
 (defn add-media

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -499,7 +499,8 @@
 
 (mf/defc color-item
   [{:keys [color local? file-id selected-colors multi-colors? multi-assets?
-           on-asset-click on-assets-delete on-clear-selection colors locale] :as props}]
+           on-asset-click on-assets-delete on-clear-selection on-group
+           colors locale] :as props}]
   (let [rename?   (= (:color-for-rename @refs/workspace-local) (:id color))
         id        (:id color)
         input-ref (mf/use-ref)
@@ -623,17 +624,24 @@
                       [(t locale "workspace.assets.rename") rename-color-clicked])
                     (when-not (or multi-colors? multi-assets?)
                       [(t locale "workspace.assets.edit") edit-color-clicked])
-                    [(t locale "workspace.assets.delete") delete-color]]}])]))
+                    [(t locale "workspace.assets.delete") delete-color]
+                    (when-not multi-assets?
+                      [(tr "workspace.assets.group") on-group])]}])]))
 
 (mf/defc colors-box
   [{:keys [file-id local? colors locale open? selected-assets
            on-asset-click on-assets-delete on-clear-selection] :as props}]
-  (let [selected-colors     (:colors selected-assets)
+  (let [state (mf/use-state {:folded-groups empty-folded-groups})
+
+        selected-colors     (:colors selected-assets)
         multi-colors?       (> (count selected-colors) 1)
         multi-assets?       (or (not (empty? (:components selected-assets)))
                                 (not (empty? (:graphics selected-assets)))
                                 (not (empty? (:typographies selected-assets))))
 
+        groups        (group-assets colors)
+        folded-groups (:folded-groups @state)
+
         add-color
         (mf/use-callback
          (mf/deps file-id)
@@ -651,7 +659,39 @@
                          :on-accept add-color
                          :data {:color "#406280"
                                 :opacity 1}
-                         :position :right})))]
+                         :position :right})))
+
+        create-group
+        (mf/use-callback
+          (mf/deps colors selected-colors on-clear-selection file-id)
+          (fn [name]
+            (on-clear-selection)
+            (st/emit! (dwu/start-undo-transaction))
+            (apply st/emit!
+                   (->> colors
+                        (filter #(contains? selected-colors (:id %)))
+                        (map #(dwl/update-color
+                                (assoc % :name
+                                  (str name " / "
+                                       (cp/merge-path-item (:path %) (:name %))))
+                                file-id))))
+            (st/emit! (dwu/commit-undo-transaction))))
+
+        on-fold-group
+        (mf/use-callback
+          (mf/deps groups folded-groups)
+          (fn [path]
+            (fn [event]
+              (dom/stop-propagation event)
+              (swap! state update :folded-groups
+                     toggle-folded-group path))))
+
+        on-group
+        (mf/use-callback
+          (mf/deps colors selected-colors)
+          (fn [event]
+            (dom/stop-propagation event)
+            (modal/show! :create-group-dialog {:create create-group})))]
 
     [:div.asset-section
      [:div.asset-title {:class (when (not open?) "closed")}
@@ -661,24 +701,41 @@
       (when local?
         [:div.assets-button {:on-click add-color-clicked} i/plus])]
      (when open?
-       [:div.asset-list
+       (for [group groups]
-        (for [color colors]
+         (let [path        (first group)
-          (let [color (cond-> color
+               colors      (second group)
-                        (:value color) (assoc :color (:value color) :opacity 1)
+               group-open? (not (contains? folded-groups path))]
-                        (:value color) (dissoc :value)
+           [:*
-                        true (assoc :file-id file-id))]
+            (when-not (empty? path)
-            [:& color-item {:key (:id color)
+              (let [[other-path last-path truncated] (cp/compact-path path 35)]
-                            :color color
+                [:div.group-title {:class (when-not group-open? "closed")
-                            :file-id file-id
+                                   :on-click (on-fold-group path)}
-                            :local? local?
+                 [:span i/arrow-slide]
-                            :selected-colors selected-colors
+                 (when-not (empty? other-path)
-                            :multi-colors? multi-colors?
+                   [:span.dim {:title (when truncated path)}
-                            :multi-assets? multi-assets?
+                    other-path "\u00A0/\u00A0"])
-                            :on-asset-click on-asset-click
+                 [:span {:title (when truncated path)}
-                            :on-assets-delete on-assets-delete
+                  last-path]]))
-                            :on-clear-selection on-clear-selection
+            (when group-open?
-                            :colors colors
+              [:div.asset-list
-                            :locale locale}]))])]))
+               (for [color colors]
+                 (let [color (cond-> color
+                               (:value color) (assoc :color (:value color) :opacity 1)
+                               (:value color) (dissoc :value)
+                               true (assoc :file-id file-id))]
+                   [:& color-item {:key (:id color)
+                                   :color color
+                                   :file-id file-id
+                                   :local? local?
+                                   :selected-colors selected-colors
+                                   :multi-colors? multi-colors?
+                                   :multi-assets? multi-assets?
+                                   :on-asset-click on-asset-click
+                                   :on-assets-delete on-assets-delete
+                                   :on-clear-selection on-clear-selection
+                                   :on-group on-group
+                                   :colors colors
+                                   :locale locale}]))])])))]))
 
 
 ;; ---- Typography box ----
@@ -817,7 +874,6 @@
                    (vals (get-in state [:workspace-libraries id :data :colors])))))
              st/state =))
 
-
 (defn file-media-ref
   [id]
   (l/derived (fn [state]
@@ -860,7 +916,7 @@
          (sort-by #(str/lower (:name %)) comp-fn))))
 
 (mf/defc file-library
-  [{:keys [file local?  default-open? filters locale] :as props}]
+  [{:keys [file local? default-open? filters locale] :as props}]
   (let [open-file       (mf/deref (open-file-ref (:id file)))
         open?           (-> open-file
                             :library