diff options
Diffstat (limited to 'skins/larry')
29 files changed, 543 insertions, 124 deletions
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css index 39d0cce21..54a14da0b 100644 --- a/skins/larry/addressbook.css +++ b/skins/larry/addressbook.css @@ -149,26 +149,59 @@ background: url(images/listicons.png) -2px -1180px no-repeat; } +/* This padding-left should be equal to the focused border-left + the focused padding-left */ +#contacts-table thead tr td:first-child, +#contacts-table tbody tr td:first-child { + border-left: 0; + padding-left: 36px; +} + +/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ +#contacts-table tbody tr.focused > td:first-child { + border-left: 2px solid #b0ccd7; + padding-left: 34px; +} + +#contacts-table tbody tr.selected.focused > td:first-child { + border-left-color: #9ec2d0; +} + #contacts-table .contact td.name { background-position: 6px -1603px; } +#contacts-table .contact.focused td.name { + background-position: 4px -1603px; +} + #contacts-table .contact.selected td.name, #contacts-table .contact.unfocused td.name { background-position: 6px -1627px; font-weight: bold; } +#contacts-table .contact.selected.focused td.name { + background-position: 4px -1627px; +} + #contacts-table .group td.name { background-position: 6px -1555px; } +#contacts-table .group.focused td.name { + background-position: 4px -1555px; +} + #contacts-table .group.selected td.name, #contacts-table .group.unfocused td.name { background-position: 6px -1579px; font-weight: bold; } +#contacts-table .group.selected.focused td.name { + background-position: 4px -1579px; +} + #addresslist .boxtitle { padding-right: 95px; overflow: hidden; @@ -187,7 +220,7 @@ top: 0; left: 0; right: 0; - bottom: 28px; + bottom: 0px; border: 0; border-radius: 4px; } @@ -380,7 +413,7 @@ a.deletebutton { #import-box { position: absolute; - bottom: 28px; + bottom: 0px; top: 34px; left: 0; right: 0; diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css index fc4713361..60adff7a1 100644 --- a/skins/larry/ie7hacks.css +++ b/skins/larry/ie7hacks.css @@ -43,7 +43,8 @@ a.deletebutton, .attachmentslist li a.cancelupload, #contacts-table td.action a, .previewheader .iconlink, -.minimal #taskbar .button-inner { +.minimal #taskbar .button-inner, +#preferences-details fieldset.advanced .advanced-toggle { /* workaround for text-indent which also offsets the background image */ text-indent: 0; font-size: 0; diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css index 960ce7648..7c1585107 100644 --- a/skins/larry/iehacks.css +++ b/skins/larry/iehacks.css @@ -56,6 +56,10 @@ input.button:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#c8c8c8', GradientType=0); } +#messagestack div { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0404040', endColorstr='#e0303030', GradientType=0); +} + .ui-dialog.popupmessage .ui-dialog-titlebar { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#cfcfcf', GradientType=0); } diff --git a/skins/larry/images/ajaxloader_dark.gif b/skins/larry/images/ajaxloader_dark.gif Binary files differnew file mode 100644 index 000000000..f1cce35ac --- /dev/null +++ b/skins/larry/images/ajaxloader_dark.gif diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png Binary files differindex 9f8f44536..8e2560198 100644 --- a/skins/larry/images/buttons.png +++ b/skins/larry/images/buttons.png diff --git a/skins/larry/images/filetypes.png b/skins/larry/images/filetypes.png Binary files differindex 53b2eee9a..09772660b 100644 --- a/skins/larry/images/filetypes.png +++ b/skins/larry/images/filetypes.png diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png Binary files differindex e4ffef660..551639876 100644 --- a/skins/larry/images/listicons.png +++ b/skins/larry/images/listicons.png diff --git a/skins/larry/images/messages_dark.png b/skins/larry/images/messages_dark.png Binary files differnew file mode 100644 index 000000000..d7c932502 --- /dev/null +++ b/skins/larry/images/messages_dark.png diff --git a/skins/larry/includes/footer.html b/skins/larry/includes/footer.html index a4fa69296..5cf9d1ec5 100644 --- a/skins/larry/includes/footer.html +++ b/skins/larry/includes/footer.html @@ -1,3 +1,5 @@ +<roundcube:object name="message" id="messagestack" condition="env:task != 'login'" /> + <script type="text/javascript"> // UI startup diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html index 59f2d581a..5708a94f1 100644 --- a/skins/larry/includes/mailtoolbar.html +++ b/skins/larry/includes/mailtoolbar.html @@ -39,6 +39,8 @@ <li><roundcube:button command="download" label="emlsave" class="icon" classAct="icon active" innerclass="icon download" /></li> <li><roundcube:button command="edit" prop="new" label="editasnew" class="icon" classAct="icon active" innerclass="icon edit" /></li> <li><roundcube:button command="viewsource" label="viewsource" class="icon" classAct="icon active" innerclass="icon viewsource" /></li> + <li><roundcube:button command="move" label="moveto" class="icon" classAct="icon active" innerclass="icon move folder-selector-link" /></li> + <li><roundcube:button command="copy" label="copyto" class="icon" classAct="icon active" innerclass="icon copy folder-selector-link" /></li> <li><roundcube:button command="open" label="openinextwin" target="_blank" class="icon" classAct="icon active" innerclass="icon extwin" /></li> <roundcube:container name="messagemenu" id="messagemenu" /> </ul> diff --git a/skins/larry/mail.css b/skins/larry/mail.css index b65b08112..6cfbcaac3 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -36,20 +36,18 @@ position: absolute; top: 42px; left: 0; - width: 100%; - bottom: 28px; -} - -#mailview-top.fullheight { - border-radius: 4px 4px 0 0; + right: 0; + bottom: 0px; + overflow: visible; /* fixes display issues of fixed list header in IE */ } #mailview-bottom { + display: none; position: absolute; left: 0; bottom: 0; - width: 100%; - height: 27px; + right: 0; + height: 0; border-radius: 4px; border-top: none; } @@ -58,12 +56,6 @@ border-radius: 0 0 4px 4px; } -#folderlist-header { - width: 100%; - height: 12px; - top: 32px; -} - #mailboxcontainer, #messagelistcontainer { position: absolute; @@ -102,10 +94,6 @@ html>/**/body #messagelist { border-radius: 0 0 4px 4px; } -#mailview-top.fullheight #messagelistfooter { - border-radius: 0; -} - #messagelistfooter.rightalign { text-align: right; } @@ -214,6 +202,14 @@ a.iconbutton.threadmode.selected { background-position: 6px -406px; } +#mailboxlist li.mailbox.trash.empty > a { + background-position: 6px -1924px; +} + +#mailboxlist li.mailbox.trash.empty.selected > a { + background-position: 6px -1948px; +} + #mailboxlist li.mailbox.archive > a { background-position: 6px -1699px; } @@ -254,6 +250,14 @@ a.iconbutton.threadmode.selected { background-position: 23px -406px; } +#mailboxlist li.mailbox ul li.trash.empty > a { + background-position: 23px -1924px; +} + +#mailboxlist li.mailbox ul li.trash.empty.selected > a { + background-position: 23px -1948px; +} + #mailboxlist li.mailbox ul li.archive > a { background-position: 23px -1699px; } @@ -424,12 +428,6 @@ a.iconbutton.threadmode.selected { right: 0; } -#messagetoolbar .toolbarselect { - position: absolute; - bottom: 6px; - right: 3px; -} - #messagesearchtools { position: absolute; right: 0; @@ -453,11 +451,6 @@ a.iconbutton.threadmode.selected { /*** message list ***/ -/* this is necessary to make FF3 display borders */ -body:-moz-last-node #messagelist { - border-collapse: separate; -} - table.messagelist { z-index: 1; } @@ -518,7 +511,7 @@ table.messagelist.fixedcopy { } .messagelist tr td.date { - width: 135px; + width: 155px; } .messagelist tr.message { @@ -621,6 +614,10 @@ table.messagelist.fixedcopy { background-position: -24px -1116px; } +.messagelist thead tr td.priority span.priority { + background-position: -24px -1845px; +} + .messagelist tr td.priority span.prio5 { background-position: 0 -1905px; } @@ -642,7 +639,7 @@ table.messagelist.fixedcopy { } .messagelist thead tr td.flag span.flagged { - background-position: -24px -1036px; + background-position: -22px -1036px; } .messagelist tr td.status span.msgicon:hover { @@ -696,7 +693,7 @@ table.messagelist.fixedcopy { } .messagelist thead tr td.status span.status { - background-position: -24px -1016px; + background-position: -23px -1017px; } .messagelist tr td div.collapsed { @@ -753,7 +750,7 @@ table.messagelist.fixedcopy { top: 0; left: 0; width: 100%; - bottom: 28px; + bottom: 0px; } #messagecontframe { @@ -766,8 +763,9 @@ table.messagelist.fixedcopy { top: 110px; left: 0; width: 100%; - bottom: 27px; + bottom: 1px; overflow: auto; + -webkit-overflow-scrolling: touch; } #messageheader, @@ -1068,20 +1066,20 @@ div.hide-headers { margin: 8px; } -#message-objects div.notice, -#message-buttons div.notice { +#message-objects div.notice { display: block; color: #960; border: 1px solid #ffdf0e; background-color: #fef893; background-position: 5px -83px; - padding: 6px 12px 4px 30px; + padding: 6px 12px 6px 30px; white-space: normal; } #message-objects div a.button, #messagebody span.part-notice a.button { margin-left: 10px; + margin-top: -1px; } div.message-part, @@ -1366,10 +1364,8 @@ div.message-partheaders .headers-table td.header { position: absolute; top: 42px; left: 0; - width: 100%; - bottom: 28px; - border-radius: 4px 4px 0 0; - border-bottom: none; + right: 0; + bottom: 0px; overflow: hidden; } @@ -1456,7 +1452,6 @@ div.message-partheaders .headers-table td.header { -o-box-shadow: inset 0 1px 0 0 #fff; -webkit-box-shadow: inset 0 1px 0 0 #fff; -moz-box-shadow: inset 0 1px 0 0 #fff; - } .composeoption { @@ -1490,6 +1485,7 @@ div.message-partheaders .headers-table td.header { left: 0; right: 260px; bottom: 0; + border-radius: 0 0 0 4px; } #composebodycontainer.buttons { @@ -1503,7 +1499,7 @@ div.message-partheaders .headers-table td.header { bottom: 0; width: 99%; border: 0; - border-radius: 0; + border-radius: 0 0 0 4px; padding: 8px 0 8px 8px; resize: none; font-family: monospace; diff --git a/skins/larry/settings.css b/skins/larry/settings.css index 6afa48c40..af667b9e7 100644 --- a/skins/larry/settings.css +++ b/skins/larry/settings.css @@ -2,7 +2,7 @@ * Roundcube webmail styles for the Settings section * * Copyright (c) 2012, The Roundcube Dev Team - * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com + * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com * * The contents are subject to the Creative Commons Attribution-ShareAlike * License. It is allowed to copy, distribute, transmit and to adapt the work @@ -61,11 +61,21 @@ #preferences-details fieldset.advanced .advanced-toggle { position: absolute; - top: 2px; + display: block; + top: 0px; right: 6px; text-decoration: none; color: #666; font-size: 11px; + width: 20px; + height: 18px; + background: url('images/listicons.png') 0 -1157px no-repeat; + text-indent: 1000px; + overflow: hidden; +} + +#preferences-details fieldset.advanced .collapsed .advanced-toggle { + background-position: -24px -1137px; } #sections-table tbody td.section, @@ -130,6 +140,14 @@ background-position: 6px -1819px; } +#settings-sections span.responses a { + background-position: 6px -1972px; +} + +#settings-sections span.responses.selected a { + background-position: 6px -1996px; +} + #sections-table #rcmrowgeneral td.section { background-position: 6px -573px; } @@ -206,6 +224,10 @@ text-overflow: ellipsis; } +#identities-table tbody tr.readonly td { + font-style: italic; +} + #folder-details, #identity-details { position: absolute; diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 4b238c163..e1a813373 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -509,6 +509,7 @@ a.iconlink.upload { } #message.statusbar { + display: none; position: absolute; bottom: 0; left: 0; @@ -528,6 +529,102 @@ a.iconlink.upload { text-overflow: ellipsis; } +#messagestack { + position: absolute; + bottom: 20px; + right: 12px; + z-index: 50000; + width: auto; + height: auto; + max-height: 85%; + overflow-y: auto; + padding: 2px; +} + +#messagestack div { + display: block; + position: relative; + width: 280px; + height: auto; + min-height: 16px; + margin: 3px 2px 5px 2px; + padding: 8px 10px 7px 30px; + cursor: default; + font-size: 12px; + font-weight: bold; + border-radius: 4px; + border: 1px solid #444; + color: #ebebeb; + text-shadow: 0 1px 1px #000; + + background: rgba(64,64,64,0.85); + background: -moz-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.9) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,0.85)), color-stop(100%,rgba(48,48,48,0.9))); + background: -webkit-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); + background: -o-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); + background: -ms-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); + background: linear-gradient(to bottom, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); + + -moz-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; + -webkit-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; + -o-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; + box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; +} + +#messagestack div:after { + content: ""; + position: absolute; + display: block; + top: 0; + left: 4px; + width: 20px; + height: 24px; + background: url(images/messages_dark.png) 0 7px no-repeat; +} + +#messagestack div.error { + color: #ff615d; +} + +#messagestack div.error:after { + background-position: 0 -55px; +} + +#messagestack div.warning { + color: #f4bf0e; +} + +#messagestack div.warning:after { + background-position: 0 -84px; +} + +#messagestack div.confirmation { + color: #00e05a; +} + +#messagestack div.confirmation:after { + background-position: 0 -25px; +} + +#messagestack div.loading { + color: #ddd; +} + +#messagestack div.loading:after { + top: 4px; + left: 6px; + background: url(images/ajaxloader_dark.gif) 0 4px no-repeat; +} + +#messagestack div a { + color: #94c0da; +} + +#messagestack div a:hover { + text-decoration: underline; + cursor: pointer; +} + .ui-dialog.error .ui-dialog-title, .ui-dialog.warning .ui-dialog-title, .ui-dialog.confirmation .ui-dialog-title { @@ -1045,6 +1142,9 @@ ul.listing { ul.listing li { background-color: #d9ecf4; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } ul.listing li ul { @@ -1241,7 +1341,6 @@ table.records-table { display: table; width: 100%; table-layout: fixed; - border-collapse: collapse; border-spacing: 0; border: 1px solid #bbd3da; } @@ -1291,9 +1390,21 @@ table.records-table { background-color: #fff; } +/* This padding-left minus the focused padding left should be half of the focused border-left */ .records-table thead tr td:first-child, .records-table tbody tr td:first-child { border-left: 0; + padding-left: 6px; +} + +/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ +.records-table tbody tr.focused > td:first-child { + border-left: 2px solid #b0ccd7; + padding-left: 4px; +} + +.records-table tbody tr.selected.focused > td:first-child { + border-left-color: #49b3d2; } .records-table tr.selected td { @@ -1313,7 +1424,7 @@ table.records-table { .records-table tr.unfocused td { color: #fff !important; - background: #4db0d2 !important; + background-color: #4db0d2 !important; } .records-table tr.unfocused td a, @@ -1326,7 +1437,6 @@ table.records-table { color: #ccc !important; } - /*** iFrames ***/ #aboutframe { @@ -1405,7 +1515,7 @@ body.iframe .footerleft.floating:before, top: 34px; left: 0; right: 0; - bottom: 28px; + bottom: 0px; overflow: auto; } @@ -1414,7 +1524,7 @@ body.iframe .footerleft.floating:before, top: 0; left: 0; right: 0; - bottom: 28px; + bottom: 0px; } .footerleft { @@ -1440,6 +1550,20 @@ body.iframe .footerleft.floating:before, font-size: 12px; } +.propform div.prop { + margin-bottom: 0.5em; +} + +.propform div.prop.block label { + display: block; + margin-bottom: 0.3em; +} + +.propform div.prop.block input, +.propform div.prop.block textarea { + width: 95%; +} + fieldset.floating { float: left; margin-right: 10px; @@ -1597,11 +1721,13 @@ ul.proplist li { min-height: 40px; padding: 5px 25px; text-align: center; + font-size: 1.1em; } #login-form #message div { display: inline-block; padding-right: 0; + font-size: 12px; } #bottomline { @@ -1620,7 +1746,7 @@ ul.proplist li { #quicksearchbar { position: absolute; - right: 1px; + right: 2px; top: 2px; width: 240px; } @@ -1817,7 +1943,11 @@ ul.proplist li { } .toolbar a.button.download { - background-position: center -1906px; + background-position: center -1892px; +} + +.toolbar a.button.responses { + background-position: center -1932px; } a.menuselector { @@ -1889,11 +2019,11 @@ select.decorated option { #quotadisplay { left: 6px; + height: 18px; font-size: 12px; font-weight: bold; text-shadow: 0px 1px 1px #fff; padding-left: 30px; - height: 18px; background: url(images/quota.png) -100px 0 no-repeat; } @@ -1906,6 +2036,9 @@ select.decorated option { top: 32px; left: 90px; width: auto; + max-height: 70%; + overflow: -moz-scrollbars-vertical; + overflow-y: auto; background: #444; border: 1px solid #999; z-index: 240; @@ -1922,6 +2055,7 @@ select.decorated option { } ul.toolbarmenu, +ul.toolbarmenu ul, #rcmKSearchpane ul { margin: 0; padding: 0; @@ -1940,13 +2074,13 @@ ul.toolbarmenu li, } .googie_list tr:first-child td, -ul.toolbarmenu li:first-child, +ul.toolbarmenu > li:first-child, select.decorated option:first-child { border-top: 0; } .googie_list tr:last-child td, -ul.toolbarmenu li:last-child, +ul.toolbarmenu > li:last-child, select.decorated option:last-child { border-bottom: 0; } @@ -2000,6 +2134,11 @@ ul.toolbarmenu li label { text-shadow: 0px 1px 1px #333; } +ul.toolbarmenu li.separator label { + color: #bbb; + font-style: italic; +} + ul.toolbarmenu li a.icon { color: #eee; padding: 2px 6px; @@ -2078,6 +2217,23 @@ ul.toolbarmenu li span.conversation { background-position: 0 -1532px; } +ul.toolbarmenu li span.move { + background-position: 0 -2126px; +} + +ul.toolbarmenu li span.copy { + background-position: 0 -2150px; +} + +#snippetslist { + max-width: 200px; +} + +#snippetslist li a { + overflow: hidden; + text-overflow: ellipsis; +} + #rcmKSearchpane { border-radius: 0 0 4px 4px; border-top: 0; @@ -2181,6 +2337,38 @@ ul.toolbarmenu li span.conversation { z-index: 255; } +/*** folder selector ***/ + +#folder-selector li a span { + background: url("images/listicons.png") 4px -2021px no-repeat; + display: block; + height: 17px; + min-height: 14px; + padding: 4px 4px 1px 28px; + overflow: hidden; + max-width: 120px; + text-overflow: ellipsis; +} + +#folder-selector li a.virtual { + opacity: .2; +} + +#folder-selector li a.inbox span { + background-position: 4px -2049px; +} +#folder-selector li a.drafts span { + background-position: 4px -1388px; +} +#folder-selector li a.sent span { + background-position: 4px -2074px; +} +#folder-selector li a.trash span { + background-position: 4px -1508px; +} +#folder-selector li a.junk span { + background-position: 4px -2100px; +} /*** attachment list ***/ @@ -2287,6 +2475,18 @@ ul.toolbarmenu li span.conversation { background-position: 0 -494px; } +.attachmentslist li.ppt, +.attachmentslist li.pptx, +.attachmentslist li.ppsx, +.attachmentslist li.vnd.mspowerpoint { + background-position: 0 -520px; +} + +.attachmentslist li.odp, +.attachmentslist li.otp { + background-position: 0 -546px; +} + .attachmentslist li a, #compose-attachments ul li { display: block; diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css index c40d44f4b..2596f2bd2 100644 --- a/skins/larry/svggradients.css +++ b/skins/larry/svggradients.css @@ -56,6 +56,10 @@ input.button:active { background-image: url(svggradient.php?c=eaeaea;c8c8c8); } +#messagestack div { + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIgc3RvcC1vcGFjaXR5PSIwLjg4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMDMwMzAiIHN0b3Atb3BhY2l0eT0iMC44OCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); +} + .ui-dialog.popupmessage .ui-dialog-titlebar { background-image: url(svggradient.php?c=e3e3e3;cfcfcf); } diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index b33ebd999..9f83853b2 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -71,7 +71,6 @@ <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 15c8e56ff..11662d185 100644 --- a/skins/larry/templates/compose.html +++ b/skins/larry/templates/compose.html @@ -30,6 +30,7 @@ <roundcube:endif /> <roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" /> <roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" /> + <a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.show_popup('responsesmenu');return false"><roundcube:label name="responses" /></a> <roundcube:container name="toolbar" id="compose-toolbar" /> </div> </div> @@ -178,10 +179,6 @@ </form> -<div id="mailview-bottom" class="uibox"> - <roundcube:object name="message" id="message" class="statusbar" /> -</div> - </div><!-- end mailview-right --> </div><!-- end mainscreen --> @@ -196,6 +193,16 @@ <div id="spellmenu" class="popupmenu"></div> +<div id="responsesmenu" class="popupmenu"> + <ul class="toolbarmenu" id="textresponsesmenu"> + <li class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li> + <roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" /> + <li class="separator"><label><roundcube:label name="manageresponses" /></label></li> + <li><roundcube:button command="save-response" type="link" label="savenewresponse" classAct="active" unselectable="on" /></li> + <li><roundcube:button command="responses" type="link" label="editresponses" classAct="active" /></li> + </ul> +</div> + <roundcube:include file="/includes/footer.html" /> </body> diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html index 988ff952c..56396bf1d 100644 --- a/skins/larry/templates/folders.html +++ b/skins/larry/templates/folders.html @@ -31,7 +31,6 @@ <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> </div> diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html index d9270b68a..e3d2cc842 100644 --- a/skins/larry/templates/identities.html +++ b/skins/larry/templates/identities.html @@ -28,7 +28,6 @@ <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> </div> diff --git a/skins/larry/templates/importcontacts.html b/skins/larry/templates/importcontacts.html index 69b138b9a..a670d0354 100644 --- a/skins/larry/templates/importcontacts.html +++ b/skins/larry/templates/importcontacts.html @@ -25,8 +25,7 @@ </p> </div> -<roundcube:object name="message" id="message" class="statusbar" /> - +</div> </div> <roundcube:include file="/includes/footer.html" /> diff --git a/skins/larry/templates/login.html b/skins/larry/templates/login.html index 13e919ad3..8da941189 100644 --- a/skins/larry/templates/login.html +++ b/skins/larry/templates/login.html @@ -39,11 +39,13 @@ <roundcube:object name="preloader" images=" /images/ajaxloader.gif + /images/ajaxloader_dark.gif /images/buttons.png /images/addcontact.png /images/filetypes.png /images/listicons.png /images/messages.png + /images/messages_dark.png /images/quota.png /images/selector.png /images/splitter.png diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index f2c52c820..ff5f7549c 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -5,8 +5,8 @@ <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-48 : 276" />px; } - #mailview-bottom { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+6 : 330" />px; height: auto; } + #mailview-top { height: 276px; } + #mailview-bottom { top: 330px; height: auto; display: block; } #mailpreviewframe { display: block; } <roundcube:endif /> </style> @@ -27,7 +27,6 @@ <div id="mailview-left"> <!-- folders list --> -<div id="folderlist-header"></div> <div id="mailboxcontainer" class="uibox listbox"> <div id="folderlist-content" class="scroller withfooter"> <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> @@ -116,8 +115,6 @@ <roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> </div> -<roundcube:object name="message" id="message" class="statusbar" /> - </div><!-- end mailview-bottom --> </div><!-- end mailview-right --> diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 6937b00af..df92b7511 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -16,9 +16,6 @@ <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> <roundcube:endif /> <roundcube:include file="/includes/mailtoolbar.html" /> - <div class="toolbarselect"> - <roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('move', this.options[this.selectedIndex].value)" class="mailboxlist decorated" folder_filter="mail" /> - </div> </div> <roundcube:if condition="!env:extwin" /> @@ -36,6 +33,7 @@ <div id="mailview-right" class="offset uibox"> <roundcube:else /> +<roundcube:object name="mailboxlist" folder_filter="mail" type="js" /> <div id="mailview-right" class="offset fullwidth uibox"> <roundcube:endif /> @@ -84,8 +82,6 @@ </div> </div> -<roundcube:object name="message" id="message" class="statusbar" /> - </div><!-- end mailview-right --> </div><!-- end mainscreen --> diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html index a735d47f2..dbe373a12 100644 --- a/skins/larry/templates/messageerror.html +++ b/skins/larry/templates/messageerror.html @@ -38,8 +38,6 @@ <div id="messagecontent" class="watermark"></div> -<roundcube:object name="message" id="message" class="statusbar" /> - </div><!-- end mailview-right --> </div><!-- end mainscreen --> diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html index d0e3a808d..0ec935873 100644 --- a/skins/larry/templates/messagepart.html +++ b/skins/larry/templates/messagepart.html @@ -27,7 +27,6 @@ <div class="iframebox"> <roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" /> </div> - <roundcube:object name="message" id="message" class="statusbar" /> </div> </div> diff --git a/skins/larry/templates/plugin.html b/skins/larry/templates/plugin.html index 341f604ac..5b86563ab 100644 --- a/skins/larry/templates/plugin.html +++ b/skins/larry/templates/plugin.html @@ -16,7 +16,6 @@ <div id="pluginbody" class="uibox contentbox"> <roundcube:object name="plugin.body" /> -<roundcube:object name="message" id="message" class="statusbar" /> </div> </div> diff --git a/skins/larry/templates/responseedit.html b/skins/larry/templates/responseedit.html new file mode 100644 index 000000000..8f180fe7f --- /dev/null +++ b/skins/larry/templates/responseedit.html @@ -0,0 +1,22 @@ +<roundcube:object name="doctype" value="html5" /> +<html> +<head> +<title><roundcube:object name="pagetitle" /></title> +<roundcube:include file="/includes/links.html" /> +</head> +<body class="iframe"> + +<h1 class="boxtitle"><roundcube:object name="steptitle" /></h1> + +<div id="preferences-details" class="boxcontent"> +<roundcube:object name="responseform" class="propform" size="60" textareacols="60" textarearows="18" /> +</div> + +<div class="footerleft formbuttons"> + <roundcube:button command="save" type="input" class="button mainaction" label="save" condition="!env:readonly" /> +</div> + +<roundcube:include file="/includes/footer.html" /> + +</body> +</html> diff --git a/skins/larry/templates/responses.html b/skins/larry/templates/responses.html new file mode 100644 index 000000000..8e6884539 --- /dev/null +++ b/skins/larry/templates/responses.html @@ -0,0 +1,40 @@ +<roundcube:object name="doctype" value="html5" /> +<html> +<head> +<title><roundcube:object name="pagetitle" /></title> +<roundcube:include file="/includes/links.html" /> +</head> +<body class="noscroll"> + +<roundcube:include file="/includes/header.html" /> + +<div id="mainscreen" class="offset"> + +<roundcube:include file="/includes/settingstabs.html" /> + +<div id="settings-right"> + +<div id="identitieslist" class="uibox listbox"> +<h2 class="boxtitle"><roundcube:label name="responses" /></h2> +<div class="scroller withfooter"> +<roundcube:object name="responsesList" id="identities-table" class="listing" cellspacing="0" summary="Responses list" noheader="true" /> +</div> +<div class="boxfooter"> +<roundcube:button command="add" type="link" title="savenewresponse" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="-" /> +</div> +</div> + +<div id="identity-details" class="uibox contentbox"> + <div class="iframebox"> + <roundcube:object name="responseframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + </div> +</div> + +</div> + +</div> + +<roundcube:include file="/includes/footer.html" /> + +</body> +</html> diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html index 427e0a4f5..08df7686e 100644 --- a/skins/larry/templates/settings.html +++ b/skins/larry/templates/settings.html @@ -24,7 +24,6 @@ <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/ui.js b/skins/larry/ui.js index d558f16a2..44fc727f6 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -31,6 +31,7 @@ function rcube_mail_ui() var me = this; var mailviewsplit; var compose_headers = {}; + var prefs; // export public methods this.set = setenv; @@ -44,11 +45,13 @@ function rcube_mail_ui() this.show_header_row = show_header_row; this.hide_header_row = hide_header_row; this.update_quota = update_quota; + this.get_pref = get_pref; + this.save_pref = save_pref; // set minimal mode on small screens (don't wait for document.ready) if (window.$ && document.body) { - var minmode = rcmail.get_cookie('minimalmode'); + var minmode = get_pref('minimalmode'); if (parseInt(minmode) || (minmode === null && $(window).height() < 850)) { $(document.body).addClass('minimal'); } @@ -68,6 +71,51 @@ function rcube_mail_ui() } /** + * Get preference stored in browser + */ + function get_pref(key) + { + if (!prefs) { + prefs = window.localStorage ? rcmail.local_storage_get_item('prefs.larry', {}) : {}; + } + + // fall-back to cookies + if (prefs[key] == null) { + var cookie = rcmail.get_cookie(key); + if (cookie != null) { + prefs[key] = cookie; + + // copy value to local storage and remove cookie + if (window.localStorage) { + rcmail.local_storage_set_item('prefs.larry', prefs); + rcmail.set_cookie(key, cookie, new Date()); // expire cookie + } + } + } + + return prefs[key]; + } + + /** + * Saves preference value to browser storage + */ + function save_pref(key, val) + { + prefs[key] = val; + + // write prefs to local storage + if (window.localStorage) { + rcmail.local_storage_set_item('prefs.larry', prefs); + } + else { + // store value in cookie + var exp = new Date(); + exp.setYear(exp.getFullYear() + 1); + rcmail.set_cookie(key, val, exp); + } + } + + /** * Initialize UI * Called on document.ready */ @@ -82,15 +130,15 @@ function rcube_mail_ui() $('#taskbar .minmodetoggle').click(function(e){ var ismin = $(document.body).toggleClass('minimal').hasClass('minimal'); - rcmail.set_cookie('minimalmode', ismin?1:0); + save_pref('minimalmode', ismin?1:0); $(window).resize(); }); /*** mail task ***/ if (rcmail.env.task == 'mail') { - rcmail.addEventListener('menu-open', menu_open); - rcmail.addEventListener('menu-save', menu_save); - rcmail.addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list') }); + rcmail.addEventListener('menu-open', menu_open) + .addEventListener('menu-save', menu_save) + .addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list') }); var dragmenu = $('#dragmessagemenu'); if (dragmenu.length) { @@ -99,21 +147,28 @@ function rcube_mail_ui() } if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') { - rcmail.addEventListener('enable-command', enable_command); - rcmail.addEventListener('aftershow-headers', function() { layout_messageview(); }); - rcmail.addEventListener('afterhide-headers', function() { layout_messageview(); }); + rcmail.addEventListener('enable-command', enable_command) + .addEventListener('aftershow-headers', function() { layout_messageview(); }) + .addEventListener('afterhide-headers', function() { layout_messageview(); }); $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(); return false }); // add menu link for each attachment $('#attachment-list > li').each(function() { - $(this).append($('<a class="drop">').click(function() { attachmentmenu(this); })); + $(this).append($('<a class="drop"></a>').click(function() { attachmentmenu(this); })); }); + + if (get_pref('previewheaders') == '1') { + toggle_preview_headers(); + } } else if (rcmail.env.action == 'compose') { - rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); }); - rcmail.addEventListener('aftersend-attachment', show_uploadform); - rcmail.addEventListener('add-recipient', function(p){ show_header_row(p.field, true); }); - layout_composeview(); + rcmail.addEventListener('aftersend-attachment', show_uploadform) + .addEventListener('add-recipient', function(p){ show_header_row(p.field, true); }) + .addEventListener('aftertoggle-editor', function(e){ + window.setTimeout(function(){ layout_composeview() }, 200); + if (e && e.mode) + $("select[name='editorSelector']").val(e.mode); + }); // Show input elements with non-empty value var f, v, field, fields = ['cc', 'bcc', 'replyto', 'followupto']; @@ -130,9 +185,18 @@ function rcube_mail_ui() $('#composeoptionstoggle').toggleClass('remove'); $('#composeoptions').toggle(); layout_composeview(); + save_pref('composeoptions', $('#composeoptions').is(':visible') ? '1' : '0'); return false; }).css('cursor', 'pointer'); + if (get_pref('composeoptions') !== '0') { + $('#composeoptionstoggle').click(); + } + + // adjust hight when textarea starts to scroll + $("textarea[name='_to'], textarea[name='_cc'], textarea[name='_bcc']").change(function(e){ adjust_compose_editfields(this); }).change(); + rcmail.addEventListener('autocomplete_insert', function(p){ adjust_compose_editfields(p.field); }); + // toggle compose options if opened in new window and they were visible before var opener_rc = rcmail.opener(); if (opener_rc && opener_rc.env.action == 'compose' && $('#composeoptionstoggle', opener.document).hasClass('remove')) @@ -152,11 +216,9 @@ function rcube_mail_ui() if (previewframe) mailviewsplit.init(); - new rcube_scroller('#folderlist-content', '#folderlist-header', '#folderlist-footer'); - - rcmail.addEventListener('setquota', update_quota); - rcmail.addEventListener('enable-command', enable_command); - rcmail.addEventListener('afterimport-messages', show_uploadform); + rcmail.addEventListener('setquota', update_quota) + .addEventListener('enable-command', enable_command) + .addEventListener('afterimport-messages', show_uploadform); } else if (rcmail.env.action == 'get') { new rcube_splitter({ id:'mailpartsplitterv', p1:'#messagepartheader', p2:'#messagepartcontainer', @@ -211,17 +273,15 @@ function rcube_mail_ui() } /*** addressbook task ***/ else if (rcmail.env.task == 'addressbook') { - rcmail.addEventListener('afterupload-photo', show_uploadform); - rcmail.addEventListener('beforepushgroup', push_contactgroup); - rcmail.addEventListener('beforepopgroup', pop_contactgroup); + rcmail.addEventListener('afterupload-photo', show_uploadform) + .addEventListener('beforepushgroup', push_contactgroup) + .addEventListener('beforepopgroup', pop_contactgroup); if (rcmail.env.action == '') { new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right', orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init(); new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box', orientation:'v', relative:true, start:286, min:270, size:12 }).init(); - - new rcube_scroller('#directorylist-content', '#directorylist-header', '#directorylist-footer'); } var dragmenu = $('#dragcontactmenu'); @@ -309,8 +369,10 @@ function rcube_mail_ui() function body_mouseup(e) { var config, obj, target = e.target; + if (target.className == 'inner') target = e.target.parentNode; + for (var id in popups) { obj = popups[id]; config = popupconfig[id]; @@ -319,9 +381,10 @@ function rcube_mail_ui() && !config.toggle && (!config.editable || !target_overlaps(target, obj.get(0))) && (!config.sticky || !rcube_mouse_is_over(e, obj.get(0))) + && !$(target).is('.folder-selector-link') ) { var myid = id+''; - window.setTimeout(function(){ show_popupmenu(myid, false) }, 10); + window.setTimeout(function() { show_popupmenu(myid, false); }, 10); } } } @@ -366,8 +429,15 @@ function rcube_mail_ui() */ function message_displayed(p) { + var siblings = $(p.object).siblings('div'); + if (siblings.length) + $(p.object).insertBefore(siblings.first()); + // show a popup dialog on errors if (p.type == 'error' && rcmail.env.task != 'login') { + // hide original message object, we don't want both + rcmail.hide_message(p.object); + if (me.message_timer) { window.clearTimeout(me.message_timer); } @@ -376,8 +446,10 @@ function rcube_mail_ui() } var msg = p.message, - pos = $(p.object).offset(); - pos.top -= (rcmail.env.task == 'login' ? 20 : 160); + dialog_close = function() { + // check if dialog is still displayed, to prevent from js error + me.messagedialog.is(':visible') && me.messagedialog.dialog('destroy').hide(); + }; if (me.messagedialog.is(':visible')) msg = me.messagedialog.html() + '<p>' + p.message + '</p>'; @@ -388,16 +460,14 @@ function rcube_mail_ui() closeOnEscape: true, dialogClass: 'popupmessage ' + p.type, title: env.errortitle, - close: function() { - me.messagedialog.dialog('destroy').hide(); - }, - position: ['center', pos.top], - hide: { effect:'drop', direction:'down' }, + close: dialog_close, + position: ['center', 'center'], + hide: {effect: 'fadeOut'}, width: 420, minHeight: 90 }).show(); - me.message_timer = window.setTimeout(function(){ me.messagedialog.dialog('close'); }, Math.max(2000, p.timeout / 2)); + me.message_timer = window.setTimeout(dialog_close, p.timeout); } } @@ -428,6 +498,16 @@ function rcube_mail_ui() // STUB } + function adjust_compose_editfields(elem) + { + if (elem.nodeName == 'TEXTAREA') { + var $elem = $(elem), line_height = 14, // hard-coded because some browsers only provide the outer height in elem.clientHeight + content_height = elem.scrollHeight, + rows = elem.value.length > 80 && content_height > line_height*1.5 ? 2 : 1; + $elem.css('height', (line_height*rows) + 'px'); + layout_composeview(); + } + } function layout_composeview() { @@ -473,7 +553,7 @@ function rcube_mail_ui() function enable_command(p) { - if (p.command == 'reply-list') { + if (p.command == 'reply-list' && rcmail.env.reply_all_mode == 1) { var label = rcmail.gettext(p.status ? 'replylist' : 'replyall'); if (rcmail.env.action == 'preview') $('a.button.replyall').attr('title', label); @@ -584,7 +664,7 @@ function rcube_mail_ui() var button = $(e.target), frame = $('#mailpreviewframe'), visible = !frame.is(':visible'), - splitter = mailviewsplit.pos || parseInt(rcmail.get_cookie('mailviewsplitter') || 320), + splitter = mailviewsplit.pos || parseInt(get_pref('mailviewsplitter') || 320), topstyles, bottomstyles, uid; frame.toggle(); @@ -592,7 +672,7 @@ function rcube_mail_ui() if (visible) { $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' }); - $('#mailview-bottom').css({ height:'auto' }); + $('#mailview-bottom').css({ height:'auto' }).show(); rcmail.env.contentframe = 'messagecontframe'; if (uid = rcmail.message_list.get_single_selection()) @@ -610,8 +690,8 @@ function rcube_mail_ui() rcmail.env.contentframe = null; rcmail.show_contentframe(false); - $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'28px' }); - $('#mailview-bottom').css({ top:'auto', height:'26px' }); + $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'0px' }); + $('#mailview-bottom').css({ top:'auto', height:'0px' }).hide(); if (mailviewsplit.handle) mailviewsplit.handle.hide(); @@ -641,6 +721,8 @@ function rcube_mail_ui() button.attr('href', '#hide').removeClass('add').addClass('remove') else button.attr('href', '#details').removeClass('remove').addClass('add') + + save_pref('previewheaders', full.is(':visible') ? '1' : '0'); } @@ -1157,7 +1239,7 @@ function rcube_splitter(p) $(window).resize(onResize); // read saved position from cookie - var cookie = rcmail.get_cookie(this.id); + var cookie = this.get_cookie(); if (cookie && !isNaN(cookie)) { this.pos = parseFloat(cookie); this.resize(); @@ -1246,6 +1328,18 @@ function rcube_splitter(p) if (!me.drag_active) return false; + // with timing events dragging action is more responsive + window.clearTimeout(me.ts); + me.ts = window.setTimeout(function() { onDragAction(e); }, 1); + + return false; + }; + + /** + * Dragging action (see onDrag()) + */ + function onDragAction(e) + { var pos = rcube_event.get_mouse_pos(e); if (me.relative) { @@ -1269,7 +1363,6 @@ function rcube_splitter(p) me.p1pos = me.relative ? me.p1.position() : me.p1.offset(); me.p2pos = me.relative ? me.p2.position() : me.p2.offset(); - return false; }; /** @@ -1312,13 +1405,20 @@ function rcube_splitter(p) }; /** + * Get saved splitter position from cookie + */ + this.get_cookie = function() + { + return window.UI ? UI.get_pref(this.id) : null; + }; + + /** * Saves splitter position in cookie */ this.set_cookie = function() { - var exp = new Date(); - exp.setYear(exp.getFullYear() + 1); - rcmail.set_cookie(this.id, this.pos, exp); + if (window.UI) + UI.save_pref(this.id, this.pos); }; } // end class rcube_splitter |
