From 32f65a354373001833e65570be7ddfd44eba6855 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 27 Nov 2009 09:18:52 +0000 Subject: [PATCH] New Sampler layout and some new samples and sample modifications. svn changeset:10082/svn branch:6.2 --- .../VAADIN/themes/base/menubar/menubar.css | 4 + WebContent/VAADIN/themes/base/styles.css | 4 + WebContent/VAADIN/themes/reindeer/styles.css | 4 + .../64/{document-xls.png => document-xsl.png} | Bin WebContent/VAADIN/themes/runo/styles.css | 4 + .../sampler/home/btn-shadow-bottom.png | Bin 280 -> 0 bytes .../sampler/sampler/home/btn-shadow-top.png | Bin 287 -> 0 bytes .../sampler/sampler/home/label-grad.png | Bin 175 -> 0 bytes .../sampler/screenshot-frame-new-hover.png | Bin 0 -> 1750 bytes .../sampler/sampler/screenshot-frame-new.png | Bin 0 -> 1396 bytes .../VAADIN/themes/sampler/sampler/styles.css | 194 +++++++++++++++--- 11 files changed, 178 insertions(+), 32 deletions(-) rename WebContent/VAADIN/themes/runo/icons/64/{document-xls.png => document-xsl.png} (100%) delete mode 100644 WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png delete mode 100644 WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png delete mode 100644 WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png create mode 100644 WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-new-hover.png create mode 100644 WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-new.png diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.css b/WebContent/VAADIN/themes/base/menubar/menubar.css index 45170ff99f..9b48fb5059 100644 --- a/WebContent/VAADIN/themes/base/menubar/menubar.css +++ b/WebContent/VAADIN/themes/base/menubar/menubar.css @@ -74,4 +74,8 @@ margin: 3px 0; overflow: hidden; background: #ddd; +} +.v-menubar .v-icon, +.v-menubar-submenu .v-icon { + margin-right: 3px; } \ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css index 4d31800322..d5c57381f1 100644 --- a/WebContent/VAADIN/themes/base/styles.css +++ b/WebContent/VAADIN/themes/base/styles.css @@ -706,6 +706,10 @@ div.v-app-loading { overflow: hidden; background: #ddd; } +.v-menubar .v-icon, +.v-menubar-submenu .v-icon { + margin-right: 3px; +} .v-Notification { background: #999; diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css index cddb80b6d2..eb803d6f1f 100644 --- a/WebContent/VAADIN/themes/reindeer/styles.css +++ b/WebContent/VAADIN/themes/reindeer/styles.css @@ -706,6 +706,10 @@ div.v-app-loading { overflow: hidden; background: #ddd; } +.v-menubar .v-icon, +.v-menubar-submenu .v-icon { + margin-right: 3px; +} .v-Notification { background: #999; diff --git a/WebContent/VAADIN/themes/runo/icons/64/document-xls.png b/WebContent/VAADIN/themes/runo/icons/64/document-xsl.png similarity index 100% rename from WebContent/VAADIN/themes/runo/icons/64/document-xls.png rename to WebContent/VAADIN/themes/runo/icons/64/document-xsl.png diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css index ef135129ae..2d53878f32 100644 --- a/WebContent/VAADIN/themes/runo/styles.css +++ b/WebContent/VAADIN/themes/runo/styles.css @@ -706,6 +706,10 @@ div.v-app-loading { overflow: hidden; background: #ddd; } +.v-menubar .v-icon, +.v-menubar-submenu .v-icon { + margin-right: 3px; +} .v-Notification { background: #999; diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png deleted file mode 100644 index 976e6fad5e49be9ad098f62bd4a72b7289ce7a16..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 280 zcmV+z0q6dSP)hmo7`v`R z+qTH_T<%PGR7%NZS(fPgeq7g8ppWB7azDwkOsuM^5--m53yG*&YZOI+rfKB7ZJU7J zMNat&0SQY`deM!3@jZNhZu`DtSr$0wVoMY1Gb$TO(7LW+jEQZHr~#JiJkL0%Ji~Ia epq% diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png deleted file mode 100644 index 87a687f10fffa3a033fda5b5468fe8ae4d51aa59..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 287 zcmeAS@N?(olHy`uVBq!ia0vp^Awb;2!3-p?-l*FMq$EpRBT9nv(@M${i&7aJQ}UBi z6+Ckj(^G>|6H_V+Po~-c6&VEhgt-3t_3Q87zyJRIyMO=w@87>4J$m%~`SbVh-(S0S z?ZANp+qZAuvSrKW&71GtyZ7_w&;S4buROKjI8bk^r;B4q#jQ8zZ}K)9h%g*{K3jRh zzumn)>=V!2&tX)~t%=vT=Ty9^aJ^>MDgIf>U&7XjPQB*-q;uIu-I)7svohZPb}D&a zy69qG>x+v?i^?s<7p3o%|ME-6#a>*5tJP^?fChf*FY{kc1BO876-BK6s$YQ)V(@hJ Kb6Mw<&;$Ufuz}0~ diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png b/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png deleted file mode 100644 index d44d24bf2c5f0962e34b715f2afb0581c443a11a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 175 zcmeAS@N?(olHy`uVBq!ia0vp^tUxTz!3HD`7q*rHDajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_d9MS-3!jv*Dda!xq1H8?OZ9QelWIZ0)rhlm@od#Y^ZP%A#hnVS)F^+tEM{tVQJCMUKueA4)a5x-dpCuJoeGN7_-ta&$i~p~ X%A;zV!lr#d!x=nX{an^LB{Ts5SV%p# diff --git a/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-new-hover.png b/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-new-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..ce33b10859d454d82289cf025ab64d72fedc610a GIT binary patch literal 1750 zcmV;{1}XW8P)Ju{wrJJU{IK5({l3qm&$+YP+$(6B1_BzO z6>Yp+DhT2`Sn(Lx$ut%6I~w4%-?zcE&dcCb;wd>zhsy_7d{g1T!=>OKQwSi4cy8@i zO;f)*xn}Aveko`SCinRpF1#+vt{q@AlM)el?!r!3+VBmCD3Fn`q$tDw!ewxH=5o*^ zC$CeJu{Texow1W~mGyR_AWAE-Y%hT-NqG767I^0R(ViPK?em{(fGpg4iwb!;fMu5h z!12rI^qMCr0F7AQMa69apR|bM4 zLk~aLjjqVLQbj?K78*>eS5KLQo2=0cw7a`otXaKsQBHI97wQoEXB|5REfp1zIPx_} znc0xPX%ob2Ya!Wk79QFD8MvH%Z3Bn)!K9+6p$*%p;T8~!OJG)68MLl=9vr#jVGP!% zT{{b*6F>Dk$5YKez=^zt&^U1caDK>X3%q zpSyT5_eunt-1>4uZ`;I8KX?$TtGF1Vhjzf&6)X6$H?kjs z$hBH{bk!=j_I4?#%HW>7=*l5z$eRnI!_A|SS*eoUx;~o6BfxxBRfla5yWR{l%gdp0 zNpWv@z?{b6R&L$hr)nST+VjEtkkybh)#+&e#4fv2PdV#l(1n_x}#kms1zei77o z7@@ihs4RWyP#IIh?O|@b_$)=$U?^wS_+c50MTG{Jlz^f`Rq#h1s_-pLYKHrky#k^7 zI$j^0T?|Qterr!TWFTA(kN@Mq0T}K)o_IH?iI~BSLp61O+bLCwB$Z&ADENkJkU%&$ zHhv7nsMfBgCVq#E_wA}GXnyyN!R@=cV9L66&~dN=g1^;3;g;?EnBdWaFkFx5l+$rv z5_EpOO66hHhDudhV~P5|QmTsbY}>yV!u981-0az0sjM!F+aJ%h^!i0~cFb*zzxk-v zQ2iN*Bj9#~-&3v|R;hLA6IhZmxbgA6(fviRAJu4OSGa;HXeehUj~~l_zxvS{UQQdA z!Rsa>sQ0nk8~);{GOo5}?KBy)zcQMM;s_-TH`BLH8n=0d+wsJ`xQ4oD;+M~tZhPFFGnr?9j(*(aeoXCUtd9pe z74`fYe_;Ky8Sd)kK5yv+St^hO(|uWJVO0yYCX}XqUEyz!1S3^gbyap}^+nHtP&Lhd zR9V7CZ)5TGyI`~fy@tJYqC1SFVevy`y(55r1HBbJ1fn#EoeVaXstIfddvn!qG)+$! zmVea1MjYr7{amr02RE3TNvZZCIY1q%ezTDgPL|S8+)Odmwo1L%Pj^t2NK~vhyCgtQw$J_dnki7C8eydpRLf#2Wq->4l>I5Dl2TKmR03qxn94LxC8~GFlwvBy zREnt-Q%R{Kqg0ZrWl|-jrc$W{l@b*tDoRvjl&D5|OeLr(cugff7BMBIrdX*2m9jr& z|NHhel>kwqqC`c5e=^IIO4GXk3~%B>y%Wy{8LO#ZA>LV773L;PyO#qNvR{NRH90WiV_ude=;k(KjEP_ zDpD#bmCORA^7*fcsU=MLtoL%?u6}#-1wqIlVt;GF0o*jRQWZ5BuMs5YJXV?W>fUDJ z_3vV;ro`EVxNLq^P3(mlZZ9W9cW*jB4wX;#k1j^89J%D0SmYOE=L3Q$=MkoVsMKWi zj1s)LK5+Owwr&Vp2usoD_~&7OO;*oVRY^zp=v%j5F9Ut^Y9ykh4v($D5Qd(ql*4+N z)hCTbz9iipIz*QVrU8_o_CPhj8gOI!HlcTarFZ2t6F6yr3j}oVu*m>uas#*~nAi9- s0X92;_0zlmA4aCy5YE^5`%{1c0CMK|AH}o-SpWb407*qoM6N<$f}_PvUH||9 literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-new.png b/WebContent/VAADIN/themes/sampler/sampler/screenshot-frame-new.png new file mode 100644 index 0000000000000000000000000000000000000000..696e8f9c1c6c9504ac3f26f9fa7f61d87156457d GIT binary patch literal 1396 zcmbW%{XY{390%}qSj>b%naY@4@^IUEygMZ3VLD14T6xIkp*qadYMdf#G9^!Gq2(3P zwRs3F&ub$iO@=(hbecRgj53Rjoca^)hwta}{^9%m^_y|h(^Ulo0RaF26_gwD)OLG) zA4TAH(zD&Iwo4oDjK+IMhvNyDxG=!6&}eKJ6cvRzA9gAX6Pg&?9cBvvC}^RO$9xjT z79K?Wx!+f#i`OGs_<{}!(-W7FOLw2MC{y1HBfjO0GIlabzsNv>%WqN!@bEn83v*Q~|7Wo4O_TmQ9kDR#xR@@NnvBKS(_x`(VdkHlW;1&9r*sMXb9!NRe1m{fR~gDKj7B zT$0>r9ErD=fdV`{pc`UK^niI=?G~IQlR8`uOy>)KVdGks=9|O^4DO1EwC3L@iDo(0 zOhp}IV@#>QLoIHFO$@o?TJ7|3>Z|687}#OA6W5%=fJ9MJQ9)1lUT&4TD-2i7YYW6; zMpW774L#rfATq&@FzY#SRz1{{4$P|Z$LwI;7i!DtneTbbOK$$Cvp%juQ|u4&0}9HO za{|3evYGeSEl4iX;PG4-JTB(wWPtI^yU^zc+XeRyo77)XK;@zRg3tld`Ln$dob@hW z`_I*|P0L+8YYXqhRMDXffh;GFs_fLF%`O>4*E&G&e@cXC(GGj2CxI zW+o4ep4-I6YQIuUl#T=4oC+XWtPwsqV+Mn$L01NQo^h-boS12!lO zP9|E<95wu}wi#0NK4*3p-K!c|^3fd{@9wo=E+ORO!S`YZ--}x5GKF**p0zIWWFCOb z0Xa+Q>^I477OI_nJ=hF;!Dwx6|Jv2JgD(iL6Zi1ZdHpwg?L?I+W~hWkFZn)Q5aG&X zQB{XfH~bAU!_ND3)2t`nglq~jBsRMkh77Obj7Ucs{we0Lu?S;ieYjna^8p*7gldcU zWM^;IP0+t-SkZX8>V`t7C4B!)FqJA!wtY6GvRolFl?d9gi1~>#tddfXTDwo@SvKjz zocDs!715E_db*1w2`yRVrj$as+Atv8yyNhz-xvxErI4oqw}&_)^@Uh-k`}(K+KM7JMMNB%$tboY0l;Dn#Wg*lXGuAya1Tcc|v6T3Z7&tejEx~7C i@>_SYH13=0wH<&K!_^5Gp)h~@jRH{4p2%v)VB&vPBb(y@ literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/sampler/sampler/styles.css b/WebContent/VAADIN/themes/sampler/sampler/styles.css index db641c4ebb..9952e22c05 100644 --- a/WebContent/VAADIN/themes/sampler/sampler/styles.css +++ b/WebContent/VAADIN/themes/sampler/sampler/styles.css @@ -1,8 +1,12 @@ /****************************************************************************** * Sampler styles ******************************************************************************/ + h3 { + margin-bottom: 0.2em; + } + .v-app-SamplerApplication { - background-color: white; + background-color: #fff; } .v-app-SamplerApplication .v-horizontallayout-topbar { @@ -128,7 +132,8 @@ .v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-pressed, .v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-disabled, .v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch:active, -.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch.v-pressed { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch.v-pressed, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-down.v-nativebutton-tree-switch { background-position: right bottom; } .v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton, @@ -252,6 +257,7 @@ .v-app-SamplerApplication .v-splitpanel-first-container-main-split { background: #eaebec url(tree-bg.png) repeat-x fixed; + font-family: arial, helvetica, verdana, sans-serif; } .v-app-SamplerApplication .v-splitpanel-hsplitter-main-split { @@ -270,11 +276,17 @@ } + +.v-app-SamplerApplication .v-splitpanel-first-container-main-split .v-link { + padding: 13px 0 5px 18px; + font-weight: bold; +} + + .v-app-SamplerApplication .v-tree-menu { - font-family: arial, helvetica, verdana, sans-serif; font-size: 12px; line-height: 17px; - padding: 13px 0; + padding: 0 0 13px; } .v-sa .v-app-SamplerApplication .v-tree-menu { font-family: helvetica, arial, verdana, sans-serif; @@ -291,33 +303,75 @@ /* Sample grid styles */ -.v-app-SamplerApplication .v-csslayout-grid { - background: transparent url(grid-bg.png) 0 80px; - margin: 0 20px 50px; +.v-app-SamplerApplication div.v-csslayout-grid { + margin-bottom: 50px; + min-height: 0; +} + +.v-app-SamplerApplication .v-label-root-section { + font-family: arial, helvetica, verdana, sans-serif; + line-height: normal; + padding: 30px 0 10px 0; + margin: 0 30px 10px; + height: 30px; + border-bottom: 1px solid #d5d8db; + color: #707376; + clear: left; +} + +.v-sa .v-app-SamplerApplication .v-label-root-section { + font-family: helvetica, arial, verdana, sans-serif; } -.v-app-SamplerApplication .v-label-section { +.v-app-SamplerApplication .v-label-root-section em { + float: right; + margin-top: 12px; + font-style: normal; + color: #b4b8bc; + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 0.02em; +} + +.v-app-SamplerApplication .v-label-root-section h2 { font-family: "Helvetica Neue", helvetica, arial, verdana, sans-serif; + margin: 0 20px 0 0; font-size: 24px; - font-weight: normal; - line-height: normal; + font-weight: bold; text-shadow: 0 2px 1px #c0c1c2; color: #1e2229; - padding: 30px 0 20px 0; - height: 30px; + float: left; +} +.v-app-SamplerApplication .v-label-root-section span { + display: block; + white-space: nowrap; + margin: 12px 10px 0 0; + overflow: hidden; + text-overflow: ellipsis; +} + +.v-csslayout-grid .v-csslayout-root { + padding: 0 20px 20px; +} + +.v-csslayout-grid .v-csslayout-featureset { + float: left; +} + +.v-csslayout-grid .v-csslayout-featureset-odd { + background: #fafafa; +} + +.v-csslayout-grid .v-csslayout-title { + clear: left; } .v-csslayout-grid .v-label-subsection { font-size: 11px; line-height: 16px; color: #787b7e; - float: left; - clear: left; - width: 155px; - height: 131px; - padding: 15px 175px 0 15px; - margin-right: -175px; - background: transparent url(subsection-bg.png) no-repeat; + padding: 15px 0 5px; white-space: normal; } @@ -335,7 +389,7 @@ float: left; height: 132px; width: 87px; - margin: 14px 15px 0; + margin: 4px 8px 0 4px; position: relative; } @@ -346,7 +400,9 @@ position: absolute; } -.v-csslayout-grid .screenshot .v-button-caption { +.v-csslayout-grid .screenshot span, +.v-csslayout-grid .screenshot a:link span, +.v-csslayout-grid .screenshot a:visited span { display: block; width: 87px; text-align: center; @@ -355,26 +411,100 @@ font-size: 12px; color: #212325; font-family: arial, helvetica, sans-serif; - font-weight: bold; + font-weight: normal; line-height: normal; position: absolute; background: transparent url(screenshot-frame.png) no-repeat 4px 2px; padding-top: 84px; height: 30px; + color: #222; +} +.v-csslayout-grid .screenshot a:hover span { + background: transparent url(screenshot-frame-hover.png) no-repeat 1px 0; } -.v-csslayout-grid .screenshot:hover .v-button-caption { - background: transparent url(screenshot-frame-hover.png) no-repeat 1px 0px; +.v-csslayout-grid .new span { + background: transparent url(screenshot-frame-new.png) no-repeat 2px 0; +} +.v-csslayout-grid .new a:hover span { + background: transparent url(screenshot-frame-new-hover.png) no-repeat 1px 0; } -/* -.v-app-SamplerApplication .v-label-subsection { - font-family: helvetica, arial, verdana, sans-serif; - font-size: 16px; + +/* Highlight features (samples directly inside the root) */ +.v-csslayout-grid .highlights-title { + height: 40px; +} +.v-csslayout-grid .highlights-title h2 { + font-size: 36px; font-weight: normal; - color: #666666; - text-indent: 15px; - padding-right: 20px; -}*/ +} +.v-csslayout-grid .highlights-title em { + margin-top: 24px; +} +.v-csslayout-grid .highlights-description { + font-size: 14px; + line-height: 24px; + margin: 10px 30px 20px; + white-space: normal; + color: #555a5f; +} +.v-csslayout-highlight { + width: 50%; + float: left; + font-family: Arial, Helvetica, sans-serif; + font-size: 13px; + overflow: visible; + +} + +.v-sa .v-csslayout-highlight { + font-family: Helvetica, Arial, sans-serif; +} + +.v-csslayout-highlight .v-csslayout-margin { + margin: 10px 25px 30px; +} + +.highlight .v-link a { + display: block; + height: 90px; + position: relative; +} + +.highlight .v-link .v-icon { + margin: 4px 0 4px 5px; +} + +.highlight .v-link span { + display: block; + position: absolute; + top: 0; + left: 0; + padding: 4px 0 0 92px; + height: 87px; + font-size: 18px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 2px 1px #e1e2e2; + vertical-align: top; + background: transparent url(screenshot-frame.png) no-repeat 3px 3px; + text-overflow: ellipsis; +} + +.highlight .v-link a:hover span { + background: transparent url(screenshot-frame-hover.png) no-repeat 0 1px; +} + +.highlight .v-label { + white-space: normal; + margin: -55px 0 0 92px; +} + +.highlight .v-label p { + margin-top: 0; +} + + .v-app-SamplerApplication .v-table-featuretable tr.v-table-row, -- 2.39.5