Skip to content

Commit deb8df3

Browse files
supalarrysupalarry
committed
WIP my brain is too fried to come up with commit message
1 parent 3cc5cbb commit deb8df3

File tree

11 files changed

+423
-103
lines changed

11 files changed

+423
-103
lines changed

‎frontend/src/assets/css/tailwind.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,21 @@
225225
@apply text-center;
226226
}
227227

228+
.onboarding-sub-container-content-button-outline-selected {
229+
@apply bg-purple-matcha;
230+
@apply text-white-matcha;
231+
@apply font-bold;
232+
@apply w-full;
233+
@apply max-w-xs;
234+
@apply border-2;
235+
@apply border-purple-matcha;
236+
@apply rounded-md;
237+
@apply py-2;
238+
@apply mt-4;
239+
@apply cursor-pointer;
240+
@apply text-center;
241+
}
242+
228243
.onboarding-sub-container-content-button-outline-light {
229244
@apply bg-white-matcha;
230245
@apply text-purple-matcha;
@@ -241,6 +256,11 @@
241256
@apply w-2/3;
242257
}
243258

259+
.onboarding-sub-container-content-button-outline-light:active,
260+
.onboarding-sub-container-content-button-outline-light:focus {
261+
outline: none;
262+
}
263+
244264
.auth-sub-container-content-button:active, .auth-sub-container-content-button:focus,
245265
.onboarding-sub-container-content-button:active, .onboarding-sub-container-content-button:focus{
246266
outline: none;

‎frontend/src/assets/onboarding/cloud.png‎

39.1 KB
Loading

‎frontend/src/assets/onboarding/remove.png‎

-8 KB
Loading

‎frontend/src/components/app/onboarding/ImageUpload.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<div class="w-full max-w-sm flex flex-col justify-center items-center">
4+
<div class="w-full mt-4">
5+
<p class="text-gray-matcha text-center">{{info.explanation}}</p>
6+
</div>
7+
<button v-if="!image.uploaded" class="relative onboarding-sub-container-upload-button w-full my-8">
8+
<input class="cursor-pointer opacity-0 absolute top-0 left-0 w-full h-full rounded-md" type="file" v-on:change="selectFile()" ref="file">
9+
<img src="../../../assets/onboarding/cloud.png" class="w-8 mx-auto">
10+
</button>
11+
<div v-if="image.uploaded" class="relative overflow-hidden bg-transparent rounded-md w-full my-10" style="padding-bottom: 70%">
12+
<img src="../../../assets/onboarding/remove.png" class="absolute cursor-pointer top-0 right-0 w-8 z-10" v-on:click="deleteImage()">
13+
<img v-bind:src="image.url" class="absolute object-cover w-full h-full rounded-md">
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script>
19+
export default {
20+
props: ['info', 'bus'],
21+
data: () => ({
22+
image: {
23+
uploaded: false,
24+
url: null,
25+
content: null,
26+
error: null,
27+
},
28+
}),
29+
methods: {
30+
selectFile() {
31+
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
32+
const file = this.$refs.file.files[0];
33+
this.image.content = file;
34+
35+
if (!allowedTypes.includes(file.type)) {
36+
this.image.error = 'Only images allowed';
37+
return;
38+
}
39+
if (file.size > 2000000) {
40+
this.image.error = 'File too large';
41+
return;
42+
}
43+
this.image.url = URL.createObjectURL(file);
44+
this.image.uploaded = true;
45+
this.$emit('imageUploaded');
46+
},
47+
deleteImage() {
48+
this.image.uploaded = false;
49+
this.image.url = null;
50+
this.image.content = null;
51+
this.image.error = null;
52+
this.$emit('imageDeleted');
53+
},
54+
getImageObject() {
55+
this.$emit('imageObjectGiven', this.image);
56+
this.deleteImage();
57+
},
58+
},
59+
mounted() {
60+
this.bus.$on('getImageObject', this.getImageObject);
61+
},
62+
};
63+
</script>

‎frontend/src/components/app/onboarding/SelectionButton.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<h1
3+
v-bind:class="{
4+
'onboarding-sub-container-content-button-outline': true,
5+
'mt-2': true,
6+
'onboarding-sub-container-content-button-outline-selected': selected,
7+
}"
8+
v-on:click="select(val)">{{val}}</h1>
9+
</template>
10+
11+
<script>
12+
export default {
13+
props: ['val', 'bus'],
14+
data: () => ({
15+
selected: false,
16+
selectedValue: '',
17+
}),
18+
methods: {
19+
select(val) {
20+
if (this.selected) {
21+
this.selected = false;
22+
this.selectedValue = '';
23+
this.$emit('deselect', val);
24+
return;
25+
}
26+
this.selected = true;
27+
this.selectedValue = val;
28+
this.$emit('select', val);
29+
},
30+
deselectIfNot(selectedVal) {
31+
if (this.val !== selectedVal) {
32+
this.selected = false;
33+
}
34+
},
35+
},
36+
mounted() {
37+
this.bus.$on('deselectIfNot', this.deselectIfNot);
38+
},
39+
};
40+
</script>

