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

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index ec74f70eaf03d061e26220eae52c97e9095e9661..42953ea610dd3686cd3b25963b6cf9b708a2ea61 100644 (file)
--- 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 4e5cd5bbacbf2bb30a88a06c7edc2d29c2834c75..538a5e26942545f6e20554fc0350d7ca8f60875e 100644 (file)
--- 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 153868174089188892d043c0aaa02a2f322505e5..8854992032472426ec322853f8a6382947b52918 100644 (file)
--- 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 29d811fc9a688c448b228e7d363dadd5764e4fe4..51e70268345380c4c69488d5078adf5ed41d30fd 100644 (file)
--- 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 4c5d99b8e27e5f6bc2df4dc44a27b91707b681a0..5e524bfb9e57e469d56a328af385e032cb76caf1 100644 (file)
--- 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 75cfc5ef85ace641c829325e288b637f9ef1f5e9..dc516048e7c656bc8315c2e55e66b0a29920d7a9 100644 (file)
--- 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 b1c113b2cc8e7ed76bb3389dfe5b67dae5c2529d..7dd38272986bb61fbea86ea621f6c3d95d6d60a1 100644 (file)
--- 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 ad949c6a326d80125b1defc493f041a8dfc7755a..ea6b9082f8ae5e2fd1f7f359d56dd1609bb9ec0f 100644 (file)
--- 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;
  * </p>
  * 
  * <p>
- * These styles are only available if the Valo theme (or any of it's variants)
- * is built with the <code>$valo-include-common-stylenames</code> Sass variable
- * set to <code>true</code>.
+ * These styles are only available if the
+ * <code>$v-included-additional-styles</code> Sass list variable contains the
+ * name of the component for that additional style name (e.g.
+ * <code>button, textfield, table</code>).
  * </p>
  * 
  * <p>
@@ -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 758d2de2008ae5d939431fd5a46b80dfc9aa4def..e66cd2668bd6e8597cb51b79b683f57fef49df00 100644 (file)
--- 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 1b8b290d91aede5974e6c14cdfac06e640fcbe49..98a9cad83c05ff6fab078413508a3e07ebc4938f 100644 (file)
--- 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 41aa287f9fe92e7365440dd00538526f8d23dfde..bdc0dc59839e032852e6f222d9c1cbca6ce57ec2 100644 (file)
--- 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 08378ad9e61d73cea787c642e48145cae090bd2a..63c138093cb14617446154679aa2d54868b6e33d 100644 (file)
--- 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 f8606bb7c9d72e56ef6ec750be83293e81d81efb..347a683673ca4b8b2df79870b9e660c3f216131a 100644 (file)
--- 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("<b>Some</b> <i>rich</i> content");
         row.addComponent(rta);