Cleanups to DIMP template and CSS

Remove last of hardcoded images in template (at least for
non-dynamic/non-configurable items).

diff --git a/imp/templates/index/index-dimp.inc b/imp/templates/index/index-dimp.inc
index 2d6ca47..c70811d 100644 (file)
--- a/imp/templates/index/index-dimp.inc
+++ b/imp/templates/index/index-dimp.inc
@@ -1,11 +1,8 @@
 <?php
-// Generate various dimp graphics used in multiple locations
-$hordeimg = $registry->getImageDir('horde');
 
 $usetrash = $prefs->getValue('use_trash');
 $show_text = in_array($prefs->getValue('menu_view'), array('both', 'text'));
 $use_sub = $prefs->getValue('subscribe');
-$loading_text = _("Loading...");
 
 $has_blacklist = $registry->hasMethod('mail/blacklistFrom');
 $has_whitelist = $registry->hasMethod('mail/whitelistFrom');
@@ -31,52 +28,52 @@ function _createDA($text, $image, $id = null, $class = '', $show_text = true,
     echo '<div' . $div_text . '>' . IMP_Dimp::actionButton($params) . '</div>';
 }
 
-function _simpleButton($id, $text, $image, $imagedir = null)
+function _simpleButton($id, $text, $image)
 {
     $ak = Horde::getAccessKey($text, true);
-    return '<li class="servicelink"'
-        . (strlen($id) ? ' id="' . $id . '"' : '')
-        . (strlen($ak) ? ' accesskey="' . $ak . '"' : '') . '>'
-        . ($imagedir
-            ? Horde::img($image, Horde::stripAccessKey($text), '', $imagedir)
-            : Horde::img($image, Horde::stripAccessKey($text)))
-        . '<a>'
-        . Horde::highlightAccessKey($text, $ak) . '</a></li>';
+    return '<li class="servicelink"' .
+        (strlen($id) ? ' id="' . $id . '"' : '') .
+        (strlen($ak) ? ' accesskey="' . $ak . '"' : '') . '>' .
+        '<span class="iconSpan ' . $image . '"></span>' .
+        '<a>' . Horde::highlightAccessKey($text, $ak) . '</a></li>';
 }
 ?>
 <div id="dimpLoading">
- <?php echo $loading_text ?>
+ <?php echo _("Loading...") ?>
  <noscript>
   <div class="nojserror"><?php echo _("Error! This application requires javascript to be available and enabled in your browser.") ?></div>
  </noscript>
 </div>
+
 <div id="dimpPage" style="display:none">
  <div id="header"></div>
  <div id="pageContainer">
   <div id="sidebarPanel" class="noprint">
-   <div id="logo"><h1><a id="logolink"><?php echo _("Horde") ?></a></h1></div>
+   <div id="logo">
+    <a id="logolink"><?php echo _("Horde") ?></a>
+   </div>
    <ul id="dimpbarActions">
-    <?php echo _simpleButton('composelink', _("_New Message"), 'compose.png') ?>
-    <?php echo _simpleButton('checkmaillink', _("_Get Mail"), 'checkmail.png') ?>
-    <?php echo _simpleButton('alertsloglink', _("Alerts _Log"), 'info_icon.png', $hordeimg) ?>
+    <?php echo _simpleButton('composelink', _("_New Message"), 'dimpactionCompose') ?>
+    <?php echo _simpleButton('checkmaillink', _("_Get Mail"), 'dimpactionCheckmail') ?>
+    <?php echo _simpleButton('alertsloglink', _("Alerts _Log"), 'infoIcon') ?>
 <?php if (!empty($_SESSION['imp']['filteravail'])): ?>
-    <?php echo _simpleButton('applyfilterlink', _("Apply Filter"), 'filters.png') ?>
+    <?php echo _simpleButton('applyfilterlink', _("Apply Filter"), 'filtersIcon') ?>
 <?php endif; ?>
    </ul>
    <div class="sepfull"></div>
    <ul id="serviceActions">
-<?php if ($registry->get('status', 'horde') != 'hidden' && $registry->get('status', 'horde') != 'notoolbar'): ?>
-    <?php echo _simpleButton('appportal', _("_Portal"), 'horde.png', $hordeimg) ?>
+<?php if (($registry->get('status', 'horde') != 'hidden') && ($registry->get('status', 'horde') != 'notoolbar')): ?>
+    <?php echo _simpleButton('appportal', _("_Portal"), 'hordeIcon') ?>
 <?php endif; ?>
 <?php if (Horde::showService('options')): ?>
-    <?php echo _simpleButton('appoptions', _("_Options"), 'prefs.png', $hordeimg) ?>
+    <?php echo _simpleButton('appoptions', _("_Options"), 'prefsIcon') ?>
 <?php endif; ?>
 <?php if (Horde::showService('logout')): ?>
