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-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }" 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"/> <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="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> <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"/> <XMediaList :media-list="appearNote.files"/>
</div> </div>
<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/> <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> <div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
<button v-if="collapsed" class="fade _button" @click="collapsed = false"> <button v-if="collapsed" class="fade _button" @click="collapsed = false">
<span>{{ $ts.showMore }}</span> <span>{{ $ts.showMore }}</span>
@ -90,7 +89,6 @@
</footer> </footer>
</div> </div>
</article> </article>
<XSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
</div> </div>
<div v-else class="_panel muted" @click="muted = false"> <div v-else class="_panel muted" @click="muted = false">
<I18n :src="$ts.userSaysSomething" tag="small"> <I18n :src="$ts.userSaysSomething" tag="small">
@ -157,11 +155,6 @@ export default defineComponent({
type: Object, type: Object,
required: true required: true
}, },
detail: {
type: Boolean,
required: false,
default: false
},
pinned: { pinned: {
type: Boolean, type: Boolean,
required: false, required: false,
@ -174,7 +167,6 @@ export default defineComponent({
data() { data() {
return { return {
connection: null, connection: null,
conversation: [],
replies: [], replies: [],
showContent: false, showContent: false,
collapsed: false, collapsed: false,
@ -277,7 +269,7 @@ export default defineComponent({
this.connection = os.stream; 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.split('\n').length > 9) ||
(this.appearNote.text.length > 500) (this.appearNote.text.length > 500)
); );
@ -291,23 +283,6 @@ export default defineComponent({
} }
this.$emit('update:note', Object.freeze(result)); 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() { mounted() {
@ -951,10 +926,6 @@ export default defineComponent({
padding-bottom: 0; padding-bottom: 0;
} }
> .reply-to-more {
opacity: 0.7;
}
> .renote { > .renote {
display: flex; display: flex;
align-items: center; align-items: center;

View file

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

View file

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

View file

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