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