chore(client): tweak deck ui
This commit is contained in:
syuilo
parent
2dae56fc8f
commit
0331f3c61b
7 changed files with 62 additions and 41 deletions
|
|
@ -1755,6 +1755,7 @@ _deck:
|
|||
alwaysShowMainColumn: "常にメインカラムを表示"
|
||||
columnAlign: "カラムの寄せ"
|
||||
addColumn: "カラムを追加"
|
||||
configureColumn: "カラムの設定"
|
||||
swapLeft: "左に移動"
|
||||
swapRight: "右に移動"
|
||||
swapUp: "上に移動"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :func="{ handler: setAntenna, title: $ts.selectAntenna }" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<template #header>
|
||||
<i class="fas fa-satellite"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
|
@ -11,9 +11,9 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import XColumn from './column.vue';
|
||||
import { updateColumn, Column } from './deck-store';
|
||||
import XTimeline from '@/components/timeline.vue';
|
||||
import * as os from '@/os';
|
||||
import { updateColumn, Column } from './deck-store';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -39,15 +39,22 @@ async function setAntenna() {
|
|||
const { canceled, result: antenna } = await os.select({
|
||||
title: i18n.ts.selectAntenna,
|
||||
items: antennas.map(x => ({
|
||||
value: x, text: x.name
|
||||
value: x, text: x.name,
|
||||
})),
|
||||
default: props.column.antennaId
|
||||
default: props.column.antennaId,
|
||||
});
|
||||
if (canceled) return;
|
||||
updateColumn(props.column.id, {
|
||||
antennaId: antenna.id
|
||||
antennaId: antenna.id,
|
||||
});
|
||||
}
|
||||
|
||||
const menu = [{
|
||||
icon: 'fas fa-pencil-alt',
|
||||
text: i18n.ts.selectAntenna,
|
||||
action: setAntenna,
|
||||
}];
|
||||
|
||||
/*
|
||||
function focus() {
|
||||
timeline.focus();
|
||||
|
|
|
|||
|
|
@ -31,18 +31,12 @@
|
|||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export type DeckFunc = {
|
||||
title: string;
|
||||
handler: (payload: MouseEvent) => void;
|
||||
icon?: string;
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { onBeforeUnmount, onMounted, provide, watch } from 'vue';
|
||||
import { onBeforeUnmount, onMounted, provide, Ref, watch } from 'vue';
|
||||
import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column , deckStore } from './deck-store';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { MenuItem } from '@/types/menu';
|
||||
|
||||
provide('shouldHeaderThin', true);
|
||||
provide('shouldOmitHeaderTitle', true);
|
||||
|
|
@ -51,12 +45,11 @@ provide('shouldSpacerMin', true);
|
|||
const props = withDefaults(defineProps<{
|
||||
column: Column;
|
||||
isStacked?: boolean;
|
||||
func?: DeckFunc | null;
|
||||
naked?: boolean;
|
||||
indicated?: boolean;
|
||||
menu?: MenuItem[];
|
||||
}>(), {
|
||||
isStacked: false,
|
||||
func: null,
|
||||
naked: false,
|
||||
indicated: false,
|
||||
});
|
||||
|
|
@ -111,9 +104,9 @@ function toggleActive() {
|
|||
}
|
||||
|
||||
function getMenu() {
|
||||
const items = [{
|
||||
icon: 'fas fa-pencil-alt',
|
||||
text: i18n.ts.edit,
|
||||
let items = [{
|
||||
icon: 'fas fa-cog',
|
||||
text: i18n.ts._deck.configureColumn,
|
||||
action: async () => {
|
||||
const { canceled, result } = await os.form(props.column.name, {
|
||||
name: {
|
||||
|
|
@ -180,13 +173,9 @@ function getMenu() {
|
|||
},
|
||||
}];
|
||||
|
||||
if (props.func) {
|
||||
if (props.menu) {
|
||||
items.unshift(null);
|
||||
items.unshift({
|
||||
icon: props.func.icon,
|
||||
text: props.func.title,
|
||||
action: props.func.handler,
|
||||
});
|
||||
items = props.menu.concat(items);
|
||||
}
|
||||
|
||||
return items;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :func="{ handler: setList, title: $ts.selectList }" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<template #header>
|
||||
<i class="fas fa-list-ul"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
|
@ -11,9 +11,9 @@
|
|||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import XColumn from './column.vue';
|
||||
import { updateColumn, Column } from './deck-store';
|
||||
import XTimeline from '@/components/timeline.vue';
|
||||
import * as os from '@/os';
|
||||
import { updateColumn, Column } from './deck-store';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -37,16 +37,22 @@ async function setList() {
|
|||
const { canceled, result: list } = await os.select({
|
||||
title: i18n.ts.selectList,
|
||||
items: lists.map(x => ({
|
||||
value: x, text: x.name
|
||||
value: x, text: x.name,
|
||||
})),
|
||||
default: props.column.listId
|
||||
default: props.column.listId,
|
||||
});
|
||||
if (canceled) return;
|
||||
updateColumn(props.column.id, {
|
||||
listId: list.id
|
||||
listId: list.id,
|
||||
});
|
||||
}
|
||||
|
||||
const menu = [{
|
||||
icon: 'fas fa-pencil-alt',
|
||||
text: i18n.ts.selectList,
|
||||
action: setList,
|
||||
}];
|
||||
|
||||
/*
|
||||
function focus() {
|
||||
timeline.focus();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :column="column" :is-stacked="isStacked" :func="{ handler: func, title: $ts.notificationSetting }" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<template #header><i class="fas fa-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
|
||||
|
||||
<XNotifications :include-types="column.includingTypes"/>
|
||||
|
|
@ -9,10 +9,10 @@
|
|||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import XColumn from './column.vue';
|
||||
import { updateColumn , Column } from './deck-store';
|
||||
import XNotifications from '@/components/notifications.vue';
|
||||
import * as os from '@/os';
|
||||
import { updateColumn } from './deck-store';
|
||||
import { Column } from './deck-store';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
const props = defineProps<{
|
||||
column: Column;
|
||||
|
|
@ -30,9 +30,15 @@ function func() {
|
|||
done: async (res) => {
|
||||
const { includingTypes } = res;
|
||||
updateColumn(props.column.id, {
|
||||
includingTypes: includingTypes
|
||||
includingTypes: includingTypes,
|
||||
});
|
||||
},
|
||||
}, 'closed');
|
||||
}
|
||||
|
||||
const menu = [{
|
||||
icon: 'fas fa-pencil-alt',
|
||||
text: i18n.ts.notificationSetting,
|
||||
action: func,
|
||||
}];
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :func="{ handler: setType, title: $ts.timeline }" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<template #header>
|
||||
<i v-if="column.tl === 'home'" class="fas fa-home"></i>
|
||||
<i v-else-if="column.tl === 'local'" class="fas fa-comments"></i>
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import XColumn from './column.vue';
|
||||
import { removeColumn, updateColumn, Column } from './deck-store';
|
||||
import XTimeline from '@/components/timeline.vue';
|
||||
import * as os from '@/os';
|
||||
import { removeColumn, updateColumn, Column } from './deck-store';
|
||||
import { $i } from '@/account';
|
||||
import { instance } from '@/instance';
|
||||
import { i18n } from '@/i18n';
|
||||
|
|
@ -57,13 +57,13 @@ async function setType() {
|
|||
const { canceled, result: src } = await os.select({
|
||||
title: i18n.ts.timeline,
|
||||
items: [{
|
||||
value: 'home' as const, text: i18n.ts._timelines.home
|
||||
value: 'home' as const, text: i18n.ts._timelines.home,
|
||||
}, {
|
||||
value: 'local' as const, text: i18n.ts._timelines.local
|
||||
value: 'local' as const, text: i18n.ts._timelines.local,
|
||||
}, {
|
||||
value: 'social' as const, text: i18n.ts._timelines.social
|
||||
value: 'social' as const, text: i18n.ts._timelines.social,
|
||||
}, {
|
||||
value: 'global' as const, text: i18n.ts._timelines.global
|
||||
value: 'global' as const, text: i18n.ts._timelines.global,
|
||||
}],
|
||||
});
|
||||
if (canceled) {
|
||||
|
|
@ -73,7 +73,7 @@ async function setType() {
|
|||
return;
|
||||
}
|
||||
updateColumn(props.column.id, {
|
||||
tl: src
|
||||
tl: src,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -97,6 +97,12 @@ function onChangeActiveState(state) {
|
|||
}
|
||||
}
|
||||
|
||||
const menu = [{
|
||||
icon: 'fas fa-pencil-alt',
|
||||
text: i18n.ts.timeline,
|
||||
action: setType,
|
||||
}];
|
||||
|
||||
/*
|
||||
export default defineComponent({
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :func="{ handler: func, title: $ts.editWidgets }" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
|
||||
<template #header><i class="fas fa-window-maximize" style="margin-right: 8px;"></i>{{ column.name }}</template>
|
||||
|
||||
<div class="wtdtxvec">
|
||||
|
|
@ -46,6 +46,12 @@ function updateWidgets(widgets) {
|
|||
function func() {
|
||||
edit = !edit;
|
||||
}
|
||||
|
||||
const menu = [{
|
||||
icon: 'fas fa-pencil-alt',
|
||||
text: i18n.ts.editWidgets,
|
||||
action: func,
|
||||
}];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue