puniko/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: welcome.timeline.vue to composition api

Browse source
This commit is contained in:
Norm 2022-07-29 16:17:09 -04:00 committed by Gitea
parent 9e8b59f886
commit 9fc3fcaf18
1 changed files with 16 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
packages/client/src/pages/welcome.timeline.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="civpbkhh">
<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
<div v-for="note in notes" class="note">
<div ref="scroll" class="scrollbox" :class="{ scroll: isScrolling }">
<div v-for="note in notes" :key="note.id" class="note">
<div class="content _panel">
<div class="body">
<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
@ -12,7 +12,7 @@
<XMediaList :media-list="note.files"/>
</div>
<div v-if="note.poll">
<XPoll :note="note" :readOnly="true"/>
<XPoll :note="note" :read-only="true"/>
</div>
</div>
<XReactionsViewer ref="reactionsViewer" :note="note"/>
@ -21,37 +21,26 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { onUpdated, ref, Ref } from 'vue';
import { Note } from 'misskey-js/built/entities';
import XReactionsViewer from '@/components/reactions-viewer.vue';
import XMediaList from '@/components/media-list.vue';
import XPoll from '@/components/poll.vue';
import * as os from '@/os';
import { $i } from '@/account';
export default defineComponent({
components: {
XReactionsViewer,
XMediaList,
XPoll
},
const notes: Ref<Note[]> = ref([]);
const isScrolling = ref(false);
const scroll: Ref<HTMLElement | null> = ref(null);
data() {
return {
notes: [],
isScrolling: false,
};
},
os.api('notes/featured').then(newNotes => {
notes.value = newNotes;
});
created() {
os.api('notes/featured').then(notes => {
this.notes = notes;
});
},
updated() {
if (this.$refs.scroll.clientHeight > window.innerHeight) {
this.isScrolling = true;
}
onUpdated(() => {
if (scroll.value && scroll.value.clientHeight > window.innerHeight) {
isScrolling.value = true;
}
});
</script>