Moved to new search style and implemented switch to user button.

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

@@ -55,6 +55,7 @@ class App.ControllerTable extends App.Controller
       groupBy:  'group'
       checkbox: false
       radio:    false
+      class:    'some-css-class'
       bindRow:
         events:
           'click':      rowClick
@@ -170,6 +171,7 @@ class App.ControllerTable extends App.Controller
       checkbox: data.checkbox
       radio:    data.radio
       groupBy:  data.groupBy
+      class:    data.class
       destroy:  destroy
       callbacks: data.callbackAttributes
     )

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

@@ -48,15 +48,18 @@ class Index extends App.Controller
     callbackHeader = (header) ->
       attribute =
         name:       'switch_to'
-        display:    'Switch to'
+        display:    'Action'
         translation: true
       header.push attribute
       header
 
     callbackAttributes = (value, object, attribute, header, refObject) ->
-      value = ' <svg class="icon-user"><use xlink:href="#icon-user"></use></svg>'
+      text                  = App.i18n.translateInline('Show as user')
+      value                 = ' '
+      attribute.raw         = ' <span class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> ' + text + '</span>'
       attribute.class       = ''
-      attribute.link   = '#'
+      attribute.parentClass = 'no-padding'
+      attribute.link        = ''
       attribute.title       = App.i18n.translateInline('Switch to')
       value
 
@@ -96,6 +99,7 @@ class Index extends App.Controller
       el:       @$('.table-overview')
       model:    App.User
       objects:  users
+      class:    'user-list'
       callbackHeader:   callbackHeader
       callbackAttributes:
         switch_to: [

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

@@ -1,4 +1,4 @@
-<table class="table table-hover">
+<table class="table table-hover <% if @class: %><%- @class %><% end %>">
   <thead>
     <tr>
     <% if @checkbox: %>
@@ -80,11 +80,13 @@
           <% if item.link: %>
             <a href="<%- item.link %>" <% if item.target: %>target="<%= item.target %>"<% end %>>
           <% end %>
-          
+          <% if item.raw: %>
+            <%- item.raw %>
+          <% else: %>
           <span <% if item.class: %>class="<%= item.class %>"<% end %> <% if item.title: %>title="<%= item.title %>"<% end %> <% if item.data: %><% for data_key, data_item of item.data: %>data-<%- data_key %>="<%= data_item %>" <% end %><% end %>>
             <%- value %>
           </span>
-
+          <% end %>
           <% if item.link: %></a><% end %>
         <% end %>
       </td>

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

@@ -150,7 +150,7 @@
 
           <th>Lastname</th>
 
-          <th></th>
+          <th>Aktionen</th>
         </tr>
       </thead>
 
@@ -168,11 +168,11 @@
         </tr>
 
         <tr class="item" data-id="6" data-position="3" style="cursor: pointer;">
-          <td><span>hans@huber.com</span></td>
+          <td><span>hans.sebastian.hubermeyerschmidt@huber.com</span></td>
 
-          <td><span>Hans</span></td>
+          <td><span>Hans Sebastian</span></td>
 
-          <td><span>Huber2</span></td>
+          <td><span>Hubermeyerschmidt</span></td>
 
           <td class="no-padding">
             <div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>

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

@@ -11,9 +11,11 @@
   </div>
 </div>
 
-<div class="userSearch vertical center">
+<div class="searchfield">
-  <input type="text" class="js-search form-control flex" name="search" placeholder="<%- @Ti('Search for users') %>">
+  <svg class="icon icon-magnifier"><use xlink:href="#icon-magnifier" /></svg>
+  <input class="js-search form-control" name="search" placeholder="<%- @Ti('Search for users') %>" type="search">
 </div>
+
 <div class="userSearch horizontal">
   <div class="userSearch-label"><%- @T('Roles') %>:</div>
   <div class="tabs tabs-wide horizontal">

app/assets/stylesheets/zammad.css.scss

@@ -903,7 +903,7 @@ textarea,
 
   .icon {
     left: 9px;
-    top: 6px;
+    top: 7px;
     width: 17px;
     height: 17px;
     position: absolute;