-    <?php echo _simpleButton('applogout', _("_Log Out"), 'logout.png', $hordeimg) ?>
+    <?php echo _simpleButton('applogout', _("_Log Out"), 'logoutIcon') ?>
 <?php endif; ?>
    </ul>
    <div class="sepfull"></div>
-   <div id="foldersLoading"><?php echo $loading_text ?></div>
+   <div id="foldersLoading"><?php echo _("Loading...") ?></div>
    <div id="foldersSidebar" style="display:none">
     <ul class="folderlist" id="specialfolders"></ul>
 <?php if (!empty($application_folders)): ?>
@@ -110,7 +107,6 @@ function _simpleButton($id, $text, $image, $imagedir = null)
     </div>
 <?php endif; ?>
     <div class="sepfull"></div>
-    <div id="myfolders"><?php echo _("My Folders") ?></div>
     <ul class="folderlist" id="normalfolders">
      <li class="folder" id="folderopts">
       <span class="iconSpan folderImg"></span>
@@ -125,7 +121,7 @@ function _simpleButton($id, $text, $image, $imagedir = null)
   </div>
 
   <div id="dimpmain">
-   <div id="dimpmain_portal"><?php echo $loading_text ?></div>
+   <div id="dimpmain_portal"><?php echo _("Loading...") ?></div>
    <div id="dimpmain_folder" style="display:none">
     <div id="dimpmain_folder_top" class="noprint">
      <div id="tabbar">
@@ -158,7 +154,6 @@ function _simpleButton($id, $text, $image, $imagedir = null)
       </div>
 <?php endif; ?>
      </div>
-     <br class="clear" />
      <div class="header mboxheader">
       <div>
        <span class="rightFloat" id="msgHeader"></span>
@@ -194,7 +189,7 @@ function _simpleButton($id, $text, $image, $imagedir = null)
      </div>
 
      <div id="msglistHeader" class="item">
-      <div class="msgStatus">&nbsp;</div>
+      <div class="msgStatus"></div>
       <div class="msgFrom sep">
        <a class="widget" sortby="<?php echo Horde_Imap_Client::SORT_FROM ?>"><?php echo _("From") ?></a>
        <a class="widget" style="display:none" sortby="<?php echo Horde_Imap_Client::SORT_TO ?>"><?php echo _("To") ?></a>
@@ -219,12 +214,11 @@ function _simpleButton($id, $text, $image, $imagedir = null)
        <a class="widget" sortby="<?php echo Horde_Imap_Client::SORT_SIZE ?>"><?php echo _("Size") ?></a>
       </div>
      </div>
-     <div class="clear" id="mlistHeaderClear">&nbsp;</div>
     </div>
 
     <div id="msgSplitPane">
-     <div id="msgList" class="msglist noprint">&nbsp;</div>
-     <div id="splitBar" style="display:none" class="splitBar noprint"></div>
+     <div id="msgList" class="noprint msglist"></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>
       <div id="previewInfo" style="display:none">
@@ -261,7 +255,7 @@ function _simpleButton($id, $text, $image, $imagedir = null)
         <div id="msgHeaders" style="display:none">
          <div class="dimpOptions noprint">
           <div id="msg_newwin_options"><span class="iconImg"></span><a><?php echo _("Open in new window") ?></a></div>
-          <div id="msg_print"><?php echo Horde::img('print.png', '', '', $hordeimg) ?><a><?php echo _("Print") ?></a></div>
+          <div id="msg_print"><span class="iconImg"></span><a><?php echo _("Print") ?></a></div>
 <?php if (!empty($conf['user']['allow_view_source'])): ?>
           <div id="msg_view_source"><span class="iconImg"></span><a><?php echo _("View Source") ?></a></div>
 <?php endif; ?>
@@ -299,7 +293,9 @@ function _simpleButton($id, $text, $image, $imagedir = null)
              </td>
             </tr>
             <tr id="msgLogInfo" style="display:none">
-             <td class="label"><a id="msgloglist_toggle"><span class="iconImg" id="msgloglist_col"></span><span class="iconImg" id="msgloglist_exp" style="display:none"></span></a></td>
+             <td class="label">
+              <a id="msgloglist_toggle"><span class="iconImg" id="msgloglist_col"></span><span class="iconImg" id="msgloglist_exp" style="display:none"></span></a>
+             </td>
              <td>
               <div><span class="msgLogLabel"><?php echo _("Message Log") ?></span></div>
               <div id="msgloglist" style="display:none">
@@ -315,7 +311,6 @@ function _simpleButton($id, $text, $image, $imagedir = null)
        <div id="msgBody" class="msgBody"></div>
       </div>
      </div>
