diff options
Diffstat (limited to 'skins')
| -rw-r--r-- | skins/classic/common.css | 5 | ||||
| -rw-r--r-- | skins/classic/functions.js | 85 | ||||
| -rw-r--r-- | skins/classic/mail.css | 183 | ||||
| -rw-r--r-- | skins/classic/templates/mail.html | 54 | ||||
| -rw-r--r-- | skins/classic/watermark.html | 16 | ||||
| -rw-r--r-- | skins/larry/images/listicons.png | bin | 12535 -> 12614 bytes | |||
| -rw-r--r-- | skins/larry/mail.css | 239 | ||||
| -rw-r--r-- | skins/larry/styles.css | 2 | ||||
| -rw-r--r-- | skins/larry/templates/mail.html | 29 | ||||
| -rw-r--r-- | skins/larry/ui.js | 125 |
10 files changed, 542 insertions, 196 deletions
diff --git a/skins/classic/common.css b/skins/classic/common.css index 54b1c9cc9..01ed26845 100644 --- a/skins/classic/common.css +++ b/skins/classic/common.css @@ -26,10 +26,6 @@ select, input, textarea, button font-family: inherit; } -html.mozilla select { - padding: 2px 1px; -} - th { font-weight: normal; @@ -462,7 +458,6 @@ body.iframe .boxtitle height: 11px; padding: 0; margin: 1px; - margin-top: 2px; overflow: hidden; background: url(images/pagenav.gif) 0 0 no-repeat transparent; opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ diff --git a/skins/classic/functions.js b/skins/classic/functions.js index 2e793394e..df181c730 100644 --- a/skins/classic/functions.js +++ b/skins/classic/functions.js @@ -317,6 +317,11 @@ show_listmenu: function(p) $(this).prop('checked', $.inArray(this.value, rcmail.env.listcols) != -1); }); + $.each(['widescreen', 'desktop', 'list'], function() { + $('input[name="layout"][value="' + this + '"]').prop('checked', rcmail.env.layout == this); + }); + $('#listoptions-columns', $dialog)[rcmail.env.layout == 'widescreen' ? 'hide' : 'show'](); + buttons[rcmail.gettext('save')] = function(e) { $dialog.dialog('close', e); self.save_listmenu(); @@ -354,10 +359,11 @@ save_listmenu: function() var sort = $('input[name="sort_col"]:checked').val(), ord = $('input[name="sort_ord"]:checked').val(), thread = $('input[name="view"]:checked').val(), + layout = $('input[name="layout"]:checked').val(), cols = $('input[name="list_col[]"]:checked') .map(function(){ return this.value; }).get(); - rcmail.set_list_options(cols, sort, ord, thread == 'thread' ? 1 : 0); + rcmail.set_list_options(cols, sort, ord, thread == 'thread' ? 1 : 0, layout); }, spellmenu: function(show) @@ -456,42 +462,61 @@ body_keydown: function(e) } }, -switch_preview_pane: function(elem) +// Mail view layout initialization and change handler +set_layout: function(p) { - var uid, prev_frm = $('#mailpreviewframe'); + var layout = p ? p.new_layout : rcmail.env.layout, + top = $('#mailcontframe'), + bottom = $('#mailpreviewframe'); - if (elem.checked) { - rcmail.env.contentframe = 'messagecontframe'; - if (mailviewsplit.layer) { - mailviewsplit.resize(); - mailviewsplit.layer.elm.style.display = ''; + if (p) + $('#mailrightcontainer').removeClass().addClass(layout); + + if (!this.mailviewsplitv) { + this.mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailleftcontainer', p2: 'mailrightcontainer', + orientation: 'v', relative: true, start: 165, callback: rcube_render_mailboxlist }); + this.mailviewsplitv.init(); + } + + $('#mailviewsplitter')[layout == 'desktop' ? 'show' : 'hide'](); + $('#mailviewsplitter2')[layout == 'widescreen' ? 'show' : 'hide'](); + $('#mailpreviewframe')[layout != 'list' ? 'show' : 'hide'](); + rcmail.env.contentframe = layout == 'list' ? null : 'messagecontframe'; + + if (layout == 'widescreen') { + $('#countcontrols').detach().appendTo($('#messagelistheader')); + top.css({height: 'auto', width: 400}); + bottom.css({top: 0, left: 410, height: 'auto'}).show(); + if (!this.mailviewsplit2) { + this.mailviewsplit2 = new rcube_splitter({id:'mailviewsplitter2', p1: 'mailcontframe', p2: 'mailpreviewframe', + orientation: 'v', relative: true, start: 405}); + this.mailviewsplit2.init(); } else - mailviewsplit.init(); - - if (bw.opera) { - $('#messagelistcontainer').css({height: ''}); + this.mailviewsplit2.resize(); + } + else if (layout == 'desktop') { + top.css({height: 200, width: '100%'}); + bottom.css({left: 0, top: 210, height: 'auto'}).show(); + if (!this.mailviewsplit) { + this.mailviewsplit = new rcube_splitter({id:'mailviewsplitter', p1: 'mailcontframe', p2: 'mailpreviewframe', + orientation: 'h', relative: true, start: 205}); + this.mailviewsplit.init(); } - prev_frm.show(); - - if (uid = rcmail.message_list.get_single_selection()) - rcmail.show_message(uid, false, true); + else + this.mailviewsplit.resize(); } - else { - prev_frm.hide(); - $('#mailcontframe').css({height: 'auto', bottom: 0}); - if (bw.opera) - $('#messagelistcontainer').css({height: 'auto'}); - if (mailviewsplit.layer) - mailviewsplit.layer.elm.style.display = 'none'; - - rcmail.env.contentframe = null; - rcmail.show_contentframe(false); + else { // layout == 'list' + top.css({height: 'auto', width: '100%'}); + bottom.hide(); } - rcmail.command('save-pref', {name: 'preview_pane', value: (elem.checked?1:0)}); + if (p && p.old_layout == 'widescreen') { + $('#countcontrols').detach().appendTo($('#messagelistfooter')); + } }, + /* Message composing */ init_compose_form: function() { @@ -1031,7 +1056,11 @@ function rcube_init_mail_ui() setTimeout(function() { rcmail.message_list.resize(); }, 10); }); - if (rcmail.env.action == 'compose') { + if (rcmail.env.action == 'list' || !rcmail.env.action) { + rcmail.addEventListener('layout-change', 'set_layout', rcmail_ui); + rcmail_ui.set_layout(); + } + else if (rcmail.env.action == 'compose') { rcmail_ui.init_compose_form(); rcmail.addEventListener('compose-encrypted', function(e) { $("a.button.encrypt")[(e.active ? 'addClass' : 'removeClass')]('selected'); diff --git a/skins/classic/mail.css b/skins/classic/mail.css index f22623c95..d275c054a 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -368,11 +368,12 @@ #mailpreviewframe { position: absolute; - width: 100%; + right: 0; top: 205px; bottom: 0px; border: 1px solid #999999; background-color: #F9F9F9; + display: none; } #messagecontframe @@ -570,7 +571,6 @@ table.messagelist width: 100%; display: table; table-layout: fixed; - border-collapse: collapse; border-spacing: 0; z-index: 1; } @@ -668,10 +668,10 @@ table.messagelist.fixedcopy cursor: pointer; } -.messagelist tr > .flag span, -.messagelist tr > .status span, -.messagelist tr > .attachment span, -.messagelist tr > .priority span +.messagelist tr .flag span, +.messagelist tr .status span, +.messagelist tr .attachment span, +.messagelist tr .priority span { display: block; width: 15px; @@ -682,18 +682,18 @@ table.messagelist.fixedcopy .messagelist tr td div.collapsed, .messagelist tr td div.expanded, .messagelist tr > .threads .listmenu, -.messagelist tr > .attachment span.attachment, -.messagelist tr > .attachment span.report, -.messagelist tr > .attachment span.encrypted, +.messagelist tr .attachment span.attachment, +.messagelist tr .attachment span.report, +.messagelist tr .attachment span.encrypted, .messagelist tr > .priority span.priority, .messagelist tr > .priority span.prio1, .messagelist tr > .priority span.prio2, .messagelist tr > .priority span.prio3, .messagelist tr > .priority span.prio4, .messagelist tr > .priority span.prio5, -.messagelist tr > .flag span.flagged, -.messagelist tr > .flag span.unflagged, -.messagelist tr > .flag span.unflagged:hover, +.messagelist tr .flag span.flagged, +.messagelist tr .flag span.unflagged, +.messagelist tr:hover .flag span.unflagged, .messagelist tr > .status span.status, .messagelist tr > .status span.msgicon, .messagelist tr > .status span.deleted, @@ -713,17 +713,17 @@ table.messagelist.fixedcopy background: url(images/messageicons.png) center no-repeat; } -.messagelist tr > .attachment span.attachment +.messagelist tr .attachment span.attachment { background-position: 0 -170px; } -.messagelist tr > .attachment span.report +.messagelist tr .attachment span.report { background-position: 0 -255px; } -.messagelist tr > .attachment span.encrypted +.messagelist tr .attachment span.encrypted { background-position: 0 -418px; } @@ -758,17 +758,18 @@ table.messagelist.fixedcopy background-position: 0 -290px; } -.messagelist tr.flaggedroot td.flag span +.messagelist tr .flag span.flagged { - background-position: 0 -136px; + background-position: 0 -153px; } -.messagelist tr > .flag span.flagged +.messagelist tr:hover .flag span.unflagged { - background-position: 0 -153px; + background-position: 0 -136px; } -.messagelist tr > .flag span.unflagged:hover +.messagelist tr.flaggedroot .flag span, +.messagelist tr.flaggedroot .flag span.unflagged { background-position: 0 -136px; } @@ -796,10 +797,10 @@ table.messagelist.fixedcopy } .messagelist tr > .status span.msgicon, -.messagelist tr > .flag span.unflagged, +.messagelist tr .flag span.unflagged, .messagelist tr > .status span.unreadchildren { - background-position: 0 17px; /* no icon */ + background-position: 0 18px; /* no icon */ } .messagelist tr > .status span.msgicon:hover @@ -928,7 +929,7 @@ table.messagelist.fixedcopy /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ .messagelist tbody tr.focused > td:first-child { - border-left: 4px solid #d4d4d4; + border-left: 2px solid #d4d4d4; padding-left: 4px; } @@ -1751,3 +1752,139 @@ input.from_address top: 45px; position: absolute; } + +/**** Styles for widescreen (3-column) view ****/ + +.widescreen #mailview-top { + bottom: 0; + width: 400px; + height: auto; +} + +.widescreen #mailview-bottom { + left: 412px; + top:0; + border: 1px solid #a3a3a3; +} + +#messagelistheader, +.widescreen #messagelistfooter #countcontrols, +.widescreen .messagelist > thead, +.widescreen .messagelist .branch, +.widescreen table.fixedcopy { + display: none; +} + +#messagelistcontainer { + top: 0; +} + +.widescreen #messagelistcontainer { + top: 21px; + overflow-x: hidden; +} + +.widescreen #mailpreviewframe { + top: 0; +} + +.widescreen #messagelistheader { + display: block; + top: 0; + white-space: nowrap; + border-top: 0; + border-bottom: 1px solid #999; + height: 20px; +} + +.widescreen #messagelistheader .listmenu { + display: inline-block; + vertical-align: middle; + line-height: 16px; + width: 15px; + background: url(images/messageicons.png) 4px -236px no-repeat; + cursor: pointer; + overflow: hidden; + text-indent: -5000px; + padding: 2px 4px; +} + +.widescreen .messagelist td { + border-left: 0; + vertical-align: top; + padding: 3px 1px 1px !important; +} + +.widescreen .messagelist td.subject { + width: 99%; + white-space: wrap; + position: relative; /* for span.date positioning in Firefox */ +} + +.widescreen .messagelist td.threads { + width: 14px; + vertical-align: middle; +} + +.widescreen .messagelist td.flags { + width: 20px; +} + +.widescreen .messagelist td.subject span { + line-height: 16px; +} + +.widescreen .messagelist td.subject span.date { + right: 2px; + top: 3px; + position: absolute; + color: #666; +} + +.widescreen .messagelist td.subject span.fromto { + padding-left: 18px; + display: block; + margin-right: 90px; + overflow: hidden; + text-overflow: ellipsis; + color: #666; +} + +.widescreen .messagelist tr.flagged td.subject span.date, +.widescreen .messagelist tr.flagged td.subject span.fromto { + color: #ff0000; +} + +.widescreen .messagelist tr.selected td.subject span.date, +.widescreen .messagelist tr.selected td.subject span.fromto { + color: #fff; +} + +.widescreen .messagelist tr.deleted td.subject span.date, +.widescreen .messagelist tr.deleted td.subject span.fromto { + color: #ccc; +} + +.widescreen .messagelist td.subject span.subject { + clear: both; + display: block; + font-size: 13px; + overflow: hidden; + text-overflow: ellipsis; +} + +.widescreen .messagelist td.flags span { + width: 20px; + height: 18px; + display: block; +} + +.widescreen .messagelist td.flags span.flag { + cursor: pointer; +} + +.widescreen .messagelist tr td.subject span.msgicon, +.widescreen .messagelist tr td.subject span.unreadchildren { + width: 18px; + margin: 0; +} diff --git a/skins/classic/templates/mail.html b/skins/classic/templates/mail.html index 62fd13ed1..07558b588 100644 --- a/skins/classic/templates/mail.html +++ b/skins/classic/templates/mail.html @@ -6,9 +6,12 @@ <script type="text/javascript" src="/splitter.js"></script> <script type="text/javascript" src="/functions.js"></script> <style type="text/css"> -<roundcube:if condition="config:preview_pane == true" /> +<roundcube:if condition="env:layout == 'widescreen'" /> +#mailcontframe { width: <roundcube:exp expression="!empty(cookie:mailviewsplitter2) ? cookie:mailviewsplitter2-5 : 395" />px; } +#mailpreviewframe { left: <roundcube:exp expression="!empty(cookie:mailviewsplitter2) ? cookie:mailviewsplitter2+5 : 405" />px; display: block; } +<roundcube:elseif condition="env:layout != 'list'" /> #mailcontframe { height: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter-5 : 195" />px; } -#mailpreviewframe { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+5 : 205" />px; } +#mailpreviewframe { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+5 : 205" />px; display: block; } <roundcube:endif /> #mailleftcontainer { width: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv-5 : 160" />px; } #mailrightcontainer { left: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv+5 : 170" />px; } @@ -35,20 +38,16 @@ <roundcube:object name="quotaDisplay" display="image" width="100" height="14" id="quotadisplay" /> </div> <roundcube:endif /> + </div> </div> - -<script type="text/javascript"> - var mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailleftcontainer', p2: 'mailrightcontainer', orientation: 'v', relative: true, start: 165, callback: rcube_render_mailboxlist }); - rcmail.add_onload('mailviewsplitv.init()'); -</script> - </div> -<div id="mailrightcontainer"> +<div id="mailrightcontainer" class="<roundcube:var name="env:layout" />"> <div id="mailrightcontent"> <div id="mailcontframe"> -<div id="messagelistcontainer" class="boxlistcontent" style="top:0"> +<div id="messagelistheader" class="boxfooter"><roundcube:object name="listmenulink" optionsmenuIcon="true" /></div> +<div id="messagelistcontainer" class="boxlistcontent"> <roundcube:object name="messages" id="messagelist" class="messagelist fixedheader" @@ -57,7 +56,7 @@ summary="Message list" optionsmenuIcon="true" /> </div> -<div class="boxfooter"> +<div id="messagelistfooter" class="boxfooter"> <div id="listcontrols" class="pagenav"> <span><roundcube:label name="select" />: </span> <roundcube:button command="select-all" type="link" title="all" class="buttonPas all" classAct="button all" classSel="button allsel" content=" " /> @@ -72,11 +71,6 @@ <roundcube:button command="expand-unread" type="link" title="expand-unread" class="buttonPas expand-unread" classAct="button expand-unread" classSel="button expand-unreadsel" content=" " /> <roundcube:button command="collapse-all" type="link" title="collapse-all" class="buttonPas collapse-all" classAct="button collapse-all" classSel="button collapse-allsel" content=" " /> <roundcube:endif /> - <roundcube:if condition="!in_array('preview_pane', (array)config:dont_override)" /> - <span style="margin-left: 12px"><label for="prevpaneswitch"><span><roundcube:label name="previewpane" />:</span></label> - <input type="checkbox" id="prevpaneswitch" onclick="rcmail_ui.switch_preview_pane(this)"<roundcube:exp expression="config:preview_pane == true ? ' checked=checked' : ''" /> /> - </span> - <roundcube:endif /> </div> <div id="countcontrols" class="pagenav"> <roundcube:object name="messageCountDisplay" /> @@ -89,20 +83,13 @@ </div> </div> -<script type="text/javascript"> - var mailviewsplit = new rcube_splitter({id:'mailviewsplitter', p1: 'mailcontframe', p2: 'mailpreviewframe', orientation: 'h', relative: true, start: 205}); -<roundcube:if condition="config:preview_pane == true" /> - rcmail.add_onload('mailviewsplit.init()'); -<roundcube:endif /> -</script> - -<div id="mailpreviewframe"<roundcube:if condition="config:preview_pane != true" /> style="display:none"<roundcube:endif />> +<div id="mailpreviewframe"> <roundcube:object name="messagecontentframe" id="messagecontframe" width="100%" height="100%" frameborder="0" src="/watermark.html" /> </div> -</div> </div> </div> +</div> <roundcube:include file="/includes/messagetoolbar.html" /> @@ -153,8 +140,17 @@ </div> <div id="listmenu" style="display: none"> +<roundcube:if condition="!in_array('layout', (array)config:dont_override)" /> +<fieldset id="listoptions-layout" class="floating"><legend><roundcube:label name="layout" /></legend> + <ul class="toolbarmenu"> + <li><label><input type="radio" name="layout" value="widescreen" /> <span><roundcube:label name="layoutwidescreen" /></span></label></li> + <li><label><input type="radio" name="layout" value="desktop" /> <span><roundcube:label name="layoutdesktop" /></span></label></li> + <li><label><input type="radio" name="layout" value="list" /> <span><roundcube:label name="layoutlist" /></span></label></li> + </ul> +</fieldset> +<roundcube:endif /> <roundcube:if condition="env:threads" /> -<fieldset class="thinbordered"><legend><roundcube:label name="listmode" /></legend> +<fieldset id="listoptions-view" class="thinbordered"><legend><roundcube:label name="listmode" /></legend> <ul class="toolbarmenu"> <li><label><input type="radio" name="view" value="list" id="view_default" /> <span><roundcube:label name="list" /></span></label></li> <li><label><input type="radio" name="view" value="thread" id="view_thread" /> <span><roundcube:label name="threads" /></span></label></li> @@ -162,7 +158,7 @@ </fieldset> <roundcube:endif /> <roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" /> -<fieldset class="thinbordered"><legend><roundcube:label name="listcolumns" /></legend> +<fieldset id="listoptions-columns" class="thinbordered"><legend><roundcube:label name="listcolumns" /></legend> <ul class="toolbarmenu"> <li><label><input type="checkbox" name="list_col[]" value="threads" id="cols_threads" checked="checked" disabled="disabled" /> <span class="disabled"><roundcube:label name="threads" /></span></label></li> <li><label><input type="checkbox" name="list_col[]" value="subject" id="cols_subject" checked="checked" disabled="disabled" /> <span class="disabled"><roundcube:label name="subject" /></span></label></li> @@ -181,7 +177,7 @@ </fieldset> <roundcube:endif /> <roundcube:if condition="!in_array('message_sort_col', (array)config:dont_override)" /> -<fieldset class="thinbordered"><legend><roundcube:label name="listsorting" /></legend> +<fieldset id="listoptions-sortcol" class="thinbordered"><legend><roundcube:label name="listsorting" /></legend> <ul class="toolbarmenu"> <li><label><input type="radio" name="sort_col" value="" id="sort_default" /> <span><roundcube:label name="nonesort" /></span></label></li> <li><label><input type="radio" name="sort_col" value="arrival" id="sort_arrival" /> <span><roundcube:label name="arrival" /></span></label></li> @@ -197,7 +193,7 @@ </fieldset> <roundcube:endif /> <roundcube:if condition="!in_array('message_sort_order', (array)config:dont_override)" /> -<fieldset><legend><roundcube:label name="listorder" /></legend> +<fieldset id="listoptions-sortord" ><legend><roundcube:label name="listorder" /></legend> <ul class="toolbarmenu"> <li><label><input type="radio" name="sort_ord" value="ASC" id="sort_asc" /> <span><roundcube:label name="asc" /></span></label></li> <li><label><input type="radio" name="sort_ord" value="DESC" id="sort_desc" /> <span><roundcube:label name="desc" /></span></label></li> diff --git a/skins/classic/watermark.html b/skins/classic/watermark.html index c16a50357..835489b53 100644 --- a/skins/classic/watermark.html +++ b/skins/classic/watermark.html @@ -2,18 +2,14 @@ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> - <!--[if IE]> <style type="text/css"> - body { width: expression((parseInt(document.documentElement.clientWidth)-20)+'px'); } + html, body { height: 100%; background-color: #F2F2F2; margin: 0; } + div { height: 100%; display: flex; align-items: center; justify-content: center; } </style> - <![endif]--> </head> - -<body style="background-color:#F2F2F2;"> - -<div style="margin:20px auto; text-align:center"> -<img src="images/watermark.gif" width="260" height="228" alt="" /> -</div> - +<body> + <div> + <img src="images/watermark.gif" width="260" height="228" alt="" /> + </div> </body> </html>
\ No newline at end of file diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png Binary files differindex 0132765d4..f877ae27b 100644 --- a/skins/larry/images/listicons.png +++ b/skins/larry/images/listicons.png diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 23c852a7a..9af0941e7 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -66,6 +66,7 @@ html.ie #mailview-top { left: 0; width: 100%; bottom: 0; + outline: none; } #messagelistcontainer { @@ -86,7 +87,7 @@ html>/**/body #messagelist { left: 0; right: 0; height: 22px; - padding: 4px 6px; + padding: 5px 6px 3px; border-top: 1px solid #ddd; background: #ebebeb; background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); @@ -230,20 +231,6 @@ html.mozilla #mailboxlist > li:first-child { top: 0; } -#mailpreviewtoggle { - display: block; - position: absolute; - top: 7px; - right: 4px; - width: 20px; - height: 18px; - background: url(images/buttons.png) -3px -458px no-repeat; -} - -#mailpreviewtoggle.enabled { - background-position: -28px -458px; -} - #s_interval { margin: 3px 8px; } @@ -372,18 +359,18 @@ table.messagelist.fixedcopy { .messagelist tr td div.collapsed, .messagelist tr td div.expanded, .messagelist tr > .threads .listmenu, -.messagelist tr > .attachment span.attachment, -.messagelist tr > .attachment span.report, -.messagelist tr > .attachment span.encrypted, +.messagelist tr .attachment span.attachment, +.messagelist tr .attachment span.report, +.messagelist tr .attachment span.encrypted, .messagelist tr > .priority span.priority, .messagelist tr > .priority span.prio1, .messagelist tr > .priority span.prio2, .messagelist tr > .priority span.prio3, .messagelist tr > .priority span.prio4, .messagelist tr > .priority span.prio5, -.messagelist tr > .flag span.flagged, -.messagelist tr > .flag span.unflagged, -.messagelist tr > .flag span.unflagged:hover, +.messagelist tr .flag span.flagged, +.messagelist tr .flag span.unflagged, +.messagelist tr .flag span.unflagged:hover, .messagelist tr > .status span.status, .messagelist tr > .status span.msgicon, .messagelist tr > .status span.deleted, @@ -403,19 +390,19 @@ table.messagelist.fixedcopy { background: url(images/listicons.png) -100px 0 no-repeat; } -.messagelist tbody tr td.attachment span.attachment { +.messagelist tbody tr .attachment span.attachment { background-position: 0 -996px; } -.messagelist thead tr th.attachment span.attachment { +.messagelist thead tr .attachment span.attachment { background-position: -24px -996px; } -.messagelist tbody tr td.attachment span.report { +.messagelist tbody tr .attachment span.report { background-position: -24px -1116px; } -.messagelist tbody tr td.attachment span.encrypted { +.messagelist tbody tr .attachment span.encrypted { background-position: 0 -2272px; } @@ -440,11 +427,11 @@ table.messagelist.fixedcopy { } /* thread parent message with flagged children */ -.messagelist tbody tr.flaggedroot td.flag span { +.messagelist tbody tr.flaggedroot .flag span { background-position: -23px -1076px; } -.messagelist tbody tr td.flag span.flagged { +.messagelist tbody tr .flag span.flagged { background-position: 0 -1036px; } @@ -456,7 +443,7 @@ table.messagelist.fixedcopy { background-position: -23px -1057px; } -.messagelist tr:hover td.flag span.unflagged { +.messagelist tr:hover .flag span.unflagged { background-position: -23px -1076px; } @@ -1399,3 +1386,199 @@ div.message-partheaders .headers-table td.header { #uploadform form div { margin: 4px 0; } + + +/**** Styles for widescreen (3-column) view ****/ + +.widescreen #mailview-top { + bottom: 0; + width: 400px; + height: auto; +} + +.widescreen #mailview-bottom { + left: 412px; + top:0; + border: 1px solid #a3a3a3; +} + +#messagelistheader, +.widescreen #messagelistfooter #countcontrols, +.widescreen .messagelist > thead, +.widescreen .messagelist .branch, +.widescreen table.fixedcopy { + display: none; +} + +.widescreen #messagelistcontainer { + top: 34px; + overflow-x: hidden; +} + +.widescreen #messagelistheader { + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 34px; + padding: 6px 6px; + background: #f0f0f0; + background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0)); + background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%); + border-radius: 4px 4px 0 0; + white-space: nowrap; + border-bottom: 1px solid #dfdfdf; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.widescreen #messagelistheader .listmenu { + margin-right: 10px; + vertical-align: middle; + line-height: 22px; + width: 26px; + padding: 0; + text-indent: -5000px; + overflow: hidden; + display: inline-block; + background: url(images/listicons.png) 0 -2330px no-repeat; +} + +.widescreen #countcontrols { + line-height: 24px; + display: inline; + min-width: 0; +} + +.widescreen #countcontrols span { + padding: 0; +} + +.widescreen .pagenavbuttons { + position: absolute; + top: 4px; + right: 6px; +} + +.widescreen .pagenavbuttons a.button { + background: none; + border: 0; + box-shadow: none; + padding: 2px; + margin: 0; + height: 20px; +} + +.widescreen .pagenavbuttons a.button.pressed { + background: inherit; +} + +.widescreen a.listmenu:focus, +.widescreen .pagenav a.button:focus { + border-color: #4fadd5; + box-shadow: 0 0 4px 2px rgba(71,135,177, 0.8); + outline: none; +} + +.widescreen .messagelist td { + border-left: 0; + vertical-align: top; + padding: 3px 2px !important; +} + +.widescreen .messagelist td.subject { + width: 99%; + white-space: wrap; + position: relative; /* for span.date positioning in Firefox */ +} + +.widescreen .messagelist td.threads { + width: 20px; + vertical-align: top; +} + +.widescreen .messagelist td.flags { + width: 22px; +} + +.widescreen .messagelist td.subject span { + line-height: 20px; +} + +.widescreen .messagelist td.subject span.date { + right: 2px; + top: 3px; + position: absolute; + color: #666; +} + +.widescreen .messagelist td.subject span.fromto { + padding-left: 22px; + display: block; + margin-right: 10em; + overflow: hidden; + text-overflow: ellipsis; + color: #666; +} + +.widescreen .messagelist tr.flagged td.subject span.date, +.widescreen .messagelist tr.flagged td.subject span.fromto { + color: #ff5c33; +} + +.widescreen .messagelist tr.deleted td.subject span.date, +.widescreen .messagelist tr.deleted td.subject span.fromto { + color: #ccc; +} + +.widescreen .messagelist td.subject span.subject { + clear: both; + display: block; + font-size: 12px; + overflow: hidden; + text-overflow: ellipsis; +} + +.widescreen .messagelist td.flags span { + width: 20px; + height: 20px; + display: block; + margin-left: 1px; +} + +.widescreen .messagelist td.flags span.flag { + cursor: pointer; +} + +.widescreen .messagelist tr td.subject span.msgicon, +.widescreen .messagelist tr td.subject span.unreadchildren { + width: 20px; +} + +/* move attachments list to the bottom on narrow mail preview page */ +@media screen and (max-width: 800px) { + #messagepreview .leftcol { + margin-right: 0; + } + #messagepreview .rightcol { + min-height: 0; + width: auto; + right: 0; + position: relative; + border-radius: 0; + border-bottom: 1px solid #dfdfdf; + background-color: #f9f9f9; + padding: 5px; + } + ul.attachmentslist, + ul.attachmentslist > li, + div.rightcol > div > a.button { + vertical-align: middle; + display: inline-block; + margin-top: 0; + } +} diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 143c135a6..9219d81a3 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -426,9 +426,7 @@ a.button.delete span.icon { .pagenav .pagejumper { text-align: center; - background: #f8f8f8; padding: 3px 0; - background: linear-gradient(to bottom, #dddddd 0%, #f8f8f8 100%); cursor: default; } diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index ce51fd2c2..6ab25c469 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -4,7 +4,7 @@ <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> <style type="text/css"> -<roundcube:if condition="config:preview_pane == true" /> +<roundcube:if condition="env:layout != 'list'" /> #mailview-top { height: 270px; } #mailview-bottom { top: 284px; height: auto; display: block; } #mailpreviewframe { display: block; } @@ -66,7 +66,7 @@ </div> -<div id="mainscreencontent"> +<div id="mainscreencontent" class="<roundcube:var name="env:layout" />"> <div id="mailview-left"> <!-- folders list --> @@ -88,14 +88,15 @@ <div id="mailview-right" role="main"> -<roundcube:if condition="config:preview_pane == true" /> +<roundcube:if condition="env:layout == 'desktop'" /> <div id="mailview-top" class="uibox"> <roundcube:else /> <div id="mailview-top" class="uibox fullheight"> <roundcube:endif /> <!-- messagelist --> -<div id="messagelistcontainer" class="boxlistcontent"> +<div id="messagelistheader"><roundcube:object name="listmenulink" optionsmenuIcon="true" /></div> +<div id="messagelistcontainer" class="boxlistcontent" tabindex="-1"> <h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2> <roundcube:object name="messages" id="messagelist" @@ -138,8 +139,6 @@ </div> <roundcube:container name="listcontrols" id="listcontrols" /> - - <a href="#preview" id="mailpreviewtoggle" class="iconbutton" title="<roundcube:label name='previewpane' />" role="button" tabindex="0"><roundcube:label name="previewpane" /></a> </div> </div><!-- end mailview-top --> @@ -201,8 +200,18 @@ <div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions" aria-hidden="true"> <h2 id="aria-label-listoptions" class="voice"><roundcube:label name="arialabelmessagelistoptions" /></h2> -<roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" /> - <fieldset class="floating"> + <roundcube:if condition="!in_array('layout', (array)config:dont_override)" /> + <fieldset id="listoptions-layout" class="floating"> + <legend><roundcube:label name="layout" /></legend> + <ul class="proplist"> + <li><label><input type="radio" name="layout" value="widescreen" /> <span><roundcube:label name="layoutwidescreen" /></span></label></li> + <li><label><input type="radio" name="layout" value="desktop" /> <span><roundcube:label name="layoutdesktop" /></span></label></li> + <li><label><input type="radio" name="layout" value="list" /> <span><roundcube:label name="layoutlist" /></span></label></li> + </ul> + </fieldset> + <roundcube:endif /> + <roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" /> + <fieldset id="listoptions-columns" class="floating"> <legend><roundcube:label name="listcolumns" /></legend> <ul class="proplist"> <li><label class="disabled"><input type="checkbox" name="list_col[]" value="threads" checked disabled /> <span><roundcube:label name="threads" /></span></label></li> @@ -222,7 +231,7 @@ </fieldset> <roundcube:endif /> <roundcube:if condition="!in_array('message_sort_col', (array)config:dont_override)" /> - <fieldset class="floating"> + <fieldset id="listoptions-sortcol" class="floating"> <legend><roundcube:label name="listsorting" /></legend> <ul class="proplist"> <li><label><input type="radio" name="sort_col" value="" /> <span><roundcube:label name="nonesort" /></span></label></li> @@ -238,7 +247,7 @@ </fieldset> <roundcube:endif /> <roundcube:if condition="!in_array('message_sort_order', (array)config:dont_override)" /> - <fieldset class="floating"> + <fieldset id="listoptions-sortord" class="floating"> <legend><roundcube:label name="listorder" /></legend> <ul class="proplist"> <li><label><input type="radio" name="sort_ord" value="ASC" /> <span><roundcube:label name="asc" /></span></label></li> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 215778b14..984892315 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -28,6 +28,7 @@ function rcube_mail_ui() var me = this; var mailviewsplit; + var mailviewsplit2; var compose_headers = {}; var prefs; @@ -229,21 +230,15 @@ function rcube_mail_ui() }); } else if (rcmail.env.action == 'list' || !rcmail.env.action) { - var previewframe = $('#mailpreviewframe').is(':visible'); + mail_layout(); - $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false') - .click(function(e) { toggle_preview_pane(e); return false; }); $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e) { switch_view_mode('list'); return false; }); $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e) { switch_view_mode('thread'); return false; }); - mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom', - orientation:'h', relative:true, start:276, min:150, size:12, offset:4 }); - if (previewframe) - mailviewsplit.init(); - rcmail.init_pagejumper('#pagejumper'); rcmail.addEventListener('setquota', update_quota) + .addEventListener('layout-change', mail_layout) .addEventListener('afterimport-messages', show_uploadform); } else if (rcmail.env.action == 'get') { @@ -465,6 +460,53 @@ function rcube_mail_ui() } } + // Mail view layout initialization and change handler + function mail_layout(p) + { + var layout = p ? p.new_layout : rcmail.env.layout, + top = $('#mailview-top'), + bottom = $('#mailview-bottom'); + + if (p) + $('#mainscreencontent').removeClass().addClass(layout); + + $('#mailviewsplitter')[layout == 'desktop' ? 'show' : 'hide'](); + $('#mailviewsplitter2')[layout == 'widescreen' ? 'show' : 'hide'](); + $('#mailpreviewframe')[layout != 'list' ? 'show' : 'hide'](); + rcmail.env.contentframe = layout == 'list' ? null : 'messagecontframe'; + + if (layout == 'widescreen') { + $('#countcontrols').detach().appendTo($('#messagelistheader')); + top.css({height: 'auto', width: 394}); + bottom.css({top: 0, left: 406, height: 'auto'}).show(); + if (!mailviewsplit2) { + mailviewsplit2 = new rcube_splitter({ id:'mailviewsplitter2', p1:'#mailview-top', p2:'#mailview-bottom', + orientation:'v', relative:true, start:416, min:400, size:12}); + mailviewsplit2.init(); + } + else + mailviewsplit2.resize(); + } + else if (layout == 'desktop') { + top.css({height: 270, width: 'auto'}); + bottom.css({left: 0, top: 284, height: 'auto'}).show(); + if (!mailviewsplit) { + mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom', + orientation:'h', relative:true, start:276, min:150, size:12, offset:4 }); + mailviewsplit.init(); + } + else + mailviewsplit.resize(); + } + else { // layout == 'list' + top.css({height: 'auto', width: 'auto'}); + bottom.hide(); + } + + if (p && p.old_layout == 'widescreen') { + $('#countcontrols').detach().appendTo($('#messagelistfooter')); + } + } /** * Adjust UI objects of the mail view screen @@ -660,58 +702,6 @@ function rcube_mail_ui() $.Event('click', { target:ref.get(0), pageX:pos.left, pageY:pos.top, clientX:pos.left, clientY:pos.top })); } - - /** - * Show/hide the preview pane - */ - function toggle_preview_pane(e) - { - var button = $(e.target), - frame = $('#mailpreviewframe'), - visible = !frame.is(':visible'), - splitter = mailviewsplit.pos || parseInt(get_pref('mailviewsplitter') || 320), - topstyles, bottomstyles, uid; - - frame.toggle(); - button.toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false'); - - if (visible) { - $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' }); - $('#mailview-bottom').css({ height:'auto' }).show(); - - rcmail.env.contentframe = 'messagecontframe'; - if (uid = rcmail.message_list.get_single_selection()) - rcmail.show_message(uid, false, true); - - // let the splitter set the correct size and position - if (mailviewsplit.handle) { - mailviewsplit.handle.show(); - mailviewsplit.resize(); - } - else - mailviewsplit.init(); - } - else { - rcmail.env.contentframe = null; - rcmail.show_contentframe(false); - - $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'0px' }); - $('#mailview-bottom').css({ top:'auto', height:'0px' }).hide(); - - if (mailviewsplit.handle) - mailviewsplit.handle.hide(); - } - - if (rcmail.message_list) { - if (visible && uid) - rcmail.message_list.scrollto(uid); - rcmail.message_list.resize(); - } - - rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) }); - } - - /** * Switch between short and full headers display in message preview */ @@ -910,6 +900,11 @@ function rcube_mail_ui() $('input[name="sort_ord"][value="DESC"]').prop('checked', rcmail.env.sort_order == 'DESC'); $('input[name="sort_ord"][value="ASC"]').prop('checked', rcmail.env.sort_order != 'DESC'); + $.each(['widescreen', 'desktop', 'list'], function() { + $('input[name="layout"][value="' + this + '"]').prop('checked', rcmail.env.layout == this); + }); + $('#listoptions-columns', $dialog)[rcmail.env.layout == 'widescreen' ? 'hide' : 'show'](); + // set checkboxes $('input[name="list_col[]"]').each(function() { $(this).prop('checked', $.inArray(this.value, rcmail.env.listcols) != -1); @@ -946,10 +941,11 @@ function rcube_mail_ui() var sort = $('input[name="sort_col"]:checked').val(), ord = $('input[name="sort_ord"]:checked').val(), + layout = $('input[name="layout"]:checked').val(), cols = $('input[name="list_col[]"]:checked') .map(function(){ return this.value; }).get(); - rcmail.set_list_options(cols, sort, ord, rcmail.env.threading); + rcmail.set_list_options(cols, sort, ord, rcmail.env.threading, layout); } @@ -1377,6 +1373,10 @@ function rcube_splitter(p) // start listening to mousemove events $(document).on('mousemove.' + this.id, onDrag).on('mouseup.' + this.id, onDragStop); + // hack messages list so it will propagate the mouseup event over the list + if (rcmail.message_list) + rcmail.message_list.drag_active = true; + // enable dragging above iframes $('iframe').each(function(i, elem) { $('<div>') @@ -1455,6 +1455,9 @@ function rcube_splitter(p) $(document).off('.' + me.id); me.drag_active = false; + if (rcmail.message_list) + rcmail.message_list.drag_active = false; + // remove temp divs $('div.iframe-splitter-fix').remove(); |