‎frontend/src/components/app/onboarding/SlideFive.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<section class="onboarding-sub-container">
4+
<h1>{{slide.current}} / {{slide.count}}</h1>
5+
<h1 class="onboarding-sub-container-content-heading leading-none">Bio</h1>
6+
<p class="mt-2">{{textareaLength}} / {{maxTextareaLength}}</p>
7+
<div class="h-64 flex flex-col items-center justify-center w-full">
8+
<textarea v-model="textareaValue" style="resize: none;" class="focus:outline-none active:outline-none w-full h-full border border-gray-matcha py-2 px-4 my-8 rounded-md text-gray-matcha" placeholder="I am best described as ..."></textarea>
9+
</div>
10+
<button class="onboarding-sub-container-content-button-outline-light mt-0" v-on:click="saveInput()">{{slide.buttonText}}</button>
11+
</section>
12+
</template>
13+
14+
<script>
15+
import Vue from 'vue';
16+
17+
export default {
18+
props: ['slide'],
19+
data: () => ({
20+
optionSelected: null,
21+
maxTextareaLength: 200,
22+
textareaValue: '',
23+
bus: new Vue(),
24+
}),
25+
methods: {
26+
saveInput() {
27+
this.$emit('saveInput', 'slideOne', this.optionSelected, 0);
28+
},
29+
select(...args) {
30+
const [val] = args;
31+
this.optionSelected = val;
32+
this.bus.$emit('deselectIfNot', val);
33+
},
34+
},
35+
computed: {
36+
textareaLength() {
37+
return this.textareaValue.length;
38+
},
39+
},
40+
};
41+
</script>

‎frontend/src/components/app/onboarding/SlideFour.vue‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<section class="onboarding-sub-container relative">
4+
<h1>{{slide.current}} / {{slide.count}}</h1>
5+
<h1 class="onboarding-sub-container-content-heading leading-none text-center">Images</h1>
6+
<ImageUpload v-if="secondaryUpload === 0"
7+
v-bind:info="{explanation: 'Profile image'}"
8+
v-bind:bus="bus"
9+
v-on:imageObjectGiven="imageObjectGiven"
10+
v-on:imageUploaded="imageUploaded"
11+
v-on:imageDeleted="imageDeleted">
12+
</ImageUpload>
13+
<ImageUpload v-if="secondaryUpload === 1"
14+
v-bind:info="{explanation: `Extra image ${secondaryUpload} / ${secondaryMaxUpload}`}"
15+
v-bind:bus="bus"
16+
v-on:imageObjectGiven="imageObjectGiven"
17+
v-on:imageUploaded="imageUploaded"
18+
v-on:imageDeleted="imageDeleted">
19+
</ImageUpload>
20+
<ImageUpload v-if="secondaryUpload === 2"
21+
v-bind:info="{explanation: `Extra image ${secondaryUpload} / ${secondaryMaxUpload}`}"
22+
v-bind:bus="bus"
23+
v-on:imageObjectGiven="imageObjectGiven"
24+
v-on:imageUploaded="imageUploaded"
25+
v-on:imageDeleted="imageDeleted">
26+
</ImageUpload>
27+
<ImageUpload v-if="secondaryUpload === 3"
28+
v-bind:info="{explanation: `Extra image ${secondaryUpload} / ${secondaryMaxUpload}`}"
29+
v-bind:bus="bus"
30+
v-on:imageObjectGiven="imageObjectGiven"
31+
v-on:imageUploaded="imageUploaded"
32+
v-on:imageDeleted="imageDeleted">
33+
</ImageUpload>
34+
<ImageUpload v-if="secondaryUpload === 4"
35+
v-bind:info="{explanation: `Extra image ${secondaryUpload} / ${secondaryMaxUpload}`}"
36+
v-bind:bus="bus"
37+
v-on:imageObjectGiven="imageObjectGiven"
38+
v-on:imageUploaded="imageUploaded"
39+
v-on:imageDeleted="imageDeleted">
40+
</ImageUpload>
41+
<button class="onboarding-sub-container-content-button-outline-light mt-0"
42+
v-on:click="saveInput()">{{buttonText}}</button>
43+
</section>
44+
</template>
45+
46+
<script>
47+
import Vue from 'vue';
48+
import ImageUpload from '@/components/app/onboarding/ImageUpload.vue';
49+
50+
export default {
51+
components: {
52+
ImageUpload,
53+
},
54+
props: ['slide'],
55+
data: () => ({
56+
secondaryUpload: 0,
57+
secondaryMaxUpload: 4,
58+
secondaryUploaded: [],
59+
buttonText: 'Skip',
60+
bus: new Vue(),
61+
}),
62+
methods: {
63+
imageUploaded() {
64+
this.buttonText = 'Continue';
65+
},
66+
imageDeleted() {
67+
this.buttonText = 'Skip';
68+
},
69+
saveInput() {
70+
this.bus.$emit('getImageObject');
71+
},
72+
imageObjectGiven(...args) {
73+
const [imageObject] = args;
74+
this.secondaryUploaded.push(imageObject);
75+
if (imageObject.url && this.secondaryUpload !== 4) {
76+
this.secondaryUpload += 1;
77+
} else {
78+
this.$emit('saveInput', 'slideFive', this.secondaryUploaded, 0);
79+
}
80+
},
81+
select(...args) {
82+
const [val] = args;
83+
this.optionSelected.push(val);
84+
},
85+
},
86+
};
87+
</script>

