Display status messages as pile of black bars overlaying the UI in order to...

Thomas Bruederli

2013-11-22 34003c5fa5dfc6bd4206e50a49b7a5439a05c148

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

 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>

 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>

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


 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;

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

 skins/larry/images/ajaxloader_dark.gif

 skins/larry/images/messages_dark.png

 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

 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;

 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 {

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

 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>



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

 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>

 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>

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

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


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

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

 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>

 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>

 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>

 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>

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