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

Merge branch 'develop' into more-share-page-querys

Browse source
This commit is contained in:
tamaina 2021-07-26 22:14:22 +09:00
commit 3581bf9a06
121 changed files with 3221 additions and 615 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/client/account.ts
View file

@ -47,7 +47,7 @@ function fetchAccount(token): Promise<Account> {
})
.then(res => {
// When failed to authenticate user
if (res.status !== 200 && res.status < 500) {
if (res.status >= 400 && res.status < 500) {
return signout();
}

23
src/client/components/analog-clock.vue
View file

@ -5,7 +5,8 @@
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="i % 5 == 0 ? 0.125 : 0.05"
:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"
:key="i"/>
:key="i"
/>
<line
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
@ -13,7 +14,9 @@
:x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
:stroke="sHandColor"
stroke-width="0.05"/>
:stroke-width="thickness / 2"
stroke-linecap="round"
/>
<line
:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
@ -21,7 +24,9 @@
:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
:stroke="mHandColor"
stroke-width="0.1"/>
:stroke-width="thickness"
stroke-linecap="round"
/>
<line
:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
@ -29,16 +34,24 @@
:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
:stroke="hHandColor"
stroke-width="0.1"/>
:stroke-width="thickness"
stroke-linecap="round"
/>
</svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import * as tinycolor from 'tinycolor2';
import * as os from '@client/os';
export default defineComponent({
props: {
thickness: {
type: Number,
default: 0.1
}
},
data() {
return {
now: new Date(),

4
src/client/components/drive.vue
View file

@ -46,7 +46,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import XNavFolder from './drive.nav-folder.vue';
import XFolder from './drive.folder.vue';
import XFile from './drive.file.vue';
@ -139,7 +139,7 @@ export default defineComponent({
});
}
this.connection = os.stream.useChannel('drive');
this.connection = markRaw(os.stream.useChannel('drive'));
this.connection.on('fileCreated', this.onStreamDriveFileCreated);
this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);

4
src/client/components/follow-button.vue
View file

@ -28,7 +28,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import * as os from '@client/os';
export default defineComponent({
@ -71,7 +71,7 @@ export default defineComponent({
},
mounted() {
this.connection = os.stream.useChannel('main');
this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('follow', this.onFollowChange);
this.connection.on('unfollow', this.onFollowChange);

6
src/client/components/form-dialog.vue
View file

@ -34,6 +34,10 @@
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<option v-for="item in form[item].enum" :value="item.value" :key="item.value">{{ item.label }}</option>
</FormSelect>
<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]">
<template #desc><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<option v-for="item in form[item].options" :value="item.value" :key="item.value">{{ item.label }}</option>
</FormRadios>
<FormRange v-else-if="form[item].type === 'range'" v-model:value="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
@ -56,6 +60,7 @@ import FormSwitch from './form/switch.vue';
import FormSelect from './form/select.vue';
import FormRange from './form/range.vue';
import FormButton from './form/button.vue';
import FormRadios from './form/radios.vue';
export default defineComponent({
components: {
@ -67,6 +72,7 @@ export default defineComponent({
FormSelect,
FormRange,
FormButton,
FormRadios,
},
props: {

7
src/client/components/form/radios.vue
View file

@ -27,7 +27,10 @@ export default defineComponent({
},
render() {
const label = this.$slots.desc();
const options = this.$slots.default();
let options = this.$slots.default();
// なぜかFragmentになることがあるため
if (options.length === 1 && options[0].props == null) options = options[0].children;
return h('div', {
class: 'cnklmpwm _formItem'
@ -37,7 +40,7 @@ export default defineComponent({
}, label),
...options.map(option => h('button', {
class: '_button _formPanel _formClickable',
key: option.props.value,
key: option.key,
onClick: () => this.value = option.props.value,
}, [h('span', {
class: ['check', { checked: this.value === option.props.value }],

56
src/client/components/global/avatar.vue
View file

@ -1,9 +1,9 @@
<template>
<span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
<span class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</span>
<MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
<MkA class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</MkA>
@ -81,28 +81,6 @@ export default defineComponent({
border-radius: 100%;
line-height: 16px;
&.cat {
&:before, &:after {
background: #df548f;
border: solid 4px currentColor;
box-sizing: border-box;
content: '';
display: inline-block;
height: 50%;
width: 50%;
}
&:before {
border-radius: 0 75% 75%;
transform: rotate(37.5deg) skew(30deg);
}
&:after {
border-radius: 75% 0 75% 75%;
transform: rotate(-37.5deg) skew(-30deg);
}
}
> .inner {
position: absolute;
bottom: 0;
@ -125,5 +103,35 @@ export default defineComponent({
width: 20%;
height: 20%;
}
&.square {
border-radius: 20%;
> .inner {
border-radius: 20%;
}
}
&.cat {
&:before, &:after {
background: #df548f;
border: solid 4px currentColor;
box-sizing: border-box;
content: '';
display: inline-block;
height: 50%;
width: 50%;
}
&:before {
border-radius: 0 75% 75%;
transform: rotate(37.5deg) skew(30deg);
}
&:after {
border-radius: 75% 0 75% 75%;
transform: rotate(-37.5deg) skew(-30deg);
}
}
}
</style>

4
src/client/components/launch-pad.vue
View file

@ -36,7 +36,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import MkModal from '@client/components/ui/modal.vue';
import { sidebarDef } from '@client/sidebar';
import { menuDef } from '@client/menu';
import { instanceName } from '@client/config';
export default defineComponent({
@ -48,7 +48,7 @@ export default defineComponent({
data() {
return {
menuDef: sidebarDef,
menuDef: menuDef,
items: [],
instanceName,
};

4
src/client/components/notification.vue
View file

@ -58,7 +58,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import { getNoteSummary } from '@/misc/get-note-summary';
import XReactionIcon from './reaction-icon.vue';
import MkFollowButton from './follow-button.vue';
@ -109,7 +109,7 @@ export default defineComponent({
this.readObserver.observe(this.$el);
this.connection = os.stream.useChannel('main');
this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el));
}
},

4
src/client/components/notifications.vue
View file

@ -21,7 +21,7 @@
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { defineComponent, PropType, markRaw } from 'vue';
import paging from '@client/scripts/paging';
import XNotification from './notification.vue';
import XList from './date-separated-list.vue';
@ -89,7 +89,7 @@ export default defineComponent({
},
mounted() {
this.connection = os.stream.useChannel('main');
this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('notification', this.onNotification);
},

2
src/client/components/tab.vue
View file

@ -14,7 +14,7 @@ export default defineComponent({
class: 'pxhvhrfw',
}, options.map(option => withDirectives(h('button', {
class: ['_button', { active: this.value === option.props.value }],
key: option.props.value,
key: option.key,
disabled: this.value === option.props.value,
onClick: () => {
this.$emit('update:value', option.props.value);

28
src/client/components/timeline.vue
View file

@ -3,7 +3,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import XNotes from './notes.vue';
import * as os from '@client/os';
import * as sound from '@client/scripts/sound';
@ -92,33 +92,33 @@ export default defineComponent({
this.query = {
antennaId: this.antenna
};
this.connection = os.stream.useChannel('antenna', {
this.connection = markRaw(os.stream.useChannel('antenna', {
antennaId: this.antenna
});
}));
this.connection.on('note', prepend);
} else if (this.src == 'home') {
endpoint = 'notes/timeline';
this.connection = os.stream.useChannel('homeTimeline');
this.connection = markRaw(os.stream.useChannel('homeTimeline'));
this.connection.on('note', prepend);
this.connection2 = os.stream.useChannel('main');
this.connection2 = markRaw(os.stream.useChannel('main'));
this.connection2.on('follow', onChangeFollowing);
this.connection2.on('unfollow', onChangeFollowing);
} else if (this.src == 'local') {
endpoint = 'notes/local-timeline';
this.connection = os.stream.useChannel('localTimeline');
this.connection = markRaw(os.stream.useChannel('localTimeline'));
this.connection.on('note', prepend);
} else if (this.src == 'social') {
endpoint = 'notes/hybrid-timeline';
this.connection = os.stream.useChannel('hybridTimeline');
this.connection = markRaw(os.stream.useChannel('hybridTimeline'));
this.connection.on('note', prepend);
} else if (this.src == 'global') {
endpoint = 'notes/global-timeline';
this.connection = os.stream.useChannel('globalTimeline');
this.connection = markRaw(os.stream.useChannel('globalTimeline'));
this.connection.on('note', prepend);
} else if (this.src == 'mentions') {
endpoint = 'notes/mentions';
this.connection = os.stream.useChannel('main');
this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('mention', prepend);
} else if (this.src == 'directs') {
endpoint = 'notes/mentions';
@ -130,16 +130,16 @@ export default defineComponent({
prepend(note);
}
};
this.connection = os.stream.useChannel('main');
this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('mention', onNote);
} else if (this.src == 'list') {
endpoint = 'notes/user-list-timeline';
this.query = {
listId: this.list
};
this.connection = os.stream.useChannel('userList', {
this.connection = markRaw(os.stream.useChannel('userList', {
listId: this.list
});
}));
this.connection.on('note', prepend);
this.connection.on('userAdded', onUserAdded);
this.connection.on('userRemoved', onUserRemoved);
@ -148,9 +148,9 @@ export default defineComponent({
this.query = {
channelId: this.channel
};
this.connection = os.stream.useChannel('channel', {
this.connection = markRaw(os.stream.useChannel('channel', {
channelId: this.channel
});
}));
this.connection.on('note', prepend);
}

2
src/client/components/ui/container.vue
View file

@ -191,6 +191,8 @@ export default defineComponent({
}
> .content {
--stickyTop: 0px;
&.omitted {
position: relative;
max-height: var(--maxHeight);

7
src/client/components/ui/radios.vue
View file

@ -23,14 +23,17 @@ export default defineComponent({
},
render() {
const label = this.$slots.desc();
const options = this.$slots.default();
let options = this.$slots.default();
// なぜかFragmentになることがあるため
if (options.length === 1 && options[0].props == null) options = options[0].children;
return h('div', {
class: 'novjtcto'
}, [
h('div', label),
...options.map(option => h(MkRadio, {
key: option.props.value,
key: option.key,
value: option.props.value,
modelValue: this.value,
'onUpdate:modelValue': value => this.value = value,

1
src/client/components/widgets.vue
View file

@ -43,6 +43,7 @@ export default defineComponent({
props: {
widgets: {
type: Array,
required: true,
},
edit: {

2
src/client/directives/sticky-container.ts
View file

@ -6,7 +6,7 @@ export default {
const header = src.children[0];
const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
src.style.setProperty('--stickyTop', `${parseInt(currentStickyTop) + header.offsetHeight}px`);
src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
header.style.setProperty('--stickyTop', currentStickyTop);
header.style.position = 'sticky';
header.style.top = 'var(--stickyTop)';

4
src/client/init.ts
View file

@ -6,7 +6,7 @@ import '@client/style.scss';
import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing';
import { computed, createApp, watch } from 'vue';
import { computed, createApp, watch, markRaw } from 'vue';
import widgets from '@client/widgets';
import directives from '@client/directives';
@ -282,7 +282,7 @@ if ($i) {
}
}
const main = stream.useChannel('main', null, 'System');
const main = markRaw(stream.useChannel('main', null, 'System'));
// 自分の情報が更新されたとき
main.on('meUpdated', i => {

2
src/client/sidebar.ts → src/client/menu.ts
View file

@ -5,7 +5,7 @@ import { i18n } from '@client/i18n';
import { $i } from './account';
import { unisonReload } from '@client/scripts/unison-reload';
export const sidebarDef = {
export const menuDef = {
notifications: {
title: 'notifications',
icon: 'fas fa-bell',

4
src/client/pages/instance/metrics.vue
View file

@ -90,7 +90,7 @@ export default defineComponent({
stats: null,
serverInfo: null,
connection: null,
queueConnection: os.stream.useChannel('queueStats'),
queueConnection: markRaw(os.stream.useChannel('queueStats')),
memUsage: 0,
chartCpuMem: null,
chartNet: null,
@ -121,7 +121,7 @@ export default defineComponent({
os.api('admin/server-info', {}).then(res => {
this.serverInfo = res;
this.connection = os.stream.useChannel('serverStats');
this.connection = markRaw(os.stream.useChannel('serverStats'));
this.connection.on('stats', this.onStats);
this.connection.on('statsLog', this.onStatsLog);
this.connection.send('requestLog', {

4
src/client/pages/instance/queue.vue
View file

@ -11,7 +11,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import MkButton from '@client/components/ui/button.vue';
import XQueue from './queue.chart.vue';
import FormBase from '@client/components/form/base.vue';
@ -35,7 +35,7 @@ export default defineComponent({
title: this.$ts.jobQueue,
icon: 'fas fa-clipboard-list',
},
connection: os.stream.useChannel('queueStats'),
connection: markRaw(os.stream.useChannel('queueStats')),
}
},

4
src/client/pages/messaging/index.vue
View file

@ -37,7 +37,7 @@
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
import { getAcct } from '@/misc/acct';
import MkButton from '@client/components/ui/button.vue';
import { acct } from '../../filters/user';
@ -63,7 +63,7 @@ export default defineComponent({
},
mounted() {
this.connection = os.stream.useChannel('messagingIndex');
this.connection = markRaw(os.stream.useChannel('messagingIndex'));
this.connection.on('message', this.onMessage);
this.connection.on('read', this.onRead);

6
src/client/pages/messaging/messaging-room.vue
View file

@ -36,7 +36,7 @@
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import { computed, defineComponent, markRaw } from 'vue';
import XList from '@client/components/date-separated-list.vue';
import XMessage from './messaging-room.message.vue';
import XForm from './messaging-room.form.vue';
@ -141,10 +141,10 @@ const Component = defineComponent({
this.group = group;
}
this.connection = os.stream.useChannel('messaging', {
this.connection = markRaw(os.stream.useChannel('messaging', {
otherparty: this.user ? this.user.id : undefined,
group: this.group ? this.group.id : undefined,
});
}));
this.connection.on('message', this.onMessage);
this.connection.on('read', this.onRead);

6
src/client/pages/reversi/game.vue
View file

@ -5,7 +5,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import GameSetting from './game.setting.vue';
import GameBoard from './game.board.vue';
import * as os from '@client/os';
@ -61,9 +61,9 @@ export default defineComponent({
if (this.connection) {
this.connection.dispose();
}
this.connection = os.stream.useChannel('gamesReversiGame', {
this.connection = markRaw(os.stream.useChannel('gamesReversiGame', {
gameId: this.game.id
});
}));
this.connection.on('started', this.onStarted);
});
},

4
src/client/pages/reversi/index.vue
View file

@ -60,7 +60,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import * as os from '@client/os';
import MkButton from '@client/components/ui/button.vue';
import MkFolder from '@client/components/ui/folder.vue';
@ -92,7 +92,7 @@ export default defineComponent({
mounted() {
if (this.$i) {
this.connection = os.stream.useChannel('gamesReversi');
this.connection = markRaw(os.stream.useChannel('gamesReversi'));
this.connection.on('invited', this.onInvited);

6
src/client/pages/settings/general.vue
View file

@ -37,6 +37,7 @@
<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
<FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $ts.disableShowingAnimatedImages }}</FormSwitch>
<FormSwitch v-model:value="squareAvatars">{{ $ts.squareAvatars }}</FormSwitch>
<FormSwitch v-model:value="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch>
<FormSwitch v-model:value="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }}
<div><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" :key="useOsNativeEmojis"/></div>
@ -145,6 +146,7 @@ export default defineComponent({
instanceTicker: defaultStore.makeGetterSetter('instanceTicker'),
enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'),
useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'),
squareAvatars: defaultStore.makeGetterSetter('squareAvatars'),
},
watch: {
@ -176,6 +178,10 @@ export default defineComponent({
this.reloadAsk();
},
squareAvatars() {
this.reloadAsk();
},
showGapBetweenNotesInTimeline() {
this.reloadAsk();
},

4
src/client/pages/settings/index.vue
View file

@ -26,7 +26,7 @@
<template #label>{{ $ts.clientSettings }}</template>
<FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</FormLink>
<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</FormLink>
<FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.sidebar }}</FormLink>
<FormLink :active="page === 'menu'" replace to="/settings/menu"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.menu }}</FormLink>
<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</FormLink>
<FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</FormLink>
</FormGroup>
@ -121,7 +121,7 @@ export default defineComponent({
case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
case 'sidebar': return defineAsyncComponent(() => import('./sidebar.vue'));
case 'menu': return defineAsyncComponent(() => import('./menu.vue'));
case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue'));
case 'deck': return defineAsyncComponent(() => import('./deck.vue'));

36
src/client/pages/settings/sidebar.vue → src/client/pages/settings/menu.vue
View file

@ -1,18 +1,18 @@
<template>
<FormBase>
<FormTextarea v-model:value="items" tall>
<span>{{ $ts.sidebar }}</span>
<FormTextarea v-model:value="items" tall manual-save>
<span>{{ $ts.menu }}</span>
<template #desc><button class="_textButton" @click="addItem">{{ $ts.addItem }}</button></template>
</FormTextarea>
<FormRadios v-model="sidebarDisplay">
<FormRadios v-model="menuDisplay">
<template #desc>{{ $ts.display }}</template>
<option value="full">{{ $ts._sidebar.full }}</option>
<option value="icon">{{ $ts._sidebar.icon }}</option>
<!-- <MkRadio v-model="sidebarDisplay" value="hide" disabled>{{ $ts._sidebar.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
<option value="sideFull">{{ $ts._menuDisplay.sideFull }}</option>
<option value="sideIcon">{{ $ts._menuDisplay.sideIcon }}</option>
<option value="top">{{ $ts._menuDisplay.top }}</option>
<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ $ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
</FormRadios>
<FormButton @click="save()" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
<FormButton @click="reset()" danger><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton>
</FormBase>
</template>
@ -26,7 +26,7 @@ import FormBase from '@client/components/form/base.vue';
import FormGroup from '@client/components/form/group.vue';
import FormButton from '@client/components/form/button.vue';
import * as os from '@client/os';
import { sidebarDef } from '@client/sidebar';
import { menuDef } from '@client/menu';
import { defaultStore } from '@client/store';
import * as symbols from '@client/symbols';
import { unisonReload } from '@client/scripts/unison-reload';
@ -44,11 +44,11 @@ export default defineComponent({
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.sidebar,
title: this.$ts.menu,
icon: 'fas fa-list-ul'
},
menuDef: sidebarDef,
items: '',
menuDef: menuDef,
items: defaultStore.state.menu.join('\n'),
}
},
@ -57,11 +57,17 @@ export default defineComponent({
return this.items.trim().split('\n').filter(x => x.trim() !== '');
},
sidebarDisplay: defaultStore.makeGetterSetter('sidebarDisplay')
menuDisplay: defaultStore.makeGetterSetter('menuDisplay')
},
created() {
this.items = this.$store.state.menu.join('\n');
watch: {
menuDisplay() {
this.reloadAsk();
},
items() {
this.save();
},
},
mounted() {
@ -85,7 +91,6 @@ export default defineComponent({
});
if (canceled) return;
this.items = [...this.splited, item].join('\n');
this.save();
},
save() {
@ -96,7 +101,6 @@ export default defineComponent({
reset() {
this.$store.reset('menu');
this.items = this.$store.state.menu.join('\n');
this.reloadAsk();
},
async reloadAsk() {

16
src/client/scripts/sticky-sidebar.ts
View file

@ -7,8 +7,9 @@ export class StickySidebar {
private isTop = false;
private isBottom = false;
private offsetTop: number;
private globalHeaderHeight: number = 59;
constructor(container: StickySidebar['container'], marginTop = 0) {
constructor(container: StickySidebar['container'], marginTop = 0, globalHeaderHeight = 0) {
this.container = container;
this.el = this.container.children[0] as HTMLElement;
this.el.style.position = 'sticky';
@ -16,30 +17,31 @@ export class StickySidebar {
this.container.prepend(this.spacer);
this.marginTop = marginTop;
this.offsetTop = this.container.getBoundingClientRect().top;
this.globalHeaderHeight = globalHeaderHeight;
}
public calc(scrollTop: number) {
if (scrollTop > this.lastScrollTop) { // downscroll
const overflow = Math.max(0, (this.el.clientHeight + this.marginTop) - window.innerHeight);
const overflow = Math.max(0, this.globalHeaderHeight + (this.el.clientHeight + this.marginTop) - window.innerHeight);
this.el.style.bottom = null;
this.el.style.top = `${-overflow + this.marginTop}px`;
this.el.style.top = `${-overflow + this.marginTop + this.globalHeaderHeight}px`;
this.isBottom = (scrollTop + window.innerHeight) >= (this.el.offsetTop + this.el.clientHeight);
if (this.isTop) {
this.isTop = false;
this.spacer.style.marginTop = `${Math.max(0, this.lastScrollTop + this.marginTop - this.offsetTop)}px`;
this.spacer.style.marginTop = `${Math.max(0, this.globalHeaderHeight + this.lastScrollTop + this.marginTop - this.offsetTop)}px`;
}
} else { // upscroll
const overflow = (this.el.clientHeight + this.marginTop) - window.innerHeight;
const overflow = this.globalHeaderHeight + (this.el.clientHeight + this.marginTop) - window.innerHeight;
this.el.style.top = null;
this.el.style.bottom = `${-overflow}px`;
this.isTop = scrollTop <= this.el.offsetTop;
this.isTop = scrollTop + this.marginTop + this.globalHeaderHeight <= this.el.offsetTop;
if (this.isBottom) {
this.isBottom = false;
this.spacer.style.marginTop = `${this.lastScrollTop + this.marginTop - this.offsetTop - overflow}px`;
this.spacer.style.marginTop = `${this.globalHeaderHeight + this.lastScrollTop + this.marginTop - this.offsetTop - overflow}px`;
}
}

9
src/client/store.ts
View file

@ -90,6 +90,7 @@ export const defaultStore = markRaw(new Storage('base', {
default: [] as {
name: string;
id: string;
place: string | null;
data: Record<string, any>;
}[]
},
@ -185,14 +186,18 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: false
},
sidebarDisplay: {
menuDisplay: {
where: 'device',
default: 'full' as 'full' | 'icon'
default: 'sideFull' as 'sideFull' | 'sideIcon' | 'top'
},
reportError: {
where: 'device',
default: false
},
squareAvatars: {
where: 'device',
default: false
},
}));
// TODO: 他のタブと永続化されたstateを同期

2
src/client/style.scss
View file

@ -161,7 +161,7 @@ hr {
background: none;
border: none;
cursor: pointer;
color: var(--fg);
color: inherit;
touch-action: manipulation;
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;

8
src/client/ui/_common_/sidebar.vue
View file

@ -49,7 +49,7 @@ import { defineComponent } from 'vue';
import { host } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
import { sidebarDef } from '@client/sidebar';
import { menuDef } from '@client/menu';
import { getAccounts, addAccount, login } from '@client/account';
export default defineComponent({
@ -67,7 +67,7 @@ export default defineComponent({
showing: false,
accounts: [],
connection: null,
menuDef: sidebarDef,
menuDef: menuDef,
iconOnly: false,
hidden: this.defaultHidden,
};
@ -92,7 +92,7 @@ export default defineComponent({
this.showing = false;
},
'$store.reactiveState.sidebarDisplay.value'() {
'$store.reactiveState.menuDisplay.value'() {
this.calcViewState();
},
@ -116,7 +116,7 @@ export default defineComponent({
methods: {
calcViewState() {
this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.sidebarDisplay === 'icon');
this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
if (!this.defaultHidden) {
this.hidden = (window.innerWidth <= 650);
}

4
src/client/ui/chat/index.vue
View file

@ -142,7 +142,7 @@ import XTimeline from './timeline.vue';
import XHeaderClock from './header-clock.vue';
import * as os from '@client/os';
import { router } from '@client/router';
import { sidebarDef } from '@client/sidebar';
import { menuDef } from '@client/menu';
import { search } from '@client/scripts/search';
import copyToClipboard from '@client/scripts/copy-to-clipboard';
import { store } from './store';
@ -190,7 +190,7 @@ export default defineComponent({
followedChannels: null,
featuredChannels: null,
currentChannel: null,
menuDef: sidebarDef,
menuDef: menuDef,
sideViewOpening: false,
instanceName,
};

28
src/client/ui/chat/timeline.vue
View file

@ -23,7 +23,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import XNotes from './notes.vue';
import * as os from '@client/os';
import * as sound from '@client/scripts/sound';
@ -121,33 +121,33 @@ export default defineComponent({
this.query = {
antennaId: this.antenna
};
this.connection = os.stream.useChannel('antenna', {
this.connection = markRaw(os.stream.useChannel('antenna', {
antennaId: this.antenna
});
}));
this.connection.on('note', prepend);
} else if (this.src == 'home') {
endpoint = 'notes/timeline';
this.connection = os.stream.useChannel('homeTimeline');
this.connection = markRaw(os.stream.useChannel('homeTimeline'));
this.connection.on('note', prepend);
this.connection2 = os.stream.useChannel('main');
this.connection2 = markRaw(os.stream.useChannel('main'));
this.connection2.on('follow', onChangeFollowing);
this.connection2.on('unfollow', onChangeFollowing);
} else if (this.src == 'local') {
endpoint = 'notes/local-timeline';
this.connection = os.stream.useChannel('localTimeline');
this.connection = markRaw(os.stream.useChannel('localTimeline'));
this.connection.on('note', prepend);
} else if (this.src == 'social') {
endpoint = 'notes/hybrid-timeline';
this.connection = os.stream.useChannel('hybridTimeline');
this.connection = markRaw(os.stream.useChannel('hybridTimeline'));
this.connection.on('note', prepend);
} else if (this.src == 'global') {
endpoint = 'notes/global-timeline';
this.connection = os.stream.useChannel('globalTimeline');
this.connection = markRaw(os.stream.useChannel('globalTimeline'));
this.connection.on('note', prepend);
} else if (this.src == 'mentions') {
endpoint = 'notes/mentions';
this.connection = os.stream.useChannel('main');
this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('mention', prepend);
} else if (this.src == 'directs') {
endpoint = 'notes/mentions';
@ -159,16 +159,16 @@ export default defineComponent({
prepend(note);
}
};
this.connection = os.stream.useChannel('main');
this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('mention', onNote);
} else if (this.src == 'list') {
endpoint = 'notes/user-list-timeline';
this.query = {
listId: this.list
};
this.connection = os.stream.useChannel('userList', {
this.connection = markRaw(os.stream.useChannel('userList', {
listId: this.list
});
}));
this.connection.on('note', prepend);
this.connection.on('userAdded', onUserAdded);
this.connection.on('userRemoved', onUserRemoved);
@ -178,9 +178,9 @@ export default defineComponent({
this.query = {
channelId: this.channel
};
this.connection = os.stream.useChannel('channel', {
this.connection = markRaw(os.stream.useChannel('channel', {
channelId: this.channel
});
}));
this.connection.on('note', prepend);
this.connection.on('typers', typers => {
this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers;

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

@ -37,7 +37,7 @@ import DeckColumnCore from '@client/ui/deck/column-core.vue';
import XSidebar from '@client/ui/_common_/sidebar.vue';
import { getScrollContainer } from '@client/scripts/scroll';
import * as os from '@client/os';
import { sidebarDef } from '@client/sidebar';
import { menuDef } from '@client/menu';
import XCommon from './_common_/common.vue';
import { deckStore, addColumn, loadDeck } from './deck/deck-store';
@ -60,7 +60,7 @@ export default defineComponent({
return {
deckStore,
host: host,
menuDef: sidebarDef,
menuDef: menuDef,
wallpaper: localStorage.getItem('wallpaper') != null,
};
},

274
src/client/ui/default.header.vue Normal file
View file

@ -0,0 +1,274 @@
<template>
<div class="azykntjl">
<div class="body">
<div class="left">
<MkA class="item index" active-class="active" to="/" exact v-click-anime v-tooltip="$ts.timeline">
<i class="fas fa-home fa-fw"></i>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime v-tooltip="$ts[menuDef[item].title]">
<i class="fa-fw" :class="menuDef[item].icon"></i>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/instance" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.instance">
<i class="fas fa-server fa-fw"></i>
</MkA>
<button class="item _button" @click="more" v-click-anime>
<i class="fas fa-ellipsis-h fa-fw"></i>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
</button>
</div>
<div class="right">
<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.settings">
<i class="fas fa-cog fa-fw"></i>
</MkA>
<button class="item _button account" @click="openAccountMenu" v-click-anime>
<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
</button>
<div class="post" @click="post">
<MkButton class="button" primary full>
<i class="fas fa-pencil-alt fa-fw"></i>
</MkButton>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { host } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
import { menuDef } from '@client/menu';
import { getAccounts, addAccount, login } from '@client/account';
import MkButton from '@client/components/ui/button.vue';
export default defineComponent({
components: {
MkButton,
},
data() {
return {
host: host,
accounts: [],
connection: null,
menuDef: menuDef,
settingsWindowed: false,
};
},
computed: {
menu(): string[] {
return this.$store.state.menu;
},
otherNavItemIndicated(): boolean {
for (const def in this.menuDef) {
if (this.menu.includes(def)) continue;
if (this.menuDef[def].indicated) return true;
}
return false;
},
},
watch: {
'$store.reactiveState.menuDisplay.value'() {
this.calcViewState();
},
},
created() {
window.addEventListener('resize', this.calcViewState);
this.calcViewState();
},
methods: {
calcViewState() {
this.settingsWindowed = (window.innerWidth > 1400);
},
post() {
os.post();
},
search() {
search();
},
async openAccountMenu(ev) {
const storedAccounts = getAccounts().filter(x => x.id !== this.$i.id);
const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
const accountItemPromises = storedAccounts.map(a => new Promise(res => {
accountsPromise.then(accounts => {
const account = accounts.find(x => x.id === a.id);
if (account == null) return res(null);
res({
type: 'user',
user: account,
action: () => { this.switchAccount(account); }
});
});
}));
os.modalMenu([...[{
type: 'link',
text: this.$ts.profile,
to: `/@${ this.$i.username }`,
avatar: this.$i,
}, null, ...accountItemPromises, {
icon: 'fas fa-plus',
text: this.$ts.addAccount,
action: () => {
os.modalMenu([{
text: this.$ts.existingAccount,
action: () => { this.addAccount(); },
}, {
text: this.$ts.createAccount,
action: () => { this.createAccount(); },
}], ev.currentTarget || ev.target);
},
}]], ev.currentTarget || ev.target, {
align: 'left'
});
},
more(ev) {
os.popup(import('@client/components/launch-pad.vue'), {}, {
}, 'closed');
},
addAccount() {
os.popup(import('@client/components/signin-dialog.vue'), {}, {
done: res => {
addAccount(res.id, res.i);
os.success();
},
}, 'closed');
},
createAccount() {
os.popup(import('@client/components/signup-dialog.vue'), {}, {
done: res => {
addAccount(res.id, res.i);
this.switchAccountWithToken(res.i);
},
}, 'closed');
},
switchAccount(account: any) {
const storedAccounts = getAccounts();
const token = storedAccounts.find(x => x.id === account.id).token;
this.switchAccountWithToken(token);
},
switchAccountWithToken(token: string) {
login(token);
},
}
});
</script>
<style lang="scss" scoped>
.azykntjl {
$height: 60px;
$avatar-size: 32px;
$avatar-margin: 8px;
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
height: $height;
background-color: var(--bg);
> .body {
max-width: 1380px;
margin: 0 auto;
display: flex;
> .right,
> .left {
> .item {
position: relative;
font-size: 0.9em;
display: inline-block;
padding: 0 12px;
line-height: $height;
> i,
> .avatar {
margin-right: 0;
}
> i {
left: 10px;
}
> .avatar {
width: $avatar-size;
height: $avatar-size;
vertical-align: middle;
}
> .indicator {
position: absolute;
top: 0;
left: 0;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
&:hover {
text-decoration: none;
color: var(--navHoverFg);
}
&.active {
color: var(--navActive);
}
}
> .divider {
display: inline-block;
height: 16px;
margin: 0 10px;
border-right: solid 0.5px var(--divider);
}
> .post {
display: inline-block;
> .button {
width: 40px;
height: 40px;
padding: 0;
min-width: 0;
}
}
> .account {
display: inline-flex;
align-items: center;
vertical-align: top;
margin-right: 8px;
> .acct {
margin-left: 8px;
}
}
}
> .right {
margin-left: auto;
}
}
}
</style>

8
src/client/ui/default.sidebar.vue
View file

@ -45,7 +45,7 @@ import { defineComponent } from 'vue';
import { host } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
import { sidebarDef } from '@client/sidebar';
import { menuDef } from '@client/menu';
import { getAccounts, addAccount, login } from '@client/account';
import MkButton from '@client/components/ui/button.vue';
import { StickySidebar } from '@client/scripts/sticky-sidebar';
@ -62,7 +62,7 @@ export default defineComponent({
host: host,
accounts: [],
connection: null,
menuDef: sidebarDef,
menuDef: menuDef,
iconOnly: false,
settingsWindowed: false,
};
@ -83,7 +83,7 @@ export default defineComponent({
},
watch: {
'$store.reactiveState.sidebarDisplay.value'() {
'$store.reactiveState.menuDisplay.value'() {
this.calcViewState();
},
@ -108,7 +108,7 @@ export default defineComponent({
methods: {
calcViewState() {
this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.sidebarDisplay === 'icon');
this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
this.settingsWindowed = (window.innerWidth > 1400);
},

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

@ -1,9 +1,16 @@
<template>
<div class="mk-app" :class="{ wallpaper, isMobile }">
<div class="columns" :class="{ fullView }">
<div class="sidebar" ref="sidebar" v-if="!isMobile">
<XSidebar/>
</div>
<XHeaderMenu v-if="showMenuOnTop"/>
<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
<template v-if="!isMobile">
<div class="sidebar" v-if="!showMenuOnTop">
<XSidebar/>
</div>
<div class="widgets left" ref="widgetsLeft" v-else>
<XWidgets @mounted="attachSticky('widgetsLeft')" :place="'left'"/>
</div>
</template>
<main class="main _panel" @contextmenu.stop="onContextmenu">
<header class="header" @click="onHeaderClick">
@ -20,8 +27,8 @@
</div>
</main>
<div v-if="isDesktop" class="widgets" ref="widgets">
<XWidgets @mounted="attachSticky"/>
<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
</div>
</div>
@ -60,7 +67,7 @@ import XDrawerSidebar from '@client/ui/_common_/sidebar.vue';
import XCommon from './_common_/common.vue';
import XHeader from './_common_/header.vue';
import * as os from '@client/os';
import { sidebarDef } from '@client/sidebar';
import { menuDef } from '@client/menu';
import * as symbols from '@client/symbols';
const DESKTOP_THRESHOLD = 1100;
@ -72,13 +79,14 @@ export default defineComponent({
XSidebar,
XDrawerSidebar,
XHeader,
XHeaderMenu: defineAsyncComponent(() => import('./default.header.vue')),
XWidgets: defineAsyncComponent(() => import('./default.widgets.vue')),
},
data() {
return {
pageInfo: null,
menuDef: sidebarDef,
menuDef: menuDef,
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
widgetsShowing: false,
@ -94,6 +102,10 @@ export default defineComponent({
if (this.menuDef[def].indicated) return true;
}
return false;
},
showMenuOnTop(): boolean {
return !this.isMobile && this.$store.state.menuDisplay === 'top';
}
},
@ -103,13 +115,13 @@ export default defineComponent({
if (this.$store.state.widgets.length === 0) {
this.$store.set('widgets', [{
name: 'calendar',
id: 'a', place: 'right', data: {}
id: 'a', place: null, data: {}
}, {
name: 'notifications',
id: 'b', place: 'right', data: {}
id: 'b', place: null, data: {}
}, {
name: 'trends',
id: 'c', place: 'right', data: {}
id: 'c', place: null, data: {}
}]);
}
},
@ -130,8 +142,8 @@ export default defineComponent({
}
},
attachSticky() {
const sticky = new StickySidebar(this.$refs.widgets, 16);
attachSticky(ref) {
const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 1 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
window.addEventListener('scroll', () => {
sticky.calc(window.scrollY);
}, { passive: true });
@ -218,7 +230,7 @@ export default defineComponent({
$widgets-hide-threshold: 1200px;
$nav-icon-only-width: 78px; // TODO: どこかに集約したい
--panelShadow: none;
--panelShadow: 0 0 0 1px var(--divider);
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
min-height: calc(var(--vh, 1vh) * 100);
@ -285,18 +297,17 @@ export default defineComponent({
> .header {
position: sticky;
z-index: 1000;
top: 0;
top: var(--globalHeaderHeight, 0px);
height: $header-height;
line-height: $header-height;
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
border-bottom: solid 0.5px var(--divider);
}
> .content {
background: var(--bg);
--stickyTop: #{$header-height};
--stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
}
@media (max-width: 850px) {
@ -317,12 +328,31 @@ export default defineComponent({
@media (max-width: $widgets-hide-threshold) {
display: none;
}
&.left {
margin-right: 16px;
}
}
> .sidebar {
margin-top: 16px;
}
&.withGlobalHeader {
--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
> .main {
margin-top: 1px;
border-radius: var(--radius);
box-shadow: 0 0 0 1px var(--divider);
}
> .widgets {
--stickyTop: var(--globalHeaderHeight);
margin-top: 1px;
}
}
@media (max-width: 850px) {
margin: 0;

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

@ -1,6 +1,6 @@
<template>
<div class="ddiqwdnk">
<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<MkAd class="a" prefer="square"/>
<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
@ -11,13 +11,18 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import XWidgets from '@client/components/widgets.vue';
import * as os from '@client/os';
export default defineComponent({
components: {
XWidgets
},
props: {
place: {
type: String,
}
},
emits: ['mounted'],
data() {
@ -34,7 +39,7 @@ export default defineComponent({
addWidget(widget) {
this.$store.set('widgets', [{
...widget,
place: null,
place: this.place,
}, ...this.$store.state.widgets]);
},
@ -50,7 +55,10 @@ export default defineComponent({
},
updateWidgets(widgets) {
this.$store.set('widgets', widgets);
this.$store.set('widgets', [
...this.$store.state.widgets.filter(w => w.place !== this.place),
...widgets
]);
}
}
});

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

@ -13,7 +13,7 @@ import { search } from '@client/scripts/search';
import XCommon from './_common_/common.vue';
import * as os from '@client/os';
import XSidebar from '@client/ui/_common_/sidebar.vue';
import { sidebarDef } from '@client/sidebar';
import { menuDef } from '@client/menu';
import { ColdDeviceStorage } from '@client/store';
export default defineComponent({
@ -33,7 +33,7 @@ export default defineComponent({
data() {
return {
host: host,
menuDef: sidebarDef,
menuDef: menuDef,
wallpaper: localStorage.getItem('wallpaper') != null,
};
},

4
src/client/ui/universal.vue
View file

@ -61,7 +61,7 @@ import XCommon from './_common_/common.vue';
import XHeader from './_common_/header.vue';
import XSide from './default.side.vue';
import * as os from '@client/os';
import { sidebarDef } from '@client/sidebar';
import { menuDef } from '@client/menu';
import * as symbols from '@client/symbols';
const DESKTOP_THRESHOLD = 1100;
@ -87,7 +87,7 @@ export default defineComponent({
return {
pageInfo: null,
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
menuDef: sidebarDef,
menuDef: menuDef,
navHidden: false,
widgetsShowing: false,
wallpaper: localStorage.getItem('wallpaper') != null,

13
src/client/widgets/clock.vue
View file

@ -1,7 +1,7 @@
<template>
<MkContainer :naked="props.transparent" :show-header="false">
<div class="vubelbmv">
<MkAnalogClock class="clock"/>
<MkAnalogClock class="clock" :thickness="props.thickness"/>
</div>
</MkContainer>
</template>
@ -20,6 +20,17 @@ const widget = define({
type: 'boolean',
default: false,
},
thickness: {
type: 'radio',
default: 0.1,
options: [{
value: 0.1, label: 'thin'
}, {
value: 0.2, label: 'medium'
}, {
value: 0.3, label: 'thick'
}]
}
})
});

4
src/client/widgets/job-queue.vue
View file

@ -46,7 +46,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import define from './define';
import * as os from '@client/os';
import number from '@client/filters/number';
@ -65,7 +65,7 @@ export default defineComponent({
extends: widget,
data() {
return {
connection: os.stream.useChannel('queueStats'),
connection: markRaw(os.stream.useChannel('queueStats')),
inbox: {
activeSincePrevTick: 0,
active: 0,

4
src/client/widgets/photos.vue
View file

@ -15,7 +15,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import MkContainer from '@client/components/ui/container.vue';
import define from './define';
import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
@ -48,7 +48,7 @@ export default defineComponent({
};
},
mounted() {
this.connection = os.stream.useChannel('main');
this.connection = markRaw(os.stream.useChannel('main'));
this.connection.on('driveFileCreated', this.onDriveFileCreated);

4
src/client/widgets/server-metric/index.vue
View file

@ -14,7 +14,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, markRaw } from 'vue';
import define from '../define';
import MkContainer from '@client/components/ui/container.vue';
import XCpuMemory from './cpu-mem.vue';
@ -63,7 +63,7 @@ export default defineComponent({
os.api('server-info', {}).then(res => {
this.meta = res;
});
this.connection = os.stream.useChannel('serverStats');
this.connection = markRaw(os.stream.useChannel('serverStats'));
},
unmounted() {
this.connection.dispose();