From 39ae3869a14e1c2d571cf1c2d7f997e777e3e202 Mon Sep 17 00:00:00 2001
From: Peter Szel <peter_szel@epam.com>
Date: Sat, 29 Mar 2014 02:02:23 +0100
Subject: [PATCH] Added fancy fade-in effect and autofocus to the login pages
(signin, signup, forgotten, reset).
- Added CSS to implement the fade in effect.
- Added 'autofocus' to the attribute bindings of the TextField so they accept it.
---
core/client/app.js | 1 +
core/client/assets/css/ember-hacks.css | 39 ++++++++++++++++++++++++++
core/client/templates/forgotten.hbs | 4 +--
core/client/templates/reset.hbs | 4 +--
core/client/templates/signin.hbs | 4 +--
core/client/templates/signup.hbs | 4 +--
core/client/utils/text-field.js | 3 ++
7 files changed, 51 insertions(+), 8 deletions(-)
create mode 100644 core/client/utils/text-field.js
diff --git a/core/client/app.js b/core/client/app.js
index ecee1b0e4f..b7160f4698 100755
--- a/core/client/app.js
+++ b/core/client/app.js
@@ -2,6 +2,7 @@ import Resolver from 'ember/resolver';
import initFixtures from 'ghost/fixtures/init';
import {currentUser, injectCurrentUser} from 'ghost/initializers/current-user';
import 'ghost/utils/link-view';
+import 'ghost/utils/text-field';
var App = Ember.Application.extend({
/**
diff --git a/core/client/assets/css/ember-hacks.css b/core/client/assets/css/ember-hacks.css
index c51698f1c1..ecd98ecffa 100644
--- a/core/client/assets/css/ember-hacks.css
+++ b/core/client/assets/css/ember-hacks.css
@@ -17,4 +17,43 @@
-webkit-transition: none;
-moz-transition: none;
transition: none;
+}
+
+.fade-in {
+ animation: fadein 0.5s;
+ -moz-animation: fadein 0.5s; /* Firefox */
+ -webkit-animation: fadein 0.5s; /* Safari and Chrome */
+ -o-animation: fadein 0.5s; /* Opera */
+}
+@keyframes fadein {
+ from {
+ opacity:0;
+ }
+ to {
+ opacity:1;
+ }
+}
+@-moz-keyframes fadein { /* Firefox */
+ from {
+ opacity:0;
+ }
+ to {
+ opacity:1;
+ }
+}
+@-webkit-keyframes fadein { /* Safari and Chrome */
+ from {
+ opacity:0;
+ }
+ to {
+ opacity:1;
+ }
+}
+@-o-keyframes fadein { /* Opera */
+ from {
+ opacity:0;
+ }
+ to {
+ opacity: 1;
+ }
}
\ No newline at end of file
diff --git a/core/client/templates/forgotten.hbs b/core/client/templates/forgotten.hbs
index 833db5f620..4fde70da52 100644
--- a/core/client/templates/forgotten.hbs
+++ b/core/client/templates/forgotten.hbs
@@ -1,7 +1,7 @@
-<section class="forgotten-box js-forgotten-box">
+<section class="forgotten-box js-forgotten-box fade-in">
<form id="forgotten" class="forgotten-form" method="post" novalidate="novalidate" {{action "submit" on="submit"}}>
<div class="email-wrap">
- {{input value=email class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off"}}
+ {{input value=email class="email" type="email" placeholder="Email Address" name="email" autofocus="autofocus" autocapitalize="off" autocorrect="off"}}
</div>
<button class="button-save" type="submit">Send new password</button>
</form>
diff --git a/core/client/templates/reset.hbs b/core/client/templates/reset.hbs
index b41c1bdbfb..a255a11fe3 100644
--- a/core/client/templates/reset.hbs
+++ b/core/client/templates/reset.hbs
@@ -1,7 +1,7 @@
-<section class="reset-box js-reset-box">
+<section class="reset-box js-reset-box fade-in">
<form id="reset" class="reset-form" method="post" novalidate="novalidate" {{action "submit" on="submit"}}>
<div class="password-wrap">
- {{input value=passwords.newPassword class="password" type="password" placeholder="Password" name="newpassword" }}
+ {{input value=passwords.newPassword class="password" type="password" placeholder="Password" name="newpassword" autofocus="autofocus" }}
</div>
<div class="password-wrap">
{{input value=passwords.ne2Password class="password" type="password" placeholder="Confirm Password" name="ne2password" }}
diff --git a/core/client/templates/signin.hbs b/core/client/templates/signin.hbs
index 67835bccf8..13813a0dfb 100644
--- a/core/client/templates/signin.hbs
+++ b/core/client/templates/signin.hbs
@@ -1,7 +1,7 @@
-<section class="login-box js-login-box" style="opacity: 1;">
+<section class="login-box js-login-box fade-in">
<form id="login" class="login-form" method="post" novalidate="novalidate">
<div class="email-wrap">
- {{input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off" value=email}}
+ {{input class="email" type="email" placeholder="Email Address" name="email" autofocus="autofocus" autocapitalize="off" autocorrect="off" value=email}}
</div>
<div class="password-wrap">
{{input class="password" type="password" placeholder="Password" name="password" value=password}}
diff --git a/core/client/templates/signup.hbs b/core/client/templates/signup.hbs
index 39d2ff7cf8..c1143d6384 100644
--- a/core/client/templates/signup.hbs
+++ b/core/client/templates/signup.hbs
@@ -1,7 +1,7 @@
-<section class="signup-box js-signup-box">
+<section class="signup-box js-signup-box fade-in">
<form id="signup" class="signup-form" method="post" novalidate="novalidate">
<div class="name-wrap">
- <input class="name" type="text" placeholder="Full Name" name="name" autocorrect="off" />
+ <input class="name" type="text" placeholder="Full Name" name="name" autofocus autocorrect="off" />
</div>
<div class="email-wrap">
<input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off" />
diff --git a/core/client/utils/text-field.js b/core/client/utils/text-field.js
new file mode 100644
index 0000000000..6862aacf88
--- /dev/null
+++ b/core/client/utils/text-field.js
@@ -0,0 +1,3 @@
+Ember.TextField.reopen({
+ attributeBindings: ['autofocus']
+});