add user-menu (bottom left)

and its dropdowns
2014-07-09 13:25:35 +02:00 · 2014-07-09 13:25:35 +02:00 · 11b45b9745
commit 11b45b9745
parent d62091c361
4 changed files with 274 additions and 69 deletions
--- a/app/assets/images/sprite.svg
+++ b/app/assets/images/sprite.svg
@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="72px" height="48px" viewBox="0 0 72 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="72px" height="115px" viewBox="0 0 72 115" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>sprite</title>
    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
    <defs></defs>
@ -8,5 +8,10 @@
        <path d="M45.3328944,5.60631371 C45.3308944,5.35531371 45.3108944,5.09931371 45.2748944,4.84931371 C45.1998944,4.33731371 44.9348944,4.08931371 44.4168944,4.03431371 C44.2298944,4.01531371 44.0408944,4.00131371 43.8528944,4.00131371 C38.3998944,3.99931371 32.9468944,3.99931371 27.4928944,4.00331371 C27.2408944,4.00331371 26.9868944,4.03431371 26.7368944,4.07631371 C26.3468944,4.13831371 26.1258944,4.39131371 26.0628944,4.77331371 C26.0248944,5.00331371 26.0028944,5.24031371 26.0028944,5.47431371 C25.9988944,9.08131371 25.9998944,12.6893137 26.0008944,16.2963137 C26.0008944,16.3993137 26.0028944,16.5033137 26.0088944,16.6063137 C26.0568944,17.4113137 26.3448944,17.7043137 27.1528944,17.7193137 C28.2258944,17.7383137 29.2558944,17.7353137 30.3288944,17.7413137 C30.5548944,17.7433137 30.9998944,17.7413137 30.9998944,17.7413137 L30.9998944,18.0913137 C30.9998944,19.4193137 31.0418944,20.7463137 31.0458944,22.0763137 C31.0468944,22.3303137 30.9908944,22.6423137 31.2978944,22.7743137 C31.5978944,22.9033137 31.7948944,22.6513137 31.9848944,22.4773137 C33.6498944,20.9623137 35.3178944,19.4493137 36.9758944,17.9273137 C37.1278944,17.7883137 37.2808944,17.7383137 37.4818944,17.7393137 C39.5168944,17.7433137 41.5518944,17.7433137 43.5848944,17.7413137 C43.8398944,17.7413137 44.0958944,17.7313137 44.3488944,17.7083137 C44.9518944,17.6563137 45.2058944,17.4173137 45.2928944,16.8213137 C45.3188944,16.6363137 45.3328944,16.4463137 45.3328944,16.2593137 C45.3348944,12.7093137 45.3358944,9.15831371 45.3328944,5.60631371 L45.3328944,5.60631371 Z M28.9998944,7.86431371 L37.9998944,7.86431371 L37.9998944,9.86431371 L28.9998944,9.86431371 L28.9998944,7.86431371 Z M28.9998944,10.8643137 L41.9998944,10.8643137 L41.9998944,12.8643137 L28.9998944,12.8643137 L28.9998944,10.8643137 Z" id="Tickets" fill="#F0FAFF" sketch:type="MSShapeGroup"></path>
        <path d="M54.131,9.224 L49.078,9.224 C48.805,9.224 48.176,9.876 48.176,10.151 L48.176,15.224 L50.176,15.224 L50.176,20.224 L53.176,20.224 L53.176,15.224 L54.176,15.224 L54.176,9.996 C54.176,9.798 54.352,9.224 54.131,9.224 Z M51.606,8.236 C52.693,8.236 53.576,7.352 53.576,6.267 C53.576,5.181 52.693,4.296 51.606,4.296 C50.52,4.296 49.635,5.181 49.635,6.267 C49.635,7.352 50.52,8.236 51.606,8.236 Z M71.16,9.224 L66.113,9.224 C65.84,9.224 65.176,9.877 65.176,10.151 L65.176,15.224 L67.176,15.224 L67.176,20.224 L70.176,20.224 L70.176,15.224 L71.176,15.224 L71.176,10.151 C71.176,9.877 71.435,9.224 71.16,9.224 Z M68.637,8.239 C69.723,8.239 70.605,7.355 70.605,6.271 C70.605,5.185 69.723,4.3 68.637,4.3 C67.553,4.3 66.668,5.185 66.668,6.271 C66.668,7.355 67.553,8.239 68.637,8.239 Z M60.107,6.739 C61.77,6.739 63.119,5.388 63.119,3.728 C63.119,2.065 61.77,0.714 60.107,0.714 C58.447,0.714 57.096,2.065 57.096,3.728 C57.096,5.388 58.447,6.739 60.107,6.739 Z M63.695,8.224 L56.518,8.224 C56.012,8.224 55.176,8.737 55.176,9.245 L55.176,16.224 L57.176,16.224 L57.176,24.224 L62.176,24.224 L62.176,16.224 L64.176,16.224 L64.176,9.245 C64.176,8.737 64.203,8.224 63.695,8.224 Z" id="Customers" fill="#F0FAFF" sketch:type="MSShapeGroup"></path>
        <path d="M5.92009147,43.374 C3.47609147,43.358 1.50109147,41.359 1.51609147,38.916 C1.53409147,36.491 3.51809147,34.516 5.94709147,34.516 L5.97609147,34.516 C7.15809147,34.523 8.26709147,34.992 9.09709147,35.834 C9.92809147,36.674 10.3820915,37.791 10.3750915,38.974 C10.3650915,40.15 9.90309147,41.258 9.06709147,42.087 C8.23309147,42.917 7.12309147,43.374 5.94909147,43.374 L5.92009147,43.374 M5.98309147,33 L5.94509147,33 C2.68109147,33 0.0220914661,35.636 9.14660647e-05,38.907 C-0.0179085339,42.191 2.62309147,44.869 5.90709147,44.89 L5.94909147,44.89 C7.03809147,44.89 8.06209147,44.596 8.94009147,44.08 L12.5530915,47.695 L12.6450915,47.783 C12.7820915,47.92 12.9600915,47.988 13.1390915,47.988 C13.3180915,47.988 13.4970915,47.92 13.6330915,47.783 L14.7970915,46.622 C15.0690915,46.348 15.0690915,45.905 14.7970915,45.633 L14.7060915,45.54 L11.0880915,41.924 C11.5930915,41.058 11.8830915,40.056 11.8900915,38.983 C11.9140915,35.699 9.26709147,33.022 5.98309147,33" id="Search" fill-opacity="0.5" fill="#ECECEC" sketch:type="MSShapeGroup"></path>
