デッキのカラムからリロードできる機能を追加 (#12274)

* デッキのカラムからリロードできる機能を追加

* tweak

---------

Co-authored-by: osamu <46447427+sam-osamu@users.noreply.github.com>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
おさむのひと 2023-11-10 17:49:09 +09:00 committed by GitHub
parent 54870d067b
commit 253c0c42e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 55 additions and 11 deletions

View file

@ -96,6 +96,10 @@ onUnmounted(() => {
onDeactivated(() => { onDeactivated(() => {
if (connection) connection.dispose(); if (connection) connection.dispose();
}); });
defineExpose({
reload,
});
</script> </script>
<style lang="scss" module> <style lang="scss" module>

View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<XColumn :menu="menu" :column="column" :isStacked="isStacked"> <XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
<template #header> <template #header>
<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span> <i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template> </template>

View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<XColumn :menu="menu" :column="column" :isStacked="isStacked"> <XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
<template #header> <template #header>
<i class="ti ti-device-tv"></i><span style="margin-left: 8px;">{{ column.name }}</span> <i class="ti ti-device-tv"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template> </template>

View file

@ -57,6 +57,7 @@ const props = withDefaults(defineProps<{
isStacked?: boolean; isStacked?: boolean;
naked?: boolean; naked?: boolean;
menu?: MenuItem[]; menu?: MenuItem[];
refresher?: () => Promise<void>;
}>(), { }>(), {
isStacked: false, isStacked: false,
naked: false, naked: false,
@ -183,6 +184,18 @@ function getMenu() {
items = props.menu.concat(items); items = props.menu.concat(items);
} }
if (props.refresher) {
items = [{
icon: 'ti ti-refresh',
text: i18n.ts.reload,
action: () => {
if (props.refresher) {
props.refresher();
}
},
}, ...items];
}
return items; return items;
} }

View file

@ -4,10 +4,10 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<XColumn :column="column" :isStacked="isStacked"> <XColumn :column="column" :isStacked="isStacked" :refresher="() => reloadTimeline()">
<template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name }}</template> <template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name }}</template>
<MkNotes :pagination="pagination"/> <MkNotes ref="tlComponent" :pagination="pagination"/>
</XColumn> </XColumn>
</template> </template>
@ -16,6 +16,7 @@ import { } from 'vue';
import XColumn from './column.vue'; import XColumn from './column.vue';
import { Column } from './deck-store.js'; import { Column } from './deck-store.js';
import MkNotes from '@/components/MkNotes.vue'; import MkNotes from '@/components/MkNotes.vue';
import { reloadStream } from '@/stream.js';
defineProps<{ defineProps<{
column: Column; column: Column;
@ -29,4 +30,15 @@ const pagination = {
visibility: 'specified', visibility: 'specified',
}, },
}; };
const tlComponent: InstanceType<typeof MkNotes> = $ref();
function reloadTimeline() {
return new Promise<void>((res) => {
tlComponent.pagingComponent?.reload().then(() => {
reloadStream();
res();
});
});
}
</script> </script>

View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<XColumn :menu="menu" :column="column" :isStacked="isStacked"> <XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
<template #header> <template #header>
<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span> <i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template> </template>

View file

@ -4,10 +4,10 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<XColumn :column="column" :isStacked="isStacked"> <XColumn :column="column" :isStacked="isStacked" :refresher="() => reloadTimeline()">
<template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name }}</template> <template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
<MkNotes :pagination="pagination"/> <MkNotes ref="tlComponent" :pagination="pagination"/>
</XColumn> </XColumn>
</template> </template>
@ -16,12 +16,24 @@ import { } from 'vue';
import XColumn from './column.vue'; import XColumn from './column.vue';
import { Column } from './deck-store.js'; import { Column } from './deck-store.js';
import MkNotes from '@/components/MkNotes.vue'; import MkNotes from '@/components/MkNotes.vue';
import { reloadStream } from '@/stream.js';
defineProps<{ defineProps<{
column: Column; column: Column;
isStacked: boolean; isStacked: boolean;
}>(); }>();
const tlComponent: InstanceType<typeof MkNotes> = $ref();
function reloadTimeline() {
return new Promise<void>((res) => {
tlComponent.pagingComponent?.reload().then(() => {
reloadStream();
res();
});
});
}
const pagination = { const pagination = {
endpoint: 'notes/mentions' as const, endpoint: 'notes/mentions' as const,
limit: 10, limit: 10,

View file

@ -4,10 +4,10 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<XColumn :column="column" :isStacked="isStacked" :menu="menu"> <XColumn :column="column" :isStacked="isStacked" :menu="menu" :refresher="() => notificationsComponent.reload()">
<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template> <template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
<XNotifications :excludeTypes="props.column.excludeTypes"/> <XNotifications ref="notificationsComponent" :excludeTypes="props.column.excludeTypes"/>
</XColumn> </XColumn>
</template> </template>
@ -24,6 +24,8 @@ const props = defineProps<{
isStacked: boolean; isStacked: boolean;
}>(); }>();
let notificationsComponent = $shallowRef<InstanceType<typeof XNotifications>>();
function func() { function func() {
os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), { os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {
excludeTypes: props.column.excludeTypes, excludeTypes: props.column.excludeTypes,

View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<XColumn :menu="menu" :column="column" :isStacked="isStacked"> <XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
<template #header> <template #header>
<i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name }}</span> <i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template> </template>

View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<XColumn :menu="menu" :column="column" :isStacked="isStacked"> <XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
<template #header> <template #header>
<i v-if="column.tl === 'home'" class="ti ti-home"></i> <i v-if="column.tl === 'home'" class="ti ti-home"></i>
<i v-else-if="column.tl === 'local'" class="ti ti-planet"></i> <i v-else-if="column.tl === 'local'" class="ti ti-planet"></i>
@ -48,6 +48,7 @@ const props = defineProps<{
}>(); }>();
let disabled = $ref(false); let disabled = $ref(false);
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable)); const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable));
const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable)); const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable));