Skip to content

Commit b252d37

Browse files
LewisYoulLewisYoul
committed
feature/Add template for user edit page
1 parent e31bc10 commit b252d37

File tree

12 files changed

+279
-77
lines changed

12 files changed

+279
-77
lines changed

‎app/assets/stylesheets/base.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,17 @@ a {
2727
}
2828
}
2929

30-
input[type=text] {
31-
width: 100%;
32-
box-sizing: border-box;
33-
padding: 6px;
34-
border-radius: 2px;
35-
border: 1px solid lightgrey;
36-
margin: 16px 0px;
37-
font-size: 14px;
38-
display: block;
39-
font-weight: 100;
40-
}
30+
// input[type=text] {
31+
// width: 100%;
32+
// box-sizing: border-box;
33+
// padding: 6px;
34+
// border-radius: 2px;
35+
// border: 1px solid lightgrey;
36+
// margin: 16px 0px;
37+
// font-size: 14px;
38+
// display: block;
39+
// font-weight: 100;
40+
// }
4141

4242
#header {
4343
width: 100%;

‎app/assets/stylesheets/edit-avatar.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import './variables.scss';
2+
3+
.edit-avatar {
4+
&--wrapper {
5+
position: relative;
6+
display: inline-block;
7+
margin-right: 8px;
8+
height: 120px;
9+
}
10+
11+
&--edit-button {
12+
position: absolute;
13+
display: block;
14+
bottom: 0px;
15+
right: 0px;
16+
background-color: $color-white;
17+
border: 1px solid $color-primary;
18+
padding: 10px;
19+
width: 16px;
20+
height: 16px;
21+
border-radius: 50%;
22+
23+
&:hover {
24+
cursor: pointer;
25+
background-color: $color-hover;
26+
opacity: 1;
27+
}
28+
}
29+
}

‎app/assets/stylesheets/edit-profile.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.edit-profile {
2+
&--wrapper {
3+
display: flex;
4+
}
5+
6+
&--fields {
7+
margin-left: 8px;
8+
width: 100%;
9+
}
10+
}

‎app/assets/stylesheets/form-field.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@import './variables.scss';
2+
3+
.form-field {
4+
margin-top: 20px;
5+
6+
label {
7+
display: block;
8+
margin-bottom: 8px;
9+
}
10+
11+
input {
12+
width: 100%;
13+
box-sizing: border-box;
14+
padding: 6px;
15+
border-radius: 2px;
16+
border: 1px solid lightgrey;
17+
font-size: 14px;
18+
display: block;
19+
font-weight: 100;
20+
}
21+
22+
textarea {
23+
width: 100%;
24+
box-sizing: border-box;
25+
padding: 6px;
26+
border-radius: 2px;
27+
border: 1px solid lightgrey;
28+
font-size: 14px;
29+
display: block;
30+
font-weight: 100;
31+
}
32+
33+
&--no-margin-top {
34+
@extend .form-field;
35+
36+
margin-top: 0px;
37+
}
38+
}

‎app/assets/stylesheets/pygments.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.highlight,pre.highlight{background:#282c34;color:#abb2bf}.highlight pre{background:#282c34}.highlight .hll{background:#282c34}.highlight .c{color:#5c6370;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#c678dd}.highlight .l{color:#98c379}.highlight .n{color:#E57373}.highlight .o{color:#abb2bf}.highlight .p{color:#abb2bf}.highlight .cm{color:#5c6370;font-style:italic}.highlight .cp{color:#5c6370;font-style:italic}.highlight .c1{color:#5c6370;font-style:italic}.highlight .cs{color:#5c6370;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#c678dd}.highlight .kd{color:#c678dd}.highlight .kn{color:#c678dd}.highlight .kp{color:#c678dd}.highlight .kr{color:#c678dd}.highlight .kt{color:#c678dd}.highlight .ld{color:#98c379}.highlight .m{color:#d19a66}.highlight .s{color:#98c379}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:#63B5F6}.highlight .nl{color:#e5c07b}.highlight .nn{color:#abb2bf}.highlight .nx{color:#63B5F6}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#98c379}.highlight .sc{color:#98c379}.highlight .sd{color:#98c379}.highlight .s2{color:#98c379}.highlight .se{color:#98c379}.highlight .sh{color:#98c379}.highlight .si{color:#98c379}.highlight .sx{color:#98c379}.highlight .sr{color:#56b6c2}.highlight .s1{color:#98c379}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}
1+
// .highlight,pre.highlight{background:#282c34;color:#abb2bf}.highlight pre{background:#282c34}.highlight .hll{background:#282c34}.highlight .c{color:#5c6370;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#c678dd}.highlight .l{color:#98c379}.highlight .n{color:#E57373}.highlight .o{color:#abb2bf}.highlight .p{color:#abb2bf}.highlight .cm{color:#5c6370;font-style:italic}.highlight .cp{color:#5c6370;font-style:italic}.highlight .c1{color:#5c6370;font-style:italic}.highlight .cs{color:#5c6370;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#c678dd}.highlight .kd{color:#c678dd}.highlight .kn{color:#c678dd}.highlight .kp{color:#c678dd}.highlight .kr{color:#c678dd}.highlight .kt{color:#c678dd}.highlight .ld{color:#98c379}.highlight .m{color:#d19a66}.highlight .s{color:#98c379}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:#63B5F6}.highlight .nl{color:#e5c07b}.highlight .nn{color:#abb2bf}.highlight .nx{color:#63B5F6}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#98c379}.highlight .sc{color:#98c379}.highlight .sd{color:#98c379}.highlight .s2{color:#98c379}.highlight .se{color:#98c379}.highlight .sh{color:#98c379}.highlight .si{color:#98c379}.highlight .sx{color:#98c379}.highlight .sr{color:#56b6c2}.highlight .s1{color:#98c379}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}
22

33
// -<%= Pygments.css(style: Pygments.styles[2]) %>
44
// -<%= '.linenodiv { margin: 13px 13px 13px 13px;

‎app/javascript/edit-avatar.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="edit-avatar--wrapper">
3+
<img ref="avatar" src="https://media-exp1.licdn.com/dms/image/C4E03AQG0MUNjxFvBTw/profile-displayphoto-shrink_200_200/0?e=1593648000&v=beta&t=WnnJ_Q6MpQFur5Uev2iqeLAnoX6Rdb1Bv6RoAijK3tA" style="border-radius: 50%;" width="120" height="120">
4+
<div class="edit-avatar--edit-button" @click="selectNewAvatar">
5+
<img src="/icons/edit.svg" width="16">
6+
<input ref="fileInput" type="file" @change="handleFileSelect" style="visibility: hidden" />
7+
</div>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
methods: {
14+
selectNewAvatar() {
15+
this.$refs.fileInput.click()
16+
},
17+
18+
handleFileSelect(event) {
19+
const input = event.target;
20+
21+
if (input.files && input.files[0]) {
22+
const self = this;
23+
const reader = new FileReader();
24+
25+
reader.onload = function(e) {
26+
self.$refs.avatar.setAttribute('src', e.target.result);
27+
}
28+
29+
reader.readAsDataURL(input.files[0]);
30+
}
31+
}
32+
}
33+
}
34+
</script>

‎app/javascript/edit-profile.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div>
3+
<div class="edit-profile--wrapper">
4+
<edit-avatar />
5+
6+
<div class="edit-profile--fields">
7+
<form-field label="Name" type="text" :value="currentUser.name" :margin-top="false" @change="logChange"/>
8+
<form-field label="Description" type="textarea" value="Dummy description" />
9+
<form-field label="Location" type="text" value="location" />
10+
</div>
11+
12+
</div>
13+
14+
<div class="folders--options-wrapper">
15+
<button class="button--cta-blue">SAVE</button>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import EditAvatar from './edit-avatar';
22+
import FormField from './form-field';
23+
24+
export default {
25+
components: { EditAvatar, FormField },
26+
27+
// TODO: Extract this into a class or module that can be reused accross the application
28+
data() {
29+
return {
30+
currentUser: this.$store.state.currentUser
31+
}
32+
},
33+
34+
methods: {
35+
logChange(value) {
36+
console.log(value)
37+
}
38+
}
39+
}
40+
</script>

‎app/javascript/form-field.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div :class="formFieldClass">
3+
<label :for="inputId">{{ label }}</label>
4+
<textarea v-if="isTextarea" :id="inputId" :type="type" v-model="valueDup" @keyup="emitValueChange"/>
5+
<input v-else :id="inputId" :type="type" v-model="valueDup" @keyup="emitValueChange"/>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
props: {
12+
marginTop: { type: Boolean, default: true },
13+
label: { type: String, required: true },
14+
type: { type: String, required: true },
15+
value: { type: String, required: true }
16+
},
17+
18+
data() {
19+
return {
20+
valueDup: this.value
21+
}
22+
},
23+
24+
computed: {
25+
formFieldClass() {
26+
return this.marginTop ? 'form-field' : 'form-field--no-margin-top'
27+
},
28+
29+
inputId() {
30+
return `${this.label.toLowerCase()}-input`
31+
},
32+
33+
isTextarea() {
34+
return this.type === 'textarea';
35+
}
36+
},
37+
38+
methods: {
39+
emitValueChange() {
40+
this.$emit('change', this.valueDup)
41+
}
42+
}
43+
}
44+
</script>

‎app/javascript/new-snippet.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<li v-for="error in errors" :key="error">{{ error }}</li>
77
</ul>
88
<tab name="Write" :selected="true">
9-
<input type="text" placeholder="Snippet description..." v-model="snippetParams.description">
9+
<input type="text" class="new-snippet--description" placeholder="Snippet description..." v-model="snippetParams.description">
1010
<textarea class="new-snippet--body" :value="snippetParams.body" @input="updateBody" placeholder="Snippet body..."></textarea>
1111
</tab>
1212
<tab name="Preview">
@@ -121,6 +121,17 @@ export default {
121121
<style lang="scss">
122122
123123
.new-snippet {
124+
&--description {
125+
width: 100%;
126+
box-sizing: border-box;
127+
padding: 6px;
128+
border-radius: 2px;
129+
border: 1px solid lightgrey;
130+
margin: 16px 0px;
131+
font-size: 14px;
132+
display: block;
133+
font-weight: 100;
134+
}
124135
125136
&--body {
126137
display: flex;

‎app/javascript/packs/snippet_app.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ import ActionIcon from '../action-icon';
6262
import Alert from '../alert';
6363
import BackButton from '../back-button';
6464
import Card from '../card';
65+
import EditAvatar from '../edit-avatar';
66+
import EditProfile from '../edit-profile';
6567
import Folders from '../folders';
6668
import Folder from '../folder';
6769
import FoldersShow from '../folders-show';
@@ -98,6 +100,8 @@ document.addEventListener('DOMContentLoaded', () => {
98100
Alert,
99101
BackButton,
100102
Card,
103+
EditAvatar,
104+
EditProfile,
101105
Folder,
102106
Folders,
103107
FoldersShow,

0 commit comments

Comments
 (0)