+        <path d="M20,67.09 L20,64.814 L19.678,64.709 L17.242,63.914 L16.592,62.344 L17.842,59.701 L16.232,58.09 L15.93,58.246 L13.644,59.405 L12.076,58.755 L11.09,56 L8.814,56 L7.914,58.758 L6.344,59.408 L3.699,58.16 L2.09,59.768 L2.244,60.072 L3.402,62.356 L2.754,63.925 L0,64.911 L0,67.187 L0.32,67.291 L2.758,68.088 L3.408,69.656 L2.158,72.301 L3.768,73.911 L4.068,73.757 L6.353,72.597 L7.924,73.248 L8.91,76 L11.186,76 L11.291,75.68 L12.086,73.244 L13.654,72.594 L16.299,73.842 L17.908,72.234 L17.756,71.932 L16.596,69.648 L17.246,68.078 L20,67.09 L20,67.09 Z M10,69.188 C8.24,69.188 6.812,67.762 6.812,66 C6.812,64.24 8.24,62.815 10,62.815 C11.76,62.815 13.185,64.24 13.185,66 C13.185,67.762 11.76,69.188 10,69.188 L10,69.188 Z" id="cog" fill="#4D4D4D" sketch:type="MSShapeGroup"></path>
+        <path d="M20,87.09 L20,84.814 L19.678,84.709 L17.242,83.914 L16.592,82.344 L17.842,79.701 L16.232,78.09 L15.93,78.246 L13.644,79.405 L12.076,78.755 L11.09,76 L8.814,76 L7.914,78.758 L6.344,79.408 L3.699,78.16 L2.09,79.768 L2.244,80.072 L3.402,82.356 L2.754,83.925 L0,84.911 L0,87.187 L0.32,87.291 L2.758,88.088 L3.408,89.656 L2.158,92.301 L3.768,93.911 L4.068,93.757 L6.353,92.597 L7.924,93.248 L8.91,96 L11.186,96 L11.291,95.68 L12.086,93.244 L13.654,92.594 L16.299,93.842 L17.908,92.234 L17.756,91.932 L16.596,89.648 L17.246,88.078 L20,87.09 L20,87.09 Z M10,89.188 C8.24,89.188 6.812,87.762 6.812,86 C6.812,84.24 8.24,82.815 10,82.815 C11.76,82.815 13.185,84.24 13.185,86 C13.185,87.762 11.76,89.188 10,89.188 L10,89.188 Z" id="dark-cog" fill="#26272E" sketch:type="MSShapeGroup"></path>
+        <path d="M31,66 L31,59 L30,59 L30,66 L23,66 L23,67 L30,67 L30,74 L31,74 L31,67 L38,67 L38,66 L31,66 Z" id="green-plus" stroke="#38AE6A" stroke-width="2" sketch:type="MSShapeGroup"></path>
+        <path d="M31,86 L31,79 L30,79 L30,86 L23,86 L23,87 L30,87 L30,94 L31,94 L31,87 L38,87 L38,86 L31,86 Z" id="white-plus" stroke="#FFFFFF" stroke-width="2" sketch:type="MSShapeGroup"></path>
+        <path d="M5.324,110.89 L11.883,105.477 L5.324,100.064 L5.324,103.596 L0,103.596 L0,107.358 L5.324,107.358 L5.324,110.89 L5.324,110.89 Z M3.644,96 L3.644,97.542 L13.052,97.542 L13.052,113.459 L3.644,113.459 L3.644,115 L14.593,115 L14.593,96 L3.644,96 L3.644,96 Z" id="sign-out" fill="#0F94D7" sketch:type="MSShapeGroup"></path>
    </g>
 </svg>
