Merge pull request #2175 from penpot/hiru-dashboard-libraries

🎉 Add new dashboard libraries screen
2025-02-12 18:18:24 -05:00 · 2022-08-30 11:32:44 +02:00 · 2022-08-30 11:32:44 +02:00 · 02f3809b89
commit 02f3809b89
parent 12ba46642c 1675d945d9
7 changed files with 207 additions and 18 deletions
--- 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,26 @@

 (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 (->> (vals assets)
+                                   (sort-by #(str/lower (:name %))))]
+
+          {:count (count sorted-assets)
+           :sample (into [] (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
--- 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 {
--- 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 (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 {:key (str "assets-component-" (:id component))}
+               [:& 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 (pos? (:count colors))
+          [: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 {:key (str "assets-color-" (:id color))}
+                 [:& 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 (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 {:key (str "assets-typography-" (:id typography))}
+               [: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
--- 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}]]]))

--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@ -1148,7 +1148,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
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@ -445,7 +445,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"
@ -1505,7 +1505,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"
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@ -455,7 +455,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"
@ -1577,7 +1577,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"