From c59fc87fc4a3e0b83a737b6a7d66a585bd1b4b1d Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Fri, 27 Jan 2023 12:38:41 +0100 Subject: [PATCH] :bug: Fix styling info at the libraries modal --- backend/src/app/rpc/commands/files.clj | 1 + .../resources/styles/main/partials/modal.scss | 6 +- .../src/app/main/ui/workspace/libraries.cljs | 98 ++++++++++++------- 3 files changed, 67 insertions(+), 38 deletions(-) diff --git a/backend/src/app/rpc/commands/files.clj b/backend/src/app/rpc/commands/files.clj index eae11e360..0dd01b1a5 100644 --- a/backend/src/app/rpc/commands/files.clj +++ b/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)}))] diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 404ebd4bd..b0b118cf6 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/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; - align-items: center; - justify-content: space-between; + position: relative; .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; diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index a30e4f7d0..b2ba31971 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/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   so this block has always some content - (str - (str/join " · " - (cond-> [] - (< 0 components-count) - (conj (tr "workspace.libraries.components" components-count)) + (library-str components-count graphics-count colors-count typography-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 external-library-str + [library] + (let [components-count (get-in library [:library-summary :components :count] 0) + graphics-count (get-in library [:library-summary :media :count] 0) + colors-count (get-in library [:library-summary :colors :count] 0) + typography-count (get-in library [:library-summary :typographies :count] 0)] + (library-str components-count graphics-count colors-count typography-count))) (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-contents (contents-str file)]] - [:div - (if (:is-shared file) - [:input.item-button {:type "button" - :value (tr "common.unpublish") - :on-click del-shared}] - [:input.item-button {:type "button" - :value (tr "common.publish") - :on-click add-shared}])]] + [:div.item-name (tr "workspace.libraries.file-library")] + [:div.item-contents (library-str (count components) (count media) (count colors) (count typographies) )]] + [:div + (if (:is-shared file) + [:input.item-button {:type "button" + :value (tr "common.unpublish") + :on-click del-shared}] + [:input.item-button {:type "button" + :value (tr "common.publish") + :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 - (if (str/empty? @search-term) - (tr "workspace.libraries.no-shared-libraries-available") - (tr "workspace.libraries.no-matches-for" @search-term))])])]])) + [:* i/library + (if (str/empty? @search-term) + (tr "workspace.libraries.no-shared-libraries-available") + (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