From 5a0ec9525bce6b39d40ff71cebdb02c695a023b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Thu, 18 Aug 2022 17:18:06 +0200 Subject: [PATCH 1/4] :tada: Add new dashboard libraries screen --- backend/src/app/rpc/queries/files.clj | 24 ++++- .../styles/main/partials/dashboard-grid.scss | 90 +++++++++++++++- frontend/src/app/main/ui/dashboard/grid.cljs | 100 ++++++++++++++++-- .../src/app/main/ui/dashboard/libraries.cljs | 3 +- 4 files changed, 204 insertions(+), 13 deletions(-) diff --git a/backend/src/app/rpc/queries/files.clj b/backend/src/app/rpc/queries/files.clj index 838f35d31..43b92b251 100644 --- a/backend/src/app/rpc/queries/files.clj +++ b/backend/src/app/rpc/queries/files.clj @@ -402,6 +402,7 @@ (def ^:private sql:team-shared-files "select f.id, f.revn, + f.data, f.project_id, f.created_at, f.modified_at, @@ -420,7 +421,28 @@ (sv/defmethod ::team-shared-files [{:keys [pool] :as cfg} {:keys [team-id] :as params}] - (db/exec! pool [sql:team-shared-files team-id])) + (let [assets-sample + (fn [assets limit] + (let [sorted-assets (->> assets + (vals) + (vec) + (sort-by #(str/lower (:name %))))] + + {:count (count sorted-assets) + :sample (take limit sorted-assets)})) + + library-summary + (fn [data] + {:components (assets-sample (:components data) 4) + :colors (assets-sample (:colors data) 3) + :typographies (assets-sample (:typographies data) 3)}) + + xform (comp + (map decode-row) + (map #(assoc % :library-summary (library-summary (:data %)))) + (map #(dissoc % :data)))] + + (into #{} xform (db/exec! pool [sql:team-shared-files team-id])))) ;; --- Query: File Libraries used by a File diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index 939f800ec..4325d3f7f 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -296,11 +296,6 @@ } } - // STYLES FOR LIBRARIES - &.library { - padding: $size-4; - } - .grid-item-th { background-position: center; background-size: auto 80%; @@ -332,6 +327,91 @@ fill: $color-gray-20; } } + + // LIBRARY VIEW + .grid-item { + &.project-th.library { + height: 610px; + width: 300px; + } + + .grid-item-th.library { + background-color: $color-gray-50; + flex-direction: column; + height: 90%; + justify-content: start; + max-height: 550px; + padding: $size-6; + + .asset-section { + font-size: $fs12; + color: $color-gray-20; + + &:not(:first-child) { + margin-top: $size-4; + } + } + + .asset-title { + display: flex; + font-size: $fs12; + text-transform: uppercase; + + & .num-assets { + color: $color-gray-30; + } + } + + .asset-list-item { + display: flex; + align-items: center; + border: 1px solid transparent; + border-radius: $br-small; + margin-top: $size-1; + padding: 2px; + font-size: $fs12; + color: $color-white; + position: relative; + + & .name-block { + color: $color-gray-20; + width: calc(100% - 24px - #{$size-2}); + } + + & .item-name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; + } + + & svg { + background-color: $color-canvas; + border-radius: 4px; + border: 2px solid transparent; + height: 24px; + width: 24px; + margin-right: $size-2; + } + + & .color-name { + color: $color-white; + } + + & .color-value { + margin-left: $size-1; + color: $color-gray-30; + text-transform: uppercase; + } + + & .typography-sample { + height: 20px; + margin-right: $size-1; + width: 20px; + } + } + } + } } .grid-empty-placeholder { diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index e96579525..34fc126d2 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -12,7 +12,9 @@ [app.main.features :as features] [app.main.fonts :as fonts] [app.main.refs :as refs] + [app.main.render :refer [component-svg]] [app.main.store :as st] + [app.main.ui.components.color-bullet :as bc] [app.main.ui.dashboard.file-menu :refer [file-menu]] [app.main.ui.dashboard.import :refer [use-import-file]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]] @@ -56,6 +58,88 @@ :ref container} i/loader-pencil])) +;; --- Grid Item Library + +(mf/defc grid-item-library + {::mf/wrap [mf/memo]} + [{:keys [file] :as props}] + + (mf/with-effect [file] + (when file + (let [font-ids (map :font-id (get-in file [:library-summary :typographies :sample] []))] + (run! fonts/ensure-loaded! font-ids)))) + + [:div.grid-item-th.library + (if (nil? file) + i/loader-pencil + (let [summary (:library-summary file) + components (:components summary) + colors (:colors summary) + typographies (:typographies summary)] + [:* + + (when (> (:count components) 0) + [:div.asset-section + [:div.asset-title + [:span (tr "workspace.assets.components")] + [:span.num-assets (str "\u00A0(") (:count components) ")"]] ;; Unicode 00A0 is non-breaking space + [:div.asset-list + (for [component (:sample components)] + [:div.asset-list-item + [:& component-svg {:group (get-in component [:objects (:id component)]) + :objects (:objects component)}] + [:div.name-block + [:span.item-name {:title (:name component)} + (:name component)]]]) + (when (> (:count components) (count (:sample components))) + [:div.asset-list-item + [:div.name-block + [:span.item-name "(...)"]]])]]) + + (when (> (:count colors) 0) + [:div.asset-section + [:div.asset-title + [:span (tr "workspace.assets.colors")] + [:span.num-assets (str "\u00A0(") (:count colors) ")"]] ;; Unicode 00A0 is non-breaking space + [:div.asset-list + (for [color (:sample colors)] + (let [default-name (cond + (:gradient color) (bc/gradient-type->string (get-in color [:gradient :type])) + (:color color) (:color color) + :else (:value color))] + [:div.asset-list-item + [:& bc/color-bullet {:color {:color (:color color) + :opacity (:opacity color)}}] + [:div.name-block + [:span.color-name (:name color)] + (when-not (= (:name color) default-name) + [:span.color-value (:color color)])]])) + (when (> (:count colors) (count (:sample colors))) + [:div.asset-list-item + [:div.name-block + [:span.item-name "(...)"]]])]]) + + (when (> (:count typographies) 0) + [:div.asset-section + [:div.asset-title + [:span (tr "workspace.assets.typography")] + [:span.num-assets (str "\u00A0(") (:count typographies) ")"]] ;; Unicode 00A0 is non-breaking space + [:div.asset-list + (for [typography (:sample typographies)] + [:div.asset-list-item + [:div.typography-sample + {:style {:font-family (:font-family typography) + :font-weight (:font-weight typography) + :font-style (:font-style typography)}} + (tr "workspace.assets.typography.sample")] + [:div.name-block + [:span.item-name {:title (:name typography)} + (:name typography)]]]) + (when (> (:count typographies) (count (:sample typographies))) + [:div.asset-list-item + [:div.name-block + [:span.item-name "(...)"]]])]])]))]) + ;; --- Grid Item (mf/defc grid-item-metadata @@ -74,7 +158,7 @@ (mf/defc grid-item {:wrap [mf/memo]} - [{:keys [file navigate? origin] :as props}] + [{:keys [file navigate? origin library-view?] :as props}] (let [file-id (:id file) local (mf/use-state {:menu-open false :menu-pos nil @@ -174,7 +258,8 @@ (swap! local assoc :menu-open false)))) [:div.grid-item.project-th - {:class (dom/classnames :selected selected?) + {:class (dom/classnames :selected selected? + :library library-view?) :ref item-ref :draggable true :on-click on-select @@ -183,8 +268,10 @@ :on-context-menu on-menu-click} [:div.overlay] - [:& grid-item-thumbnail {:file file}] - (when (:is-shared file) + (if library-view? + [:& grid-item-library {:file file}] + [:& grid-item-thumbnail {:file file}]) + (when (and (:is-shared file) (not library-view?)) [:div.item-badge i/library]) [:div.item-info (if (:edition @local) @@ -210,7 +297,7 @@ :dashboard-local dashboard-local}])]]])) (mf/defc grid - [{:keys [files project on-create-clicked origin limit] :as props}] + [{:keys [files project on-create-clicked origin limit library-view?] :as props}] (let [dragging? (mf/use-state false) project-id (:id project) @@ -272,7 +359,8 @@ {:file item :key (:id item) :navigate? true - :origin origin}])] + :origin origin + :library-view? library-view?}])] :else [:& empty-placeholder {:default? (:is-default project) :on-create-clicked on-create-clicked diff --git a/frontend/src/app/main/ui/dashboard/libraries.cljs b/frontend/src/app/main/ui/dashboard/libraries.cljs index 0052f718a..6856bdc04 100644 --- a/frontend/src/app/main/ui/dashboard/libraries.cljs +++ b/frontend/src/app/main/ui/dashboard/libraries.cljs @@ -74,5 +74,6 @@ [:& grid {:files files :project default-project :origin :libraries - :limit limit}]]])) + :limit limit + :library-view? true}]]])) From b072c1d1d1902ec83771887ff0dde19c50ee42f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Wed, 24 Aug 2022 10:04:05 +0200 Subject: [PATCH 2/4] :bug: Fix delete library color --- frontend/src/app/main/ui/workspace/sidebar/assets.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index e80065095..9987d9b8e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -1119,7 +1119,7 @@ (on-assets-delete) (st/emit! (dwu/start-undo-transaction) (dwl/delete-color color) - (dwl/sync-file file-id file-id :color (:id color)) + (dwl/sync-file file-id file-id :colors (:id color)) (dwu/commit-undo-transaction))))) rename-color-clicked From c1942ef4085b9c76840ab0b9403a49e864fefa93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Wed, 24 Aug 2022 11:07:53 +0200 Subject: [PATCH 3/4] :lipstick: Change libraries label --- frontend/translations/en.po | 4 ++-- frontend/translations/es.po | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 57f87e162..253ec1382 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -439,7 +439,7 @@ msgstr "Leave team" #: src/app/main/ui/dashboard/libraries.cljs msgid "dashboard.libraries-title" -msgstr "Shared Libraries" +msgstr "Libraries" #: src/app/main/ui/dashboard/grid.cljs msgid "dashboard.loading-files" @@ -1499,7 +1499,7 @@ msgstr "Share prototype" #: src/app/main/ui/dashboard/sidebar.cljs msgid "labels.shared-libraries" -msgstr "Shared Libraries" +msgstr "Libraries" #: src/app/main/ui/workspace/comments.cljs, src/app/main/ui/viewer/header.cljs msgid "labels.show-all-comments" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 89dddd273..e79b96c68 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -449,7 +449,7 @@ msgstr "Abandonar equipo" #: src/app/main/ui/dashboard/libraries.cljs msgid "dashboard.libraries-title" -msgstr "Bibliotecas Compartidas" +msgstr "Bibliotecas" #: src/app/main/ui/dashboard/grid.cljs msgid "dashboard.loading-files" @@ -1571,7 +1571,7 @@ msgstr "Compartir prototipo" #: src/app/main/ui/dashboard/sidebar.cljs msgid "labels.shared-libraries" -msgstr "Bibliotecas Compartidas" +msgstr "Bibliotecas" #: src/app/main/ui/workspace/comments.cljs, src/app/main/ui/viewer/header.cljs msgid "labels.show-all-comments" From 1675d945d96b841cfd90f265a8a0fa4a25ca333f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 29 Aug 2022 09:50:04 +0200 Subject: [PATCH 4/4] :sparkles: Add some small enhancements --- backend/src/app/rpc/queries/files.clj | 6 ++---- frontend/src/app/main/ui/dashboard/grid.cljs | 12 ++++++------ 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/backend/src/app/rpc/queries/files.clj b/backend/src/app/rpc/queries/files.clj index 43b92b251..e8f6e6636 100644 --- a/backend/src/app/rpc/queries/files.clj +++ b/backend/src/app/rpc/queries/files.clj @@ -423,13 +423,11 @@ [{:keys [pool] :as cfg} {:keys [team-id] :as params}] (let [assets-sample (fn [assets limit] - (let [sorted-assets (->> assets - (vals) - (vec) + (let [sorted-assets (->> (vals assets) (sort-by #(str/lower (:name %))))] {:count (count sorted-assets) - :sample (take limit sorted-assets)})) + :sample (into [] (take limit sorted-assets))})) library-summary (fn [data] diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 34fc126d2..a0861eb11 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -78,14 +78,14 @@ typographies (:typographies summary)] [:* - (when (> (:count components) 0) + (when (pos? (:count components)) [:div.asset-section [:div.asset-title [:span (tr "workspace.assets.components")] [:span.num-assets (str "\u00A0(") (:count components) ")"]] ;; Unicode 00A0 is non-breaking space [:div.asset-list (for [component (:sample components)] - [:div.asset-list-item + [:div.asset-list-item {:key (str "assets-component-" (:id component))} [:& component-svg {:group (get-in component [:objects (:id component)]) :objects (:objects component)}] [:div.name-block @@ -96,7 +96,7 @@ [:div.name-block [:span.item-name "(...)"]]])]]) - (when (> (:count colors) 0) + (when (pos? (:count colors)) [:div.asset-section [:div.asset-title [:span (tr "workspace.assets.colors")] @@ -107,7 +107,7 @@ (:gradient color) (bc/gradient-type->string (get-in color [:gradient :type])) (:color color) (:color color) :else (:value color))] - [:div.asset-list-item + [:div.asset-list-item {:key (str "assets-color-" (:id color))} [:& bc/color-bullet {:color {:color (:color color) :opacity (:opacity color)}}] [:div.name-block @@ -119,14 +119,14 @@ [:div.name-block [:span.item-name "(...)"]]])]]) - (when (> (:count typographies) 0) + (when (pos? (:count typographies)) [:div.asset-section [:div.asset-title [:span (tr "workspace.assets.typography")] [:span.num-assets (str "\u00A0(") (:count typographies) ")"]] ;; Unicode 00A0 is non-breaking space [:div.asset-list (for [typography (:sample typographies)] - [:div.asset-list-item + [:div.asset-list-item {:key (str "assets-typography-" (:id typography))} [:div.typography-sample {:style {:font-family (:font-family typography) :font-weight (:font-weight typography)