Merge pull request #130 from dgray16/master

Rows alignment for browsers

ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRow.zul

@@ -19,7 +19,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<treerow sclass="taskdetail_grid">
+<treerow sclass="taskdetail-grid">
     <treecell hflex="min">
         <textbox ctrlKeys="#down#up" hflex="1" sclass="task-name" />
     </treecell>

ganttzk/src/main/resources/web/ganttz/zul/leftTasksTreeRowLabels.zul

@@ -19,7 +19,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<treerow sclass="taskdetail_grid taskdetail-company-view">
+<treerow sclass="taskdetail-grid taskdetail-company-view">
 
     <treecell>
         <label sclass="task_title"/>

ganttzk/src/main/resources/web/js/ganttz/DependencyComponent.js

@@ -1,41 +1,53 @@
 zk.$package("ganttz");
 
-ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
+ganttz.DependencyComponentBase = zk.$extends(
+    zul.Widget,
+    {
         $define : {
             idTaskOrig : null,
             idTaskEnd : null,
             dependencyType : null
         },
+
         bind_ : function(){
             this.$supers('bind_', arguments);
             this.setupArrow_();
         },
+
         setCSSClass: function(newClass) {
             this.$n().setAttribute("class", newClass);
         },
-    draw : function(){throw "draw method must be overwriten by extending classes"},
+
-    drawArrow_ : function(coordOrig, coordDest){
+        draw : function() {
-        switch(this.getDependencyType())
+            throw "draw method must be overwriten by extending classes"
-        {
+        },
+
+        drawArrow_ : function(coordOrig, coordDest) {
+            switch(this.getDependencyType()) {
                 case this.$class.START_START:
                     this._drawArrowStartStart(coordOrig, coordDest);
                     break;
+
                 case this.$class.END_END:
                     this._drawArrowEndEnd(coordOrig, coordDest);
                     break;
+
                 case this.$class.END_START:
                 default:
                     this._drawArrowEndStart(coordOrig, coordDest);
             }
         },
-    _drawArrowStartStart : function(coordOrig, coordDest){
+
-        var yorig = coordOrig.top -
+        _drawArrowStartStart : function(coordOrig, coordDest) {
-                    ganttz.TaskComponent.CORNER_WIDTH/2 +
+            var yorig = coordOrig.top - ganttz.TaskComponent.CORNER_WIDTH/2 + this.$class.HALF_DEPENDENCY_PADDING;
-                    this.$class.HALF_DEPENDENCY_PADDING;
             var xorig = coordOrig.left - this.$class.HALF_DEPENDENCY_PADDING;
             var xend = coordDest.left + this.$class.HALF_DEPENDENCY_PADDING;
             var yend = coordDest.top - this.$class.HALF_DEPENDENCY_PADDING;
-        if (yend < yorig) yorig = coordOrig.top + this.$class.DEPENDENCY_PADDING;
+
+            if (yend < yorig) {
+                yorig = coordOrig.top + this.$class.DEPENDENCY_PADDING;
+            }
+
 
             var width1 = ganttz.TaskComponent.CORNER_WIDTH;
             var width2 = Math.abs(xend - xorig) + ganttz.TaskComponent.CORNER_WIDTH;
@@ -48,14 +60,16 @@ ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
 
             // First segment
             var depstart = this._findImageElement('start');
-        depstart.css({    top : yorig,
+            depstart.css({
+                top : yorig,
                 left : (xorig - width1),
                 width : width1 ,
-                        display : 'inline'})
+                display : 'inline'
+            });
 
             // Second segment
             var depmid = this._findImageElement('mid');
-        var depmidcss = {left : depstart.css('left'), height : height};
+            var depmidcss = { left : depstart.css('left'), height : height };
 
             if (yend > yorig) {
                 depmidcss.top = yorig;
@@ -67,16 +81,19 @@ ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
 
             // Third segment
             var depend = this._findImageElement('end');
-        depend.css({    top : yend,
+            depend.css({
+                top : yend,
                 left : depstart.css('left'),
-                        width : width2 - ganttz.TaskComponent.HALF_HEIGHT});
+                width : width2 - ganttz.TaskComponent.HALF_HEIGHT
+            });
 
             var deparrow = this._findImageElement('arrow');
             deparrow.removeClass("point-north point-south point-west");
             deparrow.addClass("point-east");
             deparrow.css({top : (yend - ganttz.TaskComponent.HALF_HEIGHT),left : xend - 15});
         },
-    _drawArrowEndEnd : function(coordOrig, coordDest){
+
+        _drawArrowEndEnd : function(coordOrig, coordDest) {
             var xorig = coordOrig.left - this.$class.DEPENDENCY_PADDING;
             var yorig = coordOrig.top - ganttz.TaskComponent.CORNER_WIDTH/2 + this.$class.HALF_DEPENDENCY_PADDING;
             var xend = coordDest.left + this.$class.HALF_DEPENDENCY_PADDING;
@@ -93,7 +110,8 @@ ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
 
             // First segment
             var depstart = this._findImageElement('start');
-        var depstartcss = {left : xorig, width : width1, display : 'inline'}
+            var depstartcss = { left : xorig, width : width1, display : 'inline' };
+
             if (yend > yorig)
                 depstartcss.top = yorig ;
             else
@@ -103,7 +121,8 @@ ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
 
             // Second segment
             var depmid = this._findImageElement('mid');
-        var depmidcss = {left : (xorig + width1), height : height};
+            var depmidcss = { left : (xorig + width1), height : height };
+
             if (yend > yorig) {
                 depmidcss.top = yorig;
             } else {
@@ -114,9 +133,11 @@ ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
 
             // Third segment
             var depend = this._findImageElement('end');
-        depend.css({    left : (xorig + width1 - width2),
+            depend.css({
+                left : (xorig + width1 - width2),
                 top:yend,
-                        width:width2 });
+                width:width2
+            });
 
 
             var deparrow = this._findImageElement('arrow');
@@ -124,7 +145,8 @@ ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
             deparrow.addClass("point-west");
             deparrow.css({top : yend - 5, left : xend - 8});
         },
-    _drawArrowEndStart : function(coordOrig, coordDest){
+
+        _drawArrowEndStart : function(coordOrig, coordDest) {
             var xorig = coordOrig.left - this.$class.DEPENDENCY_PADDING;
             var yorig = coordOrig.top - this.$class.HALF_DEPENDENCY_PADDING;
             var xend = coordDest.left - this.$class.DEPENDENCY_PADDING;
@@ -141,17 +163,21 @@ ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
             var depmid = this._findImageElement('mid');
             var depmidcss;
 
-        if (yend > yorig)
+            if (yend > yorig) {
-            depmidcss = {top : yorig, height : yend - yorig};
+                depmidcss = { top : yorig, height : yend - yorig };
-        else
+            }
-            depmidcss = {top : yend, height : (yorig - yend)};
+            else {
+                depmidcss = { top : yend, height : (yorig - yend) };
+            }
+
 
             depmidcss.left = xorig;
             depmid.css(depmidcss);
 
             var depend = this._findImageElement('end');
-        var dependcss = {top : yend, left : xorig, width : width};
+            var dependcss = { top : yend, left : xorig, width : width };
-        if(width < 0) {
+
+            if (width < 0) {
                 dependcss.left = xend;
                 dependcss.width = Math.abs(width);
             }
@@ -159,10 +185,12 @@ ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
 
             var deparrow = this._findImageElement('arrow');
             var deparrowcss;
+
             if ( width == 0 ) {
                 deparrow.removeClass("point-north point-west point-east");
                 deparrow.addClass("point-south");
-            deparrowcss = {top : (yend - 10) , left : (xend - 5)};
+                deparrowcss = { top : (yend - 10) , left : (xend - 5) };
+
                 if ( yorig > yend ) {
                     deparrow.removeClass("point-west point-south point-east");
                     deparrow.addClass("point-north");
@@ -180,55 +208,65 @@ ganttz.DependencyComponentBase = zk.$extends(zul.Widget,{
             }
             deparrow.css(deparrowcss);
         },
-    findPos_ : function(element){
+
+        findPos_ : function(element) {
             var pos1 = jq('#listdependencies').offset();
             var pos2 = element.offset();
-        return {left : (pos2.left - pos1.left), top : (pos2.top - pos1.top)};
+            return { left : (pos2.left - pos1.left), top : (pos2.top - pos1.top) };
         },
+
         _findImageElement : function(name) {
             return jq('.' + name + '', this.$n());
         },
-    setupArrow_ : function(){
+
+        setupArrow_ : function() {
             var image_data = [ "start" , "mid" , "end", "arrow" ] ;
             var imgDiv;
             var insertPoint = jq(this.$n());
+
             for ( var i = 0; i < image_data.length; i++) {
                 imgDiv = jq(document.createElement('div'));
                 imgDiv.attr('class', image_data[i]);
-
                 insertPoint.append(imgDiv);
             }
         }
-},{
+    },
+
+    {
         END_END : "END_END",
         END_START : "END_START",
         START_START : "START_START",
         HALF_DEPENDENCY_PADDING : 2,
         DEPENDENCY_PADDING : 4,
         DRAGABLE_PADDING : 20, // Drag padding for dependency creation
-    getImagesDir : function(){
+        getImagesDir : function() {
             return "/" + common.Common.webAppContextPath() + "/zkau/web/ganttz/img/";
         }
-})
+    });
 
-ganttz.DependencyComponent = zk.$extends(ganttz.DependencyComponentBase,{
+ganttz.DependencyComponent = zk.$extends(
+    ganttz.DependencyComponentBase,
+    {
         $define : {
             idTaskOrig : null,
             idTaskEnd : null,
             dependencyType : null
         },
-    bind_ : function(){
+
+        bind_ : function() {
             this.$supers('bind_', arguments);
-        //this.setupArrow_();
+
-        /*maybe move this listener to the $init method*/
+            /* TODO Maybe move this listener to the $init method */
             YAHOO.util.Event.onDOMReady(this.proxy(function() {
                 this.draw();
             }));
         },
+
         draw : function() {
             this._withOriginAndDestination(function(origin, destination) {
                 var orig = this.findPos_(origin);
                 var dest = this.findPos_(destination);
+
                 // This corner case may depend on dependence type
                 var offsetX = origin.outerWidth() - ganttz.TaskComponent.CORNER_WIDTH;
                 var separation = orig.left + origin.outerWidth() - dest.left;
@@ -236,8 +274,7 @@ ganttz.DependencyComponent = zk.$extends(ganttz.DependencyComponentBase,{
                 if (separation > 0) {
                     offsetX = offsetX - separation;
                 }
-            if (this.getDependencyType() == this.$class.END_START
+                if (this.getDependencyType() == this.$class.END_START || this.getDependencyType() == null) {
-                    || this.getDependencyType() == null) {
                     orig.left = orig.left + Math.max(0, offsetX);
                 } else if (this.getDependencyType() == this.$class.END_END) {
                     orig.left = orig.left + origin.outerWidth();
@@ -254,87 +291,98 @@ ganttz.DependencyComponent = zk.$extends(ganttz.DependencyComponentBase,{
                 this.drawArrow_(orig, dest);
             });
         },
+
         _withOriginAndDestination : function(f) {
             f.call(this, jq('#' + this.getIdTaskOrig()), jq('#' + this.getIdTaskEnd()));
         }
-},{});
+    },
+    {
 
-ganttz.UnlinkedDependencyComponent = zk.$extends(ganttz.DependencyComponentBase,{
+    });
-    $init : function(){
+
+ganttz.UnlinkedDependencyComponent = zk.$extends(
+    ganttz.DependencyComponentBase,
+    {
+        $init : function() {
             this.$supers('$init', arguments);
             this._DOMlisttasks = jq('#listtasks');
             this._DOMlistdependencies = jq('#listdependencies');
             this._WGTganttpanel = ganttz.GanttPanel.getInstance();
         },
-    bind_ : function(){
+
+        bind_ : function() {
             this.$supers('bind_', arguments);
-        /*We use document.documentElement as the DOM element to attach this listener
+            /*
-         * because document.documentElement always gets the key events (in all browsers)*/
+             * We use document.documentElement as the DOM element to attach this listener
+             * because document.documentElement always gets the key events (in all browsers)
+             */
             this.domListen_(document.documentElement,'onKeyup','_handleKeyUp');
             this._updateArrow();
         },
-    unbind_ : function(){
+
+        unbind_ : function() {
             this.domUnlisten_(document.documentElement,'onKeyup','_handleKeyUp');
             this.domUnlisten_(this._WGTganttpanel.$n(), 'onMousemove', '_updateArrow');
             this.domUnlisten_(this._WGTganttpanel.$n(), 'onClick', '_consolidateDependency');
             this.$supers('unbind_', arguments);
         },
-    draw : function(){
+
+        draw : function() {
             this.domListen_(this._WGTganttpanel.$n(), 'onMousemove', '_updateArrow');
             this.domListen_(this._WGTganttpanel.$n(), 'onClick', '_consolidateDependency');
         },
-    setOrigin : function(origin){
+
+        setOrigin : function(origin) {
             this._DOMorigin = jq(origin);
             this._WGTorigin = ganttz.TaskComponent.$(origin.id);
         },
-    _consolidateDependency : function(){
+
+        _consolidateDependency : function() {
             var dependency =  null;
-        if ((dependency = this._isOverTask()) != null){
+            if ((dependency = this._isOverTask()) != null) {
                 this._WGTorigin.consolidateNewDependency(dependency);
             }
-        /* We remove the dependency line. If the user clicked over a
+            /* We remove the dependency line. If the user clicked over a task, a new dependecy line will be created. */
-         * task, a new dependecy line will be created */
             ganttz.DependencyList.getInstance().removeChild(this);
         },
+
         _isOverTask : function() {
             var tasksOver = jq.grep(ganttz.TaskComponent.allTaskComponents(), function(task) {
                 return task.mouseOverTask;
             });
-        if (tasksOver.length > 0) {
+            return tasksOver.length > 0 ? tasksOver[0] : null;
-            return tasksOver[0];
-        }
-        return null;
         },
+
         _getCoordOrigin: function() {
             if (this._coordOrigin) {
                 return this._coordOrigin;
             }
 
             var coordOrigin = this.findPos_(this._DOMorigin);
-        coordOrigin.left = coordOrigin.left
+            coordOrigin.left = coordOrigin.left + Math.max(0, this._DOMorigin.outerWidth() - ganttz.TaskComponent.CORNER_WIDTH);
-                + Math.max(0, this._DOMorigin.outerWidth()
-                              - ganttz.TaskComponent.CORNER_WIDTH);
             coordOrigin.top = coordOrigin.top + ganttz.TaskComponent.HEIGHT;
 
             return this._coordOrigin = coordOrigin;
         },
-    _updateArrow : function(event){
+
+        _updateArrow: function () {
             this.drawArrow_(this._getCoordOrigin(), this._findCoordsForMouse());
         },
+
         _findCoordsForMouse: function() {
             var reference =  jq('#listdependencies').offset();
-        return {left : this._WGTganttpanel.getXMouse() - reference.left,
+            return { left : this._WGTganttpanel.getXMouse() - reference.left, top: this._WGTganttpanel.getYMouse() - reference.top };
-            top: this._WGTganttpanel.getYMouse() - reference.top};
         },
-    _handleKeyUp: function(event){
-        if ( event.keyCode != 27 )
-            return;
 
+        _handleKeyUp: function(event) {
+            if ( event.keyCode != 27 ) {
+                return;
+            }
             event.stop();
             ganttz.DependencyList.getInstance().removeChild(this);
         }
-})
+    });
 
-zk.afterLoad('ganttz',function(){
+zk.afterLoad('ganttz',function() {
     ganttz.UnlinkedDependencyComponent.molds = ganttz.DependencyComponent.molds;
-})
+});

ganttzk/src/main/resources/web/js/ganttz/TaskList.js

@@ -1,30 +1,38 @@
 zk.$package("ganttz");
 
-ganttz.TaskList = zk.$extends(zk.Widget, {
+ganttz.TaskList = zk.$extends(
-    $init : function(){
+    zk.Widget,
+    {
+        $init : function() {
             this.$supers('$init', arguments);
             this.$class.setInstance(this);
         },
-    showAllTaskLabels : function(){
+
-        for(var child = this.firstChild; child; child = child.nextSibling)
+        showAllTaskLabels : function() {
+            for (var child = this.firstChild; child; child = child.nextSibling)
                 child.showLabels();
         },
-    hideAllTaskLabels : function(){
+
-        for(var child = this.firstChild; child; child = child.nextSibling)
+        hideAllTaskLabels : function() {
+            for (var child = this.firstChild; child; child = child.nextSibling)
                 child.hideLabels();
         },
-    showResourceTooltips : function(){
+
-        for(var child = this.firstChild; child; child = child.nextSibling)
+        showResourceTooltips : function() {
+            for (var child = this.firstChild; child; child = child.nextSibling)
                 child.showResourceTooltip();
         },
-    hideResourceTooltips : function(){
+
+        hideResourceTooltips : function() {
             for(var child = this.firstChild; child; child = child.nextSibling)
                 child.hideResourceTooltip();
         },
+
         legendResize : function() {
             var taskdetailsContainer = jq('.taskdetailsContainer')[0];
-        jq('.legend-container').width(taskdetailsContainer.clientWidth-75);
+            jq('.legend-container').width(taskdetailsContainer.clientWidth - 75);
         },
+
         refreshTooltips : function() {
             if (jq('.show-resources').hasClass('clicked')) {
                 this.showResourceTooltips();
@@ -33,12 +41,14 @@ ganttz.TaskList = zk.$extends(zk.Widget, {
                 this.showAllTaskLabels();
             }
         }
-
+    },
-},{//Class stuff
+    {
-    setInstance : function(instance){
+        // Class stuff
+        setInstance : function(instance) {
             this.instance = instance;
         },
+
         getInstance    : function(){
             return this.instance;
         }
-});
+    });

libreplan-webapp/pom.xml

@@ -354,11 +354,6 @@
             <artifactId>zk</artifactId>
         </dependency>
 
-        <dependency>
-            <groupId>org.zkoss.common</groupId>
-            <artifactId>zcommon</artifactId>
-        </dependency>
-
         <!-- LibrePlan ZK Components  -->
         <dependency>
             <groupId>org.libreplan</groupId>

libreplan-webapp/src/main/webapp/common/css/libreplan_zk.css

@@ -1014,10 +1014,6 @@ span.z-dottree-line {
     height: 35px;
 }
 
-.taskdetail-company-view .clickable-rows {
-    margin-left: 5px;
-}
-
 .z-button.perspective,
 .z-button.perspective-active {
     padding-top: 60px;

libreplan-webapp/src/main/webapp/planner/css/ganttzk.css

@@ -96,7 +96,7 @@
     overflow:visible;
 }
 
-.listdetails .taskdetail_grid {
+.listdetails .taskdetail-grid {
     height: 23px;
 }
 
@@ -111,7 +111,7 @@
 }
 
 
-.taskdetail_grid table {
+.taskdetail-grid table {
     height: 30px;
     width: 285px; /* Ganntz.ListdetailsWidth */
 }
@@ -122,9 +122,13 @@
     padding-left: 4px;
 }
 
-.taskdetail-company-view .z-tree-ico  {
+.taskdetail-company-view .z-tree-line  {
     display:none;
+}
 
+/* Order name will be in single row */
+.taskdetail-company-view .z-label {
+    white-space: nowrap;
 }
 
 .order-startdate, .order-enddate  {
@@ -157,7 +161,15 @@
 .row {
     height: 12px;
     border-bottom: dotted 1px #CCCCCC;
-    margin-bottom: 10px;
+    margin-bottom: 9px;
+    margin-top: 9px;
+    width: 100%;
+}
+
+.parentProjectScheduling .row {
+    height: 12px;
+    border-bottom: dotted 1px #CCCCCC;
+    margin-bottom: 12px;
     margin-top: 10px;
     width: 100%;
 }
@@ -607,7 +619,7 @@ tr.z-vbox-separator {
     height: 10px;
     border: 1px;
     width: 100%;
-    margin-bottom: 12px;
+    margin-bottom: 10px;
     margin-top: 10px;
     border-bottom: 1px dotted #CCCCCC;
 }
@@ -778,7 +790,7 @@ tr.z-vbox-separator {
 }
 
 .limitingresources-list .row_resourceload {
-    height: 24px;
+    height: 25px;
 }
 
 .limiting-resources .z-tree-line {
@@ -1432,17 +1444,35 @@ div.z-grid-header .second_level_ tr {
     font-size: 12px;
 }
 
+/* Workaround for Chrome */
+@supports (-webkit-appearance: none) {
+    .z-treerow.z-treerow-selected > .z-treecell > .z-treecell-content,
+    .z-treerow.z-treerow > .z-treecell > .z-treecell-content {
+        color: black;
+    }
+}
+
+/* Workaround for FireFox */
+_:-moz-tree-row(hover),
 .z-treerow.z-treerow-selected > .z-treecell > .z-treecell-content,
 .z-treerow.z-treerow > .z-treecell > .z-treecell-content {
     color: black;
 }
 
-.taskdetail_grid .z-treecell .z-treecell-content {
+/* Workaround for FireFox */
+_:-moz-tree-row(hover),
+.z-treerow.z-treerow-selected > .z-treecell > .z-treecell-content,
+.parentProjectScheduling .z-treerow.z-treerow > .z-treecell > .z-treecell-content {
+    height: 21px;
+    padding-top: 3px;
+}
+
+.taskdetail-grid .z-treecell .z-treecell-content {
     display: inline-flex;
     width: 100%;
 }
 
-.taskdetail_grid.taskdetail-company-view .z-treecell .z-treecell-content {
+.taskdetail-grid.taskdetail-company-view .z-treecell .z-treecell-content {
     display: inline-table;
     width: 100%;
 }

pom.xml

@@ -166,12 +166,6 @@
             <id>thirdparty</id>
             <url>http://nexus.libreplan.org/nexus/content/repositories/thirdparty-libreplan16/</url>
         </repository>
-
-        <!-- ZK CE repository -->
-        <repository>
-            <id>ZK CE</id>
-            <url>http://mavensync.zkoss.org/maven2/</url>
-        </repository>
     </repositories>
 
     <!-- Dependency management -->
@@ -469,19 +463,6 @@
                 </exclusions>
             </dependency>
 
-            <dependency>
-                <groupId>org.zkoss.common</groupId>
-                <artifactId>zcommon</artifactId>
-                <version>8.0.1.1</version>
-                <exclusions>
-                    <exclusion>
-                        <groupId>org.slf4j</groupId>
-                        <artifactId>slf4j-jdk14</artifactId>
-                    </exclusion>
-                </exclusions>
-            </dependency>
-
-
             <!-- JGraphT -->
             <dependency>
                 <groupId>org.jgrapht</groupId>