]> source.dussan.org Git - redmine.git/commitdiff
tooltips added on Gantt chart to view the details of the issues
authorJean-Philippe Lang <jp_lang@yahoo.fr>
Tue, 9 Jan 2007 21:27:21 +0000 (21:27 +0000)
committerJean-Philippe Lang <jp_lang@yahoo.fr>
Tue, 9 Jan 2007 21:27:21 +0000 (21:27 +0000)
(added csshover behaviour to make it work under IE)

git-svn-id: http://redmine.rubyforge.org/svn/trunk@160 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/controllers/projects_controller.rb
app/views/layouts/base.rhtml
app/views/projects/gantt.rhtml
public/stylesheets/application.css
public/stylesheets/csshover.htc [new file with mode: 0644]

index 68dc1a6619b1b8d3e4f11826c2a906cc99279dff..7b62312b4cd5a14350b7ff80766e3cda4f865acd 100644 (file)
@@ -485,7 +485,7 @@ class ProjectsController < ApplicationController
     \r
     @date_from = Date.civil(@year_from, @month_from, 1)\r
     @date_to = (@date_from >> @months) - 1\r
-    @issues = @project.issues.find(:all, :order => "start_date, due_date", :conditions => ["(((start_date>=? and start_date<=?) or (due_date>=? and due_date<=?) or (start_date<? and due_date>?)) and start_date is not null and due_date is not null)", @date_from, @date_to, @date_from, @date_to, @date_from, @date_to])\r
+    @issues = @project.issues.find(:all, :order => "start_date, due_date", :include => [:tracker, :status, :author, :priority], :conditions => ["(((start_date>=? and start_date<=?) or (due_date>=? and due_date<=?) or (start_date<? and due_date>?)) and start_date is not null and due_date is not null)", @date_from, @date_to, @date_from, @date_to, @date_from, @date_to])\r
     \r
     if params[:output]=='pdf'\r
       @options_for_rfpdf ||= {}\r
index 85f41e327673ea6ebdf452cefc48df8217d60461..4768f29dd26a30ffdc2ea932fbbf7e83ac4871e9 100644 (file)
@@ -5,6 +5,11 @@
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
 <meta name="description" content="redMine" />\r
 <meta name="keywords" content="issue,bug,tracker" />\r
+<!--[if IE]>\r
+    <style type="text/css">\r
+    body {behavior: url(<%= stylesheet_path "csshover.htc" %>);}\r
+    </style>\r
+<![endif]-->\r
 <%= stylesheet_link_tag "application" %>\r
 <%= stylesheet_link_tag "print", :media => "print" %>\r
 <%= javascript_include_tag :defaults %>\r
index 615d8323d47c7eb50326aa253bdc63858e0a4829..5f6c96e905891d441ed7a1024f93fdea8ddf8095 100644 (file)
@@ -55,7 +55,7 @@ if @zoom >1
 end\r
 \r
 g_width = (@date_to - @date_from + 1)*zoom\r
-g_height = [(20 * @issues.length + 6), 206].max\r
+g_height = [(20 * @issues.length + 6)+150, 206].max\r
 t_height = g_height + headers_heigth\r
 %>\r
 \r
@@ -65,14 +65,14 @@ t_height = g_height + headers_heigth
 \r
 <div style="position:relative;height:<%= t_height + 24 %>px;width:<%= subject_width + 1 %>px;">\r
 <div style="right:-2px;width:<%= subject_width %>px;height:<%= headers_heigth %>px;background: #eee;" class="gantt_hdr"></div>\r
-<div style="right:-2px;width:<%= subject_width %>px;height:<%= t_height %>px;border-left: 1px solid #c0c0c0;" class="gantt_hdr"></div>\r
+<div style="right:-2px;width:<%= subject_width %>px;height:<%= t_height %>px;border-left: 1px solid #c0c0c0;overflow:hidden;" class="gantt_hdr"></div>\r
 <%\r
 #\r
 # Tasks subjects\r
 #\r
 top = headers_heigth + 8\r
 @issues.each do |i| %>\r
-       <div style="position: absolute;line-height:1em;height:16px;top:<%= top %>px;left:4px;width:<%= subject_width - 5 %>px;overflow:hidden;">\r
+       <div style="position: absolute;line-height:1.2em;height:16px;top:<%= top %>px;left:4px;overflow:hidden;">\r
        <small><%= link_to "#{i.tracker.name} ##{i.id}", { :controller => 'issues', :action => 'show', :id => i }, :title => "#{i.subject}" %>:\r
        <%=h i.subject.sub(/^(.{30}[^\s]*\s).*$/, '\1 (...)') %></small>\r
        </div>\r
