Improve dimpactions buttons styling

diff --git a/imp/templates/chunks/compose.php b/imp/templates/chunks/compose.php
index e7356ab..dfb5028 100644 (file)
--- a/imp/templates/chunks/compose.php
+++ b/imp/templates/chunks/compose.php
@@ -28,7 +28,7 @@ function _createDAcompose($text, $image, $id)
     } else {
         $params['title'] = $text;
     }
-    echo IMP_Dimp::actionButton($params);
+    echo '<div>' . IMP_Dimp::actionButton($params) . '</div>';
 }
 
 ?>
@@ -42,16 +42,10 @@ function _createDAcompose($text, $image, $id)
 
 <div class="dimpActions dimpActionsCompose">
 <?php if (!$compose_disable): ?>
- <span>
-  <?php _createDAcompose(_("Send"), 'Forward', 'send_button') ?>
- </span>
+ <?php _createDAcompose(_("Send"), 'Forward', 'send_button') ?>
 <?php endif; ?>
- <span>
-  <?php _createDAcompose(_("Check Spelling"), 'Spellcheck', 'spellcheck') ?>
- </span>
- <span>
-  <?php _createDAcompose(_("Save as Draft"), 'Drafts', 'draft_button') ?>
- </span>
+ <?php _createDAcompose(_("Check Spelling"), 'Spellcheck', 'spellcheck') ?>
+ <?php _createDAcompose(_("Save as Draft"), 'Drafts', 'draft_button') ?>
 </div>
 
 <div id="writemsg" class="noprint">

diff --git a/imp/templates/chunks/message.php b/imp/templates/chunks/message.php
index 133639f..c033554 100644 (file)
--- a/imp/templates/chunks/message.php
+++ b/imp/templates/chunks/message.php
@@ -19,7 +19,7 @@ function _createDAfmsg($text, $image, $id, $class = '', $show_text = true)
     } else {
         $params['tooltip'] = $text;
     }
-    echo IMP_Dimp::actionButton($params);
+    echo '<div>' . IMP_Dimp::actionButton($params) . '</div>';
 }
 
 ?>
@@ -29,26 +29,16 @@ function _createDAfmsg($text, $image, $id, $class = '', $show_text = true)
    <div class="headercloseimg" id="windowclose">
     <span class="closeImg" title="X"></span>
    </div>
-   <span>
-    <?php _createDAfmsg(_("Reply"), 'Reply', 'reply_link', 'hasmenu', $show_text) ?>
-   </span>
-   <span>
-    <?php _createDAfmsg(_("Forward"), 'Forward', 'forward_link', '', $show_text) ?>
-   </span>
+   <?php _createDAfmsg(_("Reply"), 'Reply', 'reply_link', 'hasmenu', $show_text) ?>
+   <?php _createDAfmsg(_("Forward"), 'Forward', 'forward_link', '', $show_text) ?>
 <?php if (!empty($conf['spam']['reporting']) && (!$conf['spam']['spamfolder'] || ($folder != IMP::folderPref($prefs->getValue('spam_folder'), true)))): ?>
-   <span>
-    <?php _createDAfmsg(_("Report Spam"), 'Spam', 'button_spam', '', $show_text) ?>
-   </span>
+   <?php _createDAfmsg(_("Report Spam"), 'Spam', 'button_spam', '', $show_text) ?>
 <?php endif; ?>
 <?php if (!empty($conf['notspam']['reporting']) && (!$conf['notspam']['spamfolder'] || ($folder == IMP::folderPref($prefs->getValue('spam_folder'), true)))): ?>
-   <span>
-    <?php _createDAfmsg(_("Report Innocent"), 'Ham', 'button_ham', '', $show_text) ?>
-   </span>
+   <?php _createDAfmsg(_("Report Innocent"), 'Ham', 'button_ham', '', $show_text) ?>
 <?php endif; ?>
 <?php if (!$readonly): ?>
-   <span>
-    <?php _createDAfmsg(_("Delete"), 'Delete', 'button_deleted', '', $show_text) ?>
-   </span>
+   <?php _createDAfmsg(_("Delete"), 'Delete', 'button_deleted', '', $show_text) ?>
 <?php endif; ?>
   </div>
 

diff --git a/imp/templates/index/index-dimp.inc b/imp/templates/index/index-dimp.inc
index d4c8e62..cb11a5e 100644 (file)
--- a/imp/templates/index/index-dimp.inc
+++ b/imp/templates/index/index-dimp.inc
@@ -22,7 +22,8 @@ $flag_list = $imp_flags->getList(array('imap' => true));
 
 // Small utility functions to simplify creating dimpactions buttons.
 // As of right now, we don't show text only links.
-function _createDA($text, $image, $id = null, $class = '', $show_text = true)
+function _createDA($text, $image, $id = null, $class = '', $show_text = true,
+                   $div_text = '')
 {
     $params = array('icon' => $image, 'id' => $id, 'class' => $class);
     if ($show_text) {
@@ -30,7 +31,7 @@ function _createDA($text, $image, $id = null, $class = '', $show_text = true)
     } else {
         $params['tooltip'] = $text;
     }
-    echo IMP_Dimp::actionButton($params);
+    echo '<div' . $div_text . '>' . IMP_Dimp::actionButton($params) . '</div>';
 }
 
 function _simpleButton($id, $text, $image, $imagedir = null)
@@ -181,34 +182,18 @@ function _simpleButton($id, $text, $image, $imagedir = null)
       </span>
       </div>
 <?php endif; ?>
