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: %>
<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>

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

@ -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 class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" />
<use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />
<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': %>
<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-close js-close" title="<%- @Ti('close') %>">
<div class="nav-tab-close-inner">

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

@ -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;
}