- enhance toolbar and header panel layout
This commit is contained in:
Heng Sin Low 2009-10-27 02:43:29 +00:00
parent af2c49e060
commit e9abedd6a7
5 changed files with 104 additions and 34 deletions

View File

@ -37,7 +37,7 @@ import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener; import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events; import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.event.KeyEvent; import org.zkoss.zk.ui.event.KeyEvent;
import org.zkoss.zul.Label; import org.zkoss.zul.Space;
/** /**
* *
@ -55,7 +55,9 @@ public class CWindowToolbar extends FToolbar implements EventListener
*/ */
private static final long serialVersionUID = -8259762910508209764L; private static final long serialVersionUID = -8259762910508209764L;
private static final String BUTTON_WIDTH = "32px"; private static final String TOOLBAR_BUTTON_STYLE = "background-color: transparent; display:inline-block; margin-left: 1px; margin-right: 1px; width: 26px; height: 24px;";
private static final String EMBEDDED_TOOLBAR_BUTTON_STYLE = "background: transparent none; display:inline-block; margin-left: 1px; margin-right: 1px; width: 20px; height: 18px;";
private static CLogger log = CLogger.getCLogger(CWindowToolbar.class); private static CLogger log = CLogger.getCLogger(CWindowToolbar.class);
@ -154,16 +156,6 @@ public class CWindowToolbar extends FToolbar implements EventListener
btnProductInfo = createButton("ProductInfo", "Product", "InfoProduct"); btnProductInfo = createButton("ProductInfo", "Product", "InfoProduct");
btnProductInfo.setVisible(isAllowProductInfo); btnProductInfo.setVisible(isAllowProductInfo);
for (Object obj : this.getChildren())
{
if (obj instanceof ToolBarButton)
{
((ToolBarButton)obj).setWidth(BUTTON_WIDTH);
((ToolBarButton)obj).addEventListener(Events.ON_CLICK, this);
((ToolBarButton)obj).setDisabled(true);
}
}
// Help and Exit should always be enabled // Help and Exit should always be enabled
btnHelp.setDisabled(false); btnHelp.setDisabled(false);
btnGridToggle.setDisabled(false); btnGridToggle.setDisabled(false);
@ -202,7 +194,15 @@ public class CWindowToolbar extends FToolbar implements EventListener
btn.setImage("/images/"+image + (embedded ? "16.png" : "24.png")); btn.setImage("/images/"+image + (embedded ? "16.png" : "24.png"));
btn.setTooltiptext(Msg.getMsg(Env.getCtx(),tooltip)); btn.setTooltiptext(Msg.getMsg(Env.getCtx(),tooltip));
if (embedded) if (embedded)
btn.setStyle("background: transparent none"); {
btn.setStyle(EMBEDDED_TOOLBAR_BUTTON_STYLE);
btn.setSclass("embedded-toolbar-button");
}
else
{
btn.setStyle(TOOLBAR_BUTTON_STYLE);
btn.setSclass("toolbar-button");
}
buttons.put(name, btn); buttons.put(name, btn);
this.appendChild(btn); this.appendChild(btn);
//make toolbar button last to receive focus //make toolbar button last to receive focus
@ -276,11 +276,13 @@ public class CWindowToolbar extends FToolbar implements EventListener
protected void addSeparator() protected void addSeparator()
{ {
Label lblSeparator = new Label(); Space s = new Space();
lblSeparator.setWidth("3px"); if (embedded)
lblSeparator.setHeight("16px"); s.setSpacing("3px");
lblSeparator.setValue(" "); else
this.appendChild(lblSeparator); s.setSpacing("6px");
s.setOrient("vertical");
this.appendChild(s);
} }
public void addListener(ToolbarListener toolbarListener) public void addListener(ToolbarListener toolbarListener)

View File

