From 79cb9f921d1fdb063bc3388e3e83c075fe7fcc3f Mon Sep 17 00:00:00 2001
From: Jan Schneider <jan@horde.org>
Date: Thu, 27 Aug 2009 19:18:06 +0200
Subject: [PATCH] Various design fixes and improvements.

---
 kronolith/js/kronolith.js            |  6 ++---
 kronolith/templates/index/agenda.inc |  4 ++--
 kronolith/templates/index/day.inc    |  6 +++++
 kronolith/templates/index/edit.inc   | 43 +++++++++++++++++-------------------
 kronolith/templates/index/index.inc  | 18 +++++----------
 kronolith/templates/index/tasks.inc  |  2 +-
 kronolith/templates/index/year.inc   |  4 ++--
 kronolith/themes/screen.css          | 22 ++++++++++++------
 8 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/kronolith/js/kronolith.js b/kronolith/js/kronolith.js
index 230d78dd7..5c5e7086c 100644
--- a/kronolith/js/kronolith.js
+++ b/kronolith/js/kronolith.js
@@ -397,9 +397,9 @@ KronolithCore = {
             break;
 
         case 'year':
-            var viewBody = $('kronolithViewYear'), month;
+            var month;
 
-            viewBody.down('caption span').innerHTML = this.setTitle(date.toString('yyyy'));
+            $('kronolithYearDate').innerHTML = this.setTitle(date.toString('yyyy'));
 
             // Build new calendar view.
             for (month = 0; month < 12; month++) {
@@ -415,7 +415,7 @@ KronolithCore = {
             if (view == 'agenda') {
                 var dates = this.viewDates(date, view),
                     day = dates[0].clone();
-                $('kronolithViewAgenda').down('caption span').innerHTML = this.setTitle(Kronolith.text.agenda + ' ' + dates[0].toString('d') + ' - ' + dates[1].toString('d'));
+                $('kronolithAgendaDate').innerHTML = this.setTitle(Kronolith.text.agenda + ' ' + dates[0].toString('d') + ' - ' + dates[1].toString('d'));
             } else {
                 $('kronolithViewAgenda').down('caption span').update(this.setTitle(Kronolith.text.searching.interpolate({ 'term': data })));
             }
diff --git a/kronolith/templates/index/agenda.inc b/kronolith/templates/index/agenda.inc
index 36db85b03..0d3ef3f67 100644
--- a/kronolith/templates/index/agenda.inc
+++ b/kronolith/templates/index/agenda.inc
@@ -1,8 +1,8 @@
 <div id="kronolithViewAgenda" class="kronolithView" style="display:none">
 <table class="kronolithView">
   <caption>
-    <div id="kronolithLoadingagenda" class="kronolithLoading"></div>
-    <span></span>
+    <span id="kronolithLoadingagenda" class="kronolithLoading"></span>
+    <span id="kronolithAgendaDate"></span>
     <span class="kronolithNavigation">
       <a class="kronolithGotoToday"><?php echo _("Today") ?></a>
       <a title="<?php echo _("Previous") ?>" class="kronolithPrev">&lt;</a>
diff --git a/kronolith/templates/index/day.inc b/kronolith/templates/index/day.inc
index 5da074e63..c5d9bc1b4 100644
--- a/kronolith/templates/index/day.inc
+++ b/kronolith/templates/index/day.inc
@@ -10,6 +10,12 @@
       <a class="kronolithNext" title="<?php echo _("Next") ?>">&gt;</a>
     </span>
   </caption>
+  <thead class="kronolithViewHead">
+    <tr>
+      <td class="kronolithFirstCol">&nbsp;</td>
+      <td class="kronolithCol"><span><?php echo _("Events for this day") ?></span></td>
+    </tr>
+  </thead>
   <tbody id="kronolithViewDayBody" class="kronolithViewBody">
     <tr class="kronolithRow kronolithAllDay">
       <td class="kronolithFirstCol"><?php echo _("All day") ?></td>
diff --git a/kronolith/templates/index/edit.inc b/kronolith/templates/index/edit.inc
index 6ebea73bc..431200315 100644
--- a/kronolith/templates/index/edit.inc
+++ b/kronolith/templates/index/edit.inc
@@ -2,46 +2,43 @@
 <form id="kronolithEventForm">
 <input id="kronolithEventCalendar" type="hidden" name="cal" />
 <input id="kronolithEventId" type="hidden" name="id" />
+
 <div>
-  <label for="kronolithEventTitle"><?php echo _("Title") ?></label><br />
+  <label for="kronolithEventTitle"><?php echo _("Title") ?>:</label><br />
   <input type="text" name="title" id="kronolithEventTitle" class="kronolithLongField" />
 </div>
 
-<table cellspacing="2" cellpadding="0" border="0"><tbody>
-  <tr>
-    <td class="rightAlign">
-      <label for="kronolithEventLocation"><?php echo _("Location") ?></label><br />
-      <small><a href="#"><?php echo _("Geolocation") ?></a></small>
-    </td>
-    <td><input type="text" name="location" id="kronolithEventLocation" class="kronolithLongField" /></td>
-  </tr>
+<div>
+  <label for="kronolithEventLocation"><?php echo _("Location") ?>:</label><br />
+  <input type="text" name="location" id="kronolithEventLocation" size="35" />
+  &middot; <span class="kronolithEventGeo"><a href="#"><?php echo _("Find in Maps") ?></a></span>
+</div>
 
+<table cellspacing="2" cellpadding="0" border="0">
+<tbody>
   <tr>
-    <td class="rightAlign"><label for="kronolithEventAllday"><?php echo _("All-day") ?></label></td>
-    <td><input type="checkbox" name="whole_day" id="kronolithEventAllday" /></td>
+    <td class="rightAlign"><label for="kronolithEventAllday"><?php echo _("All-day") ?>:</label></td>
+    <td><label><input type="checkbox" name="whole_day" id="kronolithEventAllday" /> <?php echo _("all-day event") ?></label></td>
   </tr>
 
   <tr>
-    <td class="rightAlign"><label for="kronolithEventStartDate"><?php echo _("From") ?></label></td>
+    <td class="rightAlign"><label for="kronolithEventStartDate"><?php echo _("From") ?>:</label></td>
     <td>
-      <input type="text" name="start_date" id="kronolithEventStartDate" size="9" class="kronolithDatePicker" />
-      <?php echo _("at") ?>
-      <input type="text" name="start_time" id="kronolithEventStartTime" size="6" />
+      <input type="text" name="start_date" id="kronolithEventStartDate" size="10" class="kronolithDatePicker" />
+      <label><?php echo _("at") ?> <input type="text" name="start_time" id="kronolithEventStartTime" size="8" /></label>
     </td>
   </tr>
 
   <tr>
-    <td class="rightAlign">
-      <label for="id_to"><?php echo _("To") ?></label></td>
+    <td class="rightAlign"><label for="kronolithEventEndDate"><?php echo _("To") ?>:</label></td>
     <td>
-      <input type="text" name="end_date" id="kronolithEventEndDate" size="9" class="kronolithDatePicker" />
-      <?php echo _("at") ?>
-      <input type="text" name="end_time" id="kronolithEventEndTime" size="6" />
+      <input type="text" name="end_date" id="kronolithEventEndDate" size="10" class="kronolithDatePicker" />
+      <label><?php echo _("at") ?> <input type="text" name="end_time" id="kronolithEventEndTime" size="8" /></label>
     </td>
   </tr>
 
   <tr>
-    <td class="rightAlign"><label for="kronolithEventRecurrence"><?php echo _("Repeat") ?></label></td>
+    <td class="rightAlign"><label for="kronolithEventRecurrence"><?php echo _("Repeat") ?>:</label></td>
     <td><select name="recur" id="kronolithEventRecurrence" class="kronolithLongField">
       <option value="0"><?php echo _("no repeat") ?></option>
       <option value="1"><?php echo _("Every day") ?></option>
@@ -55,12 +52,12 @@
 </tbody></table>
 
 <div>
-  <label for="id_url"><?php echo _("URL") ?></label><br />
+  <label for="kronolithEventUrl"><?php echo _("URL") ?>:</label><br />
   <input type="text" name="url" id="kronolithEventUrl" class="kronolithLongField" />
 </div>
 
 <div>
-  <label for="id_tags"><?php echo _("Tags") ?></label><br />
+  <label for="kronolithEventTags"><?php echo _("Tags and Keywords") ?>:</label><br />
   <input id="kronolithEventTags" name="tags" />
   <span id="kronolithEventTags_loading_img" style="display:none;"><?php echo Horde::img('loading.gif', _("Loading...")) ?></span>
 </div>
diff --git a/kronolith/templates/index/index.inc b/kronolith/templates/index/index.inc
index 5aa2087e7..987447564 100644
--- a/kronolith/templates/index/index.inc
+++ b/kronolith/templates/index/index.inc
@@ -4,8 +4,8 @@
 
   <!-- ini user zone -->
   <div id="kronolithUser">
-   <?php echo $identity->getName(); if ($logout_link) echo ' <span class="kronolithSeparator">&middot;</span> ' . $logout_link ?><br />
-   <a href="#"><?php echo _("Options") ?></a><?php if ($help_link) echo ' <span class="kronolithSeparator">&middot;</span> ' . $help_link ?><br />
+   <a href="#"><?php echo _("Options") ?></a><?php if ($help_link) echo ' <span class="kronolithSeparator">&middot;</span> ' . $help_link; if ($logout_link) echo ' <span class="kronolithSeparator">&middot;</span> ' . $logout_link ?><br />
+   <span class="kronolithUserName"><?php echo $identity->getName(); ?></span><br />
   </div>
   <!-- end user zone -->
 </div>
@@ -13,17 +13,9 @@
 
 <!-- ini bar -->
 <div id="kronolithBar">
-  <form>
-    <div class="kronolithDateChoice">
-      <div id="kronolithDateChoiceDay"><?php echo $today->format('l, j') ?></div>
+    <div class="kronolithDateChoice" title="<?php echo _("Today") ?>">
+      <div><?php echo $today->format('l, j F Y') ?></div>
     </div>
-    <div class="kronolithDateChoice">
-      <div id="kronolithDateChoiceMonth"><?php echo $today->format('F') ?></div>
-    </div>
-    <div class="kronolithDateChoice">
-      <div id="kronolithDateChoiceYear"><?php echo $today->format('Y') ?></div>
-    </div>
-  </form>
 
   <div id="kronolithNav">
     <a id="kronolithNavDay"><?php echo _("Day") ?></a>
@@ -98,7 +90,7 @@
   </div>
 
   <h3 class="search">
-    <a href="#" class="kronolithAdd"><?php echo _("Advanced") ?></a>
+    <a href="#" title="<?php echo _("Advanced") ?>" class="kronolithAdd">+</a>
     <span><?php echo _("Search") ?></span>
   </h3>
 
diff --git a/kronolith/templates/index/tasks.inc b/kronolith/templates/index/tasks.inc
index 975b9f942..715ccb237 100644
--- a/kronolith/templates/index/tasks.inc
+++ b/kronolith/templates/index/tasks.inc
@@ -1,7 +1,7 @@
 <div id="kronolithViewTasks" class="kronolithView kronolithViewTasks" style="display:none">
 <table class="kronolithView kronolithViewTasks">
   <caption>
-    <div id="kronolithLoadingtasks" class="kronolithLoading"></div>
+    <span id="kronolithLoadingtasks" class="kronolithLoading"></span>
     <span><?php echo _("Tasks") ?></span>
   </caption>
   <tbody id="kronolithViewTasksBody" class="kronolithViewBody">
diff --git a/kronolith/templates/index/year.inc b/kronolith/templates/index/year.inc
index e7e920460..35b0c65e7 100644
--- a/kronolith/templates/index/year.inc
+++ b/kronolith/templates/index/year.inc
@@ -1,8 +1,8 @@
 <div id="kronolithViewYear" class="kronolithView kronolithViewYear" style="display:none">
 <table class="kronolithView kronolithViewYear">
   <caption>
-    <div id="kronolithLoadingyear" class="kronolithLoading"></div>
-    <span></span>
+    <span id="kronolithLoadingyear" class="kronolithLoading"></span>
+    <span id="kronolithYearDate"></span>
     <span class="kronolithNavigation">
       <a class="kronolithGotoToday"><?php echo _("Today") ?></a>
       <a title="<?php echo _("Previous") ?>" class="kronolithPrev">&lt;</a>
diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index 535ffbb23..7e61a8947 100644
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -355,14 +355,14 @@ body.kronolithAjax {
     position: absolute;
     left: 0;
 }
-#kronolithLoadingweek, #kronolithLoadingmonth {
+#kronolithLoadingday, #kronolithLoadingweek, #kronolithLoadingmonth {
     top: 24px;
 }
 #kronolithLoadingtasks, #kronolithLoadingagenda {
+    display: inline-block;
     position: relative;
-    float: left;
-    top: -2px;
-    margin-right: 2px;
+    top: -3px;
+    vertical-align: middle;
 }
 #kronolithLoading {
     background: transparent url("graphics/loading.gif") no-repeat center;
@@ -378,7 +378,7 @@ body.kronolithAjax {
     float: right;
     margin-top: 8px;
     margin-right: 10px;
-    font-size: 70%;
+    text-align: right;
 }
 
 /* Main area */
@@ -401,6 +401,8 @@ body.kronolithAjax {
     top: 34px;
     margin-bottom: 20px;
     overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 #kronolithMenuBottom {
     position: absolute;
@@ -415,6 +417,7 @@ body.kronolithAjax {
     font-size: 100%;
     font-weight: bold;
     border-bottom: 1px #000 dotted;
+    cursor: default;
 }
 #kronolithMenu h3#kronolithCalendarsFirst {
     margin-top: 0;
@@ -431,7 +434,7 @@ body.kronolithAjax {
     margin-bottom: 15px;
 }
 #kronolithMenu div.kronolithCalendars div {
-    margin-bottom: 5px;
+    margin-bottom: 2px;
     padding: 2px 2px 2px 20px;
     background: url("graphics/checkbox_off.png") 2px center no-repeat;
     cursor: pointer;
@@ -527,6 +530,7 @@ span#kronolithQuickEvent {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     font-weight: bold;
+    cursor: pointer;
 }
 #kronolithBar .kronolithDateChoice div {
     padding: 0 10px;
@@ -882,7 +886,11 @@ div.kronolithView div.kronolithViewBody div.kronolithRow {
 /* Main view year */
 #kronolithViewYear .kronolithMinical {
     float: left;
-    margin: 2px 15px 13px 20px;
+    margin: 0 6px 0 4px;
+    height: 170px;
+}
+#kronolithViewYear .kronolithMinical caption {
+    margin-left: 22px;
 }
 .kronolithHasEvents {
     font-weight: bold;
-- 
2.11.0