Add ui for note editing

This commit is contained in:
Tusooa Zhu 2022-08-20 13:02:27 -04:00 committed by tusooa
parent cb175d3f65
commit 1101305ffb
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
6 changed files with 138 additions and 2 deletions

View File

@ -4,6 +4,7 @@ import ProgressButton from '../progress_button/progress_button.vue'
import FollowButton from '../follow_button/follow_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.vue'
import UserNote from '../user_note/user_note.vue'
import Select from '../select/select.vue'
import UserLink from '../user_link/user_link.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
@ -140,7 +141,8 @@ export default {
FollowButton,
Select,
RichContent,
UserLink
UserLink,
UserNote
},
methods: {
muteUser () {

View File

@ -315,6 +315,10 @@
margin: 0;
}
}
.user-note {
margin: 0 .75em .6em 0;
}
}
.sidebar .edit-profile-button {

View File

@ -268,6 +268,12 @@
>
<RemoteFollow :user="user" />
</div>
<UserNote
v-if="loggedIn && isOtherUser"
:user="user"
:relationship="relationship"
:editing="isEditingNote"
/>
</div>
</div>
<div

View File

@ -0,0 +1,31 @@
const UserNote = {
props: {
user: Object,
relationship: Object
},
data () {
return {
localNote: '',
editing: false
}
},
computed: {
shouldShow () {
return this.relationship.note || this.editing
}
},
methods: {
startEditing () {
this.localNote = this.relationship.note
this.editing = true
},
cancelEditing () {
this.editing = false
},
finalizeEditing () {
this.editing = false
}
}
}
export default UserNote

View File

@ -0,0 +1,88 @@
<template>
<div
class="user-note"
>
<div class="heading">
<span>{{ $t('user_card.note') }}</span>
<div class="buttons">
<button
v-show="!editing"
class="button-default btn"
@click="startEditing"
>
{{ $t('user_card.edit_note') }}
</button>
<button
v-show="editing"
class="button-default btn"
@click="finalizeEditing"
>
{{ $t('user_card.edit_note_apply') }}
</button>
<button
v-show="editing"
class="button-default btn"
@click="cancelEditing"
>
{{ $t('user_card.edit_note_cancel') }}
</button>
</div>
</div>
<input
v-show="editing"
class="note-text"
type="string"
:model="localNote"
>
<span
v-show="!editing"
class="note-text"
:class="{ '-blank': !relationship.note }"
>
{{ relationship.note || $t('user_card.note_blank') }}
</span>
</div>
</template>
<script src="./user_note.js"></script>
<style lang="scss">
@import '../../variables';
.user-note {
display: flex;
flex-direction: column;
.heading {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75em;
.btn {
min-width: 95px;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: right;
.btn {
margin-left: 0.5em;
}
}
}
.note-text {
line-height: 2;
align-self: stretch;
}
.note-text.-blank {
font-style: italic;
color: var(--faint, $fallback--faint);
}
}
</style>

View File

@ -957,7 +957,12 @@
"solid": "Solid bg",
"striped": "Striped bg",
"side": "Side stripe"
}
},
"note": "Note",
"note_blank": "(None)",
"edit_note": "Edit note",
"edit_note_apply": "Apply",
"edit_note_cancel": "Cancel"
},
"user_profile": {
"timeline_title": "User timeline",