Turn views into tables. Start with moth view.

diff --git a/kronolith/js/src/kronolith.js b/kronolith/js/src/kronolith.js
index 51729a5..a5b3fdd 100644 (file)
--- a/kronolith/js/src/kronolith.js
+++ b/kronolith/js/src/kronolith.js
@@ -307,6 +307,7 @@ KronolithCore = {
 
                 this.updateView(date, loc);
                 if ($('kronolithView' + locCap)) {
+                    $('kronolithViewHead').appear();
                     $('kronolithView' + locCap).appear();
                 }
                 this.updateMinical(date, loc);
@@ -348,19 +349,25 @@ KronolithCore = {
             break;
 
         case 'month':
-            var body = $('kronolithViewMonth').down('.kronolithViewBody'),
+            var tbody = $('kronolithViewMonth').down('.kronolithViewBody'),
                 dates = this.viewDates(date, view),
-                day = dates[0].clone();
+                day = dates[0].clone(), rows = 0, row;
 
             // Remove old rows. Maybe we should only rebuild the calendars if
             // necessary.
-            body.childElements().invoke('remove');
+            tbody.childElements().each(function(row) {
+                if (row.identify() != 'kronolithRowTemplate') {
+                    row.remove();
+                }
+            });
 
             // Build new calendar view.
             while (day.compareTo(dates[1]) < 1) {
-                var row = body.insert(this.createWeekRow(day, date.getMonth()).show());
+                row = tbody.insert(this.createWeekRow(day, date.getMonth()).show());
                 day.next().week();
+                rows++;
             }
+            this._equalRowHeights(tbody);
 
             // Load events.
             this._loadEvents(dates[0], dates[1], this._loadEventsCallback.bind(this), view);
@@ -381,25 +388,32 @@ KronolithCore = {
      */
     createWeekRow: function(date, month)
     {
+        var monday = date.clone(), day = date.clone(),
+            today = new Date().dateString(),
+            row, cell, dateString;
+
         // Find monday of the week, to determine the week number.
-        var monday = date.clone(), day = date.clone();
         if (monday.getDay() != 1) {
             monday.moveToDayOfWeek(1, 1);
         }
 
         // Create a copy of the row template.
-        var row = $('kronolithRowTemplate').cloneNode(true);
+        row = $('kronolithRowTemplate').cloneNode(true);
         row.removeAttribute('id');
 
         // Fill week number and day cells.
-        var cell = row.down().setText(monday.getWeek()).next();
+        cell = row.down().setText(monday.getWeek()).next();
         while (cell) {
-            cell.id = 'kronolithMonthDay' + day.dateString();
-            cell.writeAttribute('date', day.dateString());
-            cell.removeClassName('kronolithOtherMonth');
+            dateString = day.dateString();
+            cell.id = 'kronolithMonthDay' + dateString;
+            cell.writeAttribute('date', dateString);
+            cell.removeClassName('kronolithOtherMonth').removeClassName('kronolithToday');
             if (typeof month != 'undefined' && day.getMonth() != month) {
                 cell.addClassName('kronolithOtherMonth');
             }
+            if (dateString == today) {
+                cell.addClassName('kronolithToday');
+            }
             new Drop(cell, { onDrop: function(drop) {
                 var el = DragDrop.Drags.drag.element;
                 if (drop == el.parentNode) {
@@ -419,6 +433,12 @@ KronolithCore = {
         return row;
     },
 
+    _equalRowHeights: function(tbody)
+    {
+        var children = tbody.childElements();
+        children.invoke('setStyle', { 'height': (100 / (children.size() - 1)) + '%' });
+    },
+
     /**
      * Rebuilds the mini calendar.
      *
@@ -1099,6 +1119,7 @@ KronolithCore = {
     // IE 6 width fixes (See Bug #6793)
     _resizeIE6: function()
     {
+        return;
         // One width to rule them all:
         // 20 label, 2 label border, 2 label margin, 16 scrollbar,
         // 7 cols, 2 col border, 2 col margin
@@ -1279,6 +1300,7 @@ Object.extend(Date.prototype, {
     {
         return this.toString('yyyyMMdd');
     }
+
 });
 
 /* Initialize global event handlers. */

diff --git a/kronolith/templates/index/month.inc b/kronolith/templates/index/month.inc
index 1d581a3..c277dcf 100644 (file)
--- a/kronolith/templates/index/month.inc
+++ b/kronolith/templates/index/month.inc
@@ -1,39 +1,39 @@
-<div id="kronolithViewMonth" class="kronolithView kronolithViewMonth" style="display:none">
-
-<div class="kronolithViewHead">
-  <div class="kronolithRow">
-    <div class="kronolithFirstCol">&nbsp;</div>
-    <?php for ($i = $prefs->getValue('week_start_monday'), $c = $i + 7; $i < $c; $i++): ?>
-    <div class="kronolithCol"><span><?php echo NLS::getLangInfo(constant('DAY_' . ($i % 7 + 1))) ?></span></div>
+<table id="kronolithViewHead" class="kronolithView" style="display:none">
+  <tr>
+    <td class="kronolithFirstCol">&nbsp;</td>
+    <?php for ($w = $prefs->getValue('week_start_monday'), $i = $w, $c = $i + 7; $i < $c; $i++): ?>
+    <td class="kronolithCol"><span><?php echo NLS::getLangInfo(constant('DAY_' . ($i % 7 + 1))) ?></span></td>
     <?php endfor; ?>
-  </div>
-</div>
-
-<div class="kronolithViewBody">
-</div>
-</div>
+  </tr>
+</table>
 
-<div id="kronolithRowTemplate" class="kronolithRow" style="display:none">
-  <div class="kronolithFirstCol"></div>
-  <div class="kronolithCol">
-    <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
-  </div>
-  <div class="kronolithCol">
-    <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
-  </div>
-  <div class="kronolithCol">
-    <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
-  </div>
-  <div class="kronolithCol">
-    <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
-  </div>
-  <div class="kronolithCol">
-    <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
-  </div>
-  <div class="kronolithCol">
-    <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
-  </div>
-  <div class="kronolithCol">
-    <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
-  </div>
-</div>
+<div id="kronolithViewMonthContainer">
+<table id="kronolithViewMonth" class="kronolithView kronolithViewMonth" style="display:none;">
+<tbody class="kronolithViewBody">
+  <tr id="kronolithRowTemplate" class="kronolithRow" style="display:none">
+    <td class="kronolithFirstCol"></td>
+    <td class="kronolithCol<?php if ($w == 6 || $w == 0) echo ' kronolithWeekend' ?>">
+      <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
+    </td>
+    <td class="kronolithCol<?php if ($w == 5 || $w == 6) echo ' kronolithWeekend' ?>">
+      <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
+    </td>
+    <td class="kronolithCol<?php if ($w == 4 || $w == 5) echo ' kronolithWeekend' ?>">
+      <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
+    </td>
+    <td class="kronolithCol<?php if ($w == 3 || $w == 4) echo ' kronolithWeekend' ?>">
+      <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
+    </td>
+    <td class="kronolithCol<?php if ($w == 2 || $w == 3) echo ' kronolithWeekend' ?>">
+      <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
+    </td>
+    <td class="kronolithCol<?php if ($w == 1 || $w == 2) echo ' kronolithWeekend' ?>">
+      <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
+    </td>
+    <td class="kronolithCol<?php if ($w == 0 || $w == 1) echo ' kronolithWeekend' ?>">
+      <div class="kronolithCorner"><div class="kronolithDay"></div><a class="kronolithAdd"><?php echo $img_blank ?></a></div>
+    </td>
+  </tr>
+</tbody>
+</table>
+</div>
\ No newline at end of file

diff --git a/kronolith/themes/ie7.css b/kronolith/themes/ie7.css
new file mode 100644 (file)
index 0000000..f8efec6
--- /dev/null
+++ b/kronolith/themes/ie7.css
@@ -0,0 +1,3 @@
+#kronolithViewMonth {
+    height: expression(kronolithViewMonthContainer.offsetHeight-12);
+}

diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index 8dc8e5b..f07b9fb 100644 (file)
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -487,13 +487,10 @@ body.kronolithAjax {
     position: absolute;
     z-index: 1000;
     background: transparent url("graphics/loading.gif") no-repeat center;
+    margin-top: 2px;
     padding: 2px;
     width: 16px;
-    height: 17px;
-    /* Take values from .kronolithView */
-    top: 50px;
-    left: 175px;
-    margin-top: 5px;
+    height: 16px;
     /* Take values from .kronolithRow */
     border: 1px #c0c0c0 solid;
 }
@@ -848,16 +845,16 @@ div#kronolithEventTopTags span:hover {
 }
 
 /* Main views */
-div.kronolithView {
+#kronolithBody {
     position: absolute;
-    top: 50px;
+    top: 45px;
     left: 175px;
     right: 10px;
     bottom: 10px;
-    display: block;
-    margin: 5px 0;
     overflow: hidden;
 }
+.kronolithView {
+}
 div.kronolithView div.kronolithRow div {
     width: 13%;
 }
@@ -874,6 +871,22 @@ div.kronolithRow div {
 div.kronolithRow div.kronolithFirstCol {
     width: 20px !important;
 }
+table.kronolithView {
+    width: 100%;
+    height: 100%;
+    table-layout: fixed;
+    border-spacing: 2px;
+    margin-left: -2px;
+}
+table.kronolithView td {
+    padding: 0;
+    border: 1px #c0c0c0 solid;
+    vertical-align: top;
+    overflow: hidden;
+}
+table.kronolithView td.kronolithFirstCol {
+    width: 20px;
+}
 
 /* Main view header row */
 div.kronolithView div.kronolithViewHead div.kronolithRow {
@@ -890,6 +903,18 @@ div.kronolithView div.kronolithViewHead div.kronolithRow div span {
 div.kronolithView div.kronolithViewHead div.kronolithRow div.kronolithFirstCol {
     border-color: transparent;
 }
+#kronolithViewHead {
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    font-weight: bold;
+}
+#kronolithViewHead span {
+    padding: 0 5px;
+}
+#kronolithViewHead .kronolithFirstCol {
+    border-color: transparent;
+}
 
 /* Main view body */
 div.kronolithView div.kronolithViewBody {
@@ -910,6 +935,13 @@ div.kronolithView div.kronolithViewBody div.kronolithRow {
 .kronolithViewMonth div.kronolithViewBody div.kronolithRow div {
     height: 86px;
 }
+#kronolithViewMonthContainer {
+    position: absolute;
+    top: 24px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
 
 /* Main view week */
 #kronolithViewWeek div.kronolithViewBody div.kronolithRow div {
@@ -1015,10 +1047,88 @@ div.kronolithView div.kronolithViewBody div.kronolithRow div div.kronolithMore {
 div.kronolithView div.kronolithViewBody div.kronolithRow div div.kronolithMore a {
     text-decoration: none;
 }
+.kronolithFirstCol {
+    font-weight: bold;
+    text-align: center;
+    cursor: pointer;
+}
+.kronolithNight {
+    background-color: #f4f4f4;
+}
+.kronolithCorner {
+    float: left;
+    margin: 0 2px 2px 0;
+    padding: 0;
+    width: auto;
+    height: auto;
+    font-size: 85%;
+    cursor: pointer;
+}
+.kronolithDay {
+    position: relative;
+    float: left;
+    display: inline;
+    width: 15px;
+    height: 15px;
+    line-height: 15px;
+    margin: 0 2px 2px 0;
+    padding: 0;
+    border-right: 1px solid #c0c0c0;
+    border-bottom: 1px solid #c0c0c0;
+    text-align: center;
+    vertical-align: middle;
+    font-weight: bold;
+}
+a.kronolithAdd {
+    display: inline;
+    width: 15px;
+    height: 15px;
+    line-height: 15px;
+    padding: 2px;
+    text-align: center;
+    background: transparent url("graphics/new_small_fade.png") 3px 5px no-repeat;
+}
+a.kronolithAdd:hover {
+    background-image: url("graphics/new_small.png");
+}
+.kronolithOtherMonth {
+    background: #f7f7f7;
+}
+.kronolithOtherMonth .kronolithDay {
+    border-color: transparent;
+    color: silver;
+}
+.kronolithToday {
+    background-color: #ebf3fc;
+    border-color: #808080;
+}
+.kronolithMore {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    width: 15px;
+    height: 15px;
+    background: white;
+    border-right: none;
+    border-bottom: none;
+    text-align: center;
+}
+/*
+.kronolithWeekend {
+    background: #ffc;
+}
+.kronolithOtherMonth {
+    background: #e7eeec;
+}
+table.kronolithView td.kronolithToday {
+    border: 2px solid #446;
+    background: #fff;
+}
+*/
 
 /* Events */
 div.kronolithView div.kronolithViewBody div.kronolithRow div .kronolithEvent, .kronolithEvent {
-    float: none;
     width: auto;
     height: 15px;
     line-height: 15px;
@@ -1078,6 +1188,9 @@ div.kronolithView .kronolithEvents .kronolithEvent .kronolithEventInfo {
     margin: 10px 0;
     padding: 5px;
 }
+.kronolithEvent.kronolithSelected {
+    height: auto;
+}
 
 /* To be removed */
 .kronolithEvents .kronolithEvent.width50 { width: 5% !important; }