new getting started works, needs more love

This commit is contained in:
danielgrippi 2011-10-21 17:07:58 -07:00
parent 547d7e4f8c
commit 1bc637d83f
23 changed files with 523 additions and 108 deletions

View file

@ -61,6 +61,6 @@ class TagFollowingsController < ApplicationController
@tag_following = current_user.tag_followings.create(:tag_id => @tag.id)
end
redirect_to aspects_path
redirect_to multi_path
end
end

View file

@ -16,6 +16,8 @@
= render 'shared/publisher', :selected_aspects => stream.aspects, :aspect_ids => stream.aspect_ids, :for_all_aspects => stream.for_all_aspects?, :aspect => stream.aspect
= render 'aspects/no_posts_message'
#gs-shim{:title => "3. Stay Updated", 'data-content' => "Your main stream is populated with all of your contacts, tags you follow, and curated members from the community."}
#main_stream.stream{:data => {:guids => stream.aspect_ids.join(','), :time_for_scroll => time_for_scroll(stream.ajax_stream?, stream)}}
- if !stream.ajax_stream? && stream.posts.length > 0
= render 'shared/stream', :posts => stream.posts

View file

@ -6,6 +6,19 @@
- content_for :head do
= include_javascripts :home
#welcome-to-diaspora
.container
%h1
Welcome to Diaspora, #{current_user.first_name}!
%h3
This is your stream, with some explainer text
%br
%br
%br
%br
%br
.span-5.leftNavBar
#home_user_badge
= owner_image_link

View file

@ -24,7 +24,6 @@
= link_to t('.start_a_conversation'), new_conversation_path(:aspect_id => @aspect.id, :name => @aspect.name), conv_opts
- if @contacts.size > suggested_limit
= javascript_tag "$('.conversation_button').tipsy({trigger: 'hover', gravity: 'n'});"
= link_to t('.add_to_aspect', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"
- if @contacts.size > 0

View file

@ -1,9 +1,3 @@
:javascript
$(function() {
$('#new_user [title]').tipsy({trigger: 'focus', gravity: ($('html').attr('dir') == 'rtl') ? 'e' : 'w'});
$("#user_email").focus();
});
.span-15.last
.span-3
= image_tag 'icons/monotone_email_letter_round.png', :height => "128px", :width => "128px"

View file

@ -52,7 +52,6 @@
= javascript_include_tag 'web-socket-receiver'
= render 'js/websocket_js'
= yield(:head)
-unless Rails.env == "production"
@ -84,7 +83,6 @@
piwikTracker.enableLinkTracking();
} catch( err ) {}
- if @person
%link{:rel => "alternate", :href => "#{@person.public_url}.atom", :type => "application/atom+xml", :title => "#{t('.public_feed', :name => @person.name)}"}

View file

