diff options
| -rw-r--r-- | WebContent/VAADIN/themes/tests-valo/_valotest.scss | 4 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/components/_menubar.scss | 85 | ||||
| -rw-r--r-- | uitest/src/com/vaadin/tests/themes/valo/MenuBars.java | 71 |
3 files changed, 121 insertions, 39 deletions
diff --git a/WebContent/VAADIN/themes/tests-valo/_valotest.scss b/WebContent/VAADIN/themes/tests-valo/_valotest.scss index 7c024b323e..568dfec0b8 100644 --- 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 e79e6898a9..7d7e854989 100644 --- 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 88eea73513..4a0130931e 100644 --- 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 |