From 2d2fc0ceb99a0975e394cbb8f1c1b45a2bcd7d8b Mon Sep 17 00:00:00 2001 From: Jonathan Davis Date: Sat, 6 Apr 2013 13:30:23 -0400 Subject: [PATCH 1/2] Tweaked template markup layout and styles for an improved todo list experience Improved the TODO table to render entries with familiar todo manager task entries in a style similar to other task management solutions (inspired by Things from Cultured Code). Print styles also include boxes for those that might want to mark items off as they complete tasks. --- Support/css/default/print.css | 45 +++++++++++- Support/css/default/style.css | 130 ++++++++++++++++++++++++++++------ Support/template_head.rhtml | 5 +- Support/template_item.rhtml | 15 ++-- Support/template_tail.rhtml | 25 +++---- 5 files changed, 174 insertions(+), 46 deletions(-) diff --git a/Support/css/default/print.css b/Support/css/default/print.css index 90b1ccd..ba53871 100644 --- a/Support/css/default/print.css +++ b/Support/css/default/print.css @@ -11,6 +11,7 @@ background-color: #FFF; display: block; float: left; + padding: 3px; padding-right: 1em; } @@ -23,6 +24,7 @@ } #todo_list a { + color: #000; text-decoration: none; } @@ -30,10 +32,51 @@ color: #000; } -#todo_list table td { +#todo_list td { + position: relative; text-align: left; + vertical-align: top; + } #todo_list #toplink { display: none; +} + +#todo_list .box { + padding-right: 0.5em; + display: inline-block; + border-radius: 2px; + border: 1px solid #000; + box-shadow: inset 0px 1px 2px #000; + margin-left: 8px; + margin-right: 16px; + padding: 0 !important; + opacity: 0.6; +} + +#todo_list table .box { + position: absolute; + top: 0.2em; + width: 10px; + height: 10px; +} + +#todo_list .counters .box { + border: 0; + box-shadow: none; + padding: 0; + margin: 0; + margin-right: 3px; +} +#todo_list .todo_comment { + display: inline-block; + margin-left: 30px; +} + +#info_no_results, +#todo_list table th, +label, +input { + display:none; } \ No newline at end of file diff --git a/Support/css/default/style.css b/Support/css/default/style.css index 8fc9267..a8daf49 100644 --- a/Support/css/default/style.css +++ b/Support/css/default/style.css @@ -1,30 +1,120 @@ +#tm_webpreview_content { + background: #aaa !important; +} + #todo_list table { clear: both; - border-collapse: collapse; + border-spacing: 0 1px; + width: 100%; } #todo_list h3 { + font-family: "Helvetica Neue"; + font-size: 2em; + text-shadow: 0 1px 1px #f1f1f1; clear: both; } +#current_dir_container { + text-shadow: 0 1px 1px #f1f1f1; +} + #todo_list_list td, #todo_list th { - font-family: monospace; + font-family: "Helvetica Neue"; + font-size: 1.2em; +} + +#todo_list a { + color: #333; + text-decoration: none; +} + +#todo_list a:hover { + border-bottom: 1px solid #333; } + #todo_list th { white-space: nowrap; - border-bottom: 1px solid #000; text-align: left; } #todo_list th a { + color: #555; text-decoration: none; } +#todo_list .todo input { + float: left; +} + #todo_list td { + position:relative; font-size: 9pt; - padding: 0.5ex 1ex 0.5ex 0; vertical-align: top; + border-radius:3px; + border: 1px solid #fff; + padding: 3px 2px; + background: #f7f7f7; + background-image: -webkit-linear-gradient(#fafafa, #f1f1f1); + overflow: hidden; + text-shadow: 0 1px 1px #fff; + line-height: 1.8em; +} + +#todo_list .comment { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + border-right: 1px solid #ddd; + margin-left: -2px; + box-shadow: 0px 1px 2px #444; +} + +#todo_list .file { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + margin-left: -2px; + box-shadow: 0px 1px 2px #444; + padding: 0px 8px; +} + +#todo_list .box { + display: inline-block; + border-radius: 2px; + border: 1px solid #000; + box-shadow: inset 0px 1px 2px #000; + margin-left: 8px; + margin-right: 16px; + padding: 0 !important; + opacity: 0.6; +} + +#todo_list .counters .box { + min-width: 2em; + padding-left: 3px; + padding-right: 3px; + margin-left: 8px; + margin-right: 8px; + +} + +#todo_list table .box { + position: absolute; + top: 30%; + width: 10px; + height: 10px; +} + +#todo_list .todo_comment { + display: inline-block; + margin-left: 40px; +} + +#todo_list .item_line { + font-family: Menlo; + vertical-align: middle; + font-size: 7pt; + padding-left: 8px; } #todo_list tr.alternate { @@ -43,27 +133,36 @@ } #todo_list .counters { + background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,rgba(255,255,255,0.7)),color-stop(100%,rgba(201,201,201,0.7))); + background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.7),rgba(201,201,201,0.7)); + border-radius: 3px; + box-shadow: 1px 0 0 rgba(255,255,255,0.15),-1px 0 0 rgba(255,255,255,0.15),0 1px 0 rgba(255,255,255,0.2); + line-height: 1.8em; padding: 0; overflow: hidden; + box-shadow: 0px 1px 2px #444; + } #todo_list .counters li { display: block; float: left; padding: 1ex; - border: 1px solid #444; border-collapse: collapse; min-width: 6em; text-align: center; } #todo_list .counters li a { - color: #FFF; + color: #333; +} + +#todo_list .counters .alignright { + float: right; } #todo_list .bg_total, #todo_list #total_count { - color: #FFF; - background-color: #000; + color: #000; } #todo_list td.type { @@ -92,19 +191,4 @@ label.filter { label.disabled { opacity: .66; -} - -#filter, #trigger_relative_paths { - margin-left: 4em; -} - -fieldset { - clear: both; -} -fieldset p { - margin: 0; -} - -fieldset p ~ p { - margin-top: 1ex; } \ No newline at end of file diff --git a/Support/template_head.rhtml b/Support/template_head.rhtml index 0291193..9b2dc77 100644 --- a/Support/template_head.rhtml +++ b/Support/template_head.rhtml @@ -13,8 +13,9 @@

