Added a new valo-menu style 'large-icons'

Valo-menu now support multiple levels of menus side-by-side, and the
new ‘large-icons’ style creates a different style which emphasizes the
icons more than the captions of the menu items.

Menu items can now have “notification badges” as well.

Update ValoThemeTest to use the new menu layout.

Change-Id: I5e7e9aabc47dab7444206141d994d7b5cd8ecaca

4 files changed, 254 insertions, 61 deletions

diff --git a/WebContent/VAADIN/themes/tests-valo/styles.scss b/WebContent/VAADIN/themes/tests-valo/styles.scss
index a151fbf318..89fc5755f4 100644
--- a/WebContent/VAADIN/themes/tests-valo/styles.scss
+++ b/WebContent/VAADIN/themes/tests-valo/styles.scss
@@ -7,8 +7,6 @@
 // @import "blueprint";
 
 
-@include valo-natural-page-scrolling;
-
 .tests-valo {
   @include valo;
 
@@ -17,10 +15,6 @@
     font-weight: 400;
   }
 
-  .view {
-    min-height: 600px;
-  }
-
   $color1: hsl(220, 5%, 38%);
   $color2: #5d73c0;
   $color3: #3dbc1a;
@@ -104,10 +98,6 @@
     @include valo-slider-indicator-style($background-color: #dcdc1e);
   }
 
