Modularize menubar mixins and add submenu indicator for top level items

Refactored menubar mixins so that less overrides are necessary from
normal button styles, and so that custom colored and custom sized menu
bars are possible.

Add new examples to test app for “drop down buttons” and “split
buttons” using MenuBar.

Change-Id: I2b0b76817d1c9119f82b2c2f4d7e5b95a9f05a5c

diff --git a/WebContent/VAADIN/themes/tests-valo/_valotest.scss b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
index 7c024b323e53735dd331b33682b57972cd9242e8..568dfec0b86b4483173b31936a88baba735c678b 100644 (file)
--- a/WebContent/VAADIN/themes/tests-valo/_valotest.scss
+++ b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
@@ -141,4 +141,8 @@
   .v-accordion-item-color1 .v-accordion-item-caption {
     @include valo-accordion-item-caption-style($background-color: $color2);
   }
+
+  .v-menubar-color1 {
+    @include valo-menubar-style($background-color: $v-selection-color, $unit-size: null);
+  }
 }

diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index e79e6898a930aaa7a3b4296d5f1b26e3a757a65f..7d7e85498976aad94f3c8cfd026f6be26960a4ac 100644 (file)
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -1,24 +1,8 @@
 @mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) {
 
   .#{$primary-stylename} {
-    @include valo-button-static-style($states: normal, $vertical-centering: false);
-    @include valo-button-style($states: normal, $cursor: default);
-    padding: 0;
-    text-align: left;
-    overflow: hidden;
-
-    &:focus:not(.v-disabled) {
-      @include valo-button-focus-style($border-fallback: none, $include-box-shadow: false);
-      $box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient);
-      @if type-of($v-focus-style) == list {
-        $box-shadow: $box-shadow, $v-focus-style;
-      }
-      @include box-shadow($box-shadow);
-    }
-
-    &.v-disabled {
-      @include opacity($v-disabled-opacity);
-    }
+    @include valo-button-static-style($states: normal focus disabled, $vertical-centering: false);
+    @include valo-menubar-style;
   }
 
   .#{$primary-stylename}:active:after {
@@ -60,6 +44,20 @@
 
   .#{$primary-stylename} .#{$primary-stylename}-submenu-indicator {
     display: none;
+
+    + .#{$primary-stylename}-menuitem-caption:after {
+      font-family: FontAwesome;
+      content: "\f078";
+      font-size: 0.7em;
+      vertical-align: .15em;
+      margin: 0 -.2em 0 .5em;
+      // IE filters are not supported on pseudo elements
+      opacity: .5;
+    }
+
+    + .#{$primary-stylename}-menuitem-caption:empty:after {
+      margin-left: -.2em;
+    }
   }
 
   .#{$primary-stylename}-popup {
@@ -70,10 +68,10 @@
     }
   }
 
-  
+
   @if $include-additional-styles {
     .#{$primary-stylename}-small {
-      @include valo-menubar-small-style($unit-size: $v-unit-size--small);
+      @include valo-menubar-style($background-color: null, $unit-size: $v-unit-size--small);
       font-size: $v-font-size--small;
     }
 
@@ -87,6 +85,27 @@
 
 
 