@@ -82,7 +82,7 @@ end %>
 </td>\r
 <td>\r
 \r
-<div style="position:relative;height:<%= t_height + 24 %>px;width:<%= subject_width %>;overflow:auto;">\r
+<div style="position:relative;height:<%= t_height + 24 %>px;overflow:auto;">\r
 <div style="width:<%= g_width-1 %>px;height:<%= headers_heigth %>px;background: #eee;" class="gantt_hdr">&nbsp;</div>\r
 <% \r
 #\r
@@ -167,7 +167,7 @@ if Date.today >= @date_from and Date.today <= @date_to %>
 #\r
 # Tasks\r
 #\r
-top = headers_heigth + 12\r
+top = headers_heigth + 10\r
 @issues.each do |i| %>\r
        <%\r
        i_start_date = (i.start_date >= @date_from ? i.start_date : @date_from )\r
@@ -183,7 +183,7 @@ top = headers_heigth + 12
        i_width = ((i_end_date - i_start_date + 1)*zoom).floor - 2                  # total width of the issue (- 2 for left and right borders)\r
        d_width = ((i_done_date - i_start_date)*zoom).floor - 2                     # done width\r
        l_width = i_late_date ? ((i_late_date - i_start_date+1)*zoom).floor - 2 : 0 # delay width\r
-       %>      \r
+       %>\r
        <div style="top:<%= top %>px;left:<%= i_left %>px;width:<%= i_width %>px;" class="task task_todo">&nbsp;</div>\r
        <% if l_width > 0 %>\r
            <div style="top:<%= top %>px;left:<%= i_left %>px;width:<%= l_width %>px;" class="task task_late">&nbsp;</div>\r
@@ -194,7 +194,16 @@ top = headers_heigth + 12
        <div style="top:<%= top %>px;left:<%= i_left + i_width + 5 %>px;background:#fff;" class="task">\r
        <%= i.status.name %>\r
        <%= (i.done_ratio).to_i %>%\r
-       </div>  \r
+       </div>\r
+       <% # === tooltip === %>\r
+       <div style="position: absolute;top:<%= top %>px;left:<%= i_left %>px;width:<%= i_width %>px;height:12px;" class="tooltip"><span class="tip">\r
+          <strong><%= "#{i.tracker.name} ##{i.id}" %></strong>: <%=h i.subject %><br />\r
+          <br />\r
+          <strong><%= l(:field_start_date) %></strong>: <%= format_date(i.start_date) %><br />\r
+          <strong><%= l(:field_due_date) %></strong>: <%= format_date(i.due_date) %><br />\r
+          <strong><%= l(:field_assigned_to) %></strong>: <%= i.assigned_to ? i.assigned_to.name : "-" %><br />\r
+          <strong><%=l(:field_priority)%></strong>: <%= i.priority.name %>\r
+       </span></div>\r
        <% top = top + 20\r
 end %>\r
 </div>\r
index ea033c558fd415e803d63feb9476dcbc898ae1f6..6fed472a70591a7880d17f28fbea1abf35f26d6c 100644 (file)
@@ -548,7 +548,6 @@ font-size: 1em;
   height:8px;\r
   font-size:0.8em;\r
   color:#888;\r
-  background:#aaa;\r
   padding:0;\r
   margin:0;\r
   line-height:0.8em;\r
