Better positioning code for loading graphics.

diff --git a/imp/js/src/DimpBase.js b/imp/js/src/DimpBase.js
index 452e181..0aaca17 100644 (file)
--- a/imp/js/src/DimpBase.js
+++ b/imp/js/src/DimpBase.js
@@ -898,7 +898,8 @@ var DimpBase = {
 
     loadPreview: function(data, params)
     {
-        var offset, pp_uid;
+        var pp_uid;
+
         if (!$('previewPane').visible()) {
             return;
         }
@@ -923,10 +924,7 @@ var DimpBase = {
             }
         }
 
-        offset = $('previewMsg').visible()
-            ? $('msgBody').positionedOffset()
-            : $('previewPane').positionedOffset();
-        $('msgLoading').setStyle({ position: 'absolute', top: (offset.top + 10) + 'px', left: (offset.left + 10) + 'px' }).show();
+        $('msgLoading').clonePosition('splitBar', { setHeight: false, setWidth: false }).show();
 
         DimpCore.doAction('ShowPreview', params || {}, this.viewport.createSelection('dataob', this.pp), this.bcache.get('loadPC') || this.bcache.set('loadPC', this._loadPreviewCallback.bind(this)));
     },
@@ -2206,19 +2204,18 @@ var DimpBase = {
 
     msgListLoading: function(show)
     {
-        var ml_offset;
+        var c;
 
         if (this.fl_visible != show) {
             this.fl_visible = show;
             if (show) {
-                ml_offset = $('msgList').positionedOffset();
-                $('folderLoading').setStyle({ position: 'absolute', top: (ml_offset.top + 10) + 'px', left: (ml_offset.left + 10) + 'px' });
-                Effect.Appear('folderLoading', { duration: 0.2 });
-                $(document.body).setStyle({ cursor: 'progress' });
+                $('viewportLoading').clonePosition('msgList', { setHeight: false, setWidth: false });
+                c = 'progress';
             } else {
-                Effect.Fade('folderLoading', { duration: 0.2 });
-                $(document.body).setStyle({ cursor: 'default' });
+                c = 'default';
             }
+            $(document.body).setStyle({ cursor: c });
+            Effect.toggle('viewportLoading', 'appear', { duration: 0.2 });
         }
     },
 

diff --git a/imp/templates/index/index-dimp.inc b/imp/templates/index/index-dimp.inc
index 5ebea5b..77329e0 100644 (file)
--- a/imp/templates/index/index-dimp.inc
+++ b/imp/templates/index/index-dimp.inc
@@ -165,7 +165,7 @@ function _simpleButton($id, $text, $image, $imagedir = null)
      <div class="header mboxheader">
       <div>
        <span class="rightFloat" id="msgHeader"></span>
-       <span id="folderLoading" class="loadingImg" style="display:none"></span>
+       <span id="viewportLoading" class="loadingImg" style="display:none"></span>
        <span id="folderName"></span>
        <span class="iconImg readonlyImg" style="display:none" title="<?php echo htmlspecialchars(_("Read-Only")) ?>"></span>
       </div>

diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css
index 1978988..4e12070 100644 (file)
--- a/imp/themes/screen-dimp.css
+++ b/imp/themes/screen-dimp.css
@@ -111,6 +111,14 @@ span.loadingImg {
     width: 16px;
     height: 16px;
 }
+#msgLoading, #viewportLoading {
+    position: absolute;
+    margin: 10px 0 0 10px;
+}
+#msgLoading {
+    /* Positioned relative to .splitBar, which is 7px high by default. */
+    margin-top: 17px;
+}
 
 /* Columns */
 div.msgStatus {