--- a/app/assets/javascripts/app/controllers/navigation.js.coffee
+++ b/app/assets/javascripts/app/controllers/navigation.js.coffee
@ -49,30 +49,30 @@ class App.Navigation extends App.Controller

    # remove result if not result exists
    if _.isEmpty( result )
-      @el.find('#global-search').parents('li').removeClass('open')
+      @el.find('.dropdown').removeClass('open')
      el.html( '' )

      # remove old popovers
      $('.popover').remove()
      return

-    # show result list
-    @el.find('#global-search').parents('li').addClass('open')
-
    # build markup
    html = App.view('navigation/result')(
      result: result
    )
    el.html( html )

+    # show result list
+    @el.find('.dropdown').addClass('open')
+
    # start ticket popups
-    @ticketPopups('left')
+    @ticketPopups()

    # start user popups
-    @userPopups('left')
+    @userPopups()

    # start oorganization popups
-    @organizationPopups('left')
+    @organizationPopups()

  render: () ->
    user      = App.Session.all()
--- a/app/assets/javascripts/app/views/navigation.jst.eco
+++ b/app/assets/javascripts/app/views/navigation.jst.eco
@ -1,7 +1,20 @@
-<form class="search horizontal">
+<form class="search horizontal dropdown">
  <input id="global-search" class="flex" type="search" autocomplete="off">
  <div class="logo" title="<%- @C( 'product_name' ) %>"></div>
-  <ul id="global-search-result" class="dropdown-menu"></ul>
+  <ul id="global-search-result" class="dropdown-menu" role="menu">
+    
+  <li class="divider" style="padding: 2px 10px; height: auto; margin: 4px 0px;">Ticket</li>
+  
+    <li><a href="#ticket/zoom/1" class="ticket-popover" data-id="1" data-original-title="" title="">#10001 - Welcome to Zammad! - 5 d 19 h</a></li>
+  
+
+  <li class="divider" style="padding: 2px 10px; height: auto; margin: 4px 0px;">User</li>
+  
+    <li><a href="#user/zoom/2" class="user-popover" data-id="2" data-original-title="" title="">Nicole Braun</a></li>
+  
+
+
+  </ul>
 </form>
 <ul class="nav navbar-nav">
  <li class="dashboard active"><a href="#">Dashboard</a></li>
@ -28,35 +41,74 @@
  <li class="customers"><a href="#">Customers</a></li>
 </ul>

-<div class="tabs flex"></div>
+<div class="tasks flex"></div>
 <!-- <div class="spinner"></div> -->

 <% if !_.isEmpty(@user): %>
-  <ul class="nav navbar-nav">
+<ul class="user-menu horizontal stretch">

-    <li class="bell"><a href="#bell" class="glyphicon glyphicon-bell"></a></li>
+  <!--<a href="#bell" class="glyphicon glyphicon-bell"></a>-->
+  <li class="user dropup">
+    <div class="list-button horizontal centered">
+      <span class="dropdown-nose"></span>
+      <span class="user avatar" style="background-image: url(https://pbs.twimg.com/profile_images/3510491848/156dbaec406561cb3e680dc3795b0f86.jpeg)"></span>
+    </div>
+    <ul class="dropdown-menu" role="menu">
+      <li><a href="#profile"><%- @Ti( 'Edit profile' ) %></a></li>
+      <li class="divider"></li>
+      <li><a href="#shortcuts"><%- @Ti( 'My Shortcuts' ) %></a></li>
+      <li class="divider"></li>
+      <li>
+        <a href="#logout" class="horizontal">
+          <span class="flex"><%- @Ti( 'Sign out' ) %></span>
+          <span class="signout icon"></span>
+        </a>
+      </li>
+    </ul>
+  </li>

