summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJouni Koivuviita <jouni@vaadin.com>2014-08-12 15:02:40 +0300
committerVaadin Code Review <review@vaadin.com>2014-08-15 13:32:40 +0000
commit12a588b53e53bc883be08298554a6adeedc5946b (patch)
treecce4be9ca5e2ff2bac1019bdaae5108e704a35a3
parent50a879e52e56d3acb3b8b8e77c2a86753e0c0385 (diff)
downloadvaadin-framework-12a588b53e53bc883be08298554a6adeedc5946b.tar.gz
vaadin-framework-12a588b53e53bc883be08298554a6adeedc5946b.zip
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
-rw-r--r--WebContent/VAADIN/themes/tests-valo/_valotest.scss4
-rw-r--r--WebContent/VAADIN/themes/valo/components/_menubar.scss85
-rw-r--r--uitest/src/com/vaadin/tests/themes/valo/MenuBars.java71
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