From 50314caa53bee1a220f73cd22bebb3a9b3658943 Mon Sep 17 00:00:00 2001
From: Jan Schneider <jan@horde.org>
Date: Thu, 21 May 2009 17:56:10 +0200
Subject: [PATCH] Use separate spinners for each view, to allow nicer
 positioning.

---
 kronolith/js/src/kronolith.js        |  1 +
 kronolith/templates/index/agenda.inc |  1 +
 kronolith/templates/index/day.inc    |  1 +
 kronolith/templates/index/month.inc  |  2 +-
 kronolith/templates/index/tasks.inc  |  1 +
 kronolith/templates/index/week.inc   |  2 +-
 kronolith/templates/index/year.inc   |  1 +
 kronolith/themes/screen.css          | 22 ++++++++++++++++------
 8 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/kronolith/js/src/kronolith.js b/kronolith/js/src/kronolith.js
index c14b09154..65fdb239d 100644
--- a/kronolith/js/src/kronolith.js
+++ b/kronolith/js/src/kronolith.js
@@ -215,6 +215,7 @@ KronolithCore = {
                     this.viewLoading = true;
                     $('kronolithView' + locCap).appear({ 'queue': 'end', 'afterFinish': function() { this.viewLoading = false; }.bind(this) });
                 }
+                $('kronolithLoading' + loc).insert($('kronolithLoading').remove());
                 this.updateMinical(date, loc);
                 this.date = date;
 
diff --git a/kronolith/templates/index/agenda.inc b/kronolith/templates/index/agenda.inc
index b94e12bc3..b47778e8d 100644
--- a/kronolith/templates/index/agenda.inc
+++ b/kronolith/templates/index/agenda.inc
@@ -1,6 +1,7 @@
 <div id="kronolithViewAgenda" class="kronolithView kronolithViewAgenda" style="display:none">
 <table class="kronolithView kronolithViewAgenda">
   <caption>
+    <div id="kronolithLoadingagenda" class="kronolithLoading"></div>
     <span><?php echo _("Agenda") ?></span>
     <span class="kronolithNavigation">
       <a class="kronolithGotoToday"><?php echo _("Today") ?></a>
diff --git a/kronolith/templates/index/day.inc b/kronolith/templates/index/day.inc
index c3ee0a77e..5da074e63 100644
--- a/kronolith/templates/index/day.inc
+++ b/kronolith/templates/index/day.inc
@@ -1,4 +1,5 @@
 <div id="kronolithViewDay" class="kronolithView kronolithViewDay" style="display:none">
+<div id="kronolithLoadingday" class="kronolithLoading"></div>
 <div id="kronolithEventsDay"></div>
 <table class="kronolithView kronolithViewDay">
   <caption>
diff --git a/kronolith/templates/index/month.inc b/kronolith/templates/index/month.inc
index 76820a047..d68e27530 100644
--- a/kronolith/templates/index/month.inc
+++ b/kronolith/templates/index/month.inc
@@ -9,7 +9,7 @@
     </span>
   </caption>
   <tr>
-    <td class="kronolithFirstCol">&nbsp;</td>
+    <td class="kronolithFirstCol"><div id="kronolithLoadingmonth" class="kronolithLoading"></div></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; ?>
diff --git a/kronolith/templates/index/tasks.inc b/kronolith/templates/index/tasks.inc
index faba1e2e0..0141f1c67 100644
--- a/kronolith/templates/index/tasks.inc
+++ b/kronolith/templates/index/tasks.inc
@@ -1,6 +1,7 @@
 <div id="kronolithViewTasks" class="kronolithView kronolithViewTasks" style="display:none">
 <table class="kronolithView kronolithViewTasks">
   <caption>
+    <div id="kronolithLoadingtasks" class="kronolithLoading"></div>
     <span><?php echo _("Tasks") ?></span>
   </caption>
   <tbody class="kronolithViewBody">
diff --git a/kronolith/templates/index/week.inc b/kronolith/templates/index/week.inc
index 06f4bb2f7..9cb67c016 100644
--- a/kronolith/templates/index/week.inc
+++ b/kronolith/templates/index/week.inc
@@ -18,7 +18,7 @@
     </span>
   </caption>
   <thead id="kronolithViewWeekHead" class="kronolithViewHead"><tr>
-    <td class="kronolithFirstCol">&nbsp;</td>
+    <td class="kronolithFirstCol"><div id="kronolithLoadingweek" class="kronolithLoading"></div></td>
     <td class="kronolithCol kronolithWeekDay"><span></span></td>
     <td class="kronolithCol kronolithWeekDay"><span></span></td>
     <td class="kronolithCol kronolithWeekDay"><span></span></td>
diff --git a/kronolith/templates/index/year.inc b/kronolith/templates/index/year.inc
index bf8b5d43f..134684d86 100644
--- a/kronolith/templates/index/year.inc
+++ b/kronolith/templates/index/year.inc
@@ -1,6 +1,7 @@
 <div id="kronolithViewYear" class="kronolithView kronolithViewYear" style="display:none">
 <table class="kronolithView kronolithViewYear">
   <caption>
+    <div id="kronolithLoadingyear" class="kronolithLoading" style="display:none"></div>
     <span><?php echo $today->format("Y") ?></span>
     <span class="kronolithNavigation">
       <a class="kronolithGotoToday"><?php echo _("Today") ?></a>
diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index 4a929f739..d58a23523 100644
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -483,11 +483,21 @@ body.kronolithAjax {
 }
 
 /* Loading spinner */
-#kronolithLoading {
+.kronolithLoading {
     position: absolute;
-    z-index: 1000;
+    left: 0;
+}
+#kronolithLoadingweek, #kronolithLoadingmonth {
+    top: 24px;
+}
+#kronolithLoadingtasks, #kronolithLoadingagenda {
+    position: relative;
+    float: left;
+    top: -2px;
+    margin-right: 2px;
+}
+#kronolithLoading {
     background: transparent url("graphics/loading.gif") no-repeat center;
-    margin-top: 22px;
     padding: 2px;
     width: 16px;
     height: 16px;
@@ -851,7 +861,7 @@ div#kronolithEventTopTags span:hover {
 /* Main views */
 #kronolithBody {
     position: absolute;
-    top: 45px;
+    top: 43px;
     left: 175px;
     right: 10px;
     bottom: 10px;
@@ -953,7 +963,7 @@ div.kronolithView div.kronolithViewBody div.kronolithRow {
 /* Captions. */
 #kronolithBody caption {
     position: relative;
-    margin: 0 2px 0 26px;
+    margin: 2px 2px 0 26px;
     height: 20px;
     line-height: 20px;
     border-bottom: 1px dotted #808080;
@@ -993,7 +1003,7 @@ div.kronolithView div.kronolithViewBody div.kronolithRow {
 /* Main view month */
 #kronolithViewMonthContainer {
     position: absolute;
-    top: 44px;
+    top: 46px;
     right: 0;
     bottom: 0;
     left: 0;
-- 
2.11.0