Merge branch 'close_popovers'

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

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

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)

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')

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"

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
+

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

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)