@ -4,35 +4,47 @@
:javascript
$(function() {
$(".question_mark").tipsy({trigger: 'hover', gravity: 'n'});
$(".service_icon").tipsy({trigger: 'hover', gravity: 'n'});
$(".public_icon").tipsy({trigger: 'hover', gravity: 'n'});
$(".question_mark").twipsy({trigger: 'hover', placement: 'bottom'});
$(".service_icon").twipsy({trigger: 'hover', placement: 'bottom'});
$(".public_icon").twipsy({trigger: 'hover', placement: 'bottom'});
});
- if publisher_open
:javascript
$(document).ready(function()
{
$(document).ready(function() {
Publisher.open();
});
});
-if publisher_explain
:javascript
$(document).ready(function()
{
$("#publisher .dropdown").tipsy({trigger: 'manual', gravity: 'n'});
$("#publisher .dropdown").tipsy("show");
$("#publisher .dropdown").bind("click", function(){$(this).tipsy("hide")});
$("#publisher .dropdown").popover({trigger: 'manual', offset: 10, placement:'below'});
$("#publisher .dropdown").bind("click", function(){$(this).popover("hide")});
$("#publisher #status_message_fake_text").tipsy({trigger: 'manual', gravity: 'e', id: "first_message_explain"});
$("#publisher #status_message_fake_text").tipsy("show");
$("#publisher #status_message_fake_text").bind("click", function(){$(this).tipsy("hide")});
$("#publisher #status_message_fake_text").popover({trigger: 'manual', placement: 'right', offset: 30, id: "first_message_explain"});
$("#publisher #status_message_fake_text").bind("click", function(){$(this).popover("hide")});
$("#gs-shim").popover({trigger: 'manual', placement: 'left', offset: -5});
$("#gs-shim").bind("click", function(){$(this).popover("hide")});
setTimeout(function(){
$("#publisher #status_message_fake_text").popover("show");
}, 600);
setTimeout(function(){
$("#publisher .dropdown").popover("show");
}, 1000);
setTimeout(function(){
$("#gs-shim").popover("show");
}, 1400);
$("#publisher .button.creation").bind("click", function(){
$("#publisher .dropdown").tipsy("hide");
$("#publisher #status_message_fake_text").tipsy("hide");
});
$("#publisher .dropdown").popover("hide");
$("#publisher #status_message_fake_text").popover("hide");
});
});
#publisher.closed{:class => ((aspect == :profile)? 'mention_popup' : nil )}
.content_creation
@ -43,7 +55,8 @@
#publisher_textarea_wrapper
= link_to( image_tag('deletelabel.png'), "#", :id => "hide_publisher", :title => t('.discard_post'))
%ul#photodropzone
= status.text_area :fake_text, :rows => 2, :value => h(publisher_prefill_text), :tabindex => 1, :placeholder => t('.whats_on_your_mind'), :title => t('shared.public_explain.new_user_welcome_message')
= status.text_area :fake_text, :rows => 2, :value => h(publisher_prefill_text), :tabindex => 1, :placeholder => t('.whats_on_your_mind'),
:title => "1. Share", 'data-content' => t('shared.public_explain.new_user_welcome_message')
= status.hidden_field :text, :value => '', :class => 'clear_on_submit'
#file-upload{:title => t('.upload_photos')}
@ -66,9 +79,8 @@
= image_tag "social_media_logos/#{service.provider}-16x16.png", :title => service.provider.titleize, :class => "service_icon dim", :id =>"#{service.provider}", :maxchar => "#{service.class::MAX_CHARACTERS}"
= link_to (image_tag "icons/monotone_wrench_settings.png"), "#question_mark_pane", :class => 'question_mark', :rel => 'facebox', :title => t('shared.public_explain.manage')
// NOTE(dropdown special casing to DRY up -- taken from the aspect_dropdown partial)
.dropdown{:class => "hang_right", :title => t('shared.public_explain.visibility_dropdown')}
.dropdown{:class => "hang_right", :title => '2. Control your Audience', 'data-content'=> t('shared.public_explain.visibility_dropdown')}
.button.toggle.publisher
- if publisher_public
= t('public')

View file

@ -5,35 +5,6 @@
- content_for :head do
= include_javascripts :profile
:javascript
$(document).ready(function () {
var data = $.parseJSON( '#{@tags_array.to_json.gsub("'", "\\\\'")}' ),
autocompleteInput = $("#follow_tags");
autocompleteInput.autoSuggest("#{tags_path}", {
selectedItemProp: "name",
searchObjProps: "name",
asHtmlID: "tags",
neverSubmit: true,
retriveLimit: 10,
selectionLimit: false,
minChars: 2,
keyDelay: 200,
startText: "",
emptyText: "#{t('no_results')}",
preFill: data
});
autocompleteInput.bind('keydown', function(evt){
if(evt.keyCode == 13 || evt.keyCode == 9 || evt.keyCode == 32){
evt.preventDefault();
if( $('li.as-result-item.active').length == 0 ){
$('li.as-result-item').first().click();
}
}
});
});
%br
%section#hello-there

View file

