Merge pull request #2526 from szelpe/ember-fadein2

Added fancy fade-in effect to the login pages

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({
     /**

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;
+    }
 }

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>

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" }}

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}}

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" />

core/client/utils/text-field.js

@@ -0,0 +1,3 @@
+Ember.TextField.reopen({
+    attributeBindings: ['autofocus']
+});