From d2383fe4470de32d900f426bdcbe3a4d66b760b5 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 8 Sep 2015 00:05:39 +0200
Subject: [PATCH] convert .sidebar-list to generic .list

---
 .../channel/email_account_overview.jst.eco    | 79 +++++++++++--------
 .../layout_ref/merge_customer_view.jst.eco    |  6 +-
 .../javascripts/app/views/link/info.jst.eco   |  4 +-
 .../javascripts/app/views/widget/tag.jst.eco  |  8 +-
 app/assets/stylesheets/zammad.css.scss        | 19 +++--
 5 files changed, 68 insertions(+), 48 deletions(-)

diff --git a/app/assets/javascripts/app/views/channel/email_account_overview.jst.eco b/app/assets/javascripts/app/views/channel/email_account_overview.jst.eco
index 2dd7af58e..4151a2bf9 100644
--- a/app/assets/javascripts/app/views/channel/email_account_overview.jst.eco
+++ b/app/assets/javascripts/app/views/channel/email_account_overview.jst.eco
@@ -10,7 +10,7 @@
 <% end %>
 
 <% if !_.isEmpty(@not_used_email_addresses): %>
-<h3><%- @T('Not linked email addresses') %></h3>
+<h3><%- @T('Unlinked Email Addresses') %></h3>
 <ul>
 <% for email_address in @not_used_email_addresses: %>
   <li data-id="<%= email_address.id %>"><a href="" data-type="email-address-edit"><%= email_address.email %></a>
@@ -18,6 +18,7 @@
 </ul>
 <% end %>
 
+<h3><%- @T('Linked Email Addresses') %></h3>
 <% if _.isEmpty(@account_channels): %>
   <p><%- @T('You have no configured account right now.') %></p>
 <% else: %>
@@ -27,41 +28,52 @@
         <th><%- @T('Inbound') %></th>
         <th><%- @T('Outbound') %></th>
         <th><%- @T('Email Adresses') %></th>
-        <th><%- @T('Action') %></th>
+        <th style="width: 20%"><%- @T('Action') %></th>
       </tr>
     </thead>
     <tbody>
     <% for channel in @account_channels: %>
       <tr data-id="<%- channel.id %>">
-        <td class="<% if channel.status_in is 'ok': %>success<% else if channel.status_in is 'error': %>danger<% else: %>warning<% end %>">
-          <%- @T('State') %>: <%- @T(channel.status_in || 'unknown') %><br>
-          <a href="#" data-type="edit-inbound">
-          <%= channel.options.inbound.options.user %><br>
-          <%= channel.options.inbound.options.host %> (<%= channel.options.inbound.adapter %>)
-          </a>
+        <td class="noTruncate">
+          <div class="horizontal">
+            <%- @Icon('status', channel.status_in + " inline") %>
+            <a class="flex" href="#" data-type="edit-inbound">
+            <%= channel.options.inbound.options.user %><br>
+            <%= channel.options.inbound.options.host %> (<%= channel.options.inbound.adapter %>)
+            </a>
+          </div>
         </td>
-        <td class="<% if channel.status_out is 'ok': %>success<% else if channel.status_out is 'error': %>danger<% else: %>warning<% end %>">
-          <%- @T('State') %>: <%- @T(channel.status_out || 'unknown') %><br>
-          <a href="#" data-type="edit-outbound">
-          <% if channel.options.outbound && channel.options.outbound.options: %>
-            <%= channel.options.outbound.options.user %><br>
-            <%= channel.options.outbound.options.host %>
-          <% end %>
-          (<%= channel.options.outbound.adapter %>)</a>
+        <td class="noTruncate">
+          <div class="horizontal">
+            <%- @Icon('status', channel.status_out + " inline") %>
+            <a class="flex" href="#" data-type="edit-outbound">
+              <% if channel.options.outbound && channel.options.outbound.options: %>
+                <%= channel.options.outbound.options.user %><br>
+                <%= channel.options.outbound.options.host %>
+              <% end %>
+              (<%= channel.options.outbound.adapter %>)
+            </a>
+          </div>
         </td>
