chore(client): tweak deck ui

This commit is contained in:
syuilo 2022-07-17 05:33:21 +09:00
parent 2dae56fc8f
commit 0331f3c61b
7 changed files with 62 additions and 41 deletions

View file

@ -1755,6 +1755,7 @@ _deck:
alwaysShowMainColumn: "常にメインカラムを表示"
columnAlign: "カラムの寄せ"
addColumn: "カラムを追加"
configureColumn: "カラムの設定"
swapLeft: "左に移動"
swapRight: "右に移動"
swapUp: "上に移動"

View file

@ -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();

View file

@ -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;

View file

@ -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();

View file

@ -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>

View file

@ -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: {

View file

@ -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>