Commit 5a78796e authored by danielgrippi's avatar danielgrippi

Merge branch 'input-placeholders' of https://github.com/Raven24/diaspora into...

Merge branch 'input-placeholders' of https://github.com/Raven24/diaspora into Raven24-input-placeholders
parents 53128f31 729f8157
......@@ -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')
......
......@@ -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
......
-# 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
......
......@@ -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
......
......@@ -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
......
/**
* @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));
/*! 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
......@@ -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)
......
......@@ -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)
@mixin placeholder_styles
:color #999
: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
:color #999
:position absolute
:top 3px
:left 0.48em
:text
:shadow 0 1px 1px #eee
.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
......
......@@ -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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment