Skip to content

Commit d929285

Browse files
christianmemijechristianmemije
committed
Adds points slidein
1 parent 9d581bc commit d929285

File tree

3 files changed

+162
-27
lines changed

3 files changed

+162
-27
lines changed

‎kolibri/plugins/learn/assets/src/views/content-page/index.vue‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,21 @@
8383
:header="recommendedText"
8484
:contents="recommended"/>
8585

86-
<content-points
87-
v-if="progress >= 1 && wasIncomplete"
88-
@close="closeModal"
89-
:kind="content.next_content.kind"
90-
:title="content.next_content.title">
91-
92-
<icon-button slot="nextItemBtn" @click="nextContentClicked" class="next-btn" :text="$tr('nextContent')" alignment="right">
93-
<mat-svg class="right-arrow" category="navigation" name="chevron_right"/>
94-
</icon-button>
95-
</content-points>
86+
<template v-if="progress >= 1 && wasIncomplete">
87+
<points-popup
88+
v-if="showPopup"
89+
@close="markAsComplete"
90+
:kind="content.next_content.kind"
91+
:title="content.next_content.title">
92+
<icon-button slot="nextItemBtn" @click="nextContentClicked" class="next-btn" :text="$tr('nextContent')" alignment="right">
93+
<mat-svg class="right-arrow" category="navigation" name="chevron_right"/>
94+
</icon-button>
95+
</points-popup>
96+
97+
<transition v-else name="slidein" appear>
98+
<points-slidein @close="markAsComplete"/>
99+
</transition>
100+
</template>
96101

97102
</div>
98103