-      <span>
-       <?php _createDA(_("Reply"), 'Reply', 'button_reply', 'noselectDisable', $show_text) ?>
-      </span>
-      <span>
-       <?php _createDA(_("Forward"), 'Forward', 'button_forward', 'noselectDisable', $show_text) ?>
-      </span>
+      <?php _createDA(_("Reply"), 'Reply', 'button_reply', 'noselectDisable', $show_text) ?>
+      <?php _createDA(_("Forward"), 'Forward', 'button_forward', 'noselectDisable', $show_text) ?>
 <?php if (!empty($conf['spam']['reporting'])): ?>
-      <span>
-       <?php _createDA(_("Spam"), 'Spam', 'button_spam', 'noselectDisable', $show_text) ?>
-      </span>
+      <?php _createDA(_("Spam"), 'Spam', 'button_spam', 'noselectDisable', $show_text) ?>
 <?php endif; ?>
 <?php if (!empty($conf['notspam']['reporting'])): ?>
-      <span style="display:none">
-       <?php _createDA(_("Innocent"), 'Ham', 'button_ham', 'noselectDisable', $show_text) ?>
-      </span>
+      <?php _createDA(_("Innocent"), 'Ham', 'button_ham', 'noselectDisable', $show_text, ' style="display:none"') ?>
 <?php endif; ?>
-      <span>
-       <?php _createDA(_("Delete"), 'Delete', 'button_deleted', 'noselectDisable', $show_text) ?>
-      </span>
-      <span id="button_compose">
-       <?php _createDA(_("Compose"), 'Compose', '', '', $show_text) ?>
-      </span>
-      <span id="button_checkmail">
-       <?php _createDA(_("Get Mail"), 'Checkmail', '', '', $show_text) ?>
-      </span>
-      <span>
-       <?php _createDA(_("Other Actions"), 'Other', 'button_other', '', $show_text) ?>
-      </span>
+      <?php _createDA(_("Delete"), 'Delete', 'button_deleted', 'noselectDisable', $show_text) ?>
+      <?php _createDA(_("Compose"), 'Compose', '', '', $show_text, ' id="button_compose"') ?>
+      <?php _createDA(_("Get Mail"), 'Checkmail', '', '', $show_text, ' id="button_checkmail"') ?>
+      <?php _createDA(_("Other Actions"), 'Other', 'button_other', '', $show_text) ?>
      </div>
 
      <div id="msglistHeader" class="item">

diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css
index b03547e..3089616 100644 (file)
--- a/imp/themes/screen-dimp.css
+++ b/imp/themes/screen-dimp.css
@@ -400,13 +400,16 @@ div.vpRow.flagDeleted {
 /* Actions */
 .dimpActions {
     background: #efefef;
-    padding: 4px 2px 7px;
+    padding: 4px 2px;
     border: 1px silver solid;
     border-bottom: 0;
     background: transparent url("graphics/backhead_s2.png") repeat-x;
+    height: 16px;
 }
-.dimpActions span {
+.dimpActions div {
     cursor: pointer;
+    float: left;
+    padding-right: 6px;
 }
 .dimpActions a, .dimpActions a:visited, .dimpActions label {
     color: #000;
@@ -416,40 +419,30 @@ div.vpRow.flagDeleted {
     padding: 2px 4px 4px 4px;
 }
 .dimpActions a img {
+    margin-right: 4px;
     vertical-align: top;
-    padding-right: 3px;
 }
-.dimpActions a:hover {
+.dimpActions a:hover, .dimpActions span.popdown:hover, .dimpActions span.spellcheckPopdownImg:hover {
+    background-color: #e3e3e3;
     text-decoration: none;
-    border-left: 1px solid #fff;
-    border-top: 1px solid #fff;
-    border-right: 1px solid #000;
-    border-bottom: 1px solid #000;
-    padding: 1px 3px 3px 3px;
-    cursor: pointer;
+}
+.dimpActions span.spellcheckPopdownImg:hover {
+    border: 0;
+    margin: 0;
+}
+.dimpActions .disabled a:hover {
+    background-color: transparent;
 }
 .dimpActions .disabled a, .dimpActions .disabled a:visited, .dimpActions .disabled a:active, .dimpActions .disabled a:hover {
     cursor: default;
     text-decoration: none;
     color: silver;
 }
-.dimpActions .disabled a:hover {
-    border: 0;
-    padding-left: 4px;
-    padding-right: 4px;
-}
 .dimpActions .disabled span.iconImg, .dimpActions .disabled span.spellcheckPopdownImg {
     filter: alpha(opacity=25);
     -moz-opacity: .25;
     opacity: .25;
 }
-.dimpActions span.popdown:hover, .dimpActions span.spellcheckPopdownImg:hover {
-    border-left: 1px solid #fff;
-    border-top: 1px solid #fff;
-    border-right: 1px solid #000;
-    border-bottom: 1px solid #000;
-    margin: -1px;
-}
 .dimpActions .disabled span.popdown:hover, .dimpActions .disabled span.spellcheckPopdownImg {
     border: 0;
     cursor: default;
@@ -799,11 +792,13 @@ a.address:hover img {
 
 /* Search-related styles */
 #qsearch {
-    padding-left: 1px;
-    float: right;
+    background-color: #f3f3f3;
     border: 1px solid #999;
     cursor: default;
-    background-color: #f3f3f3;
+    float: right;
+    margin-top: -2px;
+    padding-left: 1px;
+    padding-right: 1px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
 }
@@ -811,6 +806,7 @@ a.address:hover img {
     display: inline;
 }
 #qsearch_icon, #qsearch_close {
+    cursor: pointer;
     padding: 2px 0 0;
 }
 #qsearch_icon {
@@ -846,7 +842,7 @@ a.address:hover img {
 
 /* Popup message styling. */
 .headercloseimg {
-    float: right;
+    float: right !important;
     padding-right: 2px;
     cursor: pointer;
 }