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

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

@@ -1,4 +1,6 @@
 class Index extends App.Controller
+  elements:
+    '.js-search' : 'searchInput'
   events:
     'click [data-type="new"]':  'new'
 
@@ -14,7 +16,7 @@ class Index extends App.Controller
     @html App.view('user')(
       head: 'Users'
       buttons: [
-        { name: 'New User', 'data-type': 'new', class: 'primary' }
+        { name: 'New User', 'data-type': 'new', class: 'btn--success' }
       ]
       roles: App.Role.all()
     )
@@ -24,14 +26,14 @@ class Index extends App.Controller
       (e) =>
         e.preventDefault()
         $(e.target).toggleClass('active')
-        term = @$('.search').val().trim()
+        term = @searchInput.val().trim()
         return if !term
         @delay( @search, 220, 'search' )
     )
 
     # start search
-    @$('.search').bind( 'keyup', (e) =>
+    @searchInput.bind( 'keyup', (e) =>
-      term = @$('.search').val().trim()
+      term = @searchInput.val().trim()
       return if !term
       return if term is @term
       @term = term

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

@@ -1,24 +1,24 @@
-<div class="flex scrollable">
+<div class="horizontal">
-  <div class="horizontal">
+  <div class="page-header-title">
-    <div class="page-header-title">
+    <h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
-      <h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
-    </div>
-    <div class="page-header-meta">
-      <% if @buttons: %>
-      <% for button in @buttons: %>
-        <a data-type="<%= button['data-type'] %>" class="btn btn-default <%= button['class'] %>"><%- @T( button.name ) %></a>
-      <% end %>
-      <% end %>
-    </div>
   </div>
-
+  <div class="page-header-meta">
-  <input class="search" name="search" placeholder="<%- @T('Search for users') %>">
+    <% if @buttons: %>
-
+    <% for button in @buttons: %>
-  <div class="tabs wide-tabs horizontal" style="width: 100%;">
+      <a data-type="<%= button['data-type'] %>" class="btn <%= button['class'] %>"><%- @T( button.name ) %></a>
-    <% for role in @roles: %>
+    <% end %>
-      <div class="tab" data-id="<%= role.id %>"><%- @T(role.displayName() ) %></div>
     <% end %>
   </div>
+</div>
 
-  <div class="table-overview"></div>
+<div class="userSearch horizontal center">
-</div>
+  <input type="text" class="js-search flex" name="search" placeholder="<%- @T('Search for users') %>">
+  <div class="userSearch-label"><%- @T('Filter') %>:</div>
+  <div class="tabs tabs-wide horizontal">
+    <% for role in @roles: %>
+      <div class="tab active" data-id="<%= role.id %>"><%- @T(role.displayName() ) %></div>
+    <% end %>
+  </div>
+</div>
+
+<div class="table-overview"></div>

app/assets/stylesheets/zzz.css.erb

@@ -438,8 +438,17 @@ textarea,
   border-radius: 3px;
   transition: none;
   box-shadow: none;
+  outline: none;
 }
 
+  input[type=text]:focus,
+  input[type=password]:focus,
+  input[type=email]:focus,
+  textarea:focus {
+    border-color: hsl(200,71%,59%);
+    box-shadow: 0 0 0 3px hsl(201,62%,90%);
+  }
+
   .form-control:focus,
   .tokenfield.focus {
     box-shadow: none;
@@ -624,8 +633,8 @@ ol.tabs li {
   }
 
   .tab {
-    height: 39px;
+    height: 40px;
-    padding: 9px;
+    padding: 10px 20px;
     text-align: center;
     border-right: 1px solid rgba(0,8,14,.08);
     cursor: pointer;
@@ -3447,6 +3456,23 @@ footer {
 [contenteditable] > .placeholder {
   color: #999;
 }
+
+.userSearch {
+  margin-bottom: 20px;
+}
+
+.userSearch-label {
+  margin: 0 10px 0 20px;
+}
+
+.userSearch .tab:not(.active) {
+  background: white;
+}
+
+.userSearch .tabs {
+  margin: 0;
+}
+
 /*
 
   ----------------