profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore(client): tweak deck ui

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

1
locales/ja-JP.yml
View file

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

17
packages/client/src/ui/deck/antenna-column.vue
View file

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

27
packages/client/src/ui/deck/column.vue
View file

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

16
packages/client/src/ui/deck/list-column.vue
View file

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

14
packages/client/src/ui/deck/notifications-column.vue
View file

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

20
packages/client/src/ui/deck/tl-column.vue
View file

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

8
packages/client/src/ui/deck/widgets-column.vue
View file

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