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:
parent
a1a7aa044a
commit
4bbd8f809c
4 changed files with 64 additions and 46 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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]]]))
|
||||
|
|
|
@ -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]}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Add table
Reference in a new issue