limit depth of reply posts (#7979)

* limit depth of reply posts

* some tweaks

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
Johann150 2021-11-18 14:11:44 +01:00 committed by GitHub
parent 037db7c5ef
commit 12fad68f58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 11 deletions

View File

@ -806,6 +806,7 @@ muteThread: "スレッドをミュート"
unmuteThread: "スレッドのミュートを解除"
ffVisibility: "つながりの公開範囲"
ffVisibilityDescription: "自分のフォロー/フォロワー情報の公開範囲を設定できます。"
continueThread: "さらにスレッドを見る"
deleteAccountConfirm: "アカウントが削除されます。よろしいですか?"
_emailUnavailable:

View File

@ -1,5 +1,5 @@
<template>
<div class="wrpstxzv" :class="{ children }" v-size="{ max: [450] }">
<div class="wrpstxzv" :class="{ children: depth > 1 }" v-size="{ max: [450] }">
<div class="main">
<MkAvatar class="avatar" :user="note.user"/>
<div class="body">
@ -15,12 +15,18 @@
</div>
</div>
</div>
<XSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :children="true"/>
<template v-if="depth < 5">
<XSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :depth="depth + 1"/>
</template>
<div v-else class="more">
<MkA class="text _link" :to="notePage(note)">{{ $ts.continueThread }} <i class="fas fa-angle-double-right"></i></MkA>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import notePage from '@/filters/note';
import XNoteHeader from './note-header.vue';
import XSubNoteContent from './sub-note-content.vue';
import XCwButton from './cw-button.vue';
@ -45,16 +51,12 @@ export default defineComponent({
required: false,
default: false
},
children: {
type: Boolean,
// how many notes are in between this one and the note being viewed in detail
depth: {
type: Number,
required: false,
default: false
default: 1
},
// TODO
truncate: {
type: Boolean,
default: true
}
},
data() {
@ -74,6 +76,10 @@ export default defineComponent({
});
}
},
methods: {
notePage,
}
});
</script>
@ -138,9 +144,13 @@ export default defineComponent({
}
}
> .reply {
> .reply, > .more {
border-left: solid 0.5px var(--divider);
margin-top: 10px;
}
> .more {
padding: 10px 0 0 16px;
}
}
</style>