Make #message-objects to look as alerts

skins/elastic/styles/embed.less

@@ -14,27 +14,14 @@
 /* TODO: review */
 
 .rcmail-inline-message {
-	font-family: sans-serif;
-	font-size: 11px;
-	font-weight: bold;
-	color: #996600;
-	border: 1px solid #ffdf0e;
-	background: url("images/messages.png") no-repeat scroll 5px -83px #fef893;
-	padding: 6px 12px 4px 30px;
-	margin-bottom: 0.8em;
+    font-family: sans-serif;
 }
 
 .rcmail-inline-message em {
-	font-size: 90%;
 }
 
 .rcmail-inline-buttons {
-	margin-bottom: 0;
-	display: inline;
 }
 
 .rcmail-inline-buttons > button {
-	margin-left: 1em;
-	vertical-align: baseline;
-	line-height: 12px;
 }

skins/elastic/styles/widgets/messages.less

@@ -75,27 +75,10 @@
     }
 }
 
-/* TODO: #message-objects colors, make <a> buttons, icons using <i>? */
+#message-objects {
+    margin: 0 0.2em;
 
-#message-objects div {
-    margin: 0;
-    margin-bottom: 0.2em;
-    width: 100%;
-    padding: 0.75em;
-
-    &:before {
-        &:extend(.font-icon-class);
-    }
-
-    &.notice:before {
-        content: @fa-var-info-circle;
-    }
-
-    &.warning:before {
-        content: @fa-var-warning;
-    }
-
-    &.error:before {
-        content: @fa-var-exclamation-circle;
+    i.icon {
+        font-size: 2em !important;
     }
 }

skins/elastic/ui.js

@@ -314,6 +314,12 @@ function rcube_elastic_ui()
             $('a.nav-link:first', nav).click();
         });
 
+        // Make message-objects alerts pretty (the same as UI alerts)
+        $('#message-objects').children('div').each(function() {
+            alert_style(this, $(this).attr('class'));
+            $('a', this).addClass('btn btn-primary');
+        });
+
         // Make logon form prettier
         if (rcmail.env.task == 'login') {
             $('#login-form table tr').each(function() {
@@ -619,22 +625,8 @@ function rcube_elastic_ui()
      */
     function message_displayed(p)
     {
-        var cl, classes = 'ui alert',
-            map = {
-                information: 'alert-success',
-                confirmation: 'alert-success',
-                notice: 'alert-info',
-                error: 'alert-danger',
-                warning: 'alert-warning',
-                loading: 'alert-info loading'
-            };
-
-        if (cl = map[p.type]) {
-            classes += ' ' + cl;
-            $('<i>').attr('class', 'icon').prependTo(p.object);
-        }
-
-        $(p.object).addClass(classes).attr('role', 'alert');
+        alert_style(p.object, p.type);
+        $(p.object).attr('role', 'alert');
         $('a', p.object).addClass('alert-link');
 /*
         var siblings = $(p.object).siblings('div');
@@ -649,6 +641,29 @@ function rcube_elastic_ui()
 */
     };
 
+    /**
+     * Applies some styling and icon to an alert object
+     */
+    function alert_style(object, type)
+    {
+        var cl, classes = 'ui alert',
+            map = {
+                information: 'alert-success',
+                confirmation: 'alert-success',
+                notice: 'alert-info',
+                error: 'alert-danger',
+                warning: 'alert-warning',
+                loading: 'alert-info loading'
+            };
+
+        if (cl = map[type]) {
+            classes += ' ' + cl;
+            $('<i>').attr('class', 'icon').prependTo(object);
+        }
+
+        $(object).addClass(classes);
+    }
+
     /**
      * Initializes searchbar widget
      */