mirror of
https://github.com/TracksApp/tracks.git
synced 2025-12-16 15:20:13 +01:00
Port top navigation bar to Bootstrap
This commit is contained in:
Matteo Giaccone
Matt Rogers
parent
20b040b8b7
commit
e60c25f8a2
10 changed files with 120 additions and 176 deletions
|
|
@ -12,6 +12,7 @@
|
|||
//
|
||||
//= require jquery
|
||||
//= require jquery_ujs
|
||||
//= require bootstrap-sprockets
|
||||
|
||||
// Stuff in app/assets
|
||||
//= require tracks
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ img {
|
|||
border:0;
|
||||
}
|
||||
|
||||
#navcontainer, #input_box, #footer, .big-box, .refresh, .badge, h1, .icon,
|
||||
#minilinks, .defer-container, .menu_sort, .position, .buttons, .sf-item-menu,
|
||||
#input_box, #footer, .big-box, .refresh, .badge, h1, .icon,
|
||||
.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;
|
||||
|
|
|
|||
12
app/assets/stylesheets/tracks.css.scss
Normal file
12
app/assets/stylesheets/tracks.css.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -33,72 +33,18 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="legacy-ui <%= controller.controller_name %>">
|
||||
<div id="topbar">
|
||||
<div id="date">
|
||||
<h1>
|
||||
<% if @count -%>
|
||||
<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}) »".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>
|
||||
<div class="bootstrap">
|
||||
<%= render partial: "shared/navbar" %>
|
||||
</div>
|
||||
|
||||
<div class="legacy-ui <%= controller.controller_name %>">
|
||||
<%= render_flash %>
|
||||
</div>
|
||||
|
||||
<div id="content" class="<%= controller.controller_name %>">
|
||||
<%= yield %>
|
||||
</div>
|
||||
<div id="content" class="<%= controller.controller_name %>">
|
||||
<%= yield %>
|
||||
</div>
|
||||
|
||||
<%= render :partial => "shared/footer" %>
|
||||
<%= render :partial => "shared/footer" %>
|
||||
</div><!-- .legacy-ui -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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 -%>
|
||||
|
|
|
|||
80
app/views/shared/_navbar.html.erb
Normal file
80
app/views/shared/_navbar.html.erb
Normal file
|
|
@ -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}) »".html_safe, logout_path) %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -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 = "#{view_menu} a#menu_view_link"
|
||||
# click menu
|
||||
view_menu_link = "#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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue