From b237379fa1f9549b0ec3c79ba476d0a870454cce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?=
Date: Thu, 3 Aug 2017 19:18:17 +0200
Subject: [PATCH 1/2] Replace loading icon GIF with pure CSS loading icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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
---
apps/theming/css/theming.scss | 2 +-
core/css/guest.css | 15 +++++++++++++++
core/css/styles.scss | 16 ++++++++++++++++
core/js/login.js | 5 +++--
core/templates/login.php | 5 ++++-
5 files changed, 39 insertions(+), 4 deletions(-)
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 1f18cc068c..c9ea100912 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 e65f0a5de0..d46b2e895c 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 f2acca38e1..36e1d8251d 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 034bb169c5..81ef25ef2d 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 8545e5d07d..0801b3746d 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -61,7 +61,10 @@ script('core', 'merged-login');
-
+
+
+
+
From 92d28fdc6833f99c79867fef57e94882071baa50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?=
Date: Mon, 7 Aug 2017 13:48:20 +0200
Subject: [PATCH 2/2] Ignore clicks on login button icon so they are received
by the button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Visually, the icon positioned on the login button is part of the login
button, so clicking on the icon should be the same as clicking on the
button. As the icon is a different element this commit sets the icon to
ignore mouse events so they are received and handled by the login button
instead.
Signed-off-by: Daniel Calviño Sánchez
---
core/css/guest.css | 7 +++++++
core/css/styles.scss | 7 +++++++
2 files changed, 14 insertions(+)
diff --git a/core/css/guest.css b/core/css/guest.css
index d46b2e895c..56f8c728d0 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -146,6 +146,13 @@ form #datadirField legend {
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 36e1d8251d..667ca0dc2b 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -768,6 +768,13 @@ label.infield {
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 {