0009980: repeat print headers in month view
authorCornelius Weiß <mail@corneliusweiss.de>
Thu, 12 Jun 2014 08:38:25 +0000 (10:38 +0200)
committerPhilipp Schüle <p.schuele@metaways.de>
Fri, 13 Jun 2014 09:14:46 +0000 (11:14 +0200)
Change-Id: I5c5592b9dc97472afd6608c772d84f42706f3a96
Reviewed-on: http://gerrit.tine20.com/customers/759
Tested-by: Jenkins CI (http://ci.tine20.com/)
Reviewed-by: Philipp Schüle <p.schuele@metaways.de>
Tested-by: Philipp Schüle <p.schuele@metaways.de>
tine20/Calendar/css/print.css
tine20/Calendar/js/Printer/Base.js
tine20/Calendar/js/Printer/MonthView.js

index 7d0424d..e706f64 100644 (file)
@@ -37,6 +37,10 @@ table td {
        font-size: 20px;
 }
 
+.cal-print-daysview-day td {
+    vertical-align: top;
+}
+
 .cal-print-daysview-day-dayOfMonth {
     font-size: 20px;
     font-weight: bold;
@@ -79,8 +83,12 @@ table td {
     border-right: 0px;
 }
 
+.cal-print-daysview-day-summary {
+    word-break: break-all;
+}
+
 .cal-print-daycell {
-       vertical-align: top;
+    vertical-align: top;
     border: 0;
 }
 
@@ -95,6 +103,8 @@ table td {
        text-align: center;
        font-size: 12px;
        font-weight: bold;
+       background-color: #FFFFFF;
+       padding-top: 20px;
 }
 
 .cal-print-monthview .cal-print-daycell {
index 826d0b0..85cc20f 100644 (file)
@@ -79,7 +79,7 @@ Tine.Calendar.Printer.BaseRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
             dayOfMonth: dayStart.format('j'),
             weekDay: dayStart.format('l')
         });
-        return String.format('<table class="cal-print-daysview-day"><tr>{0}</tr>{1}</table>', dayHeader, dayBody);
+        return String.format('<table class="cal-print-daysview-day"><thead><tr>{0}</tr></thead><tbody>{1}</tbody></table>', dayHeader, dayBody);
     },
     
     splitDays: function(ds, startDate, numOfDays, returnData) {
index 46b3773..eb2e6c5 100644 (file)
@@ -1,6 +1,6 @@
 Tine.Calendar.Printer.MonthViewRenderer = Ext.extend(Tine.Calendar.Printer.BaseRenderer, {
     paperHeight: 155,
-    
+
     generateBody: function(view) {
         var daysHtml = this.splitDays(view.store, view.dateMesh[0], view.dateMesh.length),
             body = [];
@@ -10,11 +10,9 @@ Tine.Calendar.Printer.MonthViewRenderer = Ext.extend(Tine.Calendar.Printer.BaseR
             '@page {',
                 'size:landscape',
             '}',
+            '@media print {thead {display: table-header-group;}}',
         '</style>');
         
-        // title
-        body.push(this.generateTitle(view));
-        
         // day headers
         var dayNames = [];
         for(var i = 0; i < 7; i++){
@@ -22,13 +20,21 @@ Tine.Calendar.Printer.MonthViewRenderer = Ext.extend(Tine.Calendar.Printer.BaseR
             if(d > 6){
                 d = d-7;
             }
-            dayNames.push("<td class='cal-print-monthview-daycell'><span>", view.dayNames[d], "</span></td>");
+            dayNames.push("<th class='cal-print-monthview-daycell'><span>", view.dayNames[d], "</span></th>");
         }
         
-        // body
-        body.push(String.format('<br/><table class="cal-print-monthview"><tr>{0}</thead>{1}</tr>', dayNames.join("\n"), this.generateCalRows(daysHtml, 7, true)));
-   
+        body.push(
+        '<table class="cal-print-monthview">',
+            '<thead>',
+                '<tr><th colspan="7" class="cal-print-title">', this.getTitle(view), '</th></tr>',
+                '<tr>', dayNames.join("\n"), '</tr>',
+            '</thead>',
+            '<tbody>',
+                this.generateCalRows(daysHtml, 7, true),
+            '</tbody>');
+            
         return body.join("\n");
+
     },
     
     getTitle: function(view) {