@ -12,7 +12,6 @@ javascripts:
main:
- public/javascripts/rails.validations.js
- public/javascripts/rails.js
- public/javascripts/vendor/jquery.tipsy.js
- public/javascripts/vendor/jquery.hotkeys.js
- public/javascripts/vendor/jquery.autoresize.min.js
- public/javascripts/vendor/jquery-ui-1.8.9.custom.min.js
@ -40,6 +39,10 @@ javascripts:
- public/javascripts/contact-edit.js
- public/javascripts/contact-list.js
- public/javascripts/aspect-sorting.js
- public/javascripts/vendor/bootstrap/bootstrap-twipsy.js
- public/javascripts/vendor/bootstrap/bootstrap-popover.js
login:
- public/javascripts/login.js
mobile:
@ -79,8 +82,8 @@ stylesheets:
- public/stylesheets/hovercard.css
- public/stylesheets/vendor/facebox.css
- public/stylesheets/vendor/fileuploader.css
- public/stylesheets/vendor/tipsy.css
- public/stylesheets/vendor/autoSuggest.css
- public/stylesheets/interim-bootstrap.css
rtl:
- public/stylesheets/rtl.css

View file

@ -753,8 +753,8 @@ en:
reshare:
reshare: "Reshare"
public_explain:
new_user_welcome_message: "Welcome aboard! If you want, this can be your first message."
visibility_dropdown: "Use this dropdown to change visibility of your post"
new_user_welcome_message: "Use #hashtags to classify you posts and find people who share your interests. Call out awesome people with @Mentions"
visibility_dropdown: "Use this dropdown to change visibility of your post. (We suggest you make this one public)"
title: "Set up connected services"
outside: "Public messages will be available for others outside of Diaspora to see."
logged_in: "logged in to %{service}"

View file

@ -126,31 +126,4 @@ class Stream::Aspect < Stream::Base
def can_comment?(post)
true
end
def publisher
if welcome?
@publisher ||= Publisher.new(self.user, :open => true, :prefill => publisher_prefill,
:public => true)
else
super
end
end
private
# Generates the prefill for the publisher
#
# @return [String]
def publisher_prefill
prefill = I18n.t("shared.publisher.new_user_prefill.hello", :new_user_tag => "newhere")
if self.user.followed_tags.size > 0
tag_string = self.user.followed_tags.map{|t| "##{t.name}"}.to_sentence
prefill << I18n.t("shared.publisher.new_user_prefill.i_like", :tags => tag_string)
end
prefill
end
def welcome?
self.user.getting_started
end
end

View file

@ -36,7 +36,34 @@ class Stream::Multi < Stream::Base
end.compact
end
# @return [Publisher]
def publisher
if welcome?
@publisher ||= Publisher.new(self.user, :open => true, :prefill => publisher_prefill,
:public => true)
else
super
end
end
private
# Generates the prefill for the publisher
#
# @return [String]
def publisher_prefill
prefill = I18n.t("shared.publisher.new_user_prefill.hello", :new_user_tag => "newhere")
if self.user.followed_tags.size > 0
tag_string = self.user.followed_tags.map{|t| "##{t.name}"}.to_sentence
prefill << I18n.t("shared.publisher.new_user_prefill.i_like", :tags => tag_string)
end
prefill
end
# @return [Boolean]
def welcome?
self.user.getting_started
end
# @return [Array<Symbol>]
def streams_included

View file

@ -3,5 +3,7 @@ Diaspora.Pages.ContactsIndex = function() {
this.subscribe("page/ready", function(evt, document) {
self.infiniteScroll = self.instantiate("InfiniteScroll");
$('.conversation_button').twipsy({position: 'below'});
});
};

View file

@ -2,7 +2,6 @@ Diaspora.Pages.InvitationsEdit = function() {
var self = this;
this.subscribe("page/ready", function(evt, body) {
$('#user_username').tipsy({trigger: 'select', gravity: 'w'});
$('#user_username').twipsy({trigger: 'select', placement: 'right'});
});
};

View file

@ -0,0 +1,12 @@
Diaspora.Pages.InvitationsNew = function() {
var self = this;
this.subscribe("page/ready", function(evt, document) {
var rtl = $('html').attr('dir') == 'rtl',
position = rtl ? 'left' : 'right';
$('#new_user [title]').twipsy({trigger: 'focus', placement: position});
$('#user_email').focus();
});
};

View file

@ -6,7 +6,6 @@ Diaspora.Pages.MultisIndex = function() {
self.stream = self.instantiate("Stream", document.find("#aspect_stream_container"));
self.infiniteScroll = self.instantiate("InfiniteScroll");
$('.indicator').tipsy({fade: true, live:true});
$('.indicator').twipsy({placement:'below', live:true});
});
};

