Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit d93047f

Browse files
birdofpreyrubirdofpreyru
committed
CODE: Notifications & Banners in Dashboard
Submission 518258 by ouyangki to the challenge http://www.topcoder.com/challenge-details/30058423/?type=develop
1 parent 989654c commit d93047f

18 files changed

+418
-26
lines changed

‎app/directives/notification/notification.directive.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import angular from 'angular'
2+
3+
(function() {
4+
'use strict'
5+
6+
angular.module('tcUIComponents').directive('notification', notification)
7+
8+
function notification() {
9+
return {
10+
restrict: 'E',
11+
template: require('./notification')(),
12+
scope: {
13+
config: '='
14+
},
15+
controller: ['CONSTANTS', '$sce', controller],
16+
controllerAs: 'vm'
17+
}
18+
}
19+
20+
function controller(CONSTANTS, $sce){
21+
var vm = this
22+
vm.defaultHeight = CONSTANTS.VIDEO_DEFAULT_HEIGHT
23+
vm.expanded = false
24+
vm.toggle = toggle
25+
vm.loadImage = loadImage
26+
vm.videoUrl = videoUrl
27+
28+
activate()
29+
30+
function activate(){
31+
32+
}
33+
34+
function toggle(){
35+
vm.expanded = !vm.expanded
36+
}
37+
38+
function loadImage(image){
39+
return require('../../../assets/images/news/' + image)
40+
}
41+
42+
function videoUrl(url){
43+
return $sce.trustAsResourceUrl(url)
44+
}
45+
}
46+
})()

‎app/directives/notification/notification.jade‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.notification
2+
.collapsed(ng-show="!vm.expanded")
3+
.live(ng-show="config.live") LIVE
4+
.header {{config.header}}: 
5+
.details {{config.details}}
6+
i.expand.fa.fa-plus(ng-click="vm.toggle()")
7+
.expanded(ng-show="vm.expanded", ng-style="{'background-image': 'url('+vm.loadImage(config.backgroundImage)+')'}")
8+
.mask
9+
.left(ng-style="{'height': (config.height || vm.defaultHeight) + 'px'}")
10+
.header {{config.header}}
11+
.details {{config.details | characters:110}}
12+
a.action(ng-show="config.redirectText && config.redirectTo", href="{{config.redirectTo}}") {{config.redirectText}}
13+
.right(ng-if="config.videoCode", ng-style="{'height': (config.height || vm.defaultHeight) + 'px'}")
14+
.btn-play(ng-hide="vm.loadVideo")
15+
i.fa.fa-play-circle-o(ng-click="vm.loadVideo=true;")
16+
div Play Video
17+
iframe(ng-if="vm.loadVideo" ng-src="{{vm.videoUrl(config.videoCode)}}", allowfullscreen, frameborder="0", width="100%" height="{{config.height||vm.defaultHeight}}")
18+
.live(ng-show="config.liveExpand") LIVE
19+
i.collapse.fa.fa-remove(ng-click="vm.toggle()")

‎app/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ require('../assets/css/my-dashboard/my-dashboard.scss')
8787
require('../assets/css/my-dashboard/my-challenges.scss')
8888
require('../assets/css/my-dashboard/header-dashboard.scss')
8989
require('../assets/css/my-dashboard/community-updates.scss')
90+
require('../assets/css/my-dashboard/notifications.scss')
9091
require('../assets/css/my-challenges/my-challenges.scss')
9192
require('../assets/css/layout/header.scss')
9293
require('../assets/css/layout/footer.scss')
@@ -120,6 +121,7 @@ require('../assets/css/directives/challenge-links.directive.scss')
120121
require('../assets/css/directives/badge-tooltip.scss')
121122
require('../assets/css/directives/tc-banner.scss')
122123
require('../assets/css/directives/tc-fp-file-input.directive.scss')
124+
require('../assets/css/directives/notification.directive.scss')
123125
require('../assets/css/community/statistics.scss')
124126
require('../assets/css/community/members.scss')
125127
require('../assets/css/community/community.scss')

‎app/my-dashboard/my-dashboard.jade‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,10 @@
55

66
.challenges(id="challenges", ui-view="my-challenges")
77

8-
.tco.tco17
9-
.tc-banner-placeholder.cognitive
10-
.container
11-
.img
12-
.description Learn about Cognitive technologies and get hands on experience as a member of the Topcoder Cognitive Community.
13-
a(href="https://cognitive.topcoder.com").cta.tc-btn-white.tc-btn-radius Learn More
14-
15-
.tco.tco17
16-
.tc-banner-placeholder.black.bg-image
17-
.container
18-
.title 2017 Topcoder Open
19-
.subtitle October 21-24, 2017 </br>Buffalo, NY, USA
20-
.description The Ultimate Programming and Design Tournament - The Final Stage
21-
a(href="http://tco17.topcoder.com/").cta.tc-btn-white.tc-btn-radius Learn More
8+
.notifications(ui-view="notifications")
229

2310
.srms(id="srms", ui-view="srms", ng-show="dashboard.showSRMs")
2411

2512
.programs(id="community", ui-view="programs")
2613

2714
.community-updates(ui-view="community-updates")
28-

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ import angular from 'angular'
3636
}]
3737
},
3838
views: {
39+
'notifications': {
40+
template: require('./notifications/notifications')(),
41+
controller: 'NotificationsController',
42+
controllerAs: 'vm'
43+
},
3944
'header-dashboard' : {
4045
template: require('./header-dashboard/header-dashboard')(),
4146
controller: 'HeaderDashboardController',

‎app/my-dashboard/notifications/news.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
[
2+
{
3+
"header": "TCO17 Beijing Regionals",
4+
"details": "After an all amazing last yera TCO16 Beijing Regionals we were very excited to go back and do an event in some how other text",
5+
"headerExpand": "TCO17 Beijing Regionals",
6+
"detailsExpand": "After an all amazing last yera TCO16 Beijing Regionals we were very excited to go back and do an event in some how other text",
7+
"backgroundImage": "tco17-beijing-banner.jpg",
8+
"redirectTo": "https://tco17.topcoder.com/",
9+
"redirectText": "Learn More",
10+
"videoCode": "https://www.youtube.com/embed/Qc_PcN6ECjg?autoplay=1",
11+
"live": true,
12+
"liveExpand": true
13+
},
14+
{
15+
"header": "SRM 789 is starting in 10 days (June 3, 22:30pm)",
16+
"details": "Registration will be open on the day of the competition. Don't forget to join us, add it to your calendar",
17+
"headerExpand": "TCO17 Beijing Regionals",
18+
"detailsExpand": "After an all amazing last yera TCO16 Beijing Regionals we were very excited to go back and do an event in some how other text",
19+
"backgroundImage": "tco17-beijing-banner.jpg",
20+
"redirectTo": "https://tco17.topcoder.com/",
21+
"redirectText": "Learn More",
22+
"videoCode": "https://www.youtube.com/embed/fTdov0zyFu8?autoplay=1",
23+
"live": false,
24+
"liveExpand": false,
25+
"height": 480
26+
},
27+
{
28+
"header": "Another notification demo",
29+
"details": "Without video but has a live flag",
30+
"headerExpand": "Expanded header worked",
31+
"detailsExpand": "Expanded details worked",
32+
"backgroundImage": "tco17-beijing-banner.jpg",
33+
"redirectTo": "https://tco17.topcoder.com/",
34+
"redirectText": "Redirect",
35+
"live": true,
36+
"liveExpand": false
37+
}
38+
]

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import angular from 'angular'
2+
3+
(function() {
4+
'use strict'
5+
6+
angular.module('tc.myDashboard').controller('NotificationsController', NotificationsController)
7+
8+
function NotificationsController () {
9+
var vm = this
10+
vm.news = []
11+
12+
activate()
13+
14+
function activate() {
15+
vm.news = require('./news.json')
16+
}
17+
}
18+
})()

‎app/my-dashboard/notifications/notifications.jade‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.no-news(ng-show="vm.news.length===0") NO NEWS RIGHT NOW
2+
.has-news(ng-show="vm.news.length>0")
3+
notification(ng-repeat="config in vm.news", config="config")
4+
5+
.banners
6+
//
7+
to add more banners here, just create a new a.banner element under .banner-row element,
8+
each .banner-row element will occupy a whole row in page, and all a.banner elements under
9+
it will have same width, you can create a new .banner-row if you want place more banners
10+
in a new row
11+
.banner-row
12+
a.banner.tco17(href="https://tco17.topcoder.com/")
13+
img(src=require("../../../assets/images/tco17-web-logo-white.svg"), alt="TCO17")
14+
a.banner.watson(href="https://cognitive.topcoder.com/")
15+
img(src=require("../../../assets/images/logo_white.png"), alt="TCO17")
16+
span With
17+
br
18+
span Watson
19+
a.banner.cognitive(href="https://cognitive.topcoder.com/")
20+
span COGNITIVE
21+
br
22+
span COMMUNITY

‎app/topcoder.constants.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ angular.module('CONSTANTS', []).constant('CONSTANTS', {
2323
'TCO17_URL' : process.env.TCO17_URL,
2424
'TCO_HOME_URL' : process.env.TCO_HOME_URL,
2525
'ACCOUNTS_APP_URL' : process.env.ACCOUNTS_APP_URL,
26-
'FILE_PICKER_API_KEY' : process.env.domain === 'topcoder-dev.com' ? process.env.FILE_PICKER_API_KEY_DEV : process.env.FILE_PICKER_API_KEY_PROD,
26+
'FILE_PICKER_API_KEY' : process.env.domain === 'topcoder-dev.com' ? process.env.FILE_PICKER_API_KEY_DEV : process.env.FILE_PICKER_API_KEY_PROD,
2727
'FILE_PICKER_SUBMISSION_CONTAINER_NAME': process.env.FILE_PICKER_SUBMISSION_CONTAINER_NAME,
2828

2929
'NEW_CHALLENGES_URL' : 'https://www.topcoder.com/challenges/develop/upcoming/',
@@ -45,5 +45,6 @@ angular.module('CONSTANTS', []).constant('CONSTANTS', {
4545
'STATUS_ACTIVE' : 'Active',
4646
'STATUS_COMPLETED_WITHOUT_WIN' : 'Completed Without Win',
4747
'CHALLENGES_LOADING_CHUNK' : 36,
48-
'INFINITE_SCROLL_OFFSET' : '400' // footer is 300px and challenge tile is 400px
48+
'INFINITE_SCROLL_OFFSET' : '400', // footer is 300px and challenge tile is 400px
49+
'VIDEO_DEFAULT_HEIGHT': 360
4950
})

‎assets/css/directives/notification.directive.scss‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
@import 'topcoder/tc-includes';
2+
3+
.notification{
4+
margin-bottom: 1px;
5+
.live{
6+
width: 50px;
7+
height: 30px;
8+
line-height: 30px;
9+
color: $white;
10+
background-color: #E73851;
11+
border-radius: 4px;
12+
text-align: center;
13+
font-size: 14px;
14+
}
15+
.collapsed{
16+
display: flex;
17+
align-items: center;
18+
color: $white;
19+
font-size: 18px;
20+
height: 60px;
21+
background: linear-gradient(to bottom, #20a6e2 0%, #5c82db 45%, #a17fdd 100%);
22+
padding: 0 15px;
23+
.live{
24+
margin-right: 12px;
25+
}
26+
.header{
27+
font-weight: bold;
28+
}
29+
.details{
30+
flex: 1;
31+
overflow: hidden;
32+
text-overflow: ellipsis;
33+
white-space: nowrap;
34+
line-height: 60px;
35+
}
36+
.expand{
37+
cursor: pointer;
38+
font-size: 26px;
39+
font-weight: 100;
40+
margin-left: 38px;
41+
}
42+
}
43+
.expanded{
44+
position: relative;
45+
color: $white;
46+
display: flex;
47+
background-size: cover;
48+
@media screen and (max-width: 768px) {
49+
flex-direction: column;
50+
}
51+
.mask{
52+
position: absolute;
53+
top: 0;
54+
left:0;
55+
bottom: 0;
56+
right: 0;
57+
}
58+
.left{
59+
padding-top: 70px;
60+
flex: 1;
61+
height: 100%;
62+
position: relative;
63+
background: linear-gradient(to bottom, #20a6e2 0%, rgba(92, 130, 219, 0.8) 45%, rgba(161, 127, 221, 0.75) 100%)
64+
}
65+
.header{
66+
font-weight: bold;
67+
font-size: 40px;
68+
padding-left: 60px;
69+
margin-bottom: 20px;
70+
}
71+
.details{
72+
font-size: 16px;
73+
line-height: 26px;
74+
font-weight: 100;
75+
padding-left: 60px;
76+
max-width: 450px;
77+
}
78+
.action{
79+
position: absolute;
80+
bottom: 40px;
81+
left: 60px;
82+
background-color: white;
83+
padding: 10px 20px;
84+
border-radius: 26px;
85+
}
86+
.right{
87+
flex: 1;
88+
position: relative;
89+
background-color: transparentize($black, 0.25);
90+
display: flex;
91+
align-items: center;
92+
justify-content: space-around;
93+
.btn-play{
94+
text-align: center;
95+
font-size: 26px;
96+
font-weight: 100;
97+
i.fa{
98+
font-size: 160px;
99+
margin-bottom: 10px;
100+
cursor: pointer;
101+
&:hover{
102+
opacity: 0.75;
103+
font-weight: 100;
104+
}
105+
}
106+
}
107+
.live{
108+
position: absolute;
109+
left: 20px;
110+
top: 20px;
111+
}
112+
}
113+
.collapse{
114+
position: absolute;
115+
top: 15px;
116+
right: 15px;
117+
cursor: pointer;
118+
font-size: 26px;
119+
font-weight: 100;
120+
}
121+
}
122+
}

0 commit comments

Comments
 (0)