From c1b73de746e8a1267e1b970b57d29aee3dd06211 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 26 May 2015 18:29:04 +0200
Subject: [PATCH] fix arrows and add delete button to avatar picker

---
 .../app/views/dashboard/ticket.jst.eco        |  8 +--
 .../app/views/generic/actions.jst.eco         |  2 +-
 .../app/views/generic/select.jst.eco          |  2 +-
 .../app/views/generic/sidebar_tabs.jst.eco    |  2 +-
 .../views/generic/user_search/input.jst.eco   |  2 +-
 .../user_search/item_organization.jst.eco     |  2 +-
 .../item_organization_members.jst.eco         |  2 +-
 .../app/views/layout_ref/highlight.jst.eco    | 10 +--
 .../app/views/profile/avatar-holder.jst.eco   |  4 +-
 .../app/views/profile/avatar.jst.eco          | 10 +--
 .../javascripts/app/views/ticket_zoom.jst.eco |  8 +--
 .../ticket_zoom/overview_navigator.jst.eco    |  4 +-
 app/assets/stylesheets/zammad.css.scss        | 66 +++++++++----------
 13 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/app/assets/javascripts/app/views/dashboard/ticket.jst.eco b/app/assets/javascripts/app/views/dashboard/ticket.jst.eco
index 36fc9bbfc..4a0334129 100644
--- a/app/assets/javascripts/app/views/dashboard/ticket.jst.eco
+++ b/app/assets/javascripts/app/views/dashboard/ticket.jst.eco
@@ -12,22 +12,22 @@
         <li>
         <% if @items_from != 1: %>
           <a class="btn btn--action" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
-            <svg class="icon arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg>
+            <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
           </a>
         <% else: %>
           <a class="btn btn--action is-disabled" href="#" data-from="" data-type="page">
-            <svg class="icon arrow arrow--left arrow--disabled"><use xlink:href="#icon-arrow-left" /></svg>
+            <svg class="icon-arrow-left arrow--disabled"><use xlink:href="#icon-arrow-left" /></svg>
           </a>
         <% end %>
         </li>
         <li>
         <% if @items_till != @items_total: %>
           <a class="btn btn--action" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
-            <svg class="icon arrow arrow--right"><use xlink:href="#icon-arrow-right" /></svg>
+            <svg class="icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg>
           </a>
         <% else: %>
           <a class="btn btn--action is-disabled" href="#" data-from="" data-type="page">
-            <svg class="icon arrow arrow--right arrow--disabled"><use xlink:href="#icon-arrow-right" /></svg>
+            <svg class="icon-arrow-right arrow--disabled"><use xlink:href="#icon-arrow-right" /></svg>
           </a>
         </li>
         <% end %>
diff --git a/app/assets/javascripts/app/views/generic/actions.jst.eco b/app/assets/javascripts/app/views/generic/actions.jst.eco
index bdfeeea18..c637968cb 100644
--- a/app/assets/javascripts/app/views/generic/actions.jst.eco
+++ b/app/assets/javascripts/app/views/generic/actions.jst.eco
@@ -4,7 +4,7 @@
       <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
       <label><%- @T('Action') %></label>
     <% end %>
-    <svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg>
+    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
   </div>
   <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
     <% for item in @items: %>
diff --git a/app/assets/javascripts/app/views/generic/select.jst.eco b/app/assets/javascripts/app/views/generic/select.jst.eco
index 7376d58ec..c7d9043d4 100644
--- a/app/assets/javascripts/app/views/generic/select.jst.eco
+++ b/app/assets/javascripts/app/views/generic/select.jst.eco
@@ -6,5 +6,5 @@
 <% end %>
 <% end %>
   </select>
-  <svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg>
+  <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
 </div>
diff --git a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
index a9949d7bf..9cd95def1 100644
--- a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
+++ b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
@@ -4,7 +4,7 @@
     <h2 class="u-textTruncate"><%- @T( item.head ) %></h2>
     <div class="js-actions flex"></div>
     <div class="tabsSidebar-close">
-      <svg class="icon"><use xlink:href="#icon-long-arrow-right" /></svg>
+      <svg class="icon icon-long-arrow-right"><use xlink:href="#icon-long-arrow-right" /></svg>
     </div>
   </div>
   <hr>
diff --git a/app/assets/javascripts/app/views/generic/user_search/input.jst.eco b/app/assets/javascripts/app/views/generic/user_search/input.jst.eco
index ccc7e491a..f24477725 100644
--- a/app/assets/javascripts/app/views/generic/user_search/input.jst.eco
+++ b/app/assets/javascripts/app/views/generic/user_search/input.jst.eco
@@ -1,7 +1,7 @@
 <div class="u-positionOrigin">
   <input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>">
   <input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
-  <svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg>
+  <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
 </div>
 
 <div class="dropdown-menu" aria-labelledby="customer_id">
