Skip to content

Commit f9ea7bb

Browse files
abhishek97abhishek97
committed
derp
1 parent cb6c192 commit f9ea7bb

File tree

6 files changed

+220
-41
lines changed

6 files changed

+220
-41
lines changed

‎.eslintrc.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ module.exports = {
2020
browser: true
2121
},
2222
rules: {
23-
'ember/no-jquery': 'error'
23+
'ember/no-jquery': 'error',
24+
'no-implicit-this': { allow: ['mut'] }
2425
},
2526
overrides: [
2627
// node files

‎app/pods/attempt/content/template.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
{{!-- render content outlet and doubts and notes --}}
88
<div>
99
<div>
10+
<ContentFeedback @showFeedback={{true}} />
1011
{{outlet}}
1112
</div>
1213
{{#unless (eq model.contentable 'course-recommend')}}

‎app/pods/components/content-feedback/component.js

+54-15
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,56 @@
11
import Component from '@ember/component';
2+
import { action } from '@ember/object';
3+
import { computed } from '@ember/object';
24

3-
export default Component.extend({
4-
feedbackState: 'COLLAPSED',
5-
actions: {
6-
changeState(newState) {
7-
this.set('feedbackState', newState)
8-
},
9-
submitFeedback(feed) {
10-
this.onFeedbackSubmit(feed)
11-
this.send('changeState', 'SUBMITTED')
12-
setTimeout(() => {
13-
this.set('showFeedback', false)
14-
}, 2000)
15-
}
16-
}
17-
});
5+
const BAD_REASONS = [
6+
'Could not understand topic.',
7+
'Audio was not clear.',
8+
'Concept was covered too fast.',
9+
'Concept was covered too slow.',
10+
'Prerequisites were not covered.'
11+
]
12+
13+
const GOOD_REASONS = [
14+
'Concept was convered is best possible manner'
15+
]
16+
17+
export default class ContentFeedbackComponent extends Component {
18+
expanded = false
19+
selectedRating = null
20+
21+
@action
22+
toggleExpandedView() {
23+
// this.expanded && this.set('selectedRating', null)
24+
this.toggleProperty('expanded')
25+
}
26+
27+
@computed('selectedRating')
28+
get expansionType () {
29+
const rating = this.selectedRating
30+
if (rating === 4 || rating === null)
31+
return 'NONE'
32+
else if (rating <= 3)
33+
return 'BAD'
34+
else
35+
return 'GOOD'
36+
}
37+
38+
@computed('expansionType')
39+
get expansionText () {
40+
switch(this.expansionType) {
41+
case 'BAD': return 'What went wrong?';
42+
case 'GOOD': return 'What went awesome?';
43+
default: return ''
44+
}
45+
}
46+
47+
@computed('expansionType')
48+
get expansionReasons() {
49+
switch(this.expansionType) {
50+
case 'BAD': return BAD_REASONS;
51+
case 'GOOD': return GOOD_REASONS;
52+
default: return []
53+
}
54+
}
55+
56+
}

‎app/pods/components/content-feedback/template.hbs

+82-25
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,82 @@
1-
{{#if showFeedback}}
2-
{{#if (eq feedbackState 'COLLAPSED')}}
3-
<div class="feed-box collapsed" {{action 'changeState' 'EXPANDED'}}>
4-
<img src="/images/love.svg" alt="" class="love-ico">
5-
</div>
6-
{{else if (eq feedbackState 'EXPANDED')}}
7-
<div class="feed-overlay"></div>
8-
<div class="feed-box expanded">
9-
<div class="feed-text">Did you like the video?</div>
10-
<form>
11-
<input type="radio" name="gender" value="UP" {{action 'submitFeedback' 'UP'}}> Yes
12-
<input type="radio" name="gender" value="DOWN" {{action 'submitFeedback' 'DOWN'}}> No
13-
</form>
14-
<img src="/images/love.svg" alt="" class="love-ico" {{action 'changeState' 'COLLAPSED'}}>
15-
</div>
16-
{{else if (eq feedbackState 'SUBMITTED')}}
17-
<div class="feed-overlay"></div>
18-
<div class="feed-box">
19-
<div class="feed-text">Feedback Submitted</div>
20-
<img src="/images/love.svg" alt="" class="love-ico">
21-
</div>
22-
{{else}}
23-
24-
{{/if}}
25-
{{/if}}
1+
<div class="content-feedback">
2+
<div class="cta font-md bold cursor pl-2 py-4" {{on "click" this.toggleExpandedView}} role="button">
3+
Give Feedback
4+
</div>
5+
6+
{{#if this.expanded}}
7+
<div class="expanded p-3 d-flex flex-column justify-content-center">
8+
<div class="row font-sm">
9+
<div class="col-12 bold py-2">
10+
How will you rate the video?
11+
</div>
12+
<div class="col-12 py-2">
13+
<RatingBar @scale={{5}} @rating={{this.selectedRating}} @changeRating={{fn (mut this.selectedRating)}} />
14+
</div>
15+
16+
{{#unless (eq this.expansionType 'NONE') }}
17+
<div class="col-12 bold py-4 fade-in">
18+
<span class="py-3">
19+
{{this.expansionText}}
20+
</span>
21+
22+
{{#each this.expansionReasons as |reason|}}
23+
<div class="py-2">
24+
<label class="radio-container v-align-ma">
25+
<input class="radio" type="radio" name="reason"
26+
checked={{eq this.selectedReason reason}}
27+
onclick={{fn (mut this.selectedReason) reason}} />
28+
<span class="checkmark t-smaller"></span>
29+
<span class="font-xs">{{reason}}</span>
30+
</label>
31+
</div>
32+
{{/each}}
33+
</div>
34+
{{/unless}}
35+
</div>
36+
</div>
37+
{{/if}}
38+
39+
</div>
40+
41+
<style>
42+
.content-feedback {
43+
position: absolute;
44+
right: 0;
45+
top: 23%;
46+
}
47+
48+
49+
.content-feedback .cta {
50+
width: 35px;
51+
background-color: orange;
52+
writing-mode: vertical-lr;
53+
position: relative;
54+
transform-origin: center;
55+
transform: rotateZ(180deg);
56+
}
57+
58+
.content-feedback .expanded {
59+
position: absolute;
60+
right: 40px;
61+
top: -100px;
62+
width: 300px;
63+
height: 400px;
64+
background-color: #393B41;
65+
66+
67+
}
68+
69+
.fade-in {
70+
animation: fade-in 0.3s ease-in;
71+
}
72+
73+
74+
@keyframes fade-in {
75+
0% {
76+
opacity: 0;
77+
}
78+
100% {
79+
opacity: 1;
80+
}
81+
}
82+
</style>

‎app/styles/app.scss

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ $cb-red: #ff6666;
2121
@import "./components/progress-bar.scss";
2222
@import "lists.scss";
2323
@import "./components/chitkara-banner.scss";
24+
@import "./components//radio-button.scss";
2425

2526
body {
2627
padding-top: 70px;

‎app/styles/components/radio-button.scss

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*
2+
Ex:
3+
<label class="radio-container">One
4+
<input type="radio" checked="checked" name="radio">
5+
<span class="checkmark"></span>
6+
</label>
7+
8+
*/
9+
10+
/* The radio-button container */
11+
.radio-container {
12+
display: block;
13+
position: relative;
14+
padding-left: 35px;
15+
cursor: pointer;
16+
font-size: 22px;
17+
-webkit-user-select: none;
18+
-moz-user-select: none;
19+
-ms-user-select: none;
20+
user-select: none;
21+
22+
/* Hide the browser's default radio button */
23+
input {
24+
position: absolute;
25+
opacity: 0;
26+
cursor: pointer;
27+
}
28+
29+
/* On mouse-over, add a grey background color */
30+
&:hover input~.checkmark {
31+
background-color: #ccc;
32+
}
33+
34+
/* When the radio button is checked, add a blue background */
35+
input:checked~.checkmark {
36+
background: linear-gradient(90deg, #FB8133 0%, #FFBA08 100%);
37+
}
38+
39+
/* Show the indicator (dot/circle) when checked */
40+
41+
input:checked~.checkmark:after {
42+
display: block;
43+
}
44+
45+
/* Style the indicator (dot/circle) */
46+
47+
.checkmark:after {
48+
top: 9px;
49+
left: 9px;
50+
width: 8px;
51+
height: 8px;
52+
border-radius: 50%;
53+
background: white;
54+
}
55+
56+
}
57+
58+
59+
/* Create a custom radio button */
60+
.checkmark {
61+
position: absolute;
62+
top: 0;
63+
left: 0;
64+
height: 25px;
65+
width: 25px;
66+
background-color: #eee;
67+
border-radius: 50%;
68+
69+
/* Create the indicator (the dot/circle - hidden when not checked) */
70+
&:after {
71+
content: "";
72+
position: absolute;
73+
display: none;
74+
}
75+
}
76+
77+
.t-smaller {
78+
transform-origin: left;
79+
transform: scale(0.7)
80+
}

0 commit comments

Comments
 (0)