IDEMPIERE-820 Zk: Improve consistency of dialog style.

This commit is contained in:
Heng Sin Low 2013-04-02 17:04:09 +08:00
parent 6066a7771a
commit 38bfcb0c7e
9 changed files with 193 additions and 89 deletions

View File

@ -190,6 +190,7 @@ public class ProcessDialog extends Window implements EventListener<Event>, IProc
div.setStyle("padding: 10px; text-align: center; text-align: -webkit-center; text-align: -moz-center; ");
South south = new South();
south.setSclass("dialog-footer");
layout.appendChild(south);
south.appendChild(div);
this.appendChild(layout);

View File

@ -58,6 +58,7 @@ import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.Div;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Html;
import org.zkoss.zul.Vlayout;
/**
*
@ -166,17 +167,22 @@ public class ProcessModalDialog extends Window implements EventListener<Event>,
this.setBorder("normal");
dialogBody = new VerticalBox();
dialogBody.setHflex("1");
Vlayout dialogContent = new Vlayout();
dialogContent.setHflex("1");
dialogContent.setVflex("1");
dialogContent.setSclass("dialog-content");
dialogBody.appendChild(dialogContent);
Div div = new Div();
div.setId("message");
message = new Html();
div.appendChild(message);
div.setStyle("max-height: 150pt; overflow: auto;");
dialogBody.appendChild(div);
dialogContent.appendChild(div);
centerPanel = new Panel();
dialogBody.appendChild(centerPanel);
dialogContent.appendChild(centerPanel);
Hbox hbox = new Hbox();
hbox.setWidth("100%");
hbox.setStyle("margin-top: 10px");
hbox.setSclass("dialog-footer");
Button btn = ButtonFactory.createNamedButton(ConfirmPanel.A_OK);
btn.setId("Ok");
btn.addEventListener(Events.ON_CLICK, this);
@ -190,6 +196,7 @@ public class ProcessModalDialog extends Window implements EventListener<Event>,
hbox.setPack("end");
dialogBody.appendChild(hbox);
this.appendChild(dialogBody);
this.setSclass("popup-dialog");
}

View File

@ -34,7 +34,6 @@ import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Image;
import org.zkoss.zul.Separator;
/**
* Messagebox : Replaces ZK's Messagebox
@ -111,6 +110,8 @@ public class Messagebox extends Window implements EventListener<Event>
private void init()
{
setSclass("popup-dialog");
Properties ctx = Env.getCtx();
lblMsg.setEncode(false);
lblMsg.setValue(msg);
@ -164,13 +165,12 @@ public class Messagebox extends Window implements EventListener<Event>
Hbox north = new Hbox();
north.setAlign("center");
north.setStyle("margin: 20pt 10pt 20pt 10pt;"); //trbl
this.appendChild(north);
north.appendChild(pnlImage);
north.appendChild(pnlMessage);
north.setSclass("dialog-content");
Hbox pnlButtons = new Hbox();
pnlButtons.setHeight("52px");
pnlButtons.setAlign("center");
pnlButtons.setPack("end");
pnlButtons.appendChild(btnOk);
@ -181,16 +181,9 @@ public class Messagebox extends Window implements EventListener<Event>
pnlButtons.appendChild(btnRetry);
pnlButtons.appendChild(btnIgnore);
Separator separator = new Separator();
separator.setWidth("100%");
separator.setBar(true);
this.appendChild(separator);
Hbox south = new Hbox();
south.setPack("end");
south.setWidth("100%");
this.appendChild(south);
south.appendChild(pnlButtons);
pnlButtons.setWidth("100%");
this.appendChild(pnlButtons);
pnlButtons.setSclass("dialog-footer");
this.setBorder("normal");
this.setContentStyle("background-color:#ffffff;");

View File

@ -28,6 +28,7 @@ import org.adempiere.util.Callback;
import org.adempiere.webui.AdempiereWebUI;
import org.adempiere.webui.apps.AEnv;
import org.adempiere.webui.component.Button;
import org.adempiere.webui.component.ConfirmPanel;
import org.adempiere.webui.component.Label;
import org.adempiere.webui.component.ListItem;
import org.adempiere.webui.component.Listbox;
@ -35,6 +36,7 @@ import org.adempiere.webui.component.Panel;
import org.adempiere.webui.component.Textbox;
import org.adempiere.webui.component.Window;
import org.adempiere.webui.event.DialogEvents;
import org.adempiere.webui.factory.ButtonFactory;
import org.adempiere.webui.theme.ThemeManager;
import org.adempiere.webui.window.FDialog;
import org.compiere.model.MAttachment;
@ -42,6 +44,7 @@ import org.compiere.model.MAttachmentEntry;
import org.compiere.util.CLogger;
import org.compiere.util.Env;
import org.compiere.util.Msg;
import org.compiere.util.Util;
import org.zkoss.util.media.AMedia;
import org.zkoss.util.media.Media;
import org.zkoss.zk.au.out.AuEcho;
@ -53,12 +56,13 @@ import org.zkoss.zk.ui.event.UploadEvent;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.Borderlayout;
import org.zkoss.zul.Center;
import org.zkoss.zul.Div;
import org.zkoss.zul.Filedownload;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Hlayout;
import org.zkoss.zul.Iframe;
import org.zkoss.zul.North;
import org.zkoss.zul.South;
import org.zkoss.zul.Vlayout;
/**
*
@ -91,13 +95,13 @@ public class WAttachment extends Window implements EventListener<Event>
private Listbox cbContent = new Listbox();
private Button bDelete = new Button();
private Button bDelete = ButtonFactory.createNamedButton(ConfirmPanel.A_DELETE, false, true);
private Button bSave = new Button();
private Button bDeleteAll = new Button();
private Button bLoad = new Button();
private Button bCancel = new Button();
private Button bOk = new Button();
private Button bRefresh = new Button();
private Button bCancel = ButtonFactory.createNamedButton(ConfirmPanel.A_CANCEL, false, true);
private Button bOk = ButtonFactory.createNamedButton(ConfirmPanel.A_OK, false, true);
private Button bRefresh = ButtonFactory.createNamedButton(ConfirmPanel.A_REFRESH, false, true);
private Panel previewPanel = new Panel();
@ -105,7 +109,7 @@ public class WAttachment extends Window implements EventListener<Event>
private Hbox toolBar = new Hbox();
private Hbox confirmPanel = new Hbox();
private Hlayout confirmPanel = new Hlayout();
private int displayIndex;
@ -214,16 +218,18 @@ public class WAttachment extends Window implements EventListener<Event>
this.setAttribute(AdempiereWebUI.WIDGET_INSTANCE_NAME, "attachment");
this.setMaximizable(true);
this.setWidth("700px");
this.setHeight("600px");
this.setHeight("88%");
this.setTitle("Attachment");
this.setClosable(true);
this.setSizable(true);
this.setBorder("normal");
this.setSclass("popup-dialog");
this.appendChild(mainPanel);
mainPanel.setHeight("100%");
mainPanel.setWidth("100%");
North northPanel = new North();
northPanel.setStyle("padding: 4px");
northPanel.setCollapsible(false);
northPanel.setSplittable(false);
@ -238,10 +244,10 @@ public class WAttachment extends Window implements EventListener<Event>
toolBar.appendChild(sizeLabel);
mainPanel.appendChild(northPanel);
Div div = new Div();
Vlayout div = new Vlayout();
div.appendChild(toolBar);
text.setRows(3);
text.setWidth("100%");
text.setHflex("1");
div.appendChild(text);
northPanel.appendChild(div);
@ -258,9 +264,6 @@ public class WAttachment extends Window implements EventListener<Event>
bLoad.setUpload(AdempiereWebUI.getUploadSetting());
bLoad.addEventListener(Events.ON_UPLOAD, this);
bDelete.setImage(ThemeManager.getThemeResource("images/Delete24.png"));
bDelete.setSclass("img-btn");
bDelete.setTooltiptext(Msg.getMsg(Env.getCtx(), "Delete"));
bDelete.addEventListener(Events.ON_CLICK, this);
previewPanel.appendChild(preview);
@ -268,6 +271,7 @@ public class WAttachment extends Window implements EventListener<Event>
preview.setWidth("100%");
Center centerPane = new Center();
centerPane.setSclass("dialog-content");
centerPane.setAutoscroll(true);
mainPanel.appendChild(centerPane);
centerPane.appendChild(previewPanel);
@ -275,30 +279,30 @@ public class WAttachment extends Window implements EventListener<Event>
previewPanel.setHflex("1");
South southPane = new South();
southPane.setSclass("dialog-footer");
mainPanel.appendChild(southPane);
southPane.appendChild(confirmPanel);
southPane.setHeight("30px");
southPane.setVflex("min");
bCancel.setImage(ThemeManager.getThemeResource("images/Cancel24.png"));
bCancel.setSclass("img-btn");
bCancel.addEventListener(Events.ON_CLICK, this);
bOk.setImage(ThemeManager.getThemeResource("images/Ok24.png"));
bOk.setSclass("img-btn");
bOk.addEventListener(Events.ON_CLICK, this);
bDeleteAll.setImage(ThemeManager.getThemeResource("images/Delete24.png"));
bDeleteAll.setSclass("img-btn");
bDeleteAll.addEventListener(Events.ON_CLICK, this);
bDeleteAll.setTooltiptext(Util.cleanAmp(Msg.getMsg(Env.getCtx(), "DeleteAll")));
bRefresh.setImage(ThemeManager.getThemeResource("images/Refresh24.png"));
bRefresh.setSclass("img-btn");
bRefresh.addEventListener(Events.ON_CLICK, this);
confirmPanel.appendChild(bDeleteAll);
confirmPanel.appendChild(bRefresh);
confirmPanel.appendChild(bOk);
confirmPanel.appendChild(bCancel);
confirmPanel.setHflex("1");
Hbox hbox = new Hbox();
hbox.setPack("end");
hbox.setHflex("1");
confirmPanel.appendChild(hbox);
hbox.appendChild(bOk);
hbox.appendChild(bCancel);
text.setTooltiptext(Msg.getElement(Env.getCtx(), "TextMsg"));

View File

@ -22,6 +22,7 @@ import java.util.List;
import java.util.logging.Level;
import org.adempiere.webui.AdempiereWebUI;
import org.adempiere.webui.LayoutUtils;
import org.adempiere.webui.component.ConfirmPanel;
import org.adempiere.webui.component.Grid;
import org.adempiere.webui.component.GridFactory;
@ -48,6 +49,7 @@ import org.zkoss.zul.Label;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.Space;
import org.zkoss.zul.Vlayout;
@ -244,16 +246,23 @@ public class WDocActionPanel extends Window implements EventListener<Event>, Dia
private void init()
{
setSclass("popup-dialog");
Vlayout vlayout = new Vlayout();
vlayout.setHflex("1");
vlayout.setVflex("1");
this.appendChild(vlayout);
setWidgetAttribute(AdempiereWebUI.WIDGET_INSTANCE_NAME, "documentAction");
Grid grid = GridFactory.newGridLayout();
grid.setStyle("width: 390px; margin: auto;");
grid.setStyle("background-image: none;");
LayoutUtils.addSclass("dialog-content", grid);
vlayout.appendChild(grid);
Rows rows = new Rows();
grid.appendChild(rows);
Row rowDocAction = new Row();
Row rowLabel = new Row();
Row rowConfirm = new Row();
Row rowSpacer = new Row();
Panel pnlDocAction = new Panel();
@ -263,21 +272,20 @@ public class WDocActionPanel extends Window implements EventListener<Event>, Dia
rowDocAction.appendChild(pnlDocAction);
rowLabel.appendChild(label);
rowConfirm.appendChild(confirmPanel);
rowSpacer.appendChild(new Space());
rows.appendChild(rowDocAction);
rows.appendChild(rowLabel);
rows.appendChild(rowSpacer);
rows.appendChild(rowConfirm);
grid.appendChild(rows);
vlayout.appendChild(confirmPanel);
LayoutUtils.addSclass("dialog-footer", confirmPanel);
this.setTitle(Msg.translate(Env.getCtx(), "DocAction"));
this.setWidth("410px");
this.setBorder("normal");
this.setStyle("position: absolute");
this.setStyle("position: absolute; margin: 0; padding: 0");
this.setZindex(1000);
this.appendChild(grid);
}
/**

View File

@ -47,6 +47,7 @@ import org.zkoss.zul.Div;
import org.zkoss.zul.Filedownload;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Vbox;
import org.zkoss.zul.Vlayout;
/**
*
@ -99,6 +100,7 @@ public class ExportAction implements EventListener<Event>
winExportFile.setClosable(true);
winExportFile.setBorder("normal");
winExportFile.setStyle("position:absolute");
winExportFile.setSclass("popup-dialog");
winExportFile.setWidgetAttribute(AdempiereWebUI.WIDGET_INSTANCE_NAME, "exportAction");
cboType.setMold("select");
@ -115,6 +117,10 @@ public class ExportAction implements EventListener<Event>
vb.setWidth("100%");
winExportFile.appendChild(vb);
Vlayout vlayout = new Vlayout();
vlayout.setSclass("dialog-content");
vb.appendChild(vlayout);
Hbox hb = new Hbox();
Div div = new Div();
div.setStyle("text-align: right;");
@ -122,14 +128,15 @@ public class ExportAction implements EventListener<Event>
hb.appendChild(div);
hb.appendChild(cboType);
cboType.setWidth("100%");
vb.appendChild(hb);
vlayout.appendChild(hb);
hb = new Hbox();
chkCurrentRow.setLabel(Msg.getMsg(Env.getCtx(), "ExportCurrentRowOnly"));
chkCurrentRow.setSelected(true);
hb.appendChild(chkCurrentRow);
vb.appendChild(hb);
vlayout.appendChild(hb);
LayoutUtils.addSclass("dialog-footer", confirmPanel);
vb.appendChild(confirmPanel);
confirmPanel.addActionListener(this);
}

View File

@ -56,6 +56,7 @@ import org.zkoss.zul.Div;
import org.zkoss.zul.Filedownload;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Vbox;
import org.zkoss.zul.Vlayout;
/**
*
@ -136,6 +137,7 @@ public class FileImportAction implements EventListener<Event>
winImportFile.setBorder("normal");
winImportFile.setStyle("position:absolute");
winImportFile.setWidgetAttribute(AdempiereWebUI.WIDGET_INSTANCE_NAME, "importAction");
winImportFile.setSclass("popup-dialog");
cboType.setMold("select");
@ -151,6 +153,10 @@ public class FileImportAction implements EventListener<Event>
vb.setWidth("100%");
winImportFile.appendChild(vb);
Vlayout vlayout = new Vlayout();
vlayout.setSclass("dialog-content");
vb.appendChild(vlayout);
Hbox hb = new Hbox();
Div div = new Div();
div.setStyle("text-align: right;");
@ -158,7 +164,7 @@ public class FileImportAction implements EventListener<Event>
hb.appendChild(div);
hb.appendChild(cboType);
cboType.setWidth("100%");
vb.appendChild(hb);
vlayout.appendChild(hb);
hb = new Hbox();
Div div2 = new Div();
@ -170,7 +176,7 @@ public class FileImportAction implements EventListener<Event>
fCharset.setTooltiptext(Msg.getMsg(Env.getCtx(), "Charset", false));
hb.appendChild(fCharset);
fCharset.setWidth("100%");
vb.appendChild(hb);
vlayout.appendChild(hb);
hb = new Hbox();
Div div3 = new Div();
@ -182,7 +188,7 @@ public class FileImportAction implements EventListener<Event>
fImportMode.setTooltiptext(Msg.getMsg(Env.getCtx(), "import.mode", false));
hb.appendChild(fImportMode);
fImportMode.setWidth("100%");
vb.appendChild(hb);
vlayout.appendChild(hb);
hb = new Hbox();
bFile.setLabel(Msg.getMsg(Env.getCtx(), "FileImportFile"));
@ -190,8 +196,9 @@ public class FileImportAction implements EventListener<Event>
bFile.setUpload(AdempiereWebUI.getUploadSetting());
bFile.addEventListener(Events.ON_UPLOAD, this);
hb.appendChild(bFile);
vb.appendChild(hb);
vlayout.appendChild(hb);
LayoutUtils.addSclass("dialog-footer", confirmPanel);
vb.appendChild(confirmPanel);
confirmPanel.addActionListener(this);
}

View File

@ -23,6 +23,7 @@ import java.util.Map;
import java.util.logging.Level;
import org.adempiere.webui.AdempiereWebUI;
import org.adempiere.webui.LayoutUtils;
import org.adempiere.webui.component.Button;
import org.adempiere.webui.component.ConfirmPanel;
import org.adempiere.webui.component.Label;
@ -50,6 +51,7 @@ import org.zkoss.zul.Treecell;
import org.zkoss.zul.Treechildren;
import org.zkoss.zul.Treeitem;
import org.zkoss.zul.Treerow;
import org.zkoss.zul.Vlayout;
/**
* Application Chat
@ -133,39 +135,44 @@ public class WChat extends Window implements EventListener<Event>, DialogEvents
*/
private void staticInit () throws Exception
{
this.setSclass("popup-dialog");
this.setStyle("position: absolute");
this.setAttribute(AdempiereWebUI.WIDGET_INSTANCE_NAME, "chat");
this.appendChild(mainPanel);
mainPanel.setStyle("position:absolute; height:90%; width:95%; border: none; background-color: white;");
mainPanel.setStyle("border: none; background-color: white;");
//
Center center = new Center();
messageTree.setHflex("true");
messageTree.setVflex("true");
center.appendChild(messageTree);
Vlayout content = new Vlayout();
content.setHflex("1");
content.setVflex("1");
content.setSclass("dialog-content");
center.appendChild(content);
messageTree.setHflex("1");
messageTree.setVflex("1");
content.appendChild(messageTree);
center.setAutoscroll(true);
mainPanel.appendChild(center);
//
// South
Div southDiv = new Div();
South south = new South();
south.setHeight("130px");
south.setStyle("border: none; margin-top: 10px");
south.appendChild(southDiv);
southDiv.setStyle("position:absolute; height:130px; width:100%");
mainPanel.appendChild(south);
southDiv.appendChild(newText);
content.appendChild(newText);
newText.setRows(3);
newText.setMultiline(true);
newText.setHflex("1");
newText.setVflex("min");
addButton = new Button(Util.cleanAmp(Msg.getMsg(Env.getCtx(), "Add")));
addButton.addActionListener(this);
southDiv.appendChild(addButton);
southDiv.appendChild(confirmPanel);
newText.setStyle("position:absolute; height:50px; width:99%");
newText.setMultiline(true);
addButton.setStyle("position:absolute; top: 53px;");
confirmPanel.setStyle("position:absolute; height:30px; width:99%; top:80px;");
confirmPanel.addActionListener(this);
content.appendChild(addButton);
// South
South south = new South();
south.setVflex("min");
mainPanel.appendChild(south);
LayoutUtils.addSclass("dialog-footer", confirmPanel);
confirmPanel.addActionListener(this);
south.appendChild(confirmPanel);
confirmPanel.setVflex("min");
this.setHeight("600px");
this.setHeight("88%");
this.setWidth("500px");
this.setMaximizable(true);
this.setSizable(true);

View File

@ -194,10 +194,41 @@ html,body {
}
<%-- button --%>
.z-button-os {
.z-button .z-button-tl,
.z-button .z-button-tr,
.z-button .z-button-bl,
.z-button .z-button-br
{
display: none;
background: none !important;
}
.z-button .z-button-tm,
.z-button .z-button-bm
{
display: none;
background: none !important;
}
.z-button .z-button-cl,
.z-button .z-button-cr
{
display: none;
background: none !important;
}
.z-button .z-button-cm
{
background: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.z-button-os, .z-button {
display: inline-block;
margin: 0px;
padding: 2px 10px;
padding: 4px 20px;
font-size: 12px;
line-height: 20px;
text-align: center;
@ -225,23 +256,27 @@ html,body {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.z-button-os:hover,
.z-button-os:focus,
.z-button-os:active,
.z-button-os.active,
.z-button-os.disabled,
.z-button {
margin: 0px !important;
}
.z-button-os:hover, .z-button-over,
.z-button-os:focus, .z-button-focus,
.z-button-os:active, .z-button-clk,
.z-button-os.active,
.z-button-os.disabled, .z-button-disd,
.z-button-os[disabled] {
color: #333333;
background-color: #e6e6e6;
}
.z-button-os:active,
.z-button-os:active, .z-button-clk,
.z-button-os.active {
background-color: #cccccc \9;
}
.z-button-os:hover,
.z-button-os:focus {
.z-button-os:hover, .z-button-over,
.z-button-os:focus, .z-button-focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
@ -251,11 +286,11 @@ html,body {
transition: background-position 0.1s linear;
}
.z-button-os:focus {
.z-button-os:focus, .z-button-focus {
outline: 5px auto -webkit-focus-ring-color;
}
.z-button-os.active,
.z-button-os.active, .z-button-clk,
.z-button-os:active {
background-image: none;
outline: 0;
@ -264,7 +299,7 @@ html,body {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.z-button-os.disabled,
.z-button-os.disabled, .z-button-disd,
.z-button-os[disabled] {
cursor: default;
background-image: none;
@ -1397,3 +1432,38 @@ font-size: 0;
.z-combobox-pp {
max-height: 200px;
}
<%-- dialog --%>
.popup-dialog .z-window-overlapped-cnt, .popup-dialog .z-window-highlighted-cnt {
padding: 0px;
}
.popup-dialog .z-window-overlapped-bl, .popup-dialog .z-window-highlighted-bl {
background-color: #f5f5f5;
}
.popup-dialog .dialog-content {
padding: 8px !important;
margin-bottom: 20px !important;
}
.popup-dialog.z-window-overlapped .dialog-footer {
padding: 12px 15px 8px 15px;
}
.popup-dialog.z-window-highlighted .dialog-footer {
padding: 12px 15px 5px 15px;
}
.dialog-footer {
margin-bottom: 0;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.btn-ok {
font-weight: bold;
}