Port top navigation bar to Bootstrap

app/assets/javascripts/application.js

@@ -12,6 +12,7 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require bootstrap-sprockets
 
 // Stuff in app/assets
 //= require tracks

app/assets/javascripts/tracks_pages.js

@@ -124,18 +124,6 @@ var TracksPages = {
     });
   },
   setup_behavior: function () {
-    /* main menu */
-    $('ul.sf-menu').superfish({
-        delay: 250,
-        animation:   {
-            opacity:'show',
-            height:'show'
-        },
-        autoArrows: false,
-        dropShadows: false,
-        speed: 'fast'
-    });
-
     /* context menu */
     $('ul.sf-item-menu').superfish({
         delay: 100,

app/assets/stylesheets/application.css.scss

@@ -30,6 +30,8 @@
   // TODO: remove when dropping the .bootstrap namespace
   font-size: $font-size-base;
   line-height: $line-height-base;
+
+  @import "tracks";
 }
 
 // Hybrid Bootstrap/legacy styles applied to body

app/assets/stylesheets/legacy.css.scss

@@ -159,7 +159,7 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url
 /* Structural divs */
 
 #content {
-    margin-top: 90px;
+    margin-top: 70px;
 }
 
 #display_box {
@@ -239,78 +239,6 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url
     z-index:502;
 }
 
-/* Navigation links at the top */
-
-#navcontainer {
-    position: fixed;
-    top: 48px;
-    left: 0px;
-    a { color: #eee; }
-    a:hover { color: #ccc; }
-}
-
-#navlist {
-    margin: 0;
-    padding: 0 0 20px 5px;
-
-    ul, li {
-        margin: 0;
-        padding: 0;
-        display: inline;
-        list-style-type: none;
-    }
-
-    a:link, a:visited {
-        float: left;
-        line-height: 14px;
-        font-weight: bold;
-        margin: 0 10px 4px 10px;
-        text-decoration: none;
-        color: #eee;
-    }
-
-    a:link#current, a:visited#current, a:hover {
-        border-bottom: 4px solid #CCC;
-        padding-bottom: 2px;
-        background: transparent;
-        color: #CCC;
-    }
-
-    a:hover { color: #CCC; }
-}
-
-#topbar {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    height: 68px;
-    margin-bottom: 20px;
-    clear: both;
-    background-color: #000;
-    color: #eee;
-    width: 100%;
-    z-index:501;
-}
-
-#date {
-    float: left;
-    width: 45%;
-    padding-left: 15px;
-    margin-top: 15px;
-    margin-bottom: 5px;
-    white-space: nowrap; /* added 2006-05-17 for safari display, timfm */
-
-    h1 { font-size: 152%; }
-}
-
-#minilinks {
-    text-align: right;
-    position: fixed;
-    right: 15px;
-    top: 10px;
-    font-size: 0.9em;
-}
-
 .container {
     padding: 0px 5px 0px 5px;
     border: 1px solid #999;
@@ -362,7 +290,7 @@ div#input_box {
     width: 265px;
     margin: 0;
     padding: 0px 0px 0px 0px;
-    top: 90px;
+    top: 70px;
     right: 40px;
 }
 
@@ -650,7 +578,7 @@ span.tag a:hover {
 
 div#message_holder {
     position: absolute;
-    z-index: 502;
+    z-index: 1502;
     left: 60%;
     top: 30px;
     right: 0px;
@@ -754,17 +682,6 @@ The colour of the background gets progressively yellower with age */
     background: #ff0;
 }
 
-/* Shows the number of undone next action */
-.badge {
-    color: #fff;
-    background: #f00;
-    padding: 3px 5px;
-    font-size: 12pt;
-    margin: 10px 10px 0px 0px;
-    height:26px;
-    border-radius: 2px;
-}
-
 ul {
     list-style-type: none;
 }

app/assets/stylesheets/print.css.scss

@@ -16,8 +16,8 @@ img {
     border:0;
 }
 
