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

fix task loader animation performance

Browse source 
and add new class for round loaders: .loading.dot.icon
This commit is contained in:
Felix Niklas 2015-01-20 16:44:28 +01:00
parent 03e615bcc9
commit f734ed334d
2 changed files with 13 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/controllers/taskbar_widget.js.coffee
View file

@ -29,7 +29,7 @@ class App.TaskbarWidget extends App.Controller
data = data =
url: '#' url: '#'
id: false id: false
iconClass: 'loading' iconClass: 'loading dot'
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 )

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

@ -1797,7 +1797,7 @@ ol.tabs li {
.loading.icon { .loading.icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
background: hsl(339,80%,62%); background: hsl(145,51%,45%);
-webkit-animation: rotateplane 1.2s infinite ease-in-out; -webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out;
} }
@ -1808,27 +1808,28 @@ ol.tabs li {
} }
@-webkit-keyframes rotateplane { @-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background: hsl(202,68%,54%); } 0% { -webkit-transform: perspective(120px); }
50% { -webkit-transform: perspective(120px) rotateY(180deg); background: hsl(145,51%,45%); } 50% { -webkit-transform: perspective(120px) rotateY(180deg); }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background: hsl(202,68%,54%); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); }
} }
@keyframes rotateplane { @keyframes rotateplane {
0% { 0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
background: hsl(202,68%,54%);
} 50% { } 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
background: hsl(145,51%,45%);
} 100% { } 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
background: hsl(202,68%,54%);
} }
} }
.loading.dot.icon {
border-radius: 100%;
}
/* /*
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@ -2097,15 +2098,6 @@ footer {
&.loading { &.loading {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -6px 0 0 -5px;
&:after {
@extend .priority.icon:after;
}
} }
&.error { &.error {
@ -2127,8 +2119,7 @@ footer {
.task.active .priority.icon, .task.active .priority.icon,
.task.active .modified.priority.icon, .task.active .modified.priority.icon,
.task.active .modified.priority.icon:after, .task.active .modified.priority.icon:after {
.task.active .loading.icon:after {
background-color: white; background-color: white;
border-color: white; border-color: white;
} }
@ -2146,8 +2137,7 @@ footer {
.level-1.active, .level-1.active,
.level-1.active .priority.icon:after, .level-1.active .priority.icon:after,
.level-1 .modified.priority.icon, .level-1 .modified.priority.icon,
.level-1 .modified.priority.icon:after, .level-1 .modified.priority.icon:after {
.level-1.active .loading.icon:after {
background-color: #38ae6a; background-color: #38ae6a;
border-color: #38ae6a; border-color: #38ae6a;
color: #38ae6a; color: #38ae6a;
@ -2162,8 +2152,7 @@ footer {
.level-2.active, .level-2.active,
.level-2.active .priority.icon:after, .level-2.active .priority.icon:after,
.level-2 .modified.priority.icon, .level-2 .modified.priority.icon,
.level-2 .modified.priority.icon:after, .level-2 .modified.priority.icon:after {
.level-2.active .loading.icon:after {
background-color: #f35910; background-color: #f35910;
border-color: #f35910; border-color: #f35910;
color: #f35910; color: #f35910;
@ -2178,8 +2167,7 @@ footer {
.level-3.active, .level-3.active,
.level-3.active .priority.icon:after, .level-3.active .priority.icon:after,
.level-3 .modified.priority.icon, .level-3 .modified.priority.icon,
.level-3 .modified.priority.icon:after, .level-3 .modified.priority.icon:after {
.level-3.active .loading.icon:after {
background-color: #faab00; background-color: #faab00;
border-color: #faab00; border-color: #faab00;
} }