-     <div style="clear:left" />
     </div>
    </div>
   </div>

diff --git a/imp/themes/graphics/horde.png b/imp/themes/graphics/horde.png
new file mode 100644 (file)
index 0000000..ebfae15
Binary files /dev/null and b/imp/themes/graphics/horde.png differ

diff --git a/imp/themes/graphics/info_icon.png b/imp/themes/graphics/info_icon.png
new file mode 100644 (file)
index 0000000..1cae1e8
Binary files /dev/null and b/imp/themes/graphics/info_icon.png differ

diff --git a/imp/themes/graphics/prefs.png b/imp/themes/graphics/prefs.png
new file mode 100644 (file)
index 0000000..c23af27
Binary files /dev/null and b/imp/themes/graphics/prefs.png differ

diff --git a/imp/themes/graphics/print.png b/imp/themes/graphics/print.png
new file mode 100644 (file)
index 0000000..8a938d5
Binary files /dev/null and b/imp/themes/graphics/print.png differ

diff --git a/imp/themes/ie6_or_less-dimp.css b/imp/themes/ie6_or_less-dimp.css
index 1ccd60a..7148412 100644 (file)
--- a/imp/themes/ie6_or_less-dimp.css
+++ b/imp/themes/ie6_or_less-dimp.css
@@ -53,9 +53,6 @@ form#compose {
 #msglistHeader {
     height: 15px;
 }
-#mlistHeaderClear {
-    display: none;
-}
 
 /* IE 6 doesn't support DOM.class1.class2 - treats this as DOM.class2. So
  * flag icons will appear as background for row. This works around this. */

diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css
index 7b90153..205533f 100644 (file)
--- a/imp/themes/screen-dimp.css
+++ b/imp/themes/screen-dimp.css
@@ -19,6 +19,7 @@ input {
 #quota {
     float: right;
     font-weight: normal;
+    padding-bottom: 3px;
 }
 #quota .used {
     float: left;
@@ -36,9 +37,6 @@ input {
     border-left: 1px #000 solid;
     height: 14px;
 }
-div#quota {
-    padding-bottom: 3px;
-}
 
 #logo {
     display: none;
@@ -73,18 +71,15 @@ div#quota {
 #spellcheck {
     color: #000;
 }
-.spellcheckChecking {
-    color: red;
-}
-.spellcheckIncorrect {
-    text-decoration: underline;
-    cursor: pointer;
+.spellcheckChecking, .spellcheckIncorrect {
     color: red;
 }
 .spellcheckCorrected {
+    color: #090;
+}
+.spellcheckIncorrect, .spellcheckCorrected {
     text-decoration: underline;
     cursor: pointer;
-    color: #090;
 }
 
 /* SplitPane styles. */
@@ -96,7 +91,7 @@ div#quota {
 #msgSplitPane div.drag {
     padding: 0;
 }
-.splitBar {
+#splitBar {
     background: #e9e9e9 url("graphics/dragHandle.png") no-repeat scroll center top !important;
     border: 1px solid;
     border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
@@ -107,6 +102,9 @@ div#quota {
 }
 
 /* Message List */
+.mboxheader {
+    clear: left;
+}
 #msgLoading, #viewportLoading {
     position: absolute;
     margin: 10px 0 0 10px;
@@ -177,10 +175,10 @@ div.msgSize {
 
 /* Message ViewPort */
 .msglist {
-    width: 100%;
-    overflow: hidden;
     border-bottom: 1px silver solid;
     float: left;
+    overflow: hidden;
+    width: 100%;
 }
 .msglist span.vpEmpty, .msglist span.vpError {
     font-weight: bold;
@@ -286,18 +284,12 @@ div.vpRow.flagDeleted {
 }
 #sidebarPanel li {
     list-style: none;
-    width: 100%;
     height: 16px;
     line-height: 16px;
     padding-top: 1px;
     white-space: nowrap;
 }
-#sidebarPanel li.folder, #sidebarPanel li.container, #sidebarPanel li.custom, #sidebarPanel li.servicelink {
-    width: 100%;
-    text-decoration: none;
-}
-#sidebarPanel li a {
-    width: 130px;
+#sidebarPanel li a, #sidebarPanel li.folder, #sidebarPanel li.container, #sidebarPanel li.custom, #sidebarPanel li.servicelink {
     text-decoration: none;
 }
 #sidebarPanel li.servicelink a {
@@ -306,7 +298,7 @@ div.vpRow.flagDeleted {
 #sidebarPanel li.custom {
     background: transparent none;
 }
-#sidebarPanel li.custom img, #sidebarPanel li.servicelink img {
+#sidebarPanel li.custom img {
     float: left;
     padding: 1px 4px 0 0;
     margin-bottom: -1px;