-    <% for item in @navbar_right: %>
-      <% if item.child: %>
-        <li class="dropdown <% if @open_tab[item.target] : %>open<% end %>">
-          <a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown"><%- @T( item.name ) %> <b class="caret"></b></a>
-          <ul class="dropdown-menu">
-            <% for item in item.child: %>
-              <% if item.divider: %>
-                <li class="divider"></li>
-              <% end %>
-              <% if item.navheader: %>
-                <li class="dropdown-header"><%- @T( item.navheader ) %></li>
-              <% end %>
-              <li class="<% if @active_tab[item.target] : %>active<% end %>"><a href="<%= item.target %>"><%- @T( item.name ) %><% if item['count'] isnt undefined: %><span class="badge count"><%= item['count'] %>)</span><% end %></a></li>
+  <li class="settings active">
+    <a class="list-button fit horizontal centered" href="#manage">
+      <span class="light cog icon"></span>
+      <span class="dark cog icon"></span>
+    </a>
+  </li>
+
+  <li class="add dropup">
+    <div class="list-button horizontal centered">
+      <span class="dropdown-nose"></span>
+      <span class="green plus icon"></span>
+      <span class="white plus icon"></span>
+    </div>
+    <ul class="dropdown-menu" role="menu">
+      <li><a><%- @Ti( 'New Ticket' ) %></a></li>
+      <li class="divider"></li>
+      <li><a><%- @Ti( 'New Organisation' ) %></a></li>
+      <li class="divider"></li>
+      <li><a><%- @Ti( 'New Customer' ) %></a></li>
+    </ul>
+  </li>
+  <!--<% for item in @navbar_right: %>
+    <% if item.child: %>
+      <li class="dropdown <% if @open_tab[item.target] : %>open<% end %>">
+        <a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown"><%- @T( item.name ) %> <b class="caret"></b></a>
+        <ul class="dropdown-menu">
+          <% for item in item.child: %>
+            <% if item.divider: %>
+              <li class="divider"></li>
            <% end %>
-          </ul>
-        </li>
-      <% else: %>
-        <li class="<% if @active_tab[item.target] : %>active<% end %>"><a href="<%= item.target %>"><%- @T( item.name ) %></a></li>
-      <% end %>
+            <% if item.navheader: %>
+              <li class="dropdown-header"><%- @T( item.navheader ) %></li>
+            <% end %>
+            <li class="<% if @active_tab[item.target] : %>active<% end %>"><a href="<%= item.target %>"><%- @T( item.name ) %><% if item['count'] isnt undefined: %><span class="badge count"><%= item['count'] %>)</span><% end %></a></li>
+          <% end %>
+        </ul>
+      </li>
+    <% else: %>
+      <li class="<% if @active_tab[item.target] : %>active<% end %>"><a href="<%= item.target %>"><%- @T( item.name ) %></a></li>
    <% end %>
-  </ul>
+  <% end %>-->
+</ul>
 <% else: %>
  <!--
  <ul class="nav navbar-nav navbar-right">
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@ -518,7 +518,7 @@ label {
  padding-top: 20px;
 }
 .page-header .page-header-meta ul.pagination {
-  margin: 0 0 0 0;
+  margin: 0;
 }

 .dropdown-menu {
@ -747,11 +747,40 @@ ol.tabs li {
    background-image: url(<%= asset_path "twitter.svg" %>);
  }

+.icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-image: url(<%= asset_path "sprite.svg" %>);
+}
+
+  .light.cog.icon {
+    background-position: 0 -56px;
+  }
+
+  .dark.cog.icon {
+    background-position: 0 -76px;
+  }
+
+  .green.plus.icon {
+    background-position: -20px -56px;
+  }
+
+  .white.plus.icon {
+    background-position: -20px -76px;
+  }
+
+  .signout.icon {
+    width: 15px;
+    height: 19px;
+    background-position: 0 -96px;
+  }
+
 /*
 * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
 */
 form {
-  margin: 0 0 0 0;
+  margin: 0;
 }

 .form-controls {
@ -923,17 +952,6 @@ footer {
  }
 }

-.avatar {
-  padding-left: 6px;
-  padding-top: 4px;
-  width: 70px;
-  float: left;
-  overflow: hidden;
-}
-.avatar ul {
-  padding-left: 20px;
-}
-
 .ticket-article-view {
  max-width: 750px;
 }
