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

🎉 Add new dashboard libraries screen

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

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 {

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

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}]]]))
 

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

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"

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"