midsuit
/
core-jgi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Heng Sin Low 2017-10-21 14:12:11 +08:00
parent 09bdb59024
commit 53bebb21da
7 changed files with 171 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) {

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

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

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

@ -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))

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

@ -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

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

@ -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();
ZKUpdateUtil.setHflex(box, "1");
Div box = new Div();
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
*

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

@ -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;
}
}

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

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