fix layout and modal issues

These were "regressions" after the bootstrap 3 migration
This commit is contained in:
Reinier Balt 2014-06-26 13:59:06 +02:00
parent 29acdc5a9d
commit 2f13da8bff
9 changed files with 89 additions and 65 deletions

View file

@ -48,13 +48,16 @@ TracksApp =
dialog.find("form").attr("data-link", settings.target_link) dialog.find("form").attr("data-link", settings.target_link)
dialog.find("form").attr("data-id", settings.target_id) dialog.find("form").attr("data-id", settings.target_id)
# set title of dialog # set title of dialog
dialog.find("h3#myModalLabel").html(settings.title) dialog.find("h4#myModalLabel").html(settings.title)
# set focus to input field when dialog is shown # set focus to input field when dialog is shown
dialog.on 'shown', -> dialog.on 'show.bs.modal', ->
# twitter-typeahead adds span around search field with display:inline-block. This causes # twitter-typeahead adds span around search field with display:inline-block. This causes
# the search field to ignore the width set in tracks.css # the search field to ignore the width set in tracks.css
$("span.twitter-typeahead").css("display", "block") $("span.twitter-typeahead").css("display", "block")
dialog.on 'shown.bs.modal', ->
$("input#tracks-goto-item").focus() $("input#tracks-goto-item").focus()
# show the dialog # show the dialog
dialog.modal() dialog.modal()
@ -120,7 +123,7 @@ TracksApp =
TracksApp.selectTodo($("div.todo-item").first()) TracksApp.selectTodo($("div.todo-item").first())
noteOfTodo: (todo) -> noteOfTodo: (todo) ->
notes_id = todo.find("i.icon-book").attr("data-note-id") notes_id = todo.find("i.fa-book").attr("data-note-id")
$("div#" + notes_id ) $("div#" + notes_id )
toggleNoteOfTodo: (todo) -> toggleNoteOfTodo: (todo) ->
@ -155,10 +158,10 @@ root.TracksApp = TracksApp
$ -> $ ->
$("a#menu-keyboard-shotcuts").click -> $('div#tracks-shortcuts-dialog').modal() $("a#menu-keyboard-shotcuts").click -> $('div#tracks-shortcuts-dialog').modal()
$("a.button-add-todo").click -> TracksApp.add_todo() $("button.button-add-todo").click -> TracksApp.add_todo()
$("a.button-home").click -> TracksApp.go_home() $("button.button-home").click -> TracksApp.go_home()
$("a.button-goto").click -> TracksApp.go_menu() $("button.button-goto").click -> TracksApp.go_menu()
$("span.todo-description-icons i.icon-book").click -> TracksApp.toggleNoteOfTodo( $(this).parent().parent().parent().parent().parent() ) $("span.todo-description-icons i.fa-book").click -> TracksApp.toggleNoteOfTodo( $(this).parent().parent().parent().parent().parent() )
$("span.todo-item-description-container").click -> TracksApp.selectTodo( $(this).parent().parent().parent() ) $("span.todo-item-description-container").click -> TracksApp.selectTodo( $(this).parent().parent().parent() )
autocompleteDataset = new Dataset autocompleteDataset = new Dataset

View file

