From 849db2f34bf8c1c158f6e2df6b00944110ffeed7 Mon Sep 17 00:00:00 2001
From: Florian Staudacher <florian_staudacher@yahoo.de>
Date: Wed, 18 Jan 2012 01:15:12 +0100
Subject: [PATCH 1/5] started moving from infieldlabel to (html5) placeholders

---
 .../javascripts/jquery.infieldlabel-custom.js | 156 ------------------
 .../javascripts/vendor/jquery.placeholder.js  | 104 ++++++++++++
 2 files changed, 104 insertions(+), 156 deletions(-)
 delete mode 100644 public/javascripts/jquery.infieldlabel-custom.js
 create mode 100644 public/javascripts/vendor/jquery.placeholder.js

diff --git a/public/javascripts/jquery.infieldlabel-custom.js b/public/javascripts/jquery.infieldlabel-custom.js
deleted file mode 100644
index ce1b67ff1..000000000
--- a/public/javascripts/jquery.infieldlabel-custom.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * @license In-Field Label jQuery Plugin
- * http://fuelyourcoding.com/scripts/infield.html
- *
- * Copyright (c) 2009-2010 Doug Neiner
- * Dual licensed under the MIT and GPL licenses.
- * Uses the same license as jQuery, see:
- * http://docs.jquery.com/License
- *
- * @version 0.1.2
- */
-(function ($) {
-
-  $.InFieldLabels = function (label, field, options) {
-    // To avoid scope issues, use 'base' instead of 'this'
-    // to reference this class from internal events and functions.
-    var base = this;
-
-    // Access to jQuery and DOM versions of each element
-    base.$label = $(label);
-    base.label  = label;
-
-    base.$field = $(field);
-    base.field  = field;
-
-    base.$label.data("InFieldLabels", base);
-    base.showing = true;
-
-    base.init = function () {
-      // Merge supplied options with default options
-      base.options = $.extend({}, $.InFieldLabels.defaultOptions, options);
-
-      // Check if the field is already filled in
-      if (base.$field.val() !== "") {
-        base.$label.hide();
-        base.showing = false;
-      }
-
-      base.$field.focus(function () {
-        base.fadeOnFocus();
-      }).blur(function () {
-        base.checkForEmpty(true);
-      }).bind('keydown.infieldlabel', function (e) {
-        // Use of a namespace (.infieldlabel) allows us to
-        // unbind just this method later
-        base.hideOnChange(e);
-      }).bind('paste', function (e) {
-        // Since you can not paste an empty string we can assume
-        // that the fieldis not empty and the label can be cleared.
-        base.setOpacity(0.0);
-      }).change(function (e) {
-        base.checkForEmpty();
-      }).bind('onPropertyChange', function () {
-        base.checkForEmpty();
-      });
-    };
-
-    // If the label is currently showing
-    // then fade it down to the amount
-    // specified in the settings
-    base.fadeOnFocus = function () {
-      if (base.showing) {
-        base.setOpacity(base.options.fadeOpacity);
-      }
-    };
-
-    base.setOpacity = function (opacity) {
-      base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
-      base.showing = (opacity > 0.0);
-    };
-
-    // Checks for empty as a fail safe
-    // set blur to true when passing from
-    // the blur event
-    base.checkForEmpty = function (blur) {
-      if (base.$field.val() === "") {
-        base.prepForShow();
-        base.setOpacity(blur ? 1.0 : base.options.fadeOpacity);
-      } else {
-        base.setOpacity(0.0);
-      }
-    };
-
-    base.prepForShow = function (e) {
-      if (!base.showing) {
-        // Prepare for a animate in...
-        base.$label.css({opacity: 0.0}).show();
-
-        // Reattach the keydown event
-        base.$field.bind('keydown.infieldlabel', function (e) {
-          base.hideOnChange(e);
-        });
-      }
-    };
-
-    base.hideOnChange = function (e) {
-      if (
-          (e.keyCode === 16) || // Skip Shift
-          (e.keyCode === 9) // Skip Tab
-        ) {
-        return;
-      }
-
-      if (base.showing) {
-        base.$label.hide();
-        base.showing = false;
-      }
-
-      // Remove keydown event to save on CPU processing
-      base.$field.unbind('keydown.infieldlabel');
-    };
-
-    // Run the initialization method
-    base.init();
-  };
-
-  $.InFieldLabels.defaultOptions = {
-    fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
-    fadeDuration: 300 // How long should it take to animate from 1.0 opacity to the fadeOpacity
-  };
-
-
-  $.fn.inFieldLabels = function (options) {
-    return this.each(function () {
-      // Find input or textarea based on for= attribute
-      // The for attribute on the label must contain the ID
-      // of the input or textarea element
-      var for_attr = $(this).attr('for'), $field;
-      if (!for_attr) {
-        return; // Nothing to attach, since the for field wasn't used
-      }
-
-      // Find the referenced input or textarea element
-      // This fucking for_attr thing is some seriously dumb shit.
-      //
-      // It must be dealt with
-      $field = $(this).siblings(
-        "input#" + for_attr + "[type='text']," +
-        "input#" + for_attr + "[type='search']," +
-        "input#" + for_attr + "[type='tel']," +
-        "input#" + for_attr + "[type='url']," +
-        "input#" + for_attr + "[type='email']," +
-        "input#" + for_attr + "[type='password']," +
-        "textarea#" + for_attr
-      );
-
-      if ($field.length === 0) {
-        return; // Again, nothing to attach
-      }
-
-      // Only create object for input[text], input[password], or textarea
-      (new $.InFieldLabels(this, $field[0], options));
-    });
-  };
-
-}(jQuery));
diff --git a/public/javascripts/vendor/jquery.placeholder.js b/public/javascripts/vendor/jquery.placeholder.js
new file mode 100644
index 000000000..b4bbc7cbe
--- /dev/null
+++ b/public/javascripts/vendor/jquery.placeholder.js
@@ -0,0 +1,104 @@
+/*! http://mths.be/placeholder v1.8.7 by @mathias */
+;(function(window, document, $) {
+
+	var isInputSupported = 'placeholder' in document.createElement('input'),
+	    isTextareaSupported = 'placeholder' in document.createElement('textarea'),
+	    prototype = $.fn,
+	    placeholder;
+
+	if (isInputSupported && isTextareaSupported) {
+
+		placeholder = prototype.placeholder = function() {
+			return this;
+		};
+
+		placeholder.input = placeholder.textarea = true;
+
+	} else {
+
+		placeholder = prototype.placeholder = function() {
+			return this
+				.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
+				.not('.placeholder')
+				.bind('focus.placeholder', clearPlaceholder)
+				.bind('blur.placeholder', setPlaceholder)
+				.trigger('blur.placeholder').end();
+		};
+
+		placeholder.input = isInputSupported;
+		placeholder.textarea = isTextareaSupported;
+
+		$(function() {
+			// Look for forms
+			$(document).delegate('form', 'submit.placeholder', function() {
+				// Clear the placeholder values so they don’t get submitted
+				var $inputs = $('.placeholder', this).each(clearPlaceholder);
+				setTimeout(function() {
+					$inputs.each(setPlaceholder);
+				}, 10);
+			});
+		});
+
+		// Clear placeholder values upon page reload
+		$(window).bind('unload.placeholder', function() {
+			$('.placeholder').val('');
+		});
+
+	}
+
+	function args(elem) {
+		// Return an object of element attributes
+		var newAttrs = {},
+		    rinlinejQuery = /^jQuery\d+$/;
+		$.each(elem.attributes, function(i, attr) {
+			if (attr.specified && !rinlinejQuery.test(attr.name)) {
+				newAttrs[attr.name] = attr.value;
+			}
+		});
+		return newAttrs;
+	}
+
+	function clearPlaceholder() {
+		var $input = $(this);
+		if ($input.val() === $input.attr('placeholder') && $input.hasClass('placeholder')) {
+			if ($input.data('placeholder-password')) {
+				$input.hide().next().show().focus().attr('id', $input.removeAttr('id').data('placeholder-id'));
+			} else {
+				$input.val('').removeClass('placeholder');
+			}
+		}
+	}
+
+	function setPlaceholder() {
+		var $replacement,
+		    $input = $(this),
+		    $origInput = $input,
+		    id = this.id;
+		if ($input.val() === '') {
+			if ($input.is(':password')) {
+				if (!$input.data('placeholder-textinput')) {
+					try {
+						$replacement = $input.clone().attr({ 'type': 'text' });
+					} catch(e) {
+						$replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
+					}
+					$replacement
+						.removeAttr('name')
+						// We could just use the `.data(obj)` syntax here, but that wouldn’t work in pre-1.4.3 jQueries
+						.data('placeholder-password', true)
+						.data('placeholder-id', id)
+						.bind('focus.placeholder', clearPlaceholder);
+					$input
+						.data('placeholder-textinput', $replacement)
+						.data('placeholder-id', id)
+						.before($replacement);
+				}
+				$input = $input.removeAttr('id').hide().prev().attr('id', id).show();
+			}
+			$input.addClass('placeholder').val($input.attr('placeholder'));
+		} else {
+			$input.removeClass('placeholder');
+		}
+	}
+
+}(this, document, jQuery));
\ No newline at end of file

