Simple notification UI

customize.dist/src/less2/include/colortheme.less

@@ -135,9 +135,9 @@
 @colortheme_admin-color: #FFF;
 @colortheme_admin-warn: #ffae00;
 
-@colortheme_notifications-bg: #7c0404;
-@colortheme_notifications-color: #FFF;
-@colortheme_notifications-warn: #ffae00;
+@colortheme_notifications-bg: #4ae397;
+@colortheme_notifications-color: #000;
+@colortheme_notifications-warn: #e34a85;
 
 @colortheme_support-bg: #42d1f4;
 @colortheme_support-color: #000;

www/notifications/app-notifications.less

@@ -12,5 +12,71 @@
 
     display: flex;
     flex-flow: column;
+
+
+    .cp-app-notifications-panel {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
+        width: 100%;
+
+        .cp-app-notifications-panel-titlebar {
+            padding: 1rem 1rem;
+            border-radius: 5px 5px 0 0;
+            background-color: #777;
+            color: white;
+        }
+
+        .cp-app-notifications-panel-list {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: stretch;
+            border: 1px solid #ccc;
+            border-top: none;
+            border-radius: 0 0 5px 5px;
+            overflow: hidden;
+
+            .cp-notification {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+                background-color: #ffffff;
+                &:not(:last-child) {
+                    border-bottom: 1px solid #ccc;
+                }
+
+                .cp-notification-content {
+                    flex-grow: 1;
+                    cursor: pointer;
+                    &:hover {
+                        background-color: #eee;
+                    }
+                    p {
+                        margin: 1rem 1rem;
+                    }
+                }
+
+                .cp-notification-dismiss {
+                    align-self: stretch;
+                    flex-shrink: 0;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    border-left: 1px solid #ccc;
+                    background-color: white;
+                    cursor: pointer;
+                    width: 3rem;
+                    &:hover {
+                        background-color: rgba(0, 0, 0, 0.1);
+                    }
+                }
+            }
+        }
+    }
+
 }
 

www/notifications/inner.js

@@ -37,7 +37,10 @@ define([
         ],
         'friends': [
             'cp-notifications-friend-requests',
-        ]
+        ],
+        'pads': [
+            'cp-notifications-shared-app',
+        ],
     };
 
     var create = {};
@@ -60,8 +63,27 @@ define([
     create['all'] = function () {
         var key = 'all';
         var $div = makeBlock(key);
-        var notif = h("div");
-        $div.append(notif);
+        var notifsTitlebar = h('div.cp-app-notifications-panel-titlebar', [
+            h("span.cp-app-notifications-panel-title", (Messages.notifications || "Notifications") + " - " + key),
+            h("div.cp-app-notifications-panel-titlebar-buttons")
+        ]);
+        var notifsList = h("div.cp-app-notifications-panel-list");
+        var notifsPanel = h("div.cp-app-notifications-panel", [
+            notifsTitlebar,
+            notifsList
+        ]);
+        $(notifsPanel).append(notifsList);
+        $div.append(notifsPanel);
+        common.mailbox.subscribe(["notifications"], {
+            onMessage: function (data, el) {
+                console.log("data : ", data);
+                if (el) {
+                    $(notifsList).prepend(el);
+                }
+            },
+            onViewed: function () {}
+        });
+        // common.mailbox.dismiss(data)
         return $div;
     };
 
@@ -84,8 +106,9 @@ define([
         common.setHash(active);
         Object.keys(categories).forEach(function (key) {
             var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
-            if (key === 'general') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
-            if (key === 'stats') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
+            if (key === 'all') { $category.append($('<span>', {'class': 'fa fa-bars'})); }
+            if (key === 'friends') { $category.append($('<span>', {'class': 'fa fa-user-plus'})); }
+            if (key === 'pads') { $category.append($('<span>', {'class': 'cptools cptools-pad'})); }
 
             if (key === active) {
                 $category.addClass('cp-leftside-active');