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

View File

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