IDEMPIERE-230 Zk6: Improved menu tree appearance

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/desktop/DefaultDesktop.java

@@ -113,11 +113,11 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
 
         West w = new West();
         layout.appendChild(w);
-        w.setWidth("300px");
+        w.setSclass("desktop-left-column");
         w.setCollapsible(true);
         w.setSplittable(true);
         w.setTitle(Util.cleanAmp(Msg.getMsg(Env.getCtx(), "Menu")));
-        w.setFlex(true);
+        w.setFlex(false);
         w.addEventListener(Events.ON_OPEN, new EventListener<Event>() {
 			@Override
 			public void onEvent(Event event) throws Exception {

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/panel/MenuPanel.java

@@ -21,7 +21,6 @@ import java.util.ArrayList;
 import java.util.Enumeration;
 import java.util.Properties;
 
-import org.adempiere.webui.component.Checkbox;
 import org.adempiere.webui.component.ToolBarButton;
 import org.adempiere.webui.event.MenuListener;
 import org.adempiere.webui.exception.ApplicationException;
@@ -42,6 +41,7 @@ import org.zkoss.zul.Panel;
 import org.zkoss.zul.Panelchildren;
 import org.zkoss.zul.Toolbar;
 import org.zkoss.zul.Tree;
+import org.zkoss.zul.Treecell;
 import org.zkoss.zul.Treechildren;
 import org.zkoss.zul.Treecol;
 import org.zkoss.zul.Treecols;
@@ -90,13 +90,14 @@ public class MenuPanel extends Panel implements EventListener
     {
     	this.setWidth("100%");
     	this.setHeight("100%");
+    	this.setStyle("position: relative");
     	
         menuTree = new Tree();
         menuTree.setMultiple(false);
         menuTree.setId("mnuMain");
         menuTree.setWidth("100%");
         menuTree.setVflex(true);
-        menuTree.setSizedByContent(true);
+        menuTree.setSizedByContent(false);
         menuTree.setPageSize(-1); // Due to bug in the new paging functionality
         
         menuTree.setStyle("border: none");
@@ -162,6 +163,8 @@ public class MenuPanel extends Panel implements EventListener
             treeChildren.appendChild(treeitem);
             treeitem.setLabel(mChildNode.getName());
             treeitem.setTooltiptext(mChildNode.getDescription());
+            Treecell cell = (Treecell)treeitem.getTreerow().getFirstChild();
+            cell.setSclass("menu-treecell-cnt");
            
             if(mChildNode.getChildCount() != 0)
             {

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/panel/SidePanel.java

@@ -43,6 +43,7 @@ public class SidePanel extends Panel
         
         this.setWidth("100%");
         this.setHeight("100%");
+        this.setStyle("position: relative");
         this.appendChild(pnlMenu);        
     }
     

org.adempiere.ui.zk/theme/default/css/theme.css.dsp

@@ -99,6 +99,20 @@ html,body {
 	padding-right: 5px;
 }
 
+.desktop-header {
+	background-image: url(../images/header-bg.png);
+	background-repeat: repeat-x;
+	background-position: bottom left;
+	background-color: white;
+	width: 100%;
+	height: 35px;
+}
+
+.desktop-header-font {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 10px;
+}
+
 .disableFilter img {
 	opacity: 0.2;
 	filter: progid : DXImageTransform . Microsoft . Alpha(opacity = 20);
@@ -138,20 +152,6 @@ html,body {
 	padding: 0px 1px 0px 1px;
 }
 
-.desktop-header {
-	background-image: url(../images/header-bg.png);
-	background-repeat: repeat-x;
-	background-position: bottom left;
-	background-color: white;
-	width: 100%;
-	height: 35px;
-}
-
-.desktop-header-font {
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	font-size: 10px;
-}
-
 <%-- button --%>
 .action-button {
 	height: 32px;
@@ -194,6 +194,10 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none {
 	background-color: #E0EAF7;
 }
 
+.desktop-left-column {
+	width: 310px;
+}
+
 <%-- adwindow and form --%>
 .adform-content-none {
 	overflow: auto;
@@ -412,44 +416,19 @@ input:focus, textarea:focus, .z-combobox-inp:focus, z-datebox-inp:focus {
 	text-decoration: none; font-size: xx-small; vertical-align: top; color:red;
 }
 <%-- menu tree cell --%>
-div.z-tree-body td.menu-tree-cell {
+.menu-treecell-cnt div {
-	cursor: pointer;
-	padding: 0 2px;
-   	font-size: ${fontSizeM};
-   	font-weight: normal;
-   	overflow: visible;
-}
-
-div.menu-tree-cell-cnt {
 	border: 0; margin: 0; padding: 0;
 	font-family: ${fontFamilyC};
-	font-size: ${fontSizeM}; font-weight: normal;
+	font-size: ${fontSizeM}; 
-    white-space:nowrap
+	font-weight: normal;
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis !important;
+    cursor: pointer;
 }
 
-td.menu-tree-cell-disd * {
+span.z-tree-tee, span.z-tree-last {
-	color: #C5CACB !important; cursor: default!important;
+	width:0px;
-}
-
-td.menu-tree-cell-disd a:visited, td.menu-tree-cell-disd a:hover {
-	text-decoration: none !important;
-	cursor: default !important;;
-	border-color: #D0DEF0 !important;
-}
-
-div.z-dottree-body td.menu-tree-cell {
-	cursor: pointer; padding: 0 2px;
-	font-size: ${fontSizeM}; font-weight: normal; overflow: visible;
-}
-
-div.z-filetree-body td.menu-tree-cell {
-	cursor: pointer; padding: 0 2px;
-	font-size: ${fontSizeM}; font-weight: normal; overflow: visible;
-}
-
-div.z-vfiletree-body td.menu-tree-cell {
-	cursor: pointer; padding: 0 2px;
-	font-size: ${fontSizeM}; font-weight: normal; overflow: visible;
 } 
 
 <%-- FOCUSED FIELD in different color --%>