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

5 files changed, 53 insertions, 4 deletions

diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 20b84d2a0d3..77fc6f70200 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..56f8c728d00 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -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;
 }
diff --git a/core/css/styles.scss b/core/css/styles.scss
index f2acca38e1e..667ca0dc2be 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -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;
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">