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