From 81ae0c644c270ec8d93026a423a85379232df668 Mon Sep 17 00:00:00 2001
From: Florian Staudacher <florian_staudacher@yahoo.de>
Date: Wed, 18 Jan 2012 01:17:20 +0100
Subject: [PATCH 2/5] start using new placeholders on login page

---
 app/views/sessions/new.haml              |  6 +++---
 config/assets.yml                        |  2 +-
 public/javascripts/view.js               | 10 +++++-----
 public/stylesheets/sass/application.sass | 22 +++++++++++++++-------
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/views/sessions/new.haml b/app/views/sessions/new.haml
index 4df57f6ac..52a73479d 100644
--- a/app/views/sessions/new.haml
+++ b/app/views/sessions/new.haml
@@ -1,4 +1,4 @@
--#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+-#   Copyright (c) 2010-2012, Diaspora Inc.  This file is
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
@@ -27,12 +27,12 @@
 
       %p
         = f.label :username , t('username')
-        = f.text_field :username, :tabindex => 1, :value => prefilled_username
+        = f.text_field :username, :tabindex => 1, :value => prefilled_username, :placeholder => t('username')
       %br
 
       %p
         = f.label :password , t('password')
-        = f.password_field :password, :tabindex => 2
+        = f.password_field :password, :tabindex => 2, :placeholder => t('password')
 
         - if display_password_reset_link?
           = link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), :id => "forgot_password_link", :tabindex => 5
