Widgets: Info messages (#38)

and fixed spinning icons

skins/elastic/styles/colors.less

@@ -83,6 +83,19 @@
 @color-drag-layer-background:       #444;
 
 
+// Messages
+@color-message:                     @color-font;
+@color-message-border:              #c6d0d4;
+@color-message-background:          #f8fafb;
+@color-message-link:                @color-main;
+@color-message-shadow:              #ddd;
+@color-message-information:         @color-main;
+@color-message-success:             #41b849;
+@color-message-warning:             #ffd452;
+@color-message-error:               #ff5552;
+@color-message-loading:             #333;
+
+
 // Popovers (menus)
 @color-popover-header:              #888;
 @color-popover-header-background:   transparent;

skins/elastic/styles/mixins.less

@@ -33,28 +33,8 @@
     -webkit-font-smoothing: antialiased;
 }
 
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-
 .animated-icon-class() {
+    /* fa-spin is defined in styles.less */
     -webkit-animation: fa-spin 2s infinite linear;
     animation: fa-spin 2s infinite linear;
 }

skins/elastic/styles/styles.less

@@ -66,6 +66,29 @@
        url('../fonts/roboto-v15-greek-ext_greek_latin_cyrillic-ext_latin-ext_cyrillic-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
+/* E.g. for animated 'loading' icon */
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
 
 /* Reset some Bootstrap style */
 

skins/elastic/styles/widgets/mail.less

@@ -49,19 +49,6 @@
     }
 }
 
-
-#message-objects {
-    i.icon {
-        font-size: 2em !important;
-    }
-
-    .ui {
-        float: none;
-        border-radius: 0;
-    }
-}
-
-
 #messagebody {
     /* TODO */
 

skins/elastic/styles/widgets/messages.less

@@ -14,15 +14,16 @@
 #messagestack {
     position: absolute;
     bottom: .5em;
-    right: .5em;
+    right: .7em;
     z-index: 99;
     width: 320px;
     height: auto;
     max-height: 85%;
-    overflow-y: auto;
 
     @media screen and (max-width: @screen-width-xs) {
-        left: .5em;
+        left: 0;
+        right: 0;
+        bottom: 0;
         width: auto;
     }
 
@@ -33,7 +34,7 @@
         }
 
         i.icon {
-            font-size: 2em !important;
+            font-size: 1.5em !important;
         }
 
         a:hover {
@@ -55,27 +56,61 @@
     float: left;
     width: 100%;
     padding: .75em;
+    color: @color-message;
+    border: 1px solid @color-message-border;
+    box-shadow: 1px 1px 2px @color-message-shadow;
+    background-color: @color-message-background;
+    display: flex;
+
+    @media screen and (max-width: @screen-width-xs) {
+        margin-bottom: 0;
+        box-shadow: none;
+        border: 0;
+        border-top: 2px solid #fff;
+        border-radius: 0;
+        min-height: 4.2rem;
+    }
+
+    span {
+        margin: auto 0;
+    }
+
+    &.loading {
+        color: @color-message-loading;
+    }
 
     & > i.icon {
         line-height: 1;
+        color: @color-message-information;
+        margin: auto 0;
     }
 
     & > i.icon:before {
         &:extend(.font-icon-class);
         content: @fa-var-info-circle;
+        margin-right: .6rem;
+        width: 1em;
     }
 
     &.loading > i.icon:before {
         content: @fa-var-circle-o-notch;
         .animated-icon-class;
+        color: @color-message-loading;
+    }
+
+    &.alert-success > i.icon:before {
+        content: @fa-var-check-circle;
+        color: @color-message-success;
     }
 
     &.alert-warning > i.icon:before {
         content: @fa-var-warning;
+        color: @color-message-warning;
     }
 
     &.alert-danger > i.icon:before {
         content: @fa-var-exclamation-circle;
+        color: @color-message-error;
     }
 
     &.vcardattachment > i.icon:before {
@@ -96,4 +131,25 @@
             line-height: 2.6;
         }
     }
+
+    a {
+        color: @color-message-link;
+        font-weight: normal;
+    }
+
+    &.boxwarning {
+        float: none;
+        border-radius: 0;
+        box-shadow: none;
+        border: none;
+        padding: .5em;
+
+        i.icon {
+            font-size: 1.5em !important;
+        }
+
+        & + :not(.boxwarning) {
+            margin-top: 1rem;
+        }
+    }
 }

skins/elastic/ui.js

@@ -535,7 +535,7 @@ function rcube_elastic_ui()
 
         // Make message-objects alerts pretty (the same as UI alerts)
         $('#message-objects', context).children().each(function() {
-            alert_style(this, $(this).attr('class').split(/\s/)[0]);
+            alert_style(this, $(this).addClass('boxwarning').attr('class').split(/\s/)[0]);
             $('a', this).addClass('btn btn-primary');
         });
 
@@ -1094,10 +1094,11 @@ function rcube_elastic_ui()
             return;
         }
 
-        alert_style(p.object, p.type);
+        alert_style(p.object, p.type, true);
         $(p.object).attr('role', 'alert');
-        $('a', p.object).addClass('alert-link');
 /*
+        $('a', p.object).addClass('alert-link');
+
         // show a popup dialog on errors
         if (p.type == 'error' && rcmail.env.task != 'login') {
             // hide original message object, we don't want both
@@ -1109,9 +1110,9 @@ function rcube_elastic_ui()
     /**
      * Applies some styling and icon to an alert object
      */
-    function alert_style(object, type)
+    function alert_style(object, type, wrap)
     {
-        var cl, classes = 'ui alert',
+        var tmp, classes = 'ui alert',
             map = {
                 information: 'alert-success',
                 confirmation: 'alert-success',
@@ -1122,8 +1123,14 @@ function rcube_elastic_ui()
                 vcardattachment: 'alert-info' /* vcard_attachments plugin */
             };
 
-        if (cl = map[type]) {
-            classes += ' ' + cl;
+        if (wrap) {
+            // we need the content to be non-text node for best alignment
+            tmp = $(object).html();
+            $(object).html($('<span>').html(tmp));
+        }
+
+        if (tmp = map[type]) {
+            classes += ' ' + tmp;
             $('<i>').attr('class', 'icon').prependTo(object);
         }