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

2 files changed, 140 insertions, 41 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);
+    }
   }
 
 }