* reconnect working for in-session; beginning in-situ reconnect refactor

ruby/lib/jam_ruby/models/notification.rb

@@ -366,6 +366,8 @@ module JamRuby
 
       def send_session_ended(session_id)
 
+        return if session_id.nil?  # so we don't query every notification in the system with a nil session_id
+
         notifications = Notification.where(:session_id => session_id)
 
         # publish to all users who have a notification for this session

web/app/assets/javascripts/layout.js

@@ -36,6 +36,7 @@
       notifyGutter: 10,
       collapsedSidebar: 30,
       panelHeaderHeight: 36,
+      alwaysOpenPanelHeaderHeight:78,       // for the search bar
       gutter: 60,                           // Margin around the whole UI
       screenMargin: 0,                     // Margin around screens (not headers/sidebar)
       gridOuterMargin: 6,                   // Outer margin on Grids (added to screenMargin if screen)
@@ -74,7 +75,7 @@
     }
 
     function setInitialExpandedSidebarPanel() {
-      expandedPanel = $('[layout="panel"]').first().attr("layout-id");
+      expandedPanel = 'panelFriends';
     }
 
     function layout() {
@@ -253,10 +254,9 @@
       }
       var $expandedPanel = $('[layout-id="' + expandedPanel + '"]');
       var $expandedPanelContents = $expandedPanel.find('[layout-panel="contents"]');
-      var combinedHeaderHeight = $('[layout-panel="contents"]').length * opts.panelHeaderHeight;
-      var searchHeight = $('.sidebar .search').first().height();
+      var combinedHeaderHeight = ($('[layout-panel="contents"]').length - 1) * opts.panelHeaderHeight + opts.alwaysOpenPanelHeaderHeight;
       var expanderHeight = $('[layout-sidebar-expander]').height();
-      var expandedPanelHeight = sidebarHeight - (combinedHeaderHeight + expanderHeight + searchHeight);
+      var expandedPanelHeight = sidebarHeight - (combinedHeaderHeight + expanderHeight);
       $('[layout-panel="contents"]').hide();
       $('[layout-panel="contents"]').css({"height": "1px"});
       $expandedPanelContents.show();
@@ -315,11 +315,16 @@
       // This allows dialogs to use the notification.
       $('[layout="notify"]').css({"z-index": "1001", "padding": "20px"});
       $('[layout="panel"]').css({position: 'relative'});
-      $('[layout-panel="expanded"] [layout-panel="header"]').css({
-        margin: "0px",
-        padding: "0px",
-        height: opts.panelHeaderHeight + "px"
-      });
+      var $headers = $('[layout-panel="expanded"] [layout-panel="header"]');
+      context._.each($headers, function($header) {
+        $header = $($header);
+        var isAlwaysOpenHeader = $header.is('.always-open');
+        $header.css({
+          margin: "0px",
+          padding: "0px",
+          height: (isAlwaysOpenHeader ? opts.alwaysOpenPanelHeaderHeight : opts.panelHeaderHeight) + "px"
+        });
+      })
       $('[layout-grid]').css({
         position: "relative"
       });

web/app/assets/javascripts/notificationPanel.js

@@ -30,6 +30,18 @@
       setCount(count + 1);
     }
 
