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

🎉 Add file thumbnails on dashboard.

Browse source
This commit is contained in:
Andrey Antukh 2020-01-08 10:34:02 +01:00
parent ba2ffb9c0a
commit ab4171b8ec
7 changed files with 86 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/uxbox/main/ui/dashboard/projects.cljs
View file

@ -15,6 +15,7 @@
[uxbox.main.constants :as c]
[uxbox.main.data.projects :as udp]
[uxbox.main.store :as st]
[uxbox.main.exports :as exports]
[uxbox.main.ui.modal :as modal]
[uxbox.main.ui.keyboard :as kbd]
[uxbox.main.ui.confirm :refer [confirm-dialog]]
@ -66,10 +67,27 @@
;; --- Grid Item Thumbnail
;; (mf/defc grid-item-thumbnail
;; [{:keys [file] :as props}]
;; [:div.grid-item-th
;; [:img.img-th {:src "/images/project-placeholder.svg"}]])
;; (defn use-thumbnail
;; [file]
(mf/defc grid-item-thumbnail
[{:keys [project] :as props}]
[:div.grid-item-th
[:img.img-th {:src "/images/project-placeholder.svg"}]])
[{:keys [file] :as props}]
(let [url (mf/use-memo
{:fn #(let [content (exports/render file)
blob (js/Blob. #js [content] #js {:type "image/svg+xml"})]
(js/URL.createObjectURL blob))
:deps (mf/deps (:id file))})]
(mf/use-effect
{:fn (fn []
#(js/URL.revokeObjectURL url))
:deps (mf/deps (:id file))})
[:div.grid-item-th
[:img.img-th {:src url}]]))
;; --- Grid Item