@@ -330,10 +322,6 @@ div.vpRow.flagDeleted {
 #sidebarPanel li.subfolders ul {
     padding-left: 10px;
 }
-#sidebarPanel li a.drop {
-    border: 1px solid orange;
-    padding: 1px 1px 1px 19px;
-}
 #sidebarPanel span.iconSpan {
     display: inline;
     float: left;
@@ -356,21 +344,14 @@ div.vpRow.flagDeleted {
 #normalfolders li.unsubFolder {
     font-style: italic;
 }
-#myfolders {
-    display: none;
-}
 #sidebarPanel .over a, #sidebarPanel li.folder:hover, #sidebarPanel li.custom:hover, #sidebarPanel li.servicelink:hover {
     font-weight: bold;
     text-decoration: underline;
 }
 
-#foldersSidebar {
-    overflow: hidden;
-}
-
 #folderopts a {
     display: inline !important;
-    padding-right: 2px;
+    padding-right: 1px;
 }
 
 /* Options */
@@ -455,11 +436,8 @@ div.dimpActionsCompose, div.dimpActionsMsg {
 
 /* Preview pane styles. */
 #previewPane {
-    overflow: auto;
-    height: 250px;
-    border: none;
-    border-top: 1px silver solid;
     background: #fff;
+    overflow: auto;
 }
 #previewInfo {
     background: transparent url("graphics/ico_message_off.png") no-repeat scroll 10px 15px;
@@ -875,6 +853,24 @@ span.iconImg, span.contextImg, span.spellcheckPopdownImg {
     margin-right: 4px;
 }
 
+/* Sidebar images. */
+span.infoIcon {
+    background-image: url("graphics/info_icon.png");
+}
+span.filtersIcon {
+    background-image: url("graphics/filters.png");
+}
+span.hordeIcon {
+    background-image: url("graphics/horde.png");
+}
+span.prefsIcon {
+    background-image: url("graphics/prefs.png");
+}
+span.logoutIcon {
+    background-image: url("graphics/logout.png");
+}
+
+/* Dimp action images. */
 span.dimpactionReply {
     background-image: url("graphics/reply.png");
 }
@@ -999,6 +995,9 @@ div.msgSubject span.treeImg {
     margin-left: 4px;
     margin-right: 0;
 }
+#msg_print span.iconImg {
+    background-image: url("graphics/print.png");
+}
 #quota span.iconImg {
     background-image: url("graphics/quotauncover.gif");
     width: 0;

diff --git a/imp/themes/silver/graphics/horde.png b/imp/themes/silver/graphics/horde.png
new file mode 100644 (file)
index 0000000..02ace0a
Binary files /dev/null and b/imp/themes/silver/graphics/horde.png differ

diff --git a/imp/themes/silver/graphics/info_icon.png b/imp/themes/silver/graphics/info_icon.png
new file mode 100644 (file)
index 0000000..d22fde8
Binary files /dev/null and b/imp/themes/silver/graphics/info_icon.png differ

diff --git a/imp/themes/silver/graphics/prefs.png b/imp/themes/silver/graphics/prefs.png
new file mode 100644 (file)
index 0000000..5c8213f
Binary files /dev/null and b/imp/themes/silver/graphics/prefs.png differ

diff --git a/imp/themes/silver/graphics/print.png b/imp/themes/silver/graphics/print.png
new file mode 100644 (file)
index 0000000..a350d18
Binary files /dev/null and b/imp/themes/silver/graphics/print.png differ

diff --git a/imp/themes/silver/screen-dimp.css b/imp/themes/silver/screen-dimp.css
index d436514..f77566d 100644 (file)
--- a/imp/themes/silver/screen-dimp.css
+++ b/imp/themes/silver/screen-dimp.css
@@ -29,6 +29,22 @@
     background-image: url("graphics/popright.png");
 }
 
+span.infoIcon {
+    background-image: url("graphics/info_icon.png");
+}
+span.filtersIcon {
+    background-image: url("graphics/filters.png");
+}
+span.hordeIcon {
+    background-image: url("graphics/horde.png");
+}
+span.prefsIcon {
+    background-image: url("graphics/prefs.png");
+}
+span.logoutIcon {
+    background-image: url("graphics/logout.png");
+}
+
 span.dimpactionReply {
     background-image: url("graphics/reply.png");
 }
@@ -132,6 +148,9 @@ span.dimpactionDrafts {
 #msg_newwin span.iconImg, #msg_newwin_options span.iconImg {
     background-image: url("graphics/newwin.png");
 }
+#msg_print span.iconImg {
+    background-image: url("graphics/print.png");
+}
 
 #qsearch_icon {
     background-image: url("graphics/search.png");