- 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.Events;
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 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);
@ -154,16 +156,6 @@ public class CWindowToolbar extends FToolbar implements EventListener
btnProductInfo = createButton("ProductInfo", "Product", "InfoProduct");
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
btnHelp.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.setTooltiptext(Msg.getMsg(Env.getCtx(),tooltip));
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);
this.appendChild(btn);
//make toolbar button last to receive focus
@ -276,11 +276,13 @@ public class CWindowToolbar extends FToolbar implements EventListener
protected void addSeparator()
{
Label lblSeparator = new Label();
lblSeparator.setWidth("3px");
lblSeparator.setHeight("16px");
lblSeparator.setValue(" ");
this.appendChild(lblSeparator);
Space s = new Space();
if (embedded)
s.setSpacing("3px");
else
s.setSpacing("6px");
s.setOrient("vertical");
this.appendChild(s);
}
public void addListener(ToolbarListener toolbarListener)

View File

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

View File

@ -53,7 +53,7 @@ public class HeaderPanel extends Panel implements EventListener
private void init()
{
LayoutUtils.addSclass("header", this);
LayoutUtils.addSclass("desktop-header", this);
UserPanel userPanel = new UserPanel();
@ -62,7 +62,7 @@ public class HeaderPanel extends Panel implements EventListener
image.setStyle("cursor: pointer;");
Borderlayout layout = new Borderlayout();
LayoutUtils.addSclass("header", layout);
LayoutUtils.addSclass("desktop-header", layout);
layout.setParent(this);
West west = new West();
west.setParent(layout);
@ -75,7 +75,7 @@ public class HeaderPanel extends Panel implements EventListener
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
west.setStyle("background-color: transparent; border: none;");
@ -87,7 +87,7 @@ public class HeaderPanel extends Panel implements EventListener
userPanel.setHeight("100%");
userPanel.setStyle("position: absolute");
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
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.setStyle("text-align:right");
LayoutUtils.addSclass("headerFont", lblUserNameValue);
LayoutUtils.addSclass("desktop-header-font", lblUserNameValue);
this.appendChild(lblUserNameValue);
Hbox hbox = new Hbox();
@ -83,7 +83,7 @@ public class UserPanel extends Vbox implements EventListener
preference.setLabel(Msg.getMsg(Env.getCtx(), "Preference"));
preference.addEventListener(Events.ON_CLICK, this);
preference.setStyle("text-align:right");
LayoutUtils.addSclass("headerFont", preference);
LayoutUtils.addSclass("desktop-header-font", preference);
preference.setParent(hbox);
Separator sep = new Separator("vertical");
@ -93,7 +93,7 @@ public class UserPanel extends Vbox implements EventListener
role.setLabel(this.getRoleName());
role.addEventListener(Events.ON_CLICK, this);
role.setStyle("text-align:right");
LayoutUtils.addSclass("headerFont", role);
LayoutUtils.addSclass("desktop-header-font", role);
role.setParent(hbox);
sep = new Separator("vertical");
@ -103,7 +103,7 @@ public class UserPanel extends Vbox implements EventListener
logout.setLabel(Msg.getMsg(Env.getCtx(),"Logout"));
logout.addEventListener(Events.ON_CLICK, this);
logout.setStyle("text-align:right");
LayoutUtils.addSclass("headerFont", logout);
LayoutUtils.addSclass("desktop-header-font", logout);
logout.setParent(hbox);
this.appendChild(hbox);

View File

@ -6,6 +6,7 @@ html,body {
padding: 0;
height: 100%;
background-color: #D4E3F4;
overflow: hidden;
}
<%-- login --%>
@ -85,13 +86,13 @@ html,body {
}
<%-- header --%>
.header-left {
.desktop-header-left {
margin: 0;
margin-left: 5px;
margin-top: 3px;
}
.header-right {
.desktop-header-right {
margin: 0;
margin-top: 3px;
padding-right: 5px;
@ -103,23 +104,48 @@ html,body {
-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 {
border-style: inset;
border-width: 1px;
border-color: #9CBDFF;
background-color: #C4DCFB;
-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-repeat: repeat-x;
background-position: bottom left;
background-color: white;
width: 100%;
height: 35px;
}
.headerFont {
.desktop-header-font {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
@ -373,3 +399,43 @@ input:focus, textarea:focus, .z-combobox-inp:focus, z-datebox-inp:focus {
.mandatory-decorator-text {
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;
}