-CalendarPanel stylename additions.
-IDateFieldCalendar styles and IPopupCalendar styles.
svn changeset:2551/svn branch:trunk
ResourceSelectorPanel resourcePanel;\r
\r
private CalendarField reservedFrom;\r
+\r
private static final long DEFAULT_GAP_MILLIS = 3600000; // (almost) one\r
+\r
// hour\r
private long currentGapMillis = DEFAULT_GAP_MILLIS; // current length of\r
+\r
// reservation\r
private CalendarField reservedTo;\r
\r
private Label resourceName;\r
+\r
private Label statusLabel;\r
+\r
private TextField description;\r
+\r
private Button reservationButton;\r
\r
private Table allTable;\r
+\r
private CalendarField allCalendar;\r
\r
private GoogleMap map;\r
arrowLabel.setContentMode(Label.CONTENT_XHTML);\r
arrowLabel.setStyle("arrow");\r
reservationPanel.addComponent(arrowLabel);\r
- \r
+\r
Calendar to = Calendar.getInstance();\r
to.setTime(from.getTime());\r
to.add(Calendar.MILLISECOND, (int) DEFAULT_GAP_MILLIS);\r
}\r
});\r
\r
- OrderedLayout allLayout = new OrderedLayout(\r
- OrderedLayout.ORIENTATION_HORIZONTAL);\r
+ Panel allLayout = new Panel(new OrderedLayout(\r
+ OrderedLayout.ORIENTATION_HORIZONTAL));\r
+ allLayout.addStyleName(Panel.STYLE_LIGHT);\r
allCalendar = new CalendarField();\r
initCalendarFieldPropertyIds(allCalendar);\r
allLayout.addComponent(allCalendar);\r
SampleDB.Reservation.PROPERTY_ID_RESERVED_TO,\r
SampleDB.Resource.PROPERTY_ID_NAME,\r
SampleDB.Resource.PROPERTY_ID_DESCRIPTION,\r
- SampleDB.Reservation.PROPERTY_ID_DESCRIPTION});\r
- allTable.setColumnHeaders(new String[] {"From","To","Resource","Description","Message"});\r
- }\r
+ SampleDB.Reservation.PROPERTY_ID_DESCRIPTION });\r
+ allTable.setColumnHeaders(new String[] { "From", "To", "Resource",\r
+ "Description", "Message" });\r
+ }\r
allCalendar.setContainerDataSource(allReservations);\r
}\r
\r
private IDateField datefield;\r
\r
private IEventButton prevYear;\r
+\r
private IEventButton nextYear;\r
+\r
private IEventButton prevMonth;\r
+\r
private IEventButton nextMonth;\r
\r
private Time time;\r
\r
private Date minDate = null;\r
+\r
private Date maxDate = null;\r
\r
private CalendarEntrySource entrySource;\r
}\r
\r
private void buildCalendarHeader(boolean forceRedraw, boolean needsMonth) {\r
- // Can't draw a calendar without a date :)\r
+ // Can't draw a calendar without a date\r
if (datefield.getCurrentDate() == null)\r
datefield.setCurrentDate(new Date());\r
\r
if (prevMonth == null) { // Only do once\r
prevYear = new IEventButton();\r
prevYear.setHTML("«");\r
+ prevYear.setStyleName("i-button-prevyear");\r
nextYear = new IEventButton();\r
nextYear.setHTML("»");\r
+ nextYear.setStyleName("i-button-nextyear");\r
prevYear.addMouseListener(this);\r
nextYear.addMouseListener(this);\r
prevYear.addClickListener(this);\r
if (needsMonth) {\r
prevMonth = new IEventButton();\r
prevMonth.setHTML("‹");\r
+ prevMonth.setStyleName("i-button-prevmonth");\r
nextMonth = new IEventButton();\r
nextMonth.setHTML("›");\r
+ nextMonth.setStyleName("i-button-nextmonth");\r
prevMonth.addMouseListener(this);\r
nextMonth.addMouseListener(this);\r
prevMonth.addClickListener(this);\r
}\r
\r
getFlexCellFormatter().setColSpan(0, 2, 3);\r
+ getRowFormatter().addStyleName(0,\r
+ datefield.CLASSNAME + "-calendarpanel-header");\r
} else if (!needsMonth) {\r
// Remove month traverse buttons\r
prevMonth.removeClickListener(this);\r
if (text.equals(" "))\r
return;\r
\r
- Integer day = new Integer(text);\r
-\r
- Date newDate = new Date(cal.datefield.getCurrentDate().getTime());\r
- newDate.setDate(day.intValue());\r
- if (!isEnabledDate(newDate)) {\r
+ try {\r
+ Integer day = new Integer(text);\r
+ Date newDate = new Date(cal.datefield.getCurrentDate().getTime());\r
+ newDate.setDate(day.intValue());\r
+ if (!isEnabledDate(newDate)) {\r
+ return;\r
+ }\r
+ cal.datefield.getCurrentDate().setTime(newDate.getTime());\r
+ cal.datefield.getClient().updateVariable(cal.datefield.getId(),\r
+ "day", cal.datefield.getCurrentDate().getDate(),\r
+ cal.datefield.isImmediate());\r
+\r
+ updateCalendar();\r
+ } catch(NumberFormatException e) {\r
+ // Not a number, ignore and stop here\r
return;\r
}\r
- cal.datefield.getCurrentDate().setTime(newDate.getTime());\r
- cal.datefield.getClient().updateVariable(cal.datefield.getId(),\r
- "day", cal.datefield.getCurrentDate().getDate(),\r
- cal.datefield.isImmediate());\r
-\r
- updateCalendar();\r
}\r
\r
}\r
\r
public IDateFieldCalendar() {\r
super();\r
- setStyleName(CLASSNAME + "-calendar");\r
date = new CalendarPanel(this);\r
add(date);\r
}\r
&& !uidl.getStringAttribute("caption").equals("")) {
DOM.setInnerText(captionNode, uidl.getStringAttribute("caption"));
hasCaption = true;
- } else
+ } else {
DOM.setInnerText(captionNode, "");
+ DOM.setElementProperty(captionNode, "className", CLASSNAME + "-nocaption");
+ }
// Add proper stylenames for all elements
if (uidl.hasAttribute("style")) {
\r
calendar = new CalendarPanel(this);\r
popup = new PopupPanel(true);\r
- popup.setStyleName(IDateField.CLASSNAME + "-calendar");\r
+ popup.setStyleName(IDateField.CLASSNAME + "-popup");\r
popup.setWidget(calendar);\r
popup.addPopupListener(this);\r
}\r
if (sender == calendarToggle) {\r
calendar.updateCalendar();\r
popup.show();\r
+ // clear previous values\r
+ popup.setWidth("");\r
+ popup.setHeight("");\r
int w = calendar.getOffsetWidth();\r
int h = calendar.getOffsetHeight();\r
int t = calendarToggle.getAbsoluteTop();\r
.i-datefield .i-button {\r
width: 22px;\r
- height: 20px;\r
+ height: 25px;\r
padding: 0;\r
overflow: hidden;\r
border: none;\r
- background: transparent url(../icons/16/calendar.png) no-repeat 50% 50%;\r
+ background: transparent url(img/open-button.png) no-repeat right 1px;\r
text-indent: -90000px;\r
}\r
+\r
+.i-datefield-popup {\r
+ font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;\r
+ color: #464f52;\r
+ font-size: 12px;\r
+ background: #f6f7f7;\r
+ border: 1px solid #b6bbbc;\r
+ padding: 6px;\r
+}\r
+\r
.i-datefield-calendarpanel {\r
- width: 22em;\r
+ width: 19em;\r
+ font-size: 12px;\r
+}\r
+\r
+.i-datefield-popup .i-datefield-calendarpanel {\r
+ width: 16em;\r
}\r
+\r
.i-datefield-calendarpanel table {\r
width: 100%;\r
}\r
+\r
.i-datefield-calendarpanel td {\r
+ text-align: right;\r
width: 14.2%;\r
+ padding: 0;\r
+ margin: 0;\r
+}\r
+\r
+.i-datefield-calendarpanel td span {\r
+ display: block;\r
+}\r
+\r
+.i-datefield-calendarpanel-header {\r
+ height: 30px;\r
+}\r
+\r
+.i-datefield-calendarpanel-header,\r
+.i-datefield-calendarpanel strong {\r
+ font-size: 13px;\r
+}\r
+\r
+.i-datefield-popup .i-datefield-calendarpanel-header,\r
+.i-datefield-popup .i-datefield-calendarpanel strong {\r
+ font-size: 12px;\r
+}\r
+\r
+.i-datefield-calendarpanel-header td {\r
+ text-align: center;\r
+}\r
+\r
+.i-datefield-calendarpanel-month {\r
+ font-weight: bold;\r
text-align: center;\r
+ text-shadow: #ffffff 2px 2px 0;\r
+}\r
+\r
+/* Year buttons */\r
+.i-datefield-calendarpanel .i-button-prevyear,\r
+.i-datefield-calendarpanel .i-button-nextyear {\r
+ display: block;\r
+ width: 16px;\r
+ height: 16px;\r
+ border: none;\r
padding: 0;\r
+ background: transparent url(img/prevyear.png) no-repeat;\r
+ text-indent: -90000px;\r
+ margin: 0 auto;\r
}\r
-.i-datefield-calendarpanel .i-button {\r
- width: 22px;\r
- height: 22px;\r
- font-size: 0.9em;\r
+.i-datefield-calendarpanel .i-button-nextyear {\r
+ background: transparent url(img/nextyear.png) no-repeat;\r
+}\r
+.i-datefield-calendarpanel .i-button-prevyear:hover,\r
+.i-datefield-calendarpanel .i-button-nextyear:hover {\r
+ background-position: left bottom;\r
+}\r
+\r
+/* Month buttons */\r
+.i-datefield-calendarpanel .i-button-prevmonth,\r
+.i-datefield-calendarpanel .i-button-nextmonth {\r
+ display: block;\r
+ width: 11px;\r
+ height: 16px;\r
+ border: none;\r
padding: 0;\r
- line-height: 0.9em;\r
+ background: transparent url(img/prevmonth.png) no-repeat;\r
+ text-indent: -90000px;\r
+ margin: 0 auto;\r
}\r
-.i-datefield-calendarpanel-month {\r
- font-size: 1em;\r
+.i-datefield-calendarpanel .i-button-nextmonth {\r
+ background: transparent url(img/nextmonth.png) no-repeat;\r
}\r
-.i-datefield-calendarpanel-day {\r
- cursor: pointer;\r
- padding: 0 3px;\r
+.i-datefield-calendarpanel .i-button-prevmonth:hover,\r
+.i-datefield-calendarpanel .i-button-nextmonth:hover {\r
+ background-position: left bottom;\r
}\r
+\r
+.i-datefield-calendarpanel strong {\r
+ color: #ee5311;\r
+ display: block;\r
+ width: 20px;\r
+}\r
+\r
+.i-datefield-calendarpanel-day,\r
.i-datefield-calendarpanel-day-today {\r
- font-weight: bold;\r
- border: 1px solid #aaa;\r
- padding: 0 3px;\r
cursor: pointer;\r
+ padding: 1px 3px;\r
+ width: 14px;\r
+ height: 16px;\r
}\r
+\r
+.i-datefield-calendarpanel-day-today {\r
+ border: 1px solid #429ce9;\r
+ width: 12px;\r
+ height: 14px\r
+}\r
+\r
.i-disabled .i-datefield-calendarpanel-day,\r
.i-disabled .i-datefield-calendarpanel-day-today {\r
cursor: default;\r
}\r
-.i-datefield-calendarpanel-day-selected {\r
- font-weight: bold;\r
- color: #fff;\r
- padding: 0 3px;\r
- background-color: #1C3E6E;\r
- cursor: default;\r
-}\r
+\r
.i-datefield-calendarpanel-day-entry {\r
- color: #0074D9;\r
+ color: #6a98b5;\r
}\r
+\r
.i-datefield-calendarpanel-day-disabled {\r
font-weight: normal;\r
color: #dddddd;\r
cursor: default;\r
opacity: 0.5;\r
}\r
+\r
.i-datefield-calendarpanel-day-entry.i-datefield-calendarpanel-day-disabled {\r
- color: #ABC8E2;\r
+ color: #afd6f8;\r
+}\r
+\r
+.i-datefield-calendarpanel-day-selected {\r
+ font-weight: bold;\r
+ width: 14px;\r
+ height: 16px;\r
+ color: #fff;\r
+ padding: 1px 3px;\r
+ background: transparent url(img/selected-bg.png) no-repeat 50% 50%;\r
+ cursor: default;\r
+ border: none;\r
}\r
\r
.i-datefield-time {\r
white-space: nowrap;\r
+ font-size: 11px;\r
}\r
+\r
.i-datefield-time .i-label {\r
display: inline;\r
}\r
\r
-.i-datefield-calendar {\r
- border: 1px solid #29528a;\r
- padding: 5px;\r
- background: #fff;\r
-}\r
-\r
+.i-datefield-time .i-select {\r
+ font-size: 10px;\r
+ padding: 0;\r
+ margin: 0;\r
+}
\ No newline at end of file
padding-top: 14px;\r
}\r
\r
-.i-panel-caption-light:before {\r
+.i-panel-caption-light:before,\r
+.i-panel-nocaption-light:before {\r
display: none;\r
}\r
\r
border-bottom-color: #d6d6d6;\r
border-right-color: #d6d6d6;\r
margin: 0;\r
+ font-size: 13px;\r
+ height: 18px;\r
}\r
\r
.i-textfield-focus {\r
- border-color: #4376c3;\r
- border-bottom-color: #6696dd;\r
- border-right-color: #6696dd;\r
+ border-color: #5daee8;\r
}\r
\r
.i-textfield-error {\r
background: transparent;\r
color: #222;\r
border: none;\r
-}
-
-.i-richtextarea {
- border: 1px solid #b6b6b6;
- overflow: hidden;
-}
-.i-richtextarea iframe {
- border: 0;
+}\r
+\r
+.i-richtextarea {\r
+ border: 1px solid #b6b6b6;\r
+ overflow: hidden;\r
+}\r
+.i-richtextarea iframe {\r
+ border: 0;\r
}
\ No newline at end of file