From 86c615ef4716443898e174286acc7443803cfc59 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Thu, 5 Nov 2015 12:04:29 +0100
Subject: [PATCH] add new ticket plus to overviews

---
 .../app/controllers/ticket_overview.coffee    | 12 +++++-
 .../views/agent_ticket_view/navbar.jst.eco    |  2 +-
 .../agent_ticket_view/navbar_vertical.jst.eco | 43 +++++++++++--------
 app/assets/stylesheets/zammad.scss            | 33 +++++++++++---
 4 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/ticket_overview.coffee b/app/assets/javascripts/app/controllers/ticket_overview.coffee
index 9546cdb88..c928a205e 100644
--- a/app/assets/javascripts/app/controllers/ticket_overview.coffee
+++ b/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()
diff --git a/app/assets/javascripts/app/views/agent_ticket_view/navbar.jst.eco b/app/assets/javascripts/app/views/agent_ticket_view/navbar.jst.eco
index b49617456..1f3ee8ab1 100644
--- a/app/assets/javascripts/app/views/agent_ticket_view/navbar.jst.eco
+++ b/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>
diff --git a/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco b/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco
index e3c5b015b..5719f12c9 100644
--- a/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco
+++ b/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco
@@ -1,29 +1,34 @@
-<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-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">
+<div class="tabsHolder js-tabsHolder">
+  <div class="tabs tabs--inline tabs--big js-tabs">
+    <% if @items: %>
       <% 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="badge badge--text"><%= item.count %></span>
+        <a class="tab js-tab<%= ' active' if item.active %>" href="<%= item.target %>">
+          <span class="tab-name"><%- @T(@trimName(item.name)) %></span>
+          <span class="tab-badge"><%= item.count %></span>
+        </a>
       <% end %>
-    </ul>
-    <div class="tab tab-dropdown js-toggle" data-toggle="dropdown">
-      <%- @Icon('dropdown-list') %>
-      <%- @Icon('arrow-down', 'arrow') %>
-    </div>
-  <% 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(@trimName(item.name)) %></span>
+            <span class="badge badge--text"><%= item.count %></span>
+        <% end %>
+      </ul>
+      <div class="tab tab-dropdown js-toggle" data-toggle="dropdown">
+        <%- @Icon('dropdown-list') %>
+        <%- @Icon('arrow-down', 'arrow') %>
+      </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 %>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index ac6be1bba..b2c0cc5af 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/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-bottom: 32px;
+    margin: 0;
     position: relative;
   }
 
@@ -2374,7 +2393,7 @@ footer {
   }
 
   @media only screen and (max-width: $largeScreenBreakpoint) {
-    display: block;
+    display: flex;
   }
 }