From e95965a10bb6070096ee239ba22cc0e038874bde Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 15 Aug 2014 12:32:34 +0300 Subject: [PATCH] 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 --- .../themes/valo/components/_button.scss | 16 +++++ .../themes/valo/components/_combobox.scss | 10 +++ .../themes/valo/components/_datefield.scss | 10 +++ .../VAADIN/themes/valo/components/_label.scss | 8 +++ .../themes/valo/components/_textarea.scss | 10 +++ .../themes/valo/components/_textfield.scss | 12 ++++ .../VAADIN/themes/valo/shared/_variables.scss | 12 +++- .../src/com/vaadin/ui/themes/ValoTheme.java | 69 ++++++++++++++++++- .../tests/themes/valo/ButtonsAndLinks.java | 8 +++ .../vaadin/tests/themes/valo/ComboBoxes.java | 16 +++++ .../vaadin/tests/themes/valo/DateFields.java | 12 ++++ .../com/vaadin/tests/themes/valo/Labels.java | 8 +++ .../vaadin/tests/themes/valo/TextFields.java | 20 ++++++ 13 files changed, 205 insertions(+), 6 deletions(-) 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); -- 2.39.5