🎉 Group typographies

common/app/common/pages/spec.cljc

@@ -381,6 +381,7 @@
 
 (s/def :internal.typography/id ::id)
 (s/def :internal.typography/name ::string)
+(s/def :internal.typography/path (s/nilable ::string))
 (s/def :internal.typography/font-id ::string)
 (s/def :internal.typography/font-family ::string)
 (s/def :internal.typography/font-variant-id ::string)
@@ -402,7 +403,8 @@
                    :internal.typography/font-style
                    :internal.typography/line-height
                    :internal.typography/letter-spacing
-                   :internal.typography/text-transform]))
+                   :internal.typography/text-transform]
+          :opt-un [:internal.typography/path]))
 
 (s/def :internal.file/pages
   (s/coll-of ::uuid :kind vector?))

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

@@ -227,7 +227,9 @@
   (ptk/reify ::update-typography
     ptk/WatchEvent
     (watch [it state stream]
-      (let [prev (get-in state [:workspace-data :typographies (:id typography)])
+      (let [[path name] (cp/parse-path-name (:name typography))
+            typography (assoc typography :path path :name name)
+            prev (get-in state [:workspace-data :typographies (:id typography)])
             rchg {:type :mod-typography
                   :typography typography}
             uchg {:type :mod-typography

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

@@ -747,15 +747,19 @@
                              :menu-open? false
                              :top nil
                              :left nil
-                             :id nil})
+                             :id nil
+                             :folded-groups empty-folded-groups})
 
         local    (deref refs/workspace-local)
 
+        groups        (group-assets typographies)
+        folded-groups (:folded-groups @state)
+
         selected-typographies (:typographies selected-assets)
         multi-typographies?   (> (count selected-typographies) 1)
-        multi-assets?         (or (not (empty? (:graphics selected-assets)))
+        multi-assets?         (or (not (empty? (:components selected-assets)))
-                                  (not (empty? (:colors selected-assets)))
+                                  (not (empty? (:graphics selected-assets)))
-                                  (not (empty? (:typographies selected-assets))))
+                                  (not (empty? (:colors selected-assets))))
 
         add-typography
         (mf/use-callback
@@ -779,6 +783,38 @@
             (run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs}))
                   ids)))
 
+        create-group
+        (mf/use-callback
+          (mf/deps typographies selected-typographies on-clear-selection file-id)
+          (fn [name]
+            (on-clear-selection)
+            (st/emit! (dwu/start-undo-transaction))
+            (apply st/emit!
+                   (->> typographies
+                        (filter #(contains? selected-typographies (:id %)))
+                        (map #(dwl/update-typography
+                                (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 typographies selected-typographies)
+          (fn [event]
+            (dom/stop-propagation event)
+            (modal/show! :create-group-dialog {:create create-group})))
+
         on-context-menu
         (mf/use-callback
           (mf/deps selected-typographies on-clear-selection)
@@ -845,22 +881,40 @@
                    [(t locale "workspace.assets.rename") handle-rename-typography-clicked])
                  (when-not (or multi-typographies? multi-assets?)
                    [(t locale "workspace.assets.edit") handle-edit-typography-clicked])
-                 [(t locale "workspace.assets.delete") handle-delete-typography]]}]
+                 [(t locale "workspace.assets.delete") handle-delete-typography]
+                 (when-not multi-assets?
+                   [(tr "workspace.assets.group") on-group])]}]
      (when open?
-       [:div.asset-list
+       (for [group groups]
-        (for [typography typographies]
+         (let [path         (first group)
-          [:& typography-entry
+               typographies (second group)
-           {:key (:id typography)
+               group-open?  (not (contains? folded-groups path))]
-            :typography typography
+           [:*
-            :file file
+            (when-not (empty? path)
-            :read-only? (not local?)
+              (let [[other-path last-path truncated] (cp/compact-path path 35)]
-            :on-context-menu #(on-context-menu (:id typography) %)
+                [:div.group-title {:class (when-not group-open? "closed")
-            :on-change #(handle-change typography %)
+                                   :on-click (on-fold-group path)}
-            :selected? (contains? selected-typographies (:id typography))
+                 [:span i/arrow-slide]
-            :on-click  #(on-asset-click % (:id typography) {"" typographies}
+                 (when-not (empty? other-path)
-                                        (partial apply-typography typography))
+                   [:span.dim {:title (when truncated path)}
-            :editting? (= editting-id (:id typography))
+                    other-path "\u00A0/\u00A0"])
-            :focus-name? (= (:rename-typography local) (:id typography))}])])]))
+                 [:span {:title (when truncated path)}
+                  last-path]]))
+            (when group-open?
+              [:div.asset-list
+               (for [typography typographies]
+                 [:& typography-entry
+                  {:key (:id typography)
+                   :typography typography
+                   :file file
+                   :read-only? (not local?)
+                   :on-context-menu #(on-context-menu (:id typography) %)
+                   :on-change #(handle-change typography %)
+                   :selected? (contains? selected-typographies (:id typography))
+                   :on-click  #(on-asset-click % (:id typography) {"" typographies}
+                                               (partial apply-typography typography))
+                   :editting? (= editting-id (:id typography))
+                   :focus-name? (= (:rename-typography local) (:id typography))}])])])))]))
 
 
 ;; --- Assets toolbox ----

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.menus.typography
   (:require
    [app.common.data :as d]
+   [app.common.pages :as cp]
    [app.common.text :as txt]
    [app.main.data.workspace.texts :as dwt]
    [app.main.fonts :as fonts]
@@ -212,11 +213,17 @@
         open? (mf/use-state editting?)
         hover-detach (mf/use-state false)
         name-input-ref (mf/use-ref nil)
+        value (mf/use-state (cp/merge-path-item (:path typography) (:name typography)))
 
         #_(rt/resolve router :workspace
                       {:project-id (:project-id file)
                        :file-id (:id file)}
                       {:page-id (get-in file [:data :pages 0])})
+
+        handle-change
+        (fn [event]
+          (reset! value (dom/get-target-val event)))
+
         handle-go-to-edit
         (fn [] (st/emit! (rt/nav :workspace {:project-id (:project-id file)
                                              :file-id (:id file)}
@@ -303,7 +310,8 @@
            [:input.element-name.adv-typography-name
             {:type "text"
              :ref name-input-ref
-             :value (:name typography)
+             :value @value
-             :on-change #(on-change {:name (dom/get-target-val %)})}]]]
+             :on-change handle-change
+             :on-blur #(on-change {:name @value})}]]]
          [:& typography-options {:values typography
                                  :on-change on-change}]])]]))