Merge branch 'dev'

Author: birdofpreyru

README.md

@@ -39,8 +39,33 @@ To make the mentioned configuration on Ubuntu 16.04 you:
   - dan_developer/dantopcoder123
 - Create your own:
   - You may register your own account at https://local.topcoder-dev.com/register
+
+# Configuration
+
+### Notifications in the Dashboard
+
+There's a constant `VIDEO_DEFAULT_HEIGHT` has been added to /app/topcoder.constants.js, the value will be used as the default height when a banner expanded.
+
+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
+- detailsExpand: details text displayed when expanded, use `details` if this property is falsy
+- backgroundImage: background image used when expaneded, the path is relative to /assets/images/news
+- redirectTo: the url will redirect to when user click the `Learn more` button, will hide the button if this property is falsy
+- redirectText: the text will be displayed on the `Learn more` button, will hide the button if this property is falsy
+- videoCode: the video resource code to embed when expanded
+- live: show the live flag or not when collapsed
+- liveExpand: show the live flag or not when expanded
+- height: height of the expanded view, any non-falsy value of this property will override the default height, i.e. `VIDEO_DEFAULT_HEIGHT` in /app/topcoder.constants.js
+
+### Banners in the Dashboard
+
+You can edit `/app/my-dashboard/notifications/notifications.jade` to update the banners. Element with class `banner-row` represents a row of banners, anchor element with class `banner` represents a banner, you can place as many banners as you want in a row, just make sure it have a proper appearance, all banners in one row have same width.
 
