@@ -152,6 +152,7 @@ const addColumn = async (ev) => {
|
||||
'channel',
|
||||
'mentions',
|
||||
'direct',
|
||||
'roleTimeline',
|
||||
];
|
||||
|
||||
const { canceled, result: column } = await os.select({
|
||||
|
@@ -10,6 +10,7 @@
|
||||
<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
|
||||
<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
|
||||
<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
|
||||
<XRoleTimelineColumn v-else-if="column.type === 'roleTimeline'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -23,6 +24,7 @@ import XNotificationsColumn from './notifications-column.vue';
|
||||
import XWidgetsColumn from './widgets-column.vue';
|
||||
import XMentionsColumn from './mentions-column.vue';
|
||||
import XDirectColumn from './direct-column.vue';
|
||||
import XRoleTimelineColumn from './role-timeline-column.vue';
|
||||
import { Column } from './deck-store';
|
||||
|
||||
defineProps<{
|
||||
|
@@ -22,6 +22,7 @@ export type Column = {
|
||||
antennaId?: string;
|
||||
listId?: string;
|
||||
channelId?: string;
|
||||
roleId?: string;
|
||||
includingTypes?: typeof notificationTypes[number][];
|
||||
tl?: 'home' | 'local' | 'social' | 'global';
|
||||
};
|
||||
|
67
packages/frontend/src/ui/deck/role-timeline-column.vue
Normal file
67
packages/frontend/src/ui/deck/role-timeline-column.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<template #header>
|
||||
<i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
||||
<MkTimeline v-if="column.roleId" ref="timeline" src="role" :role="column.roleId" @after="() => emit('loaded')"/>
|
||||
</XColumn>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import XColumn from './column.vue';
|
||||
import { updateColumn, Column } from './deck-store';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
const props = defineProps<{
|
||||
column: Column;
|
||||
isStacked: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'loaded'): void;
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
|
||||
onMounted(() => {
|
||||
if (props.column.roleId == null) {
|
||||
setRole();
|
||||
}
|
||||
});
|
||||
|
||||
async function setRole() {
|
||||
const roles = await os.api('roles/list');
|
||||
const { canceled, result: role } = await os.select({
|
||||
title: i18n.ts.role,
|
||||
items: roles.map(x => ({
|
||||
value: x, text: x.name,
|
||||
})),
|
||||
default: props.column.roleId,
|
||||
});
|
||||
if (canceled) return;
|
||||
updateColumn(props.column.id, {
|
||||
roleId: role.id,
|
||||
});
|
||||
}
|
||||
|
||||
const menu = [{
|
||||
icon: 'ti ti-pencil',
|
||||
text: i18n.ts.role,
|
||||
action: setRole,
|
||||
}];
|
||||
|
||||
/*
|
||||
function focus() {
|
||||
timeline.focus();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
focus,
|
||||
});
|
||||
*/
|
||||
</script>
|
Reference in New Issue
Block a user