IDEMPIERE-4482 Mobile Improvements (#297)

* IDEMPIERE-4482 Mobile Improvements

* IDEMPIERE-4482 Mobile Improvements

minor line height fix for process dialog's message area

* IDEMPIERE-4482 Mobile Improvements

- fix issue with grid view column header height
- add customize grid view button to detail pane
- always show message as notifications for mobile
- fix some mobile layout issues
- default desktop font size to 14px

migration/i7.1z/oracle/202010121700_IDEMPIERE-4482.sql

@@ -0,0 +1,18 @@
+SET SQLBLANKLINES ON
+SET DEFINE OFF
+
+-- Oct 12, 2020, 11:36:58 AM MYT
+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 (200159,0,0,TO_DATE('2020-10-12 11:36:56','YYYY-MM-DD HH24:MI:SS'),TO_DATE('2020-10-12 11:36:56','YYYY-MM-DD HH24:MI:SS'),100,100,'Y','ZK_GRID_MOBILE_EDITABLE','N','Mobile setting for AD Window Grid View. Y - Grid is editable. N - Grid is read only, must use form view to make changes.','D','S','f70a852c-84df-4de3-82c0-bdc7efda12ef')
+;
+
+-- Oct 12, 2020, 1:22:51 PM MYT
+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 (200160,0,0,TO_DATE('2020-10-12 13:22:50','YYYY-MM-DD HH24:MI:SS'),TO_DATE('2020-10-12 13:22:50','YYYY-MM-DD HH24:MI:SS'),100,100,'Y','ZK_GRID_MOBILE_LINE_BREAK_AS_IDENTIFIER_SEPARATOR','Y','Mobile setting for AD Window Grid View. Y - Replace identifier separator with line break. N - Use the configured identifier separator','D','S','31b780c9-4789-4feb-9f1a-35a87be34c73')
+;
+
+-- Oct 12, 2020, 2:41:17 PM MYT
+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 (200161,0,0,TO_DATE('2020-10-12 14:41:17','YYYY-MM-DD HH24:MI:SS'),TO_DATE('2020-10-12 14:41:17','YYYY-MM-DD HH24:MI:SS'),100,100,'Y','ZK_GRID_MOBILE_SHOW_CURRENT_ROW_INDICATOR','N','Mobile setting for AD Window Grid View. Y - add a column to display the current row indicator. N - no column created for current row indicator','D','S','aacc9992-7296-4d0d-b74b-c38f8e0f5a4d')
+;
+
+SELECT register_migration_script('202010121700_IDEMPIERE-4482.sql') FROM dual
+;
+

migration/i7.1z/oracle/202010141500_IDEMPIERE-4482.sql

@@ -0,0 +1,18 @@
+SET SQLBLANKLINES ON
+SET DEFINE OFF
+
+-- Oct 14, 2020, 11:28:34 AM MYT
+INSERT INTO AD_ToolBarButton (AD_Client_ID,AD_Org_ID,Created,CreatedBy,ComponentName,IsActive,AD_ToolBarButton_ID,Name,Updated,UpdatedBy,IsCustomization,KeyStroke_KeyCode,KeyStroke_Modifiers,AD_ToolBarButton_UU,Action,SeqNo,IsAdvancedButton,IsAddSeparator,EntityType,IsShowMore) VALUES (0,0,TO_DATE('2020-10-14 11:28:33','YYYY-MM-DD HH24:MI:SS'),100,'Customize','Y',200108,'Detail - Customize',TO_DATE('2020-10-14 11:28:33','YYYY-MM-DD HH24:MI:SS'),100,'N',0,0,'5b08fba8-f90e-4e27-8690-e4c7bbc242d2','D',0,'N','N','D','N')
+;
+
+-- Oct 14, 2020, 11:29:29 AM MYT
+UPDATE AD_ToolBarButton SET SeqNo=60,Updated=TO_DATE('2020-10-14 11:29:29','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_ToolBarButton_ID=200095
+;
+
+-- Oct 14, 2020, 11:29:34 AM MYT
+UPDATE AD_ToolBarButton SET SeqNo=70,Updated=TO_DATE('2020-10-14 11:29:34','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_ToolBarButton_ID=200108
+;
+
+SELECT register_migration_script('202010141500_IDEMPIERE-4482.sql') FROM dual
+;
+

migration/i7.1z/postgresql/202010121700_IDEMPIERE-4482.sql

@@ -0,0 +1,15 @@
+-- Oct 12, 2020, 11:36:58 AM MYT
+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 (200159,0,0,TO_TIMESTAMP('2020-10-12 11:36:56','YYYY-MM-DD HH24:MI:SS'),TO_TIMESTAMP('2020-10-12 11:36:56','YYYY-MM-DD HH24:MI:SS'),100,100,'Y','ZK_GRID_MOBILE_EDITABLE','N','Mobile setting for AD Window Grid View. Y - Grid is editable. N - Grid is read only, must use form view to make changes.','D','S','f70a852c-84df-4de3-82c0-bdc7efda12ef')
+;
+
+-- Oct 12, 2020, 1:22:51 PM MYT
+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 (200160,0,0,TO_TIMESTAMP('2020-10-12 13:22:50','YYYY-MM-DD HH24:MI:SS'),TO_TIMESTAMP('2020-10-12 13:22:50','YYYY-MM-DD HH24:MI:SS'),100,100,'Y','ZK_GRID_MOBILE_LINE_BREAK_AS_IDENTIFIER_SEPARATOR','Y','Mobile setting for AD Window Grid View. Y - Replace identifier separator with line break. N - Use the configured identifier separator','D','S','31b780c9-4789-4feb-9f1a-35a87be34c73')
+;
+
+-- Oct 12, 2020, 2:41:17 PM MYT
+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 (200161,0,0,TO_TIMESTAMP('2020-10-12 14:41:17','YYYY-MM-DD HH24:MI:SS'),TO_TIMESTAMP('2020-10-12 14:41:17','YYYY-MM-DD HH24:MI:SS'),100,100,'Y','ZK_GRID_MOBILE_SHOW_CURRENT_ROW_INDICATOR','N','Mobile setting for AD Window Grid View. Y - add a column to display the current row indicator. N - no column created for current row indicator','D','S','aacc9992-7296-4d0d-b74b-c38f8e0f5a4d')
+;
+
+SELECT register_migration_script('202010121700_IDEMPIERE-4482.sql') FROM dual
+;
+

migration/i7.1z/postgresql/202010141500_IDEMPIERE-4482.sql

@@ -0,0 +1,15 @@
+-- Oct 14, 2020, 11:28:34 AM MYT
+INSERT INTO AD_ToolBarButton (AD_Client_ID,AD_Org_ID,Created,CreatedBy,ComponentName,IsActive,AD_ToolBarButton_ID,Name,Updated,UpdatedBy,IsCustomization,KeyStroke_KeyCode,KeyStroke_Modifiers,AD_ToolBarButton_UU,"action",SeqNo,IsAdvancedButton,IsAddSeparator,EntityType,IsShowMore) VALUES (0,0,TO_TIMESTAMP('2020-10-14 11:28:33','YYYY-MM-DD HH24:MI:SS'),100,'Customize','Y',200108,'Detail - Customize',TO_TIMESTAMP('2020-10-14 11:28:33','YYYY-MM-DD HH24:MI:SS'),100,'N',0,0,'5b08fba8-f90e-4e27-8690-e4c7bbc242d2','D',0,'N','N','D','N')
+;
+
+-- Oct 14, 2020, 11:29:29 AM MYT
+UPDATE AD_ToolBarButton SET SeqNo=60,Updated=TO_TIMESTAMP('2020-10-14 11:29:29','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_ToolBarButton_ID=200095
+;
+
+-- Oct 14, 2020, 11:29:34 AM MYT
+UPDATE AD_ToolBarButton SET SeqNo=70,Updated=TO_TIMESTAMP('2020-10-14 11:29:34','YYYY-MM-DD HH24:MI:SS'),UpdatedBy=100 WHERE AD_ToolBarButton_ID=200108
+;
+
+SELECT register_migration_script('202010141500_IDEMPIERE-4482.sql') FROM dual
+;
+

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

@@ -175,8 +175,11 @@ public class MSysConfig extends X_AD_SysConfig
     public static final String ZK_FOOTER_SERVER_MSG = "ZK_FOOTER_SERVER_MSG";
     public static final String ZK_GRID_AFTER_FIND = "ZK_GRID_AFTER_FIND";
     public static final String ZK_GRID_EDIT_MODELESS = "ZK_GRID_EDIT_MODELESS";
+    public static final String ZK_GRID_MOBILE_EDITABLE = "ZK_GRID_MOBILE_EDITABLE";
     public static final String ZK_GRID_MOBILE_EDIT_MODELESS = "ZK_GRID_MOBILE_EDIT_MODELESS";
+    public static final String ZK_GRID_MOBILE_LINE_BREAK_AS_IDENTIFIER_SEPARATOR = "ZK_GRID_MOBILE_LINE_BREAK_AS_IDENTIFIER_SEPARATOR";
     public static final String ZK_GRID_MOBILE_MAX_COLUMNS = "ZK_GRID_MOBILE_MAX_COLUMNS";
+    public static final String ZK_GRID_MOBILE_SHOW_CURRENT_ROW_INDICATOR = "ZK_GRID_MOBILE_SHOW_CURRENT_ROW_INDICATOR";
     public static final String ZK_INFO_NUM_PAGE_PRELOAD = "ZK_INFO_NUM_PAGE_PRELOAD";
     public static final String ZK_LOGIN_ALLOW_CHROME_SAVE_PASSWORD = "ZK_LOGIN_ALLOW_CHROME_SAVE_PASSWORD";
     public static final String ZK_LOGIN_ALLOW_REMEMBER_ME = "ZK_LOGIN_ALLOW_REMEMBER_ME";

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

@@ -534,6 +534,10 @@ public class AdempiereWebUI extends Window implements EventListener<Event>, IWeb
 		Env.setContext(properties, ITheme.ZK_TOOLBAR_BUTTON_SIZE, Env.getContext(Env.getCtx(), ITheme.ZK_TOOLBAR_BUTTON_SIZE));
 		Env.setContext(properties, ITheme.USE_CSS_FOR_WINDOW_SIZE, Env.getContext(Env.getCtx(), ITheme.USE_CSS_FOR_WINDOW_SIZE));
 		Env.setContext(properties, ITheme.USE_FONT_ICON_FOR_IMAGE, Env.getContext(Env.getCtx(), ITheme.USE_FONT_ICON_FOR_IMAGE));
+		Env.setContext(properties, "#clientInfo_desktopWidth", clientInfo.desktopWidth);
+		Env.setContext(properties, "#clientInfo_desktopHeight", clientInfo.desktopHeight);
+		Env.setContext(properties, "#clientInfo_orientation", clientInfo.orientation);
+		Env.setContext(properties, "#clientInfo_mobile", clientInfo.tablet);
 		
 		Desktop desktop = Executions.getCurrent().getDesktop();
 		Locale locale = (Locale) desktop.getSession().getAttribute(Attributes.PREFERRED_LOCALE);

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

@@ -32,11 +32,11 @@ import org.zkoss.zk.ui.sys.ComponentCtrl;
  * @author Low Heng Sin
  *
  */
-public class ClientInfo implements Serializable {
+public class ClientInfo implements Serializable {	
 	/**
 	 * 
 	 */
-	private static final long serialVersionUID = -713195891415378500L;
+	private static final long serialVersionUID = -2686811277627911861L;
 	
 	public int colorDepth;
 	public int desktopWidth;
@@ -157,4 +157,11 @@ public class ClientInfo implements Serializable {
 		root.addEventListener(Events.ON_CLIENT_INFO, eventListener);
 		ctrl.addCallback(AFTER_PAGE_DETACHED, t -> root.removeEventListener(Events.ON_CLIENT_INFO, eventListener));
 	}
+	
+	/**
+	 * @return true if screen orientation is portrait, false otherwise
+	 */
+	public boolean isPortrait() {
+		return "portrait".equalsIgnoreCase(orientation);
+	}
 }

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

@@ -102,7 +102,6 @@ import org.zkoss.zk.ui.event.Event;
 import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zk.ui.event.OpenEvent;
-import org.zkoss.zk.ui.event.SwipeEvent;
 import org.zkoss.zk.ui.util.Clients;
 import org.zkoss.zul.Button;
 import org.zkoss.zul.Cell;
@@ -260,11 +259,48 @@ DataStatusListener, IADTabpanel, IdSpace, IFieldEditorContainer
         form.setVflex(false);
         form.setSclass("grid-layout adwindow-form");
         form.setWidgetAttribute(AdempiereWebUI.WIDGET_INSTANCE_NAME, "form");
+        if (ClientInfo.isMobile())
+        {
+	        form.addEventListener("onSwipeRight", e -> {
+	        	if (windowPanel != null && windowPanel.getBreadCrumb() != null && windowPanel.getBreadCrumb().isPreviousEnabled())
+					windowPanel.onPrevious();
+	        });
+	        form.addEventListener("onSwipeLeft", e -> {
+	        	if (windowPanel != null && windowPanel.getBreadCrumb() != null && windowPanel.getBreadCrumb().isNextEnabled())
+					windowPanel.onNext();
+	        });
+        }
         
         listPanel = new GridView();
         if( "Y".equals(Env.getContext(Env.getCtx(), "P|ToggleOnDoubleClick")) )
         	listPanel.getListbox().addEventListener(Events.ON_DOUBLE_CLICK, this);
     }
+
+	private void setupFormSwipeListener() {
+		String uuid = form.getUuid();
+		StringBuilder script = new StringBuilder("var w=zk.Widget.$('")
+				.append(uuid)
+				.append("');");
+		script.append("jq(w).on('touchstart', function(e) {var w=zk.Widget.$(this);w._touchstart=e;});");
+		script.append("jq(w).on('touchmove', function(e) {var w=zk.Widget.$(this);w._touchmove=e;});");
+		script.append("jq(w).on('touchend', function(e) {var w=zk.Widget.$(this);var ts = w._touchstart; var tl = w._touchmove;"
+				+ "w._touchstart=null;w._touchmove=null;"
+				+ "if (ts && tl) {"
+				+ "if (ts.originalEvent) ts = ts.originalEvent;"
+				+ "if (tl.originalEvent) tl = tl.originalEvent;"
+				+ "if (ts.changedTouches && ts.changedTouches.length==1 && tl.changedTouches && tl.changedTouches.length==1) {"
+				+ "var diff=(tl.timeStamp-ts.timeStamp)/1000;if (diff > 1) return;"
+				+ "var diffx=tl.changedTouches[0].pageX-ts.changedTouches[0].pageX;"
+				+ "var diffy=tl.changedTouches[0].pageY-ts.changedTouches[0].pageY;"
+				+ "if (Math.abs(diffx) >= 100 && Math.abs(diffy) < 80) {"
+				+ "if (diffx > 0) {var event = new zk.Event(w, 'onSwipeRight', null, {toServer: true});zAu.send(event);} "
+				+ "else {var event = new zk.Event(w, 'onSwipeLeft', null, {toServer: true});zAu.send(event);}"
+				+ "}"
+				+ "}"
+				+ "}"
+				+ "});");
+		Clients.response(new AuScript(script.toString()));
+	}
     
     @Override
     public void setDetailPane(DetailPane component) {
@@ -277,23 +313,7 @@ DataStatusListener, IADTabpanel, IdSpace, IFieldEditorContainer
 			LayoutUtils.addSlideSclass(south);
 			borderLayout.appendChild(south);
 			south.addEventListener(Events.ON_OPEN, this);
-			south.addEventListener(Events.ON_SLIDE, this);
+			south.addEventListener(Events.ON_SLIDE, this);			
-			
-			south.addEventListener(Events.ON_SWIPE, new EventListener<SwipeEvent>() {
-
-				@Override
-				public void onEvent(SwipeEvent event) throws Exception {
-					if ("down".equals(event.getSwipeDirection())) {
-						Borderlayout borderLayout = (Borderlayout) formContainer;
-						South south = borderLayout.getSouth();
-						if (south.isOpen()) {
-							south.setOpen(false);
-							OpenEvent openEvent = new OpenEvent(Events.ON_OPEN, south, false);
-							Events.postEvent(openEvent);
-						}
-					}
-				}
-			});
 		} 
 		south.appendChild(component);
 		
@@ -475,7 +495,7 @@ DataStatusListener, IADTabpanel, IdSpace, IFieldEditorContainer
 	    			diff = numCols - 6;
 	    			numCols=6;
 	    		}
-	    	}
+	    	}			
 		}
     	
     	this.numberOfFormColumns = numCols;
