A few updates for Dashboard notifications

- Makes notifications background graish rather than bluish/purple;
- Increments spacing between text in open notification and video (if
any);
- Allows to add custom tags to collapsed notifications.
- Adds background under notification collapse handle.

Author: birdofpreyru

README.md

@@ -48,6 +48,7 @@ There's a constant `VIDEO_DEFAULT_HEIGHT` has been added to /app/topcoder.consta
 
 To add a new notification, append a new configuration object to /app/my-dashboard/notifications/news.json, the configuration object has following properties:
 
+- customTag: allows to show a custom tag in the collapsed notification, similarly to the LIVE tag. If provided, it should be an object with three fields: `text` - the label on the tag, `color` - text color of the tag (defaults to white), `background` - background color of the tag (defaults to red, the same as for LIVE tag).
 - header: header text displayed when collapsed.
 - details: details text displayed when collapsed.
 - headerExpand: header text displayed when expanded, use `header` if this property is falsy

app/directives/notification/notification.jade

@@ -1,6 +1,7 @@
 .notification
   .collapsed(ng-show="!vm.expanded")
     .live(ng-show="config.live") LIVE
+    .customTag(ng-show="config.customTag" ng-style="{'background': config.customTag.background, color: config.customTag.color}") {{config.customTag.text}}
     .header {{config.header}}: 
     .details {{config.details}}
     i.expand.fa.fa-plus(ng-click="vm.toggle()")

app/my-dashboard/notifications/news.json

@@ -8,8 +8,13 @@
     "redirectTo": "https://tco17.topcoder.com/",
     "redirectText": "Learn More",
     "videoCode": "https://www.youtube.com/embed/Qc_PcN6ECjg?autoplay=1",
-    "live": true,
-    "liveExpand": true
+    "live": false,
+    "liveExpand": false,
+    "customTag": {
+      "color": "red",
+      "background": "blue",
+      "text": "Announcement"
+    }
   },
   {
     "header": "SRM 789 is starting in 10 days (June 3, 22:30pm)",

assets/css/directives/notification.directive.scss

@@ -12,17 +12,30 @@
     text-align: center;
     font-size: 14px;
   }
+  .customTag{
+    height: 30px;
+    line-height: 30px;
+    padding: 0 12px;
+    color: $white;
+    background: #E73851;
+    border-radius: 4px;
+    text-align: center;
+    font-size: 14px;
+  }
   .collapsed{
     display: flex;
     align-items: center;
     color: $white;
     font-size: 18px;
     height: 60px;
-    background: linear-gradient(to bottom, #20a6e2 0%, #5c82db 45%, #a17fdd 100%);
+    background: linear-gradient(to bottom, gainsboro 0%, silver 50%, lightgray 100%);
     padding: 0 15px;
     .live{
       margin-right: 12px;
     }
+    .customTag{
+      margin-right: 12px;
+    }
     .header{
       font-weight: bold;
     }
@@ -57,10 +70,12 @@
     }
     .left{
       padding-top: 70px;
+      padding-right: 64px;
       flex: 1;
       height: 100%;
       position: relative;
-      background: linear-gradient(to bottom, #20a6e2 0%, rgba(92, 130, 219, 0.8) 45%, rgba(161, 127, 221, 0.75) 100%)
+      background: linear-gradient(to bottom, darkgray 0%, #444 50%, gray 100%);
+      opacity: 0.8;
     }
     .header{
       font-weight: bold;
@@ -111,9 +126,11 @@
       }
     }
     .collapse{
+      background: #444;
+      padding: 15px;
       position: absolute;
-      top: 15px;
-      right: 15px;
+      top: 0;
+      right: 0;
       cursor: pointer;
       font-size: 26px;
       font-weight: 100;