From: Jouni Koivuviita Date: Thu, 18 Oct 2007 12:15:26 +0000 (+0000) Subject: -Small layout fix to ReservationApplication. X-Git-Tag: 6.7.0.beta1~5819 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=ffc4229ea6a26dd325307d37e80cf270145a0885;p=vaadin-framework.git -Small layout fix to ReservationApplication. -CalendarPanel stylename additions. -IDateFieldCalendar styles and IPopupCalendar styles. svn changeset:2551/svn branch:trunk --- diff --git a/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java b/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java index 5e6f57abd3..afae30d843 100644 --- a/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java +++ b/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java @@ -30,18 +30,25 @@ public class ReservationApplication extends Application { ResourceSelectorPanel resourcePanel; private CalendarField reservedFrom; + private static final long DEFAULT_GAP_MILLIS = 3600000; // (almost) one + // hour private long currentGapMillis = DEFAULT_GAP_MILLIS; // current length of + // reservation private CalendarField reservedTo; private Label resourceName; + private Label statusLabel; + private TextField description; + private Button reservationButton; private Table allTable; + private CalendarField allCalendar; private GoogleMap map; @@ -116,7 +123,7 @@ public class ReservationApplication extends Application { arrowLabel.setContentMode(Label.CONTENT_XHTML); arrowLabel.setStyle("arrow"); reservationPanel.addComponent(arrowLabel); - + Calendar to = Calendar.getInstance(); to.setTime(from.getTime()); to.add(Calendar.MILLISECOND, (int) DEFAULT_GAP_MILLIS); @@ -164,8 +171,9 @@ public class ReservationApplication extends Application { } }); - OrderedLayout allLayout = new OrderedLayout( - OrderedLayout.ORIENTATION_HORIZONTAL); + Panel allLayout = new Panel(new OrderedLayout( + OrderedLayout.ORIENTATION_HORIZONTAL)); + allLayout.addStyleName(Panel.STYLE_LIGHT); allCalendar = new CalendarField(); initCalendarFieldPropertyIds(allCalendar); allLayout.addComponent(allCalendar); @@ -235,9 +243,10 @@ public class ReservationApplication extends Application { SampleDB.Reservation.PROPERTY_ID_RESERVED_TO, SampleDB.Resource.PROPERTY_ID_NAME, SampleDB.Resource.PROPERTY_ID_DESCRIPTION, - SampleDB.Reservation.PROPERTY_ID_DESCRIPTION}); - allTable.setColumnHeaders(new String[] {"From","To","Resource","Description","Message"}); - } + SampleDB.Reservation.PROPERTY_ID_DESCRIPTION }); + allTable.setColumnHeaders(new String[] { "From", "To", "Resource", + "Description", "Message" }); + } allCalendar.setContainerDataSource(allReservations); } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/CalendarPanel.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/CalendarPanel.java index ea8df2924d..0fc60e25dc 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/CalendarPanel.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/CalendarPanel.java @@ -24,13 +24,17 @@ public class CalendarPanel extends FlexTable implements MouseListener, private IDateField datefield; private IEventButton prevYear; + private IEventButton nextYear; + private IEventButton prevMonth; + private IEventButton nextMonth; private Time time; private Date minDate = null; + private Date maxDate = null; private CalendarEntrySource entrySource; @@ -85,7 +89,7 @@ public class CalendarPanel extends FlexTable implements MouseListener, } private void buildCalendarHeader(boolean forceRedraw, boolean needsMonth) { - // Can't draw a calendar without a date :) + // Can't draw a calendar without a date if (datefield.getCurrentDate() == null) datefield.setCurrentDate(new Date()); @@ -93,8 +97,10 @@ public class CalendarPanel extends FlexTable implements MouseListener, if (prevMonth == null) { // Only do once prevYear = new IEventButton(); prevYear.setHTML("«"); + prevYear.setStyleName("i-button-prevyear"); nextYear = new IEventButton(); nextYear.setHTML("»"); + nextYear.setStyleName("i-button-nextyear"); prevYear.addMouseListener(this); nextYear.addMouseListener(this); prevYear.addClickListener(this); @@ -105,8 +111,10 @@ public class CalendarPanel extends FlexTable implements MouseListener, if (needsMonth) { prevMonth = new IEventButton(); prevMonth.setHTML("‹"); + prevMonth.setStyleName("i-button-prevmonth"); nextMonth = new IEventButton(); nextMonth.setHTML("›"); + nextMonth.setStyleName("i-button-nextmonth"); prevMonth.addMouseListener(this); nextMonth.addMouseListener(this); prevMonth.addClickListener(this); @@ -116,6 +124,8 @@ public class CalendarPanel extends FlexTable implements MouseListener, } getFlexCellFormatter().setColSpan(0, 2, 3); + getRowFormatter().addStyleName(0, + datefield.CLASSNAME + "-calendarpanel-header"); } else if (!needsMonth) { // Remove month traverse buttons prevMonth.removeClickListener(this); @@ -364,19 +374,23 @@ public class CalendarPanel extends FlexTable implements MouseListener, if (text.equals(" ")) return; - Integer day = new Integer(text); - - Date newDate = new Date(cal.datefield.getCurrentDate().getTime()); - newDate.setDate(day.intValue()); - if (!isEnabledDate(newDate)) { + try { + Integer day = new Integer(text); + Date newDate = new Date(cal.datefield.getCurrentDate().getTime()); + newDate.setDate(day.intValue()); + if (!isEnabledDate(newDate)) { + return; + } + cal.datefield.getCurrentDate().setTime(newDate.getTime()); + cal.datefield.getClient().updateVariable(cal.datefield.getId(), + "day", cal.datefield.getCurrentDate().getDate(), + cal.datefield.isImmediate()); + + updateCalendar(); + } catch(NumberFormatException e) { + // Not a number, ignore and stop here return; } - cal.datefield.getCurrentDate().setTime(newDate.getTime()); - cal.datefield.getClient().updateVariable(cal.datefield.getId(), - "day", cal.datefield.getCurrentDate().getDate(), - cal.datefield.isImmediate()); - - updateCalendar(); } } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IDateFieldCalendar.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IDateFieldCalendar.java index 276170f990..2d5540298d 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IDateFieldCalendar.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IDateFieldCalendar.java @@ -9,7 +9,6 @@ public class IDateFieldCalendar extends IDateField { public IDateFieldCalendar() { super(); - setStyleName(CLASSNAME + "-calendar"); date = new CalendarPanel(this); add(date); } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java index 8234cd5906..63d8d4ff66 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java @@ -70,8 +70,10 @@ public class IPanel extends SimplePanel implements Paintable, && !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")) { diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPopupCalendar.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPopupCalendar.java index 8f9e6ecb1a..9e9a27e2b4 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPopupCalendar.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPopupCalendar.java @@ -28,7 +28,7 @@ public class IPopupCalendar extends ITextualDate implements Paintable, calendar = new CalendarPanel(this); popup = new PopupPanel(true); - popup.setStyleName(IDateField.CLASSNAME + "-calendar"); + popup.setStyleName(IDateField.CLASSNAME + "-popup"); popup.setWidget(calendar); popup.addPopupListener(this); } @@ -44,6 +44,9 @@ public class IPopupCalendar extends ITextualDate implements Paintable, if (sender == calendarToggle) { calendar.updateCalendar(); popup.show(); + // clear previous values + popup.setWidth(""); + popup.setHeight(""); int w = calendar.getOffsetWidth(); int h = calendar.getOffsetHeight(); int t = calendarToggle.getAbsoluteTop(); diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css index 792a996a32..bdd2a1de30 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css @@ -1,77 +1,172 @@ .i-datefield .i-button { width: 22px; - height: 20px; + height: 25px; padding: 0; overflow: hidden; border: none; - background: transparent url(../icons/16/calendar.png) no-repeat 50% 50%; + background: transparent url(img/open-button.png) no-repeat right 1px; text-indent: -90000px; } + +.i-datefield-popup { + font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; + color: #464f52; + font-size: 12px; + background: #f6f7f7; + border: 1px solid #b6bbbc; + padding: 6px; +} + .i-datefield-calendarpanel { - width: 22em; + width: 19em; + font-size: 12px; +} + +.i-datefield-popup .i-datefield-calendarpanel { + width: 16em; } + .i-datefield-calendarpanel table { width: 100%; } + .i-datefield-calendarpanel td { + text-align: right; width: 14.2%; + padding: 0; + margin: 0; +} + +.i-datefield-calendarpanel td span { + display: block; +} + +.i-datefield-calendarpanel-header { + height: 30px; +} + +.i-datefield-calendarpanel-header, +.i-datefield-calendarpanel strong { + font-size: 13px; +} + +.i-datefield-popup .i-datefield-calendarpanel-header, +.i-datefield-popup .i-datefield-calendarpanel strong { + font-size: 12px; +} + +.i-datefield-calendarpanel-header td { + text-align: center; +} + +.i-datefield-calendarpanel-month { + font-weight: bold; text-align: center; + text-shadow: #ffffff 2px 2px 0; +} + +/* Year buttons */ +.i-datefield-calendarpanel .i-button-prevyear, +.i-datefield-calendarpanel .i-button-nextyear { + display: block; + width: 16px; + height: 16px; + border: none; padding: 0; + background: transparent url(img/prevyear.png) no-repeat; + text-indent: -90000px; + margin: 0 auto; } -.i-datefield-calendarpanel .i-button { - width: 22px; - height: 22px; - font-size: 0.9em; +.i-datefield-calendarpanel .i-button-nextyear { + background: transparent url(img/nextyear.png) no-repeat; +} +.i-datefield-calendarpanel .i-button-prevyear:hover, +.i-datefield-calendarpanel .i-button-nextyear:hover { + background-position: left bottom; +} + +/* Month buttons */ +.i-datefield-calendarpanel .i-button-prevmonth, +.i-datefield-calendarpanel .i-button-nextmonth { + display: block; + width: 11px; + height: 16px; + border: none; padding: 0; - line-height: 0.9em; + background: transparent url(img/prevmonth.png) no-repeat; + text-indent: -90000px; + margin: 0 auto; } -.i-datefield-calendarpanel-month { - font-size: 1em; +.i-datefield-calendarpanel .i-button-nextmonth { + background: transparent url(img/nextmonth.png) no-repeat; } -.i-datefield-calendarpanel-day { - cursor: pointer; - padding: 0 3px; +.i-datefield-calendarpanel .i-button-prevmonth:hover, +.i-datefield-calendarpanel .i-button-nextmonth:hover { + background-position: left bottom; } + +.i-datefield-calendarpanel strong { + color: #ee5311; + display: block; + width: 20px; +} + +.i-datefield-calendarpanel-day, .i-datefield-calendarpanel-day-today { - font-weight: bold; - border: 1px solid #aaa; - padding: 0 3px; cursor: pointer; + padding: 1px 3px; + width: 14px; + height: 16px; } + +.i-datefield-calendarpanel-day-today { + border: 1px solid #429ce9; + width: 12px; + height: 14px +} + .i-disabled .i-datefield-calendarpanel-day, .i-disabled .i-datefield-calendarpanel-day-today { cursor: default; } -.i-datefield-calendarpanel-day-selected { - font-weight: bold; - color: #fff; - padding: 0 3px; - background-color: #1C3E6E; - cursor: default; -} + .i-datefield-calendarpanel-day-entry { - color: #0074D9; + color: #6a98b5; } + .i-datefield-calendarpanel-day-disabled { font-weight: normal; color: #dddddd; cursor: default; opacity: 0.5; } + .i-datefield-calendarpanel-day-entry.i-datefield-calendarpanel-day-disabled { - color: #ABC8E2; + color: #afd6f8; +} + +.i-datefield-calendarpanel-day-selected { + font-weight: bold; + width: 14px; + height: 16px; + color: #fff; + padding: 1px 3px; + background: transparent url(img/selected-bg.png) no-repeat 50% 50%; + cursor: default; + border: none; } .i-datefield-time { white-space: nowrap; + font-size: 11px; } + .i-datefield-time .i-label { display: inline; } -.i-datefield-calendar { - border: 1px solid #29528a; - padding: 5px; - background: #fff; -} - +.i-datefield-time .i-select { + font-size: 10px; + padding: 0; + margin: 0; +} \ No newline at end of file diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/nextmonth.png b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/nextmonth.png new file mode 100644 index 0000000000..3315125dd1 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/nextmonth.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/nextyear.png b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/nextyear.png new file mode 100644 index 0000000000..22633fd31a Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/nextyear.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/open-button.png b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/open-button.png new file mode 100644 index 0000000000..548ca12f70 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/open-button.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/prevmonth.png b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/prevmonth.png new file mode 100644 index 0000000000..d114632fef Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/prevmonth.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/prevyear.png b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/prevyear.png new file mode 100644 index 0000000000..f174713092 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/prevyear.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/selected-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/selected-bg.png new file mode 100644 index 0000000000..799915ab8f Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/img/selected-bg.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css b/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css index e260ab2f5f..35dbb01e89 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css @@ -93,7 +93,8 @@ padding-top: 14px; } -.i-panel-caption-light:before { +.i-panel-caption-light:before, +.i-panel-nocaption-light:before { display: none; } diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/textfield/textfield.css b/src/com/itmill/toolkit/terminal/gwt/public/default/textfield/textfield.css index b3d05c3c24..391a02abe3 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/textfield/textfield.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/textfield/textfield.css @@ -6,12 +6,12 @@ border-bottom-color: #d6d6d6; border-right-color: #d6d6d6; margin: 0; + font-size: 13px; + height: 18px; } .i-textfield-focus { - border-color: #4376c3; - border-bottom-color: #6696dd; - border-right-color: #6696dd; + border-color: #5daee8; } .i-textfield-error { @@ -22,12 +22,12 @@ background: transparent; color: #222; border: none; -} - -.i-richtextarea { - border: 1px solid #b6b6b6; - overflow: hidden; -} -.i-richtextarea iframe { - border: 0; +} + +.i-richtextarea { + border: 1px solid #b6b6b6; + overflow: hidden; +} +.i-richtextarea iframe { + border: 0; } \ No newline at end of file