View file

@ -4,7 +4,7 @@ Diaspora.Pages.UsersGettingStarted = function() {
this.subscribe("page/ready", function(evt, body) {
self.peopleSearch = self.instantiate("Search", body.find("form.people.search_form"));
self.tagSearch = self.instantiate("Search", body.find("form.tag_input.search_form"));
$('#edit_profile').bind('ajax:success', function(evt, data, status, xhr){
$('#form_spinner').addClass("hidden");
$('.profile .saved').show();
@ -17,8 +17,6 @@ Diaspora.Pages.UsersGettingStarted = function() {
firstNameField.val(firstNameField.data("cachedValue"));
});
$("#profile_first_name").bind("change", function(){
$(this).data("cachedValue", $(this).val());
$('#edit_profile').submit();
@ -39,5 +37,30 @@ Diaspora.Pages.UsersGettingStarted = function() {
$('#awesome_spinner').removeClass("hidden");
$('.tag_input').submit();
});
/* ------ */
var autocompleteInput = $("#follow_tags");
autocompleteInput.autoSuggest("/tags", {
selectedItemProp: "name",
searchObjProps: "name",
asHtmlID: "tags",
neverSubmit: true,
retriveLimit: 10,
selectionLimit: false,
minChars: 2,
keyDelay: 200,
startText: "",
emptyText: "no_results"
});
autocompleteInput.bind('keydown', function(evt){
if(evt.keyCode == 13 || evt.keyCode == 9 || evt.keyCode == 32){
evt.preventDefault();
if( $('li.as-result-item.active').length == 0 ){
$('li.as-result-item').first().click();
}
}
});
});
};

View file

@ -0,0 +1,77 @@
/* ===========================================================
* bootstrap-popover.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#popover
* ===========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =========================================================== */
!function( $ ) {
var Popover = function ( element, options ) {
this.$element = $(element)
this.options = options
this.enabled = true
this.fixTitle()
}
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js
========================================= */
Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, {
setContent: function () {
var $tip = this.tip()
$tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle())
$tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent())
$tip[0].className = 'popover'
}
, getContent: function () {
var content
, $e = this.$element
, o = this.options
if (typeof this.options.content == 'string') {
content = $e.attr(o.content)
} else if (typeof this.options.content == 'function') {
content = this.options.content.call(this.$element[0])
}
return content
}
, tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="popover" />')
.html('<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>')
}
return this.$tip
}
})
/* POPOVER PLUGIN DEFINITION
* ======================= */
$.fn.popover = function (options) {
if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options)
$.fn.twipsy.initWith.call(this, options, Popover, 'popover')
return this
}
$.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'})
}( window.jQuery || window.ender );

View file

