Insert title here

From 8c4ddbb2837c8966551636cf140bba86c9671d1e Mon Sep 17 00:00:00 2001 From: Bogdan Udrescu Date: Thu, 7 Aug 2014 15:31:07 +0300 Subject: TabSheet focus/blur events fixed (#14304) The blur and focus events should be linked with the TabSheet component as a whole. Any click inside the TabSheet should trigger one single focus and any leave the blur. Change-Id: Id24a2fab12aafe6f7aa3a44635e5b9e935a1cfe1 --- WebContent/html-tests/ComponentFocus.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 WebContent/html-tests/ComponentFocus.html (limited to 'WebContent') diff --git a/WebContent/html-tests/ComponentFocus.html b/WebContent/html-tests/ComponentFocus.html new file mode 100644 index 0000000000..0a822520e0 --- /dev/null +++ b/WebContent/html-tests/ComponentFocus.html @@ -0,0 +1,16 @@ + + + + +Insert title here + + + + + + + + + \ No newline at end of file -- cgit v1.2.3 From 56195677e92cb6ad9ac6e0e5ef2aae2a403d3fc0 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Thu, 14 Aug 2014 14:48:26 +0300 Subject: Window close and maximize/restore buttons not visible on initial render in IE8 (Valo) #14413 Remove unnecessary FontAwesome declaration as well, which made the characters look bad in IE8. Change-Id: Ib0f9b01023b0a7a6f40513c80cbb6e6c69bd164c --- WebContent/VAADIN/themes/valo/components/_window.scss | 1 - client/src/com/vaadin/client/ui/VWindow.java | 14 ++++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss index d866ce2584..97859a62b2 100644 --- a/WebContent/VAADIN/themes/valo/components/_window.scss +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -125,7 +125,6 @@ $v-window-modality-curtain-background-color: #222 !default; line-height: $v-unit-size - 3px; text-align: center; cursor: pointer; - font-family: FontAwesome; font-size: round($v-font-size * 1.3); color: valo-font-color($v-window-background-color, .4); diff --git a/client/src/com/vaadin/client/ui/VWindow.java b/client/src/com/vaadin/client/ui/VWindow.java index 495e230156..7223e4ac83 100644 --- a/client/src/com/vaadin/client/ui/VWindow.java +++ b/client/src/com/vaadin/client/ui/VWindow.java @@ -245,6 +245,20 @@ public class VWindow extends VOverlay implements ShortcutActionHandlerOwner, * state. */ setTabStopEnabled(doTabStop); + + // Fix for #14413. Any pseudo elements inside these elements are not + // visible on initial render unless we shake the DOM. + if (BrowserInfo.get().isIE8()) { + closeBox.getStyle().setDisplay(Display.NONE); + maximizeRestoreBox.getStyle().setDisplay(Display.NONE); + Scheduler.get().scheduleFinally(new Command() { + @Override + public void execute() { + closeBox.getStyle().clearDisplay(); + maximizeRestoreBox.getStyle().clearDisplay(); + } + }); + } } @Override -- cgit v1.2.3 From e95965a10bb6070096ee239ba22cc0e038874bde Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 15 Aug 2014 12:32:34 +0300 Subject: Add two new size variants for Valo, tiny and huge Available as additional style names for buttons, text fields/text areas, combo boxes, date fields and labels. Change-Id: I12f36935a690f5bf3f12333f5bd4ac986d4efd1f --- .../VAADIN/themes/valo/components/_button.scss | 16 +++++ .../VAADIN/themes/valo/components/_combobox.scss | 10 ++++ .../VAADIN/themes/valo/components/_datefield.scss | 10 ++++ .../VAADIN/themes/valo/components/_label.scss | 8 +++ .../VAADIN/themes/valo/components/_textarea.scss | 10 ++++ .../VAADIN/themes/valo/components/_textfield.scss | 12 ++++ .../VAADIN/themes/valo/shared/_variables.scss | 12 +++- server/src/com/vaadin/ui/themes/ValoTheme.java | 69 +++++++++++++++++++++- .../vaadin/tests/themes/valo/ButtonsAndLinks.java | 8 +++ .../com/vaadin/tests/themes/valo/ComboBoxes.java | 16 +++++ .../com/vaadin/tests/themes/valo/DateFields.java | 12 ++++ .../src/com/vaadin/tests/themes/valo/Labels.java | 8 +++ .../com/vaadin/tests/themes/valo/TextFields.java | 20 +++++++ 13 files changed, 205 insertions(+), 6 deletions(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index ec74f70eaf..42953ea610 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -45,6 +45,10 @@ @include valo-link-style; } + .#{$primary-stylename}-tiny { + @include valo-button-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--tiny, $font-weight: null); + } + .#{$primary-stylename}-small { @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null); } @@ -53,6 +57,10 @@ @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null); } + .#{$primary-stylename}-huge { + @include valo-button-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--huge, $font-weight: null); + } + .#{$primary-stylename}-icon-align-right { @include valo-button-icon-align-right-style; } @@ -65,6 +73,10 @@ width: $v-unit-size; padding: 0; + &.#{$primary-stylename}-tiny { + width: $v-unit-size--tiny; + } + &.#{$primary-stylename}-small { width: $v-unit-size--small; } @@ -73,6 +85,10 @@ width: $v-unit-size--large; } + &.#{$primary-stylename}-huge { + width: $v-unit-size--huge; + } + .#{$primary-stylename}-caption { display: none; } diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 4e5cd5bbac..538a5e2694 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -78,6 +78,11 @@ text-align: center; } + .#{$primary-stylename}-tiny { + @include valo-combobox-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal); + font-size: $v-font-size--tiny; + } + .#{$primary-stylename}-small { @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal); font-size: $v-font-size--small; @@ -87,6 +92,11 @@ @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal); font-size: $v-font-size--large; } + + .#{$primary-stylename}-huge { + @include valo-combobox-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal); + font-size: $v-font-size--huge; + } } } diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 1538681740..8854992032 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -59,6 +59,11 @@ text-align: center; } + .#{$primary-stylename}-tiny { + @include valo-datefield-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); + font-size: $v-font-size--tiny; + } + .#{$primary-stylename}-small { @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); font-size: $v-font-size--small; @@ -68,6 +73,11 @@ @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); font-size: $v-font-size--large; } + + .#{$primary-stylename}-huge { + @include valo-datefield-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); + font-size: $v-font-size--huge; + } } } diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 29d811fc9a..51e7026834 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -112,6 +112,14 @@ $v-letter-spacing--h4: 0 !default; font-size: $v-font-size--small; } + .#{$primary-stylename}-tiny { + font-size: $v-font-size--tiny; + } + + .#{$primary-stylename}-huge { + font-size: $v-font-size--huge; + } + .#{$primary-stylename}-bold { font-weight: $v-font-weight + 200; } diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss index 4c5d99b8e2..5e524bfb9e 100644 --- a/WebContent/VAADIN/themes/valo/components/_textarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss @@ -19,6 +19,11 @@ @include valo-textfield-borderless-style; } + .#{$primary-stylename}-tiny { + @include valo-textarea-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); + font-size: $v-font-size--tiny; + } + .#{$primary-stylename}-small { @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); font-size: $v-font-size--small; @@ -29,6 +34,11 @@ font-size: $v-font-size--large; } + .#{$primary-stylename}-huge { + @include valo-textarea-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); + font-size: $v-font-size--huge; + } + .#{$primary-stylename}-align-right { text-align: right; } diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 75cfc5ef85..dc516048e7 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -30,6 +30,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @include valo-textfield-borderless-style; } + .#{$primary-stylename}-tiny { + @include valo-textfield-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); + font-size: $v-font-size--tiny; + } + .#{$primary-stylename}-small { @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); font-size: $v-font-size--small; @@ -40,9 +45,16 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; font-size: $v-font-size--large; } + .#{$primary-stylename}-huge { + @include valo-textfield-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); + font-size: $v-font-size--huge; + } + @include valo-textfield-inline-icon($stylenames: inline-icon); + @include valo-textfield-inline-icon($stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny); @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small); @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large); + @include valo-textfield-inline-icon($stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge); .#{$primary-stylename}-align-right { text-align: right; diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss index b1c113b2cc..7dd3827298 100644 --- a/WebContent/VAADIN/themes/valo/shared/_variables.scss +++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss @@ -60,14 +60,20 @@ $v-required-field-indicator-color : $v-error-indicator-color $v-friendly-color : #2c9720 !default; -$v-scaling-factor--small : 0.8 !default; +$v-scaling-factor--tiny : 0.75 !default; +$v-scaling-factor--small : 0.85 !default; $v-scaling-factor--large : 1.2 !default; +$v-scaling-factor--huge : 1.6 !default; +$v-unit-size--tiny : round($v-unit-size * $v-scaling-factor--tiny) !default; $v-unit-size--small : round($v-unit-size * $v-scaling-factor--small) !default; $v-unit-size--large : round($v-unit-size * $v-scaling-factor--large) !default; +$v-unit-size--huge : round($v-unit-size * $v-scaling-factor--huge) !default; -$v-font-size--small : round($v-font-size * $v-scaling-factor--small) !default; -$v-font-size--large : round($v-font-size * $v-scaling-factor--large) !default; +$v-font-size--tiny : ceil($v-font-size * $v-scaling-factor--tiny) !default; +$v-font-size--small : ceil($v-font-size * $v-scaling-factor--small) !default; +$v-font-size--large : ceil($v-font-size * $v-scaling-factor--large) !default; +$v-font-size--huge : ceil($v-font-size * $v-scaling-factor--huge) !default; diff --git a/server/src/com/vaadin/ui/themes/ValoTheme.java b/server/src/com/vaadin/ui/themes/ValoTheme.java index ad949c6a32..ea6b9082f8 100644 --- a/server/src/com/vaadin/ui/themes/ValoTheme.java +++ b/server/src/com/vaadin/ui/themes/ValoTheme.java @@ -25,9 +25,10 @@ import com.vaadin.ui.Table.ColumnHeaderMode; *

* *

- * These styles are only available if the Valo theme (or any of it's variants) - * is built with the $valo-include-common-stylenames Sass variable - * set to true. + * These styles are only available if the + * $v-included-additional-styles Sass list variable contains the + * name of the component for that additional style name (e.g. + * button, textfield, table). *

* *

@@ -148,6 +149,12 @@ public class ValoTheme { */ public static final String LABEL_NO_MARGIN = "no-margin"; + /** + * Tiny font size. Suitable for additional/supplementary UI text. Can be + * combined with any other Label style. + */ + public static final String LABEL_TINY = "tiny"; + /** * Small font size. Suitable for additional/supplementary UI text. Can be * combined with any other Label style. @@ -160,6 +167,12 @@ public class ValoTheme { */ public static final String LABEL_LARGE = "large"; + /** + * Huge font size. Suitable for important/prominent UI text. Can be combined + * with any other Label style. + */ + public static final String LABEL_HUGE = "huge"; + /** * Lighter font weight. Suitable for additional/supplementary UI text. Can * be combined with any other Label style. @@ -251,6 +264,11 @@ public class ValoTheme { */ public static final String BUTTON_LINK = "link"; + /** + * Tiny size button. Can be combined with any other Button style. + */ + public static final String BUTTON_TINY = "tiny"; + /** * Small size button. Can be combined with any other Button style. */ @@ -261,6 +279,11 @@ public class ValoTheme { */ public static final String BUTTON_LARGE = "large"; + /** + * Huge size button. Can be combined with any other Button style. + */ + public static final String BUTTON_HUGE = "huge"; + /** * Align the icon to the right side of the button caption. Can be combined * with any other Button style. @@ -300,6 +323,11 @@ public class ValoTheme { * **************************************************************************/ + /** + * Tiny size text field. Can be combined with any other TextField style. + */ + public static final String TEXTFIELD_TINY = "tiny"; + /** * Small size text field. Can be combined with any other TextField style. */ @@ -310,6 +338,11 @@ public class ValoTheme { */ public static final String TEXTFIELD_LARGE = "large"; + /** + * Huge size text field. Can be combined with any other TextField style. + */ + public static final String TEXTFIELD_HUGE = "huge"; + /** * Removes the border and background from the text field. Can be combined * with any other TextField style. @@ -340,6 +373,11 @@ public class ValoTheme { * **************************************************************************/ + /** + * Tiny size text area. Can be combined with any other TextArea style. + */ + public static final String TEXTAREA_TINY = "tiny"; + /** * Small size text area. Can be combined with any other TextArea style. */ @@ -350,6 +388,11 @@ public class ValoTheme { */ public static final String TEXTAREA_LARGE = "large"; + /** + * Huge size text area. Can be combined with any other TextArea style. + */ + public static final String TEXTAREA_HUGE = "huge"; + /** * Removes the border and background from the text area. Can be combined * with any other TextArea style. @@ -374,6 +417,11 @@ public class ValoTheme { * **************************************************************************/ + /** + * Tiny size date field. Can be combined with any other DateField style. + */ + public static final String DATEFIELD_TINY = "tiny"; + /** * Small size date field. Can be combined with any other DateField style. */ @@ -384,6 +432,11 @@ public class ValoTheme { */ public static final String DATEFIELD_LARGE = "large"; + /** + * Huge size date field. Can be combined with any other DateField style. + */ + public static final String DATEFIELD_HUGE = "huge"; + /** * Removes the border and background from the date field. Can be combined * with any other DateField style. @@ -408,6 +461,11 @@ public class ValoTheme { * **************************************************************************/ + /** + * Tiny size combo box. Can be combined with any other ComboBox style. + */ + public static final String COMBOBOX_TINY = "tiny"; + /** * Small size combo box. Can be combined with any other ComboBox style. */ @@ -418,6 +476,11 @@ public class ValoTheme { */ public static final String COMBOBOX_LARGE = "large"; + /** + * Huge size combo box. Can be combined with any other ComboBox style. + */ + public static final String COMBOBOX_HUGE = "huge"; + /** * Removes the border and background from the combo box. Can be combined * with any other ComboBox style. diff --git a/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java index 758d2de200..e66cd2668b 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java +++ b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java @@ -136,6 +136,14 @@ public class ButtonsAndLinks extends VerticalLayout implements View { button = new Button("Three"); group.addComponent(button); + button = new Button("Tiny"); + button.addStyleName("tiny"); + row.addComponent(button); + + button = new Button("Huge"); + button.addStyleName("huge"); + row.addComponent(button); + NativeButton nbutton = new NativeButton("Native"); row.addComponent(nbutton); diff --git a/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java index 1b8b290d91..98a9cad83c 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java +++ b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java @@ -162,6 +162,22 @@ public class ComboBoxes extends VerticalLayout implements View { combo.addItem("Option Three"); combo.addStyleName("borderless"); row.addComponent(combo); + + combo = new ComboBox("Tiny"); + combo.setInputPrompt("You can type here"); + combo.setContainerDataSource(ValoThemeUI.generateContainer(200, false)); + combo.setItemCaptionPropertyId(ValoThemeUI.CAPTION_PROPERTY); + combo.setItemIconPropertyId(ValoThemeUI.ICON_PROPERTY); + combo.addStyleName("tiny"); + row.addComponent(combo); + + combo = new ComboBox("Huge"); + combo.setInputPrompt("You can type here"); + combo.setContainerDataSource(ValoThemeUI.generateContainer(200, false)); + combo.setItemCaptionPropertyId(ValoThemeUI.CAPTION_PROPERTY); + combo.setItemIconPropertyId(ValoThemeUI.ICON_PROPERTY); + combo.addStyleName("huge"); + row.addComponent(combo); } @Override diff --git a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java index 41aa287f9f..bdc0dc5983 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java +++ b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java @@ -172,6 +172,18 @@ public class DateFields extends VerticalLayout implements View { date.setDateFormat("E dd/MM/yyyy"); row.addComponent(date); + date = new DateField("Tiny"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + date.addStyleName("tiny"); + row.addComponent(date); + + date = new DateField("Huge"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + date.addStyleName("huge"); + row.addComponent(date); + date = new InlineDateField("Date picker"); setDate(date); row.addComponent(date); diff --git a/uitest/src/com/vaadin/tests/themes/valo/Labels.java b/uitest/src/com/vaadin/tests/themes/valo/Labels.java index 08378ad9e6..63c138093c 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/Labels.java +++ b/uitest/src/com/vaadin/tests/themes/valo/Labels.java @@ -45,6 +45,10 @@ public class Labels extends VerticalLayout implements View { left.setMargin(new MarginInfo(false, true, false, false)); split.addComponent(left); + Label huge = new Label("Huge type for display text."); + huge.addStyleName("huge"); + left.addComponent(huge); + Label large = new Label( "Large type for introductory text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu."); large.addStyleName("large"); @@ -68,6 +72,10 @@ public class Labels extends VerticalLayout implements View { small.addStyleName("small"); left.addComponent(small); + Label tiny = new Label("Tiny type for minor text."); + tiny.addStyleName("tiny"); + left.addComponent(tiny); + Label h4 = new Label("Section Title"); h4.addStyleName("h4"); left.addComponent(h4); diff --git a/uitest/src/com/vaadin/tests/themes/valo/TextFields.java b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java index f8606bb7c9..347a683673 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/TextFields.java +++ b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java @@ -182,6 +182,16 @@ public class TextFields extends VerticalLayout implements View { pwf.setIcon(FontAwesome.LOCK); row.addComponent(pwf); + tf = new TextField("Tiny"); + tf.setValue("Field value"); + tf.addStyleName("tiny"); + row.addComponent(tf); + + tf = new TextField("Huge"); + tf.setValue("Field value"); + tf.addStyleName("huge"); + row.addComponent(tf); + h1 = new Label("Text Areas"); h1.addStyleName("h1"); addComponent(h1); @@ -242,6 +252,16 @@ public class TextFields extends VerticalLayout implements View { ta.setValue("Field value, spanning multiple lines of text"); row.addComponent(ta); + ta = new TextArea("Tiny"); + ta.addStyleName("tiny"); + ta.setInputPrompt("Write your comment…"); + row.addComponent(ta); + + ta = new TextArea("Huge"); + ta.addStyleName("huge"); + ta.setInputPrompt("Write your comment…"); + row.addComponent(ta); + RichTextArea rta = new RichTextArea(); rta.setValue("Some rich content"); row.addComponent(rta); -- cgit v1.2.3 From 726f77cce759feeaf78e4f92119b60ad33e0079d Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 15 Aug 2014 12:28:07 +0300 Subject: Valo Tree Drag & Drop styles broken (#14360) Change-Id: Iafee03aaea3266ab32edb407e605ff3d8de474e1 --- WebContent/VAADIN/themes/valo/components/_tree.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index 7e00f4ec09..93553fe55a 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -218,7 +218,8 @@ $v-tree-expand-animation-enabled: false !default; // Drag'n'drop styles .#{$primary-stylename}-node-drag-top:before, - .#{$primary-stylename}-node-drag-bottom:after { + .#{$primary-stylename}-node-drag-bottom:after, + .#{$primary-stylename}-node-drag-bottom.#{$primary-stylename}-node-dragfolder.#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children:before { content: "\2022"; display: block; position: absolute; @@ -230,6 +231,12 @@ $v-tree-expand-animation-enabled: false !default; color: $v-focus-color; text-indent: round($v-font-size/-4); text-shadow: 0 0 1px $v-background-color, 0 0 1px $v-background-color; + opacity: 1; + visibility: visible; + } + + .#{$primary-stylename}-node-drag-bottom.#{$primary-stylename}-node-dragfolder.#{$primary-stylename}-node-expanded:after { + content: none; } .#{$primary-stylename}-node-caption-drag-center { -- cgit v1.2.3 From 9f1f5c5638757f7b727e300c7f437fd805914c54 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 12 Aug 2014 15:07:45 +0300 Subject: Add new "colored" style for Label (Valo) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Makes any Label text colored, by default the same as $v-selection-color. Modify the Forms and Labels examples to use the new style, and remove the fixed color from “light” style form layout for header labels. Change-Id: I27a4fce56b1f734aa5c2c837bf1684284b0d96cc --- WebContent/VAADIN/themes/valo/components/_formlayout.scss | 1 - WebContent/VAADIN/themes/valo/components/_label.scss | 5 +++++ server/src/com/vaadin/ui/themes/ValoTheme.java | 5 +++++ uitest/src/com/vaadin/tests/themes/valo/Forms.java | 3 +++ uitest/src/com/vaadin/tests/themes/valo/Labels.java | 5 +++++ 5 files changed, 18 insertions(+), 1 deletion(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss index 25dbfbef28..fc065cec3d 100644 --- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -198,7 +198,6 @@ > .v-label-h3, > .v-label-h4 { border-bottom: none; - color: $v-selection-color; } > .v-label-h3, diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 51e7026834..e61aa4ec11 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -1,6 +1,7 @@ $v-font-weight--header: $v-font-weight - 100 !default; $v-line-height--header: 1.1 !default; $v-font-family--header: null !default; +$v-font-color--colored: $v-selection-color !default; $v-font-size--h1: 2.4em !default; $v-font-size--h2: 1.6em !default; @@ -104,6 +105,10 @@ $v-letter-spacing--h4: 0 !default; @if $include-additional-styles { + .#{$primary-stylename}-colored { + color: $v-font-color--colored; + } + .#{$primary-stylename}-large { font-size: $v-font-size--large; } diff --git a/server/src/com/vaadin/ui/themes/ValoTheme.java b/server/src/com/vaadin/ui/themes/ValoTheme.java index ea6b9082f8..d6bd97ed72 100644 --- a/server/src/com/vaadin/ui/themes/ValoTheme.java +++ b/server/src/com/vaadin/ui/themes/ValoTheme.java @@ -185,6 +185,11 @@ public class ValoTheme { */ public static final String LABEL_BOLD = "bold"; + /** + * Colored text. Can be combined with any other Label style. + */ + public static final String LABEL_COLORED = "colored"; + /** * Success badge style. Adds a border around the label and an icon next to * the text. Suitable for UI notifications that need to in the direct diff --git a/uitest/src/com/vaadin/tests/themes/valo/Forms.java b/uitest/src/com/vaadin/tests/themes/valo/Forms.java index c5b08902be..90a6c51496 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/Forms.java +++ b/uitest/src/com/vaadin/tests/themes/valo/Forms.java @@ -59,6 +59,7 @@ public class Forms extends VerticalLayout implements View { Label section = new Label("Personal Info"); section.addStyleName("h2"); + section.addStyleName("colored"); form.addComponent(section); StringGenerator sg = new StringGenerator(); @@ -85,6 +86,7 @@ public class Forms extends VerticalLayout implements View { section = new Label("Contact Info"); section.addStyleName("h3"); + section.addStyleName("colored"); form.addComponent(section); TextField email = new TextField("Email"); @@ -125,6 +127,7 @@ public class Forms extends VerticalLayout implements View { section = new Label("Additional Info"); section.addStyleName("h4"); + section.addStyleName("colored"); form.addComponent(section); TextField website = new TextField("Website"); diff --git a/uitest/src/com/vaadin/tests/themes/valo/Labels.java b/uitest/src/com/vaadin/tests/themes/valo/Labels.java index 63c138093c..b5bab3a1d3 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/Labels.java +++ b/uitest/src/com/vaadin/tests/themes/valo/Labels.java @@ -102,6 +102,11 @@ public class Labels extends VerticalLayout implements View { label.addStyleName("light"); right.addComponent(label); + label = new Label( + "Colored type for highlighted text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu."); + label.addStyleName("colored"); + right.addComponent(label); + label = new Label("A label for success"); label.addStyleName("success"); right.addComponent(label); -- cgit v1.2.3 From 56c98c7bf18a2aa2b5e86db0f46b1cdb3f900822 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 12 Aug 2014 15:27:06 +0300 Subject: Make read only textfield visually different from normal text fields If the background color of the app is the same as the textfield background color, make the textfield background color slightly darker. Change-Id: I4870c3e396cdd8c586bfd3f0e812cf1f5ebab1eb --- WebContent/VAADIN/themes/valo/components/_textfield.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index dc516048e7..0b4fa50fb2 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -1,5 +1,5 @@ $v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default; -$v-textfield-background-color--readonly: $v-app-background-color; +$v-textfield-background-color--readonly: darkest-color($v-app-background-color, darken($v-textfield-background-color, 2%)); $v-textfield-bevel: inset 0 1px 0 v-shade !default; $v-textfield-shadow: 0 1px 0 (v-tint 2) !default; $v-textfield-font-weight: 400 !default; -- cgit v1.2.3 From 12a588b53e53bc883be08298554a6adeedc5946b Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 12 Aug 2014 15:02:40 +0300 Subject: Modularize menubar mixins and add submenu indicator for top level items MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 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 --- WebContent/VAADIN/themes/tests-valo/_valotest.scss | 4 + .../VAADIN/themes/valo/components/_menubar.scss | 85 ++++++++++++---------- .../src/com/vaadin/tests/themes/valo/MenuBars.java | 71 ++++++++++++++++++ 3 files changed, 121 insertions(+), 39 deletions(-) (limited to 'WebContent') 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 -- cgit v1.2.3 From e75aa11368629324e0f06708cce12a4d7d4e8d9c Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 15 Aug 2014 12:23:49 +0300 Subject: Remove unnecessary negative border radius declarations from menu bar (Valo) Change-Id: I3739cdacf6a117cd0d75cab3566a82ee0fedd6bd --- WebContent/VAADIN/themes/valo/components/_menubar.scss | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index 7d7e854989..f03bc3d022 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -126,21 +126,25 @@ margin-right: 1px; } - $br: $v-border-radius - $border-width - 1px; + $br: max(0, $v-border-radius - $border-width); &:first-child { border-left-width: 0; - border-radius: $br 0 0 $br; + @if $v-border-radius > 0 { + border-radius: $br 0 0 $br; + } } &:last-child { - border-radius: 0 $br $br 0; - margin-right: -$border-width; + @if $v-border-radius > 0 { + border-radius: 0 $br $br 0; + } + border-right-width: 0; } &:first-child:last-child { - border-radius: $br; - border-right-width: 0; - margin-right: 0; + @if $v-border-radius > 0 { + border-radius: $br; + } } &:before { -- cgit v1.2.3