Scanning directory:

diff --git a/Support/template_item.rhtml b/Support/template_item.rhtml index b102e97..5bb3cc2 100644 --- a/Support/template_item.rhtml +++ b/Support/template_item.rhtml @@ -1,9 +1,14 @@ - - - <%= "#{html_escape(match[:file].sub(Regexp.new(project_dir+"/?"), ''))}" %><%= "#{html_escape(File.basename(match[:file]))}" %> (<%= match[:line] %>) + +
+
+ <%= match[:match] %> +
- - <%= match[:match] %> + +
+ + <%= "#{html_escape(match[:file].sub(Regexp.new(project_dir+"/?"), ''))}" %><%= "#{html_escape(File.basename(match[:file]))}" %> <%= match[:line] %> +
diff --git a/Support/template_tail.rhtml b/Support/template_tail.rhtml index 4f0107c..eb1767d 100644 --- a/Support/template_tail.rhtml +++ b/Support/template_tail.rhtml @@ -1,16 +1,10 @@ - - -
- Options -

-

disabled="true"<% end %>>

-
- - <% tags.each do |tag| %> + + +<% tags.each do |tag| %> <% next if tag[:matches].length == 0 %> <% tag[:matches].each do |match| %> @@ -23,8 +17,8 @@

<%= tag[:label] %>

- - + + <% tag[:matches].each do |match| %> @@ -92,4 +86,5 @@ el.className = "item_relative_path" + (on ? "" : " todo_hidden"); }; } + \ No newline at end of file From c6b973e39778cc96d558959e425b8b06385749b5 Mon Sep 17 00:00:00 2001 From: Jonathan Davis Date: Sun, 7 Apr 2013 23:16:52 -0400 Subject: [PATCH 2/2] Sharpened text in the counters/control bar with shadows --- Support/css/default/style.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Support/css/default/style.css b/Support/css/default/style.css index a8daf49..d2a60f3 100644 --- a/Support/css/default/style.css +++ b/Support/css/default/style.css @@ -95,6 +95,7 @@ padding-right: 3px; margin-left: 8px; margin-right: 8px; + text-shadow: 0 1px 1px #333; } @@ -155,6 +156,7 @@ #todo_list .counters li a { color: #333; + text-shadow: 0 1px 1px #f1f1f1; } #todo_list .counters .alignright { @@ -163,6 +165,7 @@ #todo_list .bg_total, #todo_list #total_count { color: #000; + text-shadow: 0 1px 1px #f1f1f1; } #todo_list td.type { @@ -184,9 +187,8 @@ right: 1em; } -label.filter { - position: absolute; - padding-top: 4px; +label { + text-shadow: 0 1px 1px #f1f1f1; } label.disabled {
FileCommentSortFiles