Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 00e2ebf

Browse files
birdofpreyrubirdofpreyru
committedAug 1, 2017
Merge branch 'dev'
2 parents 00ab10d + 0aa6fa5 commit 00e2ebf

21 files changed

+448
-28
lines changed
 

‎README.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,33 @@ To make the mentioned configuration on Ubuntu 16.04 you:
3939
- dan_developer/dantopcoder123
4040
- Create your own:
4141
- You may register your own account at https://local.topcoder-dev.com/register
42+
43+
# Configuration
44+
45+
### Notifications in the Dashboard
46+
47+
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.
48+
49+
To add a new notification, append a new configuration object to /app/my-dashboard/notifications/news.json, the configuration object has following properties:
50+
51+
- 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).
52+
- header: header text displayed when collapsed.
53+
- details: details text displayed when collapsed.
54+
- headerExpand: header text displayed when expanded, use `header` if this property is falsy
55+
- detailsExpand: details text displayed when expanded, use `details` if this property is falsy
56+
- backgroundImage: background image used when expaneded, the path is relative to /assets/images/news
57+
- redirectTo: the url will redirect to when user click the `Learn more` button, will hide the button if this property is falsy
58+
- redirectText: the text will be displayed on the `Learn more` button, will hide the button if this property is falsy
59+
- videoCode: the video resource code to embed when expanded
60+
- live: show the live flag or not when collapsed
61+
- liveExpand: show the live flag or not when expanded
62+
- 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
63+
64+
### Banners in the Dashboard
65+
66+
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.
4267

43-
## Recommended Developer Tools
68+
# Recommended Developer Tools
4469

4570
Syntax highlighting for ES6 and React JSX
4671
- Install [babel](https://packagecontrol.io/packages/Babel) via the package manager in Sublime Text

‎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: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.notification
2+
.collapsed(ng-show="!vm.expanded")
3+
.live(ng-show="config.live") LIVE
4+
.customTag(ng-show="config.customTag" ng-style="{'background': config.customTag.background, color: config.customTag.color}") {{config.customTag.text}}
5+
.header {{config.header}}: 
6+
.details {{config.details}}
7+
i.expand.fa.fa-plus(ng-click="vm.toggle()")
8+
.expanded(ng-show="vm.expanded", ng-style="{'background-image': 'url('+vm.loadImage(config.backgroundImage)+')'}")
9+
.mask
10+
.left(ng-style="{'height': (config.height || vm.defaultHeight) + 'px'}")
11+
.header {{config.header}}
12+
.details {{config.details}}
13+
a.action(ng-show="config.redirectText && config.redirectTo", href="{{config.redirectTo}}") {{config.redirectText}}
14+
.right(ng-if="config.videoCode", ng-style="{'height': (config.height || vm.defaultHeight) + 'px'}")
15+
.btn-play(ng-hide="vm.loadVideo")
16+
i.fa.fa-play-circle-o(ng-click="vm.loadVideo=true;")
17+
div Play Video
18+
iframe(ng-if="vm.loadVideo" ng-src="{{vm.videoUrl(config.videoCode)}}", allowfullscreen, frameborder="0", width="100%" height="{{config.height||vm.defaultHeight}}")
19+
.live(ng-show="config.liveExpand") LIVE
20+
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: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,12 @@
33
.my-dashboard-container
44
.subtrack-stats(id="stats", ui-view="subtrack-stats")
55

6-
.challenges(id="challenges", ui-view="my-challenges")
7-
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
6+
.notifications(ui-view="notifications")
147

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+
.challenges(id="challenges", ui-view="my-challenges")
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: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
[
2+
{
3+
"header": "TCO18 Has Begun",
4+
"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!",
5+
"headerExpand": "TCO18 Has Begun!",
6+
"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!",
7+
"backgroundImage": "tc-dashboard-tco18.png",
8+
"redirectTo": "http://tco18.topcoder.com/",
9+
"redirectText": "TCO18 Homepage",
10+
"live": false,
11+
"liveExpand": false,
12+
"customTag": {
13+
"text": "Announcement"
14+
}
15+
}
16+
]

‎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
})

‎app/topcoder.routes.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ import moment from 'moment'
2121
$urlRouterProvider.rule(function($injector) {
2222
var $location = $injector.get('$location')
2323
var path = $location.url()
24+
// Remove double URL encoding from member handle
25+
var pathArray = path.split('/')
26+
var membersIndex = pathArray.indexOf('members')
27+
if (membersIndex > -1) {
28+
while (decodeURIComponent(pathArray[membersIndex + 1]) !== pathArray[membersIndex + 1]) {
29+
pathArray[membersIndex + 1] = decodeURIComponent(pathArray[membersIndex + 1])
30+
}
31+
path = pathArray.join('/')
32+
}
2433
// check to see if the path already has a slash where it should be
2534
if (path[path.length - 1] === '/' || path.indexOf('/?') > -1 || path.indexOf('/#') > -1) {
2635
return

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

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

0 commit comments

Comments
 (0)
This repository has been archived.