ItEr15S12RFComportamentoGraficoPlanificadorItEr14S13: Translation timetracker grid to native components
This commit is contained in:
Lorenzo Tilve
Javier Moran Rua
parent
a369e294a3
commit
b84cb83388
4 changed files with 155 additions and 138 deletions
|
|
@ -1,56 +1,45 @@
|
|||
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
|
||||
<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
|
||||
|
||||
<zscript><![CDATA[
|
||||
top = self;
|
||||
<zscript><![CDATA[
|
||||
top = self;
|
||||
]]>
|
||||
</zscript>
|
||||
|
||||
<style dynamic="true">
|
||||
tr.z-vbox-sep {
|
||||
height: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<n:div id="timetracker">
|
||||
|
||||
<vbox>
|
||||
<hbox>
|
||||
<button image="/zkau/web/ganttz/img/zoom_in.gif" forward="onIncrease"/>
|
||||
<button image="/zkau/web/ganttz/img/zoom_out.gif" forward="onDecrease"/>
|
||||
</hbox>
|
||||
|
||||
<div>
|
||||
<grid>
|
||||
<columns>
|
||||
<column label="${each.name}" width="${each.size}px" forEach="${top.detailsFirstLevel}"></column>
|
||||
</columns>
|
||||
<n:div id="timetracker">
|
||||
<vbox>
|
||||
|
||||
</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>
|
||||
<n:div id="zoom_buttons">
|
||||
<hbox>
|
||||
<button image="/zkau/web/ganttz/img/zoom_in.gif" forward="onIncrease"/>
|
||||
<button image="/zkau/web/ganttz/img/zoom_out.gif" forward="onDecrease"/>
|
||||
</hbox>
|
||||
</n:div>
|
||||
|
||||
<rows>
|
||||
<row id="fake_row" style="height: 100px;" class="fake_column timetracker_column${(each.even?'_myeven':'')}">
|
||||
<div class="fake_column timetracker_column${(each.even?'_even':'')}" style="height: 100px;" forEach="${top.detailsSecondLevel}" />
|
||||
</row>
|
||||
</rows>
|
||||
<grid>
|
||||
<columns>
|
||||
<column label="${each.name}" width="${each.size}px"
|
||||
forEach="${top.detailsFirstLevel}"></column>
|
||||
</columns>
|
||||
</grid>
|
||||
|
||||
</grid>
|
||||
</div>
|
||||
<n:div class="z-grid-header">
|
||||
<n:table style="width: ${top.horizontalSize+2}px;" class="second_level_">
|
||||
|
||||
<zscript><![CDATA[
|
||||
top.fakeRow = fake_row;
|
||||
]]>
|
||||
</zscript>
|
||||
<n:tr class="z-columns">
|
||||
<n:th class="z-column" forEach="${top.detailsSecondLevel}">
|
||||
${each.name}
|
||||
</n:th>
|
||||
</n:tr>
|
||||
<n:tr id="watermark" style="height:100px">
|
||||
<n:td class="timetracker_column${(each.even?'_even':'')}"
|
||||
forEach="${top.detailsSecondLevel}"></n:td>
|
||||
</n:tr>
|
||||
</n:table>
|
||||
</n:div>
|
||||
|
||||
</vbox>
|
||||
</vbox>
|
||||
|
||||
</n:div>
|
||||
|
||||
</div>
|
||||
</zk>
|
||||
|
|
@ -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;
|
||||
|
||||
MIN_RESOLUTION_X = 600;
|
||||
MIN_RESOLUTION_Y = 600;
|
||||
MIN_RESOLUTION_X = 600; // Minimun horizontal autoresizable window
|
||||
MIN_RESOLUTION_Y = 600; // Minimun vertical autoresizable window
|
||||
|
||||
TASKDETAILS_WIDTH = 300
|
||||
TIMETRACKER_OFFSET_TOP = 200
|
||||
SCROLLBAR_WIDTH = 15
|
||||
|
||||
|
||||
zkTasklist = {};
|
||||
TASKDETAILS_WIDTH = 300; // Taskdetails column width
|
||||
TASKDETAILS_HEIGHT = 300;
|
||||
TIMETRACKER_OFFSET_TOP = 200 // Design-relative height above timetracker
|
||||
SCROLLBAR_WIDTH = 15; // Scrollbars default width
|
||||
|
||||
zkTasklist.init = function(cmp) {
|
||||
zkTasklist.adjust_height(cmp);
|
||||
|
|
@ -32,79 +38,88 @@ zkTasklist.adjust_height = function(cmp) {
|
|||
if (component_to_adjust) {
|
||||
setHeight(component_to_adjust);
|
||||
}
|
||||
var found = YAHOO.util.Selector.query(".fake_column", component_to_adjust,
|
||||
false);
|
||||
found.each( function(element) {
|
||||
setHeight(element,HEIGHT_PER_ROW);
|
||||
});
|
||||
|
||||
adjustScrollableDimensions();
|
||||
}
|
||||
|
||||
|
||||
//document.getElementById('scroll-container').onscroll = scrollEvent;
|
||||
document.getElementById('ganttpanel_scroller_x').onscroll = scrollEvent;
|
||||
function scrollEvent() {
|
||||
//scroller = document.getElementById('scroll-container');
|
||||
scroller = document.getElementById('ganttpanel_scroller_x');
|
||||
// Simultaneous timetracker and canvas horizontal scroll
|
||||
document.getElementById('ganttpanel_scroller_x').onscroll = function() {
|
||||
scroller = document.getElementById('ganttpanel_scroller_x');
|
||||
document.getElementById('timetracker').scrollLeft = scroller.scrollLeft;
|
||||
document.getElementById('scroll_container').scrollLeft = scroller.scrollLeft;
|
||||
}
|
||||
|
||||
|
||||
// Simultaneous listdetails and canvas vertical scroll
|
||||
// Pending to listen to container onwheel scroll move
|
||||
document.getElementById('ganttpanel_scroller_y').onscroll = function() {
|
||||
offset = document.getElementById('ganttpanel_scroller_y').scrollTop;
|
||||
document.getElementById('listdetails_container').scrollTop = offset;
|
||||
document.getElementById('scroll_container').scrollTop = offset;
|
||||
}
|
||||
|
||||
document.getElementById('ganttpanel_scroller_y').onscroll = scrollEvent_y;
|
||||
function scrollEvent_y() {
|
||||
//scroller = document.getElementById('scroll-container');
|
||||
scroller = document.getElementById('ganttpanel_scroller_y');
|
||||
document.getElementById('listdetails_container').scrollTop = scroller.scrollTop ;
|
||||
document.getElementById('scroll_container').scrollTop = scroller.scrollTop ;
|
||||
}
|
||||
// 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.onload = relocateScrolls;
|
||||
// document.body.onresize = relocateScrolls;
|
||||
/*
|
||||
* Move scrollbars to locate them on left and bottom window borders
|
||||
*/
|
||||
function relocateScrolls() {
|
||||
|
||||
scroller_y = document.getElementById('ganttpanel_scroller_y');
|
||||
scroller_x = document.getElementById('ganttpanel_scroller_x');
|
||||
timetracker = document.getElementById('timetracker');
|
||||
listdetails = document.getElementById('listdetails_container');
|
||||
scroll_container = document.getElementById('scroll_container');
|
||||
|
||||
|
||||
// Reposition scroll-y and scroll-x width (Width change)
|
||||
// Shift scroll-y and scroll-x width (Width change)
|
||||
if ( window.innerWidth > MIN_RESOLUTION_X ) {
|
||||
scroller_y.style["left"] =
|
||||
(window.innerWidth - SCROLLBAR_WIDTH*2) +"px";
|
||||
scroller_x.style["width"] =
|
||||
(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 ) {
|
||||
scroller_x.style["top"] = (window.innerHeight - SCROLLBAR_WIDTH*2) +"px";
|
||||
scroller_y.style["height"] = (window.innerHeight - TASKDETAILS_WIDTH ) +"px";
|
||||
|
||||
timetracker.style["height"] = (window.innerHeight - TIMETRACKER_OFFSET_TOP ) +"px";
|
||||
|
||||
scroller_y.style["height"] = (window.innerHeight - TASKDETAILS_HEIGHT ) +"px";
|
||||
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 */
|
||||
|
||||
adjustScrolls();
|
||||
adjustScrollableDimensions();
|
||||
}
|
||||
|
||||
/*
|
||||
* 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('listdetails_container').scrollHeight + "px";
|
||||
|
||||
document.getElementById('ganttpanel_inner_scroller_x').style["width"]
|
||||
= document.getElementById('timetracker').scrollWidth + "px";
|
||||
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<n:div class="logo"></n:div>
|
||||
<n:div class="vision"></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">
|
||||
|
||||
<menu label="${c:l('mainmenu.plannification')}">
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
/* Planificator specific styles
|
||||
/*
|
||||
* ganttz.css Ganttz specific styles
|
||||
* /
|
||||
|
||||
The next constants are used within the planner styling:
|
||||
|
||||
LISTDETAILS_W = 280
|
||||
|
||||
HEIGHT_PER_ROW = 15;
|
||||
HEIGHT_TIME_TRACKER = 120;
|
||||
Ganntz.ListdetailsWidth = 280
|
||||
|
||||
zkTasklist.HEIGHT_PER_ROW = 15
|
||||
zkTasklist.HEIGHT_TIME_TRACKER = 120
|
||||
|
||||
zkTasklist.SCROLLBAR_WIDTH = 15
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/****** Tasks and dependencies ******/
|
||||
.listdetails {
|
||||
width:280px; /* LISTDETAILS_W */
|
||||
width:280px; /* Ganntz.ListdetailsWidth */
|
||||
float:left;
|
||||
margin-top: 0px;
|
||||
border-bottom: 1px solid #86A4BE;
|
||||
font-size:10px !important;
|
||||
font-size:10px !important;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
|
|
@ -32,27 +32,27 @@ HEIGHT_TIME_TRACKER = 120;
|
|||
}
|
||||
|
||||
.listdetails input {
|
||||
width: 80px;
|
||||
font-size:10px !important;
|
||||
border-bottom:0px;
|
||||
border-right:0px;
|
||||
height:17px;
|
||||
width: 80px;
|
||||
font-size:10px !important;
|
||||
border-bottom:0px;
|
||||
border-right:0px;
|
||||
height:17px;
|
||||
}
|
||||
|
||||
.listdetails .z-datebox-inp {
|
||||
font-family:"Verdana,Tahoma,Arial,Helvetica,sans-serif";
|
||||
font-size:10px !important;
|
||||
border-bottom:0px;
|
||||
border-right:0px;
|
||||
font-family:"Verdana,Tahoma,Arial,Helvetica,sans-serif";
|
||||
font-size:10px !important;
|
||||
border-bottom:0px;
|
||||
border-right:0px;
|
||||
}
|
||||
|
||||
.task_title {
|
||||
width: 120px !important;
|
||||
width: 120px !important;
|
||||
}
|
||||
|
||||
.taskdetail_grid table {
|
||||
height:30px;
|
||||
width:280px; /* LISTDETAILS_W */
|
||||
width:280px; /* Ganntz.ListdetailsWidth */
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ HEIGHT_TIME_TRACKER = 120;
|
|||
}
|
||||
|
||||
/* Task box properties */
|
||||
.yui-resize, .box {
|
||||
.box {
|
||||
border: 1px solid;
|
||||
text-align:center;
|
||||
vertical-align: middle;
|
||||
|
|
@ -81,7 +81,7 @@ HEIGHT_TIME_TRACKER = 120;
|
|||
width: 1800px;
|
||||
}
|
||||
|
||||
/* ---------- TaskGroup --------- */
|
||||
/* -------------- TaskGroup -------------- */
|
||||
.taskgroup_start {
|
||||
background-image: url("/navalplanner-webapp/zkau/web/ganttz/img/group_left.png");
|
||||
height: 10px;
|
||||
|
|
@ -90,7 +90,7 @@ HEIGHT_TIME_TRACKER = 120;
|
|||
}
|
||||
|
||||
.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;
|
||||
width: 10px;
|
||||
float:right;
|
||||
|
|
@ -104,7 +104,7 @@ HEIGHT_TIME_TRACKER = 120;
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/****** Dependencies *******/
|
||||
/* -------------- Dependencies -------------- */
|
||||
#listdependencies {
|
||||
position:relative;
|
||||
width:400px;
|
||||
|
|
@ -149,19 +149,17 @@ HEIGHT_TIME_TRACKER = 120;
|
|||
white-space:nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.zk #ganttpanel .z-button-cm {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* Width: ganttpanel constant,
|
||||
Height: is recalculated on number of tasks */
|
||||
#ganttpanel {
|
||||
height:400px; /* 800 */
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
|
||||
#ganttpanel table {
|
||||
float:left;
|
||||
padding:0;
|
||||
|
|
@ -173,14 +171,22 @@ Height: is recalculated on number of tasks */
|
|||
padding:0;
|
||||
}
|
||||
|
||||
.fake_column.timetracker_column_even {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
/* -------------- Timetracker -------------- */
|
||||
.timetracker_fake_row {
|
||||
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 {
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
|
|
@ -203,7 +209,7 @@ table {
|
|||
|
||||
#scroll_container {
|
||||
margin-top:70px;
|
||||
/* border:solid green 1px; */
|
||||
/* border:solid green 1px; */
|
||||
height:300px; /* Recalculate based on window */
|
||||
width:500px; /* Recalculate based on window */
|
||||
overflow:hidden;
|
||||
|
|
@ -214,15 +220,22 @@ table {
|
|||
}
|
||||
|
||||
#timetracker {
|
||||
/* border: solid 1px red; */
|
||||
position:absolute;
|
||||
left:300px;
|
||||
width:600px;
|
||||
height:400px;
|
||||
position:absolute;
|
||||
overflow-x:hidden;
|
||||
float:left;
|
||||
/* border: solid 1px red; */
|
||||
}
|
||||
width:600px;
|
||||
height:400px;
|
||||
position:absolute;
|
||||
overflow-x:hidden;
|
||||
float:left;
|
||||
}
|
||||
|
||||
|
||||
tr.z-vbox-sep {
|
||||
height: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
#ganttpanel_scroller_x, #ganttpanel_scroller_y {
|
||||
|
|
@ -239,9 +252,9 @@ table {
|
|||
}
|
||||
|
||||
#ganttpanel_inner_scroller_x {
|
||||
/* must be resized on ganttpanel javascript adjust size */
|
||||
width:1900px; /* Real canvas dimensions */
|
||||
height:15px; /* Scroll constant */
|
||||
/* must be resized on ganttpanel javascript adjust size */
|
||||
width:1900px; /* Real canvas dimensions */
|
||||
height:15px; /* Scroll constant */
|
||||
}
|
||||
|
||||
#ganttpanel_scroller_y {
|
||||
|
|
@ -251,6 +264,6 @@ table {
|
|||
height:330px;
|
||||
}
|
||||
#ganttpanel_inner_scroller_y {
|
||||
width:15px; /* Scroll constant */
|
||||
height:1350px; /* Modified when added or removed tasks, or zoom adjustments */
|
||||
width:15px; /* Scroll constant */
|
||||
height:1350px; /* Modified when added or removed tasks, or zoom adjustments */
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue