summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDaniel Calviño Sánchez <danxuliu@gmail.com>2017-08-03 19:18:17 +0200
committerDaniel Calviño Sánchez <danxuliu@gmail.com>2017-08-03 21:09:43 +0200
commitb237379fa1f9549b0ec3c79ba476d0a870454cce (patch)
tree2f9248e7321249e3ac89713deaae1ff5c7fa7bd1
parentbb865a55febe7b712a0e6cc7e1e93034f60a0e8b (diff)
downloadnextcloud-server-b237379fa1f9549b0ec3c79ba476d0a870454cce.tar.gz
nextcloud-server-b237379fa1f9549b0ec3c79ba476d0a870454cce.zip
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>
-rw-r--r--apps/theming/css/theming.scss2
-rw-r--r--core/css/guest.css15
-rw-r--r--core/css/styles.scss16
-rw-r--r--core/js/login.js5
-rw-r--r--core/templates/login.php5
5 files changed, 39 insertions, 4 deletions
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 1f18cc068c2..c9ea100912c 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -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');
}
}
diff --git a/core/css/guest.css b/core/css/guest.css
index e65f0a5de01..d46b2e895ca 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -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;
}
diff --git a/core/css/styles.scss b/core/css/styles.scss
index f2acca38e1e..36e1d8251de 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -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;
diff --git a/core/js/login.js b/core/js/login.js
index 034bb169c52..81ef25ef2d4 100644
--- a/core/js/login.js
+++ b/core/js/login.js
@@ -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;
},
diff --git a/core/templates/login.php b/core/templates/login.php
index 8545e5d07df..0801b3746df 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -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">