Notifications: show timestamp and change color scheme

-Allow vertical scroll on notification window

[cli:v-list-user-notifications] fix json output when printing double quotes

Implements hestiacp#402

Author: Lupul

bin/v-list-user-notifications

@@ -28,7 +28,7 @@ json_list() {
         NOTICE=$(echo "$NOTICE" |sed -e "s/%quote%/'/g")
         echo -n '    "'$NID'": {
         "TOPIC": "'$TOPIC'",
-        "NOTICE": "'$NOTICE'",
+        "NOTICE": "'${NOTICE//\"/\'}'",
         "TYPE": "'$TYPE'",
         "ACK": "'$ACK'",
         "TPL": "'$TPL'",

web/css/styles.min.css

@@ -1008,31 +1008,32 @@ a {
 }
 
 .notification-container {
-  background-color: rgba(0,0,0,0.90);
+  background-color: rgba(255,255,255,0.95);
   box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.5);
   list-style-type: none;
   margin: 0 27px;
-  overflow: hidden;
+  max-height: 90%;
+  overflow-y: auto;
   padding-left: 0;
   position: fixed;
   top: 34px;
   width: 393px;
   z-index: 300;
   font-size: 0.8rem;
   padding: 0;
-  color: #e9e9e9;
+  color: #6f6f6f;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   border: 1px solid #fff;
   border-top: none;
 }
 
 .notification-container .unseen {
-  color: #e7e7e7;
+  color: #6f6f6f;
 }
 
 .notification-container li {
-  border-bottom: 1px solid #4b4b4b;
+  border-bottom: 1px solid #e9e4e4;
   padding: 20px;
 }
 
@@ -1102,6 +1103,11 @@ a {
   width: 21px;
 }
 
+.notification-container .time {
+  float: right;
+  margin-top: 1rem;
+  font-size: 0.7rem;
+}
 
 
 .l-stat {

web/js/events.js

@@ -416,6 +416,8 @@ VE.notifications.get_list = function(){
             tpl.set(':TYPE', elm.TYPE);
             tpl.set(':TOPIC', elm.TOPIC);
             tpl.set(':NOTICE', elm.NOTICE);
+            tpl.set(':TIME', elm.TIME);
+            tpl.set(':DATE', elm.DATE);
             acc.push(tpl.finalize());
         });
 

web/js/templates.js

@@ -9,6 +9,7 @@ App.Templates.html = {
                     '<li class="~!:UNSEEN~!"><span class="unselectable mark-seen" id="notification-~!:ID~!">&nbsp;</span>\
                         <span class="title"><span class="unselectable icon ~!:TYPE~!">&nbsp;</span>~!:TOPIC~!</span>\
                         ~!:NOTICE~!\
+                        <span class="time">~!:TIME~! ~!:DATE~!</span>\
                     </li>'
         ],
         notification_empty: [