IDEMPIERE-3518 Improvement For Mobile Compatibility. Refine process dialog layout for mobile devices. Fix intermittent adwindow toolbar rendering issue at mobile devices.

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

@@ -31,8 +31,10 @@ import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.action.Actions;
 import org.adempiere.webui.action.IAction;
 import org.adempiere.webui.component.FToolbar;
+import org.adempiere.webui.component.Tabpanel;
 import org.adempiere.webui.component.ToolBarButton;
 import org.adempiere.webui.event.ToolbarListener;
+import org.adempiere.webui.part.WindowContainer;
 import org.adempiere.webui.session.SessionManager;
 import org.adempiere.webui.theme.ThemeManager;
 import org.adempiere.webui.util.ZKUpdateUtil;
@@ -829,6 +831,18 @@ public class ADWindowToolbar extends FToolbar implements EventListener<Event>
 				"}");
 		addEventListener(Events.ON_AFTER_SIZE, (AfterSizeEvent evt) -> onAfterSize(evt));
 		
+		addCallback(AFTER_PAGE_ATTACHED, t -> afterPageAttached());
+	}
+
+	private void afterPageAttached() {
+		Component p = getParent();
+		while (p != null) {
+			if (p instanceof Tabpanel) {
+				p.addEventListener(WindowContainer.ON_MOBILE_SET_SELECTED_TAB, evt -> this.invalidate());
+				break;
+			}
+			p = p.getParent();
+		}
 	}
 
 	private void onAfterSize(AfterSizeEvent evt) {

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

@@ -3060,8 +3060,15 @@ public abstract class AbstractADWindowContent extends AbstractUIPart implements
 				//dialog.setWidth("500px");
 				dialog.setBorder("normal");				
 				getComponent().getParent().appendChild(dialog);
-				showBusyMask(dialog);
+				if (ClientInfo.isMobile())
-				LayoutUtils.openOverlappedWindow(getComponent(), dialog, "middle_center");
+				{
+					dialog.doHighlighted();
+				}
+				else
+				{
+					showBusyMask(dialog);
+					LayoutUtils.openOverlappedWindow(getComponent(), dialog, "middle_center");
+				}
 				dialog.focus();
 			}
 			else

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

@@ -248,7 +248,7 @@ public abstract class AbstractProcessDialog extends Window implements IProcessUI
 		}
 		
 		layout();
-
+		
 		return true;
 	}
 	
@@ -406,13 +406,13 @@ public abstract class AbstractProcessDialog extends Window implements IProcessUI
 		bottomParameterLayout.appendChild(reportOptionLayout);
 		
 		freportType = new Listbox();
-		freportType.setSclass("option-input-parameter");
+		freportType.setSclass("option-input-parameter view-report-list");
 		chbIsSummary = new Checkbox();
 		chbIsSummary.setSclass("option-input-parameter");
 		Label lPrintFormat = new Label(Msg.translate(Env.getCtx(), "AD_PrintFormat_ID"));
-		lPrintFormat.setSclass("option-input-parameter");
+		lPrintFormat.setSclass("option-input-parameter print-format-label");
 		Label lreportType = new Label(Msg.translate(Env.getCtx(), "view.report"));
-		lreportType.setSclass("option-input-parameter");
+		lreportType.setSclass("option-input-parameter view-report-label");
 		Label lIsSummary = new Label(Msg.translate(Env.getCtx(), "Summary"));
 		lIsSummary.setSclass("option-input-parameter");
 		
@@ -427,7 +427,8 @@ public abstract class AbstractProcessDialog extends Window implements IProcessUI
 			reportOptionLayout.appendChild(fLanguageType.getComponent());
 			((Combobox)fLanguageType.getComponent()).setSclass("option-input-parameter");
 		}
-		fPrintFormat.getComponent().setSclass("option-input-parameter");
+		fPrintFormat.getComponent().setSclass("option-input-parameter print-format-list");
+		fPrintFormat.getComponent().setPlaceholder(lPrintFormat.getValue());
 		reportOptionLayout.appendChild(lreportType);
 		reportOptionLayout.appendChild(freportType);	
 		reportOptionLayout.appendChild(lIsSummary);