+    function decrementNotificationCount() {
+      var count = parseInt($count.text());
+      if(count > 0) {
+        count = count - 1;
+        setCount(count);
+        if(count == 0) {
+          lowlightCount();
+          missedNotificationsWhileAway = false;
+        }
+      }
+    }
+
     // set the element to white,  and pulse it down to the un-highlighted value 2x, then set
     function pulseToDark() {
       logger.debug("pulsing notification badge")
@@ -348,6 +360,7 @@
 
 
     function deleteNotification(notificationId) {
+      console.trace();
       var url = "/api/users/" + context.JK.currentUserId + "/notifications/" + notificationId;
       $.ajax({
         type: "DELETE",
@@ -356,8 +369,11 @@
         url: url,
         processData: false,
         success: function(response) {
-          $('li[notification-id=' + notificationId + ']').hide();
-          //decrementNotificationCount();
+          var notification = $('li[notification-id=' + notificationId + ']');
+          if(notification.length > 0) {
+            decrementNotificationCount();
+          }
+          notification.remove();
         },
         error: app.ajaxError
       });

web/app/assets/javascripts/searchResults.js

@@ -77,6 +77,7 @@
     }
 
     context.JK.SearchResultScreen.onSearchSuccess = function(response) {
+      $('#sidebar-search-results').show();
       searchResults(response, true);
       searchResults(response, false);
       context.JK.bindHoverEvents();
@@ -183,11 +184,6 @@
       if (isSidebar) {
         // show header
         $('#sidebar-search-header').show();
-        // hide panels
-        $('[layout-panel="contents"]').hide();
-        $('[layout-panel="contents"]').css({"height": "1px"});
-        // resize search results area
-        $('#sidebar-search-results').height(context.JK.Sidebar.getHeight() + 'px');
       }
       else {
         $('#result-count').html(resultCount);

web/app/assets/javascripts/sidebar.js

@@ -104,40 +104,14 @@
           }
       }
 
-      context.JK.Sidebar.getHeight = function() {
-          // TODO: refactor this - copied from layout.js
-          var sidebarHeight = $(context).height() - 75 - 2 * 60 + $('[layout-sidebar-expander]').height();
-          var combinedHeaderHeight = $('[layout-panel="contents"]').length * 36;
-          var searchHeight = $('.sidebar .search').first().height();
-          var expanderHeight = $('[layout-sidebar-expander]').height();
-          var expandedPanelHeight = sidebarHeight - (combinedHeaderHeight + expanderHeight + searchHeight);
-          return expandedPanelHeight;
-      }
-
-      function showFriendsPanel() {
-
-          var $expandedPanelContents = $('[layout-id="panelFriends"] [layout-panel="contents"]');
-          var expandedPanelHeight = context.JK.Sidebar.getHeight();
-
-          // hide all other contents
-          $('[layout-panel="contents"]').hide();
-          $('[layout-panel="contents"]').css({"height": "1px"});
-
-          // show the appropriate contens
-          $expandedPanelContents.show();
-          $expandedPanelContents.animate({"height": expandedPanelHeight + "px"}, 400);
-      }
-
       function hideSearchResults() {
           emptySearchResults();
           $('#search-input').val('');
           $('#sidebar-search-header').hide();
-          showFriendsPanel();
       }
 
       function emptySearchResults() {
           $('#sidebar-search-results').empty();
-          $('#sidebar-search-results').height('0px');
       }
 
       var delay = (function(){

web/app/assets/stylesheets/client/client.css

@@ -33,6 +33,7 @@
  *= require ./account
  *= require ./search
  *= require ./ftue
+ *= require ./jamServer
  *= require ./gearWizard
  *= require ./whatsNextDialog
  *= require ./invitationDialog

web/app/assets/stylesheets/client/hoverBubble.css.scss

@@ -8,7 +8,7 @@
 
 
   &.musician-bubble {
-    width:410px;
+    width:425px;
   }
 
   h2 {

web/app/assets/stylesheets/client/jamServer.css.scss

@@ -0,0 +1,50 @@
+.server-connection {
+  display:none;
+  margin:auto;
+  width:20%;
+  text-align:center;
+  padding:10px 27px;
+  background-color:#404040;
+  border-color:#ccc;
+  border-style:solid;
+  border-width:0 2px 2px;
+
+
+  -webkit-box-shadow: 0px 0px 15px rgba(50, 50, 50, 1);
+  -moz-box-shadow:    0px 0px 15px rgba(50, 50, 50, 1);
+  box-shadow:         0px 0px 15px rgba(50, 50, 50, 1);
+
+  h2 {
+    font-size:20px;
+    vertical-align:baseline;
+    margin-bottom:10px;
+  }
+
+  img.alert-icon {
+    position:absolute;
+    top:14px;
+    height:16px;
+    width:16px;
+
+    &.left-side {
+      margin-left:-39px;
+    }
+
+    &.right-side {
+      margin-left:20px;
+    }
+  }
+
+  .reconnect-progress-msg {
+
+  }
+
+  .countdown {
+    font-weight:bold;
+  }
+
+  #reconnect-now {
+    margin-top:10px;
+  }
+}
+

web/app/views/clients/_jamServer.html.haml

@@ -1 +1,12 @@
 .server-connection
+  %h2
+    = image_tag( "content/icon_alert.png" , :height => '24', :width => '24', :class => "alert-icon left-side" )
+    Disconnected from Server
+    = image_tag( "content/icon_alert.png" , :height => '24', :width => '24', :class => "alert-icon right-side" )
+  %span.reconnect-progress-msg
+    = 'Reconnecting automatically in '
+    %span.countdown 4
+    =' seconds'
+    %span.reconnect-countdown
+    = '. '
+  %a#reconnect-now{href:'#'} RECONNECT NOW

web/app/views/clients/_sidebar.html.erb

@@ -11,28 +11,32 @@
   </div>
 
   <!-- Search Box -->
-  <div class="search">
-    <div layout-panel="header" class="panel-header">
-      <h2>search</h2>
+  <div class="search" layout="panel" layout-id="panelSearch">
+    <div layout-panel="collapsed">
     </div>
-    <div class="searchbox">
-      <form id="searchForm">
-        <input id="search-input" autocomplete="off" type="text" name="search" placeholder="enter search terms" />
-      </form>
-      <div id="sidebar-search-header" style="margin: 4px 4px 8px 8px">
-        <div class="left">
-          <strong><a id="sidebar-search-expand" style="color:#fff; text-decoration:underline">&laquo;&nbsp;EXPAND</a></strong>
-        </div>
-        <!-- search filter dropdown -->
-        <div class="right">
-          Show:&nbsp;<%= select_tag(Search::SEARCH_TEXT_TYPE_ID, options_for_select(Search::SEARCH_TEXT_TYPES.collect { |ii| [ii.to_s.titleize, ii] })) %>
+    <div layout-panel="expanded" class="panel expanded">
+      <div layout-panel="header" class="panel-header always-open">
+        <h2>search</h2>
+        <div class="searchbox">
+          <form id="searchForm">
+            <input id="search-input" autocomplete="off" type="text" name="search" placeholder="enter search terms" />
+          </form>
+          <div id="sidebar-search-header" style="margin: 4px 4px 8px 8px">
+            <div class="left">
+              <strong><a id="sidebar-search-expand" style="color:#fff; text-decoration:underline">&laquo;&nbsp;EXPAND</a></strong>
+            </div>
+            <!-- search filter dropdown -->
+            <div class="right">
+              Show:&nbsp;<%= select_tag(Search::SEARCH_TEXT_TYPE_ID, options_for_select(Search::SEARCH_TEXT_TYPES.collect { |ii| [ii.to_s.titleize, ii] })) %>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-    <div style="clear:both;"></div><br />
-    <!-- border between header and beginning of search results -->
-    <div class="sidebar-search-result"></div>
-    <div id="sidebar-search-results" class="results-wrapper">
+
+      <!--<div style="clear:both;"></div><br />-->
+      <!-- border between header and beginning of search results -->
+      <!--<div class="sidebar-search-result"></div>-->
+      <div id="sidebar-search-results" class="results-wrapper panelcontents" layout-panel="contents"></div>
     </div>
   </div>
 

web/spec/features/notification_highlighter_spec.rb

@@ -4,11 +4,6 @@ describe "Notification Highlighter", :js => true, :type => :feature, :capybara_f
 
   subject { page }
 
-  before(:all) do
-    Capybara.javascript_driver = :poltergeist
-    Capybara.current_driver = Capybara.javascript_driver
-    Capybara.default_wait_time = 10
-  end
 
   let(:user) { FactoryGirl.create(:user) }
   let(:user2) { FactoryGirl.create(:user) }
@@ -138,30 +133,34 @@ describe "Notification Highlighter", :js => true, :type => :feature, :capybara_f
     end
   end
 
+  describe "delete notification" do
 
-  describe "user no unseen notifications" do
-    describe "notification occurs in realtime" do
+    before(:each) do
+      User.delete_all
+    end
 
-      describe "sidebar is open" do
-        describe "user can see notifications" do
-          it "stays deactivated" do
+    it "while notification panel closed" do
+      # we should see the count go to 1, but once the notification is accepted, which causes it to delete,
+      # we should see the count go back down to 0.
 
-          end
-        end
+      in_client(user) do
+        sign_in_poltergeist(user)
+      end
 
-        describe "user can not see notifications" do
-          describe "with dialog open" do
-            it "temporarily activates" do
+      in_client(user2) do
+        sign_in_poltergeist(user2)
+        find_musician(user)
+        find(".result-list-button-wrapper[data-musician-id='#{user.id}'] .search-m-friend").trigger(:click)
+      end
 
-            end
-          end
+      in_client(user) do
+        badge = find("#{NOTIFICATION_PANEL} .badge", text: '1')
+        badge['class'].include?('highlighted').should == true
 
-          describe "with document blurred" do
-            it "temporarily activates" do
+        find('#notification #ok-button', text: 'ACCEPT').trigger(:click)
 
-            end
-          end
-        end
+        badge = find("#{NOTIFICATION_PANEL} .badge", text: '0')
+        badge['class'].include?('highlighted').should == false
       end
     end
   end

web/spec/features/sidebar_spec.rb

@@ -4,13 +4,8 @@ describe "Profile Menu", :js => true, :type => :feature, :capybara_feature => tr
 
   subject { page }
 
-  before(:all) do
-    Capybara.javascript_driver = :poltergeist
-    Capybara.current_driver = Capybara.javascript_driver
-    Capybara.default_wait_time = 10
-  end
-
   let(:user) { FactoryGirl.create(:user) }
+  let(:user2) { FactoryGirl.create(:user) }
 
   before(:each) do
     UserMailer.deliveries.clear
@@ -36,5 +31,19 @@ describe "Profile Menu", :js => true, :type => :feature, :capybara_feature => tr
     end
   end
 
+  describe "panel behavior" do
+    it "search, then click notifications" do
+
+      notification = Notification.send_text_message("text message", user2, user)
+      notification.errors.any?.should be_false
+
+      site_search(user2.name, validate: user2)
+
+      open_notifications
+
+      find("#sidebar-notification-list li[notification-id='#{notification.id}']")
+    end
+  end
+
 
 end

web/spec/support/client_interactions.rb

@@ -9,6 +9,8 @@ def site_search(text, options = {})
     fill_in "search-input",    with: text
   end
 
+  find("#sidebar-search-results .result-name a[user-id=\"#{options[:validate].id}\"]") if options[:validate]
+
   find('#sidebar-search-expand').trigger(:click) if options[:expand]
 end
 
@@ -62,6 +64,7 @@ def open_notifications
   find("#{NOTIFICATION_PANEL} .panel-header").trigger(:click)
 end
 
+
 def hover_intent(element)
   element.hover
   element.hover
@@ -95,4 +98,4 @@ end
 # simulates focus event on window
 def window_focus
   page.evaluate_script(%{window.jQuery(window).trigger('focus');})
-end
+end