diff --git a/config/assets.yml b/config/assets.yml
index 7cfd5a3e9..2506c5822 100644
--- a/config/assets.yml
+++ b/config/assets.yml
@@ -28,11 +28,11 @@ javascripts:
     - public/javascripts/vendor/jquery-ui-1.8.9.custom.min.js
     - public/javascripts/vendor/jquery.charcount.js
     - public/javascripts/vendor/jquery.expander.js
+    - public/javascripts/vendor/jquery.placeholder.js
     - public/javascripts/vendor/timeago.js
     - public/javascripts/vendor/facebox.js
     - public/javascripts/jquery.infinitescroll-custom.js
     - public/javascripts/jquery.autocomplete-custom.js
-    - public/javascripts/jquery.infieldlabel-custom.js
     - public/javascripts/keycodes.js
     - public/javascripts/fileuploader-custom.js
 
diff --git a/public/javascripts/view.js b/public/javascripts/view.js
index f15be2979..d451901aa 100644
--- a/public/javascripts/view.js
+++ b/public/javascripts/view.js
@@ -7,11 +7,11 @@ var View = {
     /* Buttons */
     $("input:submit").addClass("button");
 
-    /* In field labels */
-    $("label").inFieldLabels();
-    $(document).bind('afterReveal.facebox', function() {
-      jQuery("#facebox label").inFieldLabels();
-    });
+    /* label placeholders */
+    $("input, textarea").placeholder();
+    if( jQuery.fn.placeholder.input ) {
+      $("input[placeholder], textarea[placeholder]").siblings("label").hide();
+    }
 
     /* "Toggling" the search input */
     $(this.search.selector)
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 047586227..04d4d411b 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -886,14 +886,22 @@ form p.checkbox_select
     :top 6px
 
 label:not(.bootstrapped)
-  :font
-    :weight normal
+  :display none
+  :font-weight normal
+
+@mixin placeholder_styles
   :color #999
-  :position absolute
-  :top 3px
-  :left 0.48em
-  :text
-    :shadow 0 1px 1px #eee
+  :text-shadow 0 1px 1px #eeeeee
+  
+.placeholder
+  @include placeholder_styles
+
+/* those can't be combined, see: http://stackoverflow.com/questions/2610497 */
+*::-webkit-input-placeholder
+  @include placeholder_styles
+  
+*:-moz-placeholder
+  @include placeholder_styles
 
 #file-upload
   input

From 8f1ff89e102ca63fd3002a50711210b1d0b86cf3 Mon Sep 17 00:00:00 2001
From: Florian Staudacher <florian_staudacher@yahoo.de>
Date: Thu, 19 Jan 2012 00:53:49 +0100
Subject: [PATCH 3/5] search field should now look nice, too

---
 public/stylesheets/sass/application.sass | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 04d4d411b..6212ca831 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -885,13 +885,16 @@ form p.checkbox_select
     :position relative
     :top 6px
 
-label:not(.bootstrapped)
-  :display none
-  :font-weight normal
-
 @mixin placeholder_styles
   :color #999
-  :text-shadow 0 1px 1px #eeeeee
+  :text-shadow 0 1px 1px #eee
+  :font-weight normal
+    
+label:not(.bootstrapped)
+  @include placeholder_styles
+  :position absolute
+  :top 3px
+  :left 0.48em
   
 .placeholder
   @include placeholder_styles
@@ -1208,6 +1211,12 @@ header #global_search
       :width 220px
       :padding 5px
 
+      &::-webkit-input-placeholder
+        :text-shadow none
+
+      &:-moz-placeholder
+        :text-shadow none
+
 .aspect
   h3
     :display inline-block

From aa449f3a2dfd665ac0c21e24d246c0ef68883798 Mon Sep 17 00:00:00 2001
From: Maxwell Salzberg <maxwell@joindiaspora.com>
Date: Wed, 18 Jan 2012 23:44:54 -0800
Subject: [PATCH 4/5] a couple of additions to the branch

---
 app/views/invitations/new.html.haml      |  4 ++--
 app/views/profiles/_edit_public.haml     | 11 ++++++-----
 app/views/users/edit.html.haml           |  7 +++----
 public/javascripts/view.js               |  3 ---
 public/stylesheets/sass/application.sass |  9 ++++-----
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/app/views/invitations/new.html.haml b/app/views/invitations/new.html.haml
index 2a55bf40c..5bfa3e319 100644
--- a/app/views/invitations/new.html.haml
+++ b/app/views/invitations/new.html.haml
@@ -13,7 +13,7 @@
       = form_for User.new, :url => invitation_path(User) do |invite|
         %h4
           = t('email')
-        = invite.text_field :email, :title => t('.comma_seperated_plz')
+        = invite.text_field :email, :title => t('.comma_seperated_plz'), :placeholder => 'foo@bar.com, max@foo.com...'
         %br
 
         %h4
@@ -32,7 +32,7 @@
 
         %h4
           = t('.personal_message')
-        = invite.text_area :invite_messages, :rows => 3, :value => ""
+        = invite.text_area :invite_messages, :rows => 3, :value => t('.check_out_diaspora')
 
         %p
           = invite.submit t('.send_an_invitation')
diff --git a/app/views/profiles/_edit_public.haml b/app/views/profiles/_edit_public.haml
index fda938d61..eaed1e31a 100644
--- a/app/views/profiles/_edit_public.haml
+++ b/app/views/profiles/_edit_public.haml
@@ -40,17 +40,18 @@
 
 %h4
   = t('profiles.edit.your_name')
-= text_field_tag 'profile[first_name]', profile.first_name, :placeholder => t('profiles.edit.first_name')
-= text_field_tag 'profile[last_name]', profile.last_name, :placeholder => t('profiles.edit.last_name')
+= label_tag 'profile[first_name]', t('profiles.edit.first_name')
+= text_field_tag 'profile[first_name]', profile.first_name, :placeholder => "Raphael"
+
+= label_tag 'profile[first_name]', t('profiles.edit.last_name')
+= text_field_tag 'profile[last_name]', profile.last_name, :placeholder => "Sofaer"
 
 %br
 
 %h4
   = t('profiles.edit.your_tags')
 
-= text_field_tag 'profile[tag_string]', ""
-%p{:style => "color:#777;font-style:italic"}
-  = t('profiles.edit.your_tags_placeholder')
+= text_field_tag 'profile[tag_string]', "", :placeholder => t('profiles.edit.your_tags_placeholder')
 
 %br
 
diff --git a/app/views/users/edit.html.haml b/app/views/users/edit.html.haml
index ac629b2e4..4689bd7bb 100644
--- a/app/views/users/edit.html.haml
+++ b/app/views/users/edit.html.haml
@@ -38,16 +38,15 @@
     = t('.change_password')
   = form_for 'user', :url => user_path, :html => { :method => :put } do |f|
     = f.error_messages
-
     %p
       = f.label :current_password, t('.current_password')
-      = f.password_field :current_password
+      = f.password_field :current_password, :placeholder => "the one you sign in with..."
     %p
       = f.label :password, t('.new_password')
-      = f.password_field :password
+      = f.password_field :password, :placeholder => 'must be at least six charaters'
     %p
       = f.label :password_confirmation, t('password_confirmation')
-      = f.password_field :password_confirmation
+      = f.password_field :password_confirmation, :placeholder => 'must be at least six charaters'
 
     .submit_block
       = link_to t('cancel'), edit_user_path
diff --git a/public/javascripts/view.js b/public/javascripts/view.js
index d451901aa..019ec67f8 100644
--- a/public/javascripts/view.js
+++ b/public/javascripts/view.js
@@ -9,9 +9,6 @@ var View = {
 
     /* label placeholders */
     $("input, textarea").placeholder();
-    if( jQuery.fn.placeholder.input ) {
-      $("input[placeholder], textarea[placeholder]").siblings("label").hide();
-    }
 
     /* "Toggling" the search input */
     $(this.search.selector)
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 6212ca831..ba4deeb8a 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -890,11 +890,10 @@ form p.checkbox_select
   :text-shadow 0 1px 1px #eee
   :font-weight normal
     
-label:not(.bootstrapped)
-  @include placeholder_styles
-  :position absolute
-  :top 3px
-  :left 0.48em
+//label:not(.bootstrapped)
+  //:position absolute
+  //:top 3px
+  //:left 0.48em
   
 .placeholder
   @include placeholder_styles

From 729f815736781c939f4cd1a609d18631cc4d761c Mon Sep 17 00:00:00 2001
From: Florian Staudacher <florian_staudacher@yahoo.de>
Date: Sun, 22 Jan 2012 15:18:11 +0100
Subject: [PATCH 5/5] checkbox labels should now be where they're supposed to
 (they were color:#CCC before, I left them #222 for now) also labels are
 font-weight:normal and a little smaller since they seemed very dominant
 compared to the input fields (if not desireable, just remove font-size:.96em)
 are there any more inputs I don't (yet) know about...?

---
 app/views/sessions/new.haml              | 2 +-
 public/stylesheets/sass/application.sass | 8 ++++++++
 public/stylesheets/sass/login.scss       | 6 ++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/views/sessions/new.haml b/app/views/sessions/new.haml
index 52a73479d..68cb3e1f7 100644
--- a/app/views/sessions/new.haml
+++ b/app/views/sessions/new.haml
@@ -38,7 +38,7 @@
           = link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), :id => "forgot_password_link", :tabindex => 5
 
       %br
-      %p#controls
+      %p#controls.checkbox_select
         %span#remember_me
           - if devise_mapping.rememberable?
             = f.check_box :remember_me, :tabindex => 3
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 351d5ec7e..eacf00c85 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -853,6 +853,7 @@ form.new_comment
 input:not([type='submit']):not([type='reset']):not([type='hidden']):not(.as-input),
 textarea
   @include border-radius(2px)
+  :margin-top 1px
 
   :font
     :family 'Arial', 'Helvetica', sans-serif
@@ -881,6 +882,8 @@ form p.checkbox_select
   label
     :left 25px
     :top 3px
+    :position absolute
+    :font-size 1em
   img
     :position relative
     :top 6px
@@ -894,6 +897,11 @@ form p.checkbox_select
   //:position absolute
   //:top 3px
   //:left 0.48em
+label
+  :font
+    :size .96em
+    :weight normal
+  
   
 .placeholder
   @include placeholder_styles
diff --git a/public/stylesheets/sass/login.scss b/public/stylesheets/sass/login.scss
index c9f8890ff..b4cd1c859 100644
--- a/public/stylesheets/sass/login.scss
+++ b/public/stylesheets/sass/login.scss
@@ -15,9 +15,6 @@
   form {
     input,
     label {
-      font: {
-        size: 14px;
-      };
       display: inline;
     }
 
@@ -34,6 +31,7 @@
       box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
       width: 180px;
       max-width: 180px;
+      font-size: 14px;
     }
 
     p {
@@ -68,7 +66,7 @@
       text-align: left;
       position: absolute;
       left: 205px;
-      top: 12px;
+      top: 2em;
       width: 150px;
       color: #aaa;
     }