From 34003c5fa5dfc6bd4206e50a49b7a5439a05c148 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Fri, 22 Nov 2013 03:04:29 -0500
Subject: [PATCH] Display status messages as pile of black bars overlaying the UI in order to improve visibility (#1488974)
---
plugins/help/skins/larry/templates/help.html | 1
skins/larry/includes/footer.html | 2
skins/larry/templates/addressbook.html | 1
skins/larry/templates/message.html | 2
skins/larry/templates/messagepart.html | 1
skins/larry/templates/folders.html | 1
skins/larry/templates/plugin.html | 1
skins/larry/svggradients.css | 4 +
skins/larry/templates/identities.html | 1
skins/larry/addressbook.css | 4
skins/larry/iehacks.css | 4 +
skins/larry/templates/responses.html | 1
skins/larry/templates/mail.html | 4 -
skins/larry/templates/messageerror.html | 2
skins/larry/templates/settings.html | 1
skins/larry/templates/importcontacts.html | 3 -
skins/larry/styles.css | 94 ++++++++++++++++++++++++++++++
skins/larry/images/ajaxloader_dark.gif | 0
skins/larry/images/messages_dark.png | 0
program/js/app.js | 4
skins/larry/mail.css | 24 ++-----
plugins/managesieve/skins/larry/templates/managesieve.html | 1
skins/larry/templates/compose.html | 4 -
skins/larry/ui.js | 14 +++-
24 files changed, 124 insertions(+), 50 deletions(-)
diff --git a/plugins/help/skins/larry/templates/help.html b/plugins/help/skins/larry/templates/help.html
index bfd3f11..f1d1f23 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 25bbbaf..4fa5e2a 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 372a299..636db82 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -34,7 +34,7 @@
// 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 @@
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/larry/addressbook.css b/skins/larry/addressbook.css
index 39d0cce..cf4d22d 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 @@
#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 960ce76..7c15851 100644
--- a/skins/larry/iehacks.css
+++ b/skins/larry/iehacks.css
@@ -56,6 +56,10 @@
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 0000000..f1cce35
--- /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 0000000..f5a985c
--- /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 a4fa692..5cf9d1e 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 bb2ad7b..801c802 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;
}
@@ -100,10 +97,6 @@
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 {
@@ -757,7 +750,7 @@
top: 0;
left: 0;
width: 100%;
- bottom: 28px;
+ bottom: 0px;
}
#messagecontframe {
@@ -770,7 +763,7 @@
top: 110px;
left: 0;
width: 100%;
- bottom: 27px;
+ bottom: 1px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@@ -1372,9 +1365,7 @@
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 @@
left: 0;
right: 260px;
bottom: 0;
+ border-radius: 0 0 0 4px;
}
#composebodycontainer.buttons {
@@ -1508,7 +1500,7 @@
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 6e03406..23bcd2a 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -509,6 +509,7 @@
}
#message.statusbar {
+ display: none;
position: absolute;
bottom: 0;
left: 0;
@@ -526,6 +527,93 @@
white-space: nowrap;
overflow: hidden;
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,
@@ -1404,7 +1492,7 @@
top: 34px;
left: 0;
right: 0;
- bottom: 28px;
+ bottom: 0px;
overflow: auto;
}
@@ -1413,7 +1501,7 @@
top: 0;
left: 0;
right: 0;
- bottom: 28px;
+ bottom: 0px;
}
.footerleft {
@@ -1610,11 +1698,13 @@
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 c40d44f..2596f2b 100644
--- a/skins/larry/svggradients.css
+++ b/skins/larry/svggradients.css
@@ -56,6 +56,10 @@
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 b33ebd9..9f83853 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 5a6285c..11662d1 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 988ff95..56396bf 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 d9270b6..e3d2cc8 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 69b138b..d7c690a 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 f2c52c8..2e7c0c1 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>
@@ -115,8 +115,6 @@
<div id="mailpreviewframe" class="iframebox">
<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 -->
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index 6937b00..e63705f 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 a735d47..dbe373a 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 d0e3a80..0ec9358 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 341f604..5b86563 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 fb40048..8e68845 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 427e0a4..08df768 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 1edc2ca..75dcba8 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -373,6 +373,10 @@
*/
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 @@
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 @@
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 @@
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();
--
Gitblit v1.9.1