From 3141680febeaed14548c876c2a713ee23801c434 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 6 Oct 2016 16:48:10 +0200 Subject: [PATCH 1/5] bring back dedicated log in button to make log in more usable --- core/css/icons.css | 3 +++ core/css/styles.css | 28 +++------------------------- core/img/actions/confirm-white.svg | 4 ++++ core/js/login.js | 12 ++++++------ core/templates/login.php | 4 +++- 5 files changed, 19 insertions(+), 32 deletions(-) create mode 100644 core/img/actions/confirm-white.svg diff --git a/core/css/icons.css b/core/css/icons.css index 45069a23c44fa..8f7a69ca48891 100644 --- a/core/css/icons.css +++ b/core/css/icons.css @@ -149,6 +149,9 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- .icon-confirm { background-image: url('../img/actions/confirm.svg?v=1'); } +.icon-confirm-white { + background-image: url('../img/actions/confirm-white.svg?v=1'); +} .icon-delete, .icon-delete.no-permission:hover, diff --git a/core/css/styles.css b/core/css/styles.css index efc49e02a1716..978d8e29c3228 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -286,28 +286,6 @@ body { margin: -13px; } -/* position log in button as confirm icon in right of password field */ -#body-login #submit.login { - position: absolute; - right: 0; - top: 0; - border: none; - background-color: transparent; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - opacity: .3; -} -#body-login #submit.login:hover, -#body-login #submit.login:focus { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; - opacity: .7; -} -#body-login input[type="password"], -#body-login input[name="adminpass-clone"] { - padding-right: 40px; - box-sizing: border-box; - min-width: 269px; -} - #body-login form { position: relative; width: 280px; @@ -616,8 +594,8 @@ label.infield { width: 249px; } #body-login input.login { - width: auto; - float: right; + width: 269px; + background-position: right 12px center; } #body-login input[type="submit"] { padding: 10px 20px; /* larger log in and installation buttons */ @@ -626,7 +604,7 @@ label.infield { margin: 18px 5px 0 16px !important; } #body-login .remember-login-container { - margin-top: 10px; + margin: 10px 0; text-align: center; } diff --git a/core/img/actions/confirm-white.svg b/core/img/actions/confirm-white.svg new file mode 100644 index 0000000000000..f3144bce244bf --- /dev/null +++ b/core/img/actions/confirm-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/core/js/login.js b/core/js/login.js index 62aa8e9f37a5c..034bb169c52cd 100644 --- a/core/js/login.js +++ b/core/js/login.js @@ -13,18 +13,18 @@ OC.Login = _.extend(OC.Login || {}, { onLogin: function () { $('#submit') - .removeClass('icon-confirm') + .removeClass('icon-confirm-white') .addClass('icon-loading-small') - .css('opacity', '1'); + .attr('value', t('core', 'Logging in …')); return true; }, rememberLogin: function(){ if($(this).is(":checked")){ - if($("#user").val() && $("#password").val()) { - $('#submit').trigger('click'); - } - } + if($("#user").val() && $("#password").val()) { + $('#submit').trigger('click'); + } + } } }); diff --git a/core/templates/login.php b/core/templates/login.php index 49fa0dd6affd7..46e78576a1f51 100644 --- a/core/templates/login.php +++ b/core/templates/login.php @@ -53,7 +53,6 @@ autocomplete="on" autocapitalize="off" autocorrect="off" required tabindex="2"> -

@@ -75,6 +74,9 @@ + + + From 362992903e8f39ee505bb106a3c026e27e6d262b Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 6 Oct 2016 19:01:12 +0200 Subject: [PATCH 2/5] modify log in button style to look more like website --- core/css/icons.css | 4 ++-- core/css/styles.css | 3 ++- core/img/actions/confirm-white.svg | 2 +- core/img/actions/confirm.svg | 5 ++++- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/core/css/icons.css b/core/css/icons.css index 8f7a69ca48891..a9ce715f39035 100644 --- a/core/css/icons.css +++ b/core/css/icons.css @@ -147,10 +147,10 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- } .icon-confirm { - background-image: url('../img/actions/confirm.svg?v=1'); + background-image: url('../img/actions/confirm.svg?v=2'); } .icon-confirm-white { - background-image: url('../img/actions/confirm-white.svg?v=1'); + background-image: url('../img/actions/confirm-white.svg?v=2'); } .icon-delete, diff --git a/core/css/styles.css b/core/css/styles.css index 978d8e29c3228..36a2e607441b8 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -595,7 +595,8 @@ label.infield { } #body-login input.login { width: 269px; - background-position: right 12px center; + background-position: right 16px center; + border-radius: 50px; } #body-login input[type="submit"] { padding: 10px 20px; /* larger log in and installation buttons */ diff --git a/core/img/actions/confirm-white.svg b/core/img/actions/confirm-white.svg index f3144bce244bf..266f2bc1abc9f 100644 --- a/core/img/actions/confirm-white.svg +++ b/core/img/actions/confirm-white.svg @@ -1,4 +1,4 @@ - + diff --git a/core/img/actions/confirm.svg b/core/img/actions/confirm.svg index e3c41453d883e..f12084ed40e8e 100644 --- a/core/img/actions/confirm.svg +++ b/core/img/actions/confirm.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + From 75ec1541e4df0e48e588412724856d7475fc9423 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 6 Oct 2016 19:08:32 +0200 Subject: [PATCH 3/5] fix log in button layout --- core/css/styles.css | 2 +- core/templates/login.php | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 36a2e607441b8..ae1459af9d41d 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -289,7 +289,7 @@ body { #body-login form { position: relative; width: 280px; - margin: 32px auto; + margin: 16px auto; padding: 0; } #body-login form fieldset { diff --git a/core/templates/login.php b/core/templates/login.php index 46e78576a1f51..b6b42d3b65b91 100644 --- a/core/templates/login.php +++ b/core/templates/login.php @@ -64,6 +64,9 @@ t('Wrong password.')); ?>

+ + + - - From ee231759e56db548bc9eb27dbf98db3d3167fb82 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 11 Oct 2016 13:58:10 +0200 Subject: [PATCH 4/5] update styles of log in Signed-off-by: Jan-Christoph Borchardt --- core/css/styles.css | 10 ++++++++-- core/templates/login.php | 30 +++++++++++++++++++----------- 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index ae1459af9d41d..d7b7a6d0b9b2c 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -398,7 +398,6 @@ label.infield { position: relative; margin: 0; padding: 14px; - padding-left: 28px; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; @@ -420,6 +419,8 @@ label.infield { #body-login #remember_login:hover+label, #body-login #remember_login:focus+label, +#body-login #forgot-password:hover, +#body-login #forgot-password:focus, #body-login p.info a:hover, #body-login p.info a:focus { opacity: .6; @@ -596,7 +597,6 @@ label.infield { #body-login input.login { width: 269px; background-position: right 16px center; - border-radius: 50px; } #body-login input[type="submit"] { padding: 10px 20px; /* larger log in and installation buttons */ @@ -605,9 +605,15 @@ label.infield { margin: 18px 5px 0 16px !important; } #body-login .remember-login-container { + display: inline-block; margin: 10px 0; text-align: center; } +#body-login #forgot-password { + padding: 11px; + float: right; + color: #fff; +} /* Sticky footer */ #body-login .wrapper { diff --git a/core/templates/login.php b/core/templates/login.php index b6b42d3b65b91..de9c1701cef31 100644 --- a/core/templates/login.php +++ b/core/templates/login.php @@ -43,7 +43,7 @@ placeholder="t('Username or email')); ?>" value="" - autocomplete="on" autocapitalize="off" autocorrect="off" required tabindex="1"> + autocomplete="on" autocapitalize="off" autocorrect="off" required>

@@ -51,7 +51,7 @@ - autocomplete="on" autocapitalize="off" autocorrect="off" required tabindex="2"> + autocomplete="on" autocapitalize="off" autocorrect="off" required>

@@ -65,18 +65,26 @@

- + - - - - - - t('Forgot password?')); ?> - -