Fixed Chameleon theme for InlineDatefield #10070

Change-Id: I7891d727ab75a48e6607d6c49eba664a32a4d255

WebContent/VAADIN/themes/chameleon/components/components.scss

@@ -12,6 +12,7 @@
 @import "textfield/textfield.scss";
 // datefield and selects must be after textfield
 @import "datefield/datefield.scss";
+@import "inlinedatefield/inlinedatefield.scss";
 @import "selects/selects.scss";
 @import "tabsheet/tabsheet.scss";
 @import "tree/tree.scss";
@@ -31,8 +32,11 @@
 	@include chameleon-splitpanel;
 	@include chameleon-table;
 	@include chameleon-textfield;
+	
 	// datefield and selects must be after textfield
 	@include chameleon-datefield;
+	@include chameleon-inline-datefield;
+	
 	@include chameleon-selects;
 	@include chameleon-tabsheet;
 	@include chameleon-tree;

WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss

@@ -1,6 +1,6 @@
-@mixin chameleon-datefield {
+@mixin chameleon-datefield($name : v-datefield) {
 
-.v-datefield-button {
+.#{$name}-button {
 	background: #dadada url(../../img/date-btn.png) repeat-x 50% 0;
 	border: 1px solid gray;
 	-webkit-border-top-right-radius: 3px;
@@ -16,25 +16,25 @@
 	box-sizing: content-box;
 	}
 
-.v-datefield-small .v-datefield-button {
+.#{$name}-small .#{$name}-button {
 	height: 1.2em;
 	}
 
-.v-datefield-big .v-datefield-button {
+.#{$name}-big .#{$name}-button {
 	padding: .3em 0;
 	height: 1.2em;
 	}
 
-.v-ie8 .v-datefield-button {
+.v-ie8 .#{$name}-button {
 	height: 1.6em;
 	padding: 0;
 	}
 
-.v-ie8 .v-datefield-big .v-datefield-button {
+.v-ie8 .#{$name}-big .#{$name}-button {
 	height: 1.8em;
 	}
 
-input.v-datefield-textfield {
+input.#{$name}-textfield {
 	border-right: none;
 	-webkit-border-top-right-radius: 0;
 	-webkit-border-bottom-right-radius: 0;
@@ -46,7 +46,7 @@ input.v-datefield-textfield {
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.v-datefield-big .v-datefield-button {
+.#{$name}-big .#{$name}-button {
 	width: 32px;
 	background-image: url(../../img/date-btn-big.png);
 	}
@@ -55,7 +55,7 @@ input.v-datefield-textfield {
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.v-datefield-small .v-datefield-button {
+.#{$name}-small .#{$name}-button {
 	width: 19px;
 	background-position: 50% -2px;
 	}
@@ -64,7 +64,7 @@ input.v-datefield-textfield {
 /*******************************************************************************
  * Calendar panel
  ******************************************************************************/
-.v-datefield-calendarpanel {
+.#{$name}-calendarpanel {
 	border-collapse: collapse;
 	margin: 0;
 	padding: 0;
@@ -72,34 +72,34 @@ input.v-datefield-textfield {
 	font-size: 0.9em;
 	}
 
-.v-datefield-month .v-datefield-textfield {
+.#{$name}-month .#{$name}-textfield {
 	width: 6em;
 	}
 
-.v-datefield-year .v-datefield-textfield {
+.#{$name}-year .#{$name}-textfield {
 	width: 4em;
 	}
 
-.v-datefield-year .v-datefield-calendarpanel-prevmonth,
-.v-datefield-year .v-datefield-calendarpanel-nextmonth {
+.#{$name}-year .#{$name}-calendarpanel-prevmonth,
+.#{$name}-year .#{$name}-calendarpanel-nextmonth {
 	display: none;
 	}
 
-.v-datefield-calendarpanel-header td {
+.#{$name}-calendarpanel-header td {
 	border-bottom: 1px solid #666;
 	}
 
-.v-datefield-year .v-datefield-calendarpanel-header td,
-.v-datefield-month .v-datefield-calendarpanel-header td {
+.#{$name}-year .#{$name}-calendarpanel-header td,
+.#{$name}-month .#{$name}-calendarpanel-header td {
 	border-bottom: none;
 	}
 
-td.v-datefield-calendarpanel-month {
+td.#{$name}-calendarpanel-month {
 	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x 0 -1px;
 	text-shadow: 0 1px 0 rgba(255,255,255,.7);
 	}
 
-span.v-datefield-calendarpanel-month {
+span.#{$name}-calendarpanel-month {
 	display: block;
 	text-align: center;
 	overflow: hidden;
@@ -107,33 +107,33 @@ span.v-datefield-calendarpanel-month {
 	height: 1.8em;
 	}
 
-.v-datefield-year .v-datefield-calendarpanel-month {
+.#{$name}-year .#{$name}-calendarpanel-month {
 	width: 5em;
 	}
 
-.v-datefield-month .v-datefield-calendarpanel-month,
-.v-datefield-day .v-datefield-calendarpanel-month,
-.v-datefield-full .v-datefield-calendarpanel-month {
+.#{$name}-month .#{$name}-calendarpanel-month,
+.#{$name}-day .#{$name}-calendarpanel-month,
+.#{$name}-full .#{$name}-calendarpanel-month {
 	width: 9em;
 	}
 
-.v-datefield-popupcalendar {
+.#{$name}-popupcalendar {
 	min-width: 0;
 	}
 
-.v-datefield-year .v-datefield-calendarpanel {
+.#{$name}-year .#{$name}-calendarpanel {
 	width: 8em;
 	}
 
-td.v-datefield-calendarpanel-prevyear {
+td.#{$name}-calendarpanel-prevyear {
 	text-align: right;
 	}
 
-td.v-datefield-calendarpanel-nextyear {
+td.#{$name}-calendarpanel-nextyear {
 	text-align: left;
 	}
 
-.v-datefield-calendarpanel-header button {
+.#{$name}-calendarpanel-header button {
 	font-size: 1em;
 	line-height: normal;
 	width: 100%;
@@ -146,51 +146,51 @@ td.v-datefield-calendarpanel-nextyear {
 	cursor: pointer;
 	}
 
-.v-datefield-popup .v-datefield-calendarpanel-month,
-.v-datefield-popup .v-datefield-calendarpanel-header button {
+.#{$name}-popup .#{$name}-calendarpanel-month,
+.#{$name}-popup .#{$name}-calendarpanel-header button {
 	background-position: 0 0;
 	}
 
-.v-datefield-calendarpanel-header button:active {
+.#{$name}-calendarpanel-header button:active {
 	background-image: url(../../img/grad-dark-top2.png);
 	}
 
-.v-datefield-calendarpanel-prevyear button {
+.#{$name}-calendarpanel-prevyear button {
 	-webkit-border-top-left-radius: 4px;
 	-moz-border-radius-topleft: 4px;
 	}
 
-.v-datefield-calendarpanel-nextyear button {
+.#{$name}-calendarpanel-nextyear button {
 	-webkit-border-top-right-radius: 4px;
 	-moz-border-radius-topright: 4px;
 	}
 
-.v-datefield-year .v-datefield-calendarpanel-prevyear button,
-.v-datefield-month .v-datefield-calendarpanel-prevyear button {
+.#{$name}-year .#{$name}-calendarpanel-prevyear button,
+.#{$name}-month .#{$name}-calendarpanel-prevyear button {
 	-webkit-border-bottom-left-radius: 3px;
 	-moz-border-radius-bottomleft: 3px;
 	}
 
-.v-datefield-year .v-datefield-calendarpanel-nextyear button,
-.v-datefield-month .v-datefield-calendarpanel-nextyear button {
+.#{$name}-year .#{$name}-calendarpanel-nextyear button,
+.#{$name}-month .#{$name}-calendarpanel-nextyear button {
 	-webkit-border-bottom-right-radius: 3px;
 	-moz-border-radius-bottomright: 3px;
 	}
 
-.v-datefield-calendarpanel-body,
-.v-datefield-calendarpanel-time {
+.#{$name}-calendarpanel-body,
+.#{$name}-calendarpanel-time {
 	text-align: center;
 	vertical-align: top;
 	}
 
-.v-datefield-calendarpanel-body table {
+.#{$name}-calendarpanel-body table {
 	border-collapse: collapse;
 	margin: 0;
 	padding: 0;
 	margin: 0 auto;
 	}
 
-.v-datefield-calendarpanel-weekdays td {
+.#{$name}-calendarpanel-weekdays td {
 	width: 14.2%;
 	overflow: hidden;
 	line-height: normal;
@@ -198,11 +198,11 @@ td.v-datefield-calendarpanel-nextyear {
 	vertical-align: top;
 	}
 	
-.v-datefield-calendarpanel-weeknumbers td {
+.#{$name}-calendarpanel-weeknumbers td {
 	width: 12.5%;
 	}
 
-.v-datefield-calendarpanel-weekdays strong {
+.#{$name}-calendarpanel-weekdays strong {
 	display: block;
 	text-align: right;
 	font-size: 0.8em;
@@ -214,33 +214,33 @@ td.v-datefield-calendarpanel-nextyear {
 	margin-bottom: 2px;
 	}
 
-.v-datefield-calendarpanel .v-first strong {
+.#{$name}-calendarpanel .v-first strong {
 	-webkit-border-bottom-left-radius: 3px;
 	-moz-border-radius-bottomleft: 3px;
 	}
 
-.v-datefield-calendarpanel .v-last strong {
+.#{$name}-calendarpanel .v-last strong {
 	-webkit-border-bottom-right-radius: 3px;
 	-moz-border-radius-bottomright: 3px;
 	}
 
-.v-datefield-popup .v-datefield-calendarpanel .v-first strong,
-.v-datefield-popup .v-datefield-calendarpanel .v-last strong {
+.#{$name}-popup .#{$name}-calendarpanel .v-first strong,
+.#{$name}-popup .#{$name}-calendarpanel .v-last strong {
 	-webkit-border-radius: 0;
 	-moz-border-radius: 0;
 	}
 
-.v-datefield-calendarpanel-body td {
+.#{$name}-calendarpanel-body td {
 	text-align: right;
 	height: 1.6em;
 	}
 
-.v-datefield-calendarpanel-weeknumber {
+.#{$name}-calendarpanel-weeknumber {
 	padding: .5em .5em .35em 0;
 	}
 
-.v-datefield-calendarpanel-day,
-.v-datefield-calendarpanel-day-today {
+.#{$name}-calendarpanel-day,
+.#{$name}-calendarpanel-day-today {
 	padding: .15em .5em .15em 0;
 	display: block;
 	margin: 1px 1px 1px .3em;
@@ -249,14 +249,14 @@ td.v-datefield-calendarpanel-nextyear {
 	-moz-border-radius: 2px;
 	}
 
-.v-datefield-calendarpanel-day-focused,
-.v-datefield-calendarpanel-day:hover {
+.#{$name}-calendarpanel-day-focused,
+.#{$name}-calendarpanel-day:hover {
 	margin: 0 0 0 .2em;
 	border: 1px solid #b3b3b3;
 	outline: none;
 	}
 
-.v-datefield-calendarpanel-day-today {
+.#{$name}-calendarpanel-day-today {
 	border: none;
 	background: transparent url(../../img/grad-dark-top2.png) repeat-x;
 	margin: 0 0 0 .2em;
@@ -264,13 +264,13 @@ td.v-datefield-calendarpanel-nextyear {
 	border: 1px solid #c9c9c9;
 	}
 
-.v-datefield-calendarpanel-day-selected,
-.v-datefield-calendarpanel-day-selected:hover {
+.#{$name}-calendarpanel-day-selected,
+.#{$name}-calendarpanel-day-selected:hover {
 	margin: 0 0 0 .3em;
 	border: none;
 	}
 
-.v-datefield-calendarpanel-time select {
+.#{$name}-calendarpanel-time select {
 	padding: 0;
 	font-size: 0.9em;
 	margin: 0;

WebContent/VAADIN/themes/chameleon/components/inlinedatefield/inlinedatefield.scss

@@ -0,0 +1,10 @@
+@mixin chameleon-inline-datefield($name : v-inline-datefield){
+        
+    /* FIXME $name should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */
+    @include chameleon-datefield(v-inline-datefield);
+    
+    .#{$name},
+    .#{$name}-calendarpanel-day {
+        line-height:16px; /* Override popup datefields line-height:0 to get correct line heights */
+    }      
+}

client/src/com/vaadin/client/ui/datefield/VCalendarPanel.java

@@ -203,6 +203,8 @@ public class VCalendarPanel extends FocusableFlexTable implements
 
     public VCalendarPanel() {
 
+        setStyleName(VDateField.CLASSNAME + "-calendarpanel");
+
         /*
          * Firefox auto-repeat works correctly only if we use a key press
          * handler, other browsers handle it correctly when using a key down
@@ -610,6 +612,10 @@ public class VCalendarPanel extends FocusableFlexTable implements
      * Updates the calendar and text field with the selected dates.
      */
     public void renderCalendar() {
+
+        super.setStylePrimaryName(parent.getStylePrimaryName()
+                + "-calendarpanel");
+
         if (focusedDate == null) {
             Date now = new Date();
             // focusedDate must have zero hours, mins, secs, millisecs