From 087c7dc5d2e58e4aa99f1ffdb9b8f01c6121ce1d Mon Sep 17 00:00:00 2001 From: alecpl <alec@alec.pl> Date: Tue, 29 Jun 2010 15:27:26 -0400 Subject: [PATCH] - Improved compose screen: resizable body and attachments list, vertical splitter, options menu - Removed productname/version element, changed footer size to 20px --- skins/default/common.css | 35 ++ skins/default/templates/editidentity.html | 4 program/steps/mail/compose.inc | 43 ++- skins/default/mail.css | 172 +++++------ program/js/editor.js | 18 skins/default/templates/error.html | 2 skins/default/addressbook.css | 26 - skins/default/templates/message.html | 2 skins/default/iehacks.css | 66 +--- skins/default/splitter.js | 2 skins/default/templates/importcontacts.html | 4 skins/default/templates/mail.html | 2 skins/default/templates/addressbook.html | 2 skins/default/templates/messageerror.html | 2 CHANGELOG | 1 skins/default/templates/managefolders.html | 7 skins/default/templates/plugin.html | 2 skins/default/ie6hacks.css | 10 skins/default/settings.css | 45 -- program/js/googiespell.js | 42 +- skins/default/functions.js | 88 ++++- skins/default/templates/compose.html | 175 +++++++----- program/js/app.js | 33 -- skins/default/templates/identities.html | 4 skins/default/templates/settings.html | 4 25 files changed, 405 insertions(+), 386 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index c6e9351..6348729 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,6 +1,7 @@ CHANGELOG RoundCube Webmail =========================== +- Improved compose screen: resizable body and attachments list, vertical splitter, options menu - Fix RC forgets search results (#1483883) - TinyMCE 3.3.7 - Improve parsing of styled empty tags in HTML messages (#1486812) diff --git a/program/js/app.js b/program/js/app.js index 4c0e184..4f2ef85 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -225,7 +225,7 @@ } } else if (this.env.action == 'compose') { - this.enable_command('add-attachment', 'send-attachment', 'remove-attachment', 'send', true); + this.enable_command('send-attachment', 'remove-attachment', 'send', true); if (this.env.spellcheck) { this.env.spellcheck.spelling_state_observer = function(s){ ref.set_spellcheck_state(s); }; @@ -871,9 +871,6 @@ // clear timeout (sending could take longer) clearTimeout(this.request_timer); break; - - case 'add-attachment': - this.show_attachment_form(true); case 'send-attachment': // Reset the auto-save timer @@ -3068,32 +3065,6 @@ return true; }; - this.show_attachment_form = function(a) - { - if (!this.gui_objects.uploadbox) - return false; - - var elm, list; - if (elm = this.gui_objects.uploadbox) { - if (a && (list = this.gui_objects.attachmentlist)) { - var pos = $(list).offset(); - elm.style.top = (pos.top + list.offsetHeight + 10) + 'px'; - elm.style.left = pos.left + 'px'; - } - - $(elm).toggle(); - } - - // clear upload form - try { - if (!a && this.gui_objects.attachmentform != this.gui_objects.messageform) - this.gui_objects.attachmentform.reset(); - } - catch(e){} // ignore errors - - return true; - }; - // upload attachment file this.upload_file = function(form) { @@ -3156,8 +3127,6 @@ form.setAttribute('enctype', 'multipart/form-data'); form.submit(); - // hide upload form - this.show_attachment_form(false); // display upload indicator and cancel button var content = this.get_label('uploading'); if (this.env.loadingicon) diff --git a/program/js/editor.js b/program/js/editor.js index bd9c00c..a5e3af3 100644 --- a/program/js/editor.js +++ b/program/js/editor.js @@ -103,8 +103,7 @@ else ishtml = select.value == 'html'; - if (ishtml) - { + if (ishtml) { rcmail.display_spellcheck_controls(false); rcmail.plain2html(composeElement.value, textAreaId); @@ -113,25 +112,24 @@ setTimeout("rcmail_editor_tabindex();", 500); if (flagElement && (flag = rcube_find_object(flagElement))) flag.value = '1'; - } - else - { + } + else { var thisMCE = tinyMCE.get(textAreaId); var existingHtml = thisMCE.getContent(); if (existingHtml) { if (!confirm(rcmail.get_label('editorwarning'))) { if (select.tagName == 'SELECT') - select.value = 'html'; + select.value = 'html'; return false; - } + } rcmail.html2plain(existingHtml, textAreaId); - } + } tinyMCE.execCommand('mceRemoveControl', false, textAreaId); rcmail.display_spellcheck_controls(true); if (flagElement && (flag = rcube_find_object(flagElement))) flag.value = '0'; - } -}; + } +} diff --git a/program/js/googiespell.js b/program/js/googiespell.js index 51acb73..a9879f3 100644 --- a/program/js/googiespell.js +++ b/program/js/googiespell.js @@ -767,6 +767,27 @@ $(this.switch_lan_pic).removeClass().addClass('googie_lang_3d_on'); }; +this.showLangWindow = function(elm) { + if (this.show_menu_observer) + this.show_menu_observer(this); + + this.createLangWindow(); + $('body').append(this.language_window); + + var pos = $(elm).offset(), + height = $(elm).height(), + width = $(elm).width(), + h = $(this.language_window).height(), + pageheight = $(document).height(), + left = this.change_lang_pic_placement == 'right' ? + pos.left - 100 + width : pos.left + width, + top = pos.top + h < pageheight ? pos.top + height : pos.top - h - 4; + + $(this.language_window).css({'visibility': 'visible', 'top' : top+'px','left' : left+'px'}); + + this.highlightCurSel(); +}; + this.deHighlightCurSel = function() { $(this.lang_cur_elm).removeClass().addClass('googie_list_onout'); }; @@ -776,30 +797,13 @@ GOOGIE_CUR_LANG = GOOGIE_DEFAULT_LANG; for (var i=0; i < this.lang_elms.length; i++) { if ($(this.lang_elms[i]).attr('googieId') == GOOGIE_CUR_LANG) { - this.lang_elms[i].className = "googie_list_selected"; + this.lang_elms[i].className = 'googie_list_selected'; this.lang_cur_elm = this.lang_elms[i]; } else { - this.lang_elms[i].className = "googie_list_onout"; + this.lang_elms[i].className = 'googie_list_onout'; } } -}; - -this.showLangWindow = function(elm) { - if (this.show_menu_observer) - this.show_menu_observer(this); - - this.createLangWindow(); - $('body').append(this.language_window); - - var pos = $(elm).offset(), - top = pos.top + $(elm).height(), - left = this.change_lang_pic_placement == 'right' ? - pos.left - 100 + $(elm).width() : pos.left + $(elm).width(); - - $(this.language_window).css({'visibility': 'visible', 'top' : top+'px','left' : left+'px'}); - - this.highlightCurSel(); }; this.createChangeLangPic = function() { diff --git a/program/steps/mail/compose.inc b/program/steps/mail/compose.inc index a0b68d2..f59582b 100644 --- a/program/steps/mail/compose.inc +++ b/program/steps/mail/compose.inc @@ -188,8 +188,11 @@ } } -/****** compose mode functions ********/ +// process $MESSAGE body/attachments, set $MESSAGE_BODY/$HTML_MODE vars and some session data +$MESSAGE_BODY = rcmail_prepare_message_body(); + +/****** compose mode functions ********/ function rcmail_compose_headers($attrib) { @@ -318,7 +321,6 @@ } - function rcmail_compose_header_from($attrib) { global $IMAP, $MESSAGE, $DB, $USER, $OUTPUT, $compose_mode; @@ -416,17 +418,9 @@ } -function rcmail_compose_body($attrib) +function rcmail_prepare_message_body() { - global $RCMAIL, $CONFIG, $OUTPUT, $MESSAGE, $compose_mode, $LINE_LENGTH; - - list($form_start, $form_end) = get_form_tags($attrib); - unset($attrib['form']); - - if (empty($attrib['id'])) - $attrib['id'] = 'rcmComposeBody'; - - $attrib['name'] = '_message'; + global $RCMAIL, $CONFIG, $MESSAGE, $compose_mode, $LINE_LENGTH, $HTML_MODE; if ($CONFIG['htmleditor'] || (($compose_mode == RCUBE_COMPOSE_DRAFT || $compose_mode == RCUBE_COMPOSE_EDIT) && $MESSAGE->has_html_part())) $isHtml = true; @@ -494,6 +488,25 @@ } } + $HTML_MODE = $isHtml; + + return $body; +} + +function rcmail_compose_body($attrib) +{ + global $RCMAIL, $CONFIG, $OUTPUT, $MESSAGE, $compose_mode, $LINE_LENGTH, $HTML_MODE, $MESSAGE_BODY; + + list($form_start, $form_end) = get_form_tags($attrib); + unset($attrib['form']); + + if (empty($attrib['id'])) + $attrib['id'] = 'rcmComposeBody'; + + $attrib['name'] = '_message'; + + $isHtml = $HTML_MODE; + $out = $form_start ? "$form_start\n" : ''; $saveid = new html_hiddenfield(array('name' => '_draft_saveid', 'value' => $compose_mode==RCUBE_COMPOSE_DRAFT ? str_replace(array('<','>'), "", $MESSAGE->headers->messageID) : '')); @@ -508,7 +521,7 @@ // If desired, set this textarea to be editable by TinyMCE if ($isHtml) $attrib['class'] = 'mce_editor'; $textarea = new html_textarea($attrib); - $out .= $textarea->show($body); + $out .= $textarea->show($MESSAGE_BODY); $out .= $form_end ? "\n$form_end" : ''; $OUTPUT->set_env('composebody', $attrib['id']); @@ -908,7 +921,7 @@ $out = "\n"; $jslist = array(); - + if (is_array($_SESSION['compose']['attachments'])) { if ($attrib['deleteicon']) { @@ -972,7 +985,7 @@ 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', - $button->show(rcube_label('close'), array('class' => 'button', 'onclick' => "$('#$attrib[id]').hide()")) . ' ' . +// $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)")) ) ) diff --git a/skins/default/addressbook.css b/skins/default/addressbook.css index dc9e865..450b5bd 100644 --- a/skins/default/addressbook.css +++ b/skins/default/addressbook.css @@ -84,7 +84,7 @@ position: absolute; top: 85px; right: 20px; - bottom: 30px; + bottom: 20px; left: 225px; } @@ -92,7 +92,7 @@ { position: absolute; top: 85px; - bottom: 30px; + bottom: 20px; left: 20px; width: 195px; border: 1px solid #999999; @@ -109,8 +109,8 @@ #addresslist { position: absolute; - top: 0px; - bottom: 0px; + top: 0; + bottom: 0; border: 1px solid #999999; background-color: #F9F9F9; overflow: hidden; @@ -121,28 +121,10 @@ border-top: 1px solid #999; } -#importbox -{ - position: absolute; - top: 85px; - bottom: 30px; - left: 20px; - right: 20px; - border: 1px solid #999999; - background-color: #F2F2F2; - padding-bottom: 4ex; - overflow: auto; -} - #addresslist { left: 0px; width: 280px; -} - -#importbox a -{ - color: blue; } #directorylist diff --git a/skins/default/common.css b/skins/default/common.css index f3af5f1..9f386ff 100644 --- a/skins/default/common.css +++ b/skins/default/common.css @@ -128,6 +128,15 @@ /** common user interface objects */ +#mainscreen +{ + position: absolute; + top: 85px; + right: 20px; + bottom: 20px; + left: 20px; +} + #header { position: absolute; @@ -235,11 +244,9 @@ border: 1px solid #CCCCCC; } -#pagecontent +.box { - position: absolute; - top: 95px; - left: 20px; + border: 1px solid #999; } .boxtitle @@ -250,6 +257,7 @@ color: #333; font-size: 11px; font-weight: bold; + overflow: hidden; background: url(images/listheader.gif) top left repeat-x #CCC; } @@ -275,6 +283,18 @@ width: 100%; overflow-y: auto; overflow-x: hidden; +} + +.boxsubject +{ + position: absolute; + top: 0px; + left: 0px; + right: 0px; + overflow: hidden; + height: 22px; + border-bottom: 1px solid #999; + background: url(images/listheader.gif) top left repeat-x #CCC; } .boxfooter @@ -318,6 +338,7 @@ color: #444; font-size: 11px; text-shadow: white 1px 1px; + white-space: nowrap; } .pagenav a.button, @@ -728,3 +749,9 @@ { color: #999; } + +font.bold +{ + font-weight: bold; +} + \ No newline at end of file diff --git a/skins/default/functions.js b/skins/default/functions.js index b1ee9b0..3a97448 100644 --- a/skins/default/functions.js +++ b/skins/default/functions.js @@ -41,7 +41,8 @@ var div = document.getElementById('compose-div'), headers_div = document.getElementById('compose-headers-div'); row.style.display = (document.all && !window.opera) ? 'block' : 'table-row'; - div.style.top = parseInt(headers_div.offsetHeight, 10) + 'px'; + div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px'; + rcmail_resize_compose_body(); } return false; @@ -71,7 +72,8 @@ var div = document.getElementById('compose-div'), headers_div = document.getElementById('compose-headers-div'); row.style.display = 'none'; - div.style.top = parseInt(headers_div.offsetHeight, 10) + 'px'; + div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px'; + rcmail_resize_compose_body(); } return false; @@ -115,8 +117,30 @@ }; } - // fix editor position on some browsers - div.style.top = parseInt(headers_div.offsetHeight, 10) + 'px'; + $(window).resize(function() { + rcmail_resize_compose_body(); + }); + + $('#compose-container').resize(function() { + rcmail_resize_compose_body(); + }); + + div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px'; + $(window).resize(); +} + +function rcmail_resize_compose_body(elem) +{ + var ed, div = $('#compose-div'), w = div.width(), h = div.height(); + w = w-4; + h = h-25; + + $('#compose-body').width(w-(bw.ie || bw.opera || bw.safari ? 2 : 0)+'px').height(h+'px'); + + if (window.tinyMCE && tinyMCE.get('compose-body')) { + $('#compose-body_tbl').width((w+4)+'px').height(''); + $('#compose-body_ifr').width((w+2)+'px').height((h-54)+'px'); + } } /** @@ -132,7 +156,9 @@ listmenu:'listmenu', dragmessagemenu:'dragmessagemenu', groupmenu:'groupoptionsmenu', - mailboxmenu:'mailboxoptionsmenu' + mailboxmenu:'mailboxoptionsmenu', + composemenu:'composeoptionsmenu', + uploadform:'attachment-form' }; var obj; @@ -177,6 +203,20 @@ show_mailboxmenu: function(show) { this.show_popupmenu(this.mailboxmenu, 'mboxactionslink', show, true); +}, + +show_composemenu: function(show) +{ + this.show_popupmenu(this.composemenu, 'composemenulink', show, true); +}, + +show_uploadform: function(show) +{ + if (typeof show == 'object') // called as event handler + show = false; + if (!show) + $('input[type=file]').val(''); + this.show_popupmenu(this.uploadform, 'uploadformlink', show, true); }, show_searchmenu: function(show) @@ -297,24 +337,33 @@ this.show_groupmenu(false); else if (this.mailboxmenu && this.mailboxmenu.is(':visible') && target != rcube_find_object('mboxactionslink')) this.show_mailboxmenu(false); - else if (this.listmenu && this.listmenu.is(':visible') && target != rcube_find_object('listmenulink')) { - var menu = rcube_find_object('listmenu'); - while (target.parentNode) { - if (target.parentNode == menu) - return; - target = target.parentNode; - } + else if (this.composemenu && this.composemenu.is(':visible') && target != rcube_find_object('composemenulink') + && !this.target_overlaps(target, this.popupmenus.composemenu)) { + this.show_composemenu(false); + } + else if (this.uploadform && this.uploadform.is(':visible') && target != rcube_find_object('uploadformlink') + && !this.target_overlaps(target, this.popupmenus.uploadform)) { + this.show_uploadform(false); + } + else if (this.listmenu && this.listmenu.is(':visible') && target != rcube_find_object('listmenulink') + && !this.target_overlaps(target, this.popupmenus.listmenu)) { this.show_listmenu(false); } - else if (this.searchmenu && this.searchmenu.is(':visible') && target != rcube_find_object('searchmod')) { - var menu = rcube_find_object('searchmenu'); - while (target.parentNode) { - if (target.parentNode == menu) - return; - target = target.parentNode; - } + else if (this.searchmenu && this.searchmenu.is(':visible') && target != rcube_find_object('searchmod') + && !this.target_overlaps(target, this.popupmenus.searchmenu)) { this.show_searchmenu(false); } +}, + +target_overlaps: function (target, elementid) +{ + var element = rcube_find_object(elementid); + while (target.parentNode) { + if (target.parentNode == element) + return true; + target = target.parentNode; + } + return false; }, body_keypress: function(evt, p) @@ -386,6 +435,7 @@ if (rcmail.env.task == 'mail') { rcmail.addEventListener('menu-open', 'open_listmenu', rcmail_ui); rcmail.addEventListener('menu-save', 'save_listmenu', rcmail_ui); + rcmail.addEventListener('aftersend-attachment', 'show_uploadform', rcmail_ui); rcmail.gui_object('message_dragmenu', 'dragmessagemenu'); } } diff --git a/skins/default/ie6hacks.css b/skins/default/ie6hacks.css index f1d74e6..aaba2f2 100644 --- a/skins/default/ie6hacks.css +++ b/skins/default/ie6hacks.css @@ -55,6 +55,11 @@ background-image: url(images/icons/groupactions.gif); } +.pagenav +{ + width: 200px; +} + .pagenav a.button, .pagenav a.buttonPas { @@ -107,3 +112,8 @@ top: 21px; height: expression((parseInt(this.parentNode.offsetHeight)-24-parseInt(this.style.top?this.style.top:21))+'px'); } + +#directorylistbox +{ + height: expression((parseInt(document.documentElement.clientHeight)-105)+'px'); +} diff --git a/skins/default/iehacks.css b/skins/default/iehacks.css index d070ea3..7f65299 100644 --- a/skins/default/iehacks.css +++ b/skins/default/iehacks.css @@ -32,9 +32,15 @@ width: expression((parseInt(document.documentElement.clientWidth)-240)+'px'); } +#mainscreen +{ + width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-105)+'px'); +} + #folder-manager { - height: expression((parseInt(document.documentElement.clientHeight)-235)+'px'); + height: expression((parseInt(this.parentNode.offsetHeight)-105)+'px'); } #messagetoolbar @@ -71,23 +77,20 @@ z-index: 250; } -#mainscreen -{ - width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-96)+'px'); -} - -#directorylistbox -{ - height: expression((parseInt(document.documentElement.clientHeight)-115)+'px'); -} - #addresslist, #sectionslist, #identities-list, #mailleftcontainer, +#mailrightcontainer, +#compose-container, +#compose-attachments, #mailcontframe, -#identity-details +#mailboxlist-container, +#mailrightcontent, +#messageframe, +#identity-details, +#contacts-box, +#prefs-box { height: expression(parseInt(this.parentNode.offsetHeight)+'px'); } @@ -95,7 +98,6 @@ #mailrightcontainer { width: expression((parseInt(this.parentNode.offsetWidth)-170)+'px'); - height: expression(parseInt(this.parentNode.offsetHeight)+'px'); } #messagepartcontainer @@ -106,18 +108,17 @@ #mailrightcontent { - height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px'); width: 100%; +} + +#compose-div +{ + height: expression((parseInt(this.parentNode.offsetHeight)-1-parseInt(document.getElementById('compose-headers').offsetHeight))+'px'); } #partheader { width: expression((parseInt(document.documentElement.clientWidth)-240)+'px'); -} - -#mailboxlist-container -{ - height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px'); } #subscription-table @@ -137,7 +138,7 @@ { height: 18px; } - + #messagelist tbody tr.unroot td.subject { text-decoration: underline; @@ -146,7 +147,6 @@ #messageframe { width: expression((parseInt(this.parentNode.offsetWidth)-180)+'px'); - height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px'); overflow: hidden; } @@ -161,13 +161,6 @@ width: expression((parseInt(document.documentElement.clientWidth))+'px'); } -#compose-container -{ - width: expression((parseInt(document.documentElement.clientWidth)-230)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-120)+'px'); -} - -#compose-body, #compose-headers td textarea, #compose-headers td input { @@ -184,19 +177,7 @@ #addressscreen { width: expression((parseInt(document.documentElement.clientWidth)-245)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-115)+'px'); -} - -#prefsscreen -{ - width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-125)+'px'); -} - -#importbox -{ - width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-140)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-105)+'px'); } #contacts-table @@ -207,7 +188,6 @@ #contacts-box, #prefs-box { - height: expression(parseInt(this.parentNode.offsetHeight)+'px'); width: expression((parseInt(this.parentNode.offsetWidth)-555)+'px'); } diff --git a/skins/default/mail.css b/skins/default/mail.css index 8534e17..f78d982 100644 --- a/skins/default/mail.css +++ b/skins/default/mail.css @@ -246,29 +246,6 @@ font-size: 11px; } -td.formlinks a, -td.formlinks a:visited -{ - color: #999999; - font-size: 11px; - text-decoration: none; -} - -td.formlinks a, -td.formlinks a:visited -{ - color: #CC0000; -} - -#mainscreen -{ - position: absolute; - top: 85px; - right: 20px; - bottom: 30px; - left: 20px; -} - #mailleftcontainer { position: absolute; @@ -515,7 +492,7 @@ position: relative; white-space: nowrap; left: 4px; - height: 22px; + line-height: 22px; width: auto; min-width: 300px; } @@ -525,7 +502,6 @@ { display: block; float: left; - margin-top: 4px; font-size: 11px; } @@ -542,6 +518,7 @@ width: 15px; height: 15px; padding: 0; + margin-top: 4px; margin-right: 2px; overflow: hidden; background: url(images/mail_footer.png) 0 0 no-repeat transparent; @@ -1115,40 +1092,49 @@ /** message compose styles */ -#compose-toolbar -{ - white-space: nowrap; -} - #compose-container { position: absolute; - top: 90px; - left: 205px; - right: 25px; - bottom: 30px; - margin: 0px; -} - -#spellcheck-control -{ - text-align: right; - padding-top: 3px; + top: 0; + left: 185px; + right: 0; + bottom: 0; + margin: 0; } #compose-div { position: absolute; - top: 130px; - bottom: 30px; + top: 85px; + bottom: 0; + margin: 0; width: 100%; - vertical-align: top; - padding-top: 2px; + border: 1px solid #999; +} + +#compose-body +{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: 0; + font-size: 9pt; + border: none; + font-family: monospace; + resize: none; } #compose-headers { width: 100%; +} + +#compose-headers td.editfield +{ + padding-right: 5px; + min-width: 200px; } #compose-headers td.top @@ -1160,23 +1146,28 @@ #compose-subject td.title { width: 80px !important; - color: #666; font-size: 11px; font-weight: bold; padding-right: 10px; white-space: nowrap; } -#compose-body, #compose-headers td textarea, #compose-headers td input +{ + resize: none; + width: 100%; + border: 1px solid #999; +} + +#compose-headers td select { width: 100%; } #compose-headers td textarea { - height: 38px; + height: 32px; } #compose-cc, @@ -1186,28 +1177,60 @@ display: none; } -#compose-body +#formlinks { - min-height: 100px; - height: 100%; - font-size: 9pt; - font-family: monospace; + text-align: right; + white-space: nowrap; + width: 1%; + padding-left: 5px; +} + +#formlinks a, +#formlinks a:visited +{ + color: #999999; + font-size: 11px; + text-decoration: none; +} + +#formlinks a, +#formlinks a:visited +{ + color: #CC0000; +} + +#compose-editorfooter +{ + position: absolute; + right: 5px; + bottom: 0; + text-align: right; + line-height: 22px; +} + +#compose-buttons +{ + position: absolute; + left: 40px; + top: 1px; } #compose-attachments { position: absolute; - top: 100px; - left: 20px; + top: 0; + left: 0; + bottom: 0; width: 175px; + border: 1px solid #999; + background-color: #F9F9F9; } #compose-attachments ul { margin: 0px; padding: 0px; - border: 1px solid #CCCCCC; - background-color: #F9F9F9; + background-color: #FFF; list-style-image: none; list-style-type: none; } @@ -1230,16 +1253,6 @@ vertical-align: middle; } -#attachment-title -{ - color: #666666; - font-weight: bold; - font-size: 11px; - background: url(images/icons/attachment.png) top left no-repeat; - padding: 0px 0px 3px 18px; - margin-left: 3px; -} - #attachment-form { padding: 6px; @@ -1253,26 +1266,6 @@ #attachment-form div.buttons { margin-top: 4px; -} - -#editor-select -{ - float: left; - white-space: nowrap; - width: auto; -} - -#editor-select label -{ - color: #666; - font-size: 11px; - font-weight: bold; - padding-left: 20px; -} - -#editor-select input -{ - width: auto !important; } td.show-headers @@ -1304,11 +1297,6 @@ display: none; text-align: left; color: #333; -} - -font.bold -{ - font-weight: bold; } #listmenu diff --git a/skins/default/settings.css b/skins/default/settings.css index 7c2f8b3..de05c70 100644 --- a/skins/default/settings.css +++ b/skins/default/settings.css @@ -53,15 +53,10 @@ #folder-manager { position: absolute; - top: 95px; - left: 20px; - overflow: auto; -} - -#folder-manager -{ width: 600px; - bottom: 140px; + top: 0; + left: 0; + bottom: 105px; overflow: auto; border: 1px solid #999999; } @@ -195,16 +190,9 @@ { position: absolute; width: 600px; - height: 120px; - left: 20px; - bottom: 25px; -} - -div.settingsbox -{ - width: 600px; - margin-top: 20px; - border: 1px solid #999999; + height: 95px; + left: 0; + bottom: 0; } fieldset @@ -219,22 +207,13 @@ color: #999999; } -#prefsscreen -{ - position: absolute; - top: 95px; - right: 20px; - bottom: 30px; - left: 20px; -} - #identities-list, #sectionslist { position: absolute; - top: 0px; - left: 0px; - bottom: 0px; + top: 0; + left: 0; + bottom: 0; border: 1px solid #999999; background-color: #F9F9F9; overflow: hidden; @@ -254,9 +233,9 @@ #prefs-box { position: absolute; - top: 0px; - right: 0px; - bottom: 0px; + top: 0; + right: 0; + bottom: 0; border: 1px solid #999999; overflow: hidden; } diff --git a/skins/default/splitter.js b/skins/default/splitter.js index af66575..2a16b0b 100644 --- a/skins/default/splitter.js +++ b/skins/default/splitter.js @@ -82,6 +82,8 @@ this.p2.style.width = (new_width > 0 ? new_width : 0) + 'px'; } } + $(this.p2).resize(); + $(this.p1).resize(); }; /** diff --git a/skins/default/templates/addressbook.html b/skins/default/templates/addressbook.html index aa3f288..6c3d3c2 100644 --- a/skins/default/templates/addressbook.html +++ b/skins/default/templates/addressbook.html @@ -82,7 +82,5 @@ </div> -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> - </body> </html> diff --git a/skins/default/templates/compose.html b/skins/default/templates/compose.html index c413988..96f771f 100644 --- a/skins/default/templates/compose.html +++ b/skins/default/templates/compose.html @@ -5,8 +5,15 @@ <roundcube:include file="/includes/links.html" /> <link rel="stylesheet" type="text/css" href="/googiespell.css" /> <script type="text/javascript" src="/functions.js"></script> +<script type="text/javascript" src="/splitter.js"></script> +<style type="text/css"> +#compose-attachments { width: <roundcube:exp expression="!empty(cookie:composesplitterv) ? cookie:composesplitterv-5 : 175" />px; } +#compose-container { left: <roundcube:exp expression="!empty(cookie:composesplitterv) ? cookie:composesplitterv+5 : 185" />px; +<roundcube:exp expression="browser:ie ? ('width: expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:composesplitterv) ? cookie:composesplitterv+5 : 180).')+\\'px\\');') : ''" /> +} +</style> </head> -<body onload="rcmail_init_compose_form()"> +<body onload="rcmail_init_compose_form(); rcube_init_mail_ui()"> <roundcube:include file="/includes/taskbar.html" /> <roundcube:include file="/includes/header.html" /> @@ -14,89 +21,117 @@ <form name="form" action="./" method="post"> <div id="messagetoolbar"> -<table border="0" cellspacing="0" cellpadding="0"><tr> - <td id="compose-toolbar"> - <roundcube:button command="list" type="link" class="button back" classAct="button back" classSel="button backSel" title="backtolist" content=" " /> - <roundcube:button command="send" type="link" class="buttonPas send" classAct="button send" classSel="button sendSel" title="sendmessage" content=" " /> - <roundcube:button command="spellcheck" type="link" class="buttonPas spellcheck" classAct="button spellcheck" classSel="button spellcheckSel" title="checkspelling" content=" " /> - <roundcube:button command="add-attachment" type="link" class="buttonPas attach" classAct="button attach" classSel="button attachSel" title="addattachment" content=" " /> - <roundcube:button command="insert-sig" type="link" class="buttonPas insertsig" classAct="button insertsig" classSel="button insertsigSel" title="insertsignature" content=" " /> - <roundcube:button command="savedraft" type="link" class="buttonPas savedraft" classAct="button savedraft" classSel="button savedraftSel" title="savemessage" content=" " /> - <roundcube:container name="toolbar" id="compose-toolbar" /> - </td> -</tr></table> + <roundcube:button command="list" type="link" class="button back" classAct="button back" classSel="button backSel" title="backtolist" content=" " /> + <roundcube:button command="send" type="link" class="buttonPas send" classAct="button send" classSel="button sendSel" title="sendmessage" content=" " /> + <roundcube:button command="spellcheck" type="link" class="buttonPas spellcheck" classAct="button spellcheck" classSel="button spellcheckSel" title="checkspelling" content=" " /> + <roundcube:button command="insert-sig" type="link" class="buttonPas insertsig" classAct="button insertsig" classSel="button insertsigSel" title="insertsignature" content=" " /> + <roundcube:button command="savedraft" type="link" class="buttonPas savedraft" classAct="button savedraft" classSel="button savedraftSel" title="savemessage" content=" " /> + <roundcube:container name="toolbar" id="compose-toolbar" /> </div> + +<div id="mainscreen"> + +<div id="compose-attachments"> +<div class="boxtitle"><roundcube:label name="attachments" /></div> +<div class="boxlistcontent"> + <roundcube:object name="composeAttachmentList" deleteIcon="/images/icons/delete.png" cancelIcon="/images/icons/delete.png" loadingIcon="/images/display/loading_blue.gif" /> +</div> +<div class="boxfooter"> + <roundcube:button name="uploadform" id="uploadformlink" type="link" title="addattachment" class="button addgroup" onclick="rcmail_ui.show_uploadform();return false" content=" " /> +</div> +</div> + +<script type="text/javascript"> + var composesplitv = new rcube_splitter({id:'composesplitterv', p1: 'compose-attachments', p2: 'compose-container', orientation: 'v', relative: true, start: 165}); + rcmail.add_onload('composesplitv.init()'); +</script> <div id="compose-container"> <div id="compose-headers-div" style="width: 100%;"> - <table border="0" cellspacing="0" cellpadding="1" id="compose-headers" summary=""> - <tbody> + <table border="0" cellspacing="0" cellpadding="1" id="compose-headers"> <tr> - <td class="title"><label for="_from"><roundcube:label name="from" /></label></td> - <td><roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" /></td> + <td class="title"><label for="_from"><roundcube:label name="from" /></label></td> + <td class="editfield"> + <roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" /> + </td> + <td id="formlinks"> + <a href="#cc" onclick="return rcmail_show_header_form('cc')" id="cc-link"><roundcube:label name="addcc" /></a> + <span class="separator">|</span> + <a href="#bcc" onclick="return rcmail_show_header_form('bcc')" id="bcc-link"><roundcube:label name="addbcc" /></a> + <span class="separator">|</span> + <a href="#reply-to" onclick="return rcmail_show_header_form('replyto')" id="replyto-link"><roundcube:label name="addreplyto" /></a> + </td> </tr><tr> - <td class="title top"><label for="_to"><roundcube:label name="to" /></label></td> - <td><roundcube:object name="composeHeaders" part="to" form="form" id="_to" cols="70" rows="2" tabindex="2" /></td> + <td class="title top"><label for="_to"><roundcube:label name="to" /></label></td> + <td colspan="2" class="editfield"> + <roundcube:object name="composeHeaders" part="to" form="form" id="_to" cols="70" rows="2" tabindex="2" /> + </td> </tr><tr id="compose-cc"> - <td class="title top"><a href="#cc" onclick="return rcmail_hide_header_form('cc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a> - <label for="_cc"><roundcube:label name="cc" /></label></td> - <td><roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="2" tabindex="3" /></td> + <td class="title top"> + <a href="#cc" onclick="return rcmail_hide_header_form('cc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a> + <label for="_cc"><roundcube:label name="cc" /></label> + </td> + <td colspan="2" class="editfield"> + <roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="2" tabindex="3" /> + </td> </tr><tr id="compose-bcc"> - <td class="title top"><a href="#bcc" onclick="return rcmail_hide_header_form('bcc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a> - <label for="_bcc"><roundcube:label name="bcc" /></label></td> - <td><roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="2" tabindex="4" /></td> + <td class="title top"> + <a href="#bcc" onclick="return rcmail_hide_header_form('bcc');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a> + <label for="_bcc"><roundcube:label name="bcc" /></label> + </td> + <td colspan="2" class="editfield"> + <roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="2" tabindex="4" /> + </td> </tr><tr id="compose-replyto"> - <td class="title top"><a href="#replyto" onclick="return rcmail_hide_header_form('replyto');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a> - <label for="_replyto"><roundcube:label name="replyto" /></label></td> - <td><roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="5" /></td> - </tr><tr id="compose-links"> - <td></td> - <td class="formlinks"> - <a href="#cc" onclick="return rcmail_show_header_form('cc')" id="cc-link"><roundcube:label name="addcc" /></a> - <span class="separator">|</span> - <a href="#bcc" onclick="return rcmail_show_header_form('bcc')" id="bcc-link"><roundcube:label name="addbcc" /></a> - <span class="separator">|</span> - <a href="#reply-to" onclick="return rcmail_show_header_form('replyto')" id="replyto-link"><roundcube:label name="addreplyto" /></a> - </td> - </tr><tr> - <td class="title"><label for="compose-subject"><roundcube:label name="subject" /></label></td> - <td><roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="6" /></td> - </tr><tr> - <td class="title"><roundcube:label name="editortype" /></td> - <td> - <div id="editor-select"> - <roundcube:object name="editorSelector" editorid="compose-body" tabindex="7" /> - <label for="rcmcomposepriority"><roundcube:label name="priority" /></label> - <roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" /> - <label for="rcmcomposereceipt"><roundcube:label name="returnreceipt" /></label> - <roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" /> - </div> - <div id="spellcheck-control"></div> - </td> - </tr> - </tbody> - </table> + <td class="title top"> + <a href="#replyto" onclick="return rcmail_hide_header_form('replyto');"><img src="/images/icons/minus.gif" alt="" title="<roundcube:label name='delete' />" /></a> + <label for="_replyto"><roundcube:label name="replyto" /></label> + </td> + <td colspan="2" class="editfield"> + <roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="5" /> + </td> + </tr><tr> + <td class="title"><label for="compose-subject"><roundcube:label name="subject" /></label></td> + <td colspan="2" class="editfield"> + <roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="6" /> + </td> + </table> </div> <div id="compose-div"> - <roundcube:object name="composeBody" id="compose-body" form="form" cols="70" rows="20" tabindex="8" /> - <table border="0" cellspacing="0" summary="" style="width:100%; margin-top: 5px;"><tbody> - <tr> - <td style="white-space: nowrap"> - <roundcube:button type="input" command="send" class="button mainaction" label="sendmessage" tabindex="9" /> - <roundcube:button type="input" command="list" class="button" label="cancel" tabindex="10" /> - </td> - <td style="text-align:right; white-space: nowrap"> - <label><roundcube:label name="savesentmessagein" />: <roundcube:object name="storetarget" maxlength="30" tabindex="11" /></label> - </td> - </tr> - </tbody></table> + <div class="boxlistcontent" style="overflow: hidden; top: 0"> + <roundcube:object name="composeBody" id="compose-body" form="form" cols="70" rows="20" tabindex="7" /> + </div> + <div class="boxfooter"> + <roundcube:button name="messageoptions" id="composemenulink" type="link" title="messageoptions" class="button groupactions" onclick="rcmail_ui.show_composemenu();return false" content=" " /> + <span id="compose-buttons"> + <roundcube:button type="input" command="send" class="button mainaction" label="sendmessage" tabindex="8" /> + <roundcube:button type="input" command="list" class="button" label="cancel" tabindex="9" /> + </span> + <div id="compose-editorfooter" class="pagenav"> + <span id="spellcheck-control" style="margin-right: 10px"></span> + <span> + <roundcube:label name="editortype" /> + <roundcube:object name="editorSelector" editorid="compose-body" tabindex="10" /> + </span> + </div> + </div> </div> </div> -<div id="compose-attachments"> -<div id="attachment-title"><roundcube:label name="attachments" /></div> -<roundcube:object name="composeAttachmentList" deleteIcon="/images/icons/delete.png" cancelIcon="/images/icons/delete.png" loadingIcon="/images/display/loading_blue.gif" /> -<p><roundcube:button command="add-attachment" imagePas="/images/buttons/add_pas.png" imageSel="/images/buttons/add_sel.png" imageAct="/images/buttons/add_act.png" width="23" height="18" title="addattachment" /></p> +</div> + +<div id="composeoptionsmenu" class="popupmenu"> + <table> + <tr><td><label for="rcmcomposereceipt"><roundcube:label name="returnreceipt" />:</label></td> + <td><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" /></td> + </tr> + <tr><td><label for="rcmcomposepriority"><roundcube:label name="priority" />:</label></td> + <td><roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" /></td> + </tr> + <tr><td><label><roundcube:label name="savesentmessagein" />:</label></td> + <td><roundcube:object name="storetarget" maxlength="30" /></td> + </tr> + </table> </div> </form> diff --git a/skins/default/templates/editidentity.html b/skins/default/templates/editidentity.html index 895859c..576a0d8 100644 --- a/skins/default/templates/editidentity.html +++ b/skins/default/templates/editidentity.html @@ -19,7 +19,7 @@ <roundcube:include file="/includes/header.html" /> <roundcube:include file="/includes/settingstabs.html" /> -<div id="prefsscreen"> +<div id="mainscreen"> <div id="identities-list"> <div id="identity-title" class="boxtitle"><roundcube:label name="identities" /></div> @@ -50,8 +50,6 @@ </div> </div> - -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> </body> </html> diff --git a/skins/default/templates/error.html b/skins/default/templates/error.html index f21c684..36862ce 100644 --- a/skins/default/templates/error.html +++ b/skins/default/templates/error.html @@ -12,7 +12,5 @@ $__page_content </div> -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> - </body> </html> diff --git a/skins/default/templates/identities.html b/skins/default/templates/identities.html index aef8dce..f40f394 100644 --- a/skins/default/templates/identities.html +++ b/skins/default/templates/identities.html @@ -19,7 +19,7 @@ <roundcube:include file="/includes/header.html" /> <roundcube:include file="/includes/settingstabs.html" /> -<div id="prefsscreen"> +<div id="mainscreen"> <div id="identities-list"> <div id="identity-title" class="boxtitle"><roundcube:label name="identities" /></div> @@ -43,8 +43,6 @@ </div> </div> - -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> </body> </html> diff --git a/skins/default/templates/importcontacts.html b/skins/default/templates/importcontacts.html index 08e5afe..422b70f 100644 --- a/skins/default/templates/importcontacts.html +++ b/skins/default/templates/importcontacts.html @@ -9,7 +9,7 @@ <roundcube:include file="/includes/taskbar.html" /> <roundcube:include file="/includes/header.html" /> -<div id="importbox"> +<div id="mainscreen" class="box"> <div class="boxtitle"><roundcube:label name="importcontacts" /></div> <div class="boxcontent"> @@ -21,8 +21,6 @@ </div> </div> - -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> </body> </html> diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html index ae3dac1..9b72575 100644 --- a/skins/default/templates/mail.html +++ b/skins/default/templates/mail.html @@ -230,7 +230,5 @@ </div> </div> -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> - </body> </html> diff --git a/skins/default/templates/managefolders.html b/skins/default/templates/managefolders.html index a61904b..164d56f 100644 --- a/skins/default/templates/managefolders.html +++ b/skins/default/templates/managefolders.html @@ -13,6 +13,8 @@ <form name="subscriptionform" action="./" onsubmit="rcmail.command('create-folder');return false;"> +<div id="mainscreen"> + <div id="folder-manager"> <roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" cellpadding="1" cellspacing="0" summary="Folder subscription table" class="records-table" @@ -20,8 +22,7 @@ renameIcon="/images/icons/rename.png" /> </div> -<div id="bottomboxes"> -<div class="settingsbox"> +<div id="bottomboxes" class="box"> <div class="boxtitle"><roundcube:label name="createfolder" /></div> <div class="boxcontent"> @@ -35,8 +36,6 @@ </div> </form> - -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> </body> </html> diff --git a/skins/default/templates/message.html b/skins/default/templates/message.html index c154dc4..419241a 100644 --- a/skins/default/templates/message.html +++ b/skins/default/templates/message.html @@ -79,7 +79,5 @@ </ul> </div> -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> - </body> </html> diff --git a/skins/default/templates/messageerror.html b/skins/default/templates/messageerror.html index 26df8ba..3712217 100644 --- a/skins/default/templates/messageerror.html +++ b/skins/default/templates/messageerror.html @@ -72,8 +72,6 @@ </ul> </div> -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> - </body> <roundcube:endif /> diff --git a/skins/default/templates/plugin.html b/skins/default/templates/plugin.html index 03f0203..cec7013 100644 --- a/skins/default/templates/plugin.html +++ b/skins/default/templates/plugin.html @@ -13,7 +13,7 @@ <roundcube:include file="/includes/settingstabs.html" /> <roundcube:endif /> -<div id="pagecontent"> +<div id="mainscreen"> <roundcube:object name="plugin.body" /> </div> diff --git a/skins/default/templates/settings.html b/skins/default/templates/settings.html index 2e00635..0cd623f 100644 --- a/skins/default/templates/settings.html +++ b/skins/default/templates/settings.html @@ -20,7 +20,7 @@ <roundcube:include file="/includes/header.html" /> <roundcube:include file="/includes/settingstabs.html" /> -<div id="prefsscreen"> +<div id="mainscreen"> <div id="sectionslist"> <roundcube:object name="sectionslist" id="sections-table" class="records-table" cellspacing="0" /> @@ -36,8 +36,6 @@ </div> </div> - -<div id="rcmversion"><roundcube:object name="productname" /> <roundcube:object name="version" /></div> </body> </html> -- Gitblit v1.9.1