Tweak UI on DIMP compose page

diff --git a/imp/js/compose-dimp.js b/imp/js/compose-dimp.js
index 2fa9108..b9cd45d 100644 (file)
--- a/imp/js/compose-dimp.js
+++ b/imp/js/compose-dimp.js
@@ -135,7 +135,7 @@ var DimpCompose = {
         }
 
         $('save_sent_mail_folder').setValue(s);
-        $('sent_mail_folder_label').writeAttribute('title', l.escapeHTML()).setText('"' + l.truncate(15) + '"').up(1).show();
+        $('sent_mail_folder_label').writeAttribute('title', l.escapeHTML()).setText(l.truncate(15)).up(1).show();
 
         if (sel) {
             this.knl.setSelected(s);
@@ -297,6 +297,7 @@ var DimpCompose = {
                 } else {
                     elt = new Element('INPUT', { type: 'file', name: 'file_1' });
                 }
+                $('upload_wait').next().show();
                 $('upload_wait').replace(elt.writeAttribute('id', 'upload'));
                 this.resizeMsgArea();
                 break;
@@ -356,6 +357,7 @@ var DimpCompose = {
                 this.rte.setData($F('composeMessage'));
                 $('composeMessageParent').childElements().invoke('show');
                 $('composeMessage').hide();
+                this.resizeMsgArea();
             } catch (e) {
                 config = Object.clone(IMP.ckeditor_config);
                 if (!config.on) {
@@ -490,7 +492,7 @@ var DimpCompose = {
             this.resizecc.resizeNeeded();
         }
         if (DIMP.conf_compose.cc) {
-            this.toggleCC('cc');
+            this.toggleCC('cc', true);
         }
         this.setSentMailLabel(identity.id[3], identity.id[5], true);
         if (header.bcc) {
@@ -505,7 +507,7 @@ var DimpCompose = {
             $('bcc').setValue(bcc_add + identity.id[6]);
         }
         if (DIMP.conf_compose.bcc) {
-            this.toggleCC('bcc');
+            this.toggleCC('bcc', true);
         }
         $('subject').setValue(header.subject);
 
@@ -552,7 +554,10 @@ var DimpCompose = {
         e.each(function(n) {
             n = $(n);
             ids.push(n.down('SPAN.remove').readAttribute('atc_id'));
-            n.remove();
+            n.fade({
+                afterFinish: function() { n.remove(); },
+                duration: 0.4
+            });
         });
         if (!$('attach_list').childElements().size()) {
             $('attach_list').hide();
@@ -602,7 +607,8 @@ var DimpCompose = {
     {
         var u = $('upload');
         this.uniqueSubmit('add_attachment');
-        u.replace(new Element('DIV', { id: 'upload_wait' }).insert(DIMP.text_compose.uploading + ' ' + $F(u)));
+        u.next().hide();
+        u.replace(new Element('SPAN', { id: 'upload_wait' }).insert(DIMP.text_compose.uploading + ' (' + $F(u) + ')'));
     },
 
     attachmentComplete: function()
@@ -612,10 +618,16 @@ var DimpCompose = {
         DimpCore.doActionComplete({ responseJSON: doc.body.innerHTML.evalJSON(true) }, this.uniqueSubmitCallback.bind(this));
     },
 
-    toggleCC: function(type)
+    toggleCC: function(type, immediate)
     {
+        var t = $('toggle' + type);
+
         $('send' + type).show();
-        $('toggle' + type).hide();
+        if (immediate) {
+            t.hide();
+        } else {
+            t.fade({ duration: 0.4 });
+        }
     },
 
     /* Sets the cursor to the given position. */
@@ -780,7 +792,7 @@ var DimpCompose = {
                 onChoose: this.setSentMailLabel.bind(this)
             });
             this.knl.setSelected(this.get_identity($F('identity'))[3]);
-            $('sent_mail_folder_label').insert({ after: new Element('SPAN', { className: 'popdownImg', id: 'compose_flist_popdown' }).observe('click', function(e) { this.knl.show(); this.knl.ignoreClick(e); e.stop(); }.bindAsEventListener(this)) });
+            $('sent_mail_folder_label').insert({ after: new Element('SPAN', { className: 'popdownImg' }).observe('click', function(e) { this.knl.show(); this.knl.ignoreClick(e); e.stop(); }.bindAsEventListener(this)) });
         }
 
         $('dimpLoading').hide();

diff --git a/imp/themes/ie6_or_less-dimp.css b/imp/themes/ie6_or_less-dimp.css
index 19ae24a..9a5506e 100644 (file)
--- a/imp/themes/ie6_or_less-dimp.css
+++ b/imp/themes/ie6_or_less-dimp.css
@@ -54,7 +54,7 @@ div.vpRow {
 }
 
 /* Fixes broken inline-block. */
-div.msgStatus div, #msgHeadersContent .subject span, span.iconImg, span.contextImg, span.spellcheckPopdownImg, #quicksearch span {
+div.msgStatus div, #msgHeadersContent .subject span, span.iconImg, span.contextImg, span.spellcheckPopdownImg, span.popdownImg, #qsearch_icon, #qsearch_close, #upload_wait {
     zoom: 1;
     *display: inline;
 }

diff --git a/imp/themes/ie7-dimp.css b/imp/themes/ie7-dimp.css
index b53ac38..96a736e 100644 (file)
--- a/imp/themes/ie7-dimp.css
+++ b/imp/themes/ie7-dimp.css
@@ -35,7 +35,7 @@
 }
 
 /* Fixes broken inline-block. */
-div.msgStatus div, #msgHeadersContent .subject span, span.iconImg, span.contextImg, span.spellcheckPopdownImg, #quicksearch span  {
+div.msgStatus div, #msgHeadersContent .subject span, span.iconImg, span.contextImg, span.spellcheckPopdownImg, span.popdownImg, #qsearch_icon, #qsearch_close, #upload_wait {
     zoom: 1;
     *display: inline;
 }

diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css
index 401d5bc..6990645 100644 (file)
--- a/imp/themes/screen-dimp.css
+++ b/imp/themes/screen-dimp.css
@@ -595,10 +595,6 @@ div.dimpActionsCompose, div.dimpActionsMsg {
     display: block;
 }
 
-#to, #cc, #bcc, #subject {
-    width: 100%;
-}
-
 #composeMessageParent {
     background: #fff url("graphics/backhead_shadow.png") top repeat-x;
     border-left: 1px silver solid;
@@ -627,11 +623,7 @@ div.dimpActionsCompose, div.dimpActionsMsg {
     z-index: 101;
 }
 
-#compose_flist_popdown {
-    margin-top: -1px;
-}
-
-/* attachment file list */
+/* Attachment file list */
 #attach_list {
     padding-left: 15px;
 }
@@ -643,19 +635,24 @@ div.dimpActionsCompose, div.dimpActionsMsg {
     font-weight: bold;
     padding: 1px;
 }
-#attach_list span.remove:hover {
-    color: red;
+#attach_list span.attachName, #attach_list span.remove:hover {
+    cursor: pointer;
     text-decoration: underline;
 }
 #attach_list span.attachName {
     color: blue;
-    cursor: pointer;
-    text-decoration: underline;
 }
-#attach_list span.attachName:hover {
+#attach_list span.attachName:hover, #attach_list span.remove:hover {
     color: red;
 }
 
+#upload_wait {
+    display: -moz-inline-stack;
+    display: inline-block;
+    font-weight: bold;
+    padding-top: 2px;
+}
+
 span.attachmentImg {
     background-image: url("graphics/attachment.png");
 }