‎frontend/src/components/app/onboarding/SlideOne.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<section class="onboarding-sub-container">
4+
<h1>{{slide.current}} / {{slide.count}}</h1>
5+
<h1 class="onboarding-sub-container-content-heading leading-none">I am</h1>
6+
<div class="h-64 flex flex-col items-center justify-center w-full">
7+
<SelectionButton v-bind:val="'Male'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
8+
<SelectionButton v-bind:val="'Female'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
9+
<SelectionButton v-bind:val="'Other'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
10+
</div>
11+
<button v-bind:disabled="!optionSelected" v-bind:class="{'onboarding-sub-container-content-button-outline-light': true, 'mt-0': true, 'opacity-25': !optionSelected, 'cursor-default': !optionSelected}" v-on:click="saveInput()">{{slide.buttonText}}</button>
12+
</section>
13+
</template>
14+
15+
<script>
16+
import Vue from 'vue';
17+
import SelectionButton from '@/components/app/onboarding/SelectionButton.vue';
18+
19+
export default {
20+
components: {
21+
SelectionButton,
22+
},
23+
props: ['slide'],
24+
data: () => ({
25+
optionSelected: null,
26+
bus: new Vue(),
27+
}),
28+
methods: {
29+
saveInput() {
30+
this.$emit('saveInput', 'slideOne', this.optionSelected, 0);
31+
},
32+
select(...args) {
33+
const [val] = args;
34+
this.optionSelected = val;
35+
this.bus.$emit('deselectIfNot', val);
36+
},
37+
deselect() {
38+
this.optionSelected = '';
39+
},
40+
},
41+
};
42+
</script>

‎frontend/src/components/app/onboarding/SlideThree.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<section class="onboarding-sub-container">
4+
<h1>{{slide.current}} / {{slide.count}}</h1>
5+
<h1 class="onboarding-sub-container-content-heading leading-none">I like</h1>
6+
<div class="h-64 pb-4 my-8 border-b-2 max-w-xs border-purple-matcha flex flex-col items-center w-full overflow-scroll">
7+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
8+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
9+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
10+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
11+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
12+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
13+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
14+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
15+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
16+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
17+
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
18+
</div>
19+
<button v-bind:disabled="!optionSelected.length" v-bind:class="{'onboarding-sub-container-content-button-outline-light': true, 'mt-0': true, 'opacity-25': !optionSelected.length, 'cursor-default': !optionSelected.length}" v-on:click="saveInput()">{{slide.buttonText}}</button>
20+
</section>
21+
</template>
22+
23+
<script>
24+
import Vue from 'vue';
25+
import SelectionButton from '@/components/app/onboarding/SelectionButton.vue';
26+
27+
export default {
28+
components: {
29+
SelectionButton,
30+
},
31+
props: ['slide'],
32+
data: () => ({
33+
optionSelected: [],
34+
bus: new Vue(),
35+
}),
36+
methods: {
37+
saveInput() {
38+
this.$emit('saveInput', 'slideThree', this.optionSelected, 0);
39+
},
40+
select(...args) {
41+
const [val] = args;
42+
this.optionSelected.push(val);
43+
},
44+
deselect(val) {
45+
this.optionSelected = this.optionSelected.filter((e) => e !== val);
46+
},
47+
},
48+
};
49+
</script>

0 commit comments

Comments
 (0)