Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix performance of modified icon

Browse source
This commit is contained in:
Felix Niklas 2015-06-02 13:35:45 +02:00
parent e05a8b0a53
commit e65e41d984
3 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/app/views/navigation/result.jst.eco
View file

@ -3,7 +3,9 @@
<% for item in area.result: %> <% for item in area.result: %>
<li> <li>
<a href="<%- item.url %>" class="nav-tab nav-tab--search <%= item.class %>" data-id="<%= item.id %>"> <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> <span class="nav-tab-name flex u-textTruncate"><%= item.display %></span>
</a> </a>
</li> </li>

12
app/assets/javascripts/app/views/task_widget_tasks.jst.eco
View file

@ -1,13 +1,19 @@
<% for item in @item_list: %> <% 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 %>"> <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': %> <% if item.task.notify && item.data.iconClass is 'priority': %>
<use class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" /> <use xlink:href="#icon-priority-modified-outer-circle" />
<use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />
<% else: %> <% else: %>
<use xlink:href="#icon-<%= item.data.iconClass %>" /> <use xlink:href="#icon-<%= item.data.iconClass %>" />
<% end %> <% end %>
</svg> </svg>
<% if item.task.notify && item.data.iconClass is 'priority': %>
<svg class="icon modified-inner-circle icon-<%= item.data.iconClass %>">
<use xlink:href="#icon-priority-modified-inner-circle" />
</svg>
<% end %>
</div>
<div class="nav-tab-name u-textTruncate flex"><%= item.data.head %></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 js-close" title="<%- @Ti('close') %>">
<div class="nav-tab-close-inner"> <div class="nav-tab-close-inner">

27
app/assets/stylesheets/zammad.css.scss
View file

@ -1656,7 +1656,7 @@ footer {
background: #389ed9; background: #389ed9;
color: white; color: white;
.nav-tab-icon { .nav-tab-icon .icon {
fill: white; fill: white;
} }
} }
@ -1673,27 +1673,34 @@ footer {
margin-right: 7px; margin-right: 7px;
margin-left: 7px; margin-left: 7px;
margin-top: -3px; margin-top: -3px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
} }
.priority-icon { .nav-tab-icon .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
fill: #808080; fill: #808080;
} }
.nav-tab-icon .inner-circle { .nav-tab-icon .modified-inner-circle {
position: absolute;
left: 0;
top: 0;
will-change: opacity; will-change: opacity;
transform: translateZ(0); transform: translateZ(0);
animation: fade 3s ease-in-out infinite; animation: fade 1.8s ease-in-out infinite;
} }
@keyframes fade { @keyframes fade {
50% { opacity: 1 } 54% { opacity: 1 }
75% { opacity: 0 } 90% { opacity: 0 }
to { opacity: 1 } to { opacity: 1 }
} }
.nav-tab-icon.icon-loading { .nav-tab-icon .icon.icon-loading {
animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out;
fill: $supergood-color; fill: $supergood-color;
} }
@ -1743,7 +1750,7 @@ footer {
.level-1.is-active { .level-1.is-active {
background-color: #38ae6a; background-color: #38ae6a;
} }
.level-1 .priority-icon, .level-1 .icon-priority,
.level-1.icon-priority { .level-1.icon-priority {
fill: #38ae6a; fill: #38ae6a;
} }
@ -1751,7 +1758,7 @@ footer {
.level-2.is-active { .level-2.is-active {
background-color: #f35910; background-color: #f35910;
} }
.level-2 .priority-icon, .level-2 .icon-priority,
.level-2.icon-priority { .level-2.icon-priority {
fill: #f35910; fill: #f35910;
} }
@ -1759,7 +1766,7 @@ footer {
.level-3.is-active { .level-3.is-active {
background-color: #faab00; background-color: #faab00;
} }
.level-3 .priority-icon, .level-3 .icon-priority,
.level-3.icon-priority { .level-3.icon-priority {
fill: #faab00; fill: #faab00;
} }