Merge branch 'develop' of github.com:martini/zammad into develop

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

@@ -345,6 +345,7 @@ class Table extends App.Controller
         groupBy:        @overview.group_by
         orderBy:        @overview.order.by
         orderDirection: @overview.order.direction
+        class: 'table--light'
         bindRow:
           events:
             'click':  openTicket

app/assets/javascripts/app/controllers/users.coffee

@@ -57,6 +57,7 @@ class Index extends App.Controller
         display:    'Action'
         className:  'actionCell'
         translation: true
+        width: '222px'
       header.push attribute
       header
 

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

@@ -1,4 +1,4 @@
-<div class="tabs wide-tabs js-tabs">
+<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 %>">
@@ -20,7 +20,7 @@
   <% end %>
 </div>
 <% if @items: %>
-<div class="tabs wide-tabs u-invisible js-tabsClone">
+<div class="tabs 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>

app/assets/javascripts/app/views/dashboard.jst.eco

@@ -1,5 +1,5 @@
 <div class="dashboard main flex center">
-  <div class="tabs wide-tabs">
+  <div class="tabs tabs--big">
     <div class="tab active" data-area="stat-widgets"><%- @T('My Stats') %></div>
     <div class="tab" data-area="first-steps-widgets"><%- @T('First Steps') %></div>
   </div>

app/assets/javascripts/app/views/generic/table.jst.eco

@@ -1,4 +1,4 @@
-<table class="table table-hover<%- @class if @class %>">
+<table class="table table-hover<%- " #{@class}" if @class %>">
   <thead>
     <tr>
     <% if @checkbox: %>

app/assets/javascripts/app/views/layout_ref/content.jst.eco

@@ -6,7 +6,7 @@
 
 
   <h2>Tabs</h2>
-  <div class="tabs wide-tabs">
+  <div class="tabs tabs--big">
     <div class="tab my-stats active">My Stats</div>
     <div class="tab my-groups">My Group</div>
     <div class="tab all-stats">All</div>

app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco

@@ -355,7 +355,7 @@
     </div>
     <div class="profile-section">
       <!-- if user has organization -->
-      <div class="tabs wide-tabs">
+      <div class="tabs tabs--big">
         <div class="tab js-userTickets active">Tickets von Doreen Kubiak</div>
         <div class="tab js-organizationTickets">Tickets von Steuerbüro C. Kaik</div>
       </div>

app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco

@@ -57,7 +57,7 @@
     </div>
     <div class="profile-section">
       <!-- if user has organization -->
-      <div class="tabs wide-tabs">
+      <div class="tabs tabs--big">
         <div class="tab js-userTickets active">Tickets von Doreen Kubiak</div>
         <div class="tab js-organizationTickets">Tickets von Steuerbüro C. Kaik</div>
       </div>

app/assets/javascripts/app/views/widget/ticket_stats.jst.eco

@@ -1,5 +1,5 @@
 <% if @user && @user.organization: %>
-  <div class="tabs wide-tabs horizontal">
+  <div class="tabs tabs--big">
     <div class="tab js-userTab active"><%- @T('Tickets of User') %> <%- "(" + @user_total + ")" %></div>
     <div class="tab js-orgTab"><%- @T('Tickets of Organization') %> <%- "(" + @org_total + ")" %></div>
   </div>

app/assets/stylesheets/zammad.scss

@@ -27,7 +27,7 @@ body {
   font-weight: normal;
   background: hsl(210,14%,97%);
   height: 100%;
-  color: hsl(198,19%,72%);
+  color: hsl(60,1%,34%);
   word-wrap: break-word;
   overflow-wrap: break-word;
   display: flex;
@@ -41,7 +41,6 @@ use {
 
 p {
   margin: 14px 0;
-  color: hsl(60,1%,34%);
 
   &.subtle {
     color: hsl(60,1%,74%);
@@ -698,6 +697,10 @@ table {
   display: table;
 }
 
+.table--light {
+  color: hsl(198,19%,72%);
+}
+
 .table-fluid {
   table-layout: auto;
 }
@@ -2063,16 +2066,24 @@ ol.tabs li {
     font-size: 0.95em;
   }
 
-  .wide-tabs {
+  .tabs.tabs--inline {
-    margin: 25px 0 20px;
+    display: inline-flex;
+    margin-left: 0;
+    margin-right: 0;
+    
+    .tab {
+      flex: none;
+    }
+  }
+
+  .tabs--big {
+    margin: 25px auto 20px;
     font-size: 14px;
     border-radius: 8px;
-    display: inline-flex;
     
     .tab {
       height: auto;
       padding: 10px 24px;
-      flex-grow: 0;
     }
 
     .tab-dropdown {
@@ -2081,25 +2092,18 @@ ol.tabs li {
     }
   }
 
-  .dashboard .wide-tabs {
+  .tabs--big .tab:first-child {
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    
-    .tab {
-      flex: 1;
-    }
-  }
-
-  .wide-tabs .tab:first-child {
     border-radius: 8px 0 0 8px;
   }
 
-  .wide-tabs .tab:last-child {
+  .tabs--big .tab:last-child {
     border-radius: 0 8px 8px 0;
   }
 
+  .dashboard .tabs--big {
+    width: 50%;
+  }
+
 .separator {
   margin: 20px 0;
   position: relative;
@@ -4933,6 +4937,7 @@ footer {
 }
 
 .type-tabs .tab {
+  height: 40px;
   line-height: 42px;
   padding: 0 12px 0 12px;
   list-style: none;
@@ -5313,6 +5318,10 @@ footer {
     display: block;
   }
 
+  .dropdown-menu .badge {
+    padding-left: 10px;
+  }
+
   .dropdown.dropdown--actions {
     li {
       line-height: initial;