🐛 Fix styling info at the libraries modal

backend/src/app/rpc/commands/files.clj

@@ -492,6 +492,7 @@
           (library-summary [{:keys [id data] :as file}]
             (binding [pmap/*load-fn* (partial load-pointer conn id)]
               {:components (assets-sample (:components data) 4)
+               :media (assets-sample (:media data) 3)
                :colors (assets-sample (:colors data) 3)
                :typographies (assets-sample (:typographies data) 3)}))]
 

frontend/resources/styles/main/partials/modal.scss

@@ -693,9 +693,7 @@
       .section-list-item {
         padding: $size-4 0;
         border-bottom: 1px solid $color-gray-20;
-        display: flex;
+        position: relative;
-        align-items: center;
-        justify-content: space-between;
 
         .item-name {
           color: $color-gray-60;
@@ -720,6 +718,8 @@
           color: $color-black;
           padding: $size-2;
           margin-bottom: 0;
+          position: absolute;
+          top: 1rem;
 
           &:hover {
             color: $color-primary;

frontend/src/app/main/ui/workspace/libraries.cljs

@@ -12,7 +12,7 @@
    [app.main.data.workspace.libraries :as dwl]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.icons :as i]
+   [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.assets :as a]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -24,31 +24,42 @@
 (def workspace-file
   (l/derived :workspace-file st/state))
 
-(defn contents-str
+(defn library-str
+  [components-count graphics-count colors-count typography-count]
+  (str
+   (str/join " · "
+             (cond-> []
+               (< 0 components-count)
+               (conj (tr "workspace.libraries.components" components-count))
+
+               (< 0 graphics-count)
+               (conj (tr "workspace.libraries.graphics" graphics-count))
+
+               (< 0 colors-count)
+               (conj (tr "workspace.libraries.colors" colors-count))
+
+               (< 0 typography-count)
+               (conj (tr "workspace.libraries.typography" typography-count))))
+   "\u00A0"))
+
+(defn local-library-str
   [library]
   (let [components-count (count (get-in library [:data :components] []))
         graphics-count (count (get-in library [:data :media] []))
         colors-count (count (get-in library [:data :colors] []))
         typography-count (count (get-in library [:data :typographies] []))]
-    ;; Include a &nbsp; so this block has always some content
+    (library-str components-count graphics-count colors-count typography-count)))
-    (str
-      (str/join " · "
-                (cond-> []
-                  (< 0 components-count)
-                  (conj (tr "workspace.libraries.components" components-count))
 
-                  (< 0 graphics-count)
+(defn external-library-str
-                  (conj (tr "workspace.libraries.graphics" graphics-count))
+  [library]
-
+  (let [components-count (get-in library [:library-summary :components :count] 0)
-                  (< 0 colors-count)
+        graphics-count (get-in library [:library-summary :media :count] 0)
-                  (conj (tr "workspace.libraries.colors" colors-count))
+        colors-count (get-in library [:library-summary :colors :count] 0)
-
+        typography-count (get-in library [:library-summary :typographies :count] 0)]
-                  (< 0 typography-count)
+    (library-str components-count graphics-count colors-count typography-count)))
-                  (conj (tr "workspace.libraries.typography" typography-count))))
-      "\u00A0")))
 
 (mf/defc libraries-tab
-  [{:keys [file libraries shared-files] :as props}]
+  [{:keys [file colors typographies media components libraries shared-files] :as props}]
   (let [search-term (mf/use-state "")
 
         sorted-libraries (->> (vals libraries)
@@ -116,21 +127,21 @@
       [:div.section-list
        [:div.section-list-item
         [:div
-        [:div.item-name (tr "workspace.libraries.file-library")]
+         [:div.item-name (tr "workspace.libraries.file-library")]
-        [:div.item-contents (contents-str file)]]
+         [:div.item-contents (library-str (count components) (count media) (count colors) (count typographies) )]]
-       [:div
+        [:div
-        (if (:is-shared file)
+         (if (:is-shared file)
-          [:input.item-button {:type "button"
+           [:input.item-button {:type "button"
-                               :value (tr "common.unpublish")
+                                :value (tr "common.unpublish")
-                               :on-click del-shared}]
+                                :on-click del-shared}]
-          [:input.item-button {:type "button"
+           [:input.item-button {:type "button"
-                               :value (tr "common.publish")
+                                :value (tr "common.publish")
-                               :on-click add-shared}])]]
+                                :on-click add-shared}])]]
 
        (for [library sorted-libraries]
          [:div.section-list-item {:key (:id library)}
           [:div.item-name (:name library)]
-          [:div.item-contents (contents-str library)]
+          [:div.item-contents (local-library-str library)]
           [:input.item-button {:type "button"
                                :value (tr "labels.remove")
                                :on-click #(unlink-library (:id library))}]])
@@ -155,7 +166,7 @@
          (for [file filtered-files]
            [:div.section-list-item {:key (:id file)}
             [:div.item-name (:name file)]
-            [:div.item-contents (contents-str file)]
+            [:div.item-contents (external-library-str file)]
             [:input.item-button {:type "button"
                                  :value (tr "workspace.libraries.add")
                                  :on-click #(link-library (:id file))}]])]
@@ -163,10 +174,10 @@
         [:div.section-list-empty
          (if (nil? shared-files)
            i/loader-pencil
-         [:* i/library
+           [:* i/library
-          (if (str/empty? @search-term)
+            (if (str/empty? @search-term)
-            (tr "workspace.libraries.no-shared-libraries-available")
+              (tr "workspace.libraries.no-shared-libraries-available")
-            (tr "workspace.libraries.no-matches-for" @search-term))])])]]))
+              (tr "workspace.libraries.no-matches-for" @search-term))])])]]))
 
 
 (mf/defc updates-tab
@@ -185,7 +196,7 @@
         (for [library libraries-need-sync]
           [:div.section-list-item {:key (:id library)}
            [:div.item-name (:name library)]
-           [:div.item-contents (contents-str library)]
+           [:div.item-contents (external-library-str library)]
            [:input.item-button {:type "button"
                                 :value (tr "workspace.libraries.update")
                                 :on-click #(update-library (:id library))}]])]])]))
@@ -197,10 +208,23 @@
   (let [selected-tab (mf/use-state :libraries)
         project      (mf/deref refs/workspace-project)
         file         (mf/deref workspace-file)
+
         libraries    (->> (mf/deref refs/workspace-libraries)
                           (d/removem (fn [[_ val]] (:is-indirect val))))
         shared-files (mf/deref refs/workspace-shared-files)
 
+        colors-ref           (mf/use-memo (mf/deps (:id file)) #(a/file-colors-ref (:id file)))
+        colors               (mf/deref colors-ref)
+
+        typography-ref       (mf/use-memo (mf/deps (:id file)) #(a/file-typography-ref (:id file)))
+        typographies         (mf/deref typography-ref)
+
+        media-ref            (mf/use-memo (mf/deps (:id file)) #(a/file-media-ref (:id file)))
+        media                (mf/deref media-ref)
+
+        components-ref       (mf/use-memo (mf/deps (:id file)) #(a/file-components-ref (:id file)))
+        components           (mf/deref components-ref)
+
         change-tab   #(reset! selected-tab %)
         close        #(modal/hide!)]
 
@@ -227,6 +251,10 @@
         (case @selected-tab
           :libraries
           [:& libraries-tab {:file file
+                             :colors colors
+                             :typographies typographies
+                             :media media
+                             :components components
                              :libraries libraries
                              :shared-files shared-files}]
           :updates