-## Recommended Developer Tools
+# Recommended Developer Tools
 
 Syntax highlighting for ES6 and React JSX
 - Install [babel](https://packagecontrol.io/packages/Babel) via the package manager in Sublime Text

app/directives/notification/notification.directive.js

@@ -0,0 +1,46 @@
+import angular from 'angular'
+
+(function() {
+  'use strict'
+
+  angular.module('tcUIComponents').directive('notification', notification)
+
+  function notification() {
+    return {
+      restrict: 'E',
+      template: require('./notification')(),
+      scope: {
+        config: '='
+      },
+      controller: ['CONSTANTS', '$sce', controller],
+      controllerAs: 'vm'
+    }
+  }
+
+  function controller(CONSTANTS, $sce){
+    var vm = this
+    vm.defaultHeight = CONSTANTS.VIDEO_DEFAULT_HEIGHT
+    vm.expanded = false
+    vm.toggle = toggle
+    vm.loadImage = loadImage
+    vm.videoUrl = videoUrl
+
+    activate()
+
+    function activate(){
+
+    }
+
+    function toggle(){
+      vm.expanded = !vm.expanded
+    }
+
+    function loadImage(image){
+      return require('../../../assets/images/news/' + image)
+    }
+
+    function videoUrl(url){
+      return $sce.trustAsResourceUrl(url)
+    }
+  }
+})()

app/directives/notification/notification.jade

@@ -0,0 +1,20 @@
+.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()")
+  .expanded(ng-show="vm.expanded", ng-style="{'background-image': 'url('+vm.loadImage(config.backgroundImage)+')'}")
+    .mask
+    .left(ng-style="{'height': (config.height || vm.defaultHeight) + 'px'}")
+      .header {{config.header}}
+      .details {{config.details}}
+      a.action(ng-show="config.redirectText && config.redirectTo", href="{{config.redirectTo}}") {{config.redirectText}}
+    .right(ng-if="config.videoCode", ng-style="{'height': (config.height || vm.defaultHeight) + 'px'}")
+      .btn-play(ng-hide="vm.loadVideo")
+        i.fa.fa-play-circle-o(ng-click="vm.loadVideo=true;")
+        div Play Video
+      iframe(ng-if="vm.loadVideo" ng-src="{{vm.videoUrl(config.videoCode)}}", allowfullscreen, frameborder="0", width="100%" height="{{config.height||vm.defaultHeight}}")
+      .live(ng-show="config.liveExpand") LIVE
+    i.collapse.fa.fa-remove(ng-click="vm.toggle()")

app/index.js

@@ -87,6 +87,7 @@ require('../assets/css/my-dashboard/my-dashboard.scss')
 require('../assets/css/my-dashboard/my-challenges.scss')
 require('../assets/css/my-dashboard/header-dashboard.scss')
 require('../assets/css/my-dashboard/community-updates.scss')
+require('../assets/css/my-dashboard/notifications.scss')
 require('../assets/css/my-challenges/my-challenges.scss')
 require('../assets/css/layout/header.scss')
 require('../assets/css/layout/footer.scss')
@@ -120,6 +121,7 @@ require('../assets/css/directives/challenge-links.directive.scss')
 require('../assets/css/directives/badge-tooltip.scss')
 require('../assets/css/directives/tc-banner.scss')
 require('../assets/css/directives/tc-fp-file-input.directive.scss')
+require('../assets/css/directives/notification.directive.scss')
 require('../assets/css/community/statistics.scss')
 require('../assets/css/community/members.scss')
 require('../assets/css/community/community.scss')

app/my-dashboard/my-dashboard.jade

@@ -3,26 +3,12 @@
 .my-dashboard-container
   .subtrack-stats(id="stats", ui-view="subtrack-stats")
 
-  .challenges(id="challenges", ui-view="my-challenges")
-
-  .tco.tco17
-    .tc-banner-placeholder.cognitive
-      .container
-        .img
-        .description Learn about Cognitive technologies and get hands on experience as a member of the Topcoder Cognitive Community.
-        a(href="https://cognitive.topcoder.com").cta.tc-btn-white.tc-btn-radius Learn More
+  .notifications(ui-view="notifications")
 
-  .tco.tco17
-    .tc-banner-placeholder.black.bg-image
-      .container
-        .title 2017 Topcoder Open
-        .subtitle October 21-24, 2017 </br>Buffalo, NY, USA
-        .description The Ultimate Programming and Design Tournament - The Final Stage
-        a(href="http://tco17.topcoder.com/").cta.tc-btn-white.tc-btn-radius Learn More
+  .challenges(id="challenges", ui-view="my-challenges")
 
   .srms(id="srms", ui-view="srms", ng-show="dashboard.showSRMs")
 
   .programs(id="community", ui-view="programs")
 
   .community-updates(ui-view="community-updates")
-

app/my-dashboard/my-dashboard.routes.js

@@ -36,6 +36,11 @@ import angular from 'angular'
           }]
         },
         views: {
+          'notifications': {
+            template: require('./notifications/notifications')(),
+            controller: 'NotificationsController',
+            controllerAs: 'vm'
+          },
           'header-dashboard' : {
             template: require('./header-dashboard/header-dashboard')(),
             controller: 'HeaderDashboardController',

app/my-dashboard/notifications/news.json

@@ -0,0 +1,16 @@
+[
+  {
+    "header": "TCO18 Has Begun",
+    "details": "Visit the new TCO18 Website for all the details and rules for each track.  Also be sure to frequently visit the Challenge Listings page for opportunity to earn TCO18 Points!",
+    "headerExpand": "TCO18 Has Begun!",
+    "detailsExpand": "Visit the new TCO18 Website for all the details and rules for each track.  Also be sure to frequently visit the Challenge Listings page for opportunity to earn TCO18 Points!",
+    "backgroundImage": "tc-dashboard-tco18.png",
+    "redirectTo": "http://tco18.topcoder.com/",
+    "redirectText": "TCO18 Homepage",
+    "live": false,
+    "liveExpand": false,
+    "customTag": {
+      "text": "Announcement"
+    }
+  }
+]

app/my-dashboard/notifications/notifications.controller.js

@@ -0,0 +1,18 @@
+import angular from 'angular'
+
+(function() {
+  'use strict'
+
+  angular.module('tc.myDashboard').controller('NotificationsController', NotificationsController)
+
+  function NotificationsController () {
+    var vm = this
+    vm.news = []
+
+    activate()
+
+    function activate() {
+      vm.news = require('./news.json')
+    }
+  }
+})()

app/my-dashboard/notifications/notifications.jade

@@ -0,0 +1,22 @@
+.no-news(ng-show="vm.news.length===0") NO NEWS RIGHT NOW
+.has-news(ng-show="vm.news.length>0")
+  notification(ng-repeat="config in vm.news", config="config")
+
+.banners
+  //
+    to add more banners here, just create a new a.banner element under .banner-row element,
+    each .banner-row element will occupy a whole row in page, and all a.banner elements under
+    it will have same width, you can create a new .banner-row if you want place more banners
+    in a new row
+  .banner-row
+    a.banner.tco17(href="https://tco17.topcoder.com/")
+      img(src=require("../../../assets/images/tco17-web-logo-white.svg"), alt="TCO17")
+    a.banner.watson(href="https://cognitive.topcoder.com/")
+      img(src=require("../../../assets/images/logo_white.png"), alt="TCO17")
+      span With
+      br
+      span Watson
+    a.banner.cognitive(href="https://cognitive.topcoder.com/")
+      span COGNITIVE
+      br 
+      span COMMUNITY

app/topcoder.constants.js

@@ -23,7 +23,7 @@ angular.module('CONSTANTS', []).constant('CONSTANTS', {
   'TCO17_URL'               : process.env.TCO17_URL,
   'TCO_HOME_URL'            : process.env.TCO_HOME_URL,
   'ACCOUNTS_APP_URL'        : process.env.ACCOUNTS_APP_URL,
-  'FILE_PICKER_API_KEY'     : process.env.domain === 'topcoder-dev.com' ? process.env.FILE_PICKER_API_KEY_DEV : process.env.FILE_PICKER_API_KEY_PROD, 
+  'FILE_PICKER_API_KEY'     : process.env.domain === 'topcoder-dev.com' ? process.env.FILE_PICKER_API_KEY_DEV : process.env.FILE_PICKER_API_KEY_PROD,
   'FILE_PICKER_SUBMISSION_CONTAINER_NAME': process.env.FILE_PICKER_SUBMISSION_CONTAINER_NAME,
 
   'NEW_CHALLENGES_URL'     : 'https://www.topcoder.com/challenges/develop/upcoming/',
@@ -45,5 +45,6 @@ angular.module('CONSTANTS', []).constant('CONSTANTS', {
   'STATUS_ACTIVE'          : 'Active',
   'STATUS_COMPLETED_WITHOUT_WIN' : 'Completed Without Win',
   'CHALLENGES_LOADING_CHUNK' : 36,
-  'INFINITE_SCROLL_OFFSET' : '400' // footer is 300px and challenge tile is 400px
+  'INFINITE_SCROLL_OFFSET' : '400', // footer is 300px and challenge tile is 400px
+  'VIDEO_DEFAULT_HEIGHT': 360
 })