workspace header adapted to multi-user

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

@@ -0,0 +1,121 @@
+// 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>
+
+.main-bar {
+  align-items: center;
+  background-color: $primary-ui-bg;
+  display: flex;
+  height: 60px;
+  padding: $x-small $medium;
+  position: relative;
+  z-index: 10;
+
+  .main-logo {
+
+    svg {
+      fill: $medium-ui-icons;
+      height: 40px;
+      width: 120px;
+    }
+
+  }
+
+}
+
+.main-nav {
+  align-items: center;
+  display: flex;
+  height: 50px;
+  margin: 0 0 0 120px;
+
+  li {
+
+    a {
+      color: $soft-ui-text;
+      padding: 1rem;
+
+      &:hover {
+        color: $intense-ui-text;
+      }
+
+    }
+
+    &.current {
+
+      a {
+        color: $intense-ui-text;
+      }
+
+    }
+
+  }
+
+}
+
+.user-zone {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  margin-left: auto;
+  position: relative;
+
+  span {
+    color: $medium-ui-text;
+    margin: $small;
+  }
+
+  img {
+    border-radius: 50%;
+    flex-shrink: 0;
+    height: 32px;
+    width: 32px;
+  }
+
+  .dropdown {
+    background-color: $secondary-ui-bg;
+    border-radius: $br-small;
+    border: 1px solid $soft-ui-border;
+    min-width: 150px;
+    padding: 0 $small;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    z-index: 12;
+    @include animation(0,.2s,fadeInDown);
+
+    li {
+      font-size: $fs13;
+      padding: $small 0;
+
+      svg {
+        fill: $medium-ui-text;
+        height: 12px;
+        width: 12px;
+      }
+
+      span {
+        color: $medium-ui-text;
+      }
+
+      &:hover {
+
+        span {
+          color: $intense-ui-text;
+        }
+
+        svg {
+          fill: $intense-ui-text;
+        }
+
+      }
+
+    }
+
+  }
+
+}

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

@@ -71,8 +71,8 @@
   img {
     border-radius: 50%;
     flex-shrink: 0;
-    height: 32px;
+    height: 25px;
-    width: 32px;
+    width: 25px;
   }
 
   .dropdown {

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

@@ -157,67 +157,67 @@
 
     }
 
-    .options-view {
+  }
+
+  .options-view {
+    align-items: center;
+    display: flex;
+    justify-content: content;
+    margin: 0;
+
+    li {
       align-items: center;
       display: flex;
-      justify-content: content;
+      flex-shrink: 0;
-      margin: 0;
+      height: 30px;
+      margin: 0 $small;
+      position: relative;
+      width: 60px;
 
-      li {
+      &.zoom-input {
-        align-items: center;
+        width: 85px;
-        display: flex;
+        padding: 0 25px;
-        flex-shrink: 0;
-        height: 30px;
-        margin: 0 $small;
         position: relative;
-        width: 60px;
 
-        &.zoom-input {
+        .add-zoom,
-          width: 85px;
+        .remove-zoom {
-          padding: 0 25px;
+          align-items: center;
-          position: relative;
+          border-radius: 50%;
+          border: 1px solid $intense-ui-border;
+          cursor: pointer;
+          color: $intense-ui-border;
+          display: none;
+          flex-shrink: 0;
+          font-size: $fs20;
+          font-weight: bold;
+          height: 20px;
+          justify-content: center;
+          position: absolute;
+          top: 5px;
+          width: 20px;
+
+          &:hover {
+            border-color: $color-primary;
+            color: $color-primary;
+          }
+
+        }
+
+        .add-zoom {
+          left: -5px;
+        }
+
+        .remove-zoom {
+          padding-top: 4px;
+          right: -5px;
+        }
+
+        &:hover {
 
           .add-zoom,
           .remove-zoom {
-            align-items: center;
+            display: flex;
-            border-radius: 50%;
+            @include animation(0s,.3s,fadeIn);
-            border: 1px solid $intense-ui-border;
-            cursor: pointer;
-            color: $intense-ui-border;
-            display: none;
-            flex-shrink: 0;
-            font-size: $fs20;
-            font-weight: bold;
-            height: 20px;
-            justify-content: center;
-            position: absolute;
-            top: 5px;
-            width: 20px;
-
-            &:hover {
-              border-color: $color-primary;
-              color: $color-primary;
-            }
-
-          }
-
-          .add-zoom {
-            left: -5px;
-          }
-
-          .remove-zoom {
-            padding-top: 4px;
-            right: -5px;
-          }
-
-          &:hover {
-
-            .add-zoom,
-            .remove-zoom {
-              display: flex;
-              @include animation(0s,.3s,fadeIn);
-            }
-
           }
 
         }
@@ -281,3 +281,23 @@
   }
 
 }
+
+.user-multi {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  margin: 0;
+  
+  li {
+    margin-left: $small;
+    position: relative;
+
+    img {
+      border: 3px solid #f3dd14;
+      border-radius: 50%;
+      flex-shrink: 0;
+      height: 25px;
+      width: 25px;
+    }
+  }
+}

frontend/src/uxbox/main/ui/workspace/header.cljs

@@ -53,12 +53,20 @@
     [:header#workspace-bar.workspace-bar
      [:div.main-icon
       [:a {:on-click #(st/emit! (rt/nav :dashboard-projects))} i/logo-icon]]
+
      [:div.project-tree-btn
       {:alt (tr "header.sitemap")
        :class (when (contains? layout :sitemap) "selected")
        :on-click #(st/emit! (dw/toggle-layout-flag :sitemap))}
       i/project-tree
-      [:span {} "Project name / File name / "(:name page)]]
+      [:span {} "Project name / File name";(:name page)
+      ]]
+
+     [:ul.user-multi
+      [:li.tooltip.tooltip-bottom
+       {:alt "USER_NAME"}
+       [:img {:src "images/avatar.jpg"}]]] 
+
      [:div.workspace-options
       [:ul.options-btn
        [:li.tooltip.tooltip-bottom
@@ -134,6 +142,7 @@
         {:alt (tr "header.view-mode")
          ;; :on-click #(st/emit! (dw/->OpenView (:id page)))
          }
-        i/play]]
+        i/play]]]
-      [:& zoom-widget]]
+     ;;[:& user]
-     [:& user]]))
+     [:& zoom-widget]
+     ]))