diff --git a/app/assets/javascripts/app/views/generic/user_search/item_organization.jst.eco b/app/assets/javascripts/app/views/generic/user_search/item_organization.jst.eco
index 570cb9298..0eaf69839 100644
--- a/app/assets/javascripts/app/views/generic/user_search/item_organization.jst.eco
+++ b/app/assets/javascripts/app/views/generic/user_search/item_organization.jst.eco
@@ -6,5 +6,5 @@
     <%= @organization.displayName() %>
     <span class="recipientList-detail">- <%= @organization.member_ids.length %> <%- @T('People') %></span>
   </div>
-  <svg class="recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg>
+  <svg class="recipientList-arrow icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg>
 </li>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/user_search/item_organization_members.jst.eco b/app/assets/javascripts/app/views/generic/user_search/item_organization_members.jst.eco
index a5118cf89..aa83d9ae2 100644
--- a/app/assets/javascripts/app/views/generic/user_search/item_organization_members.jst.eco
+++ b/app/assets/javascripts/app/views/generic/user_search/item_organization_members.jst.eco
@@ -1,7 +1,7 @@
 <ul class="recipientList-organizationMembers hide" id="<%- @organization.id %>">
   <li class="recipientList-controls js-back">
     <div class="btn btn--action btn--onDark">
-      <svg class="icon arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg>
+      <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
       <span class="btn-label"><%- @T('Back') %></span>
     </div>
 </ul>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/highlight.jst.eco b/app/assets/javascripts/app/views/layout_ref/highlight.jst.eco
index 321037edc..98cf2c9ce 100644
--- a/app/assets/javascripts/app/views/layout_ref/highlight.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/highlight.jst.eco
@@ -7,7 +7,7 @@
       </div>
       <div class="dropdown dropdown--actions">
         <div class="btn btn--action btn--split--last btn--slim centered" id="highlight" data-toggle="dropdown" aria-expanded="true">
-          <svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg>
+          <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
         </div>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
           <% for entry, i in @colors: %>
@@ -30,11 +30,11 @@
         <ul class="pagination">
           <li>
             <a class="btn btn--action btn--split--first" data-from="0" data-type="page">
-              <svg class="arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg>
+              <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
             </a>
           <li>
             <a class="btn btn--action btn--split--last" href="#" data-from="1" data-type="page">
-              <svg class="arrow arrow--right"><use xlink:href="#icon-arrow-right" /></svg>
+              <svg class="icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg>
             </a>
         </ul>
       </li>
@@ -55,11 +55,11 @@
       <ul class="pagination">
         <li>
           <a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
-            <svg class="icon arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg>
+            <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
           </a>
         <li>
           <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
-            <svg class="icon arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg>
+            <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
           </a>
       </ul>
     </div>
diff --git a/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco b/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
index 42906ed28..ee503ead9 100644
--- a/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
+++ b/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
@@ -1,4 +1,6 @@
 <div class="avatar-holder">
   <span class="avatar size-50" data-avatar-id="<%- @avatar.id %>" style="background-image: url(<%- @src %>)"></span>
-  <div class="avatar-delete"><div class="delete icon"></div></div>
+  <div class="avatar-delete">
+    <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/profile/avatar.jst.eco b/app/assets/javascripts/app/views/profile/avatar.jst.eco
index 666ceace7..53d72acfc 100644
--- a/app/assets/javascripts/app/views/profile/avatar.jst.eco
+++ b/app/assets/javascripts/app/views/profile/avatar.jst.eco
@@ -9,7 +9,7 @@
     </div>
   </div>
 </div>
-<div class="avatar-gallery horizontal wrap">
+<div class="avatar-gallery">
   <% for avatar in @avatars: %>
   <div class="avatar-holder">
     <% if avatar.initial: %>
@@ -17,11 +17,13 @@
       <% if avatar.default: %>
       <%  cssClass = 'is-active' %>
       <% end %>
-      <%- App.Session.get().avatar('50', '', cssClass, true, avatar) %>
+      <%- App.Session.get().avatar('80', '', cssClass, true, avatar) %>
     <% else: %>
-      <span class="avatar size-50 <% if avatar.default: %>is-active<% end %>" data-avatar-id="<%- avatar.id %>" style="background-image: url(<%- avatar.content %>)"></span>
+      <span class="avatar size-80 <% if avatar.default: %>is-active<% end %>" data-avatar-id="<%- avatar.id %>" style="background-image: url(<%- avatar.content %>)"></span>
       <% if avatar.deletable: %>
-        <div class="avatar-delete"><div class="delete icon"></div></div>
+        <div class="avatar-delete">
+          <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        </div>
       <% end %>
     <% end %>
   </div>
diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
index d2e983158..f3bcbd0de 100644
--- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
@@ -31,7 +31,7 @@
           <option value="2">open</option>
           <option value="3">pending</option>
         </select>
-        <svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg>
+        <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
       </div>
       <div class="form-group is-changed">
         <label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
@@ -40,7 +40,7 @@
           <option value="2" selected="">2 normal</option>
           <option value="3">3 high</option>
         </select>
-        <svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg>
+        <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
       </div>
       <div class="form-group">
         <label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
@@ -50,7 +50,7 @@
           <option value="2">Twitter</option>
           <option value="1" selected="">Users</option>
         </select>
-        <svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg>
+        <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
       </div>
       <div class="form-group">
         <label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
@@ -58,7 +58,7 @@
           <option value="">-</option>
           <option value="3">Felix Niklas</option>
         </select>
-        <svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg>
+        <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
       </div>
     </form>
     <form class="form-inline">
diff --git a/app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco
index 9cbe43986..feea2879a 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco
@@ -4,10 +4,10 @@
 <ul class="pagination">
   <li <% if !@previous: %>class="disabled"<% end %> title="<%- @Ti( 'previous in Overview' ) %>">
     <a class="centered previous" href="<% if @previous: %><%- @previous.uiUrl() %><% end %>" data-id="<% if @previous: %><%- @previous.id %><% end %>">
-      <span class="left arrow icon"></span>
+      <svg class="icon icon-arrow-left<% if !@previous: %> arrow--disabled<% end %>"><use xlink:href="#icon-arrow-left" /></svg>
     </a>
   <li <% if !@next: %>class="disabled"<% end %> title="<%- @Ti( 'next in Overview' ) %>">
     <a class="centered next" href="<% if @next: %><%- @next.uiUrl() %><% end %>" data-id="<% if @next: %><%- @next.id %><% end %>">
-      <span class="right arrow icon"></span>
+      <svg class="icon icon-arrow-right<% if !@next: %> arrow--disabled<% end %>"><use xlink:href="#icon-arrow-right" /></svg>
     </a>
 </ul>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index b898da534..fb9feb823 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -808,7 +808,7 @@ textarea,
     padding-right: 34px;
   }
 
-  .form-control + .arrow  {
+  .form-control + .icon-arrow-down  {
     position: absolute;
     right: 12px;
     top: 50%;
@@ -1305,7 +1305,10 @@ ol.tabs li {
 
 */
 
-.arrow {
+.icon-arrow-down,
+.icon-arrow-up,
+.icon-arrow-left,
+.icon-arrow-right {
   fill: black;
   opacity: 0.39;
 }
@@ -1314,18 +1317,6 @@ ol.tabs li {
   opacity: 0.23;
 }
 
-.arrow--down,
-.arrow--up {
-  width: 13px;
-  height: 7px;
-}
-
-.arrow--left,
-.arrow--right {
-  width: 7px;
-  height: 13px;
-}
-
 .icon-checkmark {
   fill: #38AE6A;
 }
@@ -3453,8 +3444,6 @@ footer {
     justify-content: center;
     
     .icon {
-      width: 13px;
-      height: 13px;
       fill: black;
     }
   }
@@ -4061,8 +4050,6 @@ footer {
   }
 
   .recipientList-arrow {
-    width: 7px;
-    height: 13px;
     fill: white;
     opacity: 0.39;
   }
@@ -4506,19 +4493,23 @@ label + .wizard-buttonList {
   }
 }
 
+.avatar-gallery {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .avatar-holder {
   display: inline-block;
   position: relative;
-  margin: 0 15px 15px 0;
+  margin: 0 32px 32px 0;
   border-radius: 100%;
+  box-shadow: 0 0 0 4px white;
   
   .avatar {
     @extend .u-clickable;
-    opacity: .33;
     
     &.is-active {
-      opacity: 1;
-      box-shadow: 0 0 0 3px hsl(200,71%,59%);
+      box-shadow: 0 0 0 4px hsl(200,71%,59%);
     }
   }
 }
@@ -4530,23 +4521,28 @@ label + .wizard-buttonList {
 
   .avatar-holder .avatar-delete {
     position: absolute;
-    right: -18px;
-    top: -18px;
-    width: 30px;
-    height: 30px;
+    right: -15px;
+    top: -15px;
+    width: 40px;
+    height: 40px;
     pointer-events: none;
     visibility: hidden;
-    opacity: 0.5;
-    @extend .u-clickable;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    box-shadow: 0 1px 5px rgba(0,0,0,.05);
     
-    &:hover {
-      opacity: 1;
-    }
+    @extend .u-clickable;
 
-    .icon {
-      position: absolute;
-      left: 8px;
-      bottom: 8px;
+    svg {
+      opacity: 0.5;
+      fill: hsl(234,10%,19%);
+    }
+    
+    &:hover svg {
+      opacity: 1;
     }
   }