+@mixin valo-menubar-style ($primary-stylename: v-menubar, $background-color: $v-background-color, $unit-size: $v-unit-size) {
+  @include valo-button-style($states: normal focus, $cursor: default, $background-color: $background-color, $unit-size: $unit-size);
+  padding: 0;
+  text-align: left;
+
+  @if $unit-size {
+    line-height: $unit-size - first-number($v-border) * 2 - 1px;
+
+    > .#{$primary-stylename}-menuitem {
+      padding: 0 round($unit-size/2.6);
+
+      &[class*="-icon-only"] {
+        width: $unit-size;
+      }
+    }
+  }
+}
+
+
+
+
 @mixin valo-menubar-menuitem-style {
   $border-width: first-number($v-border);
   position: relative;
@@ -95,10 +114,12 @@
   @include box-sizing(border-box);
   @include valo-button-style($states: normal, $border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer);
   background: transparent;
+  @include box-shadow(none);
   border-width: 0 $border-width 0 0;
+  border-color: inherit;
   height: 100%;
+  line-height: inherit;
   vertical-align: top;
-  line-height: $v-unit-size - $border-width*2 - 1px;
   text-align: center;
 
   @if $border-width == 0 {
@@ -253,20 +274,6 @@
 }
 
 
-
-@mixin valo-menubar-small-style ($primary-stylename: v-menubar, $unit-size: round($v-unit-size * 0.8)) {
-  height: $unit-size;
-
-  .#{$primary-stylename}-menuitem {
-    line-height: $unit-size - first-number($v-border)*2;
-    padding: 0 round($unit-size/2.5);
-
-    &[class*="-icon-only"] {
-      width: $unit-size;
-    }
-  }
-}
-
 @mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) {
   border: none;
   border-radius: 0;
@@ -275,9 +282,8 @@
   background: transparent;
   color: inherit;
 
-  &:not(.v-disabled):focus {
-    border: none;
-    @include box-shadow(none);
+  &:focus:after {
+    display: none;
   }
 
   .#{$primary-stylename}-menuitem {
@@ -294,7 +300,8 @@
     }
 
     &:first-child,
-    &:last-child {
+    &:last-child,
+    &:first-child:last-child {
       border-radius: $v-border-radius;
     }
 

diff --git a/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java
index 88eea73513ce474da86fa49dbc7881e01eaa76e4..4a0130931e19f09e6019a716b1617f3418f9b0cd 100644 (file)
--- a/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java
@@ -18,6 +18,7 @@ package com.vaadin.tests.themes.valo;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
 import com.vaadin.server.FontAwesome;
+import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.MenuBar;
 import com.vaadin.ui.MenuBar.Command;
@@ -53,6 +54,62 @@ public class MenuBars extends VerticalLayout implements View {
         menuBar.addStyleName("borderless");
         menuBar.addStyleName("small");
         addComponent(menuBar);
+
+        Label h2 = new Label("Drop Down Button");
+        h2.addStyleName("h2");
+        addComponent(h2);
+
+        HorizontalLayout wrap = new HorizontalLayout();
+        wrap.addStyleName("wrapping");
+        wrap.setSpacing(true);
+        addComponent(wrap);
+
+        wrap.addComponent(getMenuButton("Normal", false));
+
+        MenuBar split = getMenuButton("Small", false);
+        split.addStyleName("small");
+        wrap.addComponent(split);
+
+        split = getMenuButton("Borderless", false);
+        split.addStyleName("borderless");
+        wrap.addComponent(split);
+
+        split = getMenuButton("Themed", false);
+        split.addStyleName("color1");
+        wrap.addComponent(split);
+
+        split = getMenuButton("Small", false);
+        split.addStyleName("color1");
+        split.addStyleName("small");
+        wrap.addComponent(split);
+
+        h2 = new Label("Split Button");
+        h2.addStyleName("h2");
+        addComponent(h2);
+
+        wrap = new HorizontalLayout();
+        wrap.addStyleName("wrapping");
+        wrap.setSpacing(true);
+        addComponent(wrap);
+
+        wrap.addComponent(getMenuButton("Normal", true));
+
+        split = getMenuButton("Small", true);
+        split.addStyleName("small");
+        wrap.addComponent(split);
+
+        split = getMenuButton("Borderless", true);
+        split.addStyleName("borderless");
+        wrap.addComponent(split);
+
+        split = getMenuButton("Themed", true);
+        split.addStyleName("color1");
+        wrap.addComponent(split);
+
+        split = getMenuButton("Small", true);
+        split.addStyleName("color1");
+        split.addStyleName("small");
+        wrap.addComponent(split);
     }
 
     static MenuBar getMenuBar() {
@@ -180,6 +237,20 @@ public class MenuBars extends VerticalLayout implements View {
         return menubar;
     }
 
+    static MenuBar getMenuButton(String caption, boolean splitButton) {
+        MenuBar split = new MenuBar();
+        MenuBar.MenuItem dropdown = split.addItem(caption, null);
+        if (splitButton) {
+            dropdown = split.addItem("", null);
+        }
+        dropdown.addItem("Another Action", null);
+        dropdown.addItem("Secondary Action", null);
+        dropdown.addSeparator();
+        dropdown.addItem("Last Action", null);
+
+        return split;
+    }
+
     @Override
     public void enter(ViewChangeEvent event) {
         // TODO Auto-generated method stub