From c858707c39bc1b31cf1fe83a61d1adad58812e21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Tue, 11 May 2021 13:44:49 +0200 Subject: [PATCH] :tada: Group color assets --- common/app/common/pages/spec.cljc | 3 +- .../styles/main/partials/sidebar-assets.scss | 4 - .../app/main/data/workspace/libraries.cljs | 12 +- .../app/main/ui/workspace/sidebar/assets.cljs | 104 ++++++++++++++---- 4 files changed, 89 insertions(+), 34 deletions(-) diff --git a/common/app/common/pages/spec.cljc b/common/app/common/pages/spec.cljc index ffea43331..74e2dd383 100644 --- a/common/app/common/pages/spec.cljc +++ b/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?) diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss index bcae65e66..48a96138f 100644 --- a/frontend/resources/styles/main/partials/sidebar-assets.scss +++ b/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; diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index 67baf4330..f8d8c4726 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index fe111fa94..885025b1d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/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 [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 - :colors colors - :locale locale}]))])])) + (for [group groups] + (let [path (first group) + colors (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 [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