Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add new login animation

Browse source
This commit is contained in:
RainLoop Team 2016-06-23 01:26:54 +03:00
parent d8903c0680
commit 70be42bbaf
9 changed files with 97 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

40
dev/Styles/Login.less
View file

@ -136,3 +136,43 @@
outline: none; outline: none;
} }
} }
@keyframes loginRotation {
to {transform: rotate(1turn);}
}
.submitting-pane {
position: relative;
&.submitting {
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
background: rgba(0,0,0,.3);
z-index: 1051;
border-radius: 8px;
}
&:after{
content: '';
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
border: 8px solid transparent;
border-color: transparent;
border-top-color: #fff;
animation: loginRotation 1s infinite ease-in-out;
border-radius: 50%;
z-index: 1052;
}
}
}

10
rainloop/v/0.0.0/app/templates/Themes/template.less
View file

@ -64,6 +64,16 @@
.thm-linear-gradient-mixin(@login-gradient-start, @login-gradient-end); .thm-linear-gradient-mixin(@login-gradient-start, @login-gradient-end);
.thm-border-radius(@login-border-radius); .thm-border-radius(@login-border-radius);
.thm-box-shadow(@login-box-shadow); .thm-box-shadow(@login-box-shadow);
&.submitting-pane.submitting {
&:before{
background: @spinner-background;
.thm-border-radius(@login-border-radius);
}
&:after{
border-top-color: @spinner-color;
}
}
} }
.thm-login-text { .thm-login-text {

3
rainloop/v/0.0.0/app/templates/Themes/values.less
View file

@ -21,6 +21,9 @@
@powered-color: #333; @powered-color: #333;
@languages-color: #333; @languages-color: #333;
@spinner-background: rgba(0,0,0,.3);
@spinner-color: #fff;
// MENU // MENU
@dropdown-menu-color: #333; @dropdown-menu-color: #333;
@dropdown-menu-background-color: #fff; @dropdown-menu-background-color: #fff;

61
rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html
View file

@ -5,38 +5,39 @@
<button type="button" class="close" data-bind="click: function () { submitError('') }">&times;</button> <button type="button" class="close" data-bind="click: function () { submitError('') }">&times;</button>
<span data-bind="text: submitError"></span> <span data-bind="text: submitError"></span>
</div> </div>
<form class="wrapper loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError}"> <div class="wrapper-parent">
<div class="controls" data-bind="css: {'error': loginError, 'animated': loginErrorAnimation}"> <form class="wrapper submitting-pane loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
<div class="input-append"> <div class="controls" data-bind="css: {'error': loginError, 'animated': loginErrorAnimation}">
<input type="text" class="input-block-level inputLogin checkAutocomplete" <div class="input-append">
name="RainLoopAdminLogin" id="RainLoopAdminLogin" <input type="text" class="input-block-level inputLogin checkAutocomplete"
style="padding-right: 35px;" name="RainLoopAdminLogin" id="RainLoopAdminLogin"
autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]LOGIN/LABEL_LOGIN" style="padding-right: 35px;"
data-bind="textInput: login, hasFocus: loginFocus, disable: submitRequest" /> autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]LOGIN/LABEL_LOGIN"
<span class="add-on"> data-bind="textInput: login, hasFocus: loginFocus, disable: submitRequest" />
<i class="icon-user"></i> <span class="add-on">
</span> <i class="icon-user"></i>
</span>
</div>
</div> </div>
</div> <div class="controls" data-bind="css: {'error': passwordError, 'animated': passwordErrorAnimation}">
<div class="controls" data-bind="css: {'error': passwordError, 'animated': passwordErrorAnimation}"> <div class="input-append">
<div class="input-append"> <input type="password" class="input-block-level inputPassword checkAutocomplete"
<input type="password" class="input-block-level inputPassword checkAutocomplete" placeholder="Password" name="RainLoopAdminPassword" id="RainLoopAdminPassword"
placeholder="Password" name="RainLoopAdminPassword" id="RainLoopAdminPassword" style="padding-right: 35px;"
style="padding-right: 35px;" autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]LOGIN/LABEL_PASSWORD"
autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]LOGIN/LABEL_PASSWORD" data-bind="textInput: password, disable: submitRequest" />
data-bind="textInput: password, disable: submitRequest" /> <span class="add-on">
<span class="add-on"> <i class="icon-key"></i>
<i class="icon-key"></i> </span>
</span> </div>
</div> </div>
</div> <div class="controls">
<div class="controls"> <button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand">
<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand"> <span data-i18n="LOGIN/BUTTON_LOGIN"></span>
<i class="icon-spinner animated" data-bind="visible: submitRequest"></i> </button>
<span data-bind="visible: !submitRequest()" data-i18n="LOGIN/BUTTON_LOGIN"></span> </div>
</button> </form>
</div> </div>
</form>
<div class="e-powered thm-powered" data-bind="visible: logoPowered"> <div class="e-powered thm-powered" data-bind="visible: logoPowered">
Powered by <a href="http://www.rainloop.net" target="_blank">RainLoop</a> Powered by <a href="http://www.rainloop.net" target="_blank">RainLoop</a>
</div> </div>