@@ -1181,7 +1201,7 @@ DataStatusListener, IADTabpanel, IdSpace, IFieldEditorContainer
         if (gridTab.getRecord_ID() > 0 && gridTab.isTreeTab() && treePanel != null) {
         	echoDeferSetSelectedNodeEvent();
         }
-        
+      
         Event event = new Event(ON_ACTIVATE_EVENT, this, activate);
         Events.postEvent(event);
     }
@@ -1921,6 +1941,8 @@ DataStatusListener, IADTabpanel, IdSpace, IFieldEditorContainer
 		super.setParent(parent);
 		if (parent != null) {
 			listPanel.onADTabPanelParentChanged();
+			if (ClientInfo.isMobile())
+				setupFormSwipeListener();
 		}
 	}
 

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

@@ -28,7 +28,6 @@ import java.util.Properties;
 import org.adempiere.util.Callback;
 import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.component.Tabpanel;
-import org.adempiere.webui.component.ToolBarButton;
 import org.adempiere.webui.panel.IHelpContext;
 import org.adempiere.webui.panel.ITabOnCloseHandler;
 import org.adempiere.webui.part.WindowContainer;
@@ -36,15 +35,12 @@ import org.adempiere.webui.session.SessionManager;
 import org.adempiere.webui.util.ZKUpdateUtil;
 import org.compiere.model.X_AD_CtxHelp;
 import org.compiere.util.CLogger;
-import org.zkoss.zk.au.out.AuScript;
 import org.zkoss.zk.ui.Component;
 import org.zkoss.zk.ui.Page;
 import org.zkoss.zk.ui.event.Event;
 import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zk.ui.event.KeyEvent;
-import org.zkoss.zk.ui.event.SwipeEvent;
-import org.zkoss.zk.ui.util.Clients;
 import org.zkoss.zul.Div;
 import org.zkoss.zul.Tab;
 import org.zkoss.zul.Vlayout;
@@ -98,44 +94,6 @@ public class ADWindowContent extends AbstractADWindowContent
         breadCrumb.setToolbarListener(this);
         breadCrumb.setId("breadCrumb");
         div.appendChild(breadCrumb);
-        div.addEventListener(Events.ON_SWIPE, new EventListener<SwipeEvent>() {
-			@Override
-			public void onEvent(SwipeEvent event) throws Exception {
-				if ("right".equals(event.getSwipeDirection())) {
-					ToolBarButton nextBtn = breadCrumb.getNextButton();
-					if (!nextBtn.isDisabled()) {
-						nextBtn.setDisabled(true);
-						String script = "var w=zk.Widget.$('#"+nextBtn.getUuid()+"');" +
-								"w.fire('onClick',null,{toServer:true});";
-						Clients.response(new AuScript(script));
-					}
-				} else if ("left".equals(event.getSwipeDirection())) {
-					ToolBarButton previousBtn = breadCrumb.getPreviousButton();
-					if (!previousBtn.isDisabled()) {
-						previousBtn.setDisabled(true);
-						String script = "var w=zk.Widget.$('#"+previousBtn.getUuid()+"');" +
-								"w.fire('onClick',null,{toServer:true});";
-						Clients.response(new AuScript(script));
-					}
-				} else if ("up".equals(event.getSwipeDirection())) {
-					ToolBarButton parentBtn = toolbar.getButton("ParentRecord");
-					if (!parentBtn.isDisabled()) {
-						parentBtn.setDisabled(true);
-						String script = "var w=zk.Widget.$('#"+parentBtn.getUuid()+"');" +
-								"w.fire('onClick',null,{toServer:true});";
-						Clients.response(new AuScript(script));
-					}
-				} else if ("down".equals(event.getSwipeDirection())) {
-					ToolBarButton detailBtn = toolbar.getButton("DetailRecord");
-					if (!detailBtn.isDisabled()) {
-						detailBtn.setDisabled(true);
-						String script = "var w=zk.Widget.$('#"+detailBtn.getUuid()+"');" +
-								"w.fire('onClick',null,{toServer:true});";
-						Clients.response(new AuScript(script));
-					}
-				}
-			}
-		});
         
         //status bar
         div.appendChild(statusBar);

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

@@ -1069,12 +1069,13 @@ public class ADWindowToolbar extends FToolbar implements EventListener<Event>
 				"		return;\n" + 
 				"	}\n" + 
 				"	for (; w; w = w.nextSibling) {\n" + 
-				"		total -= jq(w.$n()).outerWidth(true);\n" + 
+				"		var ow = jq(w.$n()).outerWidth(true);\n" +
+				"		if (typeof ow != 'undefined') {total -= ow;}\n" + 
 				"		if (total < 0 && w.className == 'zul.wgt.Toolbarbutton') {\n" + 
 				"			break;\n" + 
 				"		}\n" + 
 				"	}\n" + 
-				"	if (w) {\n" + 
+				"	if (w && total < 0) {\n" + 
 				"       var event = new zk.Event(wgt, 'onOverflowButton', w.uuid, {toServer: true}); \n" +
 				"       zAu.send(event); \n" +
 				"	}\n" +