@@ -441,15 +442,19 @@ public abstract class AbstractProcessDialog extends Window implements IProcessUI
 	}
 	
 	protected void savePrameterLayout(HtmlBasedComponent bottomParameterLayout) {
-		HtmlBasedComponent savePrameterLayout = new Hlayout();
+		Hlayout savePrameterLayout = new Hlayout();
 		savePrameterLayout.setSclass("save-parameter-container");
 		bottomParameterLayout.appendChild(savePrameterLayout);
+		savePrameterLayout.setValign("middle");
 		
 		lSaved = new Label(Msg.getMsg(Env.getCtx(), "SavedParameter"));
+		lSaved.setClass("saved-parameter-label");
 		savePrameterLayout.appendChild(lSaved);
 		fSavedName = new Combobox();
 		fSavedName.addEventListener(Events.ON_CHANGE, this);
 		savePrameterLayout.appendChild(fSavedName);
+		fSavedName.setPlaceholder(lSaved.getValue());
+		fSavedName.setSclass("saved-parameter-list");
 
 		bSave.setEnabled(false);
 		bSave.addActionListener(this);
@@ -610,6 +615,7 @@ public abstract class AbstractProcessDialog extends Window implements IProcessUI
 		if (component == runAsJobField && event.getName().equals(Events.ON_CHECK))
 		{
 			notificationTypeField.getComponent().getParent().setVisible(runAsJobField.isChecked());
+			mainParameterLayout.invalidate();
 
 		}
 		else if (event.getName().equals(ON_COMPLETE))

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

@@ -18,14 +18,16 @@ package org.adempiere.webui.apps;
 
 import java.util.logging.Level;
 
+import org.adempiere.webui.ClientInfo;
 import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.component.Window;
 import org.adempiere.webui.event.DialogEvents;
-import org.adempiere.webui.session.SessionManager;
+import org.adempiere.webui.util.ZKUpdateUtil;
 import org.compiere.process.ProcessInfo;
 import org.compiere.util.CLogger;
 import org.compiere.util.Env;
 import org.zkoss.zk.ui.Component;
+import org.zkoss.zk.ui.HtmlBasedComponent;
 import org.zkoss.zk.ui.event.Event;
 import org.zkoss.zk.ui.event.EventListener;
 
@@ -49,6 +51,7 @@ public class ProcessModalDialog extends AbstractProcessDialog implements EventLi
 	/**	Logger			*/
 	private static CLogger log = CLogger.getCLogger(ProcessModalDialog.class);
 	//
+	private String orientation;
 
 	/**
 	 * @param aProcess
@@ -82,8 +85,28 @@ public class ProcessModalDialog extends AbstractProcessDialog implements EventLi
 		{
 			init(Env.getCtx(), WindowNo, pi.getAD_Process_ID(), pi, autoStart, true);
 			if (mainParameterLayout != null)// when auto start it's null
-				mainParameterLayout.setStyle("max-height:" + (SessionManager.getAppDesktop().getClientInfo().desktopHeight - 150) + "px");
+			{
-			this.setSclass("popup-dialog");
+				mainParameterLayout.setStyle("max-height:" + ClientInfo.get().desktopHeight + "px");
+				ZKUpdateUtil.setVflex(mainParameterLayout, "min");
+			}
+			if (topParameterLayout != null)
+			{
+				topParameterLayout.setStyle("max-height:" + (ClientInfo.get().desktopHeight-130) + "px");
+			}
+			if (bottomParameterLayout != null)
+			{
+				for(Component c : bottomParameterLayout.getChildren())
+				{
+					if (c instanceof HtmlBasedComponent)
+						ZKUpdateUtil.setVflex((HtmlBasedComponent) c, "min");
+				}
+			}			
+			this.setSclass("popup-dialog process-modal-dialog");
+			if (ClientInfo.isMobile())
+			{
+				orientation = ClientInfo.get().orientation;
+				ClientInfo.onClientInfo(this, this::onClientInfo);
+			}
 		}
 		catch(Exception ex)
 		{
@@ -183,5 +206,23 @@ public class ProcessModalDialog extends AbstractProcessDialog implements EventLi
 		}else {
 			super.onEvent(event);
 		}
-	}		
+	}	
+	
+	protected void onClientInfo() {
+		if (getPage() != null) {
+			String newOrientation = ClientInfo.get().orientation;
+			if (!newOrientation.equals(orientation)) {
+				orientation = newOrientation;
+				if (mainParameterLayout != null)// when auto start it's null
+				{
+					mainParameterLayout.setStyle("max-height:" + ClientInfo.get().desktopHeight + "px");
+				}
+				if (topParameterLayout != null)
+				{
+					topParameterLayout.setStyle("max-height:" + (ClientInfo.get().desktopHeight-130) + "px");
+				}
+				this.invalidate();
+			}
+		}
+	}
 }	//	ProcessModalDialog

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

@@ -62,8 +62,9 @@ import org.zkoss.zk.ui.event.Event;
 import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zul.Div;
-import org.zkoss.zul.Hbox;
 import org.zkoss.zul.Label;
+import org.zkoss.zul.Space;
+import org.zkoss.zul.impl.InputElement;
 import org.zkoss.zul.impl.XulElement;
 
 /**
@@ -131,7 +132,7 @@ public class ProcessParameterPanel extends Panel implements
 																		// ranges
 	private ArrayList<GridField> m_mFields = new ArrayList<GridField>();
 	private ArrayList<GridField> m_mFields2 = new ArrayList<GridField>();
-	private ArrayList<Label> m_separators = new ArrayList<Label>();
+	private ArrayList<Space> m_separators = new ArrayList<Space>();
 	//
 	private Grid centerPanel = null;
 
@@ -327,10 +328,11 @@ public class ProcessParameterPanel extends Panel implements
 
 		//
 		if (voF.isRange) {
-			Hbox box = new Hbox();
+			Div box = new Div();
-			ZKUpdateUtil.setHflex(box, "1");
+			ZKUpdateUtil.setWidth(box, "100%");
 			box.appendChild(editor.getComponent());
-			editor.fillHorizontal();
+			ZKUpdateUtil.setWidth((HtmlBasedComponent) editor.getComponent(), "49%");
+			setEditorPlaceHolder(editor, Msg.getMsg(Env.getCtx(), "From"));
 			//
 			GridFieldVO voF2 = GridFieldVO.createParameter(voF);
 			GridField mField2 = new GridField(voF2);
@@ -344,7 +346,8 @@ public class ProcessParameterPanel extends Panel implements
 			// New Field value to be updated to editor
 			mField2.addPropertyChangeListener(editor2);
 			editor2.dynamicDisplay();
-			editor2.fillHorizontal();
+			ZKUpdateUtil.setWidth((HtmlBasedComponent) editor2.getComponent(), "49%");
+			setEditorPlaceHolder(editor2, Msg.getMsg(Env.getCtx(), "To"));
 			// setup editor context menu
 			popupMenu = editor2.getPopupMenu();
 			if (popupMenu != null) {
@@ -356,7 +359,8 @@ public class ProcessParameterPanel extends Panel implements
 			mField2.setValue(defaultObject2, true);
 			//
 			m_wEditors2.add(editor2);
-			Label separator = new Label(" - ");
+			Space separator = new Space();
+			separator.setSpacing("2%");
 			m_separators.add(separator);
 			box.appendChild(separator);
 			box.appendChild(editor2.getComponent());
@@ -370,6 +374,21 @@ public class ProcessParameterPanel extends Panel implements
 		rows.appendChild(row);
 	} // createField
 
+	private void setEditorPlaceHolder(WEditor editor, String msg) {
+		Component c = editor.getComponent();
+		if (c instanceof InputElement) {
+			((InputElement) c).setPlaceholder(msg);
+		} else {
+			for (Component e : c.getChildren()) {
+				if (e instanceof InputElement) {
+					((InputElement) e).setPlaceholder(msg);
+					break;
+				}
+			}
+		}
+		
+	}
+
 	/**
 	 * Validate Parameter values
 	 * 

org.adempiere.ui.zk/theme/default/css/fragment/parameter-process.css.dsp

@@ -8,6 +8,9 @@ when detect side effect, fix to only apply for parameter window*/
 .main-parameter-layout{
 	height: 100%;
 }
+.process-modal-dialog.z-window > .z-window-content {
+	height: 100%;
+}
 
 .main-parameter-layout,
 .top-parameter-layout,
@@ -19,6 +22,7 @@ when detect side effect, fix to only apply for parameter window*/
 .bottom-container{
 	width: 100%;
 }
+
 .report-option-container {
 	overflow-x: auto;
 }
@@ -27,7 +31,8 @@ when detect side effect, fix to only apply for parameter window*/
 }
 
 .bottom-parameter-layout{
-	
+	padding-top: 4px;
+	border-top: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .message-paramenter{
@@ -82,4 +87,56 @@ when detect side effect, fix to only apply for parameter window*/
 
 .popup-dialog .input-paramenter-layout{
 	width: 90%;
-}
+}
+
+@media screen and (max-width: 500px) {
+	.option-input-parameter.z-label.print-format-label,
+	.option-input-parameter.z-label.view-report-label {
+		display: none;
+	}		
+}
+@media screen and (min-width: 501px) {
+	.option-input-parameter.print-format-list > input::-webkit-input-placeholder {
+		color: white;
+	}
+}
+@media screen and (min-width: 501px) {
+	.option-input-parameter.print-format-list > input::-moz-placeholder {
+		color: white;
+	}
+}
+@media screen and (min-width: 501px) {
+	.option-input-parameter.print-format-list > input::-ms-input-placeholder {
+		color: white;
+	}
+}
+@media screen and (max-width: 400px) {
+	.option-input-parameter.print-format-list {
+		width: 180px !important;
+	}
+}
+@media screen and (max-width: 320px) {
+	.option-input-parameter.print-format-list {
+		width: 150px !important;
+	}
+}
+@media screen and (max-width: 500px) {
+	.save-parameter-container .saved-parameter-label {
+		display: none;
+	}
+}
+@media screen and (min-width: 501px) {
+	.save-parameter-container .saved-parameter-list > input::-webkit-input-placeholder {
+		color: white;
+	}
+}
+@media screen and (min-width: 501px) {
+	.save-parameter-container .saved-parameter-list > input::-moz-placeholder {
+		color: white;
+	}
+}
+@media screen and (min-width: 501px) {
+	.save-parameter-container .saved-parameter-list > input::-ms-input-placeholder {
+		color: white;
+	}
+}

org.adempiere.ui.zk/theme/default/css/fragment/window-size.css.dsp

@@ -373,3 +373,9 @@
 		height: 100%;
 	}
 }
+
+@media screen and (max-height: 600px) {
+	.popup-dialog.process-modal-dialog {
+		height: 100%;
+	}
+}