Add more classes and options to HTML elements for better styleability

program/include/main.inc

@@ -1607,6 +1607,26 @@ function rcmail_display_server_error($fallback=null, $fallback_args=null)
 }
 
 
+/**
+ * Generate CSS classes from mimetype and filename extension
+ *
+ * @param string Mimetype
+ * @param string The filename
+ * @return string CSS classes separated by space
+ */
+function rcmail_filetype2classname($mimetype, $filename)
+{
+  list($primary, $secondary) = explode('/', $mimetype);
+
+  $classes = array($primary ? $primary : 'unknown');
+  if ($secondary)
+    $classes[] = $secondary;
+  if (preg_match('/\.([a-z0-9]+)$/', $filename, $m))
+    $classes[] = $m[1];
+
+  return join(" ", $classes);
+}
+
 /**
  * Output HTML editor scripts
  *

program/include/rcube_template.php

@@ -983,14 +983,11 @@ class rcube_template extends rcube_html_page
             if ($attrib['label']) {
                 $attrib['value'] = $attrib['label'];
             }
+            if ($attrib['command']) {
+              $attrib['disabled'] = 'disabled';
+            }
 
-            $attrib_str = html::attrib_string(
-                $attrib,
-                array(
-                    'type', 'value', 'onclick', 'id', 'class', 'style', 'tabindex'
-                )
-            );
-            $out = sprintf('<input%s disabled="disabled" />', $attrib_str);
+            $out = html::tag('input', $attrib, '', array('type', 'value', 'onclick', 'id', 'class', 'style', 'tabindex', 'disabled'));
         }
 
         // generate html code for button

program/js/app.js

@@ -931,8 +931,8 @@ function rcube_webmail()
       case 'send-attachment':
         // Reset the auto-save timer
         self.clearTimeout(this.save_timer);
-
-        this.upload_file(props)
+        
+        this.upload_file(props || this.gui_objects.uploadform);
         break;
 
       case 'insert-sig':
@@ -3357,9 +3357,9 @@ function rcube_webmail()
         ts = frame_name.replace(/^rcmupload/, '');
 
       if (this.env.loadingicon)
-        content = '<img src="'+this.env.loadingicon+'" alt="" />'+content;
+        content = '<img src="'+this.env.loadingicon+'" alt="" class="uploading" />'+content;
       if (this.env.cancelicon)
-        content = '<a title="'+this.get_label('cancel')+'" onclick="return rcmail.cancel_attachment_upload(\''+ts+'\', \''+frame_name+'\');" href="#cancelupload"><img src="'+this.env.cancelicon+'" alt="" /></a>'+content;
+        content = '<a title="'+this.get_label('cancel')+'" onclick="return rcmail.cancel_attachment_upload(\''+ts+'\', \''+frame_name+'\');" href="#cancelupload" class="cancelupload"><img src="'+this.env.cancelicon+'" alt="" /></a>'+content;
       this.add2attachment_list(ts, { name:'', html:content, complete:false });
 
       // upload progress support
@@ -3380,7 +3380,7 @@ function rcube_webmail()
     if (!this.gui_objects.attachmentlist)
       return false;
 
-    var indicator, li = $('<li>').attr('id', name).html(att.html);
+    var indicator, li = $('<li>').attr('id', name).addClass(att.classname).html(att.html);
 
     // replace indicator's li
     if (upload_id && (indicator = document.getElementById(upload_id))) {

program/steps/mail/attachments.inc

@@ -126,6 +126,7 @@ if (is_array($_FILES['_attachments']['tmp_name'])) {
         'href' => "#delete",
         'onclick' => sprintf("return %s.command('remove-attachment','rcmfile%s', this)", JS_OBJECT_NAME, $id),
         'title' => rcube_label('delete'),
+        'class' => 'delete',
       ), $button);
 
       $content .= Q($attachment['name']);
@@ -134,6 +135,7 @@ if (is_array($_FILES['_attachments']['tmp_name'])) {
         'html' => $content,
         'name' => $attachment['name'],
         'mimetype' => $attachment['mimetype'],
+        'classname' => rcmail_filetype2classname($attachment['mimetype'], $attachment['name']),
         'complete' => true), $uploadid);
     }
     else {  // upload failed

program/steps/mail/compose.inc

@@ -1233,16 +1233,16 @@ function rcmail_compose_attachment_list($attrib)
     else
       $button = Q(rcube_label('delete'));
 
-    foreach ($COMPOSE['attachments'] as $id => $a_prop)
-    {
+    foreach ($COMPOSE['attachments'] as $id => $a_prop) {
       if (empty($a_prop))
         continue;
 
-      $out .= html::tag('li', array('id' => 'rcmfile'.$id),
+      $out .= html::tag('li', array('id' => 'rcmfile'.$id, 'class' => rcmail_filetype2classname($a_prop['mimetype'], $a_prop['name'])),
         html::a(array(
             'href' => "#delete",
             'title' => rcube_label('delete'),
-            'onclick' => sprintf("return %s.command('remove-attachment','rcmfile%s', this)", JS_OBJECT_NAME, $id)),
+            'onclick' => sprintf("return %s.command('remove-attachment','rcmfile%s', this)", JS_OBJECT_NAME, $id),
+            'class' => 'delete'),
           $button) . Q($a_prop['name']));
         
         $jslist['rcmfile'.$id] = array('name' => $a_prop['name'], 'complete' => true, 'mimetype' => $a_prop['mimetype']);
@@ -1267,9 +1267,8 @@ function rcmail_compose_attachment_form($attrib)
 {
   global $RCMAIL, $OUTPUT;
 
-  // add ID if not given
-  if (!$attrib['id'])
-    $attrib['id'] = 'rcmUploadbox';
+  // set defaults
+  $attrib += array('id' => 'rcmUploadbox', 'buttons' => 'yes');
 
   // Get filesize, enable upload progress bar
   $max_filesize = rcube_upload_init();
@@ -1280,14 +1279,14 @@ function rcmail_compose_attachment_form($attrib)
     $OUTPUT->form_tag(array('name' => 'uploadform', 'method' => 'post', 'enctype' => 'multipart/form-data'),
       html::div(null, rcmail_compose_attachment_field(array('size' => $attrib['attachmentfieldsize']))) .
       html::div('hint', rcube_label(array('name' => 'maxuploadsize', 'vars' => array('size' => $max_filesize)))) .
-      html::div('buttons',
+      (get_boolean($attrib['buttons']) ? html::div('buttons',
         $button->show(rcube_label('close'), array('class' => 'button', 'onclick' => "$('#$attrib[id]').hide()")) . ' ' .
         $button->show(rcube_label('upload'), array('class' => 'button mainaction', 'onclick' => JS_OBJECT_NAME . ".command('send-attachment', this.form)"))
-      )
+      ) : '')
     )
   );
 
-  $OUTPUT->add_gui_object('uploadbox', $attrib['id']);
+  $OUTPUT->add_gui_object('uploadform', $attrib['id']);
   return $out;
 }
 

program/steps/mail/func.inc

@@ -379,6 +379,8 @@ function rcmail_message_list_head($attrib, $a_show_cols)
     // make sort links
     if (in_array($col, $a_sort_cols))
       $col_name = html::a(array('href'=>"./#sort", 'onclick' => 'return '.JS_OBJECT_NAME.".command('sort','".$col."',this)", 'title' => rcube_label('sortby')), $col_name);
+    else if ($col_name[0] != '<')
+      $col_name = '<span class="' . $col .'">' . $col_name . '</span>';
 
     $sort_class = $col == $sort_col ? " sorted$sort_order" : '';
     $class_name = $col.$sort_class;

program/steps/mail/show.inc

@@ -130,13 +130,7 @@ function rcmail_message_attachments($attrib)
         $title = '';
       }
 
-        $classes = array($attach_prop->ctype_primary ? $attach_prop->ctype_primary : 'unknown');
-        if ($attach_prop->ctype_secondary)
-          $classes[] = $attach_prop->ctype_secondary;
-        if (preg_match('/\.([a-z0-9]+)$/', $attach_prop->filename, $m))
-          $classes[] = $m[1];
-        
-        $ol .= html::tag('li', join(' ', $classes),
+        $ol .= html::tag('li', rcmail_filetype2classname($attach_prop->mimetype, $attach_prop->filename),
           html::a(array(
             'href' => $MESSAGE->get_part_url($attach_prop->mime_id, false),
             'onclick' => sprintf(