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