0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 09:08:31 -05:00

add new dashboard elements info

This commit is contained in:
elhombretecla 2016-10-31 15:56:12 +01:00 committed by Andrey Antukh
parent a1a7aa044a
commit 4bbd8f809c
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
4 changed files with 64 additions and 46 deletions

View file

@ -109,6 +109,38 @@
min-width: 190px;
}
.item-info {
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
padding: $small;
position: absolute;
text-align: left;
width: 100%;
h3 {
color: $intense-ui-text;
font-size: $fs16;
font-weight: 400;
overflow: hidden;
padding: 0;
padding-right: $small;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
}
span.date {
color: $soft-ui-text;
font-size: $fs12;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
}
&.add-project {
border: 2px dashed $color-gray-light;
box-shadow: inset 0 0 0 transparent;
@ -148,20 +180,12 @@
}
h3 {
color: $color-gray-darker;
font-weight: 400;
}
.project-th-update {
color: $color-gray-light;
}
.project-th-actions {
align-items: center;
bottom: 0;
display: flex;
left: 0;
justify-content: flex-end;
padding: $small;
position: absolute;
width: 100%;
@ -169,7 +193,7 @@
svg {
fill: $color-gray-light;
height: 14px;
margin-right: 5px;
margin-right: $x-small;
width: 14px;
}
@ -182,25 +206,39 @@
display: flex;
margin-right: $small;
&.delete,
&.edit {
margin-left: auto;
&.delete {
margin-right: 0;
svg {
fill: $color-danger;
fill: $medium-ui-icons;
margin-right: 0;
}
&:hover {
transform: scale(1.4);
svg {
fill: $color-danger;
}
}
}
&.edit {
margin-right: 0;
svg {
fill: $medium-ui-icons;
}
&:hover {
transform: scale(1.4);
svg {
fill: $color-primary;
}
}
}
@ -220,18 +258,6 @@
&:hover {
border-color: $main-ui-color;
span {
color: $main-ui-color;
}
}
span {
padding: $small;
text-align: left;
width: 100%;
@include text-ellipsis;
}
.grid-item-th {
@ -252,7 +278,7 @@
svg {
height: 20%;
max-width: 120px;
width: 40%;
width: 3vw;
}
}
@ -291,19 +317,6 @@
// STYLES FOR LIBRARIES
&.library {
padding: $medium $medium $medium 250px;
.dashboard-grid-content {
.grid-item {
h3 {
font-size: $fs18;
}
}
}
}
}

View file

@ -304,7 +304,9 @@
[:label {:for (:id icon)}]]
[:span.grid-item-image
(icon/icon-svg icon)]
[:h3 (:name icon)]
[:div.item-info
[:h3 (:name icon)]
[:span.date "Uploaded at 21/09/2016"]]
#_[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]))

View file

@ -304,7 +304,9 @@
:on-click toggle-selection
:checked selected?}]
[:label {:for (:id image)}]]]
[:span (:name image)]]))
[:div.item-info
[:h3 (:name image)]
[:span.date "Uploaded at 12/11/2016"]]]))
(mx/defc grid
{:mixins [mx/static mx/reactive]}

View file

@ -153,9 +153,10 @@
(dom/stop-propagation event)
(udl/open! :confirm {:on-accept delete}))]
[:div.grid-item.project-th {:on-click on-navigate}
[:h3 (:name project)]
[:span.project-th-update
(str "Updated " (dt/timeago (:modified-at project)))]
[:div.item-info
[:h3 (:name project)]
[:span.date
(str "Updated " (dt/timeago (:modified-at project)))]]
[:div.project-th-actions
[:div.project-th-icon.pages
i/page
@ -163,7 +164,7 @@
#_[:div.project-th-icon.comments
i/chat
[:span "0"]]
#_[:div.project-th-icon.edit
[:div.project-th-icon.edit
i/pencil]
[:div.project-th-icon.delete
{:on-click on-delete}