noteコンポーネントを二つに分けたり

This commit is contained in:
syuilo 2021-01-01 22:41:20 +09:00
parent b7a79d25b0
commit 393ac6c203
5 changed files with 1199 additions and 42 deletions

File diff suppressed because it is too large Load Diff

View File

@ -8,7 +8,6 @@
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
>
<XSub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
<div class="info" v-if="pinned"><Fa :icon="faThumbtack"/> {{ $ts.pinnedNote }}</div>
<div class="info" v-if="appearNote._prId_"><Fa :icon="faBullhorn"/> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <Fa :icon="faTimes"/></button></div>
@ -57,7 +56,7 @@
<XMediaList :media-list="appearNote.files"/>
</div>
<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="false" class="url-preview"/>
<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
<button v-if="collapsed" class="fade _button" @click="collapsed = false">
<span>{{ $ts.showMore }}</span>
@ -90,7 +89,6 @@
</footer>
</div>
</article>
<XSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
</div>
<div v-else class="_panel muted" @click="muted = false">
<I18n :src="$ts.userSaysSomething" tag="small">
@ -157,11 +155,6 @@ export default defineComponent({
type: Object,
required: true
},
detail: {
type: Boolean,
required: false,
default: false
},
pinned: {
type: Boolean,
required: false,
@ -174,7 +167,6 @@ export default defineComponent({
data() {
return {
connection: null,
conversation: [],
replies: [],
showContent: false,
collapsed: false,
@ -277,7 +269,7 @@ export default defineComponent({
this.connection = os.stream;
}
this.collapsed = !this.detail && this.appearNote.cw == null && this.appearNote.text && (
this.collapsed = this.appearNote.cw == null && this.appearNote.text && (
(this.appearNote.text.split('\n').length > 9) ||
(this.appearNote.text.length > 500)
);
@ -291,23 +283,6 @@ export default defineComponent({
}
this.$emit('update:note', Object.freeze(result));
}
if (this.detail) {
os.api('notes/children', {
noteId: this.appearNote.id,
limit: 30
}).then(replies => {
this.replies = replies;
});
if (this.appearNote.replyId) {
os.api('notes/conversation', {
noteId: this.appearNote.replyId
}).then(conversation => {
this.conversation = conversation.reverse();
});
}
}
},
mounted() {
@ -951,10 +926,6 @@ export default defineComponent({
padding-bottom: 0;
}
> .reply-to-more {
opacity: 0.7;
}
> .renote {
display: flex;
align-items: center;

View File

@ -15,7 +15,7 @@
</div>
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
<XNote :note="note" @update:note="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
<XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
</XList>
<div v-show="more && !reversed" style="margin-top: var(--margin);">
@ -55,12 +55,6 @@ export default defineComponent({
required: true
},
detail: {
type: Boolean,
required: false,
default: false
},
prop: {
type: String,
required: false

View File

@ -243,7 +243,7 @@ export default defineComponent({
display: block;
font-size: 14px;
box-shadow: 0 0 0 1px var(--divider);
border-radius: 6px;
border-radius: 8px;
overflow: hidden;
&:hover {

View File

@ -2,14 +2,14 @@
<div class="fcuexfpr">
<div v-if="note" class="note">
<div class="_section" v-if="showNext">
<XNotes class="_content" :pagination="next"/>
<XNotes class="_content _noGap_" :pagination="next"/>
</div>
<div class="_section main">
<MkButton v-if="!showNext && hasNext" class="load next _content" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
<div class="_content _vMargin">
<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_vMargin"/>
<XNote v-model:note="note" :key="note.id" :detail="true" class="_vMargin"/>
<XNoteDetailed v-model:note="note" :key="note.id" class="_vMargin"/>
</div>
<div class="_content clips _vMargin" v-if="clips && clips.length > 0">
<div class="title">{{ $ts.clip }}</div>
@ -25,7 +25,7 @@
</div>
<div class="_section" v-if="showPrev">
<XNotes class="_content" :pagination="prev"/>
<XNotes class="_content _noGap_" :pagination="prev"/>
</div>
</div>
@ -39,6 +39,7 @@
import { computed, defineComponent } from 'vue';
import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
import XNote from '@/components/note.vue';
import XNoteDetailed from '@/components/note-detailed.vue';
import XNotes from '@/components/notes.vue';
import MkRemoteCaution from '@/components/remote-caution.vue';
import MkButton from '@/components/ui/button.vue';
@ -47,6 +48,7 @@ import * as os from '@/os';
export default defineComponent({
components: {
XNote,
XNoteDetailed,
XNotes,
MkRemoteCaution,
MkButton,