New Sampler theme started.

svn changeset:6714/svn branch:trunk

18 files changed, 245 insertions, 81 deletions

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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/breadcrumb-current-left.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/breadcrumb-current-right.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/bullet.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bg.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-bottom.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-separator.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/info-bubble-top.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/magnifier.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/main-bg.png
diff --git a/WebContent/ITMILL/themes/sampler/sampler/next.png b/WebContent/ITMILL/themes/sampler/sampler/next.png
index 1193bc1897..4a3b867ad0 100644
--- a/WebContent/ITMILL/themes/sampler/sampler/next.png
+++ b/WebContent/ITMILL/themes/sampler/sampler/next.png
diff --git a/WebContent/ITMILL/themes/sampler/sampler/prev.png b/WebContent/ITMILL/themes/sampler/sampler/prev.png
index ccaff7d02d..b6d9d455c1 100644
--- a/WebContent/ITMILL/themes/sampler/sampler/prev.png
+++ b/WebContent/ITMILL/themes/sampler/sampler/prev.png
diff --git a/WebContent/ITMILL/themes/sampler/sampler/sampler.png b/WebContent/ITMILL/themes/sampler/sampler/sampler.png
index bfec8a4986..e97eeac346 100644
--- a/WebContent/ITMILL/themes/sampler/sampler/sampler.png
+++ b/WebContent/ITMILL/themes/sampler/sampler/sampler.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/segment.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/top-bg.png
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
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/sampler/tree.png
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("<span></span>", 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);
             }