From: Jouni Koivuviita Date: Tue, 3 Feb 2009 14:17:11 +0000 (+0000) Subject: New Sampler theme started. X-Git-Tag: 6.7.0.beta1~3231 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=4467224bb7b14af346ef0a49ec0904b8e0561d6f;p=vaadin-framework.git New Sampler theme started. svn changeset:6714/svn branch:trunk --- diff --git a/WebContent/ITMILL/themes/sampler/sampler/breadcrumb-current-left.png b/WebContent/ITMILL/themes/sampler/sampler/breadcrumb-current-left.png new file mode 100644 index 0000000000..2a0cbc87c4 Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/breadcrumb-current-left.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/breadcrumb-current-right.png b/WebContent/ITMILL/themes/sampler/sampler/breadcrumb-current-right.png new file mode 100644 index 0000000000..df814beb63 Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/breadcrumb-current-right.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/bullet.png b/WebContent/ITMILL/themes/sampler/sampler/bullet.png new file mode 100644 index 0000000000..cda2f7ac56 Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/bullet.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bg.png b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bg.png new file mode 100644 index 0000000000..ef8a116e38 Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bg.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bottom.png b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bottom.png new file mode 100644 index 0000000000..e168b8be23 Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bottom.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/info-bubble-separator.png b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-separator.png new file mode 100644 index 0000000000..4b3aa1751c Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-separator.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/info-bubble-top.png b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-top.png new file mode 100644 index 0000000000..adc83e5faf Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-top.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/magnifier.png b/WebContent/ITMILL/themes/sampler/sampler/magnifier.png new file mode 100644 index 0000000000..396eed7275 Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/magnifier.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/main-bg.png b/WebContent/ITMILL/themes/sampler/sampler/main-bg.png new file mode 100644 index 0000000000..a535ed01cb Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/main-bg.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/next.png b/WebContent/ITMILL/themes/sampler/sampler/next.png index 1193bc1897..4a3b867ad0 100644 Binary files a/WebContent/ITMILL/themes/sampler/sampler/next.png and b/WebContent/ITMILL/themes/sampler/sampler/next.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/prev.png b/WebContent/ITMILL/themes/sampler/sampler/prev.png index ccaff7d02d..b6d9d455c1 100644 Binary files a/WebContent/ITMILL/themes/sampler/sampler/prev.png and b/WebContent/ITMILL/themes/sampler/sampler/prev.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/sampler.png b/WebContent/ITMILL/themes/sampler/sampler/sampler.png index bfec8a4986..e97eeac346 100644 Binary files a/WebContent/ITMILL/themes/sampler/sampler/sampler.png and b/WebContent/ITMILL/themes/sampler/sampler/sampler.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/segment.png b/WebContent/ITMILL/themes/sampler/sampler/segment.png new file mode 100644 index 0000000000..a2f5049589 Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/segment.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/styles.css b/WebContent/ITMILL/themes/sampler/sampler/styles.css index 829e82e95e..e97058fb49 100644 --- a/WebContent/ITMILL/themes/sampler/sampler/styles.css +++ b/WebContent/ITMILL/themes/sampler/sampler/styles.css @@ -4,26 +4,87 @@ .i-app-SamplerApplication { background-color: white; } + .i-app-SamplerApplication .i-horizontallayout-topbar { - border-bottom: 3px solid #ccc; + border-bottom: 1px solid #fff; + background: #5c5d60 url(top-bg.png) repeat-x; } -.i-app-SamplerApplication .i-horizontallayout-togglebar { - border-bottom: 1px solid #eee; - background: transparent url(grayfade.png) repeat-x; + +.i-app-SamplerApplication .main-split { + background: transparent url(main-bg.png) repeat-x; +} + +.i-app-SamplerApplication .topbar .logo { + width: 147px; + height: 44px; + margin: 0; + padding: 0; + background: transparent url(sampler.png) no-repeat; + overflow: hidden; +} + +.i-app-SamplerApplication .topbar .logo img { + display: none; } .i-app-SamplerApplication .i-popupview-quickjump { background: transparent url(quickjump.png) no-repeat 0px 1px; } -.i-customcomponent-breadcrumbs .i-link a { +.i-customcomponent-breadcrumbs { + font-family: helvetica, arial, verdana, sans-serif; +} +.i-customcomponent-breadcrumbs .i-horizontallayout-spacing-on { + padding-left: 5px; +} + +.i-customcomponent-breadcrumbs .i-link a, +.i-customcomponent-breadcrumbs .i-label { + text-decoration: none; + color: #1b252b; + text-shadow: 0 1px 0 #8f9193; + font-size: 11px; + line-height: 13px; + padding-top: 3px; + display: block; +} +.i-customcomponent-breadcrumbs .i-label { + font-size: 13px; + line-height: 12px; + padding: 4px 0 0 0; +} +.i-sa .i-customcomponent-breadcrumbs .i-label { + padding-top: 3px; +} +.i-customcomponent-breadcrumbs .i-link span { text-decoration: none; } .i-customcomponent-breadcrumbs .i-link a:hover { - text-decoration: underline; + text-decoration: none; + color: #000; +} +.i-customcomponent-breadcrumbs .i-link-bold { + height: 20px; + padding: 0 0 0 9px; + background: transparent url(breadcrumb-current-left.png); } .i-customcomponent-breadcrumbs .i-link-bold a { - font-weight: bold; + display: block; + height: 16px; + background: transparent url(breadcrumb-current-right.png) no-repeat right top; + font-size: 10px; + font-weight: bold; + color: #c2c4c6; + text-shadow: 0 1px 0 #3a3d43; + padding: 4px 9px 0 0; + cursor: default; +} +.i-sa .i-customcomponent-breadcrumbs .i-link-bold a { + height: 17px; + padding-top: 3px; +} +.i-customcomponent-breadcrumbs .i-link-bold a:hover { + color: #c2c4c6; } .i-app-SamplerApplication .i-horizontallayout-topbar .i-button-link span { @@ -32,19 +93,80 @@ .i-app-SamplerApplication .i-horizontallayout-topbar .i-button-link:hover span { text-decoration: underline; } +.i-app-SamplerApplication .i-horizontallayout-segment .i-button, +.i-app-SamplerApplication .i-horizontallayout-segment .i-popupview { + width: 30px; + height: 24px; + overflow: hidden; + padding: 0; + border: none; + background: transparent url(segment.png) no-repeat; + cursor: default; +} +.i-app-SamplerApplication .i-horizontallayout-segment .i-button:active, +.i-app-SamplerApplication .i-horizontallayout-segment .i-popupview:active { + background-position: left bottom; +} +.i-app-SamplerApplication .i-horizontallayout-segment .i-button-next, +.i-app-SamplerApplication .i-horizontallayout-segment .i-button-tree-switch { + background-position: right top; +} +.i-app-SamplerApplication .i-horizontallayout-segment .i-button-next:active, +.i-app-SamplerApplication .i-horizontallayout-segment .i-button-tree-switch:active { + background-position: right bottom; +} +.i-app-SamplerApplication .i-horizontallayout-segment .i-button-down { + background-position: right bottom; +} +.i-app-SamplerApplication .i-horizontallayout-segment .i-button span, +.i-app-SamplerApplication .i-horizontallayout-segment .i-popupview span { + display: block; + height: 24px; + background-repeat: no-repeat; + background-position: 50% 40%; +} +.i-app-SamplerApplication .i-horizontallayout-segment .i-button-tree-switch span { + background-image: url(tree.png); +} +.i-app-SamplerApplication .i-horizontallayout-segment .i-popupview span { + background-image: url(magnifier.png); +} +.i-app-SamplerApplication .i-horizontallayout-segment .i-button-previous span { + background-image: url(prev.png); +} +.i-app-SamplerApplication .i-horizontallayout-segment .i-button-next span { + background-image: url(next.png); +} +.i-popupview-popup-quickjump { + background: transparent; + border: none; +} + +.i-app-SamplerApplication .i-tree-menu { + font-family: helvetica, arial, verdana, sans-serif; + font-size: 12px; + line-height: 17px; + padding: 13px 0; +} .i-app-SamplerApplication .i-label-section { - font-size: 18px; + font-family: "Helvetica Neue", helvetica, arial, verdana, sans-serif; + font-size: 24px; font-weight: bold; - border-bottom: 3px solid #eee; + border-bottom: 1px solid #eee; line-height: 35px; text-indent: 15px; + text-shadow: 0 2px 1px #c0c1c2; + color: #1e2229; + } .i-app-SamplerApplication .i-label-subsection { + font-family: helvetica, arial, verdana, sans-serif; font-size: 16px; - font-weight: bold; + font-weight: normal; color: #666666; text-indent: 15px; + padding-right: 20px; } .i-app-SamplerApplication .i-button-screenshot { border: 3px solid #ccc; @@ -82,55 +204,97 @@ border-top: 0px; } -.i-app-SamplerApplication .i-panel-feature-main { - background: transparent url(grayfade.png) repeat-x; +.i-app-SamplerApplication .i-horizontallayout-sample-view .i-horizontallayout-margin-top { + padding-top: 27px; +} +.i-app-SamplerApplication .i-horizontallayout-sample-view .i-horizontallayout-margin-bottom { + padding-bottom: 24px; } .i-app-SamplerApplication .i-caption-feature-controls { + font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-weight: bold; - font-size: 18px; - text-indent: 10px; + font-size: 24px; + line-height: 28px; + color: #1e2229; + letter-spacing: -0.015em; + text-shadow: 0 2px 1px #c0c1c2; } .i-app-SamplerApplication .feature-info { - background-color: #999; - color: white; - line-height: 20px; + background: #1e2123 url(info-bubble-bg.png) repeat-y; + color: #9d9ea0; + font-family: helvetica, arial, verdana, sans-serif; + font-size: 12px; + line-height: 19px; } .i-app-SamplerApplication .feature-info div.i-link a { - color: white; - line-height: 20px; + color: #b7c0c7; + font-size: 11px; + line-height: 18px; + background: transparent url(bullet.png) no-repeat 2px 60%; + padding-left: 8px; +} +.i-app-SamplerApplication .feature-info div.i-link a span { + text-decoration: none; } .i-app-SamplerApplication .feature-info .i-panel-caption { color: #fff; - font-size: 16px; + font-family: "Helvetica Neue", helvetica, arial, verdana, sans-serif; + font-size: 14px; font-weight: bold; - line-height: 25px; + line-height: normal; + text-shadow: 0 1px 0 #272a2b; + background: transparent url(info-bubble-top.png); + margin: 0; + padding-bottom: 10px; + padding-left: 28px; } -/* .i-app-SamplerApplication .feature-info .i-panel-content { - background: transparent url(finfofade.png) no-repeat 0px 5px; + background: transparent url(info-bubble-top.png) no-repeat 0 -44px; +} +.i-app-SamplerApplication .i-panel-deco-feature-info { + height: 28px; + background: transparent url(info-bubble-bottom.png); + margin: 0; +} + +.i-app-SamplerApplication .feature-info .i-verticallayout .i-verticallayout-margin-left { + padding-left: 28px; +} +.i-app-SamplerApplication .feature-info .i-verticallayout .i-verticallayout-margin-right { + padding-right: 20px; } -*/ + .i-app-SamplerApplication .feature-info .i-caption { font-weight: bold; - font-size: 16px; + font-size: 12px; line-height: 30px; + color: #fff; + background: transparent url(info-bubble-separator.png) repeat-x 0 10px; +} +.i-app-SamplerApplication .feature-info .i-captiontext { + padding-top: 15px; +} +.i-app-SamplerApplication .feature-info .i-label { + padding-bottom: 9px; } .i-app-SamplerApplication .i-button-showcode { - border-bottom: 1px dotted #eee; - padding: 1px 0 1px 7px; + font-family: helvetica, arial, verdana, sans-serif; + display: inline; + font-size: 12px; + line-height: 20px; + height: 20px; } .i-app-SamplerApplication .i-button-showcode span { - color: #999; + color: #8b8e91; text-decoration: none; - font-style: italic;; } .i-app-SamplerApplication .i-button-showcode:hover span { - text-decoration: underline; + color: #62696f; } .i-app-SamplerApplication .i-panel-content-source { border: 1px solid #eee; - border-top: none; + background: #fff; } .i-customcomponent-ModeSwitch .i-button { diff --git a/WebContent/ITMILL/themes/sampler/sampler/top-bg.png b/WebContent/ITMILL/themes/sampler/sampler/top-bg.png new file mode 100644 index 0000000000..b28bbbb1dc Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/top-bg.png differ diff --git a/WebContent/ITMILL/themes/sampler/sampler/tree.png b/WebContent/ITMILL/themes/sampler/sampler/tree.png new file mode 100644 index 0000000000..6e7ce5122c Binary files /dev/null and b/WebContent/ITMILL/themes/sampler/sampler/tree.png differ diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureView.java b/src/com/itmill/toolkit/demo/sampler/FeatureView.java index 433d1d5510..9b7d7486c0 100644 --- a/src/com/itmill/toolkit/demo/sampler/FeatureView.java +++ b/src/com/itmill/toolkit/demo/sampler/FeatureView.java @@ -35,23 +35,25 @@ public class FeatureView extends HorizontalLayout { public FeatureView() { - setSizeFull(); + setWidth("100%"); + setMargin(true); + setSpacing(true); + setStyleName("sample-view"); left = new Panel(); left.setStyleName(Panel.STYLE_LIGHT); left.addStyleName("feature-main"); left.setSizeFull(); ((VerticalLayout) left.getLayout()).setSpacing(true); + ((VerticalLayout) left.getLayout()).setMargin(false); addComponent(left); setExpandRatio(left, 1); right = new Panel(); right.setStyleName(Panel.STYLE_LIGHT); right.addStyleName("feature-info"); - right.setWidth("350px"); - right.setHeight("100%"); + right.setWidth("369px"); addComponent(right); - right.getLayout().setMargin(false, true, true, true); controls = new VerticalLayout(); controls.setStyleName("feature-controls"); @@ -63,7 +65,6 @@ public class FeatureView extends HorizontalLayout { }); showCode.setStyleName(Button.STYLE_LINK); showCode.addStyleName("showcode"); - showCode.setWidth("100%"); controls.addComponent(showCode); sourceCode = new CodeLabel(); @@ -100,7 +101,7 @@ public class FeatureView extends HorizontalLayout { left.addComponent(getExampleFor(feature)); - right.setCaption("Description"); + right.setCaption("Description and Resources"); Label l = new Label(feature.getDescription()); l.setContentMode(Label.CONTENT_XHTML); diff --git a/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java b/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java index 4365533527..0bd2e372e9 100644 --- a/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java +++ b/src/com/itmill/toolkit/demo/sampler/SamplerApplication.java @@ -147,6 +147,7 @@ public class SamplerApplication extends Application { "UA-658457-6", "none"); // "backbutton" UriFragmentUtility uriFragmentUtility = new UriFragmentUtility(); + // breadcrumbs BreadCrumbs breadcrumbs = new BreadCrumbs(); @@ -163,11 +164,11 @@ public class SamplerApplication extends Application { // topbar (navigation) HorizontalLayout nav = new HorizontalLayout(); mainExpand.addComponent(nav); - nav.setHeight("50px"); + nav.setHeight("44px"); nav.setWidth("100%"); nav.setStyleName("topbar"); nav.setSpacing(true); - nav.setMargin(false, true, false, true); + nav.setMargin(false, true, false, false); // Upper left logo Component logo = createLogo(); @@ -191,19 +192,26 @@ public class SamplerApplication extends Application { } }); + // Layouts for top area buttons + HorizontalLayout quicknav = new HorizontalLayout(); + HorizontalLayout arrows = new HorizontalLayout(); + nav.addComponent(quicknav); + nav.addComponent(arrows); + quicknav.setStyleName("segment"); + arrows.setStyleName("segment"); + nav.setComponentAlignment(quicknav, "middle"); + nav.setComponentAlignment(arrows, "middle"); + // Previous sample previousSample = createPrevButton(); - nav.addComponent(previousSample); - nav.setComponentAlignment(previousSample, Alignment.MIDDLE_RIGHT); + arrows.addComponent(previousSample); // Next sample nextSample = createNextButton(); - nav.addComponent(nextSample); - nav.setComponentAlignment(nextSample, Alignment.MIDDLE_LEFT); + arrows.addComponent(nextSample); // "Search" combobox // TODO add input prompt Component search = createSearch(); - nav.addComponent(search); - nav.setComponentAlignment(search, Alignment.MIDDLE_LEFT); + quicknav.addComponent(search); // togglebar // mainExpand.addComponent(toggleBar); @@ -216,6 +224,7 @@ public class SamplerApplication extends Application { // Main left/right split; hidden menu tree mainSplit = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL); mainSplit.setSizeFull(); + mainSplit.setStyleName("main-split"); mainExpand.addComponent(mainSplit); mainExpand.setExpandRatio(mainSplit, 1); @@ -240,9 +249,7 @@ public class SamplerApplication extends Application { // Show / hide tree Component treeSwitch = createTreeSwitch(); - nav.addComponent(treeSwitch); - // toggleBar.setExpandRatio(treeSwitch, 1); - nav.setComponentAlignment(treeSwitch, Alignment.MIDDLE_RIGHT); + quicknav.addComponent(treeSwitch); addListener(new CloseListener() { public void windowClose(CloseEvent e) { @@ -322,7 +329,7 @@ public class SamplerApplication extends Application { * super.changeVariables(source, variables); if (isPopupVisible()) { * search.focus(); } } }; */ - PopupView pv = new PopupView("", search); + PopupView pv = new PopupView("", search); pv.addListener(new PopupView.PopupVisibilityListener() { public void popupVisibilityChange(PopupVisibilityEvent event) { if (event.isPopupVisible()) { @@ -330,8 +337,6 @@ public class SamplerApplication extends Application { } } }); - pv.setWidth("22px"); - pv.setHeight("22px"); pv.setStyleName("quickjump"); pv.setDescription("Quick jump"); @@ -346,8 +351,8 @@ public class SamplerApplication extends Application { }); logo.setDescription("↶ Home"); logo.setStyleName(Button.STYLE_LINK); + logo.addStyleName("logo"); logo.setIcon(new ThemeResource("sampler/sampler.png")); - logo.setWidth("160px"); return logo; } @@ -367,11 +372,8 @@ public class SamplerApplication extends Application { } } }); - b.setWidth("22px"); - b.setHeight("22px"); - b.setIcon(new ThemeResource("sampler/next.png")); + b.setStyleName("next"); b.setDescription("Jump to the next sample"); - b.setStyleName(Button.STYLE_LINK); return b; } @@ -387,37 +389,33 @@ public class SamplerApplication extends Application { } }); b.setEnabled(false); - b.setWidth("22px"); - b.setHeight("22px"); - b.setIcon(new ThemeResource("sampler/prev.png")); + b.setStyleName("previous"); b.setDescription("Jump to the previous sample"); - b.setStyleName(Button.STYLE_LINK); return b; } private Component createTreeSwitch() { - ModeSwitch m = new ModeSwitch(); - m.addMode(1, "", "Hide navigation", new ThemeResource( - "sampler/hidetree.gif")); - m.addMode(2, "", "Show navigation", new ThemeResource( - "sampler/showtree.gif")); - m.addListener(new ModeSwitch.ModeSwitchListener() { - public void componentEvent(Event event) { - if (event instanceof ModeSwitchEvent) { - if (((ModeSwitchEvent) event).getMode().equals(1)) { - mainSplit.setSplitPosition(0); - navigationTree.setVisible(false); - mainSplit.setLocked(true); - } else { - mainSplit.setSplitPosition(20); - mainSplit.setLocked(false); - navigationTree.setVisible(true); - } + final Button b = new Button(); + b.setStyleName("tree-switch"); + b.addListener(new Button.ClickListener() { + public void buttonClick(ClickEvent event) { + if (b.getStyleName().contains("down")) { + b.removeStyleName("down"); + mainSplit.setSplitPosition(0); + navigationTree.setVisible(false); + mainSplit.setLocked(true); + } else { + b.addStyleName("down"); + mainSplit.setSplitPosition(20); + mainSplit.setLocked(false); + navigationTree.setVisible(true); } } }); - m.setMode(1); - return m; + mainSplit.setSplitPosition(0); + navigationTree.setVisible(false); + mainSplit.setLocked(true); + return b; } private Component createModeSwitch() { @@ -445,6 +443,7 @@ public class SamplerApplication extends Application { private Tree createMenuTree() { final Tree tree = new Tree(); tree.setImmediate(true); + tree.setStyleName("menu"); tree.setContainerDataSource(allFeatures); currentFeature.addListener(new Property.ValueChangeListener() { public void valueChange(ValueChangeEvent event) { @@ -526,8 +525,8 @@ public class SamplerApplication extends Application { layout.removeAllComponents(); { // home - ActiveLink link = new ActiveLink("⌂ Home", - new ExternalResource("#")); + ActiveLink link = new ActiveLink("Home", new ExternalResource( + "#")); link.addListener(this); layout.addComponent(link); }