add new ticket plus to overviews

app/assets/javascripts/app/controllers/ticket_overview.coffee

@@ -78,6 +78,7 @@ class App.TicketOverview extends App.Controller
 
 class Navbar extends App.Controller
   elements:
+    '.js-tabsHolder': 'tabsHolder'
     '.js-tabsClone': 'clone'
     '.js-tabClone': 'tabClone'
     '.js-tabs': 'tabs'
@@ -122,19 +123,25 @@ class Navbar extends App.Controller
     if @bindId
       App.OverviewIndexCollection.unbind(@bindId)
 
+  trimName: (name) ->
+    start = if name.indexOf('All') > -1 then 4 else 0;
+    shortname = name.substr start, name.indexOf('Tickets') - 1 - start
+    return shortname.charAt(0).toUpperCase() + shortname.slice(1);
+
   autoFoldTabs: =>
     items = App.OverviewIndexCollection.get()
     @html App.view("agent_ticket_view/navbar#{ if @vertical then '_vertical' }")
       items: items
+      trimName: @trimName
 
-    while @clone.width() > @el.width()
+    while @clone.width() > @tabsHolder.width()
       @tabClone.not('.hide').last().addClass('hide')
       @tab.not('.hide').last().addClass('hide')
       @dropdownItem.filter('.hide').last().removeClass('hide')
 
     # if all tabs are visible
     # remove dropdown and dropdown button
-    if @dropdownItem.filter('.hide').size() is 0
+    if @dropdownItem.not('.hide').size() is 0
       @dropdown.remove()
       @dropdownToggle.remove()
 
@@ -172,6 +179,7 @@ class Navbar extends App.Controller
 
     @html App.view("agent_ticket_view/navbar#{ if @vertical then '_vertical' else '' }")
       items: data
+      trimName: @trimName
 
     if @vertical
       @autoFoldTabs()

app/assets/javascripts/app/views/agent_ticket_view/navbar.jst.eco

@@ -3,7 +3,7 @@
     <% for item in @items: %>
       <li <% if item.active: %>class="active"<% end %>>
         <a class="horizontal center" href="<%= item.target %>">
-          <span class="local u-textTruncate"><%- @T(item.name) %></span>
+          <span class="local u-textTruncate"><%- @T(@trimName(item.name)) %></span>
           <span class="badge badge--text"><%= item.count %></span>
         </a>
       </li>

app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco

@@ -1,15 +1,16 @@
+<div class="tabsHolder js-tabsHolder">
   <div class="tabs tabs--inline tabs--big js-tabs">
     <% if @items: %>
       <% for item in @items: %>
         <a class="tab js-tab<%= ' active' if item.active %>" href="<%= item.target %>">
-        <span class="tab-name"><%- @T(item.name) %></span>
+          <span class="tab-name"><%- @T(@trimName(item.name)) %></span>
           <span class="tab-badge"><%= item.count %></span>
         </a>
       <% end %>
       <ul class="dropdown dropdown--actions dropdown--wide dropdown-menu dropdown-menu-right js-dropdown" role="menu" aria-labelledby="userAction">
         <% for item in @items: %>
           <li class="js-dropdownItem hide<%= ' active' if item.active %>" role="presentation" data-target="<%= item.target %>" role="menuitem" tabindex="-1">
-          <span class="flex u-textTruncate"><%- @T( item.name ) %></span>
+            <span class="flex u-textTruncate"><%- @T(@trimName(item.name)) %></span>
             <span class="badge badge--text"><%= item.count %></span>
         <% end %>
       </ul>
@@ -19,11 +20,15 @@
       </div>
     <% end %>
   </div>
+</div>
+<a class="btn btn--success btn--quad" href="#ticket/create">
+  <%- @Icon('plus') %>
+</a>
 <% if @items: %>
 <div class="tabs tabs--inline tabs--big u-invisible js-tabsClone">
   <% for item in @items: %>
     <a class="tab js-tabClone<%= ' active' if item.active %>" href="<%= item.target %>">
-      <span class="tab-name"><%- @T(item.name) %></span>
+      <span class="tab-name"><%- @T(@trimName(item.name)) %></span>
       <span class="tab-badge"><%= item.count %></span>
     </a>
   <% end %>

app/assets/stylesheets/zammad.scss

@@ -70,7 +70,7 @@ strong {
 .u-invisible {
   opacity: 0;
   pointer-events: none;
-  position: absolute;
+  position: absolute !important;
 }
 
 a {
@@ -270,7 +270,7 @@ blockquote {
   
   .icon {
     vertical-align: middle;
-    margin-top: -3px;
+    margin-top: -1px; // more negative margin top looks bad on the btn--quad plus in overviews
   }
 
   &.btn--icon--last .icon {
@@ -368,6 +368,7 @@ blockquote {
   &.btn--success {
     color: white;
     background: hsl(145,51%,45%);
+    
     &:active {
       background: hsl(145,51%,35%);
     }
@@ -380,6 +381,10 @@ blockquote {
         background: hsl(0,0%,98%);
       }
     }
+
+    .icon {
+      fill: white;
+    }
   }
 
   &.btn--danger {
@@ -455,6 +460,10 @@ blockquote {
     }
   }
 
+  &.btn--quad {
+    padding: 10px 12px 9px;
+  }
+
   &.btn--split--first {
     border-radius: 3px 0 0 3px;
   }
@@ -2083,7 +2092,7 @@ ol.tabs li {
     
     .tab {
       height: auto;
-      padding: 10px 24px;
+      padding: 10px 23px 9px;
     }
 
     .tab-dropdown {
@@ -2355,16 +2364,26 @@ footer {
       display: none;
     }
   }
+  .main {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 }
 
 .overview-header {
   position: relative;
-  height: 92px;
+  margin: 20px 0 32px;
+  height: 41px;
   display: none;
+  align-items: center;
+  
+  .tabsHolder {
+    flex: 1;
+    margin-right: 20px;
+  }
   
   .tabs {
-    margin-top: 20px;
+    margin: 0;
-    margin-bottom: 32px;
     position: relative;
   }
 
@@ -2374,7 +2393,7 @@ footer {
   }
 
   @media only screen and (max-width: $largeScreenBreakpoint) {
-    display: block;
+    display: flex;
   }
 }