-#navcontainer, #input_box, #footer, .big-box, .refresh, .badge, h1, .icon,
+#input_box, #footer, .big-box, .refresh, .badge, h1, .icon,
-#minilinks, .defer-container, .menu_sort, .position, .buttons, .sf-item-menu,
+.defer-container, .menu_sort, .position, .buttons, .sf-item-menu,
 .container_toggle, .grip, .show_notes, .recurring_icon, #project-next-prev,
 .project_settings, .link_in_container_header {
     display:none;

app/assets/stylesheets/tracks.css.scss

@@ -0,0 +1,12 @@
+.navbar {
+  /* Shows the number of undone next action */
+  .badge {
+    color: #fff;
+    background: #f00;
+    display: inline;
+    padding: 3px 5px;
+    font-size: 12pt;
+    height:26px;
+    border-radius: 2px;
+  }
+}

app/views/layouts/application.html.erb

@@ -33,72 +33,18 @@
   </head>
 
   <body>
-   <div class="legacy-ui <%= controller.controller_name %>">
+    <div class="bootstrap">
-    <div id="topbar">
+      <%= render partial: "shared/navbar" %>
-      <div id="date">
+    </div>
-        <h1>
+
-          <% if @count -%>
+    <div class="legacy-ui <%= controller.controller_name %>">
-            <span id="badge_count" class="badge"><%= @count %></span>
-          <% end -%>
-          <%= l(Time.zone.today, :format => current_user.prefs.title_date_format) %>
-        </h1>
-      </div>
-      <div id="minilinks">
-        <%= link_to("#{t('common.logout')} (#{current_user.display_name}) &raquo;".html_safe, logout_path) %>
-      </div>
-      <div id="navcontainer">
-        <ul class="sf-menu">
-          <li><%= navigation_link(t('layouts.navigation.home'), root_path, {:accesskey => "t", :title => t('layouts.navigation.home_title')} ) %></li>
-          <li><%= navigation_link(t('layouts.navigation.starred'), tag_path("starred"), :title => t('layouts.navigation.starred_title')) %></li>
-          <li><%= navigation_link(t('common.projects'), projects_path, {:accesskey=>"p", :title=>t('layouts.navigation.projects_title')} ) %></li>
-          <li><%= navigation_link(t('layouts.navigation.tickler'), tickler_path, {:accesskey =>"k", :title => t('layouts.navigation.tickler_title')} ) %></li>
-          <li><a href="#"><%= t('layouts.navigation.organize') %></a>
-            <ul>
-              <li><%= navigation_link( t('common.contexts'), contexts_path, {:accesskey=>"c", :title=>t('layouts.navigation.contexts_title')} ) %></li>
-              <li><%= navigation_link( t('common.notes'), notes_path, {:accesskey => "o", :title => t('layouts.navigation.notes_title')} ) %></li>
-              <li><%= navigation_link( t('common.review'), review_path, {:accesskey => "r", :title => t('layouts.navigation.review_title')} ) %></li>
-              <li><%= navigation_link( t('layouts.navigation.recurring_todos'), {:controller => "recurring_todos", :action => "index"}, :title => t('layouts.navigation.recurring_todos_title')) %></li>
-            </ul>
-          </li>
-          <li id="menu_view"><a href="#" id="menu_view_link"><%= t('layouts.navigation.view') %></a>
-            <ul>
-              <li><%= navigation_link( t('layouts.navigation.calendar'), calendar_path, :title => t('layouts.navigation.calendar_title')) %></li>
-              <li><%= navigation_link( t('layouts.navigation.completed_tasks'), done_overview_path, {:accesskey=>"d", :title=>t('layouts.navigation.completed_tasks_title')} ) %></li>
-              <li><%= navigation_link( t('layouts.navigation.feeds'), feeds_path, :title => t('layouts.navigation.feeds_title')) %></li>
-              <li><%= navigation_link( t('layouts.navigation.stats'), stats_path, :title => t('layouts.navigation.stats_title')) %></li>
-              <li><hr/></li>
-              <li id="menu_view_toggle_contexts"><%= link_to(t('layouts.toggle_contexts'), "#", {:title => t('layouts.toggle_contexts_title'), :id => "toggle-contexts-nav"}) %></li>
-              <li><%= link_to(t('layouts.toggle_notes'), "#", {:accesskey => "S", :title => t('layouts.toggle_notes_title'), :id => "toggle-notes-nav"}) %></li>
-              <%= group_view_by_menu_entry %>
-            </ul>
-          </li>
-          <li><a href="#"><%= t('layouts.navigation.admin') %></a>
-            <ul>
-              <li><%= navigation_link( t('layouts.navigation.preferences'), preferences_path, {:accesskey => "u", :title => t('layouts.navigation.preferences_title')} ) %></li>
-              <li><%= navigation_link( t('layouts.navigation.export'), data_path, {:accesskey => "e", :title => t('layouts.navigation.export_title')} ) %></li>
-              <li><%= navigation_link( t('layouts.navigation.import'), import_data_path, {:accesskey => "i", :title => t('layouts.navigation.import_title')} ) %></li>
-              <% if current_user.is_admin? -%>
-                <li><%= navigation_link(t('layouts.navigation.manage_users'), users_path, {:accesskey => "a", :title => t('layouts.navigation.manage_users_title')} ) %></li>
-              <% end -%>
-            </ul>
-          </li>
-          <li><a href="#"><%= t('layouts.navigation.help') %></a>
-            <ul>
-              <li><%= link_to t('layouts.navigation.integrations_'), integrations_path %></li>
-              <li><%= link_to t('layouts.navigation.api_docs'), rest_api_docs_path %></li>
-            </ul>
-          </li>
-          <li><%= navigation_link(image_tag("system-search.png", :size => "16X16", :border => 0), search_path, :title => t('layouts.navigation.search')) %></li>
-        </ul>
-      </div>
       <%= render_flash %>
-    </div>
 
-    <div id="content" class="<%= controller.controller_name %>">
+      <div id="content" class="<%= controller.controller_name %>">
-      <%= yield %>
+        <%= yield %>
-    </div>
+      </div>
 
-    <%= render :partial => "shared/footer" %>
+      <%= render :partial => "shared/footer" %>
    </div><!-- .legacy-ui -->
   </body>
 </html>

app/views/login/check_expiry.js.erb

@@ -3,7 +3,7 @@
   message = I18n.t('login.session_time_out', :link => theLink)
   theHtml = escape_javascript(content_tag(:div, message.html_safe, :"class" => "warning"))
   -%>
-  $('div#navcontainer').hide();
+  $('nav.navbar').hide();
   $('div#content').html('<%=theHtml%>');
   refresh_page(); // refresh the page. if it fails, the message above remains
-<%  end -%>
+<%  end -%>

app/views/shared/_navbar.html.erb

@@ -0,0 +1,80 @@
+<nav class="navbar navbar-inverse navbar-fixed-top">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <div class="navbar-brand legacy-ui">
+        <% if @count -%>
+        <span id="badge_count" class="badge"><%= @count %></span>
+        <% end -%>
+        <%= l(Time.zone.today, :format => current_user.prefs.title_date_format) %>
+      </div>
+    </div>
+    <div id="navbar" class="navbar-collapse collapse">
+      <ul class="nav navbar-nav">
+        <li><%= navigation_link(t('layouts.navigation.home'), root_path, {:accesskey => "t", :title => t('layouts.navigation.home_title')} ) %></li>
+        <li><%= navigation_link(t('layouts.navigation.starred'), tag_path("starred"), :title => t('layouts.navigation.starred_title')) %></li>
+        <li><%= navigation_link(t('common.projects'), projects_path, {:accesskey=>"p", :title=>t('layouts.navigation.projects_title')} ) %></li>
+        <li><%= navigation_link(t('layouts.navigation.tickler'), tickler_path, {:accesskey =>"k", :title => t('layouts.navigation.tickler_title')} ) %></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            <%= t('layouts.navigation.organize') %> <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li><%= navigation_link( t('common.contexts'), contexts_path, {:accesskey=>"c", :title=>t('layouts.navigation.contexts_title')} ) %></li>
+            <li><%= navigation_link( t('common.notes'), notes_path, {:accesskey => "o", :title => t('layouts.navigation.notes_title')} ) %></li>
+            <li><%= navigation_link( t('common.review'), review_path, {:accesskey => "r", :title => t('layouts.navigation.review_title')} ) %></li>
+            <li><%= navigation_link( t('layouts.navigation.recurring_todos'), {:controller => "recurring_todos", :action => "index"}, :title => t('layouts.navigation.recurring_todos_title')) %></li>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a href="#" id="menu_view_link" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            <%= t('layouts.navigation.view') %> <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li><%= navigation_link( t('layouts.navigation.calendar'), calendar_path, :title => t('layouts.navigation.calendar_title')) %></li>
+            <li><%= navigation_link( t('layouts.navigation.completed_tasks'), done_overview_path, {:accesskey=>"d", :title=>t('layouts.navigation.completed_tasks_title')} ) %></li>
+            <li><%= navigation_link( t('layouts.navigation.feeds'), feeds_path, :title => t('layouts.navigation.feeds_title')) %></li>
+            <li><%= navigation_link( t('layouts.navigation.stats'), stats_path, :title => t('layouts.navigation.stats_title')) %></li>
+            <li class="divider"></li>
+            <li id="menu_view_toggle_contexts"><%= link_to(t('layouts.toggle_contexts'), "#", {:title => t('layouts.toggle_contexts_title'), :id => "toggle-contexts-nav"}) %></li>
+            <li><%= link_to(t('layouts.toggle_notes'), "#", {:accesskey => "S", :title => t('layouts.toggle_notes_title'), :id => "toggle-notes-nav"}) %></li>
+            <%= group_view_by_menu_entry %>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            <%= t('layouts.navigation.admin') %> <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li><%= navigation_link( t('layouts.navigation.preferences'), preferences_path, {:accesskey => "u", :title => t('layouts.navigation.preferences_title')} ) %></li>
+            <li><%= navigation_link( t('layouts.navigation.export'), data_path, {:accesskey => "e", :title => t('layouts.navigation.export_title')} ) %></li>
+            <li><%= navigation_link( t('layouts.navigation.import'), import_data_path, {:accesskey => "i", :title => t('layouts.navigation.import_title')} ) %></li>
+            <% if current_user.is_admin? -%>
+            <li><%= navigation_link(t('layouts.navigation.manage_users'), users_path, {:accesskey => "a", :title => t('layouts.navigation.manage_users_title')} ) %></li>
+            <% end -%>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            <%= t('layouts.navigation.help') %> <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li><%= link_to t('layouts.navigation.integrations_'), integrations_path %></li>
+            <li><%= link_to t('layouts.navigation.api_docs'), rest_api_docs_path %></li>
+          </ul>
+        </li>
+        <li><%= navigation_link(image_tag("system-search.png", :size => "16X16", :border => 0), search_path, :title => t('layouts.navigation.search')) %></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li>
+          <%= link_to("#{t('common.logout')} (#{current_user.display_name}) &raquo;".html_safe, logout_path) %>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>

features/support/tracks_step_helper.rb

@@ -11,7 +11,7 @@ module TracksStepHelper
       page.evaluate_script('$(":animated").length').zero?
     end
   end
-  
+
   def wait_for_ajax
     wait_until do
       page.evaluate_script('jQuery.active').zero?
@@ -69,7 +69,7 @@ module TracksStepHelper
   def project_list_find_index(project_name)
     return container_list_find_index(:project, find_project(project_name))
   end
-    
+
   def format_date(date)
     # copy-and-past from ApplicationController::format_date
     return date ? date.in_time_zone(@current_user.prefs.time_zone).strftime("#{@current_user.prefs.date_format}") : ''
@@ -81,15 +81,13 @@ module TracksStepHelper
   end
 
   def open_view_menu
-    view_menu = "ul.sf-menu li#menu_view"
+    # click menu
-
+    view_menu_link = "#menu_view_link"
-    # click menu 
-    view_menu_link = "#{view_menu} a#menu_view_link"
     expect(page).to have_css(view_menu_link, :visible => true)
     page.find(view_menu_link).click
 
     # wait for menu to be visible
-    view_menu_item = "#{view_menu} li#menu_view_toggle_contexts"
+    view_menu_item = "#menu_view_toggle_contexts"
     expect(page).to have_css(view_menu_item)
 
     within view_menu do
@@ -100,7 +98,7 @@ module TracksStepHelper
   def open_submenu_for(todo)
     wait_for_animations_to_end
 
-    submenu_css = "div#line_todo_#{todo.id} ul#ultodo_#{todo.id}"
+    submenu_css = "#ultodo_#{todo.id}"
 
     execute_javascript "$('#{submenu_css}').parent().showSuperfishUl()"
 
@@ -111,7 +109,7 @@ module TracksStepHelper
       yield
     end
   end
-  
+
   def handle_js_confirm(accept=true)
     execute_javascript "window.original_confirm_function = window.confirm"
     execute_javascript "window.confirmMsg = null"
@@ -120,7 +118,7 @@ module TracksStepHelper
   ensure
     execute_javascript "window.confirm = window.original_confirm_function"
   end
-  
+
   def get_confirm_text
     page.evaluate_script "window.confirmMsg"
   end
@@ -128,5 +126,5 @@ module TracksStepHelper
   def execute_javascript(js)
     page.execute_script(js)
   end
-  
+
 end