From e117747ee86bcd3b726cb16178e0628f6f025407 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Wed, 10 Jun 2015 13:24:19 +0200
Subject: [PATCH] fix switchView button overflow in table

---
 .../javascripts/app/controllers/users.js.coffee      |  5 +++--
 .../javascripts/app/views/generic/table.jst.eco      |  2 +-
 .../app/views/layout_ref/user_list.jst.eco           | 10 +++++-----
 app/assets/stylesheets/zammad.css.scss               | 12 ++++++++++--
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/users.js.coffee b/app/assets/javascripts/app/controllers/users.js.coffee
index 5c7e035e2..da5214660 100644
--- a/app/assets/javascripts/app/controllers/users.js.coffee
+++ b/app/assets/javascripts/app/controllers/users.js.coffee
@@ -54,6 +54,7 @@ class Index extends App.Controller
       attribute =
         name:       'switch_to'
         display:    'Action'
+        className:  'actionCell'
         translation: true
       header.push attribute
       header
@@ -61,9 +62,9 @@ class Index extends App.Controller
     callbackAttributes = (value, object, attribute, header, refObject) ->
       text                  = App.i18n.translateInline("View from user's perspective")
       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.raw         = ' <span class="btn btn--primary btn--table switchView" title="' + text + '"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> ' + text + '</span>'
       attribute.class       = ''
-      attribute.parentClass = 'no-padding'
+      attribute.parentClass = 'actionCell no-padding'
       attribute.link        = ''
       attribute.title       = App.i18n.translateInline('Switch to')
       value
diff --git a/app/assets/javascripts/app/views/generic/table.jst.eco b/app/assets/javascripts/app/views/generic/table.jst.eco
index 55fe7337e..cb04602a4 100644
--- a/app/assets/javascripts/app/views/generic/table.jst.eco
+++ b/app/assets/javascripts/app/views/generic/table.jst.eco
@@ -14,7 +14,7 @@
       <th style="width: 22px"></th>
     <% end %>
 <% for item in @header: %>
-      <th <% if item.style: %>style="<%= item.style %>"<% end %>><%- @T( item.display ) %></th>
+      <th<% if item.className: %> class="<%= item.className %>"<% end %><% if item.style: %> style="<%= item.style %>"<% end %>><%- @T( item.display ) %></th>
 <% end %>
 <% if @destroy: %>
       <th><%- @T('Delete') %></th>
diff --git a/app/assets/javascripts/app/views/layout_ref/user_list.jst.eco b/app/assets/javascripts/app/views/layout_ref/user_list.jst.eco
index 0d0a91027..228abdc58 100644
--- a/app/assets/javascripts/app/views/layout_ref/user_list.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/user_list.jst.eco
@@ -150,7 +150,7 @@
 
           <th>Lastname</th>
 
-          <th>Aktionen</th>
+          <th class="actionCell">Aktionen</th>
         </tr>
       </thead>
 
@@ -162,7 +162,7 @@
 
           <td><span>Niklas</span></td>
 
-          <td class="no-padding">
+          <td class="actionCell 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>
           </td>
         </tr>
@@ -174,7 +174,7 @@
 
           <td><span>Hubermeyerschmidt</span></td>
 
-          <td class="no-padding">
+          <td class="actionCell 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>
           </td>
         </tr>
@@ -186,7 +186,7 @@
 
           <td><span>Braun</span></td>
 
-          <td class="no-padding">
+          <td class="actionCell 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>
           </td>
         </tr>
@@ -198,7 +198,7 @@
 
           <td><span>Blanko</span></td>
 
-          <td class="no-padding">
+          <td class="actionCell 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>
           </td>
         </tr>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 068a6e0db..da5c895aa 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -4088,8 +4088,7 @@ footer {
   display: block;
 }
 
-.user-list {
-  table-layout: auto;
+.table.user-list {
 
   tr:hover .switchView {
     visibility: visible;
@@ -4097,6 +4096,15 @@ footer {
   
   .switchView {
     visibility: hidden;
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  // lame hardcoded width of this "View from users' perspective" button td
+  // i can't find another way to do it. It's not flexible. It sucks
+  .actionCell {
+    width: 250px;
   }
 }