From 3e28b8746c8eafb7b3a5b9df86e2098dacbac1d0 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Mon, 5 Oct 2009 05:09:55 +0000 Subject: [PATCH] Initial commit for new Sampler home screen layout. svn changeset:9061/svn branch:6.2 --- .../VAADIN/themes/sampler/sampler/grid-bg.png | Bin 0 -> 130 bytes .../sampler/screenshot-frame-hover.png | Bin 0 -> 792 bytes .../sampler/sampler/screenshot-frame.png | Bin 0 -> 428 bytes .../VAADIN/themes/sampler/sampler/styles.css | 99 +++++++++++++----- .../themes/sampler/sampler/subsection-bg.png | Bin 0 -> 1131 bytes src/com/vaadin/demo/sampler/FeatureSet.java | 14 +-- .../demo/sampler/SamplerApplication.java | 36 +++---- 7 files changed, 93 insertions(+), 56 deletions(-) create mode 100644 WebContent/VAADIN/themes/sampler/sampler/grid-bg.png create mode 100644 WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-hover.png create mode 100644 WebContent/VAADIN/themes/sampler/sampler/screenshot-frame.png create mode 100644 WebContent/VAADIN/themes/sampler/sampler/subsection-bg.png diff --git a/WebContent/VAADIN/themes/sampler/sampler/grid-bg.png b/WebContent/VAADIN/themes/sampler/sampler/grid-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..85a35dfd45962454821b89890807cea2a61c9706 GIT binary patch literal 130 zcmeAS@N?(olHy`uVBq!ia0vp^j6ghzgBeI}whRaZQj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS>Jir4~tLR=p`di4MQ{|n|85kL_kPZ!6Kid#tu2?;W-KNKAr a7#V_H8794rF<%LkW$<+Mb6Mw<&;$Ukb0*>d literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-hover.png b/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..485461815d0442dbe20d0c2e271364b30334cd96 GIT binary patch literal 792 zcmV+z1LypSP)~hHC%apUP^V@4xAO#?#h@a#?-f;T|0iiJvF9*>H5^o zmlu>?x(lVas>{ub&##}j*Kk#SOi5K-vgd-1>z1EzJhfM)^Z^NO&cJ&LY5C%$dN!5ocr%+*< zfN2k^fodev?Um~60j5cmDreFkPfbEqg-W$M0r13asJ4#j-|3i&oBy*=VVa7m2&O+& z8np3GjC8!80f{G%j{&Pc*ElAc`-~&p~y6_HSGLc=Pzx(vjgusRsw8(ucsbOQn{h7uEXb8($w?d0A-eyH~n$aPyaedugc$4_?7_Ox@_{C!tQ_z89w9B1MIg5j?{DwwcR7s+%x`u3NQdh W3+xRlv+H;O0000#&2&frqs_GOxW*9l| z0f-GI{XYQN>Od_}QW&lsX2`w&nYC&~x3^{9eiz=Ey1~kN?Z-Wc@_ygj z3Q`%HEIChVR;q6Q&b;jNmfWXze?B{0n)&P3*D2pjDql|cQTgx3oB9v8r%4)A>V|C> l*fI4%dhM>M4}2RK8K!J;Sr!_^vK<)w44$rjF6*2UngDs~zMTL7 literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/sampler/sampler/styles.css b/WebContent/VAADIN/themes/sampler/sampler/styles.css index 6898284749..82f9a237e2 100644 --- a/WebContent/VAADIN/themes/sampler/sampler/styles.css +++ b/WebContent/VAADIN/themes/sampler/sampler/styles.css @@ -274,17 +274,83 @@ } + +/* Sample grid styles */ +.v-app-SamplerApplication .v-csslayout-grid { + background: transparent url(grid-bg.png) 0 80px; + margin: 0 20px 50px; +} + .v-app-SamplerApplication .v-label-section { font-family: "Helvetica Neue", helvetica, arial, verdana, sans-serif; font-size: 24px; - font-weight: bold; - border-bottom: 1px solid #eee; - line-height: 35px; - text-indent: 15px; + font-weight: normal; + line-height: normal; text-shadow: 0 2px 1px #c0c1c2; color: #1e2229; - + padding: 30px 0 20px 0; + height: 30px; +} + +.v-csslayout-grid .v-label-subsection { + font-size: 11px; + line-height: 16px; + color: #787b7e; + float: left; + width: 155px; + height: 131px; + padding: 15px 175px 0 15px; + margin-right: -175px; + background: transparent url(subsection-bg.png) no-repeat; + white-space: normal; +} + +.v-csslayout-grid .v-label-subsection h3 { + font-size: 18px; + font-weight: bold; + text-shadow: 0 2px 1px #c0c1c2; + color: #292d30; + margin: 0 0 .5em; +} + +.v-csslayout-grid .screenshot, +.v-csslayout-grid .screenshot:focus, +.v-csslayout-grid .screenshot:active { + float: left; + height: 132px; + width: 87px; + margin: 14px 15px 0; + position: relative; +} + +.v-csslayout-grid .screenshot .v-icon { + display: block; + width: 75px; + margin: 3px 6px; + position: absolute; +} + +.v-csslayout-grid .screenshot .v-button-caption { + display: block; + width: 87px; + text-align: center; + white-space: normal; + text-decoration: none; + font-size: 12px; + color: #212325; + font-family: arial, helvetica, sans-serif; + font-weight: bold; + line-height: normal; + position: absolute; + background: transparent url(screenshot-frame.png) no-repeat 4px 2px; + padding-top: 84px; + height: 30px; } +.v-csslayout-grid .screenshot:hover .v-button-caption { + background: transparent url(screenshot-frame-hover.png) no-repeat 1px 0px; +} + +/* .v-app-SamplerApplication .v-label-subsection { font-family: helvetica, arial, verdana, sans-serif; font-size: 16px; @@ -292,27 +358,8 @@ color: #666666; text-indent: 15px; padding-right: 20px; -} -.v-app-SamplerApplication .v-nativebutton-screenshot { - border: 3px solid #ccc; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - overflow: hidden; -} -.v-app-SamplerApplication .v-nativebutton-screenshot:hover { - border-color: #abc; -} -.v-app-SamplerApplication .v-nativebutton-screenshot img.v-icon { - margin: 0; - margin-top: -2px; - margin-left: -3px; - width: auto; - height: auto; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - overflow: hidden; - position: static; -} +}*/ + .v-app-SamplerApplication .v-table-featuretable tr.v-table-row, .v-app-SamplerApplication .v-table-featuretable tr.v-table-row-odd { diff --git a/WebContent/VAADIN/themes/sampler/sampler/subsection-bg.png b/WebContent/VAADIN/themes/sampler/sampler/subsection-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..a98b0ef571befaedc745d70c3b777fccf163d64f GIT binary patch literal 1131 zcmW-hYfuwc6vtB-9g2b?gz%c`Bm!+J&?(?Rc?%hVDkfy+JYcQ_nt?m<%28jze$tyXIzNvF#Nk|0gkY_A>b zRssYL;GihGl^_TkX~C_ymB6i5r_+U5a2rXvHa19-LNSZWwSnQd#cCxfJ8A(dz>sDX zL(Hfd!w?iRV-^dJqZS-NQIi=3I1^$vnaxVIMx)gkS5{U{rX{^WsZ!%OKBrXa78cbS z?ZV=c2|*V1dZk9A(r8JN1U?)mmJJ4wTUgX9)oO~Ov^pJVP;UTZMLn;b1L{0rniiMz zTHT@+u=L9aXa&VE%(84)0g)5j0W`g_@iy`MbsEjXn3I(uI5)fcpT24bFNjm<#o-3gVjr41h^ob;D^2l!w<4bwfwaE8l3vX68xg?Ud!RfH!Hk0X=fsqily|02Z zE_rc`pD+D7E-h;|X7

A-kKbS8a`(N4iI4p52A{(f|Y19cXw_w&i?K!%!J}f~aR5 zw5Ra*6Vqyzyq+a*ZIH@iAsd_*T&!Ay_AZ6>-f~QgLj6=U@EFsWeTNU$RYgwRPUhzm zFPTx7{EGiL4cU4w*TrSZVtZ3>CQrmcu0sU0jp?%%0ZNcn2=O;~37PTz4pj>jkrD!c zQ1&Kx<~+mjcq2TioL(VF2`QfZ4!REq8kSx{zIBSX4DkCCC;WzmpYAM|bzNwf#um1BKNZ$bJ}9ZnroYyA06krH96WJfuFRbpVuP~K zpw0$1{H&+M-&4TjG iconCache = new HashMap(); FeatureGrid() { setSizeFull(); setContent(grid); - grid.setSizeUndefined(); - grid.setSpacing(true); setStyleName(Panel.STYLE_LIGHT); + grid.setStyleName("grid"); } @SuppressWarnings("unchecked") @@ -755,30 +754,25 @@ public class SamplerApplication extends Application { for (Iterator it = features.iterator(); it.hasNext();) { final Feature f = it.next(); if (f instanceof FeatureSet) { - grid.newLine(); Label title = new Label(f.getName()); if (c.isRoot(f)) { - title.setWidth("100%"); title.setStyleName("section"); - grid.setRows(grid.getCursorY() + 1); - grid.addComponent(title, 0, grid.getCursorY(), grid - .getColumns() - 1, grid.getCursorY()); - grid - .setComponentAlignment(title, - Alignment.MIDDLE_LEFT); + grid.addComponent(title); } else { + String text = "

" + f.getName() + "

"; + if (f.getDescription() != null + && f.getDescription() != "") { + text += f.getDescription().substring(0, + f.getDescription().indexOf(".") + 1); + } + title = new Label(text, Label.CONTENT_XHTML); title.setStyleName("subsection"); + title.setSizeUndefined(); grid.addComponent(title); - grid - .setComponentAlignment(title, - Alignment.MIDDLE_LEFT); } } else { - if (grid.getCursorX() == 0) { - grid.space(); - } - Button b = new NativeButton(); + Button b = new Button(f.getName()); b.setStyleName(Button.STYLE_LINK); b.addStyleName("screenshot"); String resId = "75-" + f.getIconName(); @@ -787,12 +781,8 @@ public class SamplerApplication extends Application { res = new ClassResource(f.getClass(), resId, SamplerApplication.this); iconCache.put(resId, res); - } b.setIcon(res); - b.setWidth("75px"); - b.setHeight("75px"); - b.setDescription("

" + f.getName() + "

"); b.addListener(new Button.ClickListener() { public void buttonClick(ClickEvent event) { ((SamplerWindow) getWindow()).setFeature(f); -- 2.39.5