From 76a2f9bc8cf3e40da7942fd57b0030584a8ac69e Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 1 Dec 2023 11:59:06 +0100
Subject: [PATCH] :sparkles: Dashboard respect ratio for thumbnails
---
frontend/src/app/main/ui/dashboard.scss | 2 ++
frontend/src/app/main/ui/dashboard/grid.cljs | 26 ++++++++--------
frontend/src/app/main/ui/dashboard/grid.scss | 30 +++++++++----------
.../src/app/main/ui/dashboard/libraries.cljs | 4 +--
.../src/app/main/ui/dashboard/libraries.scss | 4 ---
.../app/main/ui/dashboard/placeholder.scss | 4 +--
.../src/app/main/ui/dashboard/projects.cljs | 16 +++++-----
.../src/app/main/ui/dashboard/projects.scss | 5 ++++
frontend/src/app/main/ui/hooks.cljs | 19 +++++++-----
9 files changed, 57 insertions(+), 53 deletions(-)
diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss
index 42c45ba1a..fa287e7fa 100644
--- a/frontend/src/app/main/ui/dashboard.scss
+++ b/frontend/src/app/main/ui/dashboard.scss
@@ -25,4 +25,6 @@
position: relative;
grid-row: 1 / span 2;
padding: $s-16 $s-16 0 0;
+ overflow: hidden;
+ width: 100%;
}
diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs
index 96ff30aa8..66a3f9860 100644
--- a/frontend/src/app/main/ui/dashboard/grid.cljs
+++ b/frontend/src/app/main/ui/dashboard/grid.cljs
@@ -459,6 +459,7 @@
[:button
{:class (stl/css-case :selected selected? :library library-view?)
:ref node-ref
+ :title (:name file)
:draggable true
:on-click on-select
:on-key-down handle-key-down
@@ -634,20 +635,17 @@
[:& loading-placeholder]
(seq files)
- [:ul
- {:class (stl/css :grid-row)
- :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
-
- (when @dragging?
- [:li {:class (stl/css :grid-item)}])
-
- (for [item files]
- [:& grid-item
- {:file item
- :key (:id item)
- :navigate? true
- :origin origin
- :library-view? library-view?}])]
+ (for [slice (partition-all limit files)]
+ [:ul {:class (stl/css :grid-row)}
+ (when @dragging?
+ [:li {:class (stl/css :grid-item)}])
+ (for [item slice]
+ [:& grid-item
+ {:file item
+ :key (:id item)
+ :navigate? true
+ :origin origin
+ :library-view? library-view?}])])
:else
[:& empty-placeholder
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index cd64a5cd7..777381711 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -6,17 +6,20 @@
@import "refactor/common-refactor.scss";
+$thumbnail-default-width: $s-252; // Default width
+$thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
+
.dashboard-grid {
font-size: $fs-14;
height: 100%;
overflow-y: auto;
- overflow: hidden;
+ overflow-x: hidden;
}
.grid-row {
- display: grid;
+ display: flex;
width: 100%;
- padding: 0 $s-12;
+ gap: 24px;
}
.grid-item {
@@ -24,9 +27,7 @@
cursor: pointer;
display: flex;
flex-direction: column;
- flex: 1 0 $s-260;
- height: $s-232;
- margin: $s-12 $s-16 $s-16 $s-8;
+ margin: $s-12 0;
position: relative;
text-align: center;
@@ -38,17 +39,16 @@
button {
background-color: transparent;
border: none;
- }
-
- @media #{$bp-max-1366} {
- height: $s-200;
- flex: 1 0 $s-232;
+ padding: 0 $s-6;
}
.grid-item-th {
border-radius: $br-4;
text-align: initial;
+ width: var(--th-width, #{$thumbnail-default-width});
+ height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
+
img {
object-fit: contain;
}
@@ -58,7 +58,8 @@
border-radius: $br-4;
border: $br-2 solid $da-primary;
text-align: initial;
- max-height: $s-160;
+ width: calc(var(--th-width) + $s-12);
+ height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
}
&.overlay {
@@ -81,6 +82,7 @@
display: grid;
grid-template-columns: 1fr auto;
cursor: pointer;
+ max-width: var(--th-width, $thumbnail-default-width);
}
.item-info {
@@ -261,8 +263,7 @@
background-size: auto 80%;
background-repeat: no-repeat;
- height: $s-232;
- max-height: $s-160;
+ height: 100%;
overflow: hidden;
position: relative;
width: 100%;
@@ -294,7 +295,6 @@
.grid-item.project-th.library {
height: $s-612;
- width: $s-300;
}
.grid-item-th.library {
diff --git a/frontend/src/app/main/ui/dashboard/libraries.cljs b/frontend/src/app/main/ui/dashboard/libraries.cljs
index a08cec20f..2b80c8439 100644
--- a/frontend/src/app/main/ui/dashboard/libraries.cljs
+++ b/frontend/src/app/main/ui/dashboard/libraries.cljs
@@ -51,10 +51,10 @@
(if new-css-system
[:*
- [:header {:class (stl/css :dashboard-header) :ref rowref}
+ [:header {:class (stl/css :dashboard-header)}
[:div#dashboard-libraries-title {:class (stl/css :dashboard-title)}
[:h1 (tr "dashboard.libraries-title")]]]
- [:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared)}
+ [:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared) :ref rowref}
[:& grid {:files files
:project default-project
:origin :libraries
diff --git a/frontend/src/app/main/ui/dashboard/libraries.scss b/frontend/src/app/main/ui/dashboard/libraries.scss
index 72b0485a5..eb7864c9e 100644
--- a/frontend/src/app/main/ui/dashboard/libraries.scss
+++ b/frontend/src/app/main/ui/dashboard/libraries.scss
@@ -17,10 +17,6 @@
&.dashboard-projects {
user-select: none;
}
- &.dashboard-shared {
- width: calc(100vw - $s-320);
- margin-right: $s-52;
- }
&.search {
margin-top: $s-12;
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss
index 5b0b45df8..38a62c6b5 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.scss
+++ b/frontend/src/app/main/ui/dashboard/placeholder.scss
@@ -10,9 +10,7 @@
.grid-empty-placeholder {
border-radius: $br-12;
display: grid;
- padding: $s-12;
- margin-right: $s-12;
- height: $s-232;
+ padding: $s-12 0;
&.loader {
justify-items: center;
diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs
index 9213bebb7..b017c2020 100644
--- a/frontend/src/app/main/ui/dashboard/projects.cljs
+++ b/frontend/src/app/main/ui/dashboard/projects.cljs
@@ -246,7 +246,6 @@
:edition? (= (:id project) edit-id)})
[rowref limit] (hooks/use-dynamic-grid-item-width)
-
on-nav
(mf/use-fn
(mf/deps project-id team-id)
@@ -344,7 +343,7 @@
(if new-css-system
[:article {:class (stl/css-case :dashboard-project-row true :first first?)}
- [:header {:class (stl/css :project) :ref rowref}
+ [:header {:class (stl/css :project)}
[:div {:class (stl/css :project-name-wrapper)}
(if (:edition? @local)
[:& inline-edition {:content (:name project)
@@ -403,12 +402,13 @@
:on-key-down handle-menu-click}
i/actions]]]]
- [:& line-grid
- {:project project
- :team team
- :files files
- :create-fn create-file
- :limit limit}]
+ [:div {:class (stl/css :grid-container) :ref rowref}
+ [:& line-grid
+ {:project project
+ :team team
+ :files files
+ :create-fn create-file
+ :limit limit}]]
(when (and (> limit 0)
(> file-count limit))
diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss
index ff6d6cdbc..33f686b62 100644
--- a/frontend/src/app/main/ui/dashboard/projects.scss
+++ b/frontend/src/app/main/ui/dashboard/projects.scss
@@ -145,6 +145,11 @@
}
}
+ .grid-container {
+ width: 100%;
+ padding: 0 $s-16;
+ }
+
&:hover,
&:focus,
&:focus-within {
diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs
index c4a653320..6610c84b1 100644
--- a/frontend/src/app/main/ui/hooks.cljs
+++ b/frontend/src/app/main/ui/hooks.cljs
@@ -1,3 +1,4 @@
+
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
@@ -350,9 +351,7 @@
(defn use-dynamic-grid-item-width
([] (use-dynamic-grid-item-width nil))
([itemsize]
- (let [;; NOTE: we pass a function to use-state for avoid repeatedly
- ;; lookup `:items-width` on storage on each render
- width* (mf/use-state #(:items-width @storage))
+ (let [width* (mf/use-state nil)
width (deref width*)
rowref (mf/use-ref)
@@ -365,20 +364,26 @@
ratio (if (some? width) (/ width itemsize) 0)
nitems (mth/floor ratio)
limit (mth/min 10 nitems)
- limit (mth/max 1 limit)]
+ limit (mth/max 1 limit)
+
+ th-size (- (/ (- width (* (dec limit) 24)) limit) 12)]
+
+ (mf/with-effect
+ [th-size]
+ (when th-size
+ (let [node (mf/ref-val rowref)]
+ (.setProperty (.-style node) "--th-width" (str th-size "px")))))
(mf/with-effect []
(let [node (mf/ref-val rowref)
mnt? (volatile! true)
sub (->> (wapi/observe-resize node)
- (rx/observe-on :af)
(rx/subs (fn [entries]
(let [row (first entries)
row-rect (.-contentRect ^js row)
row-width (.-width ^js row-rect)]
(when @mnt?
- (reset! width* row-width)
- (swap! storage assoc :items-width row-width))))))]
+ (reset! width* row-width))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub))))