diff options
Diffstat (limited to 'skins/larry')
27 files changed, 388 insertions, 163 deletions
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css index 46b4949da..fe087aece 100644 --- a/skins/larry/addressbook.css +++ b/skins/larry/addressbook.css @@ -18,6 +18,7 @@ left: 0; width: 220px; bottom: 0; + z-index: 2; } #addressview-right { @@ -26,15 +27,17 @@ left: 232px; right: 0; bottom: 0; + z-index: 3; } #addressbooktoolbar { position: absolute; top: -6px; left: 0; - right: 0; + right: 260px; height: 40px; white-space: nowrap; + z-index: 10; } #directorylistbox { @@ -67,7 +70,9 @@ #directorylist li a, #contacts-table .contact td.name { - background: url(images/listicons.png) -100px 0 no-repeat; + background-image: url(images/listicons.png); + background-position: -100px 0; + background-repeat: no-repeat; overflow: hidden; padding-left: 36px; text-overflow: ellipsis; @@ -158,6 +163,29 @@ #contactpic img { width: 112px; + visibility: inherit; +} + +#contactpic.droptarget { + background-image: url(images/filedrop.png); + background-position: center; + background-repeat: no-repeat; +} + +#contactpic.droptarget.hover { + background-color: #d9ecf4; + box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); + -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); + -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); + -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); +} + +#contactpic.droptarget.active img { + opacity: 0.15; +} + +#contactpic.droptarget.hover img { + opacity: 0.05; } #contacthead { @@ -289,6 +317,6 @@ a.deletebutton { width: 24px; height: 18px; text-decoration: none; - text-indent: -1000px; + text-indent: -5000px; background: url(images/buttons.png) -7px -377px no-repeat; } diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css index f86cbe8aa..6161d03dd 100644 --- a/skins/larry/ie7hacks.css +++ b/skins/larry/ie7hacks.css @@ -44,6 +44,10 @@ a.deletebutton, display: inline; } +.pagenavbuttons { + top: 4px; +} + .dropbutton .dropbuttontip { right: -2px; } @@ -113,7 +117,7 @@ ul.toolbarmenu li label { #quicksearchbar input { padding-top: 4px; - padding-bottom: 4px; + padding-bottom: 2px; } #messagelistfooter #listcontrols, diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css index 38d68acdd..288202111 100644 --- a/skins/larry/iehacks.css +++ b/skins/larry/iehacks.css @@ -131,6 +131,10 @@ ul.toolbarmenu li a.active:hover, /*** mail.css ***/ +#messagelistfooter { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#c6c6c6', GradientType=0); +} + #mailboxlist li.mailbox .unreadcount { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82acb5', endColorstr='#6a939f', GradientType=0); } @@ -143,6 +147,10 @@ ul.toolbarmenu li a.active:hover, filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9', GradientType=0); } +#previewheaderstoggle { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#e9e9e9', GradientType=1); +} + #composeoptionsbox { border-top: 1px solid #999; } diff --git a/skins/larry/images/contactpic_32px.png b/skins/larry/images/contactpic_32px.png Binary files differnew file mode 100644 index 000000000..276f1974f --- /dev/null +++ b/skins/larry/images/contactpic_32px.png diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png Binary files differindex e1378878b..9554658b6 100644 --- a/skins/larry/images/listicons.png +++ b/skins/larry/images/listicons.png diff --git a/skins/larry/images/overflowshadow.png b/skins/larry/images/overflowshadow.png Binary files differnew file mode 100644 index 000000000..54dfdafce --- /dev/null +++ b/skins/larry/images/overflowshadow.png diff --git a/skins/larry/includes/footer.html b/skins/larry/includes/footer.html index 4a6f8f09c..ee93fcf57 100644 --- a/skins/larry/includes/footer.html +++ b/skins/larry/includes/footer.html @@ -3,7 +3,7 @@ // UI startup var UI = new rcube_mail_ui(); $(document).ready(function(){ - UI.set('errortitle', '<roundcube:label name="errortitle" />'); + UI.set('errortitle', '<roundcube:label name="errortitle" quoting="javascript" />'); UI.init(); }); diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html index 317ff15dd..f750e061a 100644 --- a/skins/larry/includes/mailtoolbar.html +++ b/skins/larry/includes/mailtoolbar.html @@ -1,18 +1,11 @@ -<div id="mailtoolbar" class="toolbar"> -<roundcube:if condition="template:name == 'message'" /> -<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> -<roundcube:else /> -<roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" /> -<roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" /> -<roundcube:endif /> <roundcube:button command="reply" type="link" class="button reply disabled" classAct="button reply" classSel="button reply pressed" label="reply" title="replytomessage" /> <span class="dropbutton"> -<roundcube:button command="reply-all" type="link" class="button reply-all disabled" classAct="button reply-all" classSel="button reply-all pressed" label="replyall" title="replytoallmessage" /> -<span class="dropbuttontip" id="replyallmenulink" onclick="UI.show_popup('replyallmenu');return false"></span> + <roundcube:button command="reply-all" type="link" class="button reply-all disabled" classAct="button reply-all" classSel="button reply-all pressed" label="replyall" title="replytoallmessage" /> + <span class="dropbuttontip" id="replyallmenulink" onclick="UI.show_popup('replyallmenu');return false"></span> </span> <span class="dropbutton"> -<roundcube:button command="forward" type="link" class="button forward disabled" classAct="button forward" classSel="button forward pressed" label="forward" title="forwardmessage" /> -<span class="dropbuttontip" id="forwardmenulink" onclick="UI.show_popup('forwardmenu');return false"></span> + <roundcube:button command="forward" type="link" class="button forward disabled" classAct="button forward" classSel="button forward pressed" label="forward" title="forwardmessage" /> + <span class="dropbuttontip" id="forwardmenulink" onclick="UI.show_popup('forwardmenu');return false"></span> </span> <roundcube:button command="delete" type="link" class="button delete disabled" classAct="button delete" classSel="button delete pressed" label="delete" title="deletemessage" /> <roundcube:if condition="template:name == 'message'" /> @@ -23,7 +16,6 @@ <roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="button markmessage" label="mark" title="markmessages" onclick="UI.show_popup('markmessagemenu');return false" /> <roundcube:endif /> <roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="more" title="moreactions" onclick="UI.show_popup('messagemenu');return false" /> -</div> <div id="forwardmenu" class="popupmenu"> <ul class="toolbarmenu"> diff --git a/skins/larry/mail.css b/skins/larry/mail.css index ab87cd865..695697f6b 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -18,6 +18,7 @@ left: 0; width: 220px; bottom: 0; + z-index: 2; } #mailview-right { @@ -26,6 +27,7 @@ left: 232px; right: 0; bottom: 0; + z-index: 3; } #mailview-top { @@ -36,6 +38,10 @@ bottom: 28px; } +#mailview-top.fullheight { + border-radius: 4px 4px 0 0; +} + #mailview-bottom { position: absolute; left: 0; @@ -44,12 +50,6 @@ height: 26px; } -#mailviewsplitter { - right: 30px; - width: 30px; - left: auto !important; -} - #folderlist-header { width: 100%; height: 12px; @@ -67,7 +67,7 @@ #messagelistcontainer { top: 0; - bottom: 32px; + bottom: 30px; overflow: auto; } @@ -76,8 +76,20 @@ bottom: 0; left: 0; right: 0; - height: 26px; - padding: 2px; + height: 22px; + padding: 4px 6px; + border-top: 1px solid #ddd; + background: #ebebeb; + background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#c6c6c6)); + background: -o-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); + background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); + background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%); + border-radius: 0 0 4px 4px; +} + +#mailview-top.fullheight #messagelistfooter { + border-radius: 0; } #messagelistfooter.rightalign { @@ -92,6 +104,11 @@ #messagelistfooter #listselectors { display: inline-block; margin-right: 2em; + vertical-align: middle; +} + +#messagelistfooter #listselectors .menuselector { + margin-top: -2px; } a.iconbutton.listmode { @@ -301,7 +318,14 @@ a.iconbutton.threadmode.selected { } #searchfilter { - width: 16em; + position: absolute; + right: 256px; + width: auto; + top: 7px; +} + +#searchfilter select { + height: 26px; } #mailview-left select.mailboxlist { @@ -313,25 +337,35 @@ a.iconbutton.threadmode.selected { #messagetoolbar { position: absolute; top: -6px; - right: 0; - left: 15em; + right: 390px; + left: 0; height: 40px; white-space: nowrap; + z-index: 10; } #messagetoolbar.fullwidth { - left: 0; + right: 0; } -#mailtoolbar { - text-align: right; +#messagetoolbar .toolbarselect { + position: absolute; + bottom: 6px; + right: 3px; +} + +#messagesearchtools { + position: absolute; + right: 0; + top: 0; + width: 240px; } #mailpreviewtoggle { display: block; position: absolute; - top: 4px; - right: 2px; + top: 6px; + right: 4px; width: 20px; height: 18px; background: url(images/buttons.png) -3px -458px no-repeat; @@ -344,6 +378,14 @@ a.iconbutton.threadmode.selected { /*** message list ***/ +#messagelist thead td:first-child { + border-radius: 4px 0 0 0; +} + +#messagelist thead td:last-child { + border-radius: 0 4px 0 0; +} + #messagelist tr td.attachment, #messagelist tr td.threads, #messagelist tr td.status, @@ -482,28 +524,29 @@ a.iconbutton.threadmode.selected { #messagelist tbody tr td.attachment span.attachment { background-position: 0 -996px; } + #messagelist thead tr td.attachment span.attachment { background-position: -24px -997px; } -#messagelist tr td.priority { - padding-right: 0; +#messagelist tbody tr td.attachment span.report { + background-position: -24px -1116px; } #messagelist tr td.priority span.prio5 { - background-position: right -1905px; + background-position: 0 -1905px; } #messagelist tr td.priority span.prio4 { - background-position: right -1885px; + background-position: 0 -1885px; } #messagelist tr td.priority span.prio2 { - background-position: right -1865px; + background-position: 0 -1865px; } #messagelist tr td.priority span.prio1 { - background-position: right -1845px; + background-position: 0 -1845px; } #messagelist tbody tr td.flag span.flagged { @@ -714,29 +757,47 @@ h3.subject { display: none; } +#preview-allheaders td.header-title, #preview-shortheaders td.header-title { - padding-right: 0; + padding-left: 0; } #preview-shortheaders td.header { - padding-right: 12px; + padding-right: 18px; } #previewheaderstoggle { - width: 16px; - height: 16px; - padding: 0; - margin-top: 5px; - position: absolute; - outline: none; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 18px; + padding: 0; + outline: none; + background: #f2f2f2; + background: -moz-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0,#fbfbfb), color-stop(100%,#e9e9e9)); + background: -o-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%); + background: -ms-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%); + background: linear-gradient(left, #fbfbfb 0, #e9e9e9 100%); + border-right: 1px solid #dfdfdf; } -#previewheaderstoggle.iconlink.add { - background-position: -32px -227px; +#previewheaderstoggle .iconlink { + display: inline-block; + position: absolute; + top: 8px; + left: 0; + width: 18px; + height: 16px; + background: url(images/buttons.png) -27px -242px no-repeat; } -#previewheaderstoggle.iconlink.remove { - background-position: -32px -242px; +#previewheaderstoggle.remove .iconlink { + top: auto; + bottom: 5px; + background-position: -5px -242px; } div.more-headers { @@ -750,7 +811,7 @@ div.hide-headers { } #all-headers { - position: relative; + position: relative; margin: 0 10px; padding: 0; height: 180px; @@ -773,17 +834,50 @@ div.hide-headers { } #messagepreviewheader { - margin: 0 8px; - padding-bottom: 8px; + position: relative; + height: auto; + margin: 0 8px 0 0; + padding: 0 0 6px 72px; border-bottom: 2px solid #f0f0f0; } -#messagepreviewheader .headers-table { - margin-left: 8px; +#messagepreviewheader h3.subject { + padding: 8px 8px 2px 0; } -#messagepreviewheader h3.subject { - padding-left: 0; +#messagepreviewheader #contactphoto { + display: block; + position: absolute; + top: 11px; + left: 30px; + width: 32px; + height: 32px; + overflow: hidden; + background: url(images/contactpic_32px.png) center center no-repeat #fff; + border-radius: 3px; +} + +#messagepreviewheader #contactphoto img { + width: 32px; + height: auto; + border-radius: 3px; +} + +#messageheader #contactphoto { + display: block; + position: absolute; + top: 40px; + right: 10px; + width: 48px; + height: 48px; + overflow: hidden; + border-radius: 4px; +} + +#messageheader #contactphoto img { + width: 48px; + height: auto; + border-radius: 4px; } #messagepreviewheader #countcontrols, @@ -791,7 +885,7 @@ div.hide-headers { position: absolute; top: 8px; right: 8px; - width: 18em; + width: 20em; text-align: right; white-space: nowrap; } @@ -865,6 +959,7 @@ div.message-part div.pre { margin: 0px; padding: 0px; font-family: monospace; + font-size: 12px; white-space: -moz-pre-wrap !important; white-space: pre-wrap !important; white-space: pre; @@ -1210,7 +1305,7 @@ div.message-part blockquote blockquote blockquote { #uploadform a.iconlink { margin-left: 1em; - text-indent: -1000px; + text-indent: -5000px; } #uploadform form div { diff --git a/skins/larry/settings.css b/skins/larry/settings.css index f962a8457..e0047f9da 100644 --- a/skins/larry/settings.css +++ b/skins/larry/settings.css @@ -54,7 +54,9 @@ #settings-sections span.listitem a, #settings-sections span.tablink a { padding-left: 36px; - background: url(images/listicons.png) -100px 0 no-repeat; + background-image: url(images/listicons.png); + background-position: -100px 0; + background-repeat: no-repeat; } /* note: support span.tablink because this is used by plugins */ diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 7b321ed56..341de9008 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -266,6 +266,7 @@ input.button:active { padding: 1px 3px; height: 16px; vertical-align: middle; + margin-bottom: 1px; } .pagenav a.button span.inner { @@ -315,7 +316,7 @@ input.button:active { .pagenav .countdisplay { display: inline-block; - padding:0 1em; + padding: 3px 1em 0 1em; text-shadow: 0px 1px 1px #fff; min-width: 16em; } @@ -330,7 +331,7 @@ a.iconbutton { width: 24px; height: 18px; text-decoration: none; - text-indent: -1000px; + text-indent: -5000px; background: url(images/buttons.png) -1000px 0 no-repeat; } @@ -653,6 +654,15 @@ a.iconlink.upload { background: #fff; } +.minwidth { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; + min-width: 1150px; +} + .scroller { overflow: auto; } @@ -769,6 +779,7 @@ a.iconlink.upload { .listing li.selected > a { color: #004458; font-weight: bold; + background-color: #c7e3ef; } ul.listing { @@ -784,7 +795,7 @@ ul.listing li { ul.listing li.droptarget, table.listing tr.droptarget td { - background-color: #c7e3ef; + background-color: #e8e798; } table.listing, @@ -827,7 +838,7 @@ table.layout td { display: inline-block; width: 48px; height: 35px; - text-indent: -1000px; + text-indent: -5000px; background: url(images/buttons.png) -1000px 0 no-repeat; } @@ -1034,8 +1045,8 @@ body.iframe { margin: 38px 0 10px 0; } -body.iframe.footerbuttons { - margin-bottom: 42px; +body.iframe.floatingbuttons { + margin-bottom: 40px; } body.iframe.fullheight { @@ -1062,14 +1073,25 @@ body.iframe .boxtitle { z-index: 100; } -body.iframe .footerbuttons { +body.iframe .footerleft.floating { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 110; background: #fff; - padding: 8px; + padding-top: 8px; + padding-bottom: 12px; +} + +body.iframe .footerleft.floating:before { + content: " "; + position: absolute; + top: -6px; + left: 0; + width: 100%; + height: 6px; + background: url(images/overflowshadow.png) top center no-repeat; } .boxcontent { @@ -1085,8 +1107,16 @@ body.iframe .footerbuttons { overflow: auto; } +.iframebox { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 28px; +} + .footerleft { - padding: 0 12px 10px 12px; + padding: 0 12px 4px 12px; } .propform fieldset { @@ -1274,34 +1304,46 @@ ul.proplist li { /*** quicksearch **/ #quicksearchbar { - width: 100%; + position: absolute; + right: 1px; + top: 0; + width: 240px; } #quicksearchbar input { width: 176px; margin: 0; - padding: 5px 26px 2px 38px; + margin-top: 7px; + padding: 3px 30px 3px 34px; height: 18px; background: #f1f1f1; - border-color: #a3a3a3; + border-color: #ababab; font-weight: bold; + font-size: 11px; } #quicksearchbar #searchmenulink { position: absolute; - top: 5px; - left: 8px; + top: 12px; + left: 6px; } #quicksearchbar #searchreset { position: absolute; - top: 4px; + top: 11px; right: 1px; } /*** toolbar ***/ +.toolbar .spacer { + display: inline-block; + width: 24px; + height: 40px; + padding: 0; +} + .toolbar a.button { text-align: center; font-size: 10px; @@ -1455,12 +1497,14 @@ a.menuselector { background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%); text-decoration: none; color: #333; + cursor: pointer; } a.menuselector .handle { display: inline-block; - padding: 3px 32px 0 8px; - min-height: 18px; + padding: 0 32px 0 6px; + height: 20px; + line-height: 19px; text-shadow: 0px 1px 1px #fff; background: url(images/selector.png) right center no-repeat; border-radius: 4px; @@ -1476,18 +1520,6 @@ a.menuselector:active { text-decoration: none; } -a.dropdownselector { - position: absolute; - padding: 1px 0; - z-index: 1; -} - -a.dropdownselector .handle { - margin: -1px 0; - padding-top: 5px; - min-height: 20px; -} - select.decorated { position: relative; z-index: 10; @@ -1501,7 +1533,6 @@ select.decorated { html.opera select.decorated { opacity: 1; - height: auto; } select.decorated option { @@ -1511,7 +1542,7 @@ select.decorated option { border-top: 1px solid #5a5a5a; border-bottom: 1px solid #333; text-shadow: 0px 1px 1px #333; - padding: 6px 10px; + padding: 4px 6px; outline: none; } @@ -1941,7 +1972,7 @@ ul.toolbarmenu li span.conversation { height: 18px; padding: 0; text-decoration: none; - text-indent: -1000px; + text-indent: -5000px; background: url(images/buttons.png) -7px -337px no-repeat; } @@ -1956,6 +1987,7 @@ ul.toolbarmenu li span.conversation { margin-bottom: 12px; padding-top: 15px; height: 27px; + white-space: nowrap; } .tabsbar .tablink { diff --git a/skins/larry/svggradient.php b/skins/larry/svggradient.php index 75705ed30..c54bdec17 100644 --- a/skins/larry/svggradient.php +++ b/skins/larry/svggradient.php @@ -18,6 +18,7 @@ header("Pragma: "); $svg_stops = ''; $color_stops = explode(';', preg_replace('/[^a-f0-9,;%]/i', '', $_GET['c'])); +$gradient_coords = !empty($_GET['h']) ? 'x1="0%" y1="0%" x2="100%" y2="0%"' : 'x1="0%" y1="0%" x2="0%" y2="100%"'; $last = count($color_stops) - 1; foreach ($color_stops as $i => $stop) { list($color, $offset) = explode(',', $stop); @@ -32,7 +33,7 @@ foreach ($color_stops as $i => $stop) { ?> <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%"> <defs> - <linearGradient id="LG1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> + <linearGradient id="LG1" <?php echo $gradient_coords; ?> spreadMethod="pad"> <?php echo $svg_stops; ?> </linearGradient> </defs> diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css index ba596e39f..143fb375f 100644 --- a/skins/larry/svggradients.css +++ b/skins/larry/svggradients.css @@ -137,6 +137,13 @@ ul.toolbarmenu li a.active:hover, background-image: url(svggradient.php?c=ffffff;e9e9e9); } +#previewheaderstoggle { + background-image: url(svggradient.php?c=fbfbfb;e9e9e9&h=1); +} + +#messagelistfooter { + background-image: url(svggradient.php?c=ebebeb;c6c6c6); +} /*** jqueryui theme ***/ diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index cec1dcf20..c39c2fe87 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -10,15 +10,18 @@ <div id="mainscreen"> -<div id="addressview-left"> - -<!-- search box --> -<div id="quicksearchbar"> -<roundcube:object name="searchform" id="quicksearchbox" /> -<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " /> -<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> +<!-- toolbar --> +<div id="addressbooktoolbar" class="toolbar"> + <roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="import" title="importcontacts" /> + <roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="export" title="exportvcards" /> + <span class="spacer"></span> + <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" /> + <roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advanced" title="advsearch" /> + <roundcube:container name="toolbar" id="addressbooktoolbar" /> </div> +<div id="addressview-left"> + <!-- sources/groups list --> <div id="directorylistbox" class="uibox listbox"> <h2 id="directorylist-header" class="boxtitle"><roundcube:label name="groups" /></h2> @@ -34,13 +37,11 @@ <div id="addressview-right"> -<!-- toolbar --> -<div id="addressbooktoolbar" class="toolbar"> - <roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advanced" title="advsearch" /> - <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" /> - <roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="import" title="importcontacts" /> - <roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="export" title="exportvcards" /> - <roundcube:container name="toolbar" id="addressbooktoolbar" /> +<!-- search box --> +<div id="quicksearchbar"> +<roundcube:object name="searchform" id="quicksearchbox" /> +<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " /> +<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> </div> <!-- contacts list --> @@ -63,7 +64,9 @@ <div id="contacts-box" class="uibox"> - <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> + <div class="iframebox"> + <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + </div> <roundcube:object name="message" id="message" class="statusbar" /> </div> diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html index 93e9703a4..ff0c833c6 100644 --- a/skins/larry/templates/compose.html +++ b/skins/larry/templates/compose.html @@ -7,8 +7,9 @@ <link rel="stylesheet" type="text/css" href="/googiespell.css" /> <roundcube:endif /> </head> -<body class="noscroll"> +<body> +<div class="minwidth"> <roundcube:include file="/includes/header.html" /> <div id="mainscreen"> @@ -170,6 +171,8 @@ </div><!-- end mainscreen --> +</div><!-- end minwidth --> + <div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />"> <roundcube:object name="composeAttachmentForm" id="uploadform" attachmentFieldSize="40" buttons="no" /> <div class="formbuttons"> diff --git a/skins/larry/templates/contactedit.html b/skins/larry/templates/contactedit.html index 39d48440b..f84936635 100644 --- a/skins/larry/templates/contactedit.html +++ b/skins/larry/templates/contactedit.html @@ -4,7 +4,7 @@ <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> </head> -<body class="iframe footerbuttons"> +<body class="iframe"> <h1 class="boxtitle"> <roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" /> @@ -19,6 +19,7 @@ <div id="contactphoto"> <roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" /> <roundcube:if condition="env:photocol" /> + <roundcube:object name="fileDropArea" id="contactpic" /> <div class="formlinks"> <roundcube:button command="upload-photo" id="uploadformlink" type="link" label="replacephoto" class="iconlink upload disabled" classAct="iconlink upload active" onclick="UI.show_uploadform();return false" condition="env:photocol" /><br/> <roundcube:button command="delete-photo" type="link" label="delete" class="iconlink delete disabled" classAct="iconlink delete active" condition="env:photocol" /> @@ -35,7 +36,7 @@ </form> -<div class="footerbuttons formbuttons"> +<div class="footerleft formbuttons"> <roundcube:button command="save" type="input" class="button mainaction" label="save" /> <roundcube:button command="show" type="input" class="button" label="cancel" condition="env:action=='edit'" /> <roundcube:button name="cancel" type="input" class="button" label="cancel" onclick="history.back()" condition="env:action=='add'" /> diff --git a/skins/larry/templates/folderedit.html b/skins/larry/templates/folderedit.html index cfc8bc3d4..18d246942 100644 --- a/skins/larry/templates/folderedit.html +++ b/skins/larry/templates/folderedit.html @@ -12,14 +12,12 @@ <roundcube:object name="folderdetails" class="propform" /> </div> -<div id="formfooter"> <div class="footerleft formbuttons"> <roundcube:button command="save" type="input" class="button mainaction" label="save" /> <roundcube:if condition="!strlen(request:_mbox)" /> <input type="button" value="<roundcube:label name="cancel" />" class="button" onclick="history.back()" /> <roundcube:endif /> </div> -</div> <roundcube:include file="/includes/footer.html" /> diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html index ab4e46ce1..988ff952c 100644 --- a/skins/larry/templates/folders.html +++ b/skins/larry/templates/folders.html @@ -28,7 +28,9 @@ </div> <div id="folder-details" class="uibox contentbox"> - <roundcube:object name="folderframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> + <div class="iframebox"> + <roundcube:object name="folderframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + </div> <roundcube:object name="message" id="message" class="statusbar" /> </div> diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html index 061088ea5..d9270b68a 100644 --- a/skins/larry/templates/identities.html +++ b/skins/larry/templates/identities.html @@ -25,7 +25,9 @@ </div> <div id="identity-details" class="uibox contentbox"> - <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> + <div class="iframebox"> + <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + </div> <roundcube:object name="message" id="message" class="statusbar" /> </div> diff --git a/skins/larry/templates/identityedit.html b/skins/larry/templates/identityedit.html index 3ef41319a..8d5e62290 100644 --- a/skins/larry/templates/identityedit.html +++ b/skins/larry/templates/identityedit.html @@ -12,11 +12,9 @@ <roundcube:object name="identityform" class="propform" size="40" textareacols="40" textarearows="6" /> </div> -<div id="formfooter"> <div class="footerleft formbuttons"> <roundcube:button command="save" type="input" class="button mainaction" label="save" /> </div> -</div> <roundcube:include file="/includes/footer.html" /> diff --git a/skins/larry/templates/login.html b/skins/larry/templates/login.html index c0ceb5c88..8aac930ed 100644 --- a/skins/larry/templates/login.html +++ b/skins/larry/templates/login.html @@ -24,7 +24,7 @@ </div> <div id="bottomline"> - Roundcube Webmail <roundcube:object name="version" /> + <roundcube:var name="config:product_name"> <roundcube:object name="version" condition="config:display_version" /> <roundcube:if condition="config:support_url" /> ● <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a> <roundcube:endif /> diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index 183129a98..32c64d929 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -5,27 +5,29 @@ <roundcube:include file="/includes/links.html" /> <style type="text/css"> <roundcube:if condition="config:preview_pane == true" /> - #mailview-top { height: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter-38 : 300" />px; } - #mailview-bottom { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+5 : 320" />px; height: auto; } + #mailview-top { height: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter-48 : 276" />px; } + #mailview-bottom { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+6 : 330" />px; height: auto; } #mailpreviewframe { display: block; } <roundcube:endif /> </style> </head> -<body class="noscroll"> +<body> +<div class="minwidth"> <roundcube:include file="/includes/header.html" /> <div id="mainscreen"> -<div id="mailview-left"> - -<!-- search box --> -<div id="quicksearchbar"> -<roundcube:object name="searchform" id="quicksearchbox" /> -<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " /> -<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> +<!-- toolbar --> +<div id="messagetoolbar" class="toolbar"> + <roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" /> + <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" /> + <span class="spacer"></span> + <roundcube:include file="/includes/mailtoolbar.html" /> </div> +<div id="mailview-left"> + <!-- folders list --> <div id="folderlist-header"></div> <div id="mailboxcontainer" class="uibox listbox"> @@ -44,20 +46,30 @@ <div id="mailview-right"> +<div id="messagesearchtools"> + <!-- search filter --> <div id="searchfilter"> <roundcube:object name="searchfilter" class="searchfilter decorated" /> </div> -<!-- toolbar --> -<div id="messagetoolbar"> -<roundcube:include file="/includes/mailtoolbar.html" /> +<!-- search box --> +<div id="quicksearchbar"> +<roundcube:object name="searchform" id="quicksearchbox" /> +<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " /> +<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> </div> -<div id="mailview-top"> +</div> + +<roundcube:if condition="config:preview_pane == true" /> +<div id="mailview-top" class="uibox"> +<roundcube:else /> +<div id="mailview-top" class="uibox fullheight"> +<roundcube:endif /> <!-- messagelist --> -<div id="messagelistcontainer" class="uibox boxlistcontent"> +<div id="messagelistcontainer" class="boxlistcontent"> <roundcube:object name="messages" id="messagelist" class="records-table sortheader" @@ -114,6 +126,8 @@ </div><!-- end mainscreen --> +<div><!-- end minwidth --> + <div id="searchmenu" class="popupmenu"> <ul class="toolbarmenu"> <li><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <roundcube:label name="subject" /></label></li> diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 2509662fe..1becd711a 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -10,8 +10,17 @@ <div id="mainscreen"> +<!-- toolbar --> +<div id="messagetoolbar" class="toolbar fullwidth"> + <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> + <span class="spacer"></span> + <roundcube:include file="/includes/mailtoolbar.html" /> + <div class="toolbarselect"> + <roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('moveto', this.options[this.selectedIndex].value)" class="mailboxlist decorated" folder_filter="mail" /> + </div> +</div> + <div id="mailview-left"> -<roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('moveto', this.options[this.selectedIndex].value)" class="mailboxlist" folder_filter="mail" /> <!-- folders list --> <div id="mailboxcontainer" class="uibox listbox"> @@ -24,11 +33,6 @@ <div id="mailview-right"> -<!-- toolbar --> -<div id="messagetoolbar" class="fullwidth"> -<roundcube:include file="/includes/mailtoolbar.html" /> -</div> - <div id="mailview-top"> <div id="messageheader" class="uibox"> <h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2> @@ -42,6 +46,7 @@ <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&gt;" /> </div> +<div id="contactphoto"><roundcube:object name="contactphoto" /></div> </div> <div id="messagecontent" class="uibox"> diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index cd9c2349a..b53683ec1 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -9,7 +9,8 @@ <div id="messagepreviewheader"> <h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3> -<a href="#details" id="previewheaderstoggle" class="iconlink add"></a> +<a href="#details" id="previewheaderstoggle"><span class="iconlink"></span></a> +<div id="contactphoto"><roundcube:object name="contactphoto" /></div> <table class="headers-table" id="preview-shortheaders"><tbody><tr> <roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox"> diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html index 88b6b96b2..427e0a4f5 100644 --- a/skins/larry/templates/settings.html +++ b/skins/larry/templates/settings.html @@ -21,8 +21,10 @@ </div> <div id="preferences-box" class="uibox contentbox"> -<roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> -<roundcube:object name="message" id="message" class="statusbar" /> + <div class="iframebox"> + <roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + </div> + <roundcube:object name="message" id="message" class="statusbar" /> </div> </div> diff --git a/skins/larry/templates/settingsedit.html b/skins/larry/templates/settingsedit.html index ada5b57ee..1a80f58e9 100644 --- a/skins/larry/templates/settingsedit.html +++ b/skins/larry/templates/settingsedit.html @@ -12,10 +12,8 @@ <roundcube:object name="userprefs" form="form" class="propform" /> </div> -<div id="formfooter"> <div class="footerleft formbuttons"> -<roundcube:button command="save" type="input" class="button mainaction" label="save" /> -</div> + <roundcube:button command="save" type="input" class="button mainaction" label="save" /> </div> <roundcube:include file="/includes/footer.html" /> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 675f61bc3..780ce7a62 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -108,7 +108,7 @@ function rcube_mail_ui() $('#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:310, min:150, size:0, offset:-22 }); + orientation:'h', relative:true, start:310, min:150, size:12, offset:4 }); if (previewframe) mailviewsplit.init(); @@ -170,23 +170,32 @@ function rcube_mail_ui() return; } - var title = $('option', this).first().text(); + var select = $(this), + height = Math.max(select.height(), 26) - 2, + width = select.width() - 22, + title = $('option', this).first().text(); + if ($('option:selected', this).val() != '') title = $('option:selected', this).text(); - var select = $(this) - .change(function(){ + var overlay = $('<a class="menuselector"><span class="handle">' + title + '</span></a>') + .css('position', 'absolute') + .offset(select.position()) + .insertAfter(select); + + overlay.children().width(width).height(height).css('line-height', (height - 1) + 'px'); + + select.change(function() { var val = $('option:selected', this).text(); $(this).next().children().html(val); }); - $('<a class="menuselector dropdownselector"><span class="handle">' + title + '</span></a>') - .css('position', 'absolute') - .offset(select.position()) - .insertAfter(select) - .children().width(select.outerWidth() - 40); + var parent = select.parent(); + if (parent.css('position') != 'absolute') + parent.css('position', 'relative'); - select.parent().css('position', 'relative'); + // re-set original select width to fix click action and options width in some browsers + select.width(overlay.width()); }); $(document.body) @@ -209,6 +218,7 @@ function rcube_mail_ui() // don't use $(window).resize() due to some unwanted side-effects window.onresize = resize; + resize(); } /** @@ -246,6 +256,20 @@ function rcube_mail_ui() if (rcmail.env.task == 'mail' && rcmail.env.action == 'compose') { layout_composeview(); } + + // make iframe footer buttons float if scrolling is active + $('body.iframe .footerleft').each(function(){ + var footer = $(this), + body = $(document.body), + floating = footer.hasClass('floating'), + overflow = body.outerHeight(true) > $(window).height(); + if (overflow != floating) { + var action = overflow ? 'addClass' : 'removeClass'; + footer[action]('floating'); + body[action]('floatingbuttons'); + } + }) + } /** @@ -254,7 +278,7 @@ function rcube_mail_ui() function message_displayed(p) { // show a popup dialog on errors - if (p.type == 'error') { + if (p.type == 'error' && rcmail.env.task != 'login') { if (!me.messagedialog) { me.messagedialog = $('<div>').addClass('popupdialog'); } @@ -305,8 +329,7 @@ function rcube_mail_ui() function resize_leftcol(splitter) { - if (splitter) - $('#quicksearchbar input').css('width', (splitter.pos - 70) + 'px'); + // STUB } @@ -334,7 +357,13 @@ function rcube_mail_ui() function update_quota(p) { - var y = p.total ? Math.ceil(p.percent / 100 * 20) * 24 : 0; + var step = 24, step_count = 20, + y = p.total ? Math.ceil(p.percent / 100 * step_count) * step : 0; + + // never show full-circle if quota is close to 100% but below. + if (p.total && y == step * step_count && p.percent < 100) + y -= step; + $('#quotadisplay').css('background-position', '0 -'+y+'px'); } @@ -435,7 +464,7 @@ function rcube_mail_ui() button.removeClass().addClass(visible ? 'enabled' : 'closed'); if (visible) { - $('#mailview-top').css({ bottom:'auto' }); + $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' }); $('#mailview-bottom').css({ height:'auto' }); rcmail.env.contentframe = 'messagecontframe'; @@ -454,7 +483,7 @@ function rcube_mail_ui() rcmail.env.contentframe = null; rcmail.show_contentframe(false); - $('#mailview-top').css({ height:'auto', bottom:'28px' }); + $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'28px' }); $('#mailview-bottom').css({ top:'auto', height:'26px' }); if (mailviewsplit.handle) |
