]> source.dussan.org Git - vaadin-framework.git/commitdiff
Reservr look & feel mainly
authorMarc Englund <marc.englund@itmill.com>
Fri, 12 Oct 2007 13:44:30 +0000 (13:44 +0000)
committerMarc Englund <marc.englund@itmill.com>
Fri, 12 Oct 2007 13:44:30 +0000 (13:44 +0000)
svn changeset:2514/svn branch:trunk

WebContent/ITMILL/themes/reservr/reservr.jpg [new file with mode: 0644]
WebContent/ITMILL/themes/reservr/styles.css
WebContent/reservr.html
src/com/itmill/toolkit/demo/reservation/ReservationApplication.java
src/com/itmill/toolkit/demo/reservation/SampleDB.java
src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-bg.jpg [new file with mode: 0644]
src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-topleft.jpg [new file with mode: 0644]
src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg [new file with mode: 0644]
src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css
src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java
src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css

diff --git a/WebContent/ITMILL/themes/reservr/reservr.jpg b/WebContent/ITMILL/themes/reservr/reservr.jpg
new file mode 100644 (file)
index 0000000..5fc956a
Binary files /dev/null and b/WebContent/ITMILL/themes/reservr/reservr.jpg differ
index 569fcaf8c62281e834f278a804a540e2f7514b2d..22a777dca3789b4159713948fd86a4e1156759f2 100644 (file)
@@ -1,15 +1,48 @@
+/* Reservr styles */\r
+html, body {\r
+       background-color: #E9ECED;\r
+}\r
+#header {\r
+       font-family:"Trebuchet MS",geneva,helvetica,arial,tahoma,verdana,sans-serif;\r
+       padding: 10px;\r
+}\r
+#logo {\r
+       line-height: 33px;\r
+       color:#F14C1A;\r
+       font-size:22px;\r
+       letter-spacing:-0.03em;\r
+}\r
+#slogan {\r
+       color: #464F52;\r
+}\r
+\r
+/* Default widgetset overrides */\r
+textarea.i-textfield {\r
+       font-size: 13px;\r
+       width: 326px;\r
+       height: 110px;\r
+}\r
+button.link {\r
+       text-decoration: none;\r
+}\r
 button.important-link {\r
        border: 0px;\r
        text-align: left;\r
-       text-decoration: underline;\r
+       text-decoration: none;\r
        background: none;\r
        font-weight: bold;\r
 }\r
 button.selected-link {\r
        border: 0px;\r
        text-align: left;\r
-       text-decoration: underline;\r
+       text-decoration: none;\r
        background: #183C6B;\r
        font-weight: bold;\r
        color: white;\r
 }\r
+.i-orderedlayout {\r
+       margin:5px 5px;\r
+}\r
+.i-orderedlayout TD {\r
+       vertical-align: top;\r
+}
\ No newline at end of file
index ac1270fdf523fd62d79a29d6d01b48026c07d358..a5acb63cf1e4d87043ee383553563ab1d71b851d 100644 (file)
@@ -4,7 +4,7 @@
        <title>IT Mill Toolkit 5 Demo: Reservr</title>\r
        <script type="text/javascript">\r
                var itmtk = {\r
-                       appUri:'Reservr', pathInfo: '/'\r
+                       appUri:'/toolkit/Reservr', pathInfo: '/'\r
                };\r
        </script>\r
        <script src="http://maps.google.com/maps?file=api&amp;v=2" type="text/javascript"></script>\r
 </head>\r
 <body>\r
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>\r
+       <div id="header">\r
+               <img src="ITMILL/themes/reservr/reservr.jpg" align="top"/>\r
+               <span id="logo">Reservr Inc</span>\r
+               <span>&raquo; Representational cars on-the-road</span>\r
+       </div>\r
        <div id="itmtk-ajax-window"></div>      \r
 </body>\r
 </html>\r
index b5b59c8ba6cab640038958cc027c432cea6fe95f..3c7ec1a0318a8cf0e308e84a0363c4c31d094896 100644 (file)
@@ -30,7 +30,8 @@ public class ReservationApplication extends Application {
        ResourceSelectorPanel resourcePanel;\r
 \r
        private CalendarField reservedFrom;\r
-       private static final long DEFAULT_GAP_MILLIS = 3600000; // one hour\r
+       private static final long DEFAULT_GAP_MILLIS = 3600000; // (almost) one\r
+       // hour\r
        private long currentGapMillis = DEFAULT_GAP_MILLIS; // current length of\r
        // reservation\r
        private CalendarField reservedTo;\r
@@ -57,8 +58,6 @@ public class ReservationApplication extends Application {
                TabSheet mainTabs = new TabSheet();\r
                mainWindow.addComponent(mainTabs);\r
 \r
-               mainWindow.addComponent(new Button("close", this, "close"));\r
-\r
                OrderedLayout reservationTab = new OrderedLayout();\r
                mainTabs.addTab(reservationTab, "Make reservation", null);\r
 \r
@@ -79,7 +78,7 @@ public class ReservationApplication extends Application {
                resourceName.setCaption("Choose resource");\r
                infoLayout.addComponent(resourceName);\r
                description = new TextField();\r
-               description.setColumns(55);\r
+               description.setColumns(47);\r
                description.setRows(5);\r
                infoLayout.addComponent(description);\r
                reservationButton = new Button("Make reservation", this,\r
@@ -89,7 +88,7 @@ public class ReservationApplication extends Application {
                infoLayout.addComponent(statusLabel);\r
 \r
                map = new GoogleMap();\r
-               map.setWidth(360);\r
+               map.setWidth(330);\r
                map.setHeight(270);\r
                map.setItemMarkerHtmlPropertyId(SampleDB.Resource.PROPERTY_ID_NAME);\r
                map.setItemMarkerXPropertyId(SampleDB.Resource.PROPERTY_ID_LOCATIONX);\r
@@ -98,7 +97,11 @@ public class ReservationApplication extends Application {
                infoLayout.addComponent(map);\r
 \r
                Calendar from = Calendar.getInstance();\r
-               reservedFrom = new CalendarField();\r
+               from.add(Calendar.HOUR, 1);\r
+               from.set(Calendar.MINUTE, 0);\r
+               from.set(Calendar.SECOND, 0);\r
+               from.set(Calendar.MILLISECOND, 0);\r
+               reservedFrom = new CalendarField("From »");\r
                reservedFrom.setMinimumDate(from.getTime());\r
                reservedFrom.setValue(from.getTime());\r
                reservedFrom.setImmediate(true);\r
@@ -106,9 +109,10 @@ public class ReservationApplication extends Application {
                reservationPanel.addComponent(reservedFrom);\r
 \r
                Calendar to = Calendar.getInstance();\r
-               to.add(Calendar.MILLISECOND, (int) currentGapMillis);\r
-               reservedTo = new CalendarField();\r
-               reservedTo.setMinimumDate(from.getTime());\r
+               to.setTime(from.getTime());\r
+               to.add(Calendar.MILLISECOND, (int) DEFAULT_GAP_MILLIS);\r
+               reservedTo = new CalendarField("» To");\r
+               reservedTo.setMinimumDate(to.getTime());\r
                reservedTo.setValue(to.getTime());\r
                reservedTo.setImmediate(true);\r
                initCalendarFieldPropertyIds(reservedTo);\r
@@ -125,7 +129,8 @@ public class ReservationApplication extends Application {
                                } else {\r
                                        reservedTo.setEnabled(true);\r
                                }\r
-                               reservedTo.setMinimumDate(fd);\r
+                               reservedTo.setMinimumDate(new Date(fd.getTime()\r
+                                               + DEFAULT_GAP_MILLIS));\r
                                Calendar to = Calendar.getInstance();\r
                                to.setTime(fd);\r
                                to.add(Calendar.MILLISECOND, (int) currentGapMillis);\r
@@ -156,6 +161,8 @@ public class ReservationApplication extends Application {
                initCalendarFieldPropertyIds(allCalendar);\r
                allLayout.addComponent(allCalendar);\r
                allTable = new Table();\r
+               allTable.setColumnCollapsingAllowed(true);\r
+               allTable.setColumnReorderingAllowed(true);\r
                allLayout.addComponent(allTable);\r
                mainTabs.addTab(allLayout, "All reservations", null);\r
                mainTabs.addListener(new TabSheet.SelectedTabChangeListener() {\r
@@ -212,8 +219,16 @@ public class ReservationApplication extends Application {
                refreshSelectedResources();\r
                Container allReservations = db.getReservations(null);\r
                allTable.setContainerDataSource(allReservations);\r
+               if (allReservations != null && allReservations.size() > 0) {\r
+                       allTable.setVisibleColumns(new Object[] {\r
+                                       SampleDB.Reservation.PROPERTY_ID_RESERVED_FROM,\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
                allCalendar.setContainerDataSource(allReservations);\r
-\r
        }\r
 \r
        private void refreshSelectedResources() {\r
@@ -236,15 +251,21 @@ public class ReservationApplication extends Application {
                        map.setZoomLevel(1);\r
 \r
                } else {\r
+                       // Display active resource name + desc\r
+                       String name = (String) resource.getItemProperty(\r
+                                       SampleDB.Resource.PROPERTY_ID_NAME).getValue();\r
+                       String desc = (String) resource.getItemProperty(\r
+                                       SampleDB.Resource.PROPERTY_ID_DESCRIPTION).getValue();\r
+                       resourceName.setCaption(name);\r
+                       resourceName.setValue(desc);\r
+                       // Put all resources on map (may be many if category was selected)\r
                        LinkedList srs = resourcePanel.getSelectedResources();\r
                        for (Iterator it = srs.iterator(); it.hasNext();) {\r
                                resource = (Item) it.next();\r
-                               String name = (String) resource.getItemProperty(\r
+                               name = (String) resource.getItemProperty(\r
                                                SampleDB.Resource.PROPERTY_ID_NAME).getValue();\r
-                               String desc = (String) resource.getItemProperty(\r
+                               desc = (String) resource.getItemProperty(\r
                                                SampleDB.Resource.PROPERTY_ID_DESCRIPTION).getValue();\r
-                               resourceName.setCaption(name);\r
-                               resourceName.setValue(desc);\r
                                Double x = (Double) resource.getItemProperty(\r
                                                SampleDB.Resource.PROPERTY_ID_LOCATIONX).getValue();\r
                                Double y = (Double) resource.getItemProperty(\r
@@ -256,7 +277,7 @@ public class ReservationApplication extends Application {
                                }\r
 \r
                        }\r
-                       map.setZoomLevel((srs.size() == 1 ? 16 : 9));\r
+                       map.setZoomLevel((srs.size() == 1 ? 14 : 9));\r
                        reservationButton.setEnabled(true);\r
                }\r
 \r
index ff7c0ae18b965e49ac4f85a2ac9f181349845629..3c617323ddd84594ecd82db77db5e670d0d1170f 100644 (file)
@@ -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 (file)
index 0000000..a6aeeca
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 (file)
index 0000000..53da0b1
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 (file)
index 0000000..44d65c4
Binary files /dev/null and b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg differ
index b0e3510e921fa4e951ea80482e30cf5ba3d27161..bde033b10358eabffe6384490426cac8897f5231 100644 (file)
 @import "googlemap/css/googlemap.css";\r
 \r
+/* Entrycalendar styles */\r
+.i-datefield-entrycalendar-hours {\r
+       height: auto;\r
+       xoverflow: auto;\r
+}\r
+.i-datefield-entrycalendar-hours table {\r
+       width: auto;\r
+}\r
+.i-datefield-entrycalendar-hours table tr {\r
+       height: 1em;\r
+}\r
+.i-datefield-entrycalendar-row-even {\r
+       cursor: pointer;\r
+       background-color: #fefefe;\r
+       height: 1em;\r
+}\r
+.i-datefield-entrycalendar-row-odd {\r
+       cursor: pointer;\r
+       background-color: #eeeeee;\r
+       height: 1em;\r
+}\r
+.i-datefield-entrycalendar-row-selected {\r
+       color: #fff;\r
+       background-color: #1C3E6E;\r
+}\r
+td.i-datefield-entrycalendar-time {\r
+       padding-right: 2px;\r
+       white-space: nowrap;\r
+       float: left;\r
+}\r
+td.i-datefield-entrycalendar-time span {\r
+       width: 55px;\r
+       text-align: right;\r
+       display: block;\r
+}\r
+td.i-datefield-entrycalendar-entry span {\r
+       display: block;\r
+       overflow: hidden;\r
+       padding: 2px;\r
+       color: #fff;\r
+       background-image: url('img/entry-topleft.jpg');\r
+       background-repeat: no-repeat;\r
+       background-position: 0px 0px;\r
+}\r
+.i-datefield-calendarpanel td.i-datefield-entrycalendar-entry {\r
+       background-color: #F24C1A;\r
+       color: #fff;\r
+       background-image: url('img/entry-bg.jpg');\r
+       background-repeat: repeat-x;\r
+       vertical-align: top;\r
+       width: auto;\r
+}\r
+\r
+/* Reservr styles */\r
 .i-datefield-entrycalendar-01 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-02 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-03 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-04 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-05 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-06 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-07 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-08 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-09 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-10 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-11 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-12 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-13 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-14 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-15 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-16 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-17 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-18 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-19 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-20 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-21 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-22 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-23 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-24 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-25 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-26 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-27 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-28 {\r
-       background-color: red;\r
+       \r
 }\r
 .i-datefield-entrycalendar-29 {\r
-       background-color: red;\r
+       \r
 }\r
 \r
index 098456ab72f0365c0c21b42307a5b5d5b279d27d..e6a8770d2430e086e235ff0a563392c5a848f428 100644 (file)
@@ -108,8 +108,6 @@ public class ICalendar extends IDateField {
                        hourTable.setHTML(i, 0, "<span>" + hstr + "</span>");\r
                        hourTable.getCellFormatter()\r
                                        .setStyleName(i, 0, CLASSNAME + "-time");\r
-                       hourTable.getCellFormatter().setWidth(i, 0, "55");\r
-\r
                }\r
 \r
                List entries = this.entrySource.getEntries(date,\r
@@ -121,6 +119,7 @@ public class ICalendar extends IDateField {
                        int hours = 24;\r
                        if (!entry.isNotime()) {\r
                                Date d = entry.getStart();\r
+                               // TODO consider month&year as well\r
                                start = (d.getDate() < date.getDate() ? 0 : d.getHours());\r
                                d = entry.getEnd();\r
                                hours = (d.getDate() > date.getDate() ? 24 : d.getHours())\r
@@ -143,7 +142,22 @@ public class ICalendar extends IDateField {
                        }\r
                        Element el = this.hourTable.getFlexCellFormatter().getElement(\r
                                        start, col);\r
-                       DOM.setElementProperty(el, "title", entry.getDescription());\r
+                       \r
+                       String tooltip;\r
+                       if (DateTimeService.isSameDay(entry.getStart(), entry.getEnd())) {\r
+                               tooltip = (start < 10 ? "0" : "") + start + ":00";\r
+                               if (this.dts.isTwelveHourClock()) {\r
+                                       String ampm = (start < 12 ? "am" : "pm");\r
+                                       tooltip = (start <= 12 ? start : start - 12) + ":00 " + ampm;\r
+                                       \r
+                               }\r
+                               tooltip += " (" + hours + "h) ";\r
+                               tooltip += entry.getTitle() + "\n ";\r
+                       } else {\r
+                               tooltip = entry.getStringForDate(entry.getEnd()) + "\n ";\r
+                       }\r
+                       tooltip += "\"" + entry.getDescription() + "\"";\r
+                       DOM.setElementProperty(el, "title", tooltip);\r
 \r
                        currentCol++;\r
                }\r
index 81439c7293d2e1f2ff314b334507d58f1b6e1a6b..792a996a32d1078bc2f03b1a4d18e60a2b6924ee 100644 (file)
        background: #fff;\r
 }\r
 \r
-\r
-\r
-.i-datefield-entrycalendar-hours {\r
-       height: 300px;\r
-       overflow: auto;\r
-}\r
-.i-datefield-entrycalendar-hours table {\r
-       width: 92%;\r
-}\r
-\r
-.i-datefield-entrycalendar-row-even {\r
-       cursor: pointer;\r
-       background-color: #fefefe;\r
-}\r
-.i-datefield-entrycalendar-row-odd {\r
-       cursor: pointer;\r
-       background-color: #eeeeee;\r
-}\r
-.i-datefield-entrycalendar-row-selected {\r
-       color: #fff;\r
-       background-color: #1C3E6E;\r
-}\r
-td.i-datefield-entrycalendar-time {\r
-       padding-right: 2px;\r
-       text-align: right;\r
-       white-space: nowrap;\r
-}\r
-.i-datefield-entrycalendar-row-selected td span {\r
-       color: #fff;\r
-}\r
-.i-datefield-entrycalendar-entry {\r
-       background-color: #0074D9;\r
-       color: #fff;\r
-}\r
-.i-datefield-entrycalendar-entry span {\r
-       display: block;\r
-       overflow: hidden;\r
-       padding: 2px;\r
-}\r