Skip to content

Commit aaae9bc

Browse files
ayushnagar123ayushnagar123
authored
Merge pull request #30 from 21tcoelho/master
Canvas implementation
2 parents cee5998 + 1059b3e commit aaae9bc

4 files changed

Lines changed: 154 additions & 45 deletions

File tree

‎src/components/newBadge/Buttons.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div>
3+
<v-layout justify-center row>
4+
<v-btn-group class = "buttongroup">
5+
<v-btn class = "button">
6+
<i class="fas fa-mouse-pointer"></i>
7+
</v-btn>
8+
<v-btn class = "button">
9+
<i class="fas fa-pen"></i>
10+
</v-btn>
11+
<v-btn class = "button">
12+
<i class="fas fa-eraser"></i>
13+
</v-btn>
14+
<v-btn class = "button">
15+
<i class="fas fa-square"></i>
16+
</v-btn>
17+
<v-btn class = "button">
18+
<i class="fas fa-circle"></i>
19+
</v-btn>
20+
<v-btn class = "button">
21+
<i class="fas fa-magic"></i>
22+
</v-btn>
23+
<v-btn>T</v-btn>
24+
</v-btn-group>
25+
</v-layout>
26+
</div>
27+
</template>
28+
29+
<style>
30+
.button {
31+
padding: 0px, 5px;
32+
}
33+
</style>

‎src/router.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Vue from 'vue';
22
import Router from 'vue-router';
33
import AuthView from './views/AuthView';
44
import HomeView from './views/HomeView';
5+
import NewBadge from './views/NewBadge';
56
import OrgView from './views/OrgView';
67
import Upload from "./views/Upload.vue";
78
import AuthService from './services/authService';
@@ -33,6 +34,14 @@ export default new Router({
3334
next(authService.isLoggedIn());
3435
}
3536
},
37+
{
38+
path:'/newBadge',
39+
name: 'newBadge',
40+
component: NewBadge,
41+
beforeEnter: (to, from, next) => {
42+
next(authService.isLoggedIn());
43+
}
44+
},
3645
{
3746
path: '/org/:name',
3847
name: 'orgView',
@@ -42,4 +51,4 @@ export default new Router({
4251
}
4352
}
4453
]
45-
});
54+
});

‎src/views/HomeView.vue‎

Lines changed: 57 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,57 @@
1-
<template>
2-
<div>
3-
<v-layout class="ma-5" justify-center>
4-
<div v-if="!isLoading">
5-
<UserDetails/>
6-
<div class="mt-5 orgs">Organizations</div>
7-
<OrgList/>
8-
</div>
9-
<div v-if="isLoading">
10-
<img src="@/assets/loaders/block.svg" alt="loading...">
11-
</div>
12-
</v-layout>
13-
</div>
14-
</template>
15-
16-
<script>
17-
import UserDetails from '../components/home/UserDetails';
18-
import OrgList from '../components/home/OrgList';
19-
20-
export default {
21-
name: 'HomeView',
22-
computed: {
23-
isLoading() {
24-
return this.$store.state.user == '' && this.$store.state.userOrgs == ''
25-
? true
26-
: false;
27-
}
28-
},
29-
components: {
30-
UserDetails,
31-
OrgList
32-
},
33-
created() {
34-
this.$store.dispatch('loadUser');
35-
this.$store.dispatch('loadUserOrgs');
36-
}
37-
};
38-
</script>
39-
40-
<style lang="scss" scoped>
41-
.orgs {
42-
font-size: 20px;
43-
}
44-
</style>
1+
<template>
2+
<div>
3+
<v-layout class="ma-5" justify-center>
4+
<div v-if="!isLoading">
5+
<v-btn style="margin-bottom: 30px;">
6+
<a href="#/newbadge">Create a New Badge</a>
7+
</v-btn>
8+
<UserDetails/>
9+
<div class="mt-5 orgs">
10+
<center>Organizations</center></div>
11+
<OrgList/>
12+
</div>
13+
<div v-if="isLoading">
14+
<img src="@/assets/loaders/block.svg" alt="loading...">
15+
</div>
16+
</v-layout>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import UserDetails from '../components/home/UserDetails';
22+
import OrgList from '../components/home/OrgList';
23+
24+
export default {
25+
name: 'HomeView',
26+
computed: {
27+
isLoading() {
28+
return this.$store.state.user == '' && this.$store.state.userOrgs == ''
29+
? true
30+
: false;
31+
}
32+
},
33+
components: {
34+
UserDetails,
35+
OrgList
36+
},
37+
created() {
38+
this.$store.dispatch('loadUser');
39+
this.$store.dispatch('loadUserOrgs');
40+
}
41+
};
42+
</script>
43+
44+
<style lang="scss" scoped>
45+
.orgs {
46+
font-size: 20px;
47+
}
48+
49+
A {
50+
color: inherit !important;
51+
text-decoration: none !important;
52+
font-size: inherit !important;
53+
font-family: inherit !important;
54+
font-weight: inherit !important;
55+
line-height: inherit !important;
56+
}
57+
</style>

‎src/views/NewBadge.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<body style ="background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20190331/pngtree-vector-white-abstract-background-design-templates-collection-wit-image_94438.jpg'); background-repeat: repeat;">
3+
<div class = "mt-5 orgs">
4+
<h1 style ="font-family: georgia; font-size: 45px;">
5+
<center>
6+
<b>Create a New Badge!</b>
7+
</center>
8+
</h1>
9+
<h2 style ="margin-bottom: 30px; font-family: georgia; font-size: 25px;">
10+
<center>
11+
<b>Design your own badge for your organization.</b>
12+
</center>
13+
</h2>
14+
<Buttons/>
15+
<v-layout style="margin: 10px;" justify-center="">
16+
<canvas id = "canvas" width="900" height="600">
17+
</canvas>
18+
</v-layout>
19+
</div>
20+
</body>
21+
</template>
22+
23+
<script>
24+
import Buttons from '../components/newBadge/Buttons';
25+
26+
export default {
27+
name: 'NewBadge',
28+
components: {
29+
Buttons
30+
}
31+
}
32+
33+
function draw() {
34+
var canvas = document.getElementById('canvas');
35+
if (canvas.getContext) {
36+
var ctx = newCanvas.getContext('2d');
37+
}
38+
}
39+
</script>
40+
41+
<style>
42+
canvas {
43+
background-color: white;
44+
margin: auto;
45+
display: block;
46+
border: 2px solid gray;
47+
border-radius: 2px;
48+
}
49+
50+
.title {
51+
padding: 20px;
52+
font-size: 80px;
53+
}
54+
</style>

0 commit comments

Comments
 (0)