From 407231f5d715ac76c43d5caa1f6d03be1f67d0f5 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Thu, 28 May 2015 16:21:31 +0200
Subject: [PATCH] style ticket links

---
 .../app/controllers/widget/link.js.coffee     |  4 +--
 .../javascripts/app/views/link/info.jst.eco   | 17 ++++++---
 .../javascripts/app/views/widget/tag.jst.eco  | 32 ++++++++---------
 app/assets/stylesheets/zammad.css.scss        | 35 ++++++++++++++-----
 4 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/widget/link.js.coffee b/app/assets/javascripts/app/controllers/widget/link.js.coffee
index d513ac1d4..c66495de9 100644
--- a/app/assets/javascripts/app/controllers/widget/link.js.coffee
+++ b/app/assets/javascripts/app/controllers/widget/link.js.coffee
@@ -1,7 +1,7 @@
 class App.WidgetLink extends App.Controller
   events:
-    'click [data-type=add]': 'add',
-    'click [data-type=remove]': 'remove',
+    'click .js-add': 'add',
+    'click .js-remove': 'remove',
 
   constructor: ->
     super
diff --git a/app/assets/javascripts/app/views/link/info.jst.eco b/app/assets/javascripts/app/views/link/info.jst.eco
index ed91836de..af021fe69 100644
--- a/app/assets/javascripts/app/views/link/info.jst.eco
+++ b/app/assets/javascripts/app/views/link/info.jst.eco
@@ -1,10 +1,19 @@
 <label><%- @T('Links') %></label>
 <% for type of @links: %>
-  <label><%- @T( type ) %></label>
-  <ul>
+<div class="ticketLinks">
+  <div class="sidebar-list-title"><%- @T( type ) %></div>
+  <ul class="sidebar-list">
     <% for item in @links[type]: %>
-    <li><a href="#ticket/zoom/<%= item.id %>" data-type="" title="<%= item.title %>" class="<%= item.css %>">T:<%= item.number %> <%= item.title %></a> <a href="" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove" class="glyphicon glyphicon-remove" title="<%- @Ti('remove') %>"></a></li>
+    <li class="sidebar-list-item">
+      <div class="sidebar-list-item-name">
+        <a href="#ticket/zoom/<%= item.id %>" data-type="" title="<%= item.title %>" class="<%= item.css %>"><span class="ticket-id">T:<%= item.number %></span> <%= item.title %></a>
+      </div>
+      <!--<span>3</span>-->
+      <div class="sidebar-list-item-delete js-delete" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove">
+        <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
     <% end %>
   </ul>
+</div>
 <% end %>
-<div class="text-muted js-newTagLabel u-clickable" data-type="add">+ <%- @T('Add Link') %></div>
\ No newline at end of file
+<div class="text-muted u-clickable js-add">+ <%- @T('Add Link') %></div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/widget/tag.jst.eco b/app/assets/javascripts/app/views/widget/tag.jst.eco
index 759c998b8..1469ef748 100644
--- a/app/assets/javascripts/app/views/widget/tag.jst.eco
+++ b/app/assets/javascripts/app/views/widget/tag.jst.eco
@@ -1,17 +1,15 @@
-<div class="">
-  <label><%- @T( 'Tags' ) %></label>
-  <ul class="tagList">
-    <% for tag in @tags: %>
-    <li class="tag">
-      <div class="tag-name"><%= tag %></div>
-      <!--<span>3</span>-->
-      <div class="tag-delete js-delete ">
-        <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
-      </div>
-    <% end %>
-  </ul>
-  <div class="text-muted js-newTagLabel u-clickable">+ <%- @T('Add Tag') %></div>
-  <form>
-    <input type="text" name="new_tag" class="hide js-newTagInput" autocomplete="off">
-  </form>
-</div>
+<label><%- @T( 'Tags' ) %></label>
+<ul class="sidebar-list">
+  <% for tag in @tags: %>
+  <li class="sidebar-list-item">
+    <div class="sidebar-list-item-name"><%= tag %></div>
+    <!--<span>3</span>-->
+    <div class="sidebar-list-item-delete js-delete">
+      <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+    </div>
+  <% end %>
+</ul>
+<div class="text-muted js-newTagLabel u-clickable">+ <%- @T('Add Tag') %></div>
+<form>
+  <input type="text" name="new_tag" class="hide js-newTagInput" autocomplete="off">
+</form>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index eacac9260..3a8619a6b 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -718,7 +718,7 @@ fieldset > *:not(.form-group) .form-control {
 
 .formGroup-label {
   padding: 0 2px;
-  margin-bottom: 3px;
+  margin-bottom: 6px;
   position: relative;
   display: flex;
   align-items: center;
@@ -3590,28 +3590,36 @@ footer {
   }
 }
 
-.tags {
-  margin: 15px 0 20px;
+.tags,
+.links {
+  margin: 20px 0;
 }
 
-.tagList {
+.sidebar-list {
   padding: 0;
   margin-bottom: 5px;
 }
 
-  .tagList .tag {
+  .sidebar-list-title {
+    color: hsl(206,7%,28%);
+    text-transform: capitalize;
+    margin-top: 7px;
+  }
+
+  .sidebar-list-item {
+    padding: 4px 1px;
     display: flex;
     align-items: center;
     color: hsl(206,7%,28%);
     border-bottom: 1px solid hsl(240,4%,95%);
   }
 
-  .tagList .tag-name {
+  .sidebar-list-item-name {
     flex: 1;
   }
 
-  .tagList .tag-delete {
-    height: 29px;
+  .sidebar-list-item-delete {
+    height: 100%;
     padding: 0 10px;
     margin-right: -4px;
     display: flex;
@@ -3626,10 +3634,19 @@ footer {
     }
   }
 
-    .tagList .tag-delete:hover .icon {
+    .sidebar-list-item-delete:hover .icon {
       fill: hsl(1,77%,47%);
     }
 
+.ticket-id {
+  color: white;
+  background: hsl(198,19%,72%);
+  font-size: 11px;
+  border-radius: 7px;
+  padding: 0 5px;
+  margin-right: 2px;
+}
+
 .attributeBar {
   height: 60px;
   background: white;