IT Mill Toolkit 5 Demo: Reservr

From: Marc Englund Date: Fri, 12 Oct 2007 13:44:30 +0000 (+0000) Subject: Reservr look & feel mainly X-Git-Tag: 6.7.0.beta1~5852 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=a40125254a66443e5878237a7791b94bd5140f48;p=vaadin-framework.git Reservr look & feel mainly svn changeset:2514/svn branch:trunk --- diff --git a/WebContent/ITMILL/themes/reservr/reservr.jpg b/WebContent/ITMILL/themes/reservr/reservr.jpg new file mode 100644 index 0000000000..5fc956a372 Binary files /dev/null and b/WebContent/ITMILL/themes/reservr/reservr.jpg differ diff --git a/WebContent/ITMILL/themes/reservr/styles.css b/WebContent/ITMILL/themes/reservr/styles.css index 569fcaf8c6..22a777dca3 100644 --- a/WebContent/ITMILL/themes/reservr/styles.css +++ b/WebContent/ITMILL/themes/reservr/styles.css @@ -1,15 +1,48 @@ +/* Reservr styles */ +html, body { + background-color: #E9ECED; +} +#header { + font-family:"Trebuchet MS",geneva,helvetica,arial,tahoma,verdana,sans-serif; + padding: 10px; +} +#logo { + line-height: 33px; + color:#F14C1A; + font-size:22px; + letter-spacing:-0.03em; +} +#slogan { + color: #464F52; +} + +/* Default widgetset overrides */ +textarea.i-textfield { + font-size: 13px; + width: 326px; + height: 110px; +} +button.link { + text-decoration: none; +} button.important-link { border: 0px; text-align: left; - text-decoration: underline; + text-decoration: none; background: none; font-weight: bold; } button.selected-link { border: 0px; text-align: left; - text-decoration: underline; + text-decoration: none; background: #183C6B; font-weight: bold; color: white; } +.i-orderedlayout { + margin:5px 5px; +} +.i-orderedlayout TD { + vertical-align: top; +} \ No newline at end of file diff --git a/WebContent/reservr.html b/WebContent/reservr.html index ac1270fdf5..a5acb63cf1 100644 --- a/WebContent/reservr.html +++ b/WebContent/reservr.html @@ -4,7 +4,7 @@ IT Mill Toolkit 5 Demo: Reservr @@ -13,6 +13,11 @@ +

diff --git a/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java b/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java index b5b59c8ba6..3c7ec1a031 100644 --- a/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java +++ b/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java @@ -30,7 +30,8 @@ public class ReservationApplication extends Application { ResourceSelectorPanel resourcePanel; private CalendarField reservedFrom; - private static final long DEFAULT_GAP_MILLIS = 3600000; // one hour + private static final long DEFAULT_GAP_MILLIS = 3600000; // (almost) one + // hour private long currentGapMillis = DEFAULT_GAP_MILLIS; // current length of // reservation private CalendarField reservedTo; @@ -57,8 +58,6 @@ public class ReservationApplication extends Application { TabSheet mainTabs = new TabSheet(); mainWindow.addComponent(mainTabs); - mainWindow.addComponent(new Button("close", this, "close")); - OrderedLayout reservationTab = new OrderedLayout(); mainTabs.addTab(reservationTab, "Make reservation", null); @@ -79,7 +78,7 @@ public class ReservationApplication extends Application { resourceName.setCaption("Choose resource"); infoLayout.addComponent(resourceName); description = new TextField(); - description.setColumns(55); + description.setColumns(47); description.setRows(5); infoLayout.addComponent(description); reservationButton = new Button("Make reservation", this, @@ -89,7 +88,7 @@ public class ReservationApplication extends Application { infoLayout.addComponent(statusLabel); map = new GoogleMap(); - map.setWidth(360); + map.setWidth(330); map.setHeight(270); map.setItemMarkerHtmlPropertyId(SampleDB.Resource.PROPERTY_ID_NAME); map.setItemMarkerXPropertyId(SampleDB.Resource.PROPERTY_ID_LOCATIONX); @@ -98,7 +97,11 @@ public class ReservationApplication extends Application { infoLayout.addComponent(map); Calendar from = Calendar.getInstance(); - reservedFrom = new CalendarField(); + from.add(Calendar.HOUR, 1); + from.set(Calendar.MINUTE, 0); + from.set(Calendar.SECOND, 0); + from.set(Calendar.MILLISECOND, 0); + reservedFrom = new CalendarField("From »"); reservedFrom.setMinimumDate(from.getTime()); reservedFrom.setValue(from.getTime()); reservedFrom.setImmediate(true); @@ -106,9 +109,10 @@ public class ReservationApplication extends Application { reservationPanel.addComponent(reservedFrom); Calendar to = Calendar.getInstance(); - to.add(Calendar.MILLISECOND, (int) currentGapMillis); - reservedTo = new CalendarField(); - reservedTo.setMinimumDate(from.getTime()); + to.setTime(from.getTime()); + to.add(Calendar.MILLISECOND, (int) DEFAULT_GAP_MILLIS); + reservedTo = new CalendarField("» To"); + reservedTo.setMinimumDate(to.getTime()); reservedTo.setValue(to.getTime()); reservedTo.setImmediate(true); initCalendarFieldPropertyIds(reservedTo); @@ -125,7 +129,8 @@ public class ReservationApplication extends Application { } else { reservedTo.setEnabled(true); } - reservedTo.setMinimumDate(fd); + reservedTo.setMinimumDate(new Date(fd.getTime() + + DEFAULT_GAP_MILLIS)); Calendar to = Calendar.getInstance(); to.setTime(fd); to.add(Calendar.MILLISECOND, (int) currentGapMillis); @@ -156,6 +161,8 @@ public class ReservationApplication extends Application { initCalendarFieldPropertyIds(allCalendar); allLayout.addComponent(allCalendar); allTable = new Table(); + allTable.setColumnCollapsingAllowed(true); + allTable.setColumnReorderingAllowed(true); allLayout.addComponent(allTable); mainTabs.addTab(allLayout, "All reservations", null); mainTabs.addListener(new TabSheet.SelectedTabChangeListener() { @@ -212,8 +219,16 @@ public class ReservationApplication extends Application { refreshSelectedResources(); Container allReservations = db.getReservations(null); allTable.setContainerDataSource(allReservations); + if (allReservations != null && allReservations.size() > 0) { + allTable.setVisibleColumns(new Object[] { + SampleDB.Reservation.PROPERTY_ID_RESERVED_FROM, + 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"}); + } allCalendar.setContainerDataSource(allReservations); - } private void refreshSelectedResources() { @@ -236,15 +251,21 @@ public class ReservationApplication extends Application { map.setZoomLevel(1); } else { + // Display active resource name + desc + String name = (String) resource.getItemProperty( + SampleDB.Resource.PROPERTY_ID_NAME).getValue(); + String desc = (String) resource.getItemProperty( + SampleDB.Resource.PROPERTY_ID_DESCRIPTION).getValue(); + resourceName.setCaption(name); + resourceName.setValue(desc); + // Put all resources on map (may be many if category was selected) LinkedList srs = resourcePanel.getSelectedResources(); for (Iterator it = srs.iterator(); it.hasNext();) { resource = (Item) it.next(); - String name = (String) resource.getItemProperty( + name = (String) resource.getItemProperty( SampleDB.Resource.PROPERTY_ID_NAME).getValue(); - String desc = (String) resource.getItemProperty( + desc = (String) resource.getItemProperty( SampleDB.Resource.PROPERTY_ID_DESCRIPTION).getValue(); - resourceName.setCaption(name); - resourceName.setValue(desc); Double x = (Double) resource.getItemProperty( SampleDB.Resource.PROPERTY_ID_LOCATIONX).getValue(); Double y = (Double) resource.getItemProperty( @@ -256,7 +277,7 @@ public class ReservationApplication extends Application { } } - map.setZoomLevel((srs.size() == 1 ? 16 : 9)); + map.setZoomLevel((srs.size() == 1 ? 14 : 9)); reservationButton.setEnabled(true); } diff --git a/src/com/itmill/toolkit/demo/reservation/SampleDB.java b/src/com/itmill/toolkit/demo/reservation/SampleDB.java index ff7c0ae18b..3c617323dd 100644 --- a/src/com/itmill/toolkit/demo/reservation/SampleDB.java +++ b/src/com/itmill/toolkit/demo/reservation/SampleDB.java @@ -374,35 +374,7 @@ public class SampleDB { } public void generateResources() { - /* - * map.addMarker("Old Mill", new Point.Double(60.452224f,22.299929f)); - * map.addMarker("ICT", new Point.Double(60.449007f,22.295508f)); - * map.addMarker("DataCity", new Point.Double(60.448329f,22.295165f)); - * map.addMarker("BioCity", new Point.Double(60.449451f,22.293105f)); - * map.addMarker("PharmaCity", new Point.Double(60.44888f,22.292032f)); - * map.addMarker("Intelligate", new Point.Double(60.450403f,22.29495f)); - * map.addMarker("Paviljonki", new Point.Double(60.445408f,22.290831f)); - * map.addMarker("Trivium", new Point.Double(60.44641962165445f, - * 22.301753170493f)); map.addMarker("Linja-auto asema", new - * Point.Double(60.457049f,22.267957f)); - */ - /* - * Object[][] resources = { { "IT Mill Toolkit Manual", "the manual", - * "Books", new Double(60.452224),new Double(22.299929)}, { "IT Mill - * Toolkit for Dummies", "the hardcover version", "Books", new - * Double(60.452224),new Double(22.299929) }, { "Sony", "Old Sony video - * projector", "AV equipment", new Double(60.449007),new - * Double(22.295508) }, { "Sanyo", "Brand new hd-ready video projector", - * "AV equipment", new Double(60.452224),new Double(22.299929) }, { - * "Room 7", "Conference room in the lobby", "Conference rooms", new - * Double(60.449451),new Double(22.292032) }, { "Nintendo Wii", "Teh - * uber fun", "Entertainment", new Double(60.445408),new - * Double(22.290831) }, { "Playstation", "We don't actually have one", - * "Entertainment", new Double(60.44641962165445),new - * Double(22.301753170493) }, { "Luokkahuone", "Classroom right next to - * IT Mill", "Conference rooms", new Double(60.44888),new - * Double(22.292032) } }; - */ + Object[][] resources = { // Turku { "01", "01 Ford Mondeo", "w/ company logo", "Turku", @@ -433,13 +405,13 @@ public class SampleDB { { "11", "11 Ford Mustang", "Keys from Acme clerk.", "Silicon Valley", new Double(37.615853), new Double(-122.386384) }, - { "12", "12 Ford Mondeo", "Keys from infodesk.", + { "12", "12 Ford Fusion", "Keys from infodesk.", "Silicon Valley", new Double(37.365028), new Double(-121.922654) }, { "13", "13 Ford Mustang", "GT Cal Special. Keys from guard.", "Silicon Valley", new Double(37.403812), new Double(-121.977425) }, - { "14", "14 Ford Mustang", "GT Cal Special. Keys from guard.", + { "14", "14 Ford Focus", "Keys from guard.", "Silicon Valley", new Double(37.403812), new Double(-121.977425) }, { "15", "15 Land Rover", "Keys from infodesk.", diff --git a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-bg.jpg b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-bg.jpg new file mode 100644 index 0000000000..a6aeecaf70 Binary files /dev/null and b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-bg.jpg differ diff --git a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-topleft.jpg b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-topleft.jpg new file mode 100644 index 0000000000..53da0b13c0 Binary files /dev/null and b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-topleft.jpg differ diff --git a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg new file mode 100644 index 0000000000..44d65c4dd7 Binary files /dev/null and b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg differ diff --git a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css index b0e3510e92..bde033b103 100644 --- a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css +++ b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css @@ -1,90 +1,144 @@ @import "googlemap/css/googlemap.css"; +/* Entrycalendar styles */ +.i-datefield-entrycalendar-hours { + height: auto; + xoverflow: auto; +} +.i-datefield-entrycalendar-hours table { + width: auto; +} +.i-datefield-entrycalendar-hours table tr { + height: 1em; +} +.i-datefield-entrycalendar-row-even { + cursor: pointer; + background-color: #fefefe; + height: 1em; +} +.i-datefield-entrycalendar-row-odd { + cursor: pointer; + background-color: #eeeeee; + height: 1em; +} +.i-datefield-entrycalendar-row-selected { + color: #fff; + background-color: #1C3E6E; +} +td.i-datefield-entrycalendar-time { + padding-right: 2px; + white-space: nowrap; + float: left; +} +td.i-datefield-entrycalendar-time span { + width: 55px; + text-align: right; + display: block; +} +td.i-datefield-entrycalendar-entry span { + display: block; + overflow: hidden; + padding: 2px; + color: #fff; + background-image: url('img/entry-topleft.jpg'); + background-repeat: no-repeat; + background-position: 0px 0px; +} +.i-datefield-calendarpanel td.i-datefield-entrycalendar-entry { + background-color: #F24C1A; + color: #fff; + background-image: url('img/entry-bg.jpg'); + background-repeat: repeat-x; + vertical-align: top; + width: auto; +} + +/* Reservr styles */ .i-datefield-entrycalendar-01 { - background-color: red; + } .i-datefield-entrycalendar-02 { - background-color: red; + } .i-datefield-entrycalendar-03 { - background-color: red; + } .i-datefield-entrycalendar-04 { - background-color: red; + } .i-datefield-entrycalendar-05 { - background-color: red; + } .i-datefield-entrycalendar-06 { - background-color: red; + } .i-datefield-entrycalendar-07 { - background-color: red; + } .i-datefield-entrycalendar-08 { - background-color: red; + } .i-datefield-entrycalendar-09 { - background-color: red; + } .i-datefield-entrycalendar-10 { - background-color: red; + } .i-datefield-entrycalendar-11 { - background-color: red; + } .i-datefield-entrycalendar-12 { - background-color: red; + } .i-datefield-entrycalendar-13 { - background-color: red; + } .i-datefield-entrycalendar-14 { - background-color: red; + } .i-datefield-entrycalendar-15 { - background-color: red; + } .i-datefield-entrycalendar-16 { - background-color: red; + } .i-datefield-entrycalendar-17 { - background-color: red; + } .i-datefield-entrycalendar-18 { - background-color: red; + } .i-datefield-entrycalendar-19 { - background-color: red; + } .i-datefield-entrycalendar-20 { - background-color: red; + } .i-datefield-entrycalendar-21 { - background-color: red; + } .i-datefield-entrycalendar-22 { - background-color: red; + } .i-datefield-entrycalendar-23 { - background-color: red; + } .i-datefield-entrycalendar-24 { - background-color: red; + } .i-datefield-entrycalendar-25 { - background-color: red; + } .i-datefield-entrycalendar-26 { - background-color: red; + } .i-datefield-entrycalendar-27 { - background-color: red; + } .i-datefield-entrycalendar-28 { - background-color: red; + } .i-datefield-entrycalendar-29 { - background-color: red; + } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java index 098456ab72..e6a8770d24 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java @@ -108,8 +108,6 @@ public class ICalendar extends IDateField { hourTable.setHTML(i, 0, "" + hstr + ""); hourTable.getCellFormatter() .setStyleName(i, 0, CLASSNAME + "-time"); - hourTable.getCellFormatter().setWidth(i, 0, "55"); - } List entries = this.entrySource.getEntries(date, @@ -121,6 +119,7 @@ public class ICalendar extends IDateField { int hours = 24; if (!entry.isNotime()) { Date d = entry.getStart(); + // TODO consider month&year as well start = (d.getDate() < date.getDate() ? 0 : d.getHours()); d = entry.getEnd(); hours = (d.getDate() > date.getDate() ? 24 : d.getHours()) @@ -143,7 +142,22 @@ public class ICalendar extends IDateField { } Element el = this.hourTable.getFlexCellFormatter().getElement( start, col); - DOM.setElementProperty(el, "title", entry.getDescription()); + + String tooltip; + if (DateTimeService.isSameDay(entry.getStart(), entry.getEnd())) { + tooltip = (start < 10 ? "0" : "") + start + ":00"; + if (this.dts.isTwelveHourClock()) { + String ampm = (start < 12 ? "am" : "pm"); + tooltip = (start <= 12 ? start : start - 12) + ":00 " + ampm; + + } + tooltip += " (" + hours + "h) "; + tooltip += entry.getTitle() + "\n "; + } else { + tooltip = entry.getStringForDate(entry.getEnd()) + "\n "; + } + tooltip += "\"" + entry.getDescription() + "\""; + DOM.setElementProperty(el, "title", tooltip); currentCol++; } 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 81439c7293..792a996a32 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 @@ -75,42 +75,3 @@ background: #fff; } - - -.i-datefield-entrycalendar-hours { - height: 300px; - overflow: auto; -} -.i-datefield-entrycalendar-hours table { - width: 92%; -} - -.i-datefield-entrycalendar-row-even { - cursor: pointer; - background-color: #fefefe; -} -.i-datefield-entrycalendar-row-odd { - cursor: pointer; - background-color: #eeeeee; -} -.i-datefield-entrycalendar-row-selected { - color: #fff; - background-color: #1C3E6E; -} -td.i-datefield-entrycalendar-time { - padding-right: 2px; - text-align: right; - white-space: nowrap; -} -.i-datefield-entrycalendar-row-selected td span { - color: #fff; -} -.i-datefield-entrycalendar-entry { - background-color: #0074D9; - color: #fff; -} -.i-datefield-entrycalendar-entry span { - display: block; - overflow: hidden; - padding: 2px; -}