@ -0,0 +1,303 @@
/* ==========================================================
* bootstrap-twipsy.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#twipsy
* Adapted from the original jQuery.tipsy by Jason Frame
* ==========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function( $ ) {
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
var transitionEnd
$(document).ready(function () {
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
})
/* TWIPSY PUBLIC CLASS DEFINITION
* ============================== */
var Twipsy = function ( element, options ) {
this.$element = $(element)
this.options = options
this.enabled = true
this.fixTitle()
}
Twipsy.prototype = {
show: function() {
var pos
, actualWidth
, actualHeight
, placement
, $tip
, tp
if (this.getTitle() && this.enabled) {
$tip = this.tip()
this.setContent()
if (this.options.animate) {
$tip.addClass('fade')
}
$tip
.remove()
.css({ top: 0, left: 0, display: 'block' })
.prependTo(document.body)
pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth
, height: this.$element[0].offsetHeight
})
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ])
switch (placement) {
case 'below':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'above':
tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'left':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}
break
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}
break
}
$tip
.css(tp)
.addClass(placement)
.addClass('in')
}
}
, setContent: function () {
var $tip = this.tip()
$tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle())
$tip[0].className = 'twipsy'
}
, hide: function() {
var that = this
, $tip = this.tip()
$tip.removeClass('in')
function removeElement () {
$tip.remove()
}
$.support.transition && this.$tip.hasClass('fade') ?
$tip.bind(transitionEnd, removeElement) :
removeElement()
}
, fixTitle: function() {
var $e = this.$element
if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
$e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
}
}
, getTitle: function() {
var title
, $e = this.$element
, o = this.options
this.fixTitle()
if (typeof o.title == 'string') {
title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title)
} else if (typeof o.title == 'function') {
title = o.title.call($e[0])
}
title = ('' + title).replace(/(^\s*|\s*$)/, "")
return title || o.fallback
}
, tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
}
return this.$tip
}
, validate: function() {
if (!this.$element[0].parentNode) {
this.hide()
this.$element = null
this.options = null
}
}
, enable: function() {
this.enabled = true
}
, disable: function() {
this.enabled = false
}
, toggleEnabled: function() {
this.enabled = !this.enabled
}
}
/* TWIPSY PRIVATE METHODS
* ====================== */
function maybeCall ( thing, ctx, args ) {
return typeof thing == 'function' ? thing.apply(ctx, args) : thing
}
/* TWIPSY PLUGIN DEFINITION
* ======================== */
$.fn.twipsy = function (options) {
$.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy')
return this
}
$.fn.twipsy.initWith = function (options, Constructor, name) {
var twipsy
, binder
, eventIn
, eventOut
if (options === true) {
return this.data(name)
} else if (typeof options == 'string') {
twipsy = this.data(name)
if (twipsy) {
twipsy[options]()
}
return this
}
options = $.extend({}, $.fn[name].defaults, options)
function get(ele) {
var twipsy = $.data(ele, name)
if (!twipsy) {
twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options))
$.data(ele, name, twipsy)
}
return twipsy
}
function enter() {
var twipsy = get(this)
twipsy.hoverState = 'in'
if (options.delayIn == 0) {
twipsy.show()
} else {
twipsy.fixTitle()
setTimeout(function() {
if (twipsy.hoverState == 'in') {
twipsy.show()
}
}, options.delayIn)
}
}
function leave() {
var twipsy = get(this)
twipsy.hoverState = 'out'
if (options.delayOut == 0) {
twipsy.hide()
} else {
setTimeout(function() {
if (twipsy.hoverState == 'out') {
twipsy.hide()
}
}, options.delayOut)
}
}
if (!options.live) {
this.each(function() {
get(this)
})
}
if (options.trigger != 'manual') {
binder = options.live ? 'live' : 'bind'
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'
this[binder](eventIn, enter)[binder](eventOut, leave)
}
return this
}
$.fn.twipsy.Twipsy = Twipsy
$.fn.twipsy.defaults = {
animate: true
, delayIn: 0
, delayOut: 0
, fallback: ''
, placement: 'above'
, html: false
, live: false
, offset: 0
, title: 'title'
, trigger: 'hover'
}
$.fn.twipsy.elementOptions = function(ele, options) {
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
}
}( window.jQuery || window.ender );

View file

@ -114,17 +114,9 @@ var View = {
},
tooltips: {
public_badge: {
bind: function() {
$(".public_badge img").tipsy({
live: true
});
}
},
conversation_participants: {
bind: function() {
$(".conversation_participants img").tipsy({
$(".conversation_participants img").twipsy({
live: true
});
}

View file

@ -12,7 +12,7 @@
});
self.deleteCommentLink.click(self.removeComment);
self.deleteCommentLink.tipsy({ trigger: "hover" });
self.deleteCommentLink.twipsy({ trigger: "hover" });
// self.content.expander({
// slicePoint: 200,

View file

@ -21,9 +21,9 @@
postScope: element.find("span.post_scope")
});
// tipsy tooltips
self.deletePostLink.tipsy({ trigger: "hover" });
self.postScope.tipsy({ trigger: "hover" });
// twipsy tooltips
self.deletePostLink.twipsy();
self.postScope.twipsy();
// collapse long posts
// self.content.expander({

View file

@ -3391,3 +3391,19 @@ a.toggle_selector
:-webkit-box-shadow none
:-moz-box-shadow none
:box-shadow none
#welcome-to-diaspora
:position absolute
:width 100%
:left 0
:top 0
:padding
:top 50px
:bottom 10px
h1,h3
:color #fff
:background orange
#gs-shim
:position absolute
:top 380px