@@ -558,6 +557,22 @@ font-size: 1em;
 .task_done { background:#66f url(../images/task_done.png); border: 1px solid #66f; }  \r
 .task_todo { background:#aaa url(../images/task_todo.png); border: 1px solid #aaa; }\r
 \r
+/***** Tooltips ******/\r
+.tooltip{position:absolute;z-index:24;}\r
+.tooltip:hover{z-index:25;color:#000;}\r
+.tooltip span.tip{display: none}\r
+\r
+div.tooltip:hover span.tip{\r
+display:block;\r
+position:absolute;\r
+top:12px; left:20px; width:270px;\r
+border:1px solid #555;\r
+background-color:#fff;\r
+padding: 4px;\r
+font-size: 0.8em;\r
+color:#505050;\r
+}\r
+\r
 /***** CSS FORM ******/\r
 .tabular p{\r
 margin: 0;\r
diff --git a/public/stylesheets/csshover.htc b/public/stylesheets/csshover.htc
new file mode 100644 (file)
index 0000000..3ba936a
--- /dev/null
@@ -0,0 +1,120 @@
+<attach event="ondocumentready" handler="parseStylesheets" />\r
+<script>\r
+/**\r
+ *     Whatever:hover - V1.42.060206 - hover & active\r
+ *     ------------------------------------------------------------\r
+ *     (c) 2005 - Peter Nederlof\r
+ *     Peterned - http://www.xs4all.nl/~peterned/\r
+ *     License  - http://creativecommons.org/licenses/LGPL/2.1/\r
+ *\r
+ *     Whatever:hover is free software; you can redistribute it and/or\r
+ *     modify it under the terms of the GNU Lesser General Public\r
+ *     License as published by the Free Software Foundation; either\r
+ *     version 2.1 of the License, or (at your option) any later version.\r
+ *\r
+ *     Whatever:hover is distributed in the hope that it will be useful,\r
+ *     but WITHOUT ANY WARRANTY; without even the implied warranty of\r
+ *     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\r
+ *     Lesser General Public License for more details.\r
+ *\r
+ *     Credits and thanks to:\r
+ *     Arnoud Berendsen, Martin Reurings, Robert Hanson\r
+ *\r
+ *     howto: body { behavior:url("csshover.htc"); }\r
+ *     ------------------------------------------------------------\r
+ */\r
+\r
+var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,\r
+currentSheet, doc = window.document, hoverEvents = [], activators = {\r
+       onhover:{on:'onmouseover', off:'onmouseout'},\r
+       onactive:{on:'onmousedown', off:'onmouseup'}\r
+}\r
+\r
+function parseStylesheets() {\r
+       if(!/MSIE (5|6)/.test(navigator.userAgent)) return;\r
+       window.attachEvent('onunload', unhookHoverEvents);\r
+       var sheets = doc.styleSheets, l = sheets.length;\r
+       for(var i=0; i<l; i++) \r
+               parseStylesheet(sheets[i]);\r
+}\r
+       function parseStylesheet(sheet) {\r
+               if(sheet.imports) {\r
+                       try {\r
+                               var imports = sheet.imports, l = imports.length;\r
+                               for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);\r
+                       } catch(securityException){}\r
+               }\r
+\r
+               try {\r
+                       var rules = (currentSheet = sheet).rules, l = rules.length;\r
+                       for(var j=0; j<l; j++) parseCSSRule(rules[j]);\r
+               } catch(securityException){}\r
+       }\r
+\r
+       function parseCSSRule(rule) {\r
+               var select = rule.selectorText, style = rule.style.cssText;\r
+               if(!csshoverReg.test(select) || !style) return;\r
+\r
+               var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');\r
+               var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);\r
+               var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];\r
+               var affected = select.replace(/:(hover|active).*$/, '');\r
+               var elements = getElementsBySelect(affected);\r
+               if(elements.length == 0) return;\r
+\r
+               currentSheet.addRule(newSelect, style);\r
+               for(var i=0; i<elements.length; i++)\r
+                       new HoverElement(elements[i], className, activators[pseudo]);\r
+       }\r
+\r
+function HoverElement(node, className, events) {\r
+       if(!node.hovers) node.hovers = {};\r
+       if(node.hovers[className]) return;\r
+       node.hovers[className] = true;\r
+       hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });\r
+       hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });\r
+}\r
+       function hookHoverEvent(node, type, handler) {\r
+               node.attachEvent(type, handler);\r
+               hoverEvents[hoverEvents.length] = { \r
+                       node:node, type:type, handler:handler \r
+               };\r
+       }\r
+\r
+       function unhookHoverEvents() {\r
+               for(var e,i=0; i<hoverEvents.length; i++) {\r
+                       e = hoverEvents[i]; \r
+                       e.node.detachEvent(e.type, e.handler);\r
+               }\r
+       }\r
+\r
+function getElementsBySelect(rule) {\r
+       var parts, nodes = [doc];\r
+       parts = rule.split(' ');\r
+       for(var i=0; i<parts.length; i++) {\r
+               nodes = getSelectedNodes(parts[i], nodes);\r
+       }       return nodes;\r
+}\r
+       function getSelectedNodes(select, elements) {\r
+               var result, node, nodes = [];\r
+               var identify = (/\#([a-z0-9_-]+)/i).exec(select);\r
+               if(identify) {\r
+                       var element = doc.getElementById(identify[1]);\r
+                       return element? [element]:nodes;\r
+               }\r
+               \r
+               var classname = (/\.([a-z0-9_-]+)/i).exec(select);\r
+               var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');\r
+               var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;\r
+               for(var i=0; i<elements.length; i++) {\r
+                       result = tagName? elements[i].all.tags(tagName):elements[i].all; \r
+                       for(var j=0; j<result.length; j++) {\r
+                               node = result[j];\r
+                               if(classReg && !classReg.test(node.className)) continue;\r
+                               nodes[nodes.length] = node;\r
+                       }\r
+               }       \r
+               \r
+               return nodes;\r
+       }\r
+</script>
\ No newline at end of file