diff options
4 files changed, 254 insertions, 61 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); + } } } diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoMenuLayout.java b/uitest/src/com/vaadin/tests/themes/valo/ValoMenuLayout.java new file mode 100644 index 0000000000..3a3baa686c --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ValoMenuLayout.java @@ -0,0 +1,56 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.ui.Component; +import com.vaadin.ui.ComponentContainer; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalLayout; + +/** + * + * @since + * @author Vaadin Ltd + */ +public class ValoMenuLayout extends HorizontalLayout { + + CssLayout contentArea = new CssLayout(); + + CssLayout menuArea = new CssLayout(); + + public ValoMenuLayout() { + setSizeFull(); + + menuArea.setPrimaryStyleName("valo-menu"); + + contentArea.setPrimaryStyleName("valo-content"); + contentArea.addStyleName("v-scrollable"); + contentArea.setSizeFull(); + + addComponents(menuArea, contentArea); + setExpandRatio(contentArea, 1); + } + + public ComponentContainer getContentContainer() { + return contentArea; + } + + public void addMenu(Component menu) { + menu.addStyleName("valo-menu-part"); + menuArea.addComponent(menu); + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java index 75e306edd2..014b1acac8 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java +++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java @@ -19,6 +19,7 @@ import java.util.Iterator; import java.util.LinkedHashMap; import java.util.Map.Entry; +import com.vaadin.annotations.PreserveOnRefresh; import com.vaadin.annotations.Theme; import com.vaadin.annotations.Title; import com.vaadin.data.Container; @@ -43,6 +44,7 @@ import com.vaadin.ui.Button.ClickEvent; import com.vaadin.ui.Button.ClickListener; import com.vaadin.ui.CheckBox; import com.vaadin.ui.Component; +import com.vaadin.ui.ComponentContainer; import com.vaadin.ui.CssLayout; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; @@ -53,17 +55,18 @@ import com.vaadin.ui.UI; @Theme("tests-valo") @Title("Valo Theme Test") +@PreserveOnRefresh public class ValoThemeTest extends UI { - HorizontalLayout root = new HorizontalLayout(); - CssLayout viewDisplay = new CssLayout(); + ValoMenuLayout root = new ValoMenuLayout(); + ComponentContainer viewDisplay = root.getContentContainer(); CssLayout menu = new CssLayout(); private Navigator navigator; private LinkedHashMap<String, String> menuItems = new LinkedHashMap<String, String>(); @Override protected void init(VaadinRequest request) { - // Show .v-app-loading badge + // Show .v-app-loading valo-menu-badge // try { // Thread.sleep(2000); // } catch (InterruptedException e) { @@ -74,12 +77,8 @@ public class ValoThemeTest extends UI { setContent(root); root.setWidth("100%"); - root.addComponent(buildMenu()); - - viewDisplay.setWidth("100%"); - viewDisplay.addStyleName("view"); - root.addComponent(viewDisplay); - root.setExpandRatio(viewDisplay, 1); + root.addMenu(buildTestMenu()); + root.addMenu(buildMenu()); navigator = new Navigator(this, viewDisplay); @@ -103,7 +102,6 @@ public class ValoThemeTest extends UI { navigator.addView("calendar", CalendarTest.class); navigator.addView("forms", Forms.class); navigator.addView("popupviews", PopupViews.class); - navigator.addView("random", RandomTests.class); navigator.addView("dragging", Dragging.class); String f = Page.getCurrent().getUriFragment(); @@ -128,7 +126,9 @@ public class ValoThemeTest extends UI { for (Iterator<Component> it = menu.iterator(); it .hasNext();) { Component c = it.next(); - if (item.getValue().equals(c.getCaption())) { + if (c.getCaption() != null + && c.getCaption().startsWith( + item.getValue())) { c.addStyleName("selected"); break; } @@ -141,6 +141,37 @@ public class ValoThemeTest extends UI { } + Component buildTestMenu() { + CssLayout menu = new CssLayout(); + menu.addStyleName("large-icons"); + + Label logo = new Label("Va"); + logo.setSizeUndefined(); + logo.setPrimaryStyleName("valo-menu-logo"); + menu.addComponent(logo); + + Button b = new Button( + "Reference <span class=\"valo-menu-badge\">3</span>"); + b.setIcon(FontAwesome.TH_LIST); + b.setPrimaryStyleName("valo-menu-item"); + b.addStyleName("selected"); + b.setHtmlContentAllowed(true); + menu.addComponent(b); + + b = new Button("API"); + b.setIcon(FontAwesome.BOOK); + b.setPrimaryStyleName("valo-menu-item"); + menu.addComponent(b); + + b = new Button("Examples <span class=\"valo-menu-badge\">12</span>"); + b.setIcon(FontAwesome.TABLE); + b.setPrimaryStyleName("valo-menu-item"); + b.setHtmlContentAllowed(true); + menu.addComponent(b); + + return menu; + } + CssLayout buildMenu() { // Add items menuItems.put("common", "Common UI Elements"); @@ -165,8 +196,6 @@ public class ValoThemeTest extends UI { menuItems.put("calendar", "Calendar"); menuItems.put("forms", "Forms"); - menu.setStyleName("valo-menu"); - HorizontalLayout top = new HorizontalLayout(); top.setWidth("100%"); top.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT); @@ -209,8 +238,9 @@ public class ValoThemeTest extends UI { menu.addComponent(label); } if (item.getKey().equals("panels")) { - label.setValue(label.getValue() + " <span class=\"badge\">" - + count + "</span>"); + label.setValue(label.getValue() + + " <span class=\"valo-menu-badge\">" + count + + "</span>"); count = 0; label = new Label("Containers", ContentMode.HTML); label.setPrimaryStyleName("valo-menu-subtitle"); @@ -219,8 +249,9 @@ public class ValoThemeTest extends UI { menu.addComponent(label); } if (item.getKey().equals("calendar")) { - label.setValue(label.getValue() + " <span class=\"badge\">" - + count + "</span>"); + label.setValue(label.getValue() + + " <span class=\"valo-menu-badge\">" + count + + "</span>"); count = 0; label = new Label("Other", ContentMode.HTML); label.setPrimaryStyleName("valo-menu-subtitle"); @@ -234,18 +265,25 @@ public class ValoThemeTest extends UI { navigator.navigateTo(item.getKey()); } }); + if (count == 2) { + b.setCaption(b.getCaption() + + " <span class=\"valo-menu-badge\">123</span>"); + } + b.setHtmlContentAllowed(true); b.setPrimaryStyleName("valo-menu-item"); + b.setIcon(TestIcon.get()); menu.addComponent(b); count++; } - label.setValue(label.getValue() + " <span class=\"badge\">" + count - + "</span>"); + label.setValue(label.getValue() + " <span class=\"valo-menu-badge\">" + + count + "</span>"); return menu; } static String[] strings = new String[] { "lorem", "ipsum", "dolor", "sit", - "amet", "consectetur" }; + "amet", "consectetur", "quid", "securi", "etiam", "tamquam", "eu", + "fugiat", "nulla", "pariatur" }; static int stringCount = -1; static String nextString(boolean capitalize) { |