@ -17,6 +17,8 @@
package org.adempiere.webui.component; package org.adempiere.webui.component;
import org.adempiere.webui.LayoutUtils;
/** /**
* @author Sendy Yagambrum * @author Sendy Yagambrum
* @date July, 10 2007 * @date July, 10 2007
@ -36,7 +38,7 @@ public class ToolBarButton extends org.zkoss.zul.Toolbarbutton
public void setDisabled(boolean disabled) { public void setDisabled(boolean disabled) {
super.setDisabled(disabled); super.setDisabled(disabled);
if (disabled) { if (disabled) {
this.setSclass("disableFilter"); LayoutUtils.addSclass("disableFilter", this);
} else { } else {
if (this.getSclass() != null && this.getSclass().indexOf("disableFilter") >= 0) if (this.getSclass() != null && this.getSclass().indexOf("disableFilter") >= 0)
this.setSclass(this.getSclass().replace("disableFilter", "")); this.setSclass(this.getSclass().replace("disableFilter", ""));
@ -47,7 +49,7 @@ public class ToolBarButton extends org.zkoss.zul.Toolbarbutton
this.pressed = pressed; // Elaine 2008/12/09 this.pressed = pressed; // Elaine 2008/12/09
if (!isDisabled()) { if (!isDisabled()) {
if (pressed) { if (pressed) {
this.setSclass("depressed"); LayoutUtils.addSclass("depressed", this);
} else { } else {
if (this.getSclass() != null && this.getSclass().indexOf("depressed") >= 0) if (this.getSclass() != null && this.getSclass().indexOf("depressed") >= 0)
this.setSclass(this.getSclass().replace("depressed", "")); this.setSclass(this.getSclass().replace("depressed", ""));

View File

@ -53,7 +53,7 @@ public class HeaderPanel extends Panel implements EventListener
private void init() private void init()
{ {
LayoutUtils.addSclass("header", this); LayoutUtils.addSclass("desktop-header", this);
UserPanel userPanel = new UserPanel(); UserPanel userPanel = new UserPanel();
@ -62,7 +62,7 @@ public class HeaderPanel extends Panel implements EventListener
image.setStyle("cursor: pointer;"); image.setStyle("cursor: pointer;");
Borderlayout layout = new Borderlayout(); Borderlayout layout = new Borderlayout();
LayoutUtils.addSclass("header", layout); LayoutUtils.addSclass("desktop-header", layout);
layout.setParent(this); layout.setParent(this);
West west = new West(); West west = new West();
west.setParent(layout); west.setParent(layout);
@ -75,7 +75,7 @@ public class HeaderPanel extends Panel implements EventListener
image.setParent(vb); image.setParent(vb);
LayoutUtils.addSclass("header-left", west); LayoutUtils.addSclass("desktop-header-left", west);
//the following doesn't work when declare as part of the header-left style //the following doesn't work when declare as part of the header-left style
west.setStyle("background-color: transparent; border: none;"); west.setStyle("background-color: transparent; border: none;");
@ -87,7 +87,7 @@ public class HeaderPanel extends Panel implements EventListener
userPanel.setHeight("100%"); userPanel.setHeight("100%");
userPanel.setStyle("position: absolute"); userPanel.setStyle("position: absolute");
center.setFlex(true); center.setFlex(true);
LayoutUtils.addSclass("header-right", center); LayoutUtils.addSclass("desktop-header-right", center);
//the following doesn't work when declare as part of the header-right style //the following doesn't work when declare as part of the header-right style
center.setStyle("background-color: transparent; border: none;"); center.setStyle("background-color: transparent; border: none;");
} }

View File

@ -75,7 +75,7 @@ public class UserPanel extends Vbox implements EventListener
lblUserNameValue.setValue(getUserName() + "@" + getClientName() + "." + getOrgName()); lblUserNameValue.setValue(getUserName() + "@" + getClientName() + "." + getOrgName());
lblUserNameValue.setStyle("text-align:right"); lblUserNameValue.setStyle("text-align:right");
LayoutUtils.addSclass("headerFont", lblUserNameValue); LayoutUtils.addSclass("desktop-header-font", lblUserNameValue);
this.appendChild(lblUserNameValue); this.appendChild(lblUserNameValue);
Hbox hbox = new Hbox(); Hbox hbox = new Hbox();
@ -83,7 +83,7 @@ public class UserPanel extends Vbox implements EventListener
preference.setLabel(Msg.getMsg(Env.getCtx(), "Preference")); preference.setLabel(Msg.getMsg(Env.getCtx(), "Preference"));
preference.addEventListener(Events.ON_CLICK, this); preference.addEventListener(Events.ON_CLICK, this);
preference.setStyle("text-align:right"); preference.setStyle("text-align:right");
LayoutUtils.addSclass("headerFont", preference); LayoutUtils.addSclass("desktop-header-font", preference);
preference.setParent(hbox); preference.setParent(hbox);
Separator sep = new Separator("vertical"); Separator sep = new Separator("vertical");
@ -93,7 +93,7 @@ public class UserPanel extends Vbox implements EventListener
role.setLabel(this.getRoleName()); role.setLabel(this.getRoleName());
role.addEventListener(Events.ON_CLICK, this); role.addEventListener(Events.ON_CLICK, this);
role.setStyle("text-align:right"); role.setStyle("text-align:right");
LayoutUtils.addSclass("headerFont", role); LayoutUtils.addSclass("desktop-header-font", role);
role.setParent(hbox); role.setParent(hbox);
sep = new Separator("vertical"); sep = new Separator("vertical");
@ -103,7 +103,7 @@ public class UserPanel extends Vbox implements EventListener
logout.setLabel(Msg.getMsg(Env.getCtx(),"Logout")); logout.setLabel(Msg.getMsg(Env.getCtx(),"Logout"));
logout.addEventListener(Events.ON_CLICK, this); logout.addEventListener(Events.ON_CLICK, this);
logout.setStyle("text-align:right"); logout.setStyle("text-align:right");
LayoutUtils.addSclass("headerFont", logout); LayoutUtils.addSclass("desktop-header-font", logout);
logout.setParent(hbox); logout.setParent(hbox);
this.appendChild(hbox); this.appendChild(hbox);

View File

@ -6,6 +6,7 @@ html,body {
padding: 0; padding: 0;
height: 100%; height: 100%;
background-color: #D4E3F4; background-color: #D4E3F4;
overflow: hidden;
} }
<%-- login --%> <%-- login --%>
@ -85,13 +86,13 @@ html,body {
} }
<%-- header --%> <%-- header --%>
.header-left { .desktop-header-left {
margin: 0; margin: 0;
margin-left: 5px; margin-left: 5px;
margin-top: 3px; margin-top: 3px;
} }
.header-right { .desktop-header-right {
margin: 0; margin: 0;
margin-top: 3px; margin-top: 3px;
padding-right: 5px; padding-right: 5px;
@ -103,23 +104,48 @@ html,body {
-moz-opacity: 0.2; -moz-opacity: 0.2;
} }
.toolbar {
padding: 0px;
}
.toolbar-button img {
width: 22px;
height: 22px;
padding: 0px 1px 0px 1px;
border-style: solid;
border-width: 1px;
border-color: transparent;
}
.embedded-toolbar-button img {
width: 16px;
height: 16px;
padding: 0px 1px 0px 1px;
border-style: solid;
border-width: 1px;
border-color: transparent;
}
.depressed img { .depressed img {
border-style: inset; border-style: inset;
border-width: 1px; border-width: 1px;
border-color: #9CBDFF; border-color: #9CBDFF;
background-color: #C4DCFB; background-color: #C4DCFB;
-moz-border-radius: 5px; -moz-border-radius: 5px;
padding: 1px 4px 1px 4px; -webkit-border-radius: 5px;
padding: 0px 1px 0px 1px;
} }
.header { .desktop-header {
background-image: url(../images/header-bg.png); background-image: url(../images/header-bg.png);
background-repeat: repeat-x; background-repeat: repeat-x;
background-position: bottom left;
background-color: white;
width: 100%; width: 100%;
height: 35px; height: 35px;
} }
.headerFont { .desktop-header-font {
font-family: Verdana, Arial, Helvetica, sans-serif; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; font-size: 10px;
} }
@ -373,3 +399,43 @@ input:focus, textarea:focus, .z-combobox-inp:focus, z-datebox-inp:focus {
.mandatory-decorator-text { .mandatory-decorator-text {
text-decoration: none; font-size: xx-small; vertical-align: top; color:red; text-decoration: none; font-size: xx-small; vertical-align: top; color:red;
} }
<%-- menu tree cell --%>
div.z-tree-body td.menu-tree-cell {
cursor: pointer;
padding: 0 2px;
font-size: ${fontSizeM};
font-weight: normal;
overflow: visible;
}
div.menu-tree-cell-cnt {
border: 0; margin: 0; padding: 0;
font-family: ${fontFamilyC};
font-size: ${fontSizeM}; font-weight: normal;
white-space:nowrap
}
td.menu-tree-cell-disd * {
color: #C5CACB !important; cursor: default!important;
}
td.menu-tree-cell-disd a:visited, td.menu-tree-cell-disd a:hover {
text-decoration: none !important;
cursor: default !important;;
border-color: #D0DEF0 !important;
}
div.z-dottree-body td.menu-tree-cell {
cursor: pointer; padding: 0 2px;
font-size: ${fontSizeM}; font-weight: normal; overflow: visible;
}
div.z-filetree-body td.menu-tree-cell {
cursor: pointer; padding: 0 2px;
font-size: ${fontSizeM}; font-weight: normal; overflow: visible;
}
div.z-vfiletree-body td.menu-tree-cell {
cursor: pointer; padding: 0 2px;
font-size: ${fontSizeM}; font-weight: normal; overflow: visible;
}