feat: channel column in deck view

This commit is contained in:
naskya 2023-06-08 13:29:19 +00:00
parent bf78733da4
commit f4bf5cc447
No known key found for this signature in database
GPG Key ID: 164DFF24E2D40139
5 changed files with 86 additions and 1 deletions

View File

@ -147,6 +147,7 @@ unsuspendConfirm: "Are you sure that you want to unsuspend this account?"
selectList: "Select a list" selectList: "Select a list"
selectAntenna: "Select an antenna" selectAntenna: "Select an antenna"
selectWidget: "Select a widget" selectWidget: "Select a widget"
selectChannel: "Select a channel"
editWidgets: "Edit widgets" editWidgets: "Edit widgets"
editWidgetsExit: "Done" editWidgetsExit: "Done"
customEmojis: "Custom Emoji" customEmojis: "Custom Emoji"
@ -2027,8 +2028,9 @@ _deck:
widgets: "Widgets" widgets: "Widgets"
notifications: "Notifications" notifications: "Notifications"
tl: "Timeline" tl: "Timeline"
antenna: "Antennas" antenna: "Antenna"
list: "List" list: "List"
channel: "Channel"
mentions: "Mentions" mentions: "Mentions"
direct: "Direct messages" direct: "Direct messages"
_experiments: _experiments:

View File

@ -133,6 +133,7 @@ unsuspendConfirm: "解凍しますか?"
selectList: "リストを選択" selectList: "リストを選択"
selectAntenna: "アンテナを選択" selectAntenna: "アンテナを選択"
selectWidget: "ウィジェットを選択" selectWidget: "ウィジェットを選択"
selectChannel: "チャンネルを選択"
editWidgets: "ウィジェットを編集" editWidgets: "ウィジェットを編集"
editWidgetsExit: "編集を終了" editWidgetsExit: "編集を終了"
customEmojis: "カスタム絵文字" customEmojis: "カスタム絵文字"
@ -1854,6 +1855,7 @@ _deck:
tl: "タイムライン" tl: "タイムライン"
antenna: "アンテナ" antenna: "アンテナ"
list: "リスト" list: "リスト"
channel: "チャンネル"
mentions: "あなた宛て" mentions: "あなた宛て"
direct: "ダイレクト" direct: "ダイレクト"
noteId: 投稿のID noteId: 投稿のID

View File

@ -245,6 +245,7 @@ const addColumn = async (ev) => {
"tl", "tl",
"antenna", "antenna",
"list", "list",
"channel",
"mentions", "mentions",
"direct", "direct",
]; ];

View File

@ -0,0 +1,73 @@
<template>
<XColumn
:menu="menu"
:column="column"
:is-stacked="isStacked"
@parent-focus="($event) => emit('parent-focus', $event)"
>
<template #header>
<i class="ph-television ph-bold ph-lg"></i
><span style="margin-left: 8px">{{ column.name }}</span>
</template>
<XTimeline
v-if="column.channelId"
ref="timeline"
src="channel"
:channel="column.channelId"
@after="() => emit('loaded')"
/>
</XColumn>
</template>
<script lang="ts" setup>
import {} from "vue";
import XColumn from "./column.vue";
import { updateColumn, Column } from "./deck-store";
import XTimeline 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 = $ref<InstanceType<typeof XTimeline>>();
if (props.column.channelId == null) {
setChannel();
}
async function setChannel() {
const channels = await os.api("channels/followed");
const { canceled, result: channel } = await os.select({
title: i18n.ts.selectChannel,
items: channels.map((x) => ({
value: x,
text: x.name,
})),
default: props.column.channelId,
});
if (canceled) return;
updateColumn(props.column.id, {
name: channel.name,
channelId: channel.id,
});
}
const menu = [
{
icon: "ph-pencil ph-bold ph-lg",
text: i18n.ts.selectChannel,
action: setChannel,
},
];
</script>
<style lang="scss" module></style>

View File

@ -49,6 +49,12 @@
:is-stacked="isStacked" :is-stacked="isStacked"
@parent-focus="emit('parent-focus', $event)" @parent-focus="emit('parent-focus', $event)"
/> />
<XChannelColumn
v-else-if="column.type === 'channel'"
:column="column"
:is-stacked="isStacked"
@parent-focus="emit('parent-focus', $event)"
/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -61,6 +67,7 @@ import XNotificationsColumn from "./notifications-column.vue";
import XWidgetsColumn from "./widgets-column.vue"; import XWidgetsColumn from "./widgets-column.vue";
import XMentionsColumn from "./mentions-column.vue"; import XMentionsColumn from "./mentions-column.vue";
import XDirectColumn from "./direct-column.vue"; import XDirectColumn from "./direct-column.vue";
import XChannelColumn from "./channel-column.vue";
import { Column } from "./deck-store"; import { Column } from "./deck-store";
defineProps<{ defineProps<{