summaryrefslogtreecommitdiff
path: root/skins/larry
diff options
context:
space:
mode:
authorThomas Bruederli <thomas@roundcube.net>2013-11-22 09:04:29 +0100
committerThomas Bruederli <thomas@roundcube.net>2013-11-22 09:04:29 +0100
commit34003c5fa5dfc6bd4206e50a49b7a5439a05c148 (patch)
tree7e08425b6f7ef55ee633939d6c588692fa819b77 /skins/larry
parentb7fb20af3a5c98f291204befdb616fdf5daa22fb (diff)
Display status messages as pile of black bars overlaying the UI in order to improve visibility (#1488974)
Diffstat (limited to 'skins/larry')
-rw-r--r--skins/larry/addressbook.css4
-rw-r--r--skins/larry/iehacks.css4
-rw-r--r--skins/larry/images/ajaxloader_dark.gifbin0 -> 1849 bytes
-rw-r--r--skins/larry/images/messages_dark.pngbin0 -> 2113 bytes
-rw-r--r--skins/larry/includes/footer.html2
-rw-r--r--skins/larry/mail.css24
-rw-r--r--skins/larry/styles.css94
-rw-r--r--skins/larry/svggradients.css4
-rw-r--r--skins/larry/templates/addressbook.html1
-rw-r--r--skins/larry/templates/compose.html4
-rw-r--r--skins/larry/templates/folders.html1
-rw-r--r--skins/larry/templates/identities.html1
-rw-r--r--skins/larry/templates/importcontacts.html3
-rw-r--r--skins/larry/templates/mail.html4
-rw-r--r--skins/larry/templates/message.html2
-rw-r--r--skins/larry/templates/messageerror.html2
-rw-r--r--skins/larry/templates/messagepart.html1
-rw-r--r--skins/larry/templates/plugin.html1
-rw-r--r--skins/larry/templates/responses.html1
-rw-r--r--skins/larry/templates/settings.html1
-rw-r--r--skins/larry/ui.js14
21 files changed, 122 insertions, 46 deletions
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index 39d0cce21..cf4d22d2e 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -187,7 +187,7 @@
top: 0;
left: 0;
right: 0;
- bottom: 28px;
+ bottom: 0px;
border: 0;
border-radius: 4px;
}
@@ -380,7 +380,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
new file mode 100644
index 000000000..f1cce35ac
--- /dev/null
+++ b/skins/larry/images/ajaxloader_dark.gif
Binary files differ
diff --git a/skins/larry/images/messages_dark.png b/skins/larry/images/messages_dark.png
new file mode 100644
index 000000000..f5a985c79
--- /dev/null
+++ b/skins/larry/images/messages_dark.png
Binary files differ
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..801c80233 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;
}
@@ -757,7 +750,7 @@ table.messagelist.fixedcopy {
top: 0;
left: 0;
width: 100%;
- bottom: 28px;
+ bottom: 0px;
}
#messagecontframe {
@@ -770,7 +763,7 @@ table.messagelist.fixedcopy {
top: 110px;
left: 0;
width: 100%;
- bottom: 27px;
+ bottom: 1px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@@ -1372,9 +1365,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 +1486,7 @@ div.message-partheaders .headers-table td.header {
left: 0;
right: 260px;
bottom: 0;
+ border-radius: 0 0 0 4px;
}
#composebodycontainer.buttons {
@@ -1508,7 +1500,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..23bcd2aeb 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 {
@@ -1404,7 +1492,7 @@ body.iframe .footerleft.floating:before,
top: 34px;
left: 0;
right: 0;
- bottom: 28px;
+ bottom: 0px;
overflow: auto;
}
@@ -1413,7 +1501,7 @@ body.iframe .footerleft.floating:before,
top: 0;
left: 0;
right: 0;
- bottom: 28px;
+ bottom: 0px;
}
.footerleft {
@@ -1610,11 +1698,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/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();