RenJuan/TASKPM
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ItEr15S12RFComportamentoGraficoPlanificadorItEr14S13: Translation timetracker grid to native components

Browse source
This commit is contained in:
Lorenzo Tilve 2009-07-02 16:24:08 +02:00 • committed by Javier Moran Rua
parent a369e294a3
commit b84cb83388
4 changed files with 155 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/timetracker.zul
View file

@ -1,56 +1,45 @@
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?> <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<zk xmlns:n="http://www.zkoss.org/2005/zk/native"> <zk xmlns:n="http://www.zkoss.org/2005/zk/native">
<zscript><![CDATA[ <zscript><![CDATA[
top = self; top = self;
]]> ]]>
</zscript> </zscript>
<style dynamic="true"> <div>
tr.z-vbox-sep {
height: 0px;
padding: 0px;
margin: 0px;
}
</style>
<n:div id="timetracker"> <n:div id="timetracker">
<vbox> <vbox>
<n:div id="zoom_buttons">
<hbox> <hbox>
<button image="/zkau/web/ganttz/img/zoom_in.gif" forward="onIncrease"/> <button image="/zkau/web/ganttz/img/zoom_in.gif" forward="onIncrease"/>
<button image="/zkau/web/ganttz/img/zoom_out.gif" forward="onDecrease"/> <button image="/zkau/web/ganttz/img/zoom_out.gif" forward="onDecrease"/>
</hbox> </hbox>
</n:div>
<div>
<grid> <grid>
<columns> <columns>
<column label="${each.name}" width="${each.size}px" forEach="${top.detailsFirstLevel}"></column> <column label="${each.name}" width="${each.size}px"
forEach="${top.detailsFirstLevel}"></column>
</columns> </columns>
</grid> </grid>
<grid style="width: ${top.horizontalSize+2}px;">
<columns>
<column label="${each.name}" class="timetracker_column${(each.even?'_even':'')}" width="${each.size}px" forEach="${top.detailsSecondLevel}"></column>
</columns>
<rows> <n:div class="z-grid-header">
<row id="fake_row" style="height: 100px;" class="fake_column timetracker_column${(each.even?'_myeven':'')}"> <n:table style="width: ${top.horizontalSize+2}px;" class="second_level_">
<div class="fake_column timetracker_column${(each.even?'_even':'')}" style="height: 100px;" forEach="${top.detailsSecondLevel}" />
</row>
</rows>
</grid> <n:tr class="z-columns">
</div> <n:th class="z-column" forEach="${top.detailsSecondLevel}">
${each.name}
<zscript><![CDATA[ </n:th>
top.fakeRow = fake_row; </n:tr>
]]> <n:tr id="watermark" style="height:100px">
</zscript> <n:td class="timetracker_column${(each.even?'_even':'')}"
forEach="${top.detailsSecondLevel}"></n:td>
</n:tr>
</n:table>
</n:div>
</vbox> </vbox>
</n:div> </n:div>
</div>
</zk> </zk>

109
navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js
View file

