diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 87c9cd862..ed6074c6e 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -71,4 +71,8 @@ module ApplicationHelper def all_services_connected? current_user.services.size == AppConfig[:configured_services].size end + + def popover_with_close_html(without_close_html) + without_close_html + "#{link_to(image_tag('deletelabel.png'), "#", :class => 'close')}" + end end diff --git a/app/views/aspects/_aspect_stream.haml b/app/views/aspects/_aspect_stream.haml index 4aa415ddd..f33cdc13f 100644 --- a/app/views/aspects/_aspect_stream.haml +++ b/app/views/aspects/_aspect_stream.haml @@ -16,7 +16,7 @@ = 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. #{t('.stay_updated')}", 'data-content' => t('.stay_updated_explanation')} +#gs-shim{:title => popover_with_close_html("3. #{t('.stay_updated')}"), 'data-content' => t('.stay_updated_explanation')} #main_stream.stream{:data => {:guids => stream.aspect_ids.join(','), :time_for_scroll => time_for_scroll(stream.ajax_stream?, stream)}} - if !stream.ajax_stream? && stream.stream_posts.length > 0 diff --git a/app/views/aspects/index.html.haml b/app/views/aspects/index.html.haml index 948273dd8..425a53d81 100644 --- a/app/views/aspects/index.html.haml +++ b/app/views/aspects/index.html.haml @@ -10,7 +10,7 @@ #welcome-to-diaspora .container{:style => "position: relative;"} .right - = link_to image_tag('deletelabel.png'), getting_started_completed_path, :id => "gs-skip-x" + = link_to image_tag('close_label.png'), getting_started_completed_path, :id => "gs-skip-x" .span-23 %h1 = t('.welcome_to_diaspora', :name => current_user.first_name) diff --git a/app/views/shared/_publisher.html.haml b/app/views/shared/_publisher.html.haml index 20982f675..dd9403586 100644 --- a/app/views/shared/_publisher.html.haml +++ b/app/views/shared/_publisher.html.haml @@ -19,32 +19,7 @@ :javascript $(document).ready(function() { - $("#publisher .dropdown").popover({trigger: 'manual', offset: 10, placement:'below'}); - $("#publisher .dropdown").bind("click", function(){$(this).popover("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").popover("hide"); - $("#publisher #status_message_fake_text").popover("hide"); - $("#gs-shim").popover("hide"); - }); + Publisher.triggerGettingStarted(); }); #publisher.closed{:class => ((aspect == :profile)? 'mention_popup' : nil )} @@ -57,7 +32,7 @@ = 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_formatted_text), :tabindex => 1, :placeholder => t('.whats_on_your_mind'), - :title => "1. #{t('shared.public_explain.share')}", 'data-content' => t('shared.public_explain.new_user_welcome_message') + :title => "#{popover_with_close_html("1. #{t('shared.public_explain.share')}")}", 'data-content' => t('shared.public_explain.new_user_welcome_message') = status.hidden_field :text, :value => h(publisher_hidden_text), :class => 'clear_on_submit' #file-upload{:title => t('.upload_photos')} @@ -80,7 +55,7 @@ = 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 => "2. #{t('shared.public_explain.control_your_audience')}", 'data-content'=> t('shared.public_explain.visibility_dropdown')} + .dropdown{:class => "hang_right", :title => popover_with_close_html("2. #{t('shared.public_explain.control_your_audience')}"), 'data-content'=> t('shared.public_explain.visibility_dropdown')} .button.toggle.publisher - if publisher_public = t('public') diff --git a/features/signs_up.feature b/features/signs_up.feature index 4a2e13376..cd0e9e24e 100644 --- a/features/signs_up.feature +++ b/features/signs_up.feature @@ -26,3 +26,14 @@ Feature: new user registration When I preemptively confirm the alert And I follow "awesome_button" Then I should be on the multi page + + Scenario: closing a popover clears getting started + When I preemptively confirm the alert + And I follow "awesome_button" + Then I should be on the multi page + And I have turned off jQuery effects + And I wait for the popovers to appear + And I click close on all the popovers + And I wait for 3 seconds + And I go to the home page + Then I should not see "Welcome to Diaspora" diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index 9682bbea5..1a8cc7bd8 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/features/step_definitions/custom_web_steps.rb @@ -207,3 +207,15 @@ end Then 'I press the attached image' do Then %{I press the 1st "img" within ".stream_element div.photo_attachments"} end + +And "I wait for the popovers to appear" do + wait_until(30) { evaluate_script('$(".popover").length') == 3 } +end + +And /^I click close on all the popovers$/ do + page.execute_script("var time = 400; $('.popover .close').each( + function(index, element){ setTimeout(function(){ $(element).click()},time); + time += 800; + });") +end + diff --git a/public/images/close_label.png b/public/images/close_label.png new file mode 100644 index 000000000..53aa1d3ce Binary files /dev/null and b/public/images/close_label.png differ diff --git a/public/javascripts/publisher.js b/public/javascripts/publisher.js index 0e0b8ff1e..92e17fd7a 100644 --- a/public/javascripts/publisher.js +++ b/public/javascripts/publisher.js @@ -453,9 +453,9 @@ var Publisher = { }, triggerGettingStarted: function(){ - Publisher.setUpPopovers("#publisher .dropdown", {trigger: 'manual', offset: 10, placement:'below'}, 1000); - Publisher.setUpPopovers("#publisher #status_message_fake_text", {trigger: 'manual', placement: 'right', offset: 30, id: "first_message_explain"}, 600); - Publisher.setUpPopovers("#gs-shim", {trigger: 'manual', placement: 'left', offset: -5}, 1400); + Publisher.setUpPopovers("#publisher .dropdown", {trigger: 'manual', offset: 10, id: "message_visibility_explain", placement:'below', html:true}, 1000); + Publisher.setUpPopovers("#publisher #status_message_fake_text", {trigger: 'manual', placement: 'right', offset: 30, id: "first_message_explain", html:true}, 600); + Publisher.setUpPopovers("#gs-shim", {trigger: 'manual', placement: 'left', id:"stream_explain", offset: -5, html:true}, 1400); $("#publisher .button.creation").bind("click", function(){ $("#publisher .dropdown").popover("hide"); @@ -468,8 +468,20 @@ var Publisher = { selection.popover(options); selection.bind("click", function(){$(this).popover("hide")}); + + setTimeout(function(){ selection.popover("show"); + + var popup = selection.data('popover').$tip[0], + closeIcon = $(popup).find(".close"); + + closeIcon.bind("click",function(){ + if($(".popover").length == 1){ + $.get("/getting_started_completed"); + }; + selection.popover("hide"); + }); }, timeout); }, diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index c459533b9..ee2511bda 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -3418,17 +3418,27 @@ a.toggle_selector h1,h3 :color #fff :background orange + &:hover + #gs-skip-x + @include opacity(0.4) + @include transition(opacity, 0.25s) + + &:hover + @include opacity(1) #gs-shim :position absolute :top 380px #gs-skip-x - @include opacity(0.5) - @include transition(opacity) + @include opacity(0) + @include transition(opacity, 0.25s) + + img + :position relative + :right 4px + :height 20px - &:hover - @include opacity(1) .likes_list .avatar @@ -3453,3 +3463,20 @@ a.toggle_selector #tag_following_submit &.hidden :display none + +.popover + .close + @include opacity(0) + @include transition(opacity, 0.2s) + + :float right + :position relative + :top -9px + :right -5px + + &:hover + .close + @include opacity(0.5) + + &:hover + @include opacity(1)