@ -9,6 +9,7 @@ body {
div.tracks-main { div.tracks-main {
background-color: #FFF; background-color: #FFF;
border-radius: 10px; border-radius: 10px;
padding-top: 10px;
} }
/* Header */ /* Header */
@ -82,7 +83,7 @@ div.todo-item {
background-color: #EEE; background-color: #EEE;
border-radius: 3px; border-radius: 3px;
padding: 10px; padding: 10px;
margin: 0px -3px 0px -3px; margin: 0px 12px 0px -3px;
} }
div.todo-sub-menu { div.todo-sub-menu {
margin-top: 5px; margin-top: 5px;
@ -117,6 +118,11 @@ span.tags {
.label { .label {
margin-right: 1px; margin-right: 1px;
background-color: #BBB; background-color: #BBB;
}
}
span.tags, div.tracks-todo-badges{
span.label {
a:hover, a:focus { a:hover, a:focus {
text-decoration: none; text-decoration: none;
} }

View file

@ -36,7 +36,7 @@ module ApplicationHelper
days_limited = 2 if days > 2 days_limited = 2 if days > 2
colors = [:warning, :warning, :warning, :info, :info, :info] colors = [:warning, :warning, :warning, :info, :info, :info]
color = :important if days < 0 color = :danger if days < 0
color = :default if days > 7 color = :default if days > 7
color = colors[days] if color.nil? color = colors[days] if color.nil?
@ -54,8 +54,8 @@ module ApplicationHelper
"1" => t('todos.next_actions_due_date.due_tomorrow') "1" => t('todos.next_actions_due_date.due_tomorrow')
}) })
return content_tag(:a, {:title => format_date(due)}) { return content_tag(:span, {:class => "label label-#{color}"}) {
content_tag(:span, {:class => "badge badge-#{color}"}) { due_text[days_limited.to_s] } content_tag(:a, {:title => format_date(due)}) { due_text[days_limited.to_s] }
} }
end end

View file

@ -239,7 +239,7 @@ module TodosHelper
def date_span(todo=@todo) def date_span(todo=@todo)
if todo.completed? if todo.completed?
content_tag(:span, {class: "label"}) { format_date( todo.completed_at ) } content_tag(:span, {class: "label label-default"}) { format_date( todo.completed_at ) }
elsif todo.pending? elsif todo.pending?
title = t('todos.depends_on')+ ": " + todo.uncompleted_predecessors.to_a.map(&:description).join(', ') title = t('todos.depends_on')+ ": " + todo.uncompleted_predecessors.to_a.map(&:description).join(', ')
content_tag(:a, {:title => title}) { content_tag(:span, {:class => :orange}) { t('todos.pending') } } content_tag(:a, {:title => title}) { content_tag(:span, {:class => :orange}) { t('todos.pending') } }
@ -340,8 +340,8 @@ module TodosHelper
end end
def show_date_tag(date, the_class, text) def show_date_tag(date, the_class, text)
content_tag(:a, :title => format_date(date)) do content_tag(:span, :class => "label label-#{the_class.to_s}") do
content_tag(:span, :class => "label label-#{the_class.to_s}") { text } content_tag(:a, :title => format_date(date)) { text }
end end
end end
@ -356,7 +356,7 @@ module TodosHelper
case days case days
# overdue or due very soon! sound the alarm! # overdue or due very soon! sound the alarm!
when -1000..-1 when -1000..-1
show_date_tag(d, :important, t('todos.scheduled_overdue', :days => (days * -1).to_s)) show_date_tag(d, :danger, t('todos.scheduled_overdue', :days => (days * -1).to_s))
when 0 when 0
show_date_tag(d, :warning, t('todos.show_today')) show_date_tag(d, :warning, t('todos.show_today'))
when 1 when 1
@ -364,9 +364,9 @@ module TodosHelper
# due 2-7 days away # due 2-7 days away
when 2..7 when 2..7
if prefs.due_style == Preference.due_styles[:due_on] if prefs.due_style == Preference.due_styles[:due_on]
show_date_tag(d, :important, t('todos.show_on_date', :date => d.strftime("%A")) ) show_date_tag(d, :danger, t('todos.show_on_date', :date => d.strftime("%A")) )
else else
show_date_tag(d, :important, t('todos.show_in_days', :days => days.to_s) ) show_date_tag(d, :danger, t('todos.show_in_days', :days => days.to_s) )
end end
# more than a week away - relax # more than a week away - relax
else else

View file

@ -1,16 +1,22 @@
<div id="tracks-go-item-dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="tracks-go-item-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">...</h3> <h4 id="myModalLabel">...</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="form-search" action="/goto" method="get" data-link="/goto"> <form action="/goto" method="get" data-link="/goto" role="form">
<input type="text" id="tracks-goto-item" class="input-medium search-query ajax-typeahead" placeholder="..." <div class="form-group">
<input type="text" id="tracks-goto-item" class="form-control input-medium search-query ajax-typeahead" placeholder="..."
data-link="/from_go_item_dialog.autocomplete" autocomplete="off"> data-link="/from_go_item_dialog.autocomplete" autocomplete="off">
</div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Go to project</button> <button class="btn btn-primary">Go to project</button>
</div> </div>
</div> </div>
</div>
</div>

View file

@ -3,7 +3,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 class="modal-title" id="tracks-goto-dialog-title">Go to...</h3> <h4 class="modal-title" id="tracks-goto-dialog-title">Go to...</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div> <div>
@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button> <button class="btn btn-primary" data-dismiss="modal">Close</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,7 +1,9 @@
<div id="tracks-shortcuts-dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="tracks-shortcuts-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="tracks-keyboard-shortcuts" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">Keyboard Shortcuts</h3> <h4 class="modal-title" id="tracks-keyboard-shortcuts">Keyboard Shortcuts</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ul> <ul>
@ -12,12 +14,12 @@
<p>Navigation:</p> <p>Navigation:</p>
<ul> <ul>
<li><span class="badge">j</span> or <span class="badge">k</span>: go to previous or next item</li> <li><span class="badge">j</span> or <span class="badge">k</span>: go to previous or next item</li>
<li><span class="badge">G</span>: show list of project and contexts</li> <li><span class="badge">Shift-G</span>: show list of project and contexts</li>
<li><span class="badge">g</span> then <span class="badge">h</span>: go to the home page</li> <li><span class="badge">g</span> then <span class="badge">h</span>: go to the home page</li>
<li><span class="badge">g</span> then <span class="badge">c</span>: go to a specific context</li> <li><span class="badge">g</span> then <span class="badge">c</span>: go to a specific context</li>
<li><span class="badge">g</span> then <span class="badge">C</span>: go to the contexts page</li> <li><span class="badge">g</span> then <span class="badge">Shift-C</span>: go to the contexts page</li>
<li><span class="badge">g</span> then <span class="badge">p</span>: go to a specific project</li> <li><span class="badge">g</span> then <span class="badge">p</span>: go to a specific project</li>
<li><span class="badge">g</span> then <span class="badge">P</span>: go to the projects page</li> <li><span class="badge">g</span> then <span class="badge">Shift-P</span>: go to the projects page</li>
</ul> </ul>
<p>Grouping of actions:</p> <p>Grouping of actions:</p>
<ul> <ul>
@ -30,6 +32,8 @@
</ul> </ul>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div> </div>
</div> </div>

View file

@ -57,9 +57,14 @@
</li> </li>
</ul> </ul>
<form class="navbar-form navbar-right" role="form"> <form class="navbar-form navbar-right" role="form">
<a class="btn btn-primary button-add-todo" title="Add a new action"><i class="fa fa-plus fa-lg"></i></a> <button class="btn btn-primary btn-sm button-add-todo" title="Add a new action"><i class="fa fa-plus fa-lg"></i></button>
<a class="btn btn-primary button-goto" title="Go to..."><i class="fa fa-share fa-lg"></i></a> <button class="btn btn-primary btn-sm button-goto" title="Go to..."><i class="fa fa-share fa-lg"></i></button>
<input type="text" class="form-control search-query" placeholder="Search"> <div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default"type="button"><i class="fa fa-search"></i></button>
</span>
</div>
<%= link_to("<i class='fa fa-sign-out'></i>".html_safe, logout_path, title: "#{t('common.logout')} (#{current_user.display_name})") %> <%= link_to("<i class='fa fa-sign-out'></i>".html_safe, logout_path, title: "#{t('common.logout')} (#{current_user.display_name})") %>
</form> </form>
</div><%# //.navbar-collapse %> </div><%# //.navbar-collapse %>

View file

@ -1,8 +1,8 @@
<% cache [todo, current_user.date.strftime("%Y%m%d"), @source_view, current_user.prefs.verbose_action_descriptors] do -%> <% cache [todo, current_user.date.strftime("%Y%m%d"), @source_view, current_user.prefs.verbose_action_descriptors] do -%>
<div id="<%= dom_id(todo) %>" class="todo-item" <div id="<%= dom_id(todo) %>" class="todo-item container-fluid"
data-info="<%= render partial: "todos/todo_info", locals: {todo: todo} %>"> data-info="<%= render partial: "todos/todo_info", locals: {todo: todo} %>">
<div class="row"> <div class="row">
<div class="span8"> <div class="col-md-8">
<span class="todo-item-icons"> <span class="todo-item-icons">
<i class="fa <%= todo.completed? ? "fa-check-square-o" : "fa-square-o" %>"></i> <i class="fa <%= todo.completed? ? "fa-check-square-o" : "fa-square-o" %>"></i>
<i class="fa <%= todo.starred? ? "fa-star" : "fa-star-o"%>"></i> <i class="fa <%= todo.starred? ? "fa-star" : "fa-star-o"%>"></i>
@ -23,7 +23,7 @@
</small></p> </small></p>
</span> </span>
</div> </div>
<div class="span4 pull-right hidden-phone tracks-todo-badges"> <div class="col-md-4 pull-right hidden-phone tracks-todo-badges">
<%= date_span(todo) -%> <%= date_span(todo) -%>
<%= tag_list(todo) %> <%= tag_list(todo) %>
</div> </div>