From 12a588b53e53bc883be08298554a6adeedc5946b Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 12 Aug 2014 15:02:40 +0300 Subject: [PATCH] Modularize menubar mixins and add submenu indicator for top level items MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit 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 --- .../VAADIN/themes/tests-valo/_valotest.scss | 4 + .../themes/valo/components/_menubar.scss | 85 ++++++++++--------- .../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 -- 2.39.5