@ -1129,12 +1147,6 @@ footer {
  border-color: #419ed7;
 }

-.logo {
-  width: 41px;
-  height: 36px;
-  background: url(<%= asset_path "logo.svg" %>);
-}
-
 .navigation {
  width: 260px;
  background: #26272e;
@ -1189,31 +1201,167 @@ footer {
    background-position: -48px 0;
  }

+.tasks {
+  background: #2c2d36; 
+}
+
 .search {
  padding: 10px 15px 10px 10px;
  border-bottom: 1px solid rgba(240, 250, 255, .05);
 }

-.search input {
-  padding: 5px 10px 5px 33px;
-  margin-right: 15px;
-  width: 100px;
-  height: 30px;
-  color: #ECECEC;
-  line-height: 20px;
-  background: #31373b url(<%= asset_path "sprite.svg" %>) no-repeat 10px -26px;
-  outline: none;
-  border: none;
-  border-radius: 15px;
-}
+  .search input {
+    padding: 5px 10px 5px 33px;
+    margin-right: 15px;
+    height: 30px;
+    color: #ECECEC;
+    line-height: 20px;
+    background: #31373b url(<%= asset_path "sprite.svg" %>) no-repeat 10px -26px;
+    outline: none;
+    border: none;
+    border-radius: 15px;
+    transition: 240ms;
+    position: relative;
+    z-index: 1;
+  }

-.search .logo {
-  cursor: pointer;
-}
+  .search input:focus {
+    margin-right: -46px;
+  }

-.navbar_l2 {
-  overflow: hidden;
-  height: 100%;
+  .search input:focus + .logo {
+    opacity: 0;
+  }
+
+  .search .logo {
+    width: 41px;
+    height: 36px;
+    background: url(<%= asset_path "logo.svg" %>);
+    transition: 240ms;
+    cursor: pointer;
+  }
+
+  .user-menu {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    position: relative;
+  }
+
+    .user-menu > li {
+      background: #26272e;
+    }
+
+    .user-menu .list-button {
+      height: 60px;
+      position: relative;
+      cursor: pointer;
+      z-index: 1001;
+    }
+    
+    .user-menu .list-button *:not(.dropdown-nose) {
+      position: relative;
+    }
+
+    .user-menu > li:hover .list-button:before {
+      content: '';
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      bottom: 4px;
+      left: 4px;
+      background: white;
+    }
+
+    .user-menu li.add:hover .list-button:before {
+      background: #38ae6a;
+    }
+
+    .user-menu .dark.cog,
+    .user-menu > li:hover .light.cog,
+    .user-menu > li.active .light.cog,
+    .user-menu .white.plus,
+    .user-menu > li:hover .green.plus,
+    .user-menu > li.active .green.plus {
+      display: none;
+    }
+
+    .user-menu > li.settings:hover .dark.cog,
+    .user-menu > li.settings.active .dark.cog,
+    .user-menu > li.add:hover .white.plus,
+    .user-menu > li.add.active .white.plus {
+      display: block;
+    }
+
+    .user-menu > li:not(:last-child) {
+      border-right: 1px solid #2c2d36;
+    }
+
+  .dropdown-nose {
+    position: absolute;
+    border: 7px solid transparent;
+    border-bottom: none;
+    border-top: 7px solid white;
+    left: 50%;
+    margin-left: -7px;
+    top: -6px;
+    display: none;
+  }
+
+  li.add .dropdown-nose {
+    border-top-color: #38af6e;
+  }
+
+  .open.dropdown .dropdown-nose,
+  .open.dropup .dropdown-nose {
+    display: block;
+  }
+
+  .user-menu .dropdown-menu {
+    padding: 0;
+    border-radius: 0;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    min-width: 235px;
+  }
+
+    .user-menu li.add .dropdown-menu {
+      background-color: #38af6e;
+    }
+
+    .user-menu li.add .dropdown-menu > li > a {
+      color: white;
+    }
+
+    .user-menu li.add .dropdown-menu .divider {
+      background: #4cb77c;
+    }
+
+  .user-menu .dropdown-menu:after {
+  }
+
+  .user-menu .dropdown-menu .divider {
+    margin: 0;
+  }
+
+  .user-menu .dropdown-menu > li > a {
+    height: 40px;
+    padding: 10px 15px;
+    color: #2594d4;
+  }
+
+  .user-menu .dropdown-menu > li > a:hover {
+    background: rgba(0,0,0,.05);    
+  }
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 100%;
+  display: inline-block;
+  vertical-align: bottom;
 }

 .sidebar {