From b84cb83388c0408540db528ac4b80e9bebf4d642 Mon Sep 17 00:00:00 2001
From: Lorenzo Tilve <ltilve@igalia.com>
Date: Thu, 2 Jul 2009 16:24:08 +0200
Subject: [PATCH]  ItEr15S12RFComportamentoGraficoPlanificadorItEr14S13:
 Translation timetracker grid to native components

---
 .../resources/web/ganttz/zul/timetracker.zul  |  75 +++++-------
 .../main/resources/web/js/ganttz/tasklist.js  | 111 ++++++++++--------
 .../main/webapp/common/layout/template.zul    |   2 +-
 .../planner/css/productionmanagement.css      | 105 +++++++++--------
 4 files changed, 155 insertions(+), 138 deletions(-)

diff --git a/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/timetracker.zul b/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/timetracker.zul
index bc3aff119..340029161 100644
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/timetracker.zul
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/timetracker.zul
@@ -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>
-
-</zk>
+</div>
+</zk>
\ No newline at end of file
diff --git a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js
index 6511ecb30..b01a5df84 100644
--- a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js
+++ b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js
@@ -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";
-
 }
\ No newline at end of file
diff --git a/navalplanner-webapp/src/main/webapp/common/layout/template.zul b/navalplanner-webapp/src/main/webapp/common/layout/template.zul
index 73f91a238..5842789ac 100644
--- a/navalplanner-webapp/src/main/webapp/common/layout/template.zul
+++ b/navalplanner-webapp/src/main/webapp/common/layout/template.zul
@@ -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')}">
diff --git a/navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css b/navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css
index 13e30f35c..fe74b4f6f 100644
--- a/navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css
+++ b/navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css
@@ -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 */
+}
\ No newline at end of file