summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--WebContent/VAADIN/themes/chameleon/components/components.scss4
-rw-r--r--WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss114
-rw-r--r--WebContent/VAADIN/themes/chameleon/components/inlinedatefield/inlinedatefield.scss10
-rw-r--r--client/src/com/vaadin/client/ui/datefield/VCalendarPanel.java6
4 files changed, 77 insertions, 57 deletions
diff --git a/WebContent/VAADIN/themes/chameleon/components/components.scss b/WebContent/VAADIN/themes/chameleon/components/components.scss
index 45a313ed60..79b5a2d468 100644
--- a/WebContent/VAADIN/themes/chameleon/components/components.scss
+++ b/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;
diff --git a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss
index 2f9705ca58..d8ff166386 100644
--- a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss
+++ b/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;
diff --git a/WebContent/VAADIN/themes/chameleon/components/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/chameleon/components/inlinedatefield/inlinedatefield.scss
new file mode 100644
index 0000000000..413c7ccca3
--- /dev/null
+++ b/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 */
+ }
+} \ No newline at end of file
diff --git a/client/src/com/vaadin/client/ui/datefield/VCalendarPanel.java b/client/src/com/vaadin/client/ui/datefield/VCalendarPanel.java
index a9528cd145..0d77b4d023 100644
--- a/client/src/com/vaadin/client/ui/datefield/VCalendarPanel.java
+++ b/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