@@ -1139,7 +1140,7 @@ public class ADWindowToolbar extends FToolbar implements EventListener<Event>
 		if (overflows.size() > 0) {
 			overflowButton = new A();
 			overflowButton.setIconSclass("z-icon-ShowMore");
-			overflowButton.setStyle("position: absolute; right: 4px; font-size: 18px; font-weight: 500; color: #333");
+			overflowButton.setStyle("position: absolute; right: 8px; font-weight: 500; color: #333");
 			appendChild(overflowButton);
 			overflowPopup = new Popup();
 			overflowPopup.addEventListener(Events.ON_OPEN, (OpenEvent oe) -> {

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

@@ -121,8 +121,6 @@ import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zk.ui.sys.ExecutionCtrl;
 import org.zkoss.zk.ui.util.Clients;
-import org.zkoss.zul.Column;
-import org.zkoss.zul.Columns;
 import org.zkoss.zul.Div;
 import org.zkoss.zul.Menuitem;
 import org.zkoss.zul.Menupopup;
@@ -1148,7 +1146,9 @@ public abstract class AbstractADWindowContent extends AbstractUIPart implements
 		form.setMaximizable(true);
 		form.setMaximized(true);
 		form.setPosition("center");
-		ZkCssHelper.appendStyle(form, "min-width: 500px; min-height: 400px; width: 900px; height:550px; z-index: 900;");
+		ZKUpdateUtil.setWindowHeightX(form, 550);
+		ZKUpdateUtil.setWindowWidthX(form, 900);
+		ZkCssHelper.appendStyle(form, "z-index: 900;");
 
 		AEnv.showWindow(form);
 	} // onQuickForm
@@ -3583,22 +3583,7 @@ public abstract class AbstractADWindowContent extends AbstractUIPart implements
      */
 	public void onCustomize() {
 		ADTabpanel tabPanel = (ADTabpanel) getADTab().getSelectedTabpanel();
-		Columns columns = tabPanel.getGridView().getListbox().getColumns();
+		CustomizeGridViewDialog.onCustomize(tabPanel);
-		List<Component> columnList = columns.getChildren();
-		GridField[] fields = tabPanel.getGridView().getFields();
-		Map<Integer, String> columnsWidth = new HashMap<Integer, String>();
-		ArrayList<Integer> gridFieldIds = new ArrayList<Integer>();
-		for (int i = 0; i < fields.length; i++) {
-			// 2 is offset of num of column in grid view and actual data fields.
-			// in grid view, add two function column, indicator column and selection (checkbox) column
-			// @see GridView#setupColumns
-			Column column = (Column) columnList.get(i+2);
-			String width = column.getWidth();
-			columnsWidth.put(fields[i].getAD_Field_ID(), width);
-			gridFieldIds.add(fields[i].getAD_Field_ID());
-
-		}
-		CustomizeGridViewDialog.showCustomize(0, adTabbox.getSelectedGridTab().getAD_Tab_ID(), columnsWidth,gridFieldIds,tabPanel.getGridView(), null, false);
 	}
 
 	/**

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

@@ -30,7 +30,6 @@ import org.adempiere.webui.event.ToolbarListener;
 import org.adempiere.webui.session.SessionManager;
 import org.adempiere.webui.theme.ITheme;
 import org.adempiere.webui.theme.ThemeManager;
-import org.adempiere.webui.util.ZKUpdateUtil;
 import org.adempiere.webui.window.WRecordInfo;
 import org.compiere.model.DataStatusEvent;
 import org.compiere.model.GridTab;
@@ -48,7 +47,6 @@ import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zk.ui.event.KeyEvent;
 import org.zkoss.zk.ui.util.Clients;
 import org.zkoss.zul.Div;
-import org.zkoss.zul.Hbox;
 import org.zkoss.zul.Hlayout;
 import org.zkoss.zul.Menuitem;
 
@@ -69,7 +67,7 @@ public class BreadCrumb extends Div implements EventListener<Event> {
 	
 	private static final String BTNPREFIX = "Btn";
 	
-	private Hbox layout;
+	private Hlayout layout;
 
 	private ToolBarButton btnFirst, btnPrevious, btnNext, btnLast, btnRecordInfo;
 	
@@ -101,18 +99,16 @@ public class BreadCrumb extends Div implements EventListener<Event> {
 	public BreadCrumb(AbstractADWindowContent windowContent, int windowNo) {
 		this.windowContent = windowContent;
 		this.windowNo = windowNo;
-		layout = new Hbox();
+		layout = new Hlayout();
-		layout.setPack("start");
+		layout.setValign("middle");
-		layout.setAlign("center");
 		this.appendChild(layout);
-		ZKUpdateUtil.setHeight(layout, "100%");
+		layout.setSclass("adwindow-breadcrumb-paths");
-		layout.setStyle("float: left");
 
 		this.setVisible(false);
 		this.setSclass("adwindow-breadcrumb");
 				
 		toolbarContainer = new Hlayout();
-		toolbarContainer.setStyle("display: inline-block; float: right");
+		toolbarContainer.setSclass("adwindow-breadcrumb-toolbar");
 		this.appendChild(toolbarContainer);
 		
 		ToolBar toolbar = new ToolBar();
@@ -137,7 +133,6 @@ public class BreadCrumb extends Div implements EventListener<Event> {
         btnLast.setTooltiptext(btnLast.getTooltiptext()+"    Alt+End");
         toolbar.appendChild(btnLast);
 
-		toolbar.setStyle("background-image: none; background-color: transparent; border: none;");
 		setWidgetAttribute(AdempiereWebUI.WIDGET_INSTANCE_NAME, "breadcrumb");
 		
 		this.addEventListener(ON_MOUSE_OUT_ECHO_EVENT, this);

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

@@ -24,6 +24,7 @@ import org.adempiere.webui.component.Window;
 import org.adempiere.webui.session.SessionManager;
 import org.adempiere.webui.theme.ThemeManager;
 import org.adempiere.webui.util.ZKUpdateUtil;
+import org.adempiere.webui.window.CustomizeGridViewDialog;
 import org.compiere.model.MToolBarButton;
 import org.compiere.util.Env;
 import org.compiere.util.Msg;
@@ -72,6 +73,8 @@ public class DetailPane extends Panel implements EventListener<Event>, IdSpace {
 	
 	private static final String BTN_QUICK_FORM_ID = "BtnQuickForm";
 
+	private static final String BTN_CUSTOMIZE_ID = "BtnCustomize";
+	
 	private static final String TABBOX_ONSELECT_ATTRIBUTE = "detailpane.tabbox.onselect";
 
 	public static final String ON_POST_SELECT_TAB_EVENT = "onPostSelectTab";
@@ -80,6 +83,7 @@ public class DetailPane extends Panel implements EventListener<Event>, IdSpace {
 
 	private static final String STATUS_ERROR_ATTRIBUTE = "status.error";
 
+	private static final String CUSTOMIZE_IMAGE = "images/Customize16.png";
 	private static final String DELETE_IMAGE = "images/Delete16.png";
 	private static final String EDIT_IMAGE = "images/EditRecord16.png";
 	private static final String NEW_IMAGE = "images/New16.png";
@@ -378,6 +382,17 @@ public class DetailPane extends Panel implements EventListener<Event>, IdSpace {
 		button.setTooltiptext(Util.cleanAmp(Msg.getMsg(Env.getCtx(), "QuickForm")));
 		buttons.put(BTN_QUICK_FORM_ID.substring(3, BTN_QUICK_FORM_ID.length()), button);
 		
+		// ADD Customize grid button
+		button = new ToolBarButton();
+		if (ThemeManager.isUseFontIconForImage())
+			button.setIconSclass("z-icon-Customize");
+		else
+			button.setImage(ThemeManager.getThemeResource(CUSTOMIZE_IMAGE));
+		button.setId(BTN_CUSTOMIZE_ID);
+		button.addEventListener(Events.ON_CLICK, e -> onCustomize(e));
+		button.setTooltiptext(Util.cleanAmp(Msg.getMsg(Env.getCtx(), "Customize")));
+		buttons.put(BTN_CUSTOMIZE_ID.substring(3, BTN_CUSTOMIZE_ID.length()), button);
+
 		MToolBarButton[] officialButtons = MToolBarButton.getToolbarButtons("D", null);
 		for (MToolBarButton toolbarButton : officialButtons) {
 			if ( !toolbarButton.isActive() ) {
@@ -433,6 +448,7 @@ public class DetailPane extends Panel implements EventListener<Event>, IdSpace {
 		messageContainer.setSclass("adwindow-detailpane-message");
 		messageContainer.setId("messages");
 		
+		toolbar.appendChild(new Space());
 		toolbar.appendChild(messageContainer);
 		toolbar.setSclass("adwindow-detailpane-toolbar");
 		ZKUpdateUtil.setVflex(toolbar, "0");
@@ -453,6 +469,13 @@ public class DetailPane extends Panel implements EventListener<Event>, IdSpace {
 		}
 	}
 	
+	protected void onCustomize(Event e) {
+		if (getSelectedADTabpanel() instanceof ADTabpanel) {
+			ADTabpanel tabPanel = (ADTabpanel) getSelectedADTabpanel();
+			CustomizeGridViewDialog.onCustomize(tabPanel);
+		}
+	}
+
 	protected void onProcess(Component button) {
 		ProcessButtonPopup popup = new ProcessButtonPopup();
 		ADTabpanel adtab = (ADTabpanel) getSelectedADTabpanel();

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

@@ -20,6 +20,7 @@ import java.util.Map.Entry;
 import java.util.Properties;
 
 import org.adempiere.util.GridRowCtx;
+import org.adempiere.webui.ClientInfo;
 import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.component.Button;
 import org.adempiere.webui.component.Checkbox;
@@ -475,19 +476,20 @@ public class GridTabRowRenderer implements RowRenderer<Object[]>, RowRendererExt
 		cell.appendChild(selection);
 		row.appendChild(cell);
 		
-		cell = new Cell();
+		if (isShowCurrentRowIndicatorColumn()) {
-		cell.addEventListener(Events.ON_CLICK, this);
+			cell = new Cell();
-		cell.setStyle("border: none;");
+			cell.addEventListener(Events.ON_CLICK, this);
-		cell.setTooltiptext(Util.cleanAmp(Msg.getMsg(Env.getCtx(), "EditRecord")));
+			cell.setStyle("border: none;");
-		if (ThemeManager.isUseFontIconForImage()) {
+			cell.setTooltiptext(Util.cleanAmp(Msg.getMsg(Env.getCtx(), "EditRecord")));
-			Label indicatorLabel = new Label();
+			if (ThemeManager.isUseFontIconForImage()) {
-			cell.appendChild(indicatorLabel);
+				Label indicatorLabel = new Label();
-			final Cell finalCell = cell;
+				cell.appendChild(indicatorLabel);
-			indicatorLabel.addEventListener(Events.ON_CLICK, evt->Events.postEvent(Events.ON_CLICK, finalCell, indicatorLabel.getSclass()));
+				final Cell finalCell = cell;
+				indicatorLabel.addEventListener(Events.ON_CLICK, evt->Events.postEvent(Events.ON_CLICK, finalCell, indicatorLabel.getSclass()));
+			}
+			cell.setValign("middle");
+			row.appendChild(cell);
 		}
-		cell.setValign("middle");
-		
-		row.appendChild(cell);
 		
 		Boolean isActive = null;
 		int colIndex = -1;
@@ -599,7 +601,7 @@ public class GridTabRowRenderer implements RowRenderer<Object[]>, RowRendererExt
 	 * @param row
 	 */
 	public void setCurrentRow(Row row) {
-		if (currentRow != null && currentRow.getParent() != null && currentRow != row) {
+		if (currentRow != null && currentRow.getParent() != null && currentRow != row && isShowCurrentRowIndicatorColumn()) {
 			Cell cell = (Cell) currentRow.getChildren().get(1);
 			if (cell != null) {
 				cell.setSclass("row-indicator");
@@ -609,7 +611,7 @@ public class GridTabRowRenderer implements RowRenderer<Object[]>, RowRendererExt
 		}
 		currentRow = row;
 		Cell cell = (Cell) currentRow.getChildren().get(1);
-		if (cell != null) {
+		if (cell != null && isShowCurrentRowIndicatorColumn()) {
 			if (ThemeManager.isUseFontIconForImage()) 
 			{
 				Label indicatorLabel = (Label) cell.getFirstChild();
@@ -668,13 +670,17 @@ public class GridTabRowRenderer implements RowRenderer<Object[]>, RowRendererExt
 	 * Enter edit mode
 	 */
 	public void editCurrentRow() {
+		if (ClientInfo.isMobile()) {
+			if (!MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_EDITABLE, false))
+				return;
+		}
 		if (currentRow != null && currentRow.getParent() != null && currentRow.isVisible()
 			&& grid != null && grid.isVisible() && grid.getParent() != null && grid.getParent().isVisible()) {
 			GridField[] gridPanelFields = gridPanel.getFields();
 			int columnCount = gridPanelFields.length;
 			org.zkoss.zul.Columns columns = grid.getColumns();
 			//skip selection and indicator column
-			int colIndex = 1;
+			int colIndex = isShowCurrentRowIndicatorColumn() ? 1 : 0;
 			for (int i = 0; i < columnCount; i++) {
 				if ((!isGridViewCustomized && !gridPanelFields[i].isDisplayedGrid()) || gridPanelFields[i].isToolbarOnlyButton()) {
 					continue;
@@ -921,4 +927,9 @@ public class GridTabRowRenderer implements RowRenderer<Object[]>, RowRendererExt
 			Events.sendEvent(gridPanel, new Event("onSelectRow", gridPanel, checkBox));
 		}
 	}
+
+	private boolean isShowCurrentRowIndicatorColumn() {
+		return gridPanel != null && gridPanel.isShowCurrentRowIndicatorColumn();
+	}
+
 }

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

@@ -75,6 +75,8 @@ import org.zkoss.zul.impl.CustomGridDataLoader;
  */
 public class GridView extends Vlayout implements EventListener<Event>, IdSpace, IFieldEditorContainer, StateChangeListener
 {
+	private static final int MIN_COLUMN_MOBILE_WIDTH = 100;
+
 	/**
 	 * 
 	 */
@@ -144,6 +146,8 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 	
 	boolean isHasCustomizeData = false;
 
+	private boolean showCurrentRowIndicatorColumn = true;
+
 	public GridView()
 	{
 		this(0);
@@ -184,7 +188,7 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 		
 		//default true for better UI experience
 		if (ClientInfo.isMobile())
-			modeless = MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_EDIT_MODELESS, false);
+			modeless = MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_EDIT_MODELESS, false) && MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_EDITABLE, false);
 		else
 			modeless = MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_EDIT_MODELESS, true);
 		
@@ -272,7 +276,7 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 		if (paging != null && paging.getPageSize() != pageSize) {
 			paging.setPageSize(pageSize);
 			updateModel();
-			if (paging.getPageSize() > 1) {
+			if (paging.getPageCount() > 1) {
 				showPagingControl();
 			} else {
 				hidePagingControl();
@@ -534,6 +538,7 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 		}
 		
 		org.zkoss.zul.Column selection = new Column();
+		selection.setHeight("2em");
 		ZKUpdateUtil.setWidth(selection, "22px");
 		try{
 			selection.setSort("none");
@@ -545,13 +550,21 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 		selectAll.addEventListener(Events.ON_CHECK, this);
 		columns.appendChild(selection);
 		
-		org.zkoss.zul.Column indicator = new Column();				
+		if (ClientInfo.isMobile())
-		ZKUpdateUtil.setWidth(indicator, "22px");
+			showCurrentRowIndicatorColumn = MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_SHOW_CURRENT_ROW_INDICATOR, false);
-		try {
+		
-			indicator.setSort("none");
+		if (showCurrentRowIndicatorColumn)
-		} catch (Exception e) {}
+		{
-		indicator.setStyle("border-left: none");
+			org.zkoss.zul.Column indicator = new Column();
-		columns.appendChild(indicator);
+			indicator.setHeight("2em");
+			ZKUpdateUtil.setWidth(indicator, "22px");
+			try {
+				indicator.setSort("none");
+			} catch (Exception e) {}
+			indicator.setStyle("border-left: none");
+			columns.appendChild(indicator);
+		}
+		
 		listbox.appendChild(columns);
 		columns.setSizable(true);
 		columns.setMenupopup("none");
@@ -568,6 +581,7 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 				colnames.put(index, gridField[i].getHeader());
 				index++;
 				org.zkoss.zul.Column column = new Column();
+				column.setHeight("2em");
 				int colindex =tableModel.findColumn(gridField[i].getColumnName()); 
 				column.setSortAscending(new SortComparator(colindex, true, Env.getLanguage(Env.getCtx())));
 				column.setSortDescending(new SortComparator(colindex, false, Env.getLanguage(Env.getCtx())));
@@ -612,7 +626,7 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 							estimatedWidth = headerWidth;
 						
 						//hflex=min for first column not working well
-						if (i > 0)
+						if (i > 0 && !ClientInfo.isMobile())
 						{
 							if (DisplayType.isLookup(gridField[i].getDisplayType()))
 							{
@@ -633,10 +647,19 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 						
 						//set estimated width if not using hflex=min
 						if (!"min".equals(column.getHflex())) {
-							if (estimatedWidth > MAX_COLUMN_WIDTH)
+							if (ClientInfo.isMobile() && ClientInfo.get() != null &&
-								estimatedWidth = MAX_COLUMN_WIDTH;
+								ClientInfo.get().desktopWidth <= ClientInfo.SMALL_WIDTH) {
-							else if ( estimatedWidth < MIN_COLUMN_WIDTH)
+								int maxWidth = ClientInfo.get().desktopWidth / 5;
-								estimatedWidth = MIN_COLUMN_WIDTH;
+								if (maxWidth < MIN_COLUMN_MOBILE_WIDTH)
+									maxWidth = MIN_COLUMN_MOBILE_WIDTH;
+								if (estimatedWidth > maxWidth)
+									estimatedWidth = maxWidth;
+							} else {
+								if (estimatedWidth > MAX_COLUMN_WIDTH)
+									estimatedWidth = MAX_COLUMN_WIDTH;
+								else if ( estimatedWidth < MIN_COLUMN_WIDTH)
+									estimatedWidth = MIN_COLUMN_WIDTH;								
+							}
 							ZKUpdateUtil.setWidth(column, Integer.toString(estimatedWidth) + "px");
 						}
 					}
@@ -1276,4 +1299,8 @@ public class GridView extends Vlayout implements EventListener<Event>, IdSpace,
 		editorTraverse(editorTaverseCallback, renderer.getEditors());
 		
 	}
+	
+	public boolean isShowCurrentRowIndicatorColumn() {
+		return showCurrentRowIndicatorColumn;
+	}
 }

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

@@ -219,7 +219,7 @@ public class QuickGridView extends Vbox
 		}
 		//default true for better UI experience
 		if (ClientInfo.isMobile())
-			modeless = MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_EDIT_MODELESS, false);
+			modeless = MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_EDIT_MODELESS, false) && MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_EDITABLE, false);
 		else
 			modeless = MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_EDIT_MODELESS, true);
 		

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

@@ -17,6 +17,7 @@
 
 package org.adempiere.webui.adwindow;
 
+import org.adempiere.webui.ClientInfo;
 import org.adempiere.webui.LayoutUtils;
 import org.adempiere.webui.apps.form.WQuickForm;
 import org.adempiere.webui.component.DocumentLink;
@@ -105,6 +106,9 @@ public class StatusBar extends Panel implements EventListener<Event>
         
         appendChild(west);
         appendChild(east);
+        
+        if (ClientInfo.isMobile())
+        	ClientInfo.onClientInfo(this, this::onClientInfo);
     }
 
     /**
@@ -171,11 +175,35 @@ public class StatusBar extends Panel implements EventListener<Event>
     	String labelText = buildLabelText(m_statusText);
     	if (error) {
     		Notification.show(buildNotificationText(m_statusText), "error", findTabpanel(this), "top_left", 3500, true);
+    	} else if (ClientInfo.maxWidth(ClientInfo.SMALL_WIDTH)) {
+    		Notification.show(buildNotificationText(m_statusText), "info", findTabpanel(this), "top_left", 2000, true);
     	}
-    	Label label = new Label(labelText);
+    	
     	messageContainer.setSclass(error ? "docstatus-error" : "docstatus-normal");
-    	messageContainer.appendChild(label);
+    	if (!ClientInfo.maxWidth(ClientInfo.SMALL_WIDTH))
-		if (m_logs != null) {
+    	{
+	    	Label label = new Label(labelText);	    	
+	    	messageContainer.appendChild(label);	
+			if (labelText.length() != m_statusText.length() || (div != null && div.getChildren().size() > 0)) {
+				label.addEventListener(Events.ON_CLICK, this);
+				label.setStyle("cursor: pointer");
+			
+				label = new Label(" ...");
+				label.setStyle("cursor: pointer");
+				messageContainer.appendChild(label);
+				label.addEventListener(Events.ON_CLICK, this);
+			}	    	
+	    	messageContainer.appendChild(new Space());	  
+    	}
+    	else
+    	{
+    		Label label = new Label("...");
+			label.setStyle("cursor: pointer");
+			messageContainer.appendChild(label);
+			label.addEventListener(Events.ON_CLICK, this);
+    	}
+    	
+    	if (m_logs != null) {
 			div = new Div();
 			for (int i = 0; i < m_logs.length; i++) {
 				if (m_logs[i].getP_Msg() != null) {
@@ -189,24 +217,12 @@ public class StatusBar extends Panel implements EventListener<Event>
 				}
 			}
 		}
-
-		if (labelText.length() != m_statusText.length() || (div != null && div.getChildren().size() > 0)) {
-			label.addEventListener(Events.ON_CLICK, this);
-			label.setStyle("cursor: pointer");
-		
-			label = new Label(" ...");
-			label.setStyle("cursor: pointer");
-			messageContainer.appendChild(label);
-			label.addEventListener(Events.ON_CLICK, this);
-		}
     	
-    	messageContainer.appendChild(new Space());
     	createPopupContent();
     	if(div!=null)
     	{
     		msgPopupCnt.appendChild(div);
     	}
-        
     }
 
     private String buildLabelText(String statusText) {
@@ -295,11 +311,14 @@ public class StatusBar extends Panel implements EventListener<Event>
 		msgPopup.setClosable(true);
 		msgPopup.setSizable(true);
 		msgPopup.setContentStyle("overflow: auto");
-		ZKUpdateUtil.setWidth(msgPopup, "500px");
+		ZKUpdateUtil.setWindowWidthX(msgPopup, 500);
         msgPopup.appendChild(msgPopupCnt);
         msgPopup.setShadow(true);
         msgPopupCaption = new Caption();
         msgPopup.appendChild(msgPopupCaption);        
 	}
 
-		}
+    protected void onClientInfo() {
+    	ZKUpdateUtil.setWindowWidthX(msgPopup, 500);
+    }
+}

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

@@ -170,7 +170,7 @@ public class GlobalSearch extends Div implements EventListener<Event> {
         } else if (event.getName().equals(ON_CREATE_ECHO)) {
     		StringBuilder script = new StringBuilder("jq('#")
     			.append(bandbox.getUuid())
-    			.append("').bind('keydown', function(e) {var code=e.keyCode||e.which;console.log(code);if(code==13){")
+    			.append("').bind('keydown', function(e) {var code=e.keyCode||e.which;if(code==13){")
     			.append("var widget=zk.Widget.$(this);")
     			.append("var event=new zk.Event(widget,'")
     			.append(ON_ENTER_KEY)

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

@@ -40,6 +40,8 @@ import org.zkoss.zul.Messagebox;
  **/
 public final class ConfirmPanel extends Div
 {
+	private static final String SMALL_SCREEN_BUTTON_CLASS = "btn-small small-img-btn";
+
 	/**
 	 * 
 	 */
@@ -243,6 +245,8 @@ public final class ConfirmPanel extends Div
 
 	private String extraButtonSClass;
 
+	private boolean useSmallButtonClassForSmallScreen;
+
     /**
      * initialise components
      */
@@ -301,6 +305,8 @@ public final class ConfirmPanel extends Div
     	if (!buttonMap.containsKey(button.getId()))
     		buttonMap.put(button.getId(), button);
         pnlBtnLeft.appendChild(button);
+        if (useSmallButtonClassForSmallScreen)
+        	LayoutUtils.addSclass(SMALL_SCREEN_BUTTON_CLASS, button);
     }
 
     /**
@@ -312,6 +318,8 @@ public final class ConfirmPanel extends Div
     	if (!buttonMap.containsKey(button.getId()))
     		buttonMap.put(button.getId(), button);
         pnlBtnRight.appendChild(button);
+        if (useSmallButtonClassForSmallScreen)
+        	LayoutUtils.addSclass(SMALL_SCREEN_BUTTON_CLASS, button);
     }
 
     /**
@@ -324,6 +332,8 @@ public final class ConfirmPanel extends Div
     	if (!buttonMap.containsKey(button.getId()))
     		buttonMap.put(button.getId(), button);
         pnlBtnCenter.appendChild(button);
+        if (useSmallButtonClassForSmallScreen)
+        	LayoutUtils.addSclass(SMALL_SCREEN_BUTTON_CLASS, button);
     }
 
     /**
@@ -561,4 +571,9 @@ public final class ConfirmPanel extends Div
 			LayoutUtils.removeSclass(cls, btn);
 		}
 	}
+
+	public void useSmallButtonClassForSmallScreen() {
+		useSmallButtonClassForSmallScreen = true;
+		addButtonSclass(SMALL_SCREEN_BUTTON_CLASS);
+	}
 }   //  ConfirmPanel

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

@@ -332,7 +332,7 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
         	btn.setIconSclass("z-icon-remove");
         	btn.addEventListener(Events.ON_CLICK, evt -> eastPopup.close());
         	eastPopup.appendChild(btn);
-        	btn.setStyle("position: absolute; top: 4px; right: 4px; padding: 2px 6px;");
+        	btn.setStyle("position: absolute; top: 20px; right: 0px; padding: 2px 0px;");
         	eastPopup.setStyle("padding-top: 20px;");
         	eastPopup.appendChild(content);
         	eastPopup.setPage(getComponent().getPage());
@@ -577,7 +577,7 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
         		westPopup.removeAttribute(POPUP_OPEN_ATTR);
         	});
         	westPopup.appendChild(btn);
-        	btn.setStyle("position: absolute; top: 4px; right: 4px; padding: 2px 6px;");
+        	btn.setStyle("position: absolute; top: 10px; right: 0px; padding: 2px 0px;");
 		}
 		logo = pnlHead.getLogo();
 		if (mobile && logo != null)

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

@@ -51,12 +51,14 @@ import org.compiere.model.MColumn;
 import org.compiere.model.MLookup;
 import org.compiere.model.MLookupFactory;
 import org.compiere.model.MRole;
+import org.compiere.model.MSysConfig;
 import org.compiere.model.MTable;
 import org.compiere.model.X_AD_CtxHelp;
 import org.compiere.util.CLogger;
 import org.compiere.util.DisplayType;
 import org.compiere.util.Env;
 import org.compiere.util.NamePair;
+import org.compiere.util.Util;
 import org.zkoss.zk.au.out.AuScript;
 import org.zkoss.zk.ui.Component;
 import org.zkoss.zk.ui.Executions;
@@ -839,7 +841,18 @@ public class WSearchEditor extends WEditor implements ContextMenuListener, Value
 		super.dynamicDisplay(ctx);
 	}
 
-
+	@Override
+	public String getDisplayTextForGridView(Object value) {
+		String s = super.getDisplayTextForGridView(value);
+		if (ClientInfo.isMobile() && MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_LINE_BREAK_AS_IDENTIFIER_SEPARATOR, true)) {
+			String separator = MSysConfig.getValue(MSysConfig.IDENTIFIER_SEPARATOR, null, Env.getAD_Client_ID(Env.getCtx()));
+			if (!Util.isEmpty(separator, true) && s.indexOf(separator) >= 0) {
+				s = s.replace(separator, "\n");
+			}
+		}
+		return s;
+	}
+	
 	static class CustomSearchBox extends ComboEditorBox {
 
 		/**

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

@@ -25,6 +25,7 @@ import java.util.Properties;
 import javax.swing.event.ListDataEvent;
 import javax.swing.event.ListDataListener;
 
+import org.adempiere.webui.ClientInfo;
 import org.adempiere.webui.ValuePreference;
 import org.adempiere.webui.apps.AEnv;
 import org.adempiere.webui.component.AutoComplete;
@@ -47,6 +48,7 @@ import org.compiere.model.MLocation;
 import org.compiere.model.MLocator;
 import org.compiere.model.MLookup;
 import org.compiere.model.MRole;
+import org.compiere.model.MSysConfig;
 import org.compiere.model.MTable;
 import org.compiere.util.CCache;
 import org.compiere.util.CLogger;
@@ -789,7 +791,19 @@ ContextMenuListener, IZoomableEditor
 		public void setEditor(WTableDirEditor editor);
 		public void cleanup();
 	}
-	
+		
+	@Override
+	public String getDisplayTextForGridView(Object value) {
+		String s = super.getDisplayTextForGridView(value);
+		if (ClientInfo.isMobile( )&& MSysConfig.getBooleanValue(MSysConfig.ZK_GRID_MOBILE_LINE_BREAK_AS_IDENTIFIER_SEPARATOR, true)) {
+			String separator = MSysConfig.getValue(MSysConfig.IDENTIFIER_SEPARATOR, null, Env.getAD_Client_ID(Env.getCtx()));
+			if (!Util.isEmpty(separator, true) && s.indexOf(separator) >= 0) {
+				s = s.replace(separator, "\n");
+			}
+		}
+		return s;
+	}
+
 	private static class EditorCombobox extends Combobox implements ITableDirEditor {
 		/**
 		 * generated serial id
@@ -913,6 +927,8 @@ ContextMenuListener, IZoomableEditor
 				refresh("");
 			}
 		}
+		
+		
 	}
 	
 	private static class CCacheListener extends CCache<String, Object> {

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

@@ -41,7 +41,6 @@ import org.compiere.util.Util;
 import org.zkoss.zk.ui.event.Event;
 import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
-import org.zkoss.zk.ui.event.SwipeEvent;
 import org.zkoss.zul.Center;
 import org.zkoss.zul.South;
 
@@ -327,15 +326,6 @@ public class InfoProductWindow extends InfoWindow {
 		south.setSplittable(true);
 		south.setTitle(Msg.translate(Env.getCtx(), "WarehouseStock"));
 		south.setTooltiptext(Msg.translate(Env.getCtx(), "WarehouseStock"));
-		south.addEventListener(Events.ON_SWIPE, new EventListener<SwipeEvent>() {
-			@Override
-			public void onEvent(SwipeEvent event) throws Exception {
-				South south = (South) event.getTarget();
-				if ("down".equals(event.getSwipeDirection())) {
-					south.setOpen(false);
-				}
-			}
-		});
 		south.setSclass("south-collapsible-with-title");
 		if (ClientInfo.maxHeight(ClientInfo.MEDIUM_HEIGHT-1))
 		{

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

@@ -97,7 +97,6 @@ import org.zkoss.zk.ui.event.Event;
 import org.zkoss.zk.ui.event.EventListener;
 import org.zkoss.zk.ui.event.Events;
 import org.zkoss.zk.ui.event.SelectEvent;
-import org.zkoss.zk.ui.event.SwipeEvent;
 import org.zkoss.zk.ui.util.Clients;
 import org.zkoss.zul.Center;
 import org.zkoss.zul.Checkbox;
@@ -1355,16 +1354,6 @@ public class InfoWindow extends InfoPanel implements ValueChangeListener, EventL
 			south.setSplittable(true);
 			south.setTitle(Msg.translate(Env.getCtx(), "Related Information"));
 			south.setTooltiptext(Msg.translate(Env.getCtx(), "Related Information"));
-
-			south.addEventListener(Events.ON_SWIPE, new EventListener<SwipeEvent>() {
-				@Override
-				public void onEvent(SwipeEvent event) throws Exception {
-					South south = (South) event.getTarget();
-					if ("down".equals(event.getSwipeDirection())) {
-						south.setOpen(false);
-					}
-				}
-			});
 			south.setSclass("south-collapsible-with-title");
 			south.setAutoscroll(true);
 			//south.sets

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

@@ -364,7 +364,7 @@ public abstract class InfoPanel extends Window implements EventListener<Event>,
         {
         	if (ClientInfo.maxWidth(ClientInfo.SMALL_WIDTH) || ClientInfo.maxHeight(ClientInfo.SMALL_HEIGHT))
         	{
-        		confirmPanel.addButtonSclass("btn-small small-img-btn");
+        		confirmPanel.useSmallButtonClassForSmallScreen();
         	}
         }
 

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

@@ -112,7 +112,6 @@ public class WindowContainer extends AbstractUIPart implements EventListener<Eve
         	if (isMobile()) {
 	        	updateMobileTabState(tabbox.getSelectedTab());
 	        	updateTabListButton();
-	        	tabbox.getTabs().invalidate();
         	}
         });
         
@@ -531,8 +530,6 @@ public class WindowContainer extends AbstractUIPart implements EventListener<Eve
     	if (isMobile())
     		updateMobileTabState(tab);
     	tabbox.setSelectedTab(tab); 
-    	if (isMobile())
-    		tabbox.getTabs().invalidate();
     }
 
 	private void updateMobileTabState(org.zkoss.zul.Tab tab) {

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

@@ -1,8 +1,11 @@
 package org.adempiere.webui.window;
 
 import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 
+import org.adempiere.webui.adwindow.ADTabpanel;
 import org.adempiere.webui.adwindow.GridView;
 import org.adempiere.webui.adwindow.QuickGridView;
 import org.adempiere.webui.apps.AEnv;
@@ -11,8 +14,12 @@ import org.adempiere.webui.panel.CustomizeGridViewPanel;
 import org.adempiere.webui.theme.ThemeManager;
 import org.adempiere.webui.util.ZKUpdateUtil;
 import org.adempiere.webui.panel.QuickCustomizeGridViewPanel;
+import org.compiere.model.GridField;
 import org.compiere.util.Env;
 import org.compiere.util.Msg;
+import org.zkoss.zk.ui.Component;
+import org.zkoss.zul.Column;
+import org.zkoss.zul.Columns;
 
 public class CustomizeGridViewDialog extends Window {
 
@@ -52,30 +59,29 @@ public class CustomizeGridViewDialog extends Window {
 			customizePanel = new CustomizeGridViewPanel(windowNo, AD_Tab_ID, AD_User_ID, columnsWidth, gridFieldIds);
 		}
 		this.setStyle("position : relative;");
-		if (!ThemeManager.isUseCSSForWindowSize()) {
+		
-			ZKUpdateUtil.setWindowWidthX(this, 600);
-			ZKUpdateUtil.setWindowHeightX(this, 500);
-		} else {
-			addCallback(AFTER_PAGE_ATTACHED, t-> {
-				ZKUpdateUtil.setCSSHeight(this);
-				ZKUpdateUtil.setCSSWidth(this);
-			});
-		}
 		this.setBorder("normal");
 		this.setSclass("popup-dialog customize-grid-view-dialog");
 		
 		if (isQuickForm)
 		{
-			ZKUpdateUtil.setWidth(this, "500px");
+			ZKUpdateUtil.setWindowWidthX(this, 500);
-			ZKUpdateUtil.setHeight(this, "410px");
+			ZKUpdateUtil.setWindowHeightX(this, 410);
 			quickCustomizePanel.createUI();
 			quickCustomizePanel.loadData();
 			appendChild(quickCustomizePanel);
 		}
 		else
 		{
-			ZKUpdateUtil.setWidth(this, "600px");
+			if (!ThemeManager.isUseCSSForWindowSize()) {
-			ZKUpdateUtil.setHeight(this, "500px");
+				ZKUpdateUtil.setWindowWidthX(this, 600);
+				ZKUpdateUtil.setWindowHeightX(this, 500);
+			} else {
+				addCallback(AFTER_PAGE_ATTACHED, t-> {
+					ZKUpdateUtil.setCSSHeight(this);
+					ZKUpdateUtil.setCSSWidth(this);
+				});
+			}
 
 			appendChild(customizePanel);
 			customizePanel.createUI();
@@ -97,6 +103,31 @@ public class CustomizeGridViewDialog extends Window {
 		customizePanel.setGridPanel(gridPanel);
 	}
 
+	/**
+	 * show grid view customization dialog for tabPanel
+	 * @param tabPanel
+	 * @return true if saved is ok
+	 */
+	public static boolean onCustomize(ADTabpanel tabPanel) {
+		Columns columns = tabPanel.getGridView().getListbox().getColumns();
+		List<Component> columnList = columns.getChildren();
+		GridField[] fields = tabPanel.getGridView().getFields();
+		Map<Integer, String> columnsWidth = new HashMap<Integer, String>();
+		ArrayList<Integer> gridFieldIds = new ArrayList<Integer>();
+		for (int i = 0; i < fields.length; i++) {
+			// 2 is offset of num of column in grid view and actual data fields.
+			// in grid view, add two function column, indicator column and selection (checkbox) column
+			// @see GridView#setupColumns
+			int offset = tabPanel.getGridView().isShowCurrentRowIndicatorColumn() ? 2 : 1;
+			Column column = (Column) columnList.get(i+offset);
+			String width = column.getWidth();
+			columnsWidth.put(fields[i].getAD_Field_ID(), width);
+			gridFieldIds.add(fields[i].getAD_Field_ID());
+
+		}
+		return showCustomize(0, tabPanel.getGridTab().getAD_Tab_ID(), columnsWidth,gridFieldIds,tabPanel.getGridView(), null, false);
+	}
+	
 	/**
 	 * Show User customize (modal)
 	 * @param WindowNo window no

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

@@ -27,6 +27,7 @@ import java.util.Vector;
 import java.util.logging.Level;
 
 import org.adempiere.webui.AdempiereWebUI;
+import org.adempiere.webui.ClientInfo;
 import org.adempiere.webui.apps.AEnv;
 import org.adempiere.webui.component.ConfirmPanel;
 import org.adempiere.webui.component.Listbox;
@@ -221,6 +222,12 @@ public class WRecordInfo extends Window implements EventListener<Event>
 					}
 				}
 			});
+			
+			if (ClientInfo.isMobile())
+			{
+				group.setSelectedIndex(1);
+				Events.sendEvent(Events.ON_CHECK, group, null);
+			}
 		}
 		else
 		{

org.adempiere.ui.zk/WEB-INF/zk.xml

@@ -79,22 +79,22 @@
 	<library-property>
 		<name>org.zkoss.zul.theme.fontSizeM
 		</name>
-		<value>11px</value>
+		<value>14px</value>
 	</library-property>
 	<library-property>
 		<name>org.zkoss.zul.theme.fontSizeS
 		</name>
-		<value>10px</value>
+		<value>12px</value>
 	</library-property>
 	<library-property>
 		<name>org.zkoss.zul.theme.fontSizeXS
 		</name>
-		<value>9px</value>
+		<value>10px</value>
 	</library-property>
 	<library-property>
 		<name>org.zkoss.zul.theme.fontSizeMS
 		</name>
-		<value>11px</value>
+		<value>12px</value>
 	</library-property>	
 	<!-- turn off borderlayout animation -->	
 	<library-property>

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

@@ -3,7 +3,6 @@
 <%-- breadcrumb --%>
 .breadcrumb-toolbar-button {
 	background-color: transparent; 
-	height: 22px;
 }
 .breadcrumb-toolbar-button img {
 	width: 22px;
@@ -60,6 +59,7 @@
 	display: inline-block;
 	position: absolute;
 	right: 4px;
+	max-width: 90%;
 }
 
 .docstatus-normal .z-label {
@@ -89,12 +89,35 @@
 }
 
 .adwindow-breadcrumb {
-	height: 30px;
+	min-height: 30px;
 	background-color: #FFF;
 	padding: 0px;
 	padding-left: 5px;
 	border-bottom: 1px solid #C5C5C5 !important;
-	clear: both;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	justify-content: space-between
+}
+.adwindow-breadcrumb-paths {
+	display: inline-block;
+	padding: 4px 0px;
+}
+.adwindow-breadcrumb-toolbar {
+	display: inline-block; 
+	text-align: right;
+}
+.adwindow-breadcrumb-toolbar .z-toolbar {
+	background-image: none; 
+	background-color: transparent; 
+	border: none;
+}
+.adwindow-breadcrumb .breadcrumb-record-info.link {
+	padding-top: 4px;
+	padding-bottom: 0px;
+}
+.adwindow-breadcrumb .z-toolbarbutton-content {
+	line-height: inherit;
 }
 
 .adwindow-detailpane {
@@ -302,6 +325,9 @@
 .activity-card .help-content {
 	font-size: 13px;
 }
+.mobile .activity-card .help-content {
+	font-size: 16px;
+}
 .record-info-dialog .record-info-radiogroup {
 	padding: 4px 4px 8px 4px;
 }
@@ -309,3 +335,15 @@
 	margin-left: 3px;
 	margin-right: 3px;
 }
+
+@media only screen 
+  and (max-device-width: 700px) {
+	.adtab-grid > .z-cell > .z-label {
+		white-space: pre-line;
+	}	
+}
+.adtab-grid > .z-grid-header > table > tbody > tr.z-columns > th.z-column > .z-column-content {
+	white-space: pre-wrap;
+	text-overflow: ellipsis;
+}
+

org.adempiere.ui.zk/theme/default/css/fragment/application-menu.css.dsp

@@ -113,7 +113,10 @@
 .global-search-tabpanel {
 	width: 600px;
 }
-@media screen and (max-width: 599px) {
+@media screen and (max-width: 649px) {
+	.global-search-box.z-bandbox-popup {
+		width: 90% !important;
+	}
 	.global-search-tabpanel {
 		width: 100%;
 	}

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

@@ -255,7 +255,8 @@
 .window-container-toolbar-btn.z-toolbarbutton .z-toolbarbutton-content [class^="z-icon"] {
 	display:inline-flex;
 	align-items: center;
-	justify-content: center; 
+	justify-content: center;
+	border-bottom: 0px; 
 }
 
 .user-panel-popup .z-popup-content {

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

@@ -215,9 +215,13 @@
 .help-content
 {
 	padding: 2px;
-	font-size: 11px;
+	font-size: 12px;
 	font-weight: normal;
 }
+.mobile .help-content
+{
+	font-size: 14px;
+}
 
 .fav-new-btn.z-toolbarbutton [class^="z-icon-"] {
 	font-size: smaller;

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

@@ -58,7 +58,12 @@ div.z-column-cnt, div.z-grid-header div.z-auxheader-cnt {
 	display: inline-block;
 	width: 100%;
 }
-
+@media only screen 
+  and (max-device-width: 700px) {
+	.z-listcell > div.z-listcell-content {
+		white-space: pre-line;
+	}	
+}
 .z-column-content, .z-listheader-content, .z-listcell-content {
 	padding: 2px 3px 1px;
 }

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

@@ -32,3 +32,8 @@
 .info-panel.z-window .z-borderlayout > div > .z-north {
 	max-height: 50%;
 }
+
+.info-panel .z-listheader > .z-listheader-content {
+	white-space: pre-line;
+	text-overflow: ellipsis;
+}

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

@@ -45,6 +45,7 @@ when detect side effect, fix to only apply for parameter window*/
 	max-height: 300pt; 
 	overflow: hidden; 
 	margin: 10px;
+	line-height: normal;
 }
 
 .option-input-parameter{

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

@@ -14,3 +14,17 @@
 .z-tab-button :hover {
 	color: blue;
 }
+
+.z-tabbox-icon.z-tabbox-left-scroll, .z-tabbox-icon.z-tabbox-right-scroll {
+	padding: 0px;
+    border-radius: 0px;
+    background-color: transparent;
+    background: none;
+}
+
+.z-tabbox-icon.z-tabbox-left-scroll .z-icon-chevron-left, .z-tabbox-icon.z-tabbox-right-scroll .z-icon-chevron-right {
+	opacity: 1;
+}
+.z-tab-button > .z-icon-times.z-tab-icon {
+	margin-top: -9px;
+}

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

@@ -1,5 +1,6 @@
 .z-toolbar.z-toolbar-tabs {
 	padding-top: 0px;
+	padding-bottom: 0px;
 }
 
 .toolbar {
@@ -44,7 +45,6 @@
 }
 
 .z-toolbarbutton [class^="z-icon-"] {
-	font-size: larger;
 	color: inherit;
 }
 .z-toolbarbutton.toolbarbutton-with-text [class^="z-icon-"] {
@@ -99,7 +99,6 @@
     margin-right: 10px;
     margin-left: 10px;
     border: 1px;
-    padding: 1px;
 }
 @media screen and (max-width: 768px) {
   .toolbar-searchbox {

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

@@ -17,10 +17,17 @@ html,body {
 	margin:0px;
 }
 
-<%-- Tablet --%>
+[class*="z-"]:not([class*="z-icon-"]) {
+    font-size: 14px;
+}
+
+<%-- Mobile/Tablet --%>
 .tablet-scrolling {
 	-webkit-overflow-scrolling: touch;
 }
+.mobile [class*="z-"]:not([class*="z-icon-"]) {
+    font-size: 16px;
+}
 
 <%-- vbox fix for firefox and ie --%>
 table.z-vbox > tbody > tr > td > table {