IDEMPIERE-1313 Web Client: Reduce space used by collapsed context help pane. Better implementation that doesn't take up any space on the right when the help pane is collapsed.

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

@@ -27,7 +27,6 @@ import org.adempiere.base.event.IEventManager;
 import org.adempiere.base.event.IEventTopics;
 import org.adempiere.model.MBroadcastMessage;
 import org.adempiere.util.ServerContext;
-import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.adwindow.ADWindow;
 import org.adempiere.webui.apps.AEnv;
 import org.adempiere.webui.apps.BusyDialog;
@@ -103,6 +102,8 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
 	private static final String IMAGES_UPARROW_PNG = "images/collapse-header.png";
 
 	private static final String IMAGES_DOWNARROW_PNG = "images/expand-header.png";
+	
+	private static final String IMAGES_CONTEXT_HELP_PNG = "images/Help16.png";
 
 	/**
 	 * generated serial version ID
@@ -133,6 +134,8 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
 	private HelpController helpController;
 
 	private ToolBarButton max;
+	
+	private ToolBarButton contextHelp;
 
     public DefaultDesktop()
     {
@@ -196,11 +199,9 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
 				updateHelpCollapsedPreference(!oe.isOpen());
 				HtmlBasedComponent comp = windowContainer.getComponent();
 				if (comp != null) {
-					if (oe.isOpen()) {
+					contextHelp.setVisible(!oe.isOpen());
-						LayoutUtils.removeSclass("with-right-icon", comp);
+					if (!oe.isOpen())
-					} else {
+						layout.getEast().setVisible(false);
-						LayoutUtils.addSclass("with-right-icon", comp);
-					}
 				}
 			}
 		});
@@ -220,11 +221,8 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
 		});
         
         boolean helpCollapsed= pref.isPropertyBool(UserPreference.P_HELP_COLLAPSED);
-        e.setOpen(!helpCollapsed);        
+        e.setVisible(!helpCollapsed);
-        Clients.evalJavaScript("$('.desktop-layout > div > .z-east-colpsd > .z-borderlayout-icon').attr('title', '" +
+                
-        		Msg.getElement(Env.getCtx(), "AD_CtxHelp_ID") + "');");
-        
-        
         helpController.render(e, this);
 
         Center windowArea = layout.getCenter();
@@ -273,6 +271,7 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
 
 		ToolBar toolbar = new ToolBar();
         windowContainer.getComponent().appendChild(toolbar);
+                
         max = new ToolBarButton();
         toolbar.appendChild(max);
         max.setImage(ThemeManager.getThemeResource(IMAGES_UPARROW_PNG));
@@ -280,9 +279,13 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
         max.setSclass("window-container-toolbar-btn");
         max.setStyle("cursor: pointer; border: 1px solid transparent; padding: 2px;");
         
-        if (!e.isOpen()) {
+        contextHelp = new ToolBarButton();
-        	LayoutUtils.addSclass("with-right-icon", windowContainer.getComponent());
+        toolbar.appendChild(contextHelp);
-        }
+        contextHelp.setImage(ThemeManager.getThemeResource(IMAGES_CONTEXT_HELP_PNG));
+        contextHelp.addEventListener(Events.ON_CLICK, this);
+        contextHelp.setSclass("window-container-toolbar-btn context-help-btn");
+        contextHelp.setStyle("cursor: pointer; border: 1px solid transparent; padding: 2px;");
+        contextHelp.setTooltiptext(Util.cleanAmp(Msg.getElement(Env.getCtx(), "AD_CtxHelp_ID")));
         
         return layout;
     }
@@ -331,6 +334,12 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
         			max.setImage(ThemeManager.getThemeResource(IMAGES_UPARROW_PNG));
         		}
         	}
+        	else if (comp == contextHelp)
+        	{
+        		layout.getEast().setVisible(true);
+        		layout.getEast().setOpen(true);
+        		contextHelp.setVisible(false);
+        	}
         	else if(comp instanceof ToolBarButton)
             {
             	ToolBarButton btn = (ToolBarButton) comp;

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

@@ -151,6 +151,12 @@ html,body {
 	height: 22px;
 }
 
+.window-container-toolbar-btn.context-help-btn .z-toolbarbutton-cnt img {
+	width: 16px;
+	height: 16px;
+	padding: 3px 3px;
+}
+
 .tree-search-combo .z-comboitem-img img {
 	width: 16px;
 	height: 16px;
@@ -496,10 +502,6 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none {
 	margin: 0px !important;
 }
 
-.desktop-tabbox.with-right-icon .z-tabs .z-toolbar-tabs-body {
-	margin-right: 12px !important; 
-}
-
 .desktop-tabbox .z-tabs .z-toolbar-tabs-body .z-toolbarbutton {
 	padding: 0px !important;
 	border: 1px solid transparent !important;
@@ -1915,36 +1917,3 @@ table.z-vbox > tbody > tr > td > table {
 	border-radius: 0px;
 	background-color: #ddd;
 }
-
-<%-- Context Help --%>
-.desktop-layout > div > .z-east-colpsd {
-	border: none;
-	width: 0px !important;
-	position: absolute;
-	overflow: visible;
-	padding: 0px !important;
-	margin: 0px !important;
-}
-
-.desktop-layout > div > .z-east-colpsd > .z-borderlayout-icon {
-	background-image: url(${c:encodeURL('/theme/default/images/Help16.png')}) !important;
-	background-position:center !important;
-	width: 16px;
-	height: 16px;
-	position: relative;
-	left: -20px;
-	background-size: 16px 16px;
-	margin-left: 0px !important;
-	margin-right: 0px !important;
-	margin-top: 4px !important;
-	padding: 3px !important;
-}
-
-.desktop-layout > div > .z-east-colpsd > .z-borderlayout-icon:hover {
-	background-color:#DDD !important;
-	-webkit-box-shadow:inset 0px 0px 3px #CCC;
-	-moz-box-shadow:inset 0px 0px 3px #CCC;	
-	-o-box-shadow:inset 0px 0px 3px #CCC;	
-	-ms-box-shadow:inset 0px 0px 3px #CCC;	
-	box-shadow:inset 0px 0px 3px #CCC;
-}