-        <td>
-          <ul>
+        <td class="noTruncate">
+          <ul class="list">
           <% if !_.isEmpty(channel.email_addresses): %>
             <% for email_address in channel.email_addresses: %>
-              <li data-id="<%= email_address.id %>"><a href="" data-type="email-address-edit"><%= email_address.email %></a>
+              <li class="list-item" data-id="<%= email_address.id %>">
+                <div class="list-item-name">
+                  <a href="" data-type="email-address-edit"><%= email_address.email %></a>
+                </div>
+                <div class="list-item-delete js-delete">
+                  <%- @Icon('diagonal-cross') %>
+                </div>
             <% end %>
           <% else: %>
-              <li><%- @T('none') %></li>
+            <li class="list-item"><%- @T('none') %>
           <% end %>
           </ul>
-          <a href="#" data-type="email-address-new" title="<%- @Ti('New Email Address') %>"><%- @Icon('plus', 'icon-trash') %></a>
+          <a class="text-muted" href="#" data-type="email-address-new" title="<%- @Ti('New Email Address') %>">+ <%- @Ti('Add Email') %></a>
         </td>
-        <td>
+        <td class="noTruncate">
           <a href="#" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('trash') %></a>
         </td>
       </tr>
@@ -83,7 +95,7 @@
 <a data-type="new" class="btn btn--success"><%- @T('New') %></a>
 
 <% if !_.isEmpty(@notification_channels) && !App.Config.get('system_online_service'): %>
-  <h2><%- @T('Notification Account') %></h2>
+  <h2><%- @T('Notification Email Account') %></h2>
 
   <table class="table table-hover user-list">
     <thead>
@@ -94,15 +106,17 @@
     <tbody>
     <% for channel in @notification_channels: %>
       <tr data-id="<%- channel.id %>">
-        <td class="<% if channel.status_out is 'ok': %>success<% else if channel.status_out is 'error': %>danger<% else: %>warning<% end %>">
-          <%- @T('State') %>: <%- @T(channel.status_out || 'unknown') %><br>
-          <a href="#" data-type="edit-notification-outbound">
-          <% if channel.options.outbound && channel.options.outbound.options: %>
-            <%= channel.options.outbound.options.user %><br>
-            <%= channel.options.outbound.options.host %>
-          <% end %>
-          (<%= channel.options.outbound.adapter %>)</a>
-        </td>
+        <td class="noTruncate">
+          <div class="horizontal">
+            <%- @Icon('status', channel.status_out + " inline") %>
+            <a class="flex" href="#" data-type="edit-notification-outbound">
+              <% if channel.options.outbound && channel.options.outbound.options: %>
+                <%= channel.options.outbound.options.user %><br>
+                <%= channel.options.outbound.options.host %>
+              <% end %>
+              (<%= channel.options.outbound.adapter %>)
+            </a>
+          </div>
       </tr>
       <% if channel.status_in is 'error': %>
       <tr>
@@ -114,6 +128,7 @@
         <td colspan="1"><%= channel.last_log_out %></td>
       </tr>
       <% end %>
+    <% end %>
     </tbody>
   </table>
 <% end %>
diff --git a/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco b/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco
index f2e8d300e..787fc025f 100644
--- a/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco
@@ -771,7 +771,7 @@
         <div class="tags">
           <label>Tags</label>
 
-          <ul class="sidebar-list"></ul>
+          <ul class="list list--sidebar"></ul>
 
           <div class="text-muted js-newTagLabel u-clickable">
             + Add Tag
@@ -786,7 +786,7 @@
           <label>Links</label>
 
           <div class="ticketLinks">
-            <div class="sidebar-list-title">
+            <div class="list-title">
               child
             </div>
 
@@ -802,7 +802,7 @@
                   </div>
                 </div>
 
-                <div class="sidebar-list-item-delete js-delete" data-link-type="child" data-object="Ticket" data-object-id="3" data-type="remove"></div>
+                <div class="list-item-delete js-delete" data-link-type="child" data-object="Ticket" data-object-id="3" data-type="remove"></div>
               </li>
             </ol>
           </div>
diff --git a/app/assets/javascripts/app/views/link/info.jst.eco b/app/assets/javascripts/app/views/link/info.jst.eco
index 80dc04863..7390174da 100644
--- a/app/assets/javascripts/app/views/link/info.jst.eco
+++ b/app/assets/javascripts/app/views/link/info.jst.eco
@@ -1,7 +1,7 @@
 <label><%- @T('Links') %></label>
 <% for type of @links: %>
 <div class="ticketLinks">
-  <div class="sidebar-list-title"><%- @T( type ) %></div>
+  <div class="list-title"><%- @T( type ) %></div>
   <ol class="tasks tasks--standalone">
     <% for item in @links[type]: %>
     <li class="task">
@@ -12,7 +12,7 @@
         <a class="name ticket-popover" data-id="<%- item.id %>" href="#ticket/zoom/<%= item.id %>"><%= item.title %></a>
         <%- @humanTime(item.created_at) %>
       </div>
-      <div class="sidebar-list-item-delete js-delete" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove">
+      <div class="list-item-delete js-delete" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove">
         <%- @Icon('diagonal-cross') %>
       </div>
     <% end %>
diff --git a/app/assets/javascripts/app/views/widget/tag.jst.eco b/app/assets/javascripts/app/views/widget/tag.jst.eco
index d2272f3af..c6c51ad61 100644
--- a/app/assets/javascripts/app/views/widget/tag.jst.eco
+++ b/app/assets/javascripts/app/views/widget/tag.jst.eco
@@ -1,9 +1,9 @@
 <label><%- @T( 'Tags' ) %></label>
-<ul class="sidebar-list">
+<ul class="list list--sidebar">
   <% for tag in @tags: %>
-  <li class="sidebar-list-item">
-    <div class="sidebar-list-item-name"><%= tag %></div>
-    <div class="sidebar-list-item-delete js-delete">
+  <li class="list-item">
+    <div class="list-item-name"><%= tag %></div>
+    <div class="list-item-delete js-delete">
       <%- @Icon('diagonal-cross') %>
     </div>
   <% end %>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 24e6f5a78..57f8e8baf 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -768,7 +768,8 @@ h5 {
 }
 
 label,
-.checkbox.form-group label {
+.checkbox.form-group label,
+.label {
   text-transform: uppercase;
   color: hsl(198,19%,72%);
   display: block;
@@ -4089,12 +4090,12 @@ footer {
   margin: 20px 0;
 }
 
-.sidebar-list {
+.list {
   padding: 0;
   margin-bottom: 5px;
 }
 
-  .sidebar-list-title {
+  .list-title {
     margin-top: 7px;
     margin-bottom: 4px;
     text-transform: uppercase;
@@ -4105,19 +4106,19 @@ footer {
     letter-spacing: 0.1em;
   }
 
-  .sidebar-list-item {
+  .list-item {
     display: flex;
     align-items: center;
     color: hsl(206,7%,28%);
     border-bottom: 1px solid hsl(240,4%,95%);
   }
 
-  .sidebar-list-item-name {
+  .list-item-name {
     flex: 1;
     padding: 4px 1px;
   }
 
-  .sidebar-list-item-delete {
+  .list-item-delete {
     padding: 0 10px;
     margin-right: -3px;
     display: flex;
@@ -4133,7 +4134,7 @@ footer {
     }
   }
 
-    .sidebar-list-item-delete:hover .icon {
+    .list-item-delete:hover .icon {
       fill: hsl(1,77%,47%);
     }
 
@@ -4398,6 +4399,10 @@ footer {
   tr:hover .switchView {
     visibility: visible;
   }
+
+  td .list {
+    margin-top: -4px;
+  }
   
   .switchView {
     visibility: hidden;