mirror of
https://github.com/penpot/penpot.git
synced 2025-03-26 06:31:26 -05:00
✨ Dashboard respect ratio for thumbnails
This commit is contained in:
alonso.torres
parent
a4f32de9a1
commit
76a2f9bc8c
9 changed files with 57 additions and 53 deletions
|
|
@ -25,4 +25,6 @@
|
|||
position: relative;
|
||||
grid-row: 1 / span 2;
|
||||
padding: $s-16 $s-16 0 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -145,6 +145,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
width: 100%;
|
||||
padding: 0 $s-16;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
|
|
|
|||
|
|
@ -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))))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue