From 4bbd8f809c055844673586febe7982359f7d7710 Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Mon, 31 Oct 2016 15:56:12 +0100
Subject: [PATCH] add new dashboard elements info

---
 .../styles/main/partials/dashboard-grid.scss  | 93 +++++++++++--------
 src/uxbox/main/ui/dashboard/icons.cljs        |  4 +-
 src/uxbox/main/ui/dashboard/images.cljs       |  4 +-
 src/uxbox/main/ui/dashboard/projects.cljs     |  9 +-
 4 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/resources/styles/main/partials/dashboard-grid.scss b/resources/styles/main/partials/dashboard-grid.scss
index 94bf27b83..1ad6cad94 100644
--- a/resources/styles/main/partials/dashboard-grid.scss
+++ b/resources/styles/main/partials/dashboard-grid.scss
@@ -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;
-        }
-
-      }
-
-    }
-
   }
 
 }
diff --git a/src/uxbox/main/ui/dashboard/icons.cljs b/src/uxbox/main/ui/dashboard/icons.cljs
index afde64f90..24e85ed61 100644
--- a/src/uxbox/main/ui/dashboard/icons.cljs
+++ b/src/uxbox/main/ui/dashboard/icons.cljs
@@ -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]]]))
diff --git a/src/uxbox/main/ui/dashboard/images.cljs b/src/uxbox/main/ui/dashboard/images.cljs
index 6e7ee8059..c0cebb142 100644
--- a/src/uxbox/main/ui/dashboard/images.cljs
+++ b/src/uxbox/main/ui/dashboard/images.cljs
@@ -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]}
diff --git a/src/uxbox/main/ui/dashboard/projects.cljs b/src/uxbox/main/ui/dashboard/projects.cljs
index 165101eda..f050faac3 100644
--- a/src/uxbox/main/ui/dashboard/projects.cljs
+++ b/src/uxbox/main/ui/dashboard/projects.cljs
@@ -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}