wip refactor dashboard

backend/bin/start-dev

@@ -8,6 +8,6 @@ if [ ! -e ~/local/.fixtures-loaded ]; then
     touch ~/local/.fixtures-loaded
 fi
 
-clojure ${CLOJURE_OPTS} -m uxbox.main
+clojure -m uxbox.main
 
 

frontend/resources/styles/common/base.scss

@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 body {
-  background-color: $secondary-ui-bg;
+  background-color: lighten($dark-ui-bg, 5%);
   color: $medium-ui-text;
   display: flex;
   flex-direction: column;

frontend/resources/styles/common/dependencies/uxbox-light.scss

@@ -21,7 +21,7 @@ $ui-flavour: $color-gray;
 // Background colors
 $primary-ui-bg: $color-gray-50;
 $secondary-ui-bg: $color-gray-60;
-$dark-ui-bg: $color-gray-40;
+$dark-ui-bg: $color-gray-10;
 
 // Border color
 $intense-ui-border: $color-gray-40;

frontend/resources/styles/main/layouts/main-layout.scss

@@ -12,10 +12,10 @@
 }
 
 .dashboard-content {
-  background-image: url("../images/dashboard-img.svg");
+  // background-image: url("../images/dashboard-img.svg");
-  background-position: bottom center;
+  // background-position: bottom center;
-  background-repeat: no-repeat;
+  // background-repeat: no-repeat;
-  background-size: 100%;
+  // background-size: 100%;
   display: flex;
   flex-direction: column;
   height: calc(100vh - 60px);

frontend/resources/styles/main/partials/dashboard-bar-v2.scss

@@ -0,0 +1,91 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+.dashboard-bar {
+  align-items: center;
+  display: flex;
+  font-size: $fs14;
+  padding: $small $medium $small $x-big*2;
+
+  .dashboard-images {
+    flex-basis: 70px;
+  }
+
+  .dashboard-info {
+    align-items: center;
+    display: flex;
+    width: 500px;
+    justify-content: space-around;
+
+    .dashboard-projects {
+      font-weight: bold;
+      margin-right: $medium;
+    }
+
+    .sort-by {
+      margin-left: $small;
+    }
+
+    .input-select {
+      background-color: transparent;
+      border-color: $soft-ui-border;
+      font-size: $fs14;
+      margin-bottom: 0;
+      margin-left: $medium;
+      padding: 3px 25px 3px 3px;
+
+      option {
+        color: $intense-ui-text;
+        background: $secondary-ui-bg;
+      }
+    }
+
+  }
+
+  .dashboard-search {
+    align-items: center;
+    display: flex;
+    margin-left: $small;
+
+    .input-text {
+      background: $input-bg;
+      border: 0;
+      color: $intense-ui-text;
+      padding: 4px 8px;
+      margin: 0;
+      max-width: 160px;
+    }
+
+    .clear-search {
+      align-items: center;
+      background: $input-bg;
+      cursor: pointer;
+      display: flex;
+      height: 28px;
+      padding: 0 5px;
+
+      svg {
+        fill: $medium-ui-icons;
+        height: 15px;
+        transform: rotate(45deg);
+        width: 15px;
+
+        &:hover {
+          fill: $color-danger;
+        }
+
+      }
+
+    }
+
+  }
+
+  &.library-gap {
+    padding: $small $medium $small 270px;
+  }
+
+}

frontend/resources/styles/main/partials/dashboard-grid-v2.scss

@@ -0,0 +1,419 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+.dashboard-grid {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-size: $fs14;
+  height: 100%;
+  padding: $medium;
+  // ACTIVITY BAR PADDING
+  //padding: $medium 250px $medium $medium;
+
+  .dashboard-title {
+    margin: $medium 0;
+    position: relative;
+    width: 100%;
+
+    h2 {
+      text-align: center;
+      width: 100%;
+      .edit {
+          padding: 5px 10px;
+          background: $primary-ui-bg;
+          border: none;
+          height: 100%;
+      }
+      .close {
+          padding: 5px 10px;
+          background: $primary-ui-bg;
+          cursor: pointer;
+          svg {
+            transform: rotate(45deg);
+            fill: $color-gray;
+            height: 20px;
+            width: 20px;
+          }
+      }
+    }
+
+    .edition {
+      align-items: center;
+      display: flex;
+      position: absolute;
+      right: 40px;
+      top: 0;
+
+      span {
+        cursor: pointer;
+
+        svg {
+          fill: $color-gray;
+          height: 20px;
+          margin: 0 10px;
+          width: 20px;
+        }
+
+        &:hover {
+
+          svg {
+            fill: $color-gray-darker;
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  .dashboard-grid-content {
+    display: flex;
+    height: 100%;
+    min-height: 60vh;
+    overflow: scroll;
+    width: 100%;
+
+    .dashboard-grid-row {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin: auto;
+      width: 100%;
+    }
+
+    .grid-item {
+      align-items: center;
+      border-radius: $br-medium;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      height: 200px;
+      margin: $medium $medium 0 $medium;
+      max-width: 300px;
+      min-width: 260px;
+      position: relative;
+      text-align: center;
+      width: 18%;
+
+      &.small-item {
+        max-width: 12%;
+        min-width: 190px;
+        padding: $medium;
+        justify-content: center;
+      }
+
+      .grid-item-icon {
+        width:90px;
+        height:90px;
+      }
+
+      .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;
+        justify-content: center;
+
+        span {
+          background-color: $color-primary-light;
+          border-radius: 5px;
+          color: $color-white;
+          font-size: $fs24;
+          padding: $small $medium;
+        }
+
+        &:hover {
+          background-color: $color-primary-light;
+          border: 2px solid $color-white;
+
+          span {
+            color: $color-white;
+          }
+
+        }
+
+      }
+
+      // PROJECTS, ELEMENTS & ICONS GRID
+      &.project-th {
+        background-color: $primary-ui-bg;
+        border-bottom: 2px solid lighten($soft-ui-border, 12%);
+
+        &:hover {
+          border-color: $main-ui-color;
+
+          h3 {
+            color: $main-ui-color;
+          }
+
+        }
+
+        .project-th-actions {
+          align-items: center;
+          bottom: 0;
+          display: flex;
+          left: 0;
+          justify-content: flex-end;
+          padding: $small;
+          position: absolute;
+          width: 100%;
+
+          svg {
+            fill: $color-gray-light;
+            height: 14px;
+            margin-right: $x-small;
+            width: 14px;
+          }
+
+          span {
+            color: $color-gray-light;
+          }
+
+          .project-th-icon {
+            align-items: center;
+            display: flex;
+            margin-right: $small;
+
+            &.delete {
+              margin-right: 0;
+
+              svg {
+                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;
+                }
+
+              }
+
+            }
+
+          }
+
+        }
+
+      }
+
+      // IMAGES SECTION
+      &.images-th {
+        background-color: $primary-ui-bg;
+        border-bottom: 2px solid lighten($color-gray-light, 12%);
+
+        &:hover {
+          border-color: $main-ui-color;
+        }
+
+      }
+
+      .grid-item-image {
+
+        svg {
+          max-height: 100px;
+          max-width: 100px;
+          min-height: 40px;
+          min-width: 40px;
+          width: 8vw;
+        }
+
+      }
+
+      .color-swatch {
+        border-top-left-radius: $br-medium;
+        border-top-right-radius: $br-medium;
+        height: 25%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+
+      .color-data {
+        color: $color-gray;
+        margin-top: 15px;
+      }
+
+      .input-checkbox {
+        margin: 0;
+        position: absolute;
+        top: 10px;
+        right: 5px;
+
+        label {
+          margin: 0;
+        }
+
+      }
+
+    }
+
+  }
+
+  // STYLES FOR LIBRARIES
+  &.library {
+    padding: $medium $medium $medium 250px;
+  }
+
+}
+
+.grid-item-th {
+  background-position: center;
+  background-size: auto 80%;
+  background-repeat: no-repeat;
+  border-top-left-radius: $br-medium;
+  border-top-right-radius: $br-medium;
+  height: 70%;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .img-th {
+    height: auto;
+    width: 100%;
+  }
+
+}
+
+// MULTISELECT OPTIONS BAR
+.multiselect-bar {
+  @include animation(0,.5s,fadeInUp);
+  align-items: center;
+  background-color: $primary-ui-bg;
+  display: flex;
+  left: 0;
+  justify-content: center;
+  padding: $medium;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+
+  .multiselect-nav {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-left: 10%;
+    width: 110px;
+
+    span {
+      margin-right: 1.5rem;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    svg {
+      cursor: pointer;
+      fill: $medium-ui-icons;
+      height: 20px;
+      width: 20px;
+
+      &:hover {
+        fill: $intense-ui-icons;
+      }
+
+    }
+
+    span.delete {
+
+      &:hover {
+
+        svg{
+          fill: $color-danger-light;
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+.move-item {
+  position: relative;
+
+  .move-list {
+    background-color: $dark-ui-bg;
+    border-radius: $br-small;
+    bottom: 30px;
+    display: flex;
+    flex-direction: column;
+    left: -30px;
+    max-height: 260px;
+    overflow-y: scroll;
+    padding: $medium;
+    position: absolute;
+    width: 260px;
+
+    li {
+      padding-bottom: $medium;
+
+      &.title {
+        color: $color-gray-darker;
+      }
+
+    }
+
+  }
+
+}

frontend/resources/styles/main/partials/dashboard-grid.scss

@@ -83,14 +83,13 @@
     .dashboard-grid-row {
       display: flex;
       flex-wrap: wrap;
-      justify-content: center;
+      margin-bottom: auto;
-      margin: auto;
       width: 100%;
     }
 
     .grid-item {
       align-items: center;
-      border-radius: $br-medium;
+      border-radius: $br-small;
       cursor: pointer;
       display: flex;
       flex-direction: column;
@@ -138,7 +137,7 @@
         }
 
         span.date {
-          color: $soft-ui-text;
+          color: $medium-ui-text;
           font-size: $fs12;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -148,42 +147,28 @@
       }
 
       &.add-project {
-        border: 2px dashed $color-gray-light;
+        border: 1px dashed $color-gray-light;
-        box-shadow: inset 0 0 0 transparent;
         justify-content: center;
 
         span {
-          background-color: $color-primary-light;
+          color: $intense-ui-text;
-          border-radius: 5px;
+          font-size: $fs15;
-          color: $color-white;
-          font-size: $fs24;
-          padding: $small $medium;
         }
 
         &:hover {
-          background-color: $color-primary-light;
+          background-color: $color-white;
-          border: 2px solid $color-white;
+          border: 2px solid $main-ui-color;
-
-          span {
-            color: $color-white;
-          }
-
         }
 
       }
 
       // PROJECTS, ELEMENTS & ICONS GRID
       &.project-th {
-        background-color: $primary-ui-bg;
+        background-color: $color-white;
-        border-bottom: 2px solid lighten($soft-ui-border, 12%);
+        border: 2px solid $dark-ui-bg;
 
         &:hover {
           border-color: $main-ui-color;
-
-          h3 {
-            color: $main-ui-color;
-          }
-
         }
 
         .project-th-actions {
@@ -204,7 +189,7 @@
           }
 
           span {
-            color: $color-gray-light;
+            color: $color-black;
           }
 
           .project-th-icon {
@@ -242,7 +227,7 @@
                 transform: scale(1.4);
 
                 svg {
-                  fill: $color-primary;
+                  fill: $soft-ui-icons;
                 }
 
               }
@@ -311,7 +296,7 @@
 
   // STYLES FOR LIBRARIES
   &.library {
-    padding: $medium $medium $medium 250px;
+    padding: $medium $medium $medium 230px;
   }
 
 }
@@ -320,8 +305,8 @@
   background-position: center;
   background-size: auto 80%;
   background-repeat: no-repeat;
-  border-top-left-radius: $br-medium;
+  border-top-left-radius: $br-small;
-  border-top-right-radius: $br-medium;
+  border-top-right-radius: $br-small;
   height: 70%;
   overflow: hidden;
   position: relative;

frontend/resources/styles/main/partials/library-bar-v2.scss

@@ -0,0 +1,123 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+.library-bar {
+  background-color: $primary-ui-bg;
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  width: 250px;
+
+  .library-bar-inside {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-top: 60px;
+
+    .library-tabs {
+      align-items: center;
+      background-color: $secondary-ui-bg;
+      display: flex;
+      justify-content: space-around;
+      margin: 0;
+      padding-top: 12px;
+
+      li {
+        background-color: darken($secondary-ui-bg, 10%);
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        color: $color-gray;
+        cursor: pointer;
+        font-weight: bold;
+        font-size: $fs14;
+        padding: .6rem;
+        text-align: center;
+        width: 118px;
+
+        &:hover {
+          color: $color-white;
+        }
+
+        &.current {
+          background-color: $primary-ui-bg;
+          color: $main-ui-color;
+        }
+
+      }
+
+    }
+
+    .library-elements {
+      display: flex;
+      flex-direction: column;
+      height: calc(95% - 1rem);
+      margin-bottom: 1rem;
+      overflow-y: auto;
+      padding-bottom: 20px;
+
+      li {
+        border-bottom: 1px solid $secondary-ui-bg;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        padding: 10px;
+
+        span.element-title {
+          color: $color-gray-dark;
+          font-weight: bold;
+          margin-bottom: 5px;
+          overflow-x: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        input.element-title {
+          border: 0;
+          height: 30px;
+          padding: 5px;
+        }
+
+        .close {
+            background: $primary-ui-bg;
+            cursor: pointer;
+            padding: 5px 10px;
+
+            svg {
+              fill: $color-gray;
+              height: 20px;
+              transform: rotate(45deg) translateY(7px);
+              width: 20px;
+            }
+        }
+
+        .element-subtitle {
+          color: $color-gray-light;
+          font-style: italic;
+        }
+
+        &:hover,
+        &.current {
+          background-color: $main-ui-color;
+
+          span.element-title,
+          .element-subtitle {
+            color: $color-white;
+          }
+          input.element-title {
+            color: $color-gray-dark;
+          }
+        }
+
+      }
+
+    }
+
+  }
+
+}

frontend/resources/styles/main/partials/library-bar.scss

@@ -6,12 +6,12 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .library-bar {
-  background-color: $primary-ui-bg;
+  background-color: $color-white;
   bottom: 0;
   height: 100%;
   left: 0;
   position: fixed;
-  width: 250px;
+  width: 230px;
 
   .library-bar-inside {
     display: flex;

frontend/resources/styles/main/partials/main-bar.scss

@@ -9,17 +9,18 @@
   align-items: center;
   background-color: $primary-ui-bg;
   display: flex;
-  height: 60px;
+  height: 40px;
   padding: $x-small $medium;
   position: relative;
   z-index: 10;
 
   .main-logo {
+    padding-top: $x-small;
 
     svg {
-      fill: $medium-ui-icons;
+      fill: $intense-ui-icons;
-      height: 40px;
+      height: 30px;
-      width: 120px;
+      width: 100px;
     }
 
   }
@@ -29,17 +30,19 @@
 .main-nav {
   align-items: center;
   display: flex;
-  height: 50px;
+  font-size: $fs15;
+  height: 35px;
   margin: 0 0 0 120px;
 
   li {
 
     a {
+      border-bottom: 2px solid transparent;
       color: $soft-ui-text;
-      padding: 1rem;
+      margin: $x-small $big;
 
       &:hover {
-        color: $intense-ui-text;
+        border-color: $main-ui-color;
       }
 
     }
@@ -47,7 +50,7 @@
     &.current {
 
       a {
-        color: $intense-ui-text;
+        border-color: $main-ui-color;
       }
 
     }

frontend/src/uxbox/main/locales/en.cljs

@@ -15,6 +15,7 @@
    "ds.num-files" ["No files"
                    "%s file"
                    "%s files"]
+   "ds.new-file" "+ New File"
    "ds.project-title" "Your projects"
    "ds.project-new" "+ New project"
    "ds.project-thumbnail.alt" "Project title"

frontend/src/uxbox/main/ui/dashboard/projects.cljs

@@ -160,9 +160,9 @@
        (str (tr "ds.updated-at" (dt/timeago (:modified-at file))))]]
 
      [:div.project-th-actions
-      [:div.project-th-icon.pages
+      ;; [:div.project-th-icon.pages
-       i/page
+      ;;  i/page
-       #_[:span (:total-pages project)]]
+      ;;  #_[:span (:total-pages project)]]
       #_[:div.project-th-icon.comments
          i/chat
          [:span "0"]]
@@ -188,11 +188,11 @@
                     #_(udl/open! :create-project))
         ]
     [:section.dashboard-grid
-     [:h2 (tr "ds.projects.file-name")]
+     ;; [:h2 (tr "ds.projects.file-name")]
      [:div.dashboard-grid-content
       [:div.dashboard-grid-row
        [:div.grid-item.add-project #_{:on-click on-click}
-        [:span (tr "ds.project-file")]]
+        [:span (tr "ds.new-file")]]
        (for [item files]
          [:& grid-item {:file item :key (:id item)}])]]]))