IDEMPIERE-4499 zk9.5 - Popup menu disappear quickly for buttons on th… (#332)

* IDEMPIERE-4499 zk9.5 - Popup menu disappear quickly for buttons on the More area

* IDEMPIERE-4499 zk9.5 - Popup menu disappear quickly for buttons on the More area

remove unuse code.

* IDEMPIERE-4499 zk9.5 - Popup menu disappear quickly for buttons on the More area

add sysconfig record for ZK_TOOLBAR_SHOW_MORE_VERTICAL

migration/i7.1z/oracle/202010291038_IDEMPIERE-4499.sql

@@ -0,0 +1,11 @@
+SET SQLBLANKLINES ON
+SET DEFINE OFF
+
+-- IDEMPIERE-4499 zk9.5 - Popup menu disappear quickly for buttons on the More area
+-- Oct 29, 2020, 10:37:46 AM CET
+INSERT INTO AD_SysConfig (AD_SysConfig_ID,AD_Client_ID,AD_Org_ID,Created,Updated,CreatedBy,UpdatedBy,IsActive,Name,Value,Description,EntityType,ConfigurationLevel,AD_SysConfig_UU) VALUES (200164,0,0,TO_DATE('2020-10-29 10:37:46','YYYY-MM-DD HH24:MI:SS'),TO_DATE('2020-10-29 10:37:46','YYYY-MM-DD HH24:MI:SS'),100,100,'Y','ZK_TOOLBAR_SHOW_MORE_VERTICAL','Y','The extended toolbar for the "Show More" buttons is shown vertical (Y) - or as horizontal extension (N)','D','C','24aeedc0-24c7-4794-9062-0d0d1631d025')
+;
+
+SELECT register_migration_script('202010291038_IDEMPIERE-4499.sql') FROM dual
+;
+

migration/i7.1z/postgresql/202010291038_IDEMPIERE-4499.sql

@@ -0,0 +1,8 @@
+-- IDEMPIERE-4499 zk9.5 - Popup menu disappear quickly for buttons on the More area
+-- Oct 29, 2020, 10:37:46 AM CET
+INSERT INTO AD_SysConfig (AD_SysConfig_ID,AD_Client_ID,AD_Org_ID,Created,Updated,CreatedBy,UpdatedBy,IsActive,Name,Value,Description,EntityType,ConfigurationLevel,AD_SysConfig_UU) VALUES (200164,0,0,TO_TIMESTAMP('2020-10-29 10:37:46','YYYY-MM-DD HH24:MI:SS'),TO_TIMESTAMP('2020-10-29 10:37:46','YYYY-MM-DD HH24:MI:SS'),100,100,'Y','ZK_TOOLBAR_SHOW_MORE_VERTICAL','Y','The extended toolbar for the "Show More" buttons is shown vertical (Y) - or as horizontal extension (N)','D','C','24aeedc0-24c7-4794-9062-0d0d1631d025')
+;
+
+SELECT register_migration_script('202010291038_IDEMPIERE-4499.sql') FROM dual
+;
+

org.adempiere.base/src/org/compiere/model/MSysConfig.java

@@ -43,7 +43,7 @@ public class MSysConfig extends X_AD_SysConfig
 	/**
 	 * 
 	 */
-	private static final long serialVersionUID = -7393845332390162370L;
+	private static final long serialVersionUID = 8581992138870649241L;
 
 	public static final String ADDRESS_VALIDATION = "ADDRESS_VALIDATION";
     public static final String ALERT_SEND_ATTACHMENT_AS_XLS = "ALERT_SEND_ATTACHMENT_AS_XLS";
@@ -203,6 +203,7 @@ public class MSysConfig extends X_AD_SysConfig
     public static final String ZK_SESSION_TIMEOUT_IN_SECONDS = "ZK_SESSION_TIMEOUT_IN_SECONDS";
     public static final String ZK_THEME_USE_FONT_ICON_FOR_IMAGE = "ZK_THEME_USE_FONT_ICON_FOR_IMAGE";
     public static final String ZK_THEME = "ZK_THEME";
+    public static final String ZK_TOOLBAR_SHOW_MORE_VERTICAL = "ZK_TOOLBAR_SHOW_MORE_VERTICAL";
     public static final String ZK_USE_PDF_JS_VIEWER = "ZK_USE_PDF_JS_VIEWER";
     public static final String ZOOM_ACROSS_QUERY_TIMEOUT = "ZOOM_ACROSS_QUERY_TIMEOUT";
 

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

@@ -37,6 +37,7 @@ import org.zkoss.zul.Cell;
 import org.zkoss.zul.Div;
 import org.zkoss.zul.Grid;
 import org.zkoss.zul.LayoutRegion;
+import org.zkoss.zul.Popup;
 import org.zkoss.zul.Row;
 import org.zkoss.zul.Rows;
 import org.zkoss.zul.Space;
@@ -474,4 +475,31 @@ public final class LayoutUtils {
 	public static void addSlideSclass(LayoutRegion region) {
 		region.addEventListener(Events.ON_OPEN, addSlideEventListener);
 	}
+	
+	/**
+	 * find popup ancestor of comp
+	 * @param comp
+	 * @return {@link Popup} if comp or one of its ancestor is Popup
+	 */
+	public static Popup findPopup(Component comp) {
+		Component c = comp;
+		while (c != null) {
+			if (c instanceof Popup)
+				return (Popup) c;
+			c = c.getParent();
+		}
+		return null;
+	}
+
+	/**
+	 * call popup.detach when it is close
+	 * @param popup
+	 */
+	public static void autoDetachOnClose(Popup popup) {
+		popup.addEventListener(Events.ON_OPEN, (OpenEvent e) -> {
+			if (!e.isOpen()) {
+				popup.detach();
+			}
+		});
+	}
 }

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

@@ -20,6 +20,7 @@ import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zul.Menuitem;
 import org.zkoss.zul.Menupopup;
+import org.zkoss.zul.Popup;
 
 /**
  *	Archive Button Consequences.
@@ -142,7 +143,16 @@ public class WArchive implements EventListener<Event>
 			m_popup.appendChild(new Menuitem(Msg.getMsg(Env.getCtx(), "ArchivedNone")));
 		//
 			
-		m_popup.setPage(invoker.getPage());
+		Popup popup = LayoutUtils.findPopup(invoker);
+		if (popup != null)
+		{
+			popup.appendChild(m_popup);
+		}
+		else
+		{
+			m_popup.setPage(invoker.getPage());
+			LayoutUtils.autoDetachOnClose(m_popup);
+		}
 		m_popup.open(invoker, "after_start");
 	}	//	getZoomTargets
 	

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

@@ -48,6 +48,7 @@ import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zul.Menuitem;
 import org.zkoss.zul.Menupopup;
+import org.zkoss.zul.Popup;
 
 /**
  *	Request Button Action.
@@ -181,7 +182,16 @@ public class WRequest implements EventListener<Event>
 			m_popup.appendChild(m_all);
 		}
 		
-		m_popup.setPage(invoker.getPage());
+		Popup popup = LayoutUtils.findPopup(invoker);
+		if (popup != null)
+		{
+			popup.appendChild(m_popup);
+		}
+		else
+		{
+			m_popup.setPage(invoker.getPage());
+			LayoutUtils.autoDetachOnClose(m_popup);
+		}
 		m_popup.open(invoker, "after_start");
 	}	//	getZoomTargets
 	
@@ -211,6 +221,9 @@ public class WRequest implements EventListener<Event>
 			}
 			
 			int AD_Window_ID = WINDOW_REQUESTS_ALL;		//	232=all - 201=my
+			if (m_popup.getParent() instanceof Popup) {
+				((Popup)m_popup.getParent()).close();
+			}
 			SessionManager.getAppDesktop().openWindow(AD_Window_ID, query, new Callback<ADWindow>() {
 				
 				@Override

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

@@ -34,6 +34,7 @@ import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zul.Menuitem;
 import org.zkoss.zul.Menupopup;
+import org.zkoss.zul.Popup;
 
 /**
  *	Application Zoom Across Launcher.
@@ -89,7 +90,17 @@ public class WZoomAcross
 			m_popup.appendChild(menuItem);  // Added
 		}
 		m_popup.setStyle("overflow: auto;max-height: 80%;");
-		m_popup.setPage(invoker.getPage());
+		Popup popup = LayoutUtils.findPopup(invoker);
+		if (popup != null)
+		{
+			popup.appendChild(m_popup);
+		}
+		else
+		{
+			m_popup.setPage(invoker.getPage());
+			LayoutUtils.autoDetachOnClose(m_popup);
+		}
+		
 		m_popup.open(invoker, "after_start");
 	}
 

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/adwindow/ADWindowToolbar.java

@@ -44,6 +44,7 @@ import org.adempiere.webui.util.ZKUpdateUtil;
 import org.adempiere.webui.window.FDialog;
 import org.compiere.model.GridTab;
 import org.compiere.model.MRole;
+import org.compiere.model.MSysConfig;
 import org.compiere.model.MToolBarButton;
 import org.compiere.model.MUserQuery;
 import org.compiere.util.CLogger;
@@ -65,9 +66,13 @@ import org.zkoss.zk.ui.event.KeyEvent;
 import org.zkoss.zk.ui.event.OpenEvent;
 import org.zkoss.zk.ui.util.Clients;
 import org.zkoss.zul.A;
+import org.zkoss.zul.Cell;
 import org.zkoss.zul.Comboitem;
+import org.zkoss.zul.Grid;
 import org.zkoss.zul.Menuitem;
 import org.zkoss.zul.Popup;
+import org.zkoss.zul.Row;
+import org.zkoss.zul.Rows;
 import org.zkoss.zul.Separator;
 import org.zkoss.zul.Space;
 import org.zkoss.zul.Toolbarbutton;
@@ -1072,22 +1077,47 @@ public class ADWindowToolbar extends FToolbar implements EventListener<Event>
 	}
 
 	private void populateOverflowPopup() {
-		for(ToolBarButton btn : overflows) {
+		boolean vertical = !ClientInfo.isMobile() && MSysConfig.getBooleanValue(MSysConfig.ZK_TOOLBAR_SHOW_MORE_VERTICAL, true, Env.getAD_Client_ID(Env.getCtx()));
-			overflowPopup.appendChild(btn);
+		if (vertical) {
-		}			
+			Grid grid = new Grid();
-		
+			grid.setHflex("min");
-		int cnt = 0;
+			grid.setStyle("border:none;");
-		for(Component c : getChildren()) {
+			Rows rows = new Rows();
-			if (c instanceof ToolBarButton)
+			rows.setParent(grid);
-				cnt++;
+			overflowPopup.appendChild(grid);
-		}
+			LayoutUtils.addSclass("toolbar-overflow-popup-vertical", overflowPopup);
-		if (overflows.size() >= cnt) {
+			for(ToolBarButton btn : overflows) {
-			String script = "var e = jq('#" + getUuid() + "');";
+				Row row = new Row();
-			script = script + "var b=zk.Widget.$('#" + overflowPopup.getUuid() + "'); ";
+				row.setParent(rows);
-			script = script + "b.setWidth(e.css('width'));";
+				Cell cell1 = new Cell();
-			Clients.evalJavaScript(script);
+				cell1.setParent(row);
+				cell1.appendChild(btn);
+				cell1.setStyle("border:none;");
+				String msgValue = btn.getName().substring(BTNPREFIX.length());
+				String msg = Msg.getMsg(Env.getCtx(), msgValue);
+				btn.setLabel(msg);
+				btn.setHflex("1");
+			}
 		} else {
-			overflowPopup.setWidth(null);
+			for(ToolBarButton btn : overflows) {
+				overflowPopup.appendChild(btn);
+			}
+		}
+		
+		if (!vertical) {
+			int cnt = 0;
+			for(Component c : getChildren()) {
+				if (c instanceof ToolBarButton)
+					cnt++;
+			}
+			if (overflows.size() >= cnt) {
+				String script = "var e = jq('#" + getUuid() + "');";
+				script = script + "var b=zk.Widget.$('#" + overflowPopup.getUuid() + "'); ";
+				script = script + "b.setWidth(e.css('width'));";
+				Clients.evalJavaScript(script);
+			} else {
+				overflowPopup.setWidth(null);
+			}
 		}
 	}
 
@@ -1095,12 +1125,7 @@ public class ADWindowToolbar extends FToolbar implements EventListener<Event>
 		this.appendChild(btnShowMore);
         btnShowMore.setDisabled(false);
         btnShowMore.setVisible(true);                
-		overflowPopup = new Popup();
+		newOverflowPopup();
-		overflowPopup.addEventListener(Events.ON_OPEN, (OpenEvent oe) -> {
-			if (!oe.isOpen()) {
-				overflowPopup.setAttribute("popup.close", System.currentTimeMillis());
-			}
-		});
 		appendChild(overflowPopup);
 		populateOverflowPopup();
 	}
@@ -1121,12 +1146,7 @@ public class ADWindowToolbar extends FToolbar implements EventListener<Event>
 		overflowButton.setIconSclass("z-icon-ShowMore");
 		overflowButton.setSclass("font-icon-toolbar-button toolbar-button mobile-overflow-link");
 		appendChild(overflowButton);
-		overflowPopup = new Popup();
+		newOverflowPopup();
-		overflowPopup.addEventListener(Events.ON_OPEN, (OpenEvent oe) -> {
-			if (!oe.isOpen()) {
-				overflowPopup.setAttribute("popup.close", System.currentTimeMillis());
-			}
-		});
 		appendChild(overflowPopup);
 		overflowButton.addEventListener(Events.ON_CLICK, e -> {
 			Long ts = (Long) overflowPopup.removeAttribute("popup.close");
@@ -1138,6 +1158,21 @@ public class ADWindowToolbar extends FToolbar implements EventListener<Event>
 			overflowPopup.open(overflowButton, "after_end");
 		});
 	}
+
+	private void newOverflowPopup() {
+		overflowPopup = new Popup();
+		overflowPopup.addEventListener(Events.ON_OPEN, (OpenEvent oe) -> {
+			if (!oe.isOpen()) {
+				overflowPopup.setAttribute("popup.close", System.currentTimeMillis());
+				Component[] childrens = overflowPopup.getChildren().toArray(new Component[0]);
+				for (Component child : childrens) {
+					if (child instanceof Grid || child instanceof Toolbarbutton)
+						continue;
+					child.detach();
+				}
+			}
+		});
+	}
 	
 	public void onPostAfterSize() {
 		if (this.getPage() != null) {

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/adwindow/AbstractADWindowContent.java

@@ -124,8 +124,10 @@ import org.zkoss.zk.ui.util.Clients;
 import org.zkoss.zul.Div;
 import org.zkoss.zul.Menuitem;
 import org.zkoss.zul.Menupopup;
+import org.zkoss.zul.Popup;
 import org.zkoss.zul.RowRenderer;
 import org.zkoss.zul.Window.Mode;
+import org.zkoss.zul.impl.LabelImageElement;
 
 /**
  *
@@ -957,10 +959,18 @@ public abstract class AbstractADWindowContent extends AbstractUIPart implements
 					AEnv.showWindow(recordAccessDialog);
 				}
 			});
-
+			LayoutUtils.autoDetachOnClose(m_popup);
-			m_popup.setPage(toolbar.getToolbarItem("Lock").getPage());
 		}
-		m_popup.open(toolbar.getToolbarItem("Lock"), "after_start");
+		if (m_popup.getPage() == null) {
+			LabelImageElement btn = toolbar.getToolbarItem("Lock");
+			Popup popup = LayoutUtils.findPopup(btn.getParent());
+			if (popup != null) {
+				popup.appendChild(m_popup);				
+			} else {
+				m_popup.setPage(toolbar.getToolbarItem("Lock").getPage());
+			}
+		}
+		m_popup.open(toolbar.getToolbarItem("Lock"), "after_start");		
 	}	//	lock
 	//
 
@@ -1974,8 +1984,9 @@ public abstract class AbstractADWindowContent extends AbstractUIPart implements
      * @see ToolbarListener#onHelp()
      */
     public void onHelp()
-    {
+    {	
-    	SessionManager.getAppDesktop().showWindow(new HelpWindow(gridWindow), "center");
+    	closeToolbarPopup("Help");
+    	SessionManager.getAppDesktop().showWindow(new HelpWindow(gridWindow), "center");    	    
     }
 
     @Override
@@ -2694,6 +2705,7 @@ public abstract class AbstractADWindowContent extends AbstractUIPart implements
 
     @Override
     public void onPrint() {
+    	closeToolbarPopup("Print");
     	final Callback<Boolean> postCallback = new Callback<Boolean>() {
 			@Override
 			public void onCallback(Boolean result) {
@@ -2828,19 +2840,29 @@ public abstract class AbstractADWindowContent extends AbstractUIPart implements
 	public void onActiveWorkflows() {
 		if (toolbar.getEvent() != null)
 		{
-			if (adTabbox.getSelectedGridTab().getRecord_ID() <= 0)
+			if (adTabbox.getSelectedGridTab().getRecord_ID() <= 0) {
 				return;
-			else
+			} else {
+				closeToolbarPopup("ActiveWorkflows");
 				try {
 					AEnv.startWorkflowProcess(adTabbox.getSelectedGridTab().getAD_Table_ID(), adTabbox.getSelectedGridTab().getRecord_ID());
 				} catch (Exception e) {
 					CLogger.get().saveError("Error", e);
 					throw new ApplicationException(e.getMessage(), e);
 				}
+			}
 		}
 	}
 	//
 
+	private void closeToolbarPopup(String btnName) {
+		LabelImageElement btn = toolbar.getToolbarItem(btnName);
+		Popup popup = LayoutUtils.findPopup(btn.getParent());
+		if (popup != null) {
+			popup.close();
+		}
+	}
+
 	// Elaine 2008/07/22
 	/**
      * @see ToolbarListener#onRequests()
@@ -2868,6 +2890,7 @@ public abstract class AbstractADWindowContent extends AbstractUIPart implements
      */
 	public void onProductInfo()
 	{
+		closeToolbarPopup("ProductInfo");
 		InfoPanel.showPanel(I_M_Product.Table_Name);
 	}
 	//

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

@@ -195,6 +195,7 @@ public abstract class InfoPanel extends Window implements EventListener<Event>,
 		InfoPanel info = InfoManager.create(0, tableName, tableName + "_ID", "", false, "", false);
 		info.setAttribute(Window.MODE_KEY, Window.MODE_EMBEDDED);
 		AEnv.showWindow(info);
+		info.setFocus(true);
 	}	// showPanel
 
 	/** Window Width                */

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

@@ -205,6 +205,7 @@ public class CSVImportAction implements EventListener<Event>
 		panel.showBusyMask(winImportFile);
 		LayoutUtils.openOverlappedWindow(panel.getComponent(), winImportFile, "middle_center");
 		winImportFile.addEventListener(DialogEvents.ON_WINDOW_CLOSE, this);
+		winImportFile.setFocus(true);
 	}
 
 	private void setTemplateList() {

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

@@ -174,6 +174,7 @@ public class ExportAction implements EventListener<Event>
 		LayoutUtils.openOverlappedWindow(panel.getComponent(), winExportFile, "middle_center");
 		winExportFile.addEventListener(DialogEvents.ON_WINDOW_CLOSE, this);
 		winExportFile.addEventListener("onExporterException", this);
+		winExportFile.focus();
 
 	}
 	

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

@@ -223,6 +223,7 @@ public class FileImportAction implements EventListener<Event>
 		panel.showBusyMask(winImportFile);
 		LayoutUtils.openOverlappedWindow(panel.getComponent(), winImportFile, "middle_center");
 		winImportFile.addEventListener(DialogEvents.ON_WINDOW_CLOSE, this);
+		winImportFile.focus();
 	}
 
 	@Override

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

@@ -59,9 +59,11 @@ import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zk.ui.util.Clients;
 import org.zkoss.zul.Filedownload;
+import org.zkoss.zul.Popup;
 import org.zkoss.zul.Space;
 import org.zkoss.zul.Tabpanel;
 import org.zkoss.zul.Vbox;
+import org.zkoss.zul.impl.LabelImageElement;
 
 /**
  * @author Elaine
@@ -202,7 +204,12 @@ public class ReportAction implements EventListener<Event>
 			confirmPanel.addActionListener(this);
 		}
 
-		LayoutUtils.openPopupWindow(panel.getToolbar().getToolbarItem("Report"), winReport, "after_start");
+		LabelImageElement toolbarItem = panel.getToolbar().getToolbarItem("Report");
+		Popup popup = LayoutUtils.findPopup(toolbarItem);
+		if (popup != null)
+			popup.appendChild(winReport);
+		LayoutUtils.openPopupWindow(toolbarItem, winReport, "after_start");
+		winReport.setFocus(true);
 	}
 	
 	@Override

org.adempiere.ui.zk/theme/default/css/fragment/input-element.css.dsp

@@ -14,7 +14,7 @@
 	min-height:14px;
 }
 <%-- highlight focus form element --%>
-input:focus, textarea:focus, .z-combobox-input:focus, z-datebox-input:focus {
+input:focus, textarea:focus, .z-combobox-input:focus, z-datebox-input:focus, select:focus {
 	border: 1px solid #0000ff;
 	background: #FFFFCC;
 }

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

@@ -26,6 +26,10 @@
 	padding: 1px;
 	border: none;	
 }
+.toolbar-overflow-popup-vertical .toolbar-button, 
+.toolbar-overflow-popup-vertical .toolbar-button .z-toolbarbutton-content {
+	width: auto;
+}
 
 .depressed img {
 	border-width: 1px;
@@ -95,6 +99,10 @@
 .font-icon-menuitem i {
 	vertical-align: middle;
 }
+.toolbar-overflow-popup-vertical .font-icon-toolbar-button.toolbar-button, 
+.toolbar-overflow-popup-vertical .font-icon-toolbar-button.toolbar-button .z-toolbarbutton-content {
+	justify-content: flex-start;
+}
 .toolbar-searchbox {
     margin-right: 10px;
     margin-left: 10px;