Improve CSS/positioning of scroller and split bar

Split drag classes out so that each drag type can have a different
styling.

diff --git a/imp/js/DimpBase.js b/imp/js/DimpBase.js
index d0789d2..e74ecb5 100644 (file)
--- a/imp/js/DimpBase.js
+++ b/imp/js/DimpBase.js
@@ -630,11 +630,6 @@ var DimpBase = {
                 }
             }
         });
-
-        // If starting in no preview mode, need to set the no preview class
-        if (!DIMP.conf.preview_pref) {
-            $('msgList').addClassName('msglistNoPreview');
-        }
     },
 
     _addMouseEvents: function(p, popdown)
@@ -1023,7 +1018,6 @@ var DimpBase = {
     {
         var p = DIMP.conf.preview_pref = !DIMP.conf.preview_pref;
         $('previewtoggle').setText(p ? DIMP.text.hide_preview : DIMP.text.show_preview);
-        [ $('msgList') ].invoke(p ? 'removeClassName' : 'addClassName', 'msglistNoPreview');
         this._updatePrefs('show_preview', Number(p));
         this.viewport.showSplitPane(p);
         if (p) {
@@ -2705,6 +2699,7 @@ var DimpBase = {
 
 /* Need to add after DimpBase is defined. */
 DimpBase._msgDragConfig = {
+    classname: 'msgdrag',
     scroll: 'normalfolders',
     threshold: 5,
     caption: DimpBase.dragCaption.bind(DimpBase),
@@ -2745,6 +2740,7 @@ DimpBase._msgDragConfig = {
 };
 
 DimpBase._folderDragConfig = {
+    classname: 'folderdrag',
     ghosting: true,
     offset: { x: 15, y: 0 },
     scroll: 'normalfolders',

diff --git a/imp/templates/index/index-dimp.inc b/imp/templates/index/index-dimp.inc
index b7a0eaa..0356ddd 100644 (file)
--- a/imp/templates/index/index-dimp.inc
+++ b/imp/templates/index/index-dimp.inc
@@ -191,8 +191,10 @@ function _simpleButton($id, $text, $image)
      </div>
     </div>
 
-    <div id="msgSplitPane">
-     <div id="msgList" class="noprint msglist"></div>
+    <div class="msgSplitPane">
+     <div id="msgList" class="noprint msglist">
+      <span class="vpEmpty"><?php echo _("Loading...") ?></span>
+     </div>
      <div id="splitBar" style="display:none" class="noprint"></div>
      <div id="previewPane" style="display:none">
       <span id="msgLoading" class="loadingImg" style="display:none"></span>

diff --git a/imp/themes/ie7-dimp.css b/imp/themes/ie7-dimp.css
index 96a736e..b4c8c46 100644 (file)
--- a/imp/themes/ie7-dimp.css
+++ b/imp/themes/ie7-dimp.css
@@ -9,7 +9,7 @@
     overflow-y: auto;
 }
 
-#msgSplitPane {
+.msgSplitPane {
     width: 99.7%;
 }
 

diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css
index dec4703..1f6897f 100644 (file)
--- a/imp/themes/screen-dimp.css
+++ b/imp/themes/screen-dimp.css
@@ -86,21 +86,17 @@ input {
 }
 
 /* SplitPane styles. */
-#msgSplitPane {
+.msgSplitPane {
     border-left: 1px silver solid;
     border-right: 1px silver solid;
     border-bottom: 1px silver solid;
-}
-#msgSplitPane div.drag {
-    padding: 0;
+    position: relative;
 }
 #splitBar {
     background: #e9e9e9 url("graphics/dragHandle.png") no-repeat scroll center top !important;
-    border: 1px solid;
-    border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
+    border: 1px solid silver;
     cursor: n-resize;
     height: 5px;
-    clear: both;
     z-index: 10;
 }
 
@@ -179,17 +175,12 @@ div.msgSize {
 
 /* Message ViewPort */
 .msglist {
-    border-bottom: 1px silver solid;
-    float: left;
     overflow: hidden;
     width: 100%;
 }
 .msglist span.vpEmpty, .msglist span.vpError {
     font-weight: bold;
 }
-.msglistNoPreview {
-    border-bottom: 0;
-}
 
 /* Rows */
 .msglist div.vpRow, .msglist div.vpRow div {
@@ -234,27 +225,27 @@ div.vpRow.flagDeleted {
 
 /* Scroller */
 .sbdiv {
-    position: relative;
+    background: url("graphics/scroller_back.png") repeat-y;
+    overflow: hidden;
+    position: absolute;
     right: 0;
+    top: 0;
     width: 14px;
-    overflow: hidden;
-    background: url("graphics/scroller_back.png") repeat-y;
 }
 .sbcursor {
-    width: 13px;
-    border-left: 1px solid silver;
     background: url("graphics/scroller.png") repeat-y;
+    border-left: 1px solid silver;
+    width: 13px;
 }
 .sbup, .sbdown {
-    width: 13px;
-    height: 16px;
     border-left: 1px solid silver;
+    height: 16px;
+    width: 13px;
 }
 .sbup {
     background-image: url("graphics/sbcursor_top.png");
 }
 .sbdown {
-    border-bottom: 1px solid silver;
     background-image: url("graphics/sbcursor_bottom.png");
 }
 
@@ -718,17 +709,19 @@ a.address:hover img {
 }
 
 /* Drag and drop styles. */
-.drag, .dragdrop {
+.drag, .dragdrop, .folderdrag, .msgdrag {
     background: #eee;
     border: 1px solid #ccc;
     font-size: 12px;
-    padding: 2px;
     overflow: hidden;
     z-index: 999;
 }
 .dragdrop {
     color: red;
 }
+.dragdrop, .folderdrag, .msgdrag {
+    padding: 2px;
+}
 
 /* Search-related styles */
 #qsearch {
@@ -1020,7 +1013,7 @@ span.readonlyImg {
         overflow: visible !important;
     }
 
-    #msgSplitPane {
+    .msgSplitPane {
         border: 0;
     }