@@ -118,16 +123,18 @@
118123
import downloadButton from 'kolibri.coreVue.components.downloadButton';
119124
import iconButton from 'kolibri.coreVue.components.iconButton';
120125
import assessmentWrapper from '../assessment-wrapper';
121-
import contentPoints from '../content-points';
126+
import pointsPopup from '../points-popup';
127+
import pointsSlidein from '../points-slidein';
122128
import uiPopover from 'keen-ui/src/UiPopover';
123129
import uiIcon from 'keen-ui/src/UiIcon';
124130
import markdownIt from 'markdown-it';
131+
import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
125132
126133
export default {
127134
$trNameSpace: 'learnContent',
128135
$trs: {
129136
recommended: 'Recommended',
130-
nextContent: 'Go to next item',
137+
nextContent: 'Next item',
131138
author: 'Author',
132139
license: 'License',
133140
licenseDescription: 'License description',
@@ -181,6 +188,13 @@
181188
}
182189
return false;
183190
},
191+
showPopup() {
192+
return (
193+
this.content.kind === ContentNodeKinds.EXERCISE ||
194+
this.content.kind === ContentNodeKinds.VIDEO ||
195+
this.content.kind === ContentNodeKinds.AUDIO
196+
);
197+
},
184198
},
185199
components: {
186200
pageHeader,
@@ -189,7 +203,8 @@
189203
downloadButton,
190204
iconButton,
191205
assessmentWrapper,
192-
contentPoints,
206+
pointsPopup,
207+
pointsSlidein,
193208
uiPopover,
194209
uiIcon,
195210
},
@@ -207,7 +222,7 @@
207222
const summaryProgress = this.updateProgressAction(progressPercent, forceSave);
208223
updateContentNodeProgress(this.channelId, this.contentNodeId, summaryProgress);
209224
},
210-
closeModal() {
225+
markAsComplete() {
211226
this.wasIncomplete = false;
212227
},
213228
genRecLink(id, kind) {

‎kolibri/plugins/learn/assets/src/views/content-points/index.vue‎ renamed to ‎kolibri/plugins/learn/assets/src/views/points-popup/index.vue‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,24 @@
22

33
<core-modal :title="$tr('niceWork')" @cancel="closePopover">
44

5+
<div class="progress-icon">
6+
<progress-icon :progress="1"/>
7+
</div>
8+
9+
510
<div class="points-wrapper">
11+
<h2>{{ $tr('pointsForCompletion') }}</h2>
612
<div class="points">
713
<points-icon class="points-icon" :active="true"/>
8-
<span class="plus-points">{{ $tr('plusPoints', { maxPoints }) }}</span>
14+
<span class="points-amount">{{ $tr('plusPoints', { maxPoints }) }}</span>
915
</div>
1016
</div>
1117

1218
<div class="next-item-section">
1319
<h2 class="next-item-heading">{{ $tr('nextContent') }}</h2>
1420
<div>
15-
<content-icon class="content-icon" :kind="kind"/>
16-
<span>{{ title }}</span>
21+
<content-icon class="nex-item-icon" :kind="kind"/>
22+
<span class="next-item-title">{{ title }}</span>
1723
</div>
1824
</div>
1925

@@ -33,13 +39,14 @@
3339
import { MaxPointsPerContent, ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
3440
import pointsIcon from 'kolibri.coreVue.components.pointsIcon';
3541
import contentIcon from 'kolibri.coreVue.components.contentIcon';
42+
import progressIcon from 'kolibri.coreVue.components.progressIcon';
3643
import coreModal from 'kolibri.coreVue.components.coreModal';
3744
import iconButton from 'kolibri.coreVue.components.iconButton';
3845
export default {
39-
$trNameSpace: 'contentPoints',
46+
$trNameSpace: 'pointsPopup',
4047
$trs: {
4148
plusPoints: '+ { maxPoints, number } Points',
42-
niceWork: 'Great work! Keep it up!',
49+
niceWork: 'Great work!',
4350
nextContent: 'Next Item',
4451
topic: 'Topic',
4552
exercise: 'Exercise',
@@ -48,11 +55,13 @@
4855
document: 'Document',
4956
html5: 'HTML5 app',
5057
item: 'Item',
51-
close: 'Close',
58+
close: 'Practice again',
59+
pointsForCompletion: 'Points for completion',
5260
},
5361
components: {
5462
pointsIcon,
5563
contentIcon,
64+
progressIcon,
5665
coreModal,
5766
iconButton,
5867
},
@@ -98,29 +107,28 @@
98107
@require '~kolibri.styles.definitions'
99108
100109
.points-wrapper
101-
margin: 2em
110+
margin-bottom: 2em
102111
text-align: center
103112
104113
.points
105114
display: inline-block
106115
107116
.points-icon
108117
float: left
109-
width: 30px
110-
height: 30px
118+
width: 20px
119+
height: 20px
111120
112-
.plus-points
121+
.points-amount
113122
padding-left: 5px
114-
font-size: 1.5em
115123
font-weight: bold
116124
color: $core-status-correct
117125
118-
.content-icon
126+
.nex-item-icon
119127
font-size: 1.5em
120128
121129
.next-item-section
122130
text-align: center
123-
padding: 0 2em 2em
131+
margin-bottom: 2em
124132
125133
.buttons
126134
text-align: center
@@ -132,4 +140,14 @@
132140
.close-button
133141
margin-right: 0.5em
134142
143+
.progress-icon
144+
text-align: center
145+
margin-bottom: 2em
146+
147+
.next-item-title
148+
padding-left: 8px
149+
150+
h2
151+
margin-top: 0
152+
135153
</style>

‎kolibri/plugins/learn/assets/src/views/points-slidein/index.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
3+
<div class="points-slidein">
4+
<div class="points">
5+
<points-icon class="points-icon" :active="true"/>
6+
<span class="points-amount">{{ $tr('plusPoints', { maxPoints }) }}</span>
7+
</div>
8+
9+
<ui-icon-button
10+
type="secondary"
11+
color="default"
12+
size="small"
13+
icon="close"
14+
:ariaLabel="$tr('dismiss')"
15+
@click="$emit('close')"
16+
/>
17+
</div>
18+
19+
</template>
20+
21+
22+
<script>
23+
24+
import { contentPoints } from 'kolibri.coreVue.vuex.getters';
25+
import { MaxPointsPerContent, ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
26+
import pointsIcon from 'kolibri.coreVue.components.pointsIcon';
27+
import uiIconButton from 'keen-ui/src/UiIconButton';
28+
29+
export default {
30+
$trNameSpace: 'pointsSlidein',
31+
$trs: {
32+
plusPoints: '+ { maxPoints, number } Points',
33+
dismiss: 'Dismiss',
34+
},
35+
components: {
36+
pointsIcon,
37+
uiIconButton,
38+
},
39+
40+
computed: {
41+
maxPoints() {
42+
return MaxPointsPerContent;
43+
},
44+
},
45+
vuex: {
46+
getters: { contentPoints },
47+
},
48+
};
49+
50+
</script>
51+
52+
53+
<style lang="stylus" scoped>
54+
55+
@require '~kolibri.styles.definitions'
56+
57+
$box-shadow = 0 2px 4px -1px rgba(0, 0, 0, 0.2),
58+
0 4px 5px 0 rgba(0, 0, 0, 0.14),
59+
0 1px 10px 0 rgba(0, 0, 0, 0.12)
60+
61+
.points-slidein
62+
position: fixed
63+
top: 84px
64+
right: 24px
65+
z-index: 24
66+
padding: 8px
67+
background-color: $core-bg-canvas
68+
box-shadow: $box-shadow
69+
animation-fill-mode: both
70+
animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1)
71+
animation-duration: 0.3s
72+
73+
.slidein-enter-active
74+
animation-name: slidein
75+
76+
.slidein-leave-active
77+
animation-name: slidein
78+
animation-direction: reverse
79+
80+
@keyframes slidein
81+
from
82+
transform: translate3d(100%, 0, 0)
83+
visibility: visible
84+
to
85+
transform: translate3d(0, 0, 0)
86+
87+
.points
88+
display: inline-block
89+
margin-left: 16px
90+
91+
.points-icon
92+
float: left
93+
width: 20px
94+
height: 20px
95+
96+
.points-amount
97+
margin-left: 8px
98+
margin-right: 16px
99+
font-weight: bold
100+
color: $core-status-correct
101+
102+
</style>

0 commit comments

Comments
 (0)