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