diff options
author | Aleksander Machniak <alec@alec.pl> | 2013-11-22 09:24:32 +0100 |
---|---|---|
committer | Aleksander Machniak <alec@alec.pl> | 2013-11-22 09:24:32 +0100 |
commit | b5117238db2917789ef7657bc9eafe5fd3adfe1f (patch) | |
tree | 5f93d248e9bd9e194de867855b874c32363c9f06 | |
parent | aac4b452a3a538ecf6abdfcf100c7d9d33aadd1f (diff) | |
parent | ecb5bd7bd139a45b6c1a4f6e002b3b10e3311da7 (diff) |
Merge branch 'master' of github.com:roundcube/roundcubemail
28 files changed, 176 insertions, 56 deletions
@@ -1,6 +1,7 @@ CHANGELOG Roundcube Webmail =========================== +- Larry skin: Improved status message display for better visibility (#1488974) - Fix Internet Explorer 11 detection (#1489434) - Fix date column width to fit the widest possible date format (#1489368) - Move certain user preference options to a collapsed "advanced" block (#1488829) diff --git a/plugins/help/skins/larry/templates/help.html b/plugins/help/skins/larry/templates/help.html index bfd3f1141..f1d1f232e 100644 --- a/plugins/help/skins/larry/templates/help.html +++ b/plugins/help/skins/larry/templates/help.html @@ -21,7 +21,6 @@ <div class="iframebox help_<roundcube:var name='env:action' />"> <roundcube:object name="helpcontent" id="helpcontentframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> </div> - <roundcube:object name="message" id="message" class="statusbar" /> </div> </div> diff --git a/plugins/managesieve/skins/larry/templates/managesieve.html b/plugins/managesieve/skins/larry/templates/managesieve.html index 25bbbaf69..4fa5e2a84 100644 --- a/plugins/managesieve/skins/larry/templates/managesieve.html +++ b/plugins/managesieve/skins/larry/templates/managesieve.html @@ -40,7 +40,6 @@ <div class="iframebox"> <roundcube:object name="filterframe" id="filter-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/program/js/app.js b/program/js/app.js index 372a29906..636db82d4 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -34,7 +34,7 @@ function rcube_webmail() // webmail client settings this.dblclick_time = 500; - this.message_time = 4000; + this.message_time = 5000; this.identifier_expr = new RegExp('[^0-9a-z\-_]', 'gi'); // environment defaults @@ -6209,7 +6209,7 @@ function rcube_webmail() this.triggerEvent('message', { message:msg, type:type, timeout:timeout, object:obj }); if (timeout > 0) - setTimeout(function() { ref.hide_message(id, type == 'loading'); }, timeout); + setTimeout(function() { ref.hide_message(id, type != 'loading'); }, timeout); return id; }; diff --git a/skins/classic/addressbook.css b/skins/classic/addressbook.css index 9575ae25f..e4e88ca4c 100644 --- a/skins/classic/addressbook.css +++ b/skins/classic/addressbook.css @@ -224,6 +224,19 @@ -o-text-overflow: ellipsis; } +/* 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: 8px; +} + +/* 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: 4px solid #EBEBEB; + padding-left: 4px; +} + #contacts-table .contact.readonly td { font-style: italic; diff --git a/skins/classic/mail.css b/skins/classic/mail.css index 4f145368d..2b09ba269 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -958,6 +958,20 @@ table.messagelist.fixedcopy color: #CC0000; } +/* This padding-left minus the focused padding left should be half of the focused border-left */ +.messagelist thead tr td:first-child, +.messagelist 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 */ +.messagelist tbody tr.focused > td:first-child { + border-left: 8px solid #EBEBEB; + padding-left: 2px; +} + .messagelist tr.selected td { color: #FFFFFF; diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css index 39d0cce21..8681cda70 100644 --- a/skins/larry/addressbook.css +++ b/skins/larry/addressbook.css @@ -159,6 +159,19 @@ font-weight: bold; } +/* 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; +} + +/* 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 ridge #ffffff; + padding-left: 34px; + background-position-x: 4px !important; /* important to override selected class */ +} + #contacts-table .group td.name { background-position: 6px -1555px; } @@ -187,7 +200,7 @@ top: 0; left: 0; right: 0; - bottom: 28px; + bottom: 0px; border: 0; border-radius: 4px; } @@ -380,7 +393,7 @@ a.deletebutton { #import-box { position: absolute; - bottom: 28px; + bottom: 0px; top: 34px; left: 0; right: 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/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/mail.css b/skins/larry/mail.css index bb2ad7b9d..90b3511d4 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -37,19 +37,16 @@ top: 42px; left: 0; width: 100%; - bottom: 28px; -} - -#mailview-top.fullheight { - border-radius: 4px 4px 0 0; + bottom: 0px; } #mailview-bottom { + display: none; position: absolute; left: 0; bottom: 0; width: 100%; - height: 27px; + height: 0; border-radius: 4px; border-top: none; } @@ -102,10 +99,6 @@ html>/**/body #messagelist { border-radius: 0 0 4px 4px; } -#mailview-top.fullheight #messagelistfooter { - border-radius: 0; -} - #messagelistfooter.rightalign { text-align: right; } @@ -453,11 +446,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; } @@ -757,7 +745,7 @@ table.messagelist.fixedcopy { top: 0; left: 0; width: 100%; - bottom: 28px; + bottom: 0px; } #messagecontframe { @@ -770,7 +758,7 @@ table.messagelist.fixedcopy { top: 110px; left: 0; width: 100%; - bottom: 27px; + bottom: 1px; overflow: auto; -webkit-overflow-scrolling: touch; } @@ -1372,9 +1360,7 @@ div.message-partheaders .headers-table td.header { top: 42px; left: 0; width: 100%; - bottom: 28px; - border-radius: 4px 4px 0 0; - border-bottom: none; + bottom: 0px; overflow: hidden; } @@ -1495,6 +1481,7 @@ div.message-partheaders .headers-table td.header { left: 0; right: 260px; bottom: 0; + border-radius: 0 0 0 4px; } #composebodycontainer.buttons { @@ -1508,7 +1495,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/styles.css b/skins/larry/styles.css index 6e0340689..810299735 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,93 @@ a.iconlink.upload { text-overflow: ellipsis; } +#messagestack { + position: absolute; + bottom: 14px; + right: 5px; + 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.9); + background: -moz-linear-gradient(top, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,0.9)), color-stop(100%,rgba(48,48,48,0.9))); + background: -webkit-linear-gradient(top, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%); + background: -o-linear-gradient(top, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%); + background: -ms-linear-gradient(top, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%); + background: linear-gradient(to bottom, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 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 6px 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; +} + .ui-dialog.error .ui-dialog-title, .ui-dialog.warning .ui-dialog-title, .ui-dialog.confirmation .ui-dialog-title { @@ -1290,9 +1378,18 @@ 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: 8px solid #DDDDDD; + padding-left: 2px; } .records-table tr.selected td { @@ -1325,7 +1422,6 @@ table.records-table { color: #ccc !important; } - /*** iFrames ***/ #aboutframe { @@ -1404,7 +1500,7 @@ body.iframe .footerleft.floating:before, top: 34px; left: 0; right: 0; - bottom: 28px; + bottom: 0px; overflow: auto; } @@ -1413,7 +1509,7 @@ body.iframe .footerleft.floating:before, top: 0; left: 0; right: 0; - bottom: 28px; + bottom: 0px; } .footerleft { @@ -1610,11 +1706,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 { 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 5a6285c68..11662d185 100644 --- a/skins/larry/templates/compose.html +++ b/skins/larry/templates/compose.html @@ -179,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 --> 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..d7c690a6a 100644 --- a/skins/larry/templates/importcontacts.html +++ b/skins/larry/templates/importcontacts.html @@ -24,9 +24,6 @@ <roundcube:object name="importnav" class="button" /> </p> </div> - -<roundcube:object name="message" id="message" class="statusbar" /> - </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..2e7c0c105 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -6,7 +6,7 @@ <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-bottom { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+6 : 330" />px; height: auto; display: block; } #mailpreviewframe { display: block; } <roundcube:endif /> </style> @@ -116,8 +116,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..e63705f76 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -84,8 +84,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/responses.html b/skins/larry/templates/responses.html index fb40048c8..8e6884539 100644 --- a/skins/larry/templates/responses.html +++ b/skins/larry/templates/responses.html @@ -28,7 +28,6 @@ <div class="iframebox"> <roundcube:object name="responseframe" 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/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 1edc2caa0..75dcba8ec 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -373,6 +373,10 @@ 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') { if (me.message_timer) { @@ -399,12 +403,12 @@ function rcube_mail_ui() me.messagedialog.dialog('destroy').hide(); }, position: ['center', pos.top], - hide: { effect:'drop', direction:'down' }, + hide: { effect:'drop', direction:'right' }, 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(function(){ me.messagedialog.dialog('close'); }, Math.max(3000, p.timeout / 2)); } } @@ -609,7 +613,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()) @@ -627,8 +631,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(); |