Display status messages as pile of black bars overlaying the UI in order to improve visibility (#1488974)

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
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
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();