diff options
| author | Marc Englund <marc.englund@itmill.com> | 2007-10-12 13:44:30 +0000 |
|---|---|---|
| committer | Marc Englund <marc.englund@itmill.com> | 2007-10-12 13:44:30 +0000 |
| commit | a40125254a66443e5878237a7791b94bd5140f48 (patch) | |
| tree | cc4537df9b39bd11807ccdcb0e89a539f922a990 | |
| parent | 16c170ca2e5a18e0e3692450e2fb42eac4f34553 (diff) | |
| download | vaadin-framework-a40125254a66443e5878237a7791b94bd5140f48.tar.gz vaadin-framework-a40125254a66443e5878237a7791b94bd5140f48.zip | |
Reservr look & feel mainly
svn changeset:2514/svn branch:trunk
| -rw-r--r-- | WebContent/ITMILL/themes/reservr/reservr.jpg | bin | 0 -> 1080 bytes | |||
| -rw-r--r-- | WebContent/ITMILL/themes/reservr/styles.css | 37 | ||||
| -rw-r--r-- | WebContent/reservr.html | 7 | ||||
| -rw-r--r-- | src/com/itmill/toolkit/demo/reservation/ReservationApplication.java | 53 | ||||
| -rw-r--r-- | src/com/itmill/toolkit/demo/reservation/SampleDB.java | 34 | ||||
| -rw-r--r-- | src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-bg.jpg | bin | 0 -> 357 bytes | |||
| -rw-r--r-- | src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-topleft.jpg | bin | 0 -> 687 bytes | |||
| -rw-r--r-- | src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg | bin | 0 -> 437 bytes | |||
| -rw-r--r-- | src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css | 112 | ||||
| -rw-r--r-- | src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java | 20 | ||||
| -rw-r--r-- | src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css | 39 |
11 files changed, 181 insertions, 121 deletions
diff --git a/WebContent/ITMILL/themes/reservr/reservr.jpg b/WebContent/ITMILL/themes/reservr/reservr.jpg Binary files differnew file mode 100644 index 0000000000..5fc956a372 --- /dev/null +++ b/WebContent/ITMILL/themes/reservr/reservr.jpg 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 @@ <title>IT Mill Toolkit 5 Demo: Reservr</title>
<script type="text/javascript">
var itmtk = {
- appUri:'Reservr', pathInfo: '/'
+ appUri:'/toolkit/Reservr', pathInfo: '/'
};
</script>
<script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript"></script>
@@ -13,6 +13,11 @@ </head>
<body>
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
+ <div id="header">
+ <img src="ITMILL/themes/reservr/reservr.jpg" align="top"/>
+ <span id="logo">Reservr Inc</span>
+ <span>» Representational cars on-the-road</span>
+ </div>
<div id="itmtk-ajax-window"></div>
</body>
</html>
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 Binary files differnew file mode 100644 index 0000000000..a6aeecaf70 --- /dev/null +++ b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-bg.jpg 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 Binary files differnew file mode 100644 index 0000000000..53da0b13c0 --- /dev/null +++ b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-topleft.jpg 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 Binary files differnew file mode 100644 index 0000000000..44d65c4dd7 --- /dev/null +++ b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg 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, "<span>" + hstr + "</span>");
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;
-}
|
