Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Storage improve (#6976)

Browse source 
* wip

* wip

* wip

* wip

* wip

* Update storage.ts

* wip

* wip

* wip

* wip

* Update storage.ts

* Update storage.ts

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update storage.ts

* wip

* wip

* wip

* wip

* 🍕

* wip

* wip

* wip

* wip

* wip

* wip

* Update deck-storage.ts

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update store.ts

* wip

* wip

* wip

* wip

* Update init.ts

* wip

* wip

* Update pizzax.ts

* wip

* wip

* Update timeline.vue

* Update init.ts

* wip

* wip

* Update init.ts
This commit is contained in:
syuilo 2020-12-19 10:55:52 +09:00 • committed by GitHub
parent 57d0c19a98
commit 43930e6a84
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
146 changed files with 1458 additions and 1519 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/client/ui/_common_/common.vue
View file

@ -16,8 +16,8 @@
<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
import { stream, popup, popups, uploads, pendingApiRequestsCount } from '@/os';
import { store } from '@/store';
import * as sound from '@/scripts/sound';
import { $i, $i } from '@/account';
export default defineComponent({
components: {
@ -27,7 +27,7 @@ export default defineComponent({
setup() {
const onNotification = notification => {
if (store.state.i.mutingNotificationTypes.includes(notification.type)) return;
if ($i.mutingNotificationTypes.includes(notification.type)) return;
if (document.visibilityState === 'visible') {
stream.send('readNotification', {
@ -42,7 +42,7 @@ export default defineComponent({
sound.play('notification');
};
if (store.getters.isSignedIn) {
if ($i) {
const connection = stream.useSharedConnection('main', 'UI');
connection.on('notification', onNotification);
}

2
src/client/ui/_common_/header.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="fdidabkb" :style="`--height:${height};`">
<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
<button class="_button back" v-if="withBack && canBack" @click.stop="back()"><Fa :icon="faChevronLeft"/></button>
</transition>
<template v-if="info">

2
src/client/ui/_common_/stream-indicator.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="nsbbhtug" v-if="hasDisconnected && $store.state.device.serverDisconnectedBehavior === 'quiet'" @click="resetDisconnected">
<div class="nsbbhtug" v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" @click="resetDisconnected">
<div>{{ $t('disconnectedFromServer') }}</div>
<div class="command">
<button class="_textButton" @click="reload">{{ $t('reload') }}</button>

25
src/client/ui/deck.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="mk-deck" :class="`${$store.state.device.deckColumnAlign}`" v-hotkey.global="keymap">
<div class="mk-deck" :class="`${deckStore.state.columnAlign}`" v-hotkey.global="keymap">
<XSidebar ref="nav"/>
<!-- TODO: deckMainColumnPlace を見て位置変える -->
<DeckColumn class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
<DeckColumn class="column" v-if="deckStore.state.alwaysShowMainColumn || $route.name !== 'index'">
<template #header>
<XHeader :info="pageInfo"/>
</template>
@ -26,8 +26,8 @@
<button @click="addColumn" class="_button add"><Fa :icon="faPlus"/></button>
<button v-if="$store.getters.isSignedIn" class="nav _button" @click="showNav()"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><Fa :icon="faPencilAlt"/></button>
<button v-if="$i" class="nav _button" @click="showNav()"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
<button v-if="$i" class="post _buttonPrimary" @click="post()"><Fa :icon="faPencilAlt"/></button>
<XCommon/>
</div>
@ -48,6 +48,7 @@ import { getScrollContainer } from '@/scripts/scroll';
import * as os from '@/os';
import { sidebarDef } from '@/sidebar';
import XCommon from './_common_/common.vue';
import { deckStore, addColumn } from './deck/deck-store';
export default defineComponent({
components: {
@ -60,6 +61,7 @@ export default defineComponent({
data() {
return {
deckStore,
host: host,
pageInfo: null,
pageKey: 0,
@ -70,17 +72,14 @@ export default defineComponent({
},
computed: {
deck() {
return this.$store.state.deviceUser.deck;
columns() {
return deckStore.reactiveState.columns.value;
},
columns(): any[] {
return this.deck.columns;
},
layout(): any[] {
return this.deck.layout;
layout() {
return deckStore.reactiveState.layout.value;
},
navIndicated(): boolean {
if (!this.$store.getters.isSignedIn) return false;
if (!this.$i) return false;
for (const def in this.menuDef) {
if (this.menuDef[def].indicated) return true;
}
@ -160,7 +159,7 @@ export default defineComponent({
});
if (canceled) return;
this.$store.commit('deviceUser/addDeckColumn', {
addColumn({
type: column,
id: uuid(),
name: this.$t('_deck._columns.' + column),

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

@ -14,6 +14,7 @@ import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
import XColumn from './column.vue';
import XTimeline from '@/components/timeline.vue';
import * as os from '@/os';
import { updateColumn } from './deck-store';
export default defineComponent({
components: {
@ -73,8 +74,9 @@ export default defineComponent({
showCancelButton: true
});
if (canceled) return;
this.column.antennaId = antenna.id;
this.$store.commit('deviceUser/updateDeckColumn', this.column);
updateColumn(this.column.id, {
antennaId: antenna.id
});
},
focus() {

22
src/client/ui/deck/column.vue
View file

@ -35,6 +35,7 @@ import { defineComponent } from 'vue';
import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
import * as os from '@/os';
import { renameColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
export default defineComponent({
props: {
@ -145,50 +146,50 @@ export default defineComponent({
}
}).then(({ canceled, result: name }) => {
if (canceled) return;
this.$store.commit('deviceUser/renameDeckColumn', { id: this.column.id, name });
renameColumn(this.column.id, name);
});
}
}, null, {
icon: faArrowLeft,
text: this.$t('_deck.swapLeft'),
action: () => {
this.$store.commit('deviceUser/swapLeftDeckColumn', this.column.id);
swapLeftColumn(this.column.id);
}
}, {
icon: faArrowRight,
text: this.$t('_deck.swapRight'),
action: () => {
this.$store.commit('deviceUser/swapRightDeckColumn', this.column.id);
swapRightColumn(this.column.id);
}
}, this.isStacked ? {
icon: faArrowUp,
text: this.$t('_deck.swapUp'),
action: () => {
this.$store.commit('deviceUser/swapUpDeckColumn', this.column.id);
swapUpColumn(this.column.id);
}
} : undefined, this.isStacked ? {
icon: faArrowDown,
text: this.$t('_deck.swapDown'),
action: () => {
this.$store.commit('deviceUser/swapDownDeckColumn', this.column.id);
swapDownColumn(this.column.id);
}
} : undefined, null, {
icon: faWindowRestore,
text: this.$t('_deck.stackLeft'),
action: () => {
this.$store.commit('deviceUser/stackLeftDeckColumn', this.column.id);
stackLeftColumn(this.column.id);
}
}, this.isStacked ? {
icon: faWindowMaximize,
text: this.$t('_deck.popRight'),
action: () => {
this.$store.commit('deviceUser/popRightDeckColumn', this.column.id);
popRightColumn(this.column.id);
}
} : undefined, null, {
icon: faTrashAlt,
text: this.$t('remove'),
action: () => {
this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
removeColumn(this.column.id);
}
}];
@ -264,10 +265,7 @@ export default defineComponent({
const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
if (id != null && id != '') {
this.$store.commit('deviceUser/swapDeckColumn', {
a: this.column.id,
b: id
});
swapColumn(this.column.id, id);
}
}
}

223
src/client/ui/deck/deck-store.ts Normal file
View file

@ -0,0 +1,223 @@
import { markRaw } from 'vue';
import { Storage } from '../../pizzax';
type ColumnWidget = {
name: string;
id: string;
data: Record<string, any>;
};
type Column = {
id: string;
type: string;
name: string | null;
width: number;
widgets?: ColumnWidget[];
};
function copy<T>(x: T): T {
return JSON.parse(JSON.stringify(x));
}
export const deckStore = markRaw(new Storage('deck', {
columns: {
where: 'deviceAccount',
default: [] as Column[]
},
layout: {
where: 'deviceAccount',
default: [] as Column['id'][][]
},
columnAlign: {
where: 'deviceAccount',
default: 'left' as 'left' | 'right' | 'center'
},
alwaysShowMainColumn: {
where: 'deviceAccount',
default: true
},
mainColumnPlace: {
where: 'deviceAccount',
default: 'left' as 'left' | 'right'
},
navWindow: {
where: 'deviceAccount',
default: true
},
}));
export function addColumn(column: Column) {
if (column.name == undefined) column.name = null;
deckStore.push('columns', column);
deckStore.push('layout', [column.id]);
}
export function removeColumn(id: Column['id']) {
deckStore.set('columns', deckStore.state.columns.filter(c => c.id !== id));
deckStore.set('layout', deckStore.state.layout
.map(ids => ids.filter(_id => _id !== id))
.filter(ids => ids.length > 0));
}
export function swapColumn(a: Column['id'], b: Column['id']) {
const aX = deckStore.state.layout.findIndex(ids => ids.indexOf(a) != -1);
const aY = deckStore.state.layout[aX].findIndex(id => id == a);
const bX = deckStore.state.layout.findIndex(ids => ids.indexOf(b) != -1);
const bY = deckStore.state.layout[bX].findIndex(id => id == b);
const layout = copy(deckStore.state.layout);
layout[aX][aY] = b;
layout[bX][bY] = a;
deckStore.set('layout', layout);
}
export function swapLeftColumn(id: Column['id']) {
const layout = copy(deckStore.state.layout);
deckStore.state.layout.some((ids, i) => {
if (ids.includes(id)) {
const left = deckStore.state.layout[i - 1];
if (left) {
layout[i - 1] = deckStore.state.layout[i];
layout[i] = left;
deckStore.set('layout', layout);
}
return true;
}
});
}
export function swapRightColumn(id: Column['id']) {
const layout = copy(deckStore.state.layout);
deckStore.state.layout.some((ids, i) => {
if (ids.includes(id)) {
const right = deckStore.state.layout[i + 1];
if (right) {
layout[i + 1] = deckStore.state.layout[i];
layout[i] = right;
deckStore.set('layout', layout);
}
return true;
}
});
}
export function swapUpColumn(id: Column['id']) {
const layout = copy(deckStore.state.layout);
const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
const ids = copy(deckStore.state.layout[idsIndex]);
ids.some((x, i) => {
if (x === id) {
const up = ids[i - 1];
if (up) {
ids[i - 1] = id;
ids[i] = up;
layout[idsIndex] = ids;
deckStore.set('layout', layout);
}
return true;
}
});
}
export function swapDownColumn(id: Column['id']) {
const layout = copy(deckStore.state.layout);
const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
const ids = copy(deckStore.state.layout[idsIndex]);
ids.some((x, i) => {
if (x === id) {
const down = ids[i + 1];
if (down) {
ids[i + 1] = id;
ids[i] = down;
layout[idsIndex] = ids;
deckStore.set('layout', layout);
}
return true;
}
});
}
export function stackLeftColumn(id: Column['id']) {
let layout = copy(deckStore.state.layout);
const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
layout = layout.map(ids => ids.filter(_id => _id !== id));
layout[i - 1].push(id);
layout = layout.filter(ids => ids.length > 0);
deckStore.set('layout', layout);
}
export function popRightColumn(id: Column['id']) {
let layout = copy(deckStore.state.layout);
const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
layout = layout.map(ids => ids.filter(_id => _id !== id));
layout.splice(i + 1, 0, [id]);
layout = layout.filter(ids => ids.length > 0);
deckStore.set('layout', layout);
}
export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
const columns = copy(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
const column = copy(deckStore.state.columns[columnIndex]);
if (column == null) return;
if (column.widgets == null) column.widgets = [];
column.widgets.unshift(widget);
columns[columnIndex] = column;
deckStore.set('columns', columns);
}
export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
const columns = copy(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
const column = copy(deckStore.state.columns[columnIndex]);
if (column == null) return;
column.widgets = column.widgets.filter(w => w.id != widget.id);
columns[columnIndex] = column;
deckStore.set('columns', columns);
}
export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
const columns = copy(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
const column = copy(deckStore.state.columns[columnIndex]);
if (column == null) return;
column.widgets = widgets;
columns[columnIndex] = column;
deckStore.set('columns', columns);
}
export function updateColumnWidget(id: Column['id'], widgetId: string, data: any) {
const columns = copy(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
const column = copy(deckStore.state.columns[columnIndex]);
if (column == null) return;
column.widgets = column.widgets.map(w => w.id === widgetId ? {
...w,
data: data
} : w);
columns[columnIndex] = column;
deckStore.set('columns', columns);
}
export function renameColumn(id: Column['id'], name: Column['name']) {
const columns = copy(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
const column = copy(deckStore.state.columns[columnIndex]);
if (column == null) return;
column.name = name;
columns[columnIndex] = column;
deckStore.set('columns', columns);
}
export function updateColumn(id: Column['id'], column: Partial<Column>) {
const columns = copy(deckStore.state.columns);
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
const currentColumn = copy(deckStore.state.columns[columnIndex]);
if (currentColumn == null) return;
for (const [k, v] of Object.entries(column)) {
currentColumn[k] = v;
}
columns[columnIndex] = currentColumn;
deckStore.set('columns', columns);
}

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

@ -14,6 +14,7 @@ import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
import XColumn from './column.vue';
import XTimeline from '@/components/timeline.vue';
import * as os from '@/os';
import { updateColumn } from './deck-store';
export default defineComponent({
components: {
@ -73,8 +74,9 @@ export default defineComponent({
showCancelButton: true
});
if (canceled) return;
this.column.listId = list.id;
this.$store.commit('deviceUser/updateDeckColumn', this.column);
updateColumn(this.column.id, {
listId: list.id
});
},
focus() {

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

@ -13,6 +13,7 @@ import { faBell } from '@fortawesome/free-regular-svg-icons';
import XColumn from './column.vue';
import XNotifications from '@/components/notifications.vue';
import * as os from '@/os';
import { updateColumn } from './deck-store';
export default defineComponent({
components: {
@ -48,8 +49,7 @@ export default defineComponent({
}, {
done: async (res) => {
const { includingTypes } = res;
this.$store.commit('deviceUser/updateDeckColumn', {
...this.column,
updateColumn(this.column.id, {
includingTypes: includingTypes
});
},

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

@ -25,6 +25,7 @@ import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@
import XColumn from './column.vue';
import XTimeline from '@/components/timeline.vue';
import * as os from '@/os';
import { removeColumn, updateColumn } from './deck-store';
export default defineComponent({
components: {
@ -71,9 +72,9 @@ export default defineComponent({
if (this.column.tl == null) {
this.setType();
} else {
this.disabled = !this.$store.state.i.isModerator && !this.$store.state.i.isAdmin && (
this.$store.state.instance.meta.disableLocalTimeline && ['local', 'social'].includes(this.column.tl) ||
this.$store.state.instance.meta.disableGlobalTimeline && ['global'].includes(this.column.tl));
this.disabled = !this.$i.isModerator && !this.$i.isAdmin && (
this.$instance.disableLocalTimeline && ['local', 'social'].includes(this.column.tl) ||
this.$instance.disableGlobalTimeline && ['global'].includes(this.column.tl));
}
},
@ -96,12 +97,13 @@ export default defineComponent({
});
if (canceled) {
if (this.column.tl == null) {
this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
removeColumn(this.column.id);
}
return;
}
this.column.tl = src;
this.$store.commit('deviceUser/updateDeckColumn', this.column);
updateColumn(this.column.id, {
tl: src
});
},
queueUpdated(q) {

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

@ -20,12 +20,12 @@
<template #item="{element}">
<div class="customize-container" @click="widgetFunc(element.id)">
<button class="remove _button" @click.prevent.stop="removeWidget(element)"><Fa :icon="faTimes"/></button>
<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column"/>
<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column" @updateProps="saveWidget(element.id, $event)"/>
</div>
</template>
</XDraggable>
</template>
<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/>
<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column" @updateProps="saveWidget(element.id, $event)"/>
</div>
</XColumn>
</template>
@ -38,6 +38,7 @@ import MkSelect from '@/components/ui/select.vue';
import MkButton from '@/components/ui/button.vue';
import XColumn from './column.vue';
import { widgets } from '../../widgets';
import { addColumnWidget, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
export default defineComponent({
components: {
@ -75,10 +76,7 @@ export default defineComponent({
return this.column.widgets;
},
set(value) {
this.$store.commit('deviceUser/setDeckWidgets', {
id: this.column.id,
widgets: value
});
setColumnWidgets(this.column.id, value);
}
}
},
@ -101,24 +99,22 @@ export default defineComponent({
addWidget() {
if (this.widgetAdderSelected == null) return;
this.$store.commit('deviceUser/addDeckWidget', {
id: this.column.id,
widget: {
name: this.widgetAdderSelected,
id: uuid(),
data: {}
}
addColumnWidget(this.column.id, {
name: this.widgetAdderSelected,
id: uuid(),
data: {}
});
this.widgetAdderSelected = null;
},
removeWidget(widget) {
this.$store.commit('deviceUser/removeDeckWidget', {
id: this.column.id,
widget
});
removeColumnWidget(this.column.id, widget);
},
saveWidget(id, data) {
updateColumnWidget(this.column.id, id, data);
}
}
});
</script>

21
src/client/ui/default.vue
View file

@ -9,7 +9,7 @@
<main ref="main">
<div class="content">
<router-view v-slot="{ Component }">
<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<keep-alive :include="['timeline']">
<component :is="Component" :ref="changePage"/>
</keep-alive>
@ -31,7 +31,7 @@
<button class="button nav _button" @click="showNav" ref="navButton"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
<button v-if="$route.name === 'index'" class="button home _button" @click="top()"><Fa :icon="faHome"/></button>
<button v-else class="button home _button" @click="$router.push('/')"><Fa :icon="faHome"/></button>
<button class="button notifications _button" @click="$router.push('/my/notifications')"><Fa :icon="faBell"/><i v-if="$store.state.i.hasUnreadNotification"><Fa :icon="faCircle"/></i></button>
<button class="button notifications _button" @click="$router.push('/my/notifications')"><Fa :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></button>
<button class="button widget _button" @click="widgetsShowing = true"><Fa :icon="faLayerGroup"/></button>
</div>
@ -66,6 +66,7 @@ import XHeader from './_common_/header.vue';
import XSide from './default.side.vue';
import * as os from '@/os';
import { sidebarDef } from '@/sidebar';
import { ColdDeviceStorage } from '@/store';
const DESKTOP_THRESHOLD = 1100;
@ -104,8 +105,8 @@ export default defineComponent({
keymap(): any {
return {
'd': () => {
if (this.$store.state.device.syncDeviceDarkMode) return;
this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
this.$store.set('darkMode', !this.$store.state.darkMode);
},
'p': os.post,
'n': os.post,
@ -114,14 +115,6 @@ export default defineComponent({
};
},
widgets(): any {
return this.$store.state.deviceUser.widgets;
},
menu(): string[] {
return this.$store.state.deviceUser.menu;
},
navIndicated(): boolean {
for (const def in this.menuDef) {
if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
@ -140,8 +133,8 @@ export default defineComponent({
created() {
document.documentElement.style.overflowY = 'scroll';
if (this.$store.state.deviceUser.widgets.length === 0) {
this.$store.commit('deviceUser/setWidgets', [{
if (this.$store.state.widgets.length === 0) {
this.$store.set('widgets', [{
name: 'calendar',
id: 'a', place: 'right', data: {}
}, {

21
src/client/ui/default.widgets.vue
View file

@ -15,7 +15,7 @@
<span class="handle"><Fa :icon="faBars"/></span>{{ $t('_widgets.' + element.name) }}<button class="remove _button" @click="removeWidget(element)"><Fa :icon="faTimes"/></button>
</header>
<div @click="widgetFunc(element.id)">
<component class="_inContainer_ _forceContainerFull_" :is="`mkw-${element.name}`" :widget="element" :ref="element.id" :setting-callback="setting => settings[element.id] = setting"/>
<component class="_inContainer_ _forceContainerFull_" :is="`mkw-${element.name}`" :widget="element" :ref="element.id" :setting-callback="setting => settings[element.id] = setting" @updateProps="saveWidget(element.id, $event)"/>
</div>
</div>
</template>
@ -23,7 +23,7 @@
<button @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $t('editWidgetsExit') }}</button>
</template>
<template v-else>
<component v-for="widget in widgets" class="_inContainer_ _forceContainerFull_" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget"/>
<component v-for="widget in widgets" class="_inContainer_ _forceContainerFull_" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" @updateProps="saveWidget(element.id, $event)"/>
<button @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $t('editWidgets') }}</button>
</template>
</div>
@ -56,10 +56,10 @@ export default defineComponent({
computed: {
widgets: {
get() {
return this.$store.state.deviceUser.widgets;
return this.$store.reactiveState.widgets.value;
},
set(value) {
this.$store.commit('deviceUser/setWidgets', value);
this.$store.set('widgets', value);
}
},
},
@ -87,20 +87,23 @@ export default defineComponent({
});
if (canceled) return;
this.$store.commit('deviceUser/addWidget', {
this.$store.set('widgets', [...this.$store.state.widgets, {
name: widget,
id: uuid(),
place: null,
data: {}
});
}]);
},
removeWidget(widget) {
this.$store.commit('deviceUser/removeWidget', widget);
this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
},
saveHome() {
this.$store.commit('deviceUser/setWidgets', this.widgets);
saveWidget(id, data) {
this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
...w,
data: data
} : w));
}
}
});

7
src/client/ui/desktop.vue
View file

@ -14,6 +14,7 @@ import XCommon from './_common_/common.vue';
import * as os from '@/os';
import XSidebar from '@/components/sidebar.vue';
import { sidebarDef } from '@/sidebar';
import { ColdDeviceStorage } from '@/store';
export default defineComponent({
components: {
@ -33,8 +34,8 @@ export default defineComponent({
keymap(): any {
return {
'd': () => {
if (this.$store.state.device.syncDeviceDarkMode) return;
this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
this.$store.set('darkMode', !this.$store.state.darkMode);
},
'p': os.post,
'n': os.post,
@ -44,7 +45,7 @@ export default defineComponent({
},
menu(): string[] {
return this.$store.state.deviceUser.menu;
return this.$store.state.menu;
},
},

11
src/client/ui/visitor/a.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="mk-app">
<div class="banner" v-if="$route.path === '/'" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
<div class="banner" v-if="$route.path === '/'" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
<div>
<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
<div class="about" v-if="meta">
@ -12,7 +12,7 @@
</div>
</div>
</div>
<div class="banner-mini" v-else :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
<div class="banner-mini" v-else :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
<div>
<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
</div>
@ -25,7 +25,7 @@
</header>
<main ref="main">
<router-view v-slot="{ Component }">
<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<component :is="Component" :ref="changePage"/>
</transition>
</router-view>
@ -48,6 +48,7 @@ import * as os from '@/os';
import MkPagination from '@/components/ui/pagination.vue';
import MkButton from '@/components/ui/button.vue';
import XHeader from './header.vue';
import { ColdDeviceStorage } from '@/store';
const DESKTOP_THRESHOLD = 1100;
@ -78,8 +79,8 @@ export default defineComponent({
keymap(): any {
return {
'd': () => {
if (this.$store.state.device.syncDeviceDarkMode) return;
this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
this.$store.set('darkMode', !this.$store.state.darkMode);
},
's': search,
'h|/': this.help

9
src/client/ui/visitor/b.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="mk-app" :style="{ backgroundImage: root ? `url(${ $store.state.instance.meta.backgroundImageUrl })` : 'none' }">
<div class="mk-app" :style="{ backgroundImage: root ? `url(${ $instance.backgroundImageUrl })` : 'none' }">
<a v-if="root" href="https://github.com/syuilo/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--panel); color:var(--fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<div class="side" v-if="!narrow">
@ -13,7 +13,7 @@
<XHeader class="header" :info="pageInfo" v-if="!root"/>
<main>
<router-view v-slot="{ Component }">
<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<component :is="Component" :ref="changePage"/>
</transition>
</router-view>
@ -60,6 +60,7 @@ import XSignupDialog from '@/components/signup-dialog.vue';
import MkButton from '@/components/ui/button.vue';
import XHeader from './header.vue';
import XKanban from './kanban.vue';
import { ColdDeviceStorage } from '@/store';
const DESKTOP_THRESHOLD = 1100;
@ -92,8 +93,8 @@ export default defineComponent({
keymap(): any {
return {
'd': () => {
if (this.$store.state.device.syncDeviceDarkMode) return;
this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
this.$store.set('darkMode', !this.$store.state.darkMode);
},
's': search,
'h|/': this.help

2
src/client/ui/visitor/kanban.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }">
<div class="back" :class="{ transparent }"></div>
<div class="contents">
<div class="wrapper">

7
src/client/ui/zen.vue
View file

@ -7,7 +7,7 @@
<main ref="main">
<div class="content">
<router-view v-slot="{ Component }">
<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<keep-alive :include="['timeline']">
<component :is="Component" :ref="changePage"/>
</keep-alive>
@ -30,6 +30,7 @@ import { search } from '@/scripts/search';
import XHeader from './_common_/header.vue';
import XCommon from './_common_/common.vue';
import * as os from '@/os';
import { ColdDeviceStorage } from '@/store';
export default defineComponent({
components: {
@ -50,8 +51,8 @@ export default defineComponent({
keymap(): any {
return {
'd': () => {
if (this.$store.state.device.syncDeviceDarkMode) return;
this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
this.$store.set('darkMode', !this.$store.state.darkMode);
},
'p': os.post,
'n': os.post,