5
rainloop/v/0.0.0/app/templates/Views/User/Login.html
View file

@ -23,7 +23,7 @@
<div class="wrapper loginWelcomeForm thm-login-text" data-bind="css: {'welcome-on': welcome}"> <div class="wrapper loginWelcomeForm thm-login-text" data-bind="css: {'welcome-on': welcome}">
<!-- ko template: { name: 'LoginWelcome' } --><!-- /ko --> <!-- ko template: { name: 'LoginWelcome' } --><!-- /ko -->
</div> </div>
<form class="wrapper loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'welcome-off': welcome}"> <form class="wrapper submitting-pane loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'welcome-off': welcome, 'submitting': submitRequest()}">
{{INCLUDE/TopControlGroup/PLACE}} {{INCLUDE/TopControlGroup/PLACE}}
<div class="controls plugin-mark-Login-TopControlGroup" data-bind="css: {'error': emailError, 'animated': emailErrorAnimation}"> <div class="controls plugin-mark-Login-TopControlGroup" data-bind="css: {'error': emailError, 'animated': emailErrorAnimation}">
<div class="input-append"> <div class="input-append">
@ -72,8 +72,7 @@
{{INCLUDE/BottomControlGroup/PLACE}} {{INCLUDE/BottomControlGroup/PLACE}}
<div class="controls"> <div class="controls">
<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand, hasFocus: submitFocus"> <button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand, hasFocus: submitFocus">
<i class="icon-spinner animated" data-bind="visible: submitRequest"></i> <span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN"></span>
<span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN" data-bind="visible: !submitRequest()"></span>
</button> </button>
</div> </div>
<div class="controls clearfix" style="margin-bottom: 20px"> <div class="controls clearfix" style="margin-bottom: 20px">

3
rainloop/v/0.0.0/themes/Clear/styles.less
View file

@ -0,0 +1,3 @@
@spinner-background: rgba(255,255,255,.5);
@spinner-color: #666;

3
rainloop/v/0.0.0/themes/Mobile/styles.less
View file

@ -0,0 +1,3 @@
@spinner-background: rgba(255,255,255,.5);
@spinner-color: #666;

2
rainloop/v/0.0.0/themes/Squares/styles.less
View file

@ -15,6 +15,8 @@
@login-border: none; @login-border: none;
@login-border-radius: 7px; @login-border-radius: 7px;
@spinner-background: rgba(0,0,0,.2);
// MENU // MENU
@dropdown-menu-color: #333; @dropdown-menu-color: #333;
@dropdown-menu-background-color: #fff; @dropdown-menu-background-color: #fff;

3
rainloop/v/0.0.0/themes/Wood/styles.less
View file

@ -15,6 +15,9 @@
@login-border: none; @login-border: none;
@login-border-radius: 7px; @login-border-radius: 7px;
@spinner-background: rgba(255,255,255,.5);
@spinner-color: #666;
// MENU // MENU
@dropdown-menu-color: #333; @dropdown-menu-color: #333;
@dropdown-menu-background-color: #fff; @dropdown-menu-background-color: #fff;