From ddbaee228a0bb8cc57a77708bc79cf40a3de06cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Tue, 11 May 2021 16:22:42 +0200 Subject: [PATCH] :tada: Group typographies --- common/app/common/pages/spec.cljc | 4 +- .../app/main/data/workspace/libraries.cljs | 4 +- .../app/main/ui/workspace/sidebar/assets.cljs | 92 +++++++++++++++---- .../sidebar/options/menus/typography.cljs | 12 ++- 4 files changed, 89 insertions(+), 23 deletions(-) diff --git a/common/app/common/pages/spec.cljc b/common/app/common/pages/spec.cljc index 74e2dd383..24c523fd0 100644 --- a/common/app/common/pages/spec.cljc +++ b/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?)) diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index f8d8c4726..5e076b766 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 885025b1d..de210b422 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/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))) - (not (empty? (:colors selected-assets))) - (not (empty? (:typographies selected-assets)))) + multi-assets? (or (not (empty? (:components selected-assets))) + (not (empty? (:graphics 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 [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))}])])])) + (for [group groups] + (let [path (first group) + typographies (second group) + group-open? (not (contains? folded-groups path))] + [:* + (when-not (empty? path) + (let [[other-path last-path truncated] (cp/compact-path path 35)] + [:div.group-title {:class (when-not group-open? "closed") + :on-click (on-fold-group path)} + [:span i/arrow-slide] + (when-not (empty? other-path) + [:span.dim {:title (when truncated path)} + other-path "\u00A0/\u00A0"]) + [: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 ---- diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 14e715e87..a34d102fe 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/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) - :on-change #(on-change {:name (dom/get-target-val %)})}]]] + :value @value + :on-change handle-change + :on-blur #(on-change {:name @value})}]]] [:& typography-options {:values typography :on-change on-change}]])]]))