IDEMPIERE-369 Master Detail layout improvements. 1) Fixed grid group not using the active theme. 2) Make cleaner the separation between header, left pane, desktop tabbox and detail detailbox. 3) Simplify the look of desktop and left column dashboard widget - less image, solid line style. 4) Use inset shadow for checked toolbar button.
This commit is contained in:
Heng Sin Low
parent
91786b1e16
commit
e915e766b6
|
|
@ -25,17 +25,17 @@ public class Group extends org.zkoss.zul.Group {
|
|||
|
||||
public Group() {
|
||||
super();
|
||||
setSclass("z-group");
|
||||
setZclass("z-group");
|
||||
}
|
||||
|
||||
public Group(String label) {
|
||||
super(label);
|
||||
setSclass("z-group");
|
||||
setZclass("z-group");
|
||||
}
|
||||
|
||||
public <T> Group(String label, T value) {
|
||||
super(label, value);
|
||||
setSclass("z-group");
|
||||
setZclass("z-group");
|
||||
}
|
||||
|
||||
public String getLabel() {
|
||||
|
|
@ -101,9 +101,10 @@ public class Group extends org.zkoss.zul.Group {
|
|||
|
||||
private void init()
|
||||
{
|
||||
setSclass("z-group-cnt");
|
||||
setZclass("z-group-cnt");
|
||||
|
||||
img = new Image();
|
||||
img.setZclass("z-group-img");
|
||||
appendChild(img);
|
||||
img.addEventListener(Events.ON_CLICK, this);
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,6 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
|
|||
pnlHead.setParent(n);
|
||||
|
||||
West w = new West();
|
||||
w.setTitle(" ");
|
||||
w.setId("desktop-left-column");
|
||||
layout.appendChild(w);
|
||||
w.setSclass("desktop-left-column");
|
||||
|
|
@ -146,6 +145,7 @@ public class DefaultDesktop extends TabbedDesktop implements MenuListener, Seria
|
|||
homeTab = new Tabpanel();
|
||||
windowContainer.addWindow(homeTab, Util.cleanAmp(Msg.getMsg(Env.getCtx(), "Home")), false);
|
||||
homeTab.getLinkedTab().setSclass("desktop-hometab");
|
||||
homeTab.setSclass("desktop-home-tabpanel");
|
||||
BusyDialog busyDialog = new BusyDialog();
|
||||
busyDialog.setShadow(false);
|
||||
homeTab.appendChild(busyDialog);
|
||||
|
|
|
|||
|
|
@ -112,7 +112,8 @@ html,body {
|
|||
.desktop-header {
|
||||
background-color: #F4F4F4;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
height: 35px;
|
||||
border-bottom: 1px solid #C5C5C5;
|
||||
}
|
||||
|
||||
.desktop-header-font {
|
||||
|
|
@ -211,7 +212,7 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none {
|
|||
|
||||
.desktop-tabbox {
|
||||
padding-top: 0px;
|
||||
background-color: #F4F4F4;
|
||||
background-color: #E4E4E4;
|
||||
}
|
||||
|
||||
.desktop-tabbox .z-tab {
|
||||
|
|
@ -222,6 +223,11 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none {
|
|||
border: none;
|
||||
}
|
||||
|
||||
.desktop-center {
|
||||
padding-top: 4px;
|
||||
background-color: #E4E4E4;
|
||||
}
|
||||
|
||||
.desktop-tabpanel {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -242,20 +248,18 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none {
|
|||
.desktop-left-column {
|
||||
width: 300px;
|
||||
border: none;
|
||||
background-color: #F4F4F4;
|
||||
background-color: #E4E4E4;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.desktop-left-column + .z-west-splt {
|
||||
border-top: 1px solid #c5c5c5;
|
||||
border-top: none;
|
||||
border-right: 1px solid #c5c5c5;
|
||||
}
|
||||
|
||||
.desktop-left-column + .z-west-splt .z-west-splt-btn {
|
||||
display: none;
|
||||
border-left: 1px solid #c5c5c5;
|
||||
}
|
||||
|
||||
.desktop-left-column .z-west-body {
|
||||
border-right: 1px solid #c5c5c5;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.desktop-left-column .z-west-header {
|
||||
|
|
@ -267,7 +271,7 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none {
|
|||
}
|
||||
|
||||
.desktop-hometab {
|
||||
margin-left: 2px !important;
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
|
||||
.desktop-menu-popup {
|
||||
|
|
@ -282,6 +286,43 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none {
|
|||
border-top: 1px solid #c5c5c5;
|
||||
}
|
||||
|
||||
.desktop-home-tabpanel {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
<%-- dashlet --%>
|
||||
.desktop-home-tabpanel .z-panel-tl, .desktop-home-tabpanel .z-panel-tr,
|
||||
.desktop-home-tabpanel .z-panel-hr, .desktop-home-tabpanel .z-panel-hl,
|
||||
.desktop-home-tabpanel .z-panel-hm {
|
||||
background-image: none; background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.desktop-home-tabpanel .z-panel-hl {
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 2px solid #9D9D9D;
|
||||
}
|
||||
|
||||
.desktop-home-tabpanel .z-panel-hl .z-panel-header {
|
||||
padding: 0 0 2px 0;
|
||||
color: #333; font-weight: bold;
|
||||
}
|
||||
|
||||
.desktop-left-column .z-panel-tl, .desktop-left-column .z-panel-tr,
|
||||
.desktop-left-column .z-panel-hr, .desktop-left-column .z-panel-hl,
|
||||
.desktop-left-column .z-panel-hm {
|
||||
background-image: none; background-color: #E4E4E4;
|
||||
}
|
||||
|
||||
.desktop-left-column .z-panel-hl {
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 2px solid #9D9D9D;
|
||||
}
|
||||
|
||||
.desktop-left-column .z-panel-hl .z-panel-header {
|
||||
padding: 0 0 2px 0;
|
||||
color: #333; font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-panel {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
|
@ -379,6 +420,7 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none {
|
|||
|
||||
.adwindow-detailpane-tabbox {
|
||||
min-height: 200px; width: 99%; margin: auto;
|
||||
background-color: #E4E4E4;
|
||||
}
|
||||
|
||||
.adwindow-gridview-detail {
|
||||
|
|
@ -595,53 +637,11 @@ span.z-tree-tee, span.z-tree-last {
|
|||
<%-- Group --%>
|
||||
tr.z-group {
|
||||
background: #E9F2FB repeat-x 0 0;
|
||||
background-image: url(../images/group_bg.gif);
|
||||
background-image: url(../images/group_bg.gif) !important;
|
||||
}
|
||||
|
||||
tr.z-group td.z-row-inner {
|
||||
overflow: hidden;
|
||||
border-top: 2px solid #81BAF5;
|
||||
border-bottom: 1px solid #BCD2EF;
|
||||
color: #2C559C;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.z-group-cnt {
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
div.z-group-cnt span.z-label {
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
color: #2C559C;
|
||||
padding: 5px;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img.z-group-img-open, img.z-group-img-close {
|
||||
width: 18px;
|
||||
min-height: 18px;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
img.z-group-img-open {
|
||||
background-image: url(../images/group-open.png);
|
||||
background-position: center center;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
img.z-group-img-close {
|
||||
background-image: url(../images/group-close.png);
|
||||
background-position: center center;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
.z-group-inner .z-group-cnt .z-label, .z-group-inner .z-group-cnt {
|
||||
font-family: Helvetica,Arial,sans-serif;
|
||||
}
|
||||
|
||||
<%-- Tablet --%>
|
||||
|
|
@ -715,11 +715,6 @@ div.z-vfiletree-body td.menu-tree-cell {
|
|||
font-size: ${fontSizeM}; font-weight: normal; overflow: visible;
|
||||
}
|
||||
|
||||
<%-- dashlet --%>
|
||||
.z-panel-hl .z-panel-header {
|
||||
padding: 0 0 2px 0;
|
||||
}
|
||||
|
||||
div.simileAjax-bubble-container {
|
||||
z-index: 2800 !important;
|
||||
}
|
||||
|
|
@ -811,4 +806,18 @@ tbody.z-grid-empty-body td {
|
|||
.z-notification .z-notification-cl,
|
||||
.z-notification .z-notification-cnt {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.z-toolbarbutton-ck {
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
|
||||
background-color: #FFF;
|
||||
background-image: -webkit-linear-gradient(top,#FFF,#D0D0D0);
|
||||
background-image: -moz-linear-gradient(top,#FFF,#E0E0E0);
|
||||
background-image: -ms-linear-gradient(top,#FFF,#E0E0E0);
|
||||
background-image: -o-linear-gradient(top,#FFF,#E0E0E0);
|
||||
background-image: linear-gradient(top,#FFF,#E0E0E0);
|
||||
border: 1px solid #CCC;
|
||||
color: #333;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 411 B |
Binary file not shown.
|
Before Width: | Height: | Size: 398 B |
Loading…
Reference in New Issue