@ -1,15 +1,21 @@
HEIGHT_PER_ROW = 15; /**
* Javascript behaviuor for TaskList elements
* @author Javier Morán Rúa <jmoran@igalia.com>
* @author Óscar González Fernández <ogonzalez@igalia.com>
* @author Lorenzo Tilve Álvaro <ltilve@igalia.com>
*/
zkTasklist = {};
HEIGHT_PER_ROW = 15; // Ganttz task row height
HEIGHT_TIME_TRACKER = 120; HEIGHT_TIME_TRACKER = 120;
MIN_RESOLUTION_X = 600; MIN_RESOLUTION_X = 600; // Minimun horizontal autoresizable window
MIN_RESOLUTION_Y = 600; MIN_RESOLUTION_Y = 600; // Minimun vertical autoresizable window
TASKDETAILS_WIDTH = 300 TASKDETAILS_WIDTH = 300; // Taskdetails column width
TIMETRACKER_OFFSET_TOP = 200 TASKDETAILS_HEIGHT = 300;
SCROLLBAR_WIDTH = 15 TIMETRACKER_OFFSET_TOP = 200 // Design-relative height above timetracker
SCROLLBAR_WIDTH = 15; // Scrollbars default width
zkTasklist = {};
zkTasklist.init = function(cmp) { zkTasklist.init = function(cmp) {
zkTasklist.adjust_height(cmp); zkTasklist.adjust_height(cmp);
@ -32,79 +38,88 @@ zkTasklist.adjust_height = function(cmp) {
if (component_to_adjust) { if (component_to_adjust) {
setHeight(component_to_adjust); setHeight(component_to_adjust);
} }
var found = YAHOO.util.Selector.query(".fake_column", component_to_adjust,
false); adjustScrollableDimensions();
found.each( function(element) {
setHeight(element,HEIGHT_PER_ROW);
});
} }
//document.getElementById('scroll-container').onscroll = scrollEvent; // Simultaneous timetracker and canvas horizontal scroll
document.getElementById('ganttpanel_scroller_x').onscroll = scrollEvent; document.getElementById('ganttpanel_scroller_x').onscroll = function() {
function scrollEvent() {
//scroller = document.getElementById('scroll-container');
scroller = document.getElementById('ganttpanel_scroller_x'); scroller = document.getElementById('ganttpanel_scroller_x');
document.getElementById('timetracker').scrollLeft = scroller.scrollLeft; document.getElementById('timetracker').scrollLeft = scroller.scrollLeft;
document.getElementById('scroll_container').scrollLeft = scroller.scrollLeft; document.getElementById('scroll_container').scrollLeft = scroller.scrollLeft;
} }
document.getElementById('ganttpanel_scroller_y').onscroll = scrollEvent_y;
function scrollEvent_y() { // Simultaneous listdetails and canvas vertical scroll
//scroller = document.getElementById('scroll-container'); // Pending to listen to container onwheel scroll move
scroller = document.getElementById('ganttpanel_scroller_y'); document.getElementById('ganttpanel_scroller_y').onscroll = function() {
document.getElementById('listdetails_container').scrollTop = scroller.scrollTop ; offset = document.getElementById('ganttpanel_scroller_y').scrollTop;
document.getElementById('scroll_container').scrollTop = scroller.scrollTop ; document.getElementById('listdetails_container').scrollTop = offset;
document.getElementById('scroll_container').scrollTop = offset;
}
// Scroll panel when detected movements on listdetails container
document.getElementById('listdetails_container').onscroll = function() {
offset = document.getElementById('listdetails_container').scrollTop;
document.getElementById('scroll_container').scrollTop = offset;
document.getElementById('ganttpanel_scroller_y').scrollTop = offset;
} }
window.onresize = relocateScrolls; window.onresize = relocateScrolls;
window.onload = relocateScrolls; window.onload = relocateScrolls;
// document.body.onresize = relocateScrolls; /*
* Move scrollbars to locate them on left and bottom window borders
*/
function relocateScrolls() { function relocateScrolls() {
scroller_y = document.getElementById('ganttpanel_scroller_y'); scroller_y = document.getElementById('ganttpanel_scroller_y');
scroller_x = document.getElementById('ganttpanel_scroller_x'); scroller_x = document.getElementById('ganttpanel_scroller_x');
timetracker = document.getElementById('timetracker');
listdetails = document.getElementById('listdetails_container'); listdetails = document.getElementById('listdetails_container');
scroll_container = document.getElementById('scroll_container');
// Shift scroll-y and scroll-x width (Width change)
// Reposition scroll-y and scroll-x width (Width change)
if ( window.innerWidth > MIN_RESOLUTION_X ) { if ( window.innerWidth > MIN_RESOLUTION_X ) {
scroller_y.style["left"] = scroller_y.style["left"] =
(window.innerWidth - SCROLLBAR_WIDTH*2) +"px"; (window.innerWidth - SCROLLBAR_WIDTH*2) +"px";
scroller_x.style["width"] = scroller_x.style["width"] =
(window.innerWidth - TASKDETAILS_WIDTH - SCROLLBAR_WIDTH ) +"px"; (window.innerWidth - TASKDETAILS_WIDTH - SCROLLBAR_WIDTH ) +"px";
timetracker.style["width"] = (window.innerWidth - TASKDETAILS_WIDTH
- SCROLLBAR_WIDTH - SCROLLBAR_WIDTH*2 ) +"px";
scroll_container.style["width"] = timetracker.style["width"];
} }
// Reposition scroll-y and scroll-x width (Height change) // Shift scroll-y and scroll-x width (Height change)
if ( window.innerHeight > MIN_RESOLUTION_Y ) { if ( window.innerHeight > MIN_RESOLUTION_Y ) {
scroller_x.style["top"] = (window.innerHeight - SCROLLBAR_WIDTH*2) +"px"; scroller_x.style["top"] = (window.innerHeight - SCROLLBAR_WIDTH*2) +"px";
scroller_y.style["height"] = (window.innerHeight - TASKDETAILS_WIDTH ) +"px"; scroller_y.style["height"] = (window.innerHeight - TASKDETAILS_HEIGHT ) +"px";
timetracker.style["height"] = (window.innerHeight - TIMETRACKER_OFFSET_TOP ) +"px";
listdetails.style["height"] = scroller_y.style["height"]; listdetails.style["height"] = scroller_y.style["height"];
scroll_container.style["height"] = (window.innerHeight - TIMETRACKER_OFFSET_TOP - 90 ) +"px";
} }
/* FIX: Needed to recalculate native watermark td */ adjustScrollableDimensions();
adjustScrolls();
} }
/*
* Recalculate component dimensions
*/
function adjustScrollableDimensions() {
function adjustScrolls() { // Timetracker is recalculated when the window is resized and when zoom
// level is changed as the component is recreated
timetracker = document.getElementById('timetracker');
scroll_container = document.getElementById('scroll_container');
// Resize scroller inner divs to adapt scrollbars lenght timetracker.style["width"] =
(window.innerWidth - TASKDETAILS_WIDTH - SCROLLBAR_WIDTH*2 ) +"px";
scroll_container.style["width"] = timetracker.style["width"];
timetracker.style["height"] =
(window.innerHeight - TIMETRACKER_OFFSET_TOP ) +"px";
scroll_container.style["height"] =
(window.innerHeight - TIMETRACKER_OFFSET_TOP - 90 ) +"px";
// Watermark heigh also needs recalculations due to the recreation
document.getElementById('watermark').style["height"]
= (window.innerHeight - TIMETRACKER_OFFSET_TOP - 60 ) +"px";
// Inner divs need recalculation to adjust to new scroll displacement lenght
document.getElementById('ganttpanel_inner_scroller_y').style["height"] document.getElementById('ganttpanel_inner_scroller_y').style["height"]
= document.getElementById('listdetails_container').scrollHeight + "px"; = document.getElementById('listdetails_container').scrollHeight + "px";
document.getElementById('ganttpanel_inner_scroller_x').style["width"]
= document.getElementById('timetracker').scrollWidth + "px";
} }

2
navalplanner-webapp/src/main/webapp/common/layout/template.zul
View file

@ -4,7 +4,7 @@
<n:div class="logo"></n:div> <n:div class="logo"></n:div>
<n:div class="vision"></n:div> <n:div class="vision"></n:div>
</n:div> </n:div>
<menubar id="menubar" width="800px" top="0px" left="320px" <menubar id="menubar" width="65%" top="0px" left="320px"
ctrlKeys="^k#f2" onCtrlKey="doCtrlKey()" sclass="mainmenu"> ctrlKeys="^k#f2" onCtrlKey="doCtrlKey()" sclass="mainmenu">
<menu label="${c:l('mainmenu.plannification')}"> <menu label="${c:l('mainmenu.plannification')}">

57
navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css
View file

@ -1,21 +1,21 @@
/* Planificator specific styles /*
* ganttz.css Ganttz specific styles
* /
The next constants are used within the planner styling: The next constants are used within the planner styling:
LISTDETAILS_W = 280 Ganntz.ListdetailsWidth = 280
HEIGHT_PER_ROW = 15;
HEIGHT_TIME_TRACKER = 120;
zkTasklist.HEIGHT_PER_ROW = 15
zkTasklist.HEIGHT_TIME_TRACKER = 120
zkTasklist.SCROLLBAR_WIDTH = 15
*/ */
/****** Tasks and dependencies ******/ /****** Tasks and dependencies ******/
.listdetails { .listdetails {
width:280px; /* LISTDETAILS_W */ width:280px; /* Ganntz.ListdetailsWidth */
float:left; float:left;
margin-top: 0px; margin-top: 0px;
border-bottom: 1px solid #86A4BE; border-bottom: 1px solid #86A4BE;
@ -52,7 +52,7 @@ HEIGHT_TIME_TRACKER = 120;
.taskdetail_grid table { .taskdetail_grid table {
height:30px; height:30px;
width:280px; /* LISTDETAILS_W */ width:280px; /* Ganntz.ListdetailsWidth */
} }
@ -63,7 +63,7 @@ HEIGHT_TIME_TRACKER = 120;
} }
/* Task box properties */ /* Task box properties */
.yui-resize, .box { .box {
border: 1px solid; border: 1px solid;
text-align:center; text-align:center;
vertical-align: middle; vertical-align: middle;
@ -81,7 +81,7 @@ HEIGHT_TIME_TRACKER = 120;
width: 1800px; width: 1800px;
} }
/* ---------- TaskGroup --------- */ /* -------------- TaskGroup -------------- */
.taskgroup_start { .taskgroup_start {
background-image: url("/navalplanner-webapp/zkau/web/ganttz/img/group_left.png"); background-image: url("/navalplanner-webapp/zkau/web/ganttz/img/group_left.png");
height: 10px; height: 10px;
@ -90,7 +90,7 @@ HEIGHT_TIME_TRACKER = 120;
} }
.taskgroup_end { .taskgroup_end {
background-image: url("../../zkau/web/ganttz/img/group_right.png"); background-image: url("/navalplanner-webapp/zkau/web/ganttz/img/group_right.png");
height: 10px; height: 10px;
width: 10px; width: 10px;
float:right; float:right;
@ -104,7 +104,7 @@ HEIGHT_TIME_TRACKER = 120;
background-color: transparent !important; background-color: transparent !important;
} }
/****** Dependencies *******/ /* -------------- Dependencies -------------- */
#listdependencies { #listdependencies {
position:relative; position:relative;
width:400px; width:400px;
@ -149,19 +149,17 @@ HEIGHT_TIME_TRACKER = 120;
white-space:nowrap; white-space:nowrap;
} }
.zk #ganttpanel .z-button-cm { .zk #ganttpanel .z-button-cm {
border: 0px; border: 0px;
} }
/* Width: ganttpanel constant,
Height: is recalculated on number of tasks */
#ganttpanel { #ganttpanel {
height:400px; /* 800 */ height:400px; /* 800 */
width: 900px; width: 900px;
} }
#ganttpanel table { #ganttpanel table {
float:left; float:left;
padding:0; padding:0;
@ -173,14 +171,22 @@ Height: is recalculated on number of tasks */
padding:0; padding:0;
} }
.fake_column.timetracker_column_even { /* -------------- Timetracker -------------- */
background-color: #EEEEEE;
}
.timetracker_fake_row { .timetracker_fake_row {
height: 80px; height: 80px;
} }
#watermark .timetracker_column_even {
background-color: #EEEEEE;
}
.z-columns,.z-column {
font-size: 8px !important;
text-align: center;
padding:0 0 0 0 !important;
}
table { table {
margin:0px; margin:0px;
padding:0px; padding:0px;
@ -214,6 +220,7 @@ table {
} }
#timetracker { #timetracker {
/* border: solid 1px red; */
position:absolute; position:absolute;
left:300px; left:300px;
width:600px; width:600px;
@ -221,7 +228,13 @@ table {
position:absolute; position:absolute;
overflow-x:hidden; overflow-x:hidden;
float:left; float:left;
/* border: solid 1px red; */ }
tr.z-vbox-sep {
height: 0px;
padding: 0px;
margin: 0px;
} }