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

Replace loading icon GIF with pure CSS loading icon 

The pure CSS loading icon uses an ::after pseudo-element, and thus it
can only be used on container elements; the input element is not a
container element, so when the class "icon-loading-small" is set on an
input element it falls back to a loading icon GIF.

This commit modifies the markup of the login button to add a div element
that holds the confirm icon and the loading icon (depending on the
case). In order to position the icon in the same place as before the
input and the icon are both wrapped by another div making possible to
set the absolute position of the icon relative to the input.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2017-08-03 19:18:17 +02:00
parent bb865a55fe
commit b237379fa1
5 changed files with 39 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');
}
}

15
core/css/guest.css
View File

@ -131,6 +131,21 @@ 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;
}
input, textarea, select, button {
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
}

16
core/css/styles.scss
View File

@ -754,6 +754,22 @@ 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;
}
}
#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">