More beautiful logs

app/js/controllers/main/home/tabs/LogsController.js

@@ -7,6 +7,11 @@ module.exports = ($scope, ws, UIUtils) => {
   let co = require('co');
   let _ = require('underscore');
 
+  // Default values
+  if (!localStorage.getItem('log_error')) localStorage.setItem('log_error', true);
+  if (!localStorage.getItem('log_warn')) localStorage.setItem('log_warn', true);
+  if (!localStorage.getItem('log_info')) localStorage.setItem('log_info', true);
+
   $scope.logsSize = 100;
   $scope.logs = _.range(0, $scope.logsSize).map(() => "");
   $scope.logsString = "";

app/styles/main.styl

@@ -131,7 +131,7 @@ blockquote
 
 #logs
   font-size 12px
-  max-height 600px
+  max-height 400px
 
 #logs p
   line-height 21px
@@ -160,5 +160,20 @@ blockquote
 .log-level.trace
   color: #d0f
 
+.log-msg.info
+  background-color: none
+
+.log-msg.warn
+  background-color: #FFFE99
+
+.log-msg.error
+  background-color: #F8D5D2
+
+.log-msg.debug
+  background-color: rgba(29, 255, 255, 0.23)
+
+.log-msg.trace
+  background-color: rgba(217, 0, 255, 0.14)
+
 .log-time
   color: #888888
\ No newline at end of file

app/views/main/home/tabs/logs.jade

@@ -20,8 +20,9 @@
         p {{ 'graphs.blockchain.range' | translate }}
         .range-field
           input(type="range" min="10" max="10000" ng-model="logsSize" ng-mouseup="changeSize()")
+      .card-action.left-align.ui-scrollable
         pre#logs
           p(ng-repeat="log in logs track by $index")
             span.log-time {{ log.timestamp }} 
             span.log-level(class="{{ log.level }}") {{ log.level }} 
-            span {{ log.msg }}
+            span.log-msg(class="{{ log.level }}") {{ log.msg }}