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

pull/156/head
Thomas Bruederli 11 years ago
parent b7fb20af3a
commit 34003c5fa5

@ -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>

@ -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>

@ -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;
};

@ -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;

@ -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);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

@ -1,3 +1,5 @@
<roundcube:object name="message" id="messagestack" condition="env:task != 'login'" />
<script type="text/javascript">
// UI startup

@ -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;

@ -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 {

@ -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);
}

@ -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>

@ -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 -->

@ -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>

@ -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>

@ -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" />

@ -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 -->

@ -84,8 +84,6 @@
</div>
</div>
<roundcube:object name="message" id="message" class="statusbar" />
</div><!-- end mailview-right -->
</div><!-- end mainscreen -->

@ -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 -->

@ -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>

@ -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>

@ -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>

@ -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>

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

Loading…
Cancel
Save