adjust tab loading icon
This commit is contained in:
Felix Niklas
parent
c1bcf5285c
commit
d6ef8ac6e1
9 changed files with 22 additions and 42 deletions
|
|
@ -29,7 +29,7 @@ class App.TaskbarWidget extends App.Controller
|
||||||
data =
|
data =
|
||||||
url: '#'
|
url: '#'
|
||||||
id: false
|
id: false
|
||||||
iconClass: 'loading dot'
|
iconClass: 'loading'
|
||||||
title: App.i18n.translateInline('Loading...')
|
title: App.i18n.translateInline('Loading...')
|
||||||
head: App.i18n.translateInline('Loading...')
|
head: App.i18n.translateInline('Loading...')
|
||||||
worker = App.TaskManager.worker( task.key )
|
worker = App.TaskManager.worker( task.key )
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<% for item in @item_list: %>
|
<% for item in @item_list: %>
|
||||||
<a href="<%- item.data.url %>" title="<%= item.data.title %>" class="nav-tab <%= 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 <%= item.data.class %><% if item.task.active: %> is-active<% end %>" data-key="<%- item.task.key %>">
|
||||||
<svg class="nav-tab-icon priority-icon">
|
<svg class="nav-tab-icon priority-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 class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" />
|
||||||
<use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />
|
<use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
.icon-arrow-down { width: 13px; height: 7px; } .icon-arrow-left { width: 7px; height: 13px; } .icon-arrow-right { width: 7px; height: 13px; } .icon-arrow-up { width: 13px; height: 7px; } .icon-checkbox-checked { width: 10px; height: 10px; } .icon-checkbox { width: 10px; height: 10px; } .icon-checkmark { width: 16px; height: 14px; } .icon-clock { width: 16px; height: 16px; } .icon-close { width: 13px; height: 13px; } .icon-cloud { width: 16px; height: 16px; } .icon-cog { width: 20px; height: 20px; } .icon-dashboard { width: 24px; height: 24px; } .icon-diagonal-cross { width: 13px; height: 13px; } .icon-download { width: 14px; height: 13px; } .icon-email { width: 17px; height: 17px; } .icon-facebook { width: 17px; height: 17px; } .icon-group { width: 24px; height: 24px; } .icon-important { width: 16px; height: 16px; } .icon-in-process { width: 64px; height: 64px; } .icon-list { width: 16px; height: 16px; } .icon-lock-open { width: 16px; height: 16px; } .icon-lock { width: 16px; height: 16px; } .icon-logo { width: 42px; height: 36px; } .icon-long-arrow-right { width: 11px; height: 11px; } .icon-magnifier { width: 15px; height: 15px; } .icon-mail { width: 17px; height: 17px; } .icon-marker { width: 17px; height: 19px; } .icon-message { width: 24px; height: 24px; } .icon-mood-bad { width: 60px; height: 59px; } .icon-mood-good { width: 60px; height: 59px; } .icon-mood-happy { width: 60px; height: 59px; } .icon-mood-ok { width: 60px; height: 59px; } .icon-mood-super-bad { width: 60px; height: 59px; } .icon-mood-super-happy { width: 60px; height: 59px; } .icon-mood-supergood { width: 60px; height: 59px; } .icon-note { width: 17px; height: 16px; } .icon-one-ticket { width: 48px; height: 10px; } .icon-organization { width: 16px; height: 16px; } .icon-outbound-calls { width: 17px; height: 17px; } .icon-overviews { width: 24px; height: 24px; } .icon-package { width: 16px; height: 16px; } .icon-pen { width: 16px; height: 16px; } .icon-person { width: 24px; height: 24px; } .icon-phone { width: 17px; height: 17px; } .icon-plus { width: 20px; height: 20px; } .icon-priority-modified-inner-circle { width: 16px; height: 16px; } .icon-priority-modified-outer-circle { width: 16px; height: 16px; } .icon-priority { width: 16px; height: 16px; } .icon-received-calls { width: 17px; height: 17px; } .icon-reopening { width: 68px; height: 47px; } .icon-reply-all { width: 16px; height: 16px; } .icon-reply { width: 16px; height: 16px; } .icon-signout { width: 15px; height: 19px; } .icon-split { width: 16px; height: 16px; } .icon-stopwatch { width: 77px; height: 83px; } .icon-switchView { width: 19px; height: 18px; } .icon-team { width: 16px; height: 16px; } .icon-templates { width: 24px; height: 24px; } .icon-tools { width: 24px; height: 24px; } .icon-total-tickets { width: 48px; height: 83px; } .icon-twitter { width: 17px; height: 17px; } .icon-user { width: 16px; height: 16px; }
|
.icon-arrow-down { width: 13px; height: 7px; } .icon-arrow-left { width: 7px; height: 13px; } .icon-arrow-right { width: 7px; height: 13px; } .icon-arrow-up { width: 13px; height: 7px; } .icon-checkbox-checked { width: 10px; height: 10px; } .icon-checkbox { width: 10px; height: 10px; } .icon-checkmark { width: 16px; height: 14px; } .icon-clock { width: 16px; height: 16px; } .icon-close { width: 13px; height: 13px; } .icon-cloud { width: 16px; height: 16px; } .icon-cog { width: 20px; height: 20px; } .icon-dashboard { width: 24px; height: 24px; } .icon-diagonal-cross { width: 13px; height: 13px; } .icon-download { width: 14px; height: 13px; } .icon-email { width: 17px; height: 17px; } .icon-facebook { width: 17px; height: 17px; } .icon-group { width: 24px; height: 24px; } .icon-important { width: 16px; height: 16px; } .icon-in-process { width: 64px; height: 64px; } .icon-list { width: 16px; height: 16px; } .icon-loading { width: 16px; height: 16px; } .icon-lock-open { width: 16px; height: 16px; } .icon-lock { width: 16px; height: 16px; } .icon-logo { width: 42px; height: 36px; } .icon-long-arrow-right { width: 11px; height: 11px; } .icon-magnifier { width: 15px; height: 15px; } .icon-marker { width: 17px; height: 19px; } .icon-message { width: 24px; height: 24px; } .icon-mood-bad { width: 60px; height: 59px; } .icon-mood-good { width: 60px; height: 59px; } .icon-mood-ok { width: 60px; height: 59px; } .icon-mood-super-bad { width: 60px; height: 59px; } .icon-mood-supergood { width: 60px; height: 59px; } .icon-note { width: 17px; height: 16px; } .icon-one-ticket { width: 48px; height: 10px; } .icon-organization { width: 16px; height: 16px; } .icon-outbound-calls { width: 17px; height: 17px; } .icon-overviews { width: 24px; height: 24px; } .icon-package { width: 16px; height: 16px; } .icon-pen { width: 16px; height: 16px; } .icon-person { width: 24px; height: 24px; } .icon-phone { width: 17px; height: 17px; } .icon-plus { width: 20px; height: 20px; } .icon-priority-modified-inner-circle { width: 16px; height: 16px; } .icon-priority-modified-outer-circle { width: 16px; height: 16px; } .icon-priority { width: 16px; height: 16px; } .icon-received-calls { width: 17px; height: 17px; } .icon-reopening { width: 68px; height: 47px; } .icon-reply-all { width: 16px; height: 16px; } .icon-reply { width: 16px; height: 16px; } .icon-signout { width: 15px; height: 19px; } .icon-split { width: 16px; height: 16px; } .icon-stopwatch { width: 77px; height: 83px; } .icon-switchView { width: 19px; height: 18px; } .icon-team { width: 16px; height: 16px; } .icon-templates { width: 24px; height: 24px; } .icon-tools { width: 24px; height: 24px; } .icon-total-tickets { width: 48px; height: 83px; } .icon-twitter { width: 17px; height: 17px; } .icon-user { width: 16px; height: 16px; }
|
||||||
|
|
@ -2215,7 +2215,6 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tab-icon .inner-circle {
|
.nav-tab-icon .inner-circle {
|
||||||
will-change: opacity;
|
|
||||||
animation: fade 3s ease-in-out infinite;
|
animation: fade 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2225,6 +2224,11 @@ footer {
|
||||||
to { opacity: 1 }
|
to { opacity: 1 }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-tab-icon.icon-loading {
|
||||||
|
animation: rotateplane 1.2s infinite ease-in-out;
|
||||||
|
fill: $supergood-color;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-tab-close {
|
.nav-tab-close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -2290,7 +2294,7 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
padding: 14px 2px 10px 10px;
|
padding: 9px 2px 10px 10px;
|
||||||
border-bottom: 1px solid rgba(240, 250, 255, .05);
|
border-bottom: 1px solid rgba(240, 250, 255, .05);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 35 KiB |
12
public/assets/images/icons/loading.svg
Normal file
12
public/assets/images/icons/loading.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||||
|
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>loading</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||||
|
<g id="loading" sketch:type="MSArtboardGroup" fill="#50E3C2">
|
||||||
|
<circle id="Oval-2" sketch:type="MSShapeGroup" cx="8" cy="8" r="5"></circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 713 B |
|
|
@ -1,12 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
|
||||||
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
|
|
||||||
<title>mail</title>
|
|
||||||
<desc>Created with Sketch.</desc>
|
|
||||||
<defs></defs>
|
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
|
||||||
<g id="mail" sketch:type="MSArtboardGroup" fill="#50E3C2">
|
|
||||||
<path d="M11.324675,9 L8.5,11.592593 L5.675325,9 L1,14 L16,14 L11.324675,9 L11.324675,9 Z M17,4 L12,8.591837 L17,14 L17,4 L17,4 Z M0,4 L0,14 L5,8.646465 L0,4 L0,4 Z M17,3 L0,3 L8.449102,10 L17,3 L17,3 Z" id="email-channel-white" sketch:type="MSShapeGroup"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 892 B |
|
|
@ -1,12 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg width="60px" height="59px" viewBox="0 0 60 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
|
||||||
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
|
|
||||||
<title>mood-happy</title>
|
|
||||||
<desc>Created with Sketch.</desc>
|
|
||||||
<defs></defs>
|
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
|
||||||
<g id="mood-happy" sketch:type="MSArtboardGroup" fill="#A9AC41">
|
|
||||||
<path d="M60,5.107871 C60,4.288089 59.937695,3.531367 59.813084,2.711585 C59.563863,1.135082 58.753894,0.315301 57.133956,0.12612 C56.573209,0.06306 55.950156,0 55.389408,0 L4.672897,0 C3.862928,0 3.115265,0.12612 2.305296,0.252241 C1.121495,0.441421 0.436137,1.261202 0.186916,2.459345 C0.062305,3.216067 0,3.909727 0,4.66645 L0,38.592798 L0,39.538699 C0.124611,42.061105 1.05919,43.007006 3.551402,43.007006 C6.853583,43.070067 10.280374,43.070067 13.582555,43.070067 C14.267913,43.070067 15.327103,43.133127 15.327103,43.133127 L15.327103,44.205149 C15.327103,48.367117 15.451713,52.529085 15.514019,56.691054 C15.514019,57.510835 15.576324,58.456737 16.510903,58.898158 C17.445483,59.276519 18.006231,58.519797 18.566978,57.952256 C23.738318,53.159687 28.847352,48.430177 34.018692,43.700667 C34.517134,43.259247 34.953271,43.133127 35.576324,43.133127 L54.517134,43.133127 C55.327103,43.133127 56.074766,43.070067 56.884735,43.007006 C58.753894,42.817826 59.563863,42.124164 59.813084,40.232361 C59.875389,39.664819 59.937695,39.034219 59.937695,38.466677 C60,27.368094 60,16.269513 60,5.107871 L60,5.107871 L60,5.107871 Z M18.780981,20.33617 C16.343481,20.33617 14.405981,18.32766 14.405981,15.942553 C14.405981,13.494681 16.405981,11.548936 18.780981,11.548936 C21.218481,11.548936 23.155981,13.557447 23.155981,15.942553 C23.218481,18.32766 21.218481,20.33617 18.780981,20.33617 L18.780981,20.33617 L18.780981,20.33617 Z M46.343481,15.942553 C46.343481,18.390425 44.343481,20.33617 41.968481,20.33617 C39.530981,20.33617 37.593481,18.32766 37.593481,15.942553 C37.593481,13.494681 39.593481,11.548936 41.968481,11.548936 C44.343481,11.48617 46.343481,13.494681 46.343481,15.942553 L46.343481,15.942553 L46.343481,15.942553 Z M38.093481,27.303191 C38.593481,27.742553 38.655981,28.558511 38.155981,29.060638 C36.093481,31.320213 33.218481,32.575532 30.155981,32.575532 C27.093481,32.575532 24.218481,31.320213 22.155981,29.060638 C21.718481,28.558511 21.718481,27.742553 22.218481,27.303191 C22.718481,26.86383 23.530981,26.86383 23.968481,27.365957 C25.593481,29.123404 27.718481,30.064894 30.093481,30.064894 C32.405981,30.064894 34.655981,29.060638 36.218481,27.365957 C36.780981,26.86383 37.593481,26.86383 38.093481,27.303191 L38.093481,27.303191 L38.093481,27.303191 Z" id="happy" sketch:type="MSShapeGroup"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB |
|
|
@ -1,12 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg width="60px" height="59px" viewBox="0 0 60 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
|
||||||
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
|
|
||||||
<title>mood-super-happy</title>
|
|
||||||
<desc>Created with Sketch.</desc>
|
|
||||||
<defs></defs>
|
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
|
||||||
<g id="mood-super-happy" sketch:type="MSArtboardGroup" fill="#38AE6A">
|
|
||||||
<path d="M60,5.107871 C60,4.288089 59.937695,3.531367 59.813084,2.711585 C59.563863,1.135082 58.753894,0.315301 57.133956,0.12612 C56.573209,0.06306 55.950156,0 55.389408,0 L4.672897,0 C3.862928,0 3.115265,0.12612 2.305296,0.252241 C1.121495,0.441421 0.436137,1.261202 0.186916,2.459345 C0.062305,3.216067 0,3.909727 0,4.66645 L0,38.592798 L0,39.538699 C0.124611,42.061105 1.05919,43.007006 3.551402,43.007006 C6.853583,43.070067 10.280374,43.070067 13.582555,43.070067 C14.267913,43.070067 15.327103,43.133127 15.327103,43.133127 L15.327103,44.205149 C15.327103,48.367117 15.451713,52.529085 15.514019,56.691054 C15.514019,57.510835 15.576324,58.456737 16.510903,58.898158 C17.445483,59.276519 18.006231,58.519797 18.566978,57.952256 C23.738318,53.159687 28.847352,48.430177 34.018692,43.700667 C34.517134,43.259247 34.953271,43.133127 35.576324,43.133127 L54.517134,43.133127 C55.327103,43.133127 56.074766,43.070067 56.884735,43.007006 C58.753894,42.817826 59.563863,42.124164 59.813084,40.232361 C59.875389,39.664819 59.937695,39.034219 59.937695,38.466677 C60,27.368094 60,16.269513 60,5.107871 L60,5.107871 L60,5.107871 Z M40.6,21 C40.6,25.9079759 35.9058824,31 30.1,31 C24.2941176,31 19.6,25.9079759 19.6,21 L40.6,21 Z M23.440835,15.691489 L13.440835,15.691489 C12.753335,15.691489 12.190835,15.126596 12.190835,14.43617 C12.190835,13.745745 12.753335,13.180851 13.440835,13.180851 L14.065835,13.180851 C14.440835,10.230851 16.253335,8.787234 18.378335,8.787234 C20.503335,8.787234 22.315835,10.293617 22.690835,13.180851 L23.440835,13.180851 C24.128335,13.180851 24.690835,13.745745 24.690835,14.43617 C24.690835,15.126596 24.128335,15.691489 23.440835,15.691489 L23.440835,15.691489 L23.440835,15.691489 Z M47.815835,14.43617 C47.815835,15.126596 47.253335,15.691489 46.565835,15.691489 L36.565835,15.691489 C35.878335,15.691489 35.315835,15.126596 35.315835,14.43617 C35.315835,13.745745 35.878335,13.180851 36.565835,13.180851 L37.190835,13.180851 C37.565835,10.230851 39.378335,8.787234 41.503335,8.787234 C43.628335,8.787234 45.440835,10.293617 45.815835,13.180851 L46.565835,13.180851 C47.253335,13.180851 47.815835,13.745745 47.815835,14.43617 L47.815835,14.43617 L47.815835,14.43617 Z" id="super-happy" sketch:type="MSShapeGroup"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.8 KiB |
Loading…
Reference in a new issue