-  .v-slider-no-indicator {
-    @include valo-slider-no-indicator;
-  }
-
 
   .v-panel-caption-color1 {
     @include valo-panel-caption-style($background-color: $color1);
diff --git a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
index d4aa8aa186..30e390c7fe 100644
--- a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
+++ b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
@@ -2,29 +2,42 @@ $valo-menu-background-color: null !default;
 
 @mixin valo-menu {
 
-  $bg-lightness: if(color-luminance($v-app-background-color) < 10, 15%, -65%);
+  $bg-lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%);
   $bg: $valo-menu-background-color or scale-color($v-app-background-color, $lightness: $bg-lightness);
-
-  .v-slot-valo-menu {
-    position: fixed;
-  }
+  $font-color: valo-font-color($bg, 0.5);
 
   .valo-menu {
-    position: fixed;
     height: 100%;
-    overflow: auto;
-    padding-bottom: $v-unit-size;
     @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
-    color: valo-font-color($bg, 0.65);
+    color: $font-color;
     font-size: round($v-font-size * 0.9);
     line-height: round($v-unit-size * 0.8);
     border-right: valo-border($color: $bg);
+    white-space: nowrap;
+
+    .valo-menu-part {
+      border-left: valo-border($color: $bg, $strength: 0.6);
+      height: 100%;
+      padding-bottom: $v-unit-size;
+      overflow: auto;
+
+      &:first-child {
+        border-left: none;
+      }
+    }
 
     .valo-menu-title,
     .valo-menu-subtitle,
     .valo-menu-item {
       display: block;
       line-height: inherit;
+      white-space: nowrap;
+      position: relative;
+
+      .valo-menu-badge {
+        position: absolute;
+        right: round($v-unit-size/2);
+      }
     }
 
     .valo-menu-title {
@@ -34,7 +47,7 @@ $valo-menu-background-color: null !default;
       color: $font-color;
       text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
       padding: round($v-unit-size/3) round($v-unit-size/2);
-      font-size: 0.9em;
+      font-size: round($v-font-size * 0.9);
       border-bottom: valo-border($color: $v-selection-color);
       box-shadow: valo-bevel-and-shadow($shadow: $v-shadow);
 
@@ -56,15 +69,12 @@ $valo-menu-background-color: null !default;
     }
 
     .valo-menu-subtitle {
-      color: valo-font-color($bg, 0.35);
+      color: valo-font-color($bg, 0.33);
       margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
       border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone);
-      position: relative;
 
-      .badge {
-        position: absolute;
-        right: round($v-unit-size/2);
-        color: mix(valo-font-color($bg),$v-selection-color);
+      .valo-menu-badge {
+        color: mix(valo-font-color($bg), $v-selection-color);
       }
     }
 
@@ -74,21 +84,36 @@ $valo-menu-background-color: null !default;
       padding: 0 round($v-unit-size) 0 round($v-unit-size/2);
       cursor: pointer;
       position: relative;
+      text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px);
+      @include transition(background-color 300ms, color 60ms);
+
+      $diff: color-luminance($bg) - color-luminance($v-selection-color);
+      $active-color: $v-selection-color;
+      @if abs($diff) < 30 {
+        $active-color: lighten($v-selection-color, 10%);
+      }
+
+      .valo-menu-item-caption {
+        vertical-align: middle;
+        display: inline-block;
+        width: 90%;
+        max-width: 15em;
+        padding-right: round($v-unit-size/2);
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
 
-      &:before {
-        content: "";
-        $diff: color-luminance($bg) - color-luminance($v-selection-color);
-        @if abs($diff) < 30 {
-          background: lighten($v-selection-color, 10%);
-        } @else {
-          background: $v-selection-color;
+      &.selected {
+        background: darken($bg, 3%);
+
+        .v-icon {
+          color: $active-color;
+        }
+
+        .valo-menu-badge {
+          @include valo-gradient($color: $active-color);
+          color: valo-font-color($active-color);
         }
-        position: absolute;
-        left: 0;
-        height: 100%;
-        width: 0;
-        border-radius: 0 $v-border-radius $v-border-radius 0;
-        @include transition(width 300ms);
       }
 
       &:hover,
@@ -96,10 +121,94 @@ $valo-menu-background-color: null !default;
         color: valo-font-color($bg, 1);
       }
 
-      &.selected:before {
-        width: round($v-unit-size/8);
+      // Font icons
+      span.v-icon {
+        min-width: 1em;
+        margin-right: round($v-unit-size/2);
+        text-align: center;
+        vertical-align: middle;
+
+        + span {
+          margin-left: 0;
+        }
+      }
+
+      .valo-menu-badge {
+        background: lighten($bg, 5%);
+        @include transition(background-color 300ms);
+        line-height: 1;
+        padding: round($v-unit-size/9) round($v-unit-size/6);
+        min-width: round($v-font-size/1.5);
+        text-align: center;
+        top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2;
+        border-radius: $v-border-radius;
+      }
+    }
+
+    .valo-menu-part.large-icons {
+      $bg: darken($bg, 4%);
+      background-color: $bg;
+
+      .valo-menu-item {
+        font-size: $v-unit-size;
+        line-height: 1;
+        padding: round($v-unit-size/3);
+        min-width: $v-unit-size * 2;
+        max-width: $v-unit-size * 3;
+        text-align: center;
+
+        .valo-menu-item-caption {
+          display: block;
+          width: auto;
+          margin: .3em 0 0;
+          padding: 0;
+          font-size: round($v-font-size * 0.7);
+        }
+
+        .v-icon {
+          margin: 0;
+        }
+
+        span.v-icon {
+          opacity: 0.8;
+        }
+
+        &.selected {
+          background: darken($bg, 3%);
+
+          .v-icon {
+            opacity: 1;
+          }
+
+          .valo-menu-badge {
+            border-color: darken($bg, 3%);
+          }
+        }
+
+        .valo-menu-badge {
+          padding-left: round($v-unit-size/9);
+          padding-right: round($v-unit-size/9);
+          top: round($v-unit-size/5);
+          right: round($v-unit-size/5);
+          border: 2px solid $bg;
+        }
       }
     }
+
+    .valo-menu-logo {
+      display: block;
+      overflow: hidden;
+      width: round($v-unit-size * 1.2) !important;
+      height: round($v-unit-size * 1.2);
+      border-radius: $v-border-radius;
+      text-align: center;
+      @include valo-gradient($color: $v-selection-color);
+      color: valo-font-color($v-selection-color, 1);
+      font-size: round($v-unit-size/1.5);
+      line-height: round($v-unit-size * 1.2);
+      margin: round($v-unit-size/2) auto;
+      box-shadow: valo-bevel-and-shadow($shadow: $v-shadow);
+    }
   }
 
 }
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoMenuLayout.java b/uitest/src/com/vaadin/tests/themes/valo/ValoMenuLayout.java
new file mode 100644
index 0000000000..3a3baa686c
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/ValoMenuLayout.java
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.ui.Component;
+import com.vaadin.ui.ComponentContainer;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class ValoMenuLayout extends HorizontalLayout {
+
+    CssLayout contentArea = new CssLayout();
+
+    CssLayout menuArea = new CssLayout();
+
+    public ValoMenuLayout() {
+        setSizeFull();
+
+        menuArea.setPrimaryStyleName("valo-menu");
+
+        contentArea.setPrimaryStyleName("valo-content");
+        contentArea.addStyleName("v-scrollable");
+        contentArea.setSizeFull();
+
+        addComponents(menuArea, contentArea);
+        setExpandRatio(contentArea, 1);
+    }
+
+    public ComponentContainer getContentContainer() {
+        return contentArea;
+    }
+
+    public void addMenu(Component menu) {
+        menu.addStyleName("valo-menu-part");
+        menuArea.addComponent(menu);
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java
index 75e306edd2..014b1acac8 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java
@@ -19,6 +19,7 @@ import java.util.Iterator;
 import java.util.LinkedHashMap;
 import java.util.Map.Entry;
 
+import com.vaadin.annotations.PreserveOnRefresh;
 import com.vaadin.annotations.Theme;
 import com.vaadin.annotations.Title;
 import com.vaadin.data.Container;
@@ -43,6 +44,7 @@ import com.vaadin.ui.Button.ClickEvent;
 import com.vaadin.ui.Button.ClickListener;
 import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.Component;
+import com.vaadin.ui.ComponentContainer;
 import com.vaadin.ui.CssLayout;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
@@ -53,17 +55,18 @@ import com.vaadin.ui.UI;
 
 @Theme("tests-valo")
 @Title("Valo Theme Test")
+@PreserveOnRefresh
 public class ValoThemeTest extends UI {
 
-    HorizontalLayout root = new HorizontalLayout();
-    CssLayout viewDisplay = new CssLayout();
+    ValoMenuLayout root = new ValoMenuLayout();
+    ComponentContainer viewDisplay = root.getContentContainer();
     CssLayout menu = new CssLayout();
     private Navigator navigator;
     private LinkedHashMap<String, String> menuItems = new LinkedHashMap<String, String>();
 
     @Override
     protected void init(VaadinRequest request) {
-        // Show .v-app-loading badge
+        // Show .v-app-loading valo-menu-badge
         // try {
         // Thread.sleep(2000);
         // } catch (InterruptedException e) {
@@ -74,12 +77,8 @@ public class ValoThemeTest extends UI {
         setContent(root);
         root.setWidth("100%");
 
-        root.addComponent(buildMenu());
-
-        viewDisplay.setWidth("100%");
-        viewDisplay.addStyleName("view");
-        root.addComponent(viewDisplay);
-        root.setExpandRatio(viewDisplay, 1);
+        root.addMenu(buildTestMenu());
+        root.addMenu(buildMenu());
 
         navigator = new Navigator(this, viewDisplay);
 
@@ -103,7 +102,6 @@ public class ValoThemeTest extends UI {
         navigator.addView("calendar", CalendarTest.class);
         navigator.addView("forms", Forms.class);
         navigator.addView("popupviews", PopupViews.class);
-        navigator.addView("random", RandomTests.class);
         navigator.addView("dragging", Dragging.class);
 
         String f = Page.getCurrent().getUriFragment();
@@ -128,7 +126,9 @@ public class ValoThemeTest extends UI {
                         for (Iterator<Component> it = menu.iterator(); it
                                 .hasNext();) {
                             Component c = it.next();
-                            if (item.getValue().equals(c.getCaption())) {
+                            if (c.getCaption() != null
+                                    && c.getCaption().startsWith(
+                                            item.getValue())) {
                                 c.addStyleName("selected");
                                 break;
                             }
@@ -141,6 +141,37 @@ public class ValoThemeTest extends UI {
 
     }
 
+    Component buildTestMenu() {
+        CssLayout menu = new CssLayout();
+        menu.addStyleName("large-icons");
+
+        Label logo = new Label("Va");
+        logo.setSizeUndefined();
+        logo.setPrimaryStyleName("valo-menu-logo");
+        menu.addComponent(logo);
+
+        Button b = new Button(
+                "Reference <span class=\"valo-menu-badge\">3</span>");
+        b.setIcon(FontAwesome.TH_LIST);
+        b.setPrimaryStyleName("valo-menu-item");
+        b.addStyleName("selected");
+        b.setHtmlContentAllowed(true);
+        menu.addComponent(b);
+
+        b = new Button("API");
+        b.setIcon(FontAwesome.BOOK);
+        b.setPrimaryStyleName("valo-menu-item");
+        menu.addComponent(b);
+
+        b = new Button("Examples <span class=\"valo-menu-badge\">12</span>");
+        b.setIcon(FontAwesome.TABLE);
+        b.setPrimaryStyleName("valo-menu-item");
+        b.setHtmlContentAllowed(true);
+        menu.addComponent(b);
+
+        return menu;
+    }
+
     CssLayout buildMenu() {
         // Add items
         menuItems.put("common", "Common UI Elements");
@@ -165,8 +196,6 @@ public class ValoThemeTest extends UI {
         menuItems.put("calendar", "Calendar");
         menuItems.put("forms", "Forms");
 
-        menu.setStyleName("valo-menu");
-
         HorizontalLayout top = new HorizontalLayout();
         top.setWidth("100%");
         top.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT);
@@ -209,8 +238,9 @@ public class ValoThemeTest extends UI {
                 menu.addComponent(label);
             }
             if (item.getKey().equals("panels")) {
-                label.setValue(label.getValue() + " <span class=\"badge\">"
-                        + count + "</span>");
+                label.setValue(label.getValue()
+                        + " <span class=\"valo-menu-badge\">" + count
+                        + "</span>");
                 count = 0;
                 label = new Label("Containers", ContentMode.HTML);
                 label.setPrimaryStyleName("valo-menu-subtitle");
@@ -219,8 +249,9 @@ public class ValoThemeTest extends UI {
                 menu.addComponent(label);
             }
             if (item.getKey().equals("calendar")) {
-                label.setValue(label.getValue() + " <span class=\"badge\">"
-                        + count + "</span>");
+                label.setValue(label.getValue()
+                        + " <span class=\"valo-menu-badge\">" + count
+                        + "</span>");
                 count = 0;
                 label = new Label("Other", ContentMode.HTML);
                 label.setPrimaryStyleName("valo-menu-subtitle");
@@ -234,18 +265,25 @@ public class ValoThemeTest extends UI {
                     navigator.navigateTo(item.getKey());
                 }
             });
+            if (count == 2) {
+                b.setCaption(b.getCaption()
+                        + " <span class=\"valo-menu-badge\">123</span>");
+            }
+            b.setHtmlContentAllowed(true);
             b.setPrimaryStyleName("valo-menu-item");
+            b.setIcon(TestIcon.get());
             menu.addComponent(b);
             count++;
         }
-        label.setValue(label.getValue() + " <span class=\"badge\">" + count
-                + "</span>");
+        label.setValue(label.getValue() + " <span class=\"valo-menu-badge\">"
+                + count + "</span>");
 
         return menu;
     }
 
     static String[] strings = new String[] { "lorem", "ipsum", "dolor", "sit",
-            "amet", "consectetur" };
+            "amet", "consectetur", "quid", "securi", "etiam", "tamquam", "eu",
+            "fugiat", "nulla", "pariatur" };
     static int stringCount = -1;
 
     static String nextString(boolean capitalize) {