From e65e41d984fea6cc41770f347fbec6686b9c5c7e Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 2 Jun 2015 13:35:45 +0200
Subject: [PATCH] fix performance of modified icon

---
 .../app/views/navigation/result.jst.eco       |  4 ++-
 .../app/views/task_widget_tasks.jst.eco       | 18 ++++++++-----
 app/assets/stylesheets/zammad.css.scss        | 27 ++++++++++++-------
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/app/views/navigation/result.jst.eco b/app/assets/javascripts/app/views/navigation/result.jst.eco
index 9c6d08259..3c79809d4 100644
--- a/app/assets/javascripts/app/views/navigation/result.jst.eco
+++ b/app/assets/javascripts/app/views/navigation/result.jst.eco
@@ -3,7 +3,9 @@
   <% for item in area.result: %>
     <li>
       <a href="<%- item.url %>" class="nav-tab nav-tab--search <%= item.class %>" data-id="<%= item.id %>">
-        <svg class="nav-tab-icon priority-icon icon-<%= item.iconClass %>"><use xlink:href="#icon-<%= item.iconClass %>" /></svg>
+        <div class="nav-tab-icon">
+          <svg class="icon icon-<%= item.iconClass %>"><use xlink:href="#icon-<%= item.iconClass %>" /></svg>
+        </div>
         <span class="nav-tab-name flex u-textTruncate"><%= item.display %></span>
       </a>
     </li>
diff --git a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
index e43d4d184..11c55f950 100644
--- a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
+++ b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
@@ -1,13 +1,19 @@
 <% for item in @item_list: %>
   <a href="<%- item.data.url %>" title="<%= item.data.title %>" class="nav-tab task <%= item.data.class %><% if item.task.active: %> is-active<% end %>" data-key="<%- item.task.key %>">
-    <svg class="nav-tab-icon priority-icon icon-<%= item.data.iconClass %>">
+    <div class="nav-tab-icon">
+      <svg class="icon icon-<%= item.data.iconClass %>">
+        <% if item.task.notify && item.data.iconClass is 'priority': %>
+        <use xlink:href="#icon-priority-modified-outer-circle" />
+        <% else: %>
+        <use xlink:href="#icon-<%= item.data.iconClass %>" />
+        <% end %>
+      </svg>
       <% if item.task.notify && item.data.iconClass is 'priority': %>
-      <use class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" />
-      <use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />
-      <% else: %>
-      <use xlink:href="#icon-<%= item.data.iconClass %>" />
+      <svg class="icon modified-inner-circle icon-<%= item.data.iconClass %>">
+        <use xlink:href="#icon-priority-modified-inner-circle" />
+      </svg>
       <% end %>
-    </svg>
+    </div>
     <div class="nav-tab-name u-textTruncate flex"><%= item.data.head %></div>
     <div class="nav-tab-close js-close" title="<%- @Ti('close') %>">
       <div class="nav-tab-close-inner">
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 268201ad9..b98dd749a 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -1656,7 +1656,7 @@ footer {
     background: #389ed9;
     color: white;
 
-    .nav-tab-icon {
+    .nav-tab-icon .icon {
       fill: white;
     }
   }
@@ -1673,27 +1673,34 @@ footer {
     margin-right: 7px;
     margin-left: 7px;
     margin-top: -3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
   }
 
-  .priority-icon {
+  .nav-tab-icon .icon {
     width: 16px;
     height: 16px;
     fill: #808080;
   }
 
-  .nav-tab-icon .inner-circle {
+  .nav-tab-icon .modified-inner-circle {
+    position: absolute;
+    left: 0;
+    top: 0;
     will-change: opacity;
     transform: translateZ(0);
-    animation: fade 3s ease-in-out infinite;
+    animation: fade 1.8s ease-in-out infinite;
   }
 
   @keyframes fade {
-    50% { opacity: 1 }
-    75% { opacity: 0 }
+    54% { opacity: 1 }
+    90% { opacity: 0 }
     to { opacity: 1 }
   }
 
-  .nav-tab-icon.icon-loading {
+  .nav-tab-icon .icon.icon-loading {
     animation: rotateplane 1.2s infinite ease-in-out;
     fill: $supergood-color;
   }
@@ -1743,7 +1750,7 @@ footer {
 .level-1.is-active {
   background-color: #38ae6a;
 }
-.level-1 .priority-icon,
+.level-1 .icon-priority,
 .level-1.icon-priority {
   fill: #38ae6a;
 }
@@ -1751,7 +1758,7 @@ footer {
 .level-2.is-active {
   background-color: #f35910;
 }
-.level-2 .priority-icon,
+.level-2 .icon-priority,
 .level-2.icon-priority {
   fill: #f35910;
 }
@@ -1759,7 +1766,7 @@ footer {
 .level-3.is-active {
   background-color: #faab00;
 }
-.level-3 .priority-icon,
+.level-3 .icon-priority,
 .level-3.icon-priority {
   fill: #faab00;
 }