3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-08 11:21:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Dashboard respect ratio for thumbnails

Browse source
This commit is contained in:
alonso.torres 2023-12-01 11:59:06 +01:00
parent a4f32de9a1
commit 76a2f9bc8c
9 changed files with 57 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/app/main/ui/hooks.cljs
View file

@ -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))))