From 228186fe44245fa46a1614d027c89a276505685e Mon Sep 17 00:00:00 2001 From: John Ahlroos Date: Thu, 25 Oct 2012 17:11:15 +0300 Subject: [PATCH] Fixed Chameleon theme for InlineDatefield #10070 Change-Id: I7891d727ab75a48e6607d6c49eba664a32a4d255 --- .../chameleon/components/components.scss | 4 + .../components/datefield/datefield.scss | 114 +++++++++--------- .../inlinedatefield/inlinedatefield.scss | 10 ++ .../client/ui/datefield/VCalendarPanel.java | 6 + 4 files changed, 77 insertions(+), 57 deletions(-) create mode 100644 WebContent/VAADIN/themes/chameleon/components/inlinedatefield/inlinedatefield.scss 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 -- 2.39.5