Commit 5930a48e authored by Gabriel Engel's avatar Gabriel Engel Committed by GitHub

Merge pull request #5229 from RocketChat/rename-loading-animation

rename default loading animation
parents b33113ae 7f4f3bb6
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
} }
} }
.setting-block { .setting-block {
.loading { .loading-animation {
top: 30px; top: 30px;
} }
&:hover { &:hover {
......
@import "_variables.less"; @import "_variables.less";
.loading { .loading-animation {
color: @secondary-font-color; color: @secondary-font-color;
font-size: 1.3rem; font-size: 1.3rem;
margin-left: 32px; margin-left: 32px;
margin-top: 12px; margin-top: 12px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.loading > div { .loading-animation > div {
width: 3px; width: 3px;
height: 3px; height: 3px;
background-color: @secondary-font-color; border-radius: 100%;
display: inline-block;
border-radius: 100%; background-color: @secondary-font-color;
display: inline-block; -webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: loading-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
} }
.loading .bounce1 { .loading-animation .bounce1 {
-webkit-animation-delay: -0.32s; -webkit-animation-delay: -0.32s;
animation-delay: -0.32s; animation-delay: -0.32s;
} }
.loading .bounce2 { .loading-animation .bounce2 {
-webkit-animation-delay: -0.16s; -webkit-animation-delay: -0.16s;
animation-delay: -0.16s; animation-delay: -0.16s;
} }
@-webkit-keyframes sk-bouncedelay { @-webkit-keyframes loading-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) } 0%,
40% { -webkit-transform: scale(1.0) } 80%,
100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
} }
@keyframes sk-bouncedelay { @keyframes loading-bouncedelay {
0%, 80%, 100% { 0%,
-webkit-transform: scale(0); 80%,
transform: scale(0); 100% {
} 40% { -webkit-transform: scale(0);
-webkit-transform: scale(1.0); transform: scale(0);
transform: scale(1.0); }
} 40% {
} -webkit-transform: scale(1.0);
\ No newline at end of file transform: scale(1.0);
}
}
<template name="loading"> <template name="loading">
<div class="loading"> <div class="loading-animation">
{{_ "Connecting to an Agent"}} {{_ "Connecting to an Agent"}}
<div class="bounce1"></div> <div class="bounce1"></div>
<div class="bounce2"></div> <div class="bounce2"></div>
......
...@@ -8,9 +8,6 @@ Template.mentionsFlexTab.helpers ...@@ -8,9 +8,6 @@ Template.mentionsFlexTab.helpers
message: -> message: ->
return _.extend(this, { customClass: 'mentions' }) return _.extend(this, { customClass: 'mentions' })
notReadySubscription: ->
return 'notready' unless Template.instance().subscriptionsReady()
hasMore: -> hasMore: ->
return Template.instance().hasMore.get() return Template.instance().hasMore.get()
......
.mentioned-messages-list { .mentioned-messages-list {
&.notready {
background-image: url(images/logo/loading.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
height: 100px;
.message {
display: none;
}
}
li.empty {
text-align: center;
margin-top: 60px;
}
.message-cog-container { .message-cog-container {
.message-action { .message-action {
display: none !important; display: none !important;
...@@ -23,11 +7,4 @@ ...@@ -23,11 +7,4 @@
} }
} }
} }
.load-more {
text-transform: lowercase;
text-align: center;
line-height: 40px;
font-style: italic;
}
} }
...@@ -2194,21 +2194,6 @@ label.required:after { ...@@ -2194,21 +2194,6 @@ label.required:after {
} }
} }
.message-popup-results {
&.notready {
.message-popup-items {
position: relative;
height: 100px;
.loading {
display: flex;
}
}
.popup-item {
display: none;
}
}
}
.message-popup-position { .message-popup-position {
position: relative; position: relative;
} }
......
...@@ -887,6 +887,6 @@ label.required:after { ...@@ -887,6 +887,6 @@ label.required:after {
color: @error-contrast; color: @error-contrast;
} }
.loading.dark > div { .loading-animation.dark > div {
background-color: @transparent-darkest; background-color: @transparent-darkest;
} }
<template name="loading"> <template name="loading">
<div class="loading {{#if dark}}dark{{/if}}"> <div class="loading-animation {{#if dark}}dark{{/if}}">
<div class="bounce1"></div> <div class="bounce1"></div>
<div class="bounce2"></div> <div class="bounce2"></div>
<div class="bounce3"></div> <div class="bounce3"></div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
Inject.rawBody('page-loading', ` Inject.rawBody('page-loading', `
<style> <style>
.loading { .loading-animation {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
...@@ -13,35 +13,39 @@ Inject.rawBody('page-loading', ` ...@@ -13,35 +13,39 @@ Inject.rawBody('page-loading', `
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.loading > div { .loading-animation > div {
width: 10px; width: 10px;
height: 10px; height: 10px;
margin: 2px; margin: 2px;
border-radius: 100%; border-radius: 100%;
display: inline-block; display: inline-block;
background-color: rgba(255,255,255,0.8);
-webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both; -webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
animation: loading-bouncedelay 1.4s infinite ease-in-out both; animation: loading-bouncedelay 1.4s infinite ease-in-out both;
background-color: rgba(255,255,255,0.8);
} }
.loading .bounce1 { .loading-animation .bounce1 {
-webkit-animation-delay: -0.32s; -webkit-animation-delay: -0.32s;
animation-delay: -0.32s; animation-delay: -0.32s;
} }
.loading .bounce2 { .loading-animation .bounce2 {
-webkit-animation-delay: -0.16s; -webkit-animation-delay: -0.16s;
animation-delay: -0.16s; animation-delay: -0.16s;
} }
@-webkit-keyframes loading-bouncedelay { @-webkit-keyframes loading-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) } 0%,
80%,
100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) } 40% { -webkit-transform: scale(1.0) }
} }
@keyframes loading-bouncedelay { @keyframes loading-bouncedelay {
0%, 80%, 100% { transform: scale(0); } 0%,
80%,
100% { transform: scale(0); }
40% { transform: scale(1.0); } 40% { transform: scale(1.0); }
} }
</style> </style>
<div id="initial-page-loading" class="page-loading"> <div id="initial-page-loading" class="page-loading">
<div class="loading"> <div class="loading-animation">
<div class="bounce1"></div> <div class="bounce1"></div>
<div class="bounce2"></div> <div class="bounce2"></div>
<div class="bounce3"></div> <div class="bounce3"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment