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

🎉 Improve dashboard and onboarding css

Browse source
This commit is contained in:
Eva 2022-08-03 13:38:17 +02:00
parent 390ad34b13
commit e863ef7dbf
11 changed files with 149 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/components/file_uploader.cljs
View file

@ -31,7 +31,8 @@
[:label {:for input-id :class-name label-class} label-text])
[:input
{:style {:display "none"}
{:style {:display "none"
:width 0}
:id input-id
:multiple multi
:accept accept

36
frontend/src/app/main/ui/dashboard/files.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.dashboard.files
(:require
[app.common.math :as mth]
[app.main.data.dashboard :as dd]
[app.main.data.events :as ev]
[app.main.refs :as refs]
@ -16,6 +17,8 @@
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.webapi :as wapi]
[beicon.core :as rx]
[cuerdas.core :as str]
[rumext.alpha :as mf]))
@ -93,6 +96,17 @@
(mf/defc files-section
[{:keys [project team] :as props}]
(let [files-map (mf/deref refs/dashboard-files)
width (mf/use-state nil)
rowref (mf/use-ref)
itemsize (if (>= @width 1030)
280
230)
ratio (if (some? @width) (/ @width itemsize) 0)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)
files (->> (vals files-map)
(filter #(= (:id project) (:project-id %)))
(sort-by :modified-at)
@ -104,6 +118,23 @@
(dom/prevent-default event)
(st/emit! (with-meta (dd/create-file {:project-id (:id project)})
{::ev/origin origin}))))]
(mf/use-effect
(fn []
(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))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub)))))
(mf/use-effect
(mf/deps project)
@ -123,9 +154,10 @@
[:*
[:& header {:team team :project project
:on-create-clicked on-create-clicked}]
[:section.dashboard-container.no-bg
[:section.dashboard-container.no-bg {:ref rowref}
[:& grid {:project project
:files files
:on-create-clicked on-create-clicked
:origin :files}]]]))
:origin :files
:limit limit}]]]))

9
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -209,7 +209,7 @@
:dashboard-local dashboard-local}])]]]))
(mf/defc grid
[{:keys [files project on-create-clicked origin] :as props}]
[{:keys [files project on-create-clicked origin limit] :as props}]
(let [dragging? (mf/use-state false)
project-id (:id project)
@ -263,6 +263,7 @@
(seq files)
[:div.grid-row
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
(when @dragging?
[:div.grid-item])
(for [item files]
@ -275,7 +276,8 @@
:else
[:& empty-placeholder {:default? (:is-default project)
:on-create-clicked on-create-clicked
:project project}])]))
:project project
:limit limit}])]))
(mf/defc line-grid-row
[{:keys [files selected-files dragging? limit] :as props}]
@ -385,5 +387,6 @@
:else
[:& empty-placeholder {:dragging? @dragging?
:default? (:is-default project)
:on-create-clicked on-create-clicked}])]))
:on-create-clicked on-create-clicked
:limit limit}])]))

37
frontend/src/app/main/ui/dashboard/libraries.cljs
View file

@ -7,12 +7,15 @@
(ns app.main.ui.dashboard.libraries
(:require
[app.common.data :as d]
[app.common.math :as mth]
[app.main.data.dashboard :as dd]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.dashboard.grid :refer [grid]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.webapi :as wapi]
[beicon.core :as rx]
[rumext.alpha :as mf]))
(mf/defc libraries-page
@ -22,7 +25,18 @@
default-project (->> projects vals (d/seek :is-default))
files (->> (vals files-map)
(sort-by :modified-at)
(reverse))]
(reverse))
width (mf/use-state nil)
rowref (mf/use-ref)
itemsize (if (>= @width 1030)
280
230)
ratio (if (some? @width) (/ @width itemsize) 0)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)]
(mf/use-effect
(mf/deps team)
(fn []
@ -35,13 +49,30 @@
(mf/use-effect
#(st/emit! (dd/fetch-shared-files)
(dd/clear-selected-files)))
(mf/use-effect
(fn []
(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))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub)))))
[:*
[:header.dashboard-header
[:div.dashboard-title
[:h1 (tr "dashboard.libraries-title")]]]
[:section.dashboard-container.no-bg
[:section.dashboard-container.no-bg {:ref rowref}
[:& grid {:files files
:project default-project
:origin :libraries}]]]))
:origin :libraries
:limit limit}]]]))

4
frontend/src/app/main/ui/dashboard/placeholder.cljs
View file

@ -11,14 +11,16 @@
[rumext.alpha :as mf]))
(mf/defc empty-placeholder
[{:keys [dragging? on-create-clicked project] :as props}]
[{:keys [dragging? on-create-clicked project limit] :as props}]
(cond
(true? dragging?)
[:div.grid-row.no-wrap
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
[:div.grid-item]]
:else
[:div.grid-empty-placeholder
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
[:button.create-new {:on-click (partial on-create-clicked project "dashboard:empty-folder-placeholder")}
(tr "dashboard.new-file")]]))

1
frontend/src/app/main/ui/dashboard/projects.cljs
View file

@ -65,6 +65,7 @@
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)
toggle-pin
(mf/use-callback
(mf/deps project)

35
frontend/src/app/main/ui/dashboard/search.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.dashboard.search
(:require
[app.common.math :as mth]
[app.main.data.dashboard :as dd]
[app.main.refs :as refs]
[app.main.store :as st]
@ -13,6 +14,8 @@
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.webapi :as wapi]
[beicon.core :as rx]
[rumext.alpha :as mf]))
(mf/defc search-page
@ -33,13 +36,38 @@
(st/emit! (dd/search {:search-term search-term})
(dd/clear-selected-files))))
(let [result (mf/deref refs/dashboard-search-result)]
(let [result (mf/deref refs/dashboard-search-result)
width (mf/use-state nil)
rowref (mf/use-ref)
itemsize (if (>= @width 1030)
280
230)
ratio (if (some? @width) (/ @width itemsize) 0)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)]
(mf/use-effect
(fn []
(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))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub)))))
[:*
[:header.dashboard-header
[:div.dashboard-title
[:h1 (tr "dashboard.title-search")]]]
[:section.dashboard-container.search.no-bg
[:section.dashboard-container.search.no-bg {:ref rowref}
(cond
(empty? search-term)
[:div.grid-empty-placeholder.search
@ -58,4 +86,5 @@
:else
[:& grid {:files result
:hide-new? true}])]]))
:hide-new? true
:limit limit}])]]))