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/sessions/new.haml b/app/views/sessions/new.haml
index 4df57f6ac..68cb3e1f7 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,18 +27,18 @@
%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
%br
- %p#controls
+ %p#controls.checkbox_select
%span#remember_me
- if devise_mapping.rememberable?
= f.check_box :remember_me, :tabindex => 3
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/config/assets.yml b/config/assets.yml
index 46f4da3ce..7d9709cdb 100644
--- a/config/assets.yml
+++ b/config/assets.yml
@@ -28,6 +28,7 @@ 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/vendor/underscore.js
@@ -36,7 +37,6 @@ javascripts:
- public/javascripts/vendor/jquery.mentionsInput.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/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 = $('').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
diff --git a/public/javascripts/view.js b/public/javascripts/view.js
index f099ed62a..39543a2cb 100644
--- a/public/javascripts/view.js
+++ b/public/javascripts/view.js
@@ -7,11 +7,8 @@ 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();
/* "Toggling" the search input */
$(this.search.selector)
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 84a1644be..3fe2f8ba0 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,19 +882,36 @@ form p.checkbox_select
label
:left 25px
:top 3px
+ :position absolute
+ :font-size 1em
img
:position relative
:top 6px
-label:not(.bootstrapped)
- :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 #eee
+ :font-weight normal
+
+//label:not(.bootstrapped)
+ //:position absolute
+ //:top 3px
+ //:left 0.48em
+label
+ :font
+ :size .96em
+ :weight normal
+
+
+.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
@@ -1204,6 +1222,12 @@ header #global_search
:width 220px
:padding 5px
+ &::-webkit-input-placeholder
+ :text-shadow none
+
+ &:-moz-placeholder
+ :text-shadow none
+
.aspect
h3
:display inline-block
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;
}