- enhance toolbar and header panel layout
This commit is contained in:
parent
af2c49e060
commit
e9abedd6a7
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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", ""));
|
||||||
|
|
|
||||||
|
|
@ -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;");
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue