From e915e766b683738c8f0cd30745e6573f7eb4d538 Mon Sep 17 00:00:00 2001 From: Heng Sin Low Date: Sun, 14 Oct 2012 09:28:35 +0800 Subject: [PATCH] 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. --- .../org/adempiere/webui/component/Group.java | 9 +- .../webui/desktop/DefaultDesktop.java | 2 +- .../theme/default/css/theme.css.dsp | 131 ++++++++++-------- .../theme/default/images/group-close.png | Bin 411 -> 0 bytes .../theme/default/images/group-open.png | Bin 398 -> 0 bytes 5 files changed, 76 insertions(+), 66 deletions(-) delete mode 100644 org.adempiere.ui.zk/theme/default/images/group-close.png delete mode 100644 org.adempiere.ui.zk/theme/default/images/group-open.png diff --git a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/Group.java b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/Group.java index c58a25226d..b06403f39b 100644 --- a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/Group.java +++ b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/component/Group.java @@ -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 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); diff --git a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/desktop/DefaultDesktop.java b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/desktop/DefaultDesktop.java index 6f85b60849..3b179bdc5f 100644 --- a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/desktop/DefaultDesktop.java +++ b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/desktop/DefaultDesktop.java @@ -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); diff --git a/org.adempiere.ui.zk/theme/default/css/theme.css.dsp b/org.adempiere.ui.zk/theme/default/css/theme.css.dsp index 2c90cada3d..c77723c8a1 100644 --- a/org.adempiere.ui.zk/theme/default/css/theme.css.dsp +++ b/org.adempiere.ui.zk/theme/default/css/theme.css.dsp @@ -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; -} \ No newline at end of file +} + +.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; +} diff --git a/org.adempiere.ui.zk/theme/default/images/group-close.png b/org.adempiere.ui.zk/theme/default/images/group-close.png deleted file mode 100644 index f5a8ca9f68288e61560036fa5c83ec1454b2a3a0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 411 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhjKx9jP7LeL$-D$|*pj^6T^Rm@ z;DWu&Cj&(|3p^r=fm(z?n2}-D90{Nxdx@v7EBhU0DK;6tD|y?^fkLvGArU3c`MJ5N zc_lzD1A}u>YGO%hib8p2Nrr;Er*A-tUMf3K{FA4PV~E7%)`^B*%!vZ6`wPFv3v3a- z<9gAzC-=f7tEF4pJzg^gRWRI^ITW?QQ?toef&ItZJKQW{n`cUPyF_|6t^ap#kGV0^ zhY#N#3Nh_|;(PeTGG(Kx-hDRK>inBT?-c)tv2cH{zeJIHg_I}L<(qRPvKe;WtzGx4 zy}n1&B9D*5@S0B>D?@W3>w(h$40pmcS18_a`;!tOkbJhpjD4#q&koIHr{}U6{%zzv zvoh;$1N-ByKPJqdOVf)lynXP|b3yUUhk4mIdPDP7^)KB&`blZ&9*>XL7Hs($rJ&*G wbhCNW^sW0Adc6L_^x?;sH-8rY-W~mu&5kWCCt%@*&!AxOboFyt=akR{06##XRR910 diff --git a/org.adempiere.ui.zk/theme/default/images/group-open.png b/org.adempiere.ui.zk/theme/default/images/group-open.png deleted file mode 100644 index 3dec58bd84bf102ffbaed19cb9675f64219ab86a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 398 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhjKx9jP7LeL$-D$|*pj^6T^Rm@ z;DWu&Cj&(|3p^r=fm(z?n2}-D90{Nxdx@v7EBhU0DKYGO%hib8p2Nrr;Er*A-tUMf3K{HdplV~E7%){BN-%z+}U5C5y>GiknY z5#|x;<$F~ h+gbYWY%Q~loCIHStlQjSU