mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #5972 from nextcloud/replace-loading-icon-gif-with-pure-css-in-login-button 

Replace loading icon GIF with pure CSS in login button
This commit is contained in:
Morris Jobke 2017-08-08 14:40:35 +02:00 committed by GitHub
parent 481002a00b 92d28fdc68
commit d7645ee928
5 changed files with 53 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/theming/css/theming.scss
View File

@ -66,7 +66,7 @@ input.primary {
}
@if (lightness($color-primary) > 50) {
#body-login input.login {
#body-login #submit-icon.icon-confirm-white {
background-image: url('../../../core/img/actions/confirm.svg');
}
}

22
core/css/guest.css
View File

@ -131,6 +131,28 @@ form #datadirField legend {
}
/* Buttons and input */
#submit-wrapper {
position: relative; /* Make the wrapper the containing block of its
absolutely positioned descendant icons */
}
#submit-wrapper .icon-confirm-white {
position: absolute;
top: 23px;
right: 23px;
}
#submit-wrapper .icon-loading-small {
position: absolute;
top: 22px;
right: 24px;
}
#submit-wrapper #submit-icon {
pointer-events: none; /* The submit icon is positioned on the submit button.
From the user point of view the icon is part of the
button, so the clicks on the icon have to be
applied to the button instead. */
}
input, textarea, select, button {
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
}

23
core/css/styles.scss
View File

@ -754,6 +754,29 @@ label.infield {
/* Log in and install button */
#body-login #submit-wrapper {
position: relative; /* Make the wrapper the containing block of its
absolutely positioned descendant icons */
.icon-confirm-white {
position: absolute;
top: 23px;
right: 23px;
}
.icon-loading-small {
position: absolute;
top: 22px;
right: 24px;
}
#submit-icon {
pointer-events: none; /* The submit icon is positioned on the submit
button. From the user point of view the icon is
part of the button, so the clicks on the icon
have to be applied to the button instead. */
}
}
#body-login input {
font-size: 20px;
margin: 5px;

5
core/js/login.js
View File

@ -12,9 +12,10 @@
*/
OC.Login = _.extend(OC.Login || {}, {
onLogin: function () {
$('#submit')
$('#submit-icon')
.removeClass('icon-confirm-white')
.addClass('icon-loading-small')
.addClass('icon-loading-small');
$('#submit')
.attr('value', t('core', 'Logging in …'));
return true;
},

5
core/templates/login.php
View File

@ -61,7 +61,10 @@ script('core', 'merged-login');
</p>
<?php } ?>
<input type="submit" id="submit" class="login primary icon-confirm-white" title="" value="<?php p($l->t('Log in')); ?>" disabled="disabled" />
<div id="submit-wrapper">
<input type="submit" id="submit" class="login primary" title="" value="<?php p($l->t('Log in')); ?>" disabled="disabled" />
<div id="submit-icon" class="icon-confirm-white"></div>
</div>
<div class="login-additional">
<div class="remember-login-container">