mirror of
https://github.com/penpot/penpot.git
synced 2025-04-01 09:31:26 -05:00
Merge pull request #2124 from penpot/3799-dashboard-rework
3799 dashboard rework
This commit is contained in:
Andrey Antukh
GitHub
commit
f455580cf7
11 changed files with 180 additions and 132 deletions
|
|
@ -8,21 +8,23 @@
|
|||
/// This mixin allows you to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
|
||||
/// @group Mixins
|
||||
/// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
|
||||
@mixin bp($point) {
|
||||
$bp-mobile: "(min-width: 720px)";
|
||||
$bp-tablet: "(min-width: 1020px)";
|
||||
$bp-desktop: "(min-width: 1366px)";
|
||||
$bp-min-720: "(min-width: 720px)";
|
||||
$bp-min-1020: "(min-width: 1020px)";
|
||||
$bp-min-1366: "(min-width: 1366px)";
|
||||
$bp-max-1366: "(max-width: 1366px)";
|
||||
$bp-min-2556: "(min-width: 2556px)";
|
||||
|
||||
@mixin bp($point) {
|
||||
@if $point == mobile {
|
||||
@media #{$bp-desktop} {
|
||||
@media #{$bp-min-720} {
|
||||
@content;
|
||||
}
|
||||
} @else if $point == tablet {
|
||||
@media #{$bp-tablet} {
|
||||
@media #{$bp-min-1020} {
|
||||
@content;
|
||||
}
|
||||
} @else if $point == desktop {
|
||||
@media #{$bp-mobile} {
|
||||
@media #{$bp-min-1366} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,17 +14,19 @@
|
|||
background-color: $color-white;
|
||||
display: grid;
|
||||
grid-template-rows: 50px 1fr;
|
||||
grid-template-columns: 40px 220px 1fr;
|
||||
grid-template-columns: 40px 256px 1fr;
|
||||
height: 100vh;
|
||||
|
||||
.dashboard-sidebar {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
padding: 1rem;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
grid-row: 1 / span 2;
|
||||
padding: 1rem 1rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,39 +7,37 @@
|
|||
.dashboard-grid {
|
||||
font-size: $fs14;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.grid-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
align-content: flex-start;
|
||||
|
||||
&.no-wrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
align-items: center;
|
||||
border: 2px solid lighten($color-gray-20, 13%);
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 200px;
|
||||
margin: $size-4;
|
||||
max-width: 260px;
|
||||
min-width: 260px;
|
||||
flex: 1 0 260px;
|
||||
height: 230px;
|
||||
margin: $size-3 $size-4 $size-4 $size-2;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 18%;
|
||||
@media #{$bp-max-1366} {
|
||||
height: 200px;
|
||||
flex: 1 0 230px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
.grid-item-th {
|
||||
border: 2px solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item-th {
|
||||
border-radius: $br-small;
|
||||
border: 2px solid lighten($color-gray-20, 15%);
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
|
|
@ -94,6 +92,7 @@
|
|||
}
|
||||
|
||||
.item-info {
|
||||
color: $color-gray-30;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $size-2;
|
||||
|
|
@ -103,7 +102,7 @@
|
|||
h3 {
|
||||
border: 1px solid transparent;
|
||||
color: $color-gray-60;
|
||||
font-size: $fs14;
|
||||
font-size: $fs16;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
|
@ -116,8 +115,8 @@
|
|||
}
|
||||
|
||||
span.date {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
color: $color-gray-30;
|
||||
font-size: $fs14;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
|
|
@ -181,7 +180,9 @@
|
|||
}
|
||||
|
||||
&.selected {
|
||||
border: 2px solid $color-primary;
|
||||
.grid-item-th {
|
||||
border: 2px solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.project-th-actions {
|
||||
|
|
@ -295,6 +296,7 @@
|
|||
border-top-left-radius: $br-small;
|
||||
border-top-right-radius: $br-small;
|
||||
height: 70%;
|
||||
max-height: 160px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
color: $color-black;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
font-size: $fs18;
|
||||
font-size: $fs22;
|
||||
font-weight: 600;
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -403,9 +403,8 @@
|
|||
@include animation(0, 0.2s, fadeInUp);
|
||||
|
||||
li {
|
||||
height: 32px;
|
||||
font-size: $fs14;
|
||||
padding: 5px 10px;
|
||||
padding: $size-2 $size-4;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
|
|
|
|||
|
|
@ -13,13 +13,17 @@
|
|||
overflow-y: auto;
|
||||
user-select: none;
|
||||
|
||||
&.no-bg {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.search {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-project-row {
|
||||
margin-bottom: $size-4;
|
||||
margin-bottom: $size-5;
|
||||
|
||||
.project {
|
||||
align-items: center;
|
||||
|
|
@ -27,11 +31,41 @@
|
|||
border-radius: $br-small;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: $size-4;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: $size-4;
|
||||
padding: $size-1 $size-1 $size-1 $size-2;
|
||||
width: fit-content;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
.project-name-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
min-height: 32px;
|
||||
}
|
||||
.show-more {
|
||||
align-items: center;
|
||||
color: $color-gray-30;
|
||||
display: flex;
|
||||
font-size: $fs14;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
.placeholder-icon {
|
||||
transform: rotate(-90deg);
|
||||
margin-left: 10px;
|
||||
svg {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: $color-primary-dark;
|
||||
svg {
|
||||
fill: $color-primary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
border: none;
|
||||
|
|
@ -40,9 +74,9 @@
|
|||
|
||||
h2 {
|
||||
cursor: pointer;
|
||||
font-size: $fs14;
|
||||
font-size: $fs18;
|
||||
line-height: 1rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: $color-black;
|
||||
margin-right: $size-4;
|
||||
}
|
||||
|
|
@ -52,18 +86,27 @@
|
|||
}
|
||||
|
||||
.info {
|
||||
font-size: $fs14;
|
||||
font-size: $fs16;
|
||||
line-height: 1rem;
|
||||
font-weight: unset;
|
||||
color: $color-gray-30;
|
||||
}
|
||||
|
||||
.project-actions {
|
||||
display: none;
|
||||
margin-left: $size-6;
|
||||
|
||||
.btn-small {
|
||||
padding: $size-2;
|
||||
margin: 0 $size-2;
|
||||
}
|
||||
}
|
||||
|
||||
.pin-icon {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
margin-right: 10px;
|
||||
margin-right: 14px;
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
@ -77,10 +120,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.project-actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recent-files-row-title-info {
|
||||
font-size: $fs14;
|
||||
color: $color-gray-30;
|
||||
line-height: 1rem;
|
||||
font-size: $fs16;
|
||||
}
|
||||
|
||||
.dashboard-table {
|
||||
|
|
|
|||
|
|
@ -121,10 +121,9 @@
|
|||
(dd/clear-selected-files))))
|
||||
|
||||
[:*
|
||||
[:& header {:team team
|
||||
:project project
|
||||
[:& header {:team team :project project
|
||||
:on-create-clicked on-create-clicked}]
|
||||
[:section.dashboard-container
|
||||
[:section.dashboard-container.no-bg
|
||||
[:& grid {:project project
|
||||
:files files
|
||||
:on-create-clicked on-create-clicked
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
(ns app.main.ui.dashboard.grid
|
||||
(:require
|
||||
[app.common.logging :as log]
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.data.messages :as dm]
|
||||
[app.main.features :as features]
|
||||
|
|
@ -26,7 +25,6 @@
|
|||
[app.util.keyboard :as kbd]
|
||||
[app.util.time :as dt]
|
||||
[app.util.timers :as ts]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.core :as rx]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -280,44 +278,13 @@
|
|||
:project project}])]))
|
||||
|
||||
(mf/defc line-grid-row
|
||||
[{:keys [files selected-files on-load-more dragging? origin] :as props}]
|
||||
(let [rowref (mf/use-ref)
|
||||
|
||||
width (mf/use-state nil)
|
||||
|
||||
itemsize 290
|
||||
ratio (if (some? @width) (/ @width itemsize) 0)
|
||||
nitems (mth/floor ratio)
|
||||
limit (min 10 ;; Configuration in backend to return recent files
|
||||
(if (and (some? @width)
|
||||
(> (* itemsize (count files)) @width)
|
||||
(< (- ratio nitems) 0.51))
|
||||
(dec nitems) ;; Leave space for the "show all" block
|
||||
nitems))
|
||||
|
||||
limit (if dragging?
|
||||
[{:keys [files selected-files dragging? limit] :as props}]
|
||||
(let [limit (if dragging?
|
||||
(dec limit)
|
||||
limit)
|
||||
limit)]
|
||||
|
||||
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)))))
|
||||
|
||||
[:div.grid-row.no-wrap {:ref rowref}
|
||||
[:div.grid-row.no-wrap
|
||||
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
|
||||
(when dragging?
|
||||
[:div.grid-item])
|
||||
(for [item (take limit files)]
|
||||
|
|
@ -326,17 +293,10 @@
|
|||
:file item
|
||||
:selected-files selected-files
|
||||
:key (:id item)
|
||||
:navigate? false
|
||||
:origin origin}])
|
||||
(when (and (> limit 0)
|
||||
(> (count files) limit))
|
||||
[:div.grid-item.placeholder {:on-click on-load-more}
|
||||
[:div.placeholder-icon i/arrow-down]
|
||||
[:div.placeholder-label
|
||||
(tr "dashboard.show-all-files")]])]))
|
||||
:navigate? false}])]))
|
||||
|
||||
(mf/defc line-grid
|
||||
[{:keys [project team files on-load-more on-create-clicked origin] :as props}]
|
||||
[{:keys [project team files limit on-create-clicked] :as props}]
|
||||
(let [dragging? (mf/use-state false)
|
||||
project-id (:id project)
|
||||
team-id (:id team)
|
||||
|
|
@ -419,9 +379,8 @@
|
|||
[:& line-grid-row {:files files
|
||||
:team-id team-id
|
||||
:selected-files selected-files
|
||||
:on-load-more on-load-more
|
||||
:dragging? @dragging?
|
||||
:origin origin}]
|
||||
:limit limit}]
|
||||
|
||||
:else
|
||||
[:& empty-placeholder {:dragging? @dragging?
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
[:header.dashboard-header
|
||||
[:div.dashboard-title
|
||||
[:h1 (tr "dashboard.libraries-title")]]]
|
||||
[:section.dashboard-container
|
||||
[:section.dashboard-container.no-bg
|
||||
[:& grid {:files files
|
||||
:project default-project
|
||||
:origin :libraries}]]]))
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
(ns app.main.ui.dashboard.projects
|
||||
(:require
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.refs :as refs]
|
||||
|
|
@ -18,6 +19,8 @@
|
|||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.router :as rt]
|
||||
[app.util.time :as dt]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.core :as rx]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
|
@ -52,6 +55,16 @@
|
|||
#(st/emit! (rt/nav :dashboard-files {:team-id (:team-id project)
|
||||
:project-id (:id project)})))
|
||||
|
||||
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)
|
||||
toggle-pin
|
||||
(mf/use-callback
|
||||
(mf/deps project)
|
||||
|
|
@ -107,54 +120,76 @@
|
|||
(dd/fetch-recent-files (:id team))
|
||||
(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)))))
|
||||
[:div.dashboard-project-row {:class (when first? "first")}
|
||||
[:div.project
|
||||
(if (:edition? @local)
|
||||
[:& inline-edition {:content (:name project)
|
||||
:on-end on-edit}]
|
||||
[:h2 {:on-click on-nav
|
||||
:on-context-menu on-menu-click}
|
||||
(if (:is-default project)
|
||||
(tr "labels.drafts")
|
||||
(:name project))])
|
||||
[:div.project {:ref rowref}
|
||||
[:div.project-name-wrapper
|
||||
(if (:edition? @local)
|
||||
[:& inline-edition {:content (:name project)
|
||||
:on-end on-edit}]
|
||||
[:h2 {:on-click on-nav
|
||||
:on-context-menu on-menu-click}
|
||||
(if (:is-default project)
|
||||
(tr "labels.drafts")
|
||||
(:name project))])
|
||||
|
||||
[:& project-menu {:project project
|
||||
:show? (:menu-open @local)
|
||||
:left (:x (:menu-pos @local))
|
||||
:top (:y (:menu-pos @local))
|
||||
:on-edit on-edit-open
|
||||
:on-menu-close on-menu-close
|
||||
:on-import on-import}]
|
||||
[:& project-menu {:project project
|
||||
:show? (:menu-open @local)
|
||||
:left (:x (:menu-pos @local))
|
||||
:top (:y (:menu-pos @local))
|
||||
:on-edit on-edit-open
|
||||
:on-menu-close on-menu-close
|
||||
:on-import on-import}]
|
||||
|
||||
[:span.info (str file-count " files")]
|
||||
(when (> file-count 0)
|
||||
(let [time (-> (:modified-at project)
|
||||
(dt/timeago {:locale locale}))]
|
||||
[:span.recent-files-row-title-info (str ", " time)]))
|
||||
[:span.info (str file-count " files")]
|
||||
(when (> file-count 0)
|
||||
(let [time (-> (:modified-at project)
|
||||
(dt/timeago {:locale locale}))]
|
||||
[:span.recent-files-row-title-info (str ", " time)]))
|
||||
[:div.project-actions
|
||||
(when-not (:is-default project)
|
||||
[:span.pin-icon.tooltip.tooltip-bottom
|
||||
{:class (when (:is-pinned project) "active")
|
||||
:on-click toggle-pin :alt (tr "dashboard.pin-unpin")}
|
||||
(if (:is-pinned project)
|
||||
i/pin-fill
|
||||
i/pin)])
|
||||
|
||||
(when-not (:is-default project)
|
||||
[:span.pin-icon.tooltip.tooltip-bottom
|
||||
{:class (when (:is-pinned project) "active")
|
||||
:on-click toggle-pin :alt (tr "dashboard.pin-unpin")}
|
||||
(if (:is-pinned project)
|
||||
i/pin-fill
|
||||
i/pin)])
|
||||
[:a.btn-secondary.btn-small.tooltip.tooltip-bottom
|
||||
{:on-click create-file :alt (tr "dashboard.new-file") :data-test "project-new-file"}
|
||||
i/close]
|
||||
|
||||
[:a.btn-secondary.btn-small.tooltip.tooltip-bottom
|
||||
{:on-click (partial create-file "dashboard:folder") :alt (tr "dashboard.new-file") :data-test "project-new-file"}
|
||||
i/close]
|
||||
|
||||
[:a.btn-secondary.btn-small.tooltip.tooltip-bottom
|
||||
{:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"}
|
||||
i/actions]]
|
||||
[:a.btn-secondary.btn-small.tooltip.tooltip-bottom
|
||||
{:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"}
|
||||
i/actions]]]
|
||||
(when (and (> limit 0)
|
||||
(> file-count limit))
|
||||
[:div.show-more {:on-click on-nav}
|
||||
[:div.placeholder-label
|
||||
(tr "dashboard.show-all-files")]
|
||||
[:div.placeholder-icon i/arrow-down]])]
|
||||
|
||||
[:& line-grid
|
||||
{:project project
|
||||
:team team
|
||||
:on-load-more on-nav
|
||||
:files files
|
||||
:on-create-clicked (partial create-file "dashboard:empty-folder-placeholder")
|
||||
:origin :project}]]))
|
||||
:limit limit}]]))
|
||||
|
||||
|
||||
(def recent-files-ref
|
||||
(l/derived :dashboard-recent-files st/state))
|
||||
|
|
@ -183,7 +218,7 @@
|
|||
(when (seq projects)
|
||||
[:*
|
||||
[:& header]
|
||||
[:section.dashboard-container
|
||||
[:section.dashboard-container.no-bg
|
||||
(for [{:keys [id] :as project} projects]
|
||||
(let [files (when recent-map
|
||||
(->> (vals recent-map)
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
[:div.dashboard-title
|
||||
[:h1 (tr "dashboard.title-search")]]]
|
||||
|
||||
[:section.dashboard-container.search
|
||||
[:section.dashboard-container.search.no-bg
|
||||
(cond
|
||||
(empty? search-term)
|
||||
[:div.grid-empty-placeholder.search
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue