Merge pull request #307 from appirio-tech/persistent-placeholder

Persistent placeholder

Author: nlitwin

app/account/register/register.jade

@@ -13,9 +13,11 @@
     p.form-error(ng-show="vm.errMsg") {{vm.errMsg}}
 
     .first-last-names
-      input(right-placeholder, focused-placeholder="First", ng-model="vm.firstname", maxlength="64", name="firstname", placeholder="First Name", type="text", required)
+      input-sticky-placeholder(sticky-placeholder="First", ng-model="vm.firstname")
+        input(ng-model="vm.firstname", maxlength="64", name="firstname", placeholder="First Name", type="text", required)
 
-      input(right-placeholder, focused-placeholder="Last", ng-model="vm.lastname", maxlength="64", name="lastname", placeholder="Last Name", type="text", required)
+      input-sticky-placeholder(sticky-placeholder="Last", ng-model="vm.lastname")
+        input(ng-model="vm.lastname", maxlength="64", name="lastname", placeholder="Last Name", type="text", required)
 
     .country-dropdown
       angucomplete-alt(
@@ -36,7 +38,8 @@
         p.form-error(ng-show="vm.registerForm.country.$error.required") Please choose a country from the list.
 
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.username.$error.usernameIsFree || vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength), 'success-bar': (vm.registerForm.username.$valid && !vm.registerForm.username.$error.usernameIsFree) }")
-      input(right-placeholder, focused-placeholder="Username", ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
+      input-sticky-placeholder(sticky-placeholder="Username", ng-model="vm.username")
+        input(ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
 
       .tips.username-tips(ng-show="vm.usernameTips")
         h3 Username Tips:
@@ -53,7 +56,8 @@
       p.form-error(ng-show="vm.registerForm.username.$dirty && (vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength)") That username is not the correct length or format.
 
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.email.$dirty && vm.registerForm.email.$invalid), 'success-bar': (vm.registerForm.email.$valid) }")
-      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, email-is-available, required)
+      input-sticky-placeholder(sticky-placeholder="Email", ng-model="vm.email")
+        input(ng-model="vm.email", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, email-is-available, required)
 
       .tips.email-tips(ng-show="vm.emailTips")
         h3 Email Tips:

app/account/reset-password/reset-password.jade

@@ -11,7 +11,8 @@
     p.email-label Please enter your email address, and we'll send you a link to reset your password
 
     .validation-bar(ng-class="{ 'error-bar': (vm.generateTokenForm.email.$dirty && vm.generateTokenForm.email.$invalid), 'success-bar': (vm.generateTokenForm.email.$valid) }")
-      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="EMAIL ADDRESS", type="email", valid-email, required)
+      input-sticky-placeholder(sticky-placeholder="Email", ng-model="vm.email")
+        input(ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="EMAIL ADDRESS", type="email", valid-email, required)
 
       .tips.email-tips(ng-show="vm.emailTips")
         h3 Email Tips:

app/directives/history-graph/history-graph.directive.js

@@ -6,9 +6,7 @@
   function historyGraph() {
     return {
       restrict: 'E',
-      templateUrl: function(elem, attrs) {
-        return 'directives/history-graph/history-graph.directive.html';
-      },
+      templateUrl: 'directives/history-graph/history-graph.directive.html',
       scope: {
         promise: '=',
         rating: '=',

app/directives/input-sticky-placeholder/input-sticky-placeholder.directive.js

@@ -0,0 +1,42 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('inputStickyPlaceholder', inputStickyPlaceholder);
+
+  /*
+   *  ******
+   *         Make sure to add padding-right to the input element
+   *         so that the text entered does not overlap with the
+   *         sticky-placeholder
+   *  ******
+   *
+   *  Example:
+   *  input-sticky-placeholder(sticky-placeholder="First", ng-model="vm.firstname")
+   *    input(ng-model="vm.firstname", ...)
+   *
+   */
+
+  function inputStickyPlaceholder() {
+    return {
+      restrict: 'E',
+      transclude: true,
+      replace: true,
+      templateUrl: 'directives/input-sticky-placeholder/input-sticky-placeholder.html',
+      link: function(scope, element, attrs) {
+        var span = angular.element(element[0].children[1]);
+        var input = angular.element(element[0].children[0].children[0]);
+        span.text('');
+
+        scope.$watch(function() {
+          return input.val();
+        }, function(newValue, oldValue) {
+          span.text('');
+
+          if (newValue && newValue.length) {
+            span.text(attrs.stickyPlaceholder);
+          }
+        });
+      }
+    };
+  }
+})();

app/directives/input-sticky-placeholder/input-sticky-placeholder.jade

@@ -0,0 +1,4 @@
+.input-sticky-placeholder-container
+  div(ng-transclude)
+
+  span.placeholder-text

app/directives/right-placeholder.directive.js

@@ -63,6 +63,7 @@ html
     link(rel="stylesheet", href="assets/css/directives/skill-tile.css")
     link(rel="stylesheet", href="assets/css/directives/profile-widget.css")
     link(rel="stylesheet", href="assets/css/directives/ios-card.css")
+    link(rel="stylesheet", href="assets/css/directives/input-sticky-placeholder.css")
     link(rel="stylesheet", href="assets/css/directives/history-graph.css")
     link(rel="stylesheet", href="assets/css/directives/external-link-data.css")
     link(rel="stylesheet", href="assets/css/directives/external-account.css")
@@ -153,10 +154,10 @@ html
     script(src="directives/focus-on.directive.js")
     script(src="directives/header/header-menu-item.directive.js")
     script(src="directives/history-graph/history-graph.directive.js")
+    script(src="directives/input-sticky-placeholder/input-sticky-placeholder.directive.js")
     script(src="directives/ios-card/ios-card.directive.js")
     script(src="directives/on-file-change.directive.js")
     script(src="directives/profile-widget/profile-widget.directive.js")
-    script(src="directives/right-placeholder.directive.js")
     script(src="directives/skill-tile/skill-tile.directive.js")
     script(src="directives/slideable.directive.js")
     script(src="directives/srm-tile/srm-tile.directive.js")

app/index.jade

@@ -33,6 +33,11 @@
 
     input[name="firstname"], input[name="lastname"] {
       width: 185px;
+      padding-right: 45px;
+    }
+
+    input[name="username"], input[name="email"] {
+      padding-right: 85px;
     }
   }
 

assets/css/account/register.scss

@@ -0,0 +1,16 @@
+@import '../partials/combined';
+
+.input-sticky-placeholder-container {
+  position: relative;
+
+  span.placeholder-text {
+    position: absolute;
+    top: 3px;
+    right: 10px;
+    @include sofia-pro-regular;
+    font-size: 10px;
+    line-height: 40px;
+    text-transform: uppercase;
+    color: $system-gray;
+  }
+}

assets/css/directives/input-sticky-placeholder.scss

@@ -80,6 +80,7 @@
         margin-bottom: 15px;
         padding: 0 21px;
         border: 1px solid #DCDCDC;
+        background-color: $white;
         border-radius: 4px;
         @media only screen and (max-width: 767px) {
           display: inline-block;
@@ -106,7 +107,6 @@
         a {
           margin-bottom: 21px;
           @include button-m-wide;
-          @include button-ghost;
           text-decoration: none;
         }
       }

assets/css/my-dashboard/srms.scss

@@ -82,6 +82,11 @@
   font-weight: 400;
 }
 
+@mixin sofia-pro-italic {
+  @include sofia-pro-regular;
+  font-style: italic;
+}
+
 @mixin sofia-pro-medium {
   font-family: 'Sofia Pro', Arial;
   font-weight: 500;

assets/css/partials/_mixins.scss

@@ -98,46 +98,6 @@ a {
   color: #ed5d5d;
 }
 
-.focused-placeholder[placeholder]:focus::-webkit-input-placeholder {
-  padding-right: 10px;
-  padding-top: 7px;
-  line-height: normal;
-  text-align: right;
-  text-transform: uppercase;
-  font-size: 12px;
-  color: #808285;
-}
-
-.focused-placeholder[placeholder]:focus:-moz-placeholder {
-  padding-right: 10px;
-  padding-top: 7px;
-  line-height: normal;
-  text-align: right;
-  text-transform: uppercase;
-  font-size: 12px;
-  color: #808285;
-}
-
-.focused-placeholder[placeholder]:focus::-moz-placeholder {
-  padding-right: 10px;
-  padding-top: 7px;
-  line-height: normal;
-  text-align: right;
-  text-transform: uppercase;
-  font-size: 12px;
-  color: #808285;
-}
-
-.focused-placeholder[placeholder]:focus:-ms-input-placeholder {
-  padding-right: 10px;
-  padding-top: 7px;
-  line-height: normal;
-  text-align: right;
-  text-transform: uppercase;
-  font-size: 12px;
-  color: #808285;
-}
-
 .validation-bar {
   position: relative;
 
@@ -167,8 +127,7 @@ a {
   background-color: #FFCCE1;
   border: 1px solid #FF99C2;
   color: #FF0066;
-  // TODO change to italic
-  @include sofia-pro-regular;
+  @include sofia-pro-italic;
 }
 
 // Sidebar form field tips (e.g. username, email, password)