Expand user fields on click
This commit is contained in:
parent
37a6f2be7b
commit
70ab970b42
|
@ -55,7 +55,8 @@ const UserProfile = {
|
||||||
followsTab: 'users',
|
followsTab: 'users',
|
||||||
footerRef: null,
|
footerRef: null,
|
||||||
note: null,
|
note: null,
|
||||||
noteLoading: false
|
noteLoading: false,
|
||||||
|
expandedFields: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
@ -195,7 +196,14 @@ const UserProfile = {
|
||||||
debounceSetNote: debounce(function () {
|
debounceSetNote: debounce(function () {
|
||||||
this.$store.dispatch('setNote', { id: this.userId, note: this.note })
|
this.$store.dispatch('setNote', { id: this.userId, note: this.note })
|
||||||
this.noteLoading = false
|
this.noteLoading = false
|
||||||
}, 1500)
|
}, 1500),
|
||||||
|
toggleFieldWrap (index) {
|
||||||
|
if (this.expandedFields[index]) {
|
||||||
|
this.expandedFields[index] = false
|
||||||
|
} else {
|
||||||
|
this.expandedFields[index] = true
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$route.params.id': function (newVal) {
|
'$route.params.id': function (newVal) {
|
||||||
|
|
|
@ -25,6 +25,10 @@
|
||||||
v-for="(field, index) in user.fields_html"
|
v-for="(field, index) in user.fields_html"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="user-profile-field"
|
class="user-profile-field"
|
||||||
|
:class="{
|
||||||
|
'field-expanded': expandedFields[index]
|
||||||
|
}"
|
||||||
|
@click="toggleFieldWrap(index)"
|
||||||
>
|
>
|
||||||
<dt
|
<dt
|
||||||
:title="user.fields_text[index].name"
|
:title="user.fields_text[index].name"
|
||||||
|
@ -274,6 +278,12 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.field-expanded {
|
||||||
|
.user-profile-field-name, .user-profile-field-value {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.user-profile-field-validated {
|
.user-profile-field-validated {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
color: green;
|
color: green;
|
||||||
|
|
Loading…
Reference in New Issue