From 3f05854c9c76f45780a4dd0d198c35777d0fc459 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 29 Sep 2014 10:38:28 +0200
Subject: [PATCH] userSearch

---
 .../app/controllers/users.js.coffee           |  2 +-
 app/assets/javascripts/app/views/user.jst.eco | 40 +++++++++----------
 app/assets/stylesheets/zzz.css.erb            | 26 +++++++++++-
 3 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/users.js.coffee b/app/assets/javascripts/app/controllers/users.js.coffee
index 7a11e4bd5..6f9e9c573 100644
--- a/app/assets/javascripts/app/controllers/users.js.coffee
+++ b/app/assets/javascripts/app/controllers/users.js.coffee
@@ -14,7 +14,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()
     )
diff --git a/app/assets/javascripts/app/views/user.jst.eco b/app/assets/javascripts/app/views/user.jst.eco
index a04fedf87..655a76045 100644
--- a/app/assets/javascripts/app/views/user.jst.eco
+++ b/app/assets/javascripts/app/views/user.jst.eco
@@ -1,24 +1,24 @@
-<div class="flex scrollable">
-  <div class="horizontal">
-    <div class="page-header-title">
-      <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 class="horizontal">
+  <div class="page-header-title">
+    <h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
   </div>
-
-  <input class="search" name="search" placeholder="<%- @T('Search for users') %>">
-
-  <div class="tabs wide-tabs horizontal" style="width: 100%;">
-    <% for role in @roles: %>
-      <div class="tab" data-id="<%= role.id %>"><%- @T(role.displayName() ) %></div>
+  <div class="page-header-meta">
+    <% if @buttons: %>
+    <% for button in @buttons: %>
+      <a data-type="<%= button['data-type'] %>" class="btn <%= button['class'] %>"><%- @T( button.name ) %></a>
+    <% end %>
     <% end %>
   </div>
+</div>
 
-  <div class="table-overview"></div>
-</div>
\ No newline at end of file
+<div class="userSearch horizontal center">
+  <input type="text" class="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>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index ab388708a..d2edce54f 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/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;
-    padding: 9px;
+    height: 40px;
+    padding: 10px 20px;
     text-align: center;
     border-right: 1px solid rgba(0,8,14,.08);
     cursor: pointer;
@@ -3447,6 +3456,19 @@ footer {
 [contenteditable] > .placeholder {
   color: #999;
 }
+
+.userSearch-label {
+  margin: 0 10px 0 20px;
+}
+
+.userSearch .tab:not(.active) {
+  background: white;
+}
+
+.userSearch .tabs {
+  margin: 0;
+}
+
 /*
 
   ----------------