2020-07-11 10:13:11 +09:00
|
|
|
<template>
|
2020-07-17 21:56:30 +09:00
|
|
|
<div class="mk-deck" :class="`${$store.state.device.deckColumnAlign}`" v-hotkey.global="keymap">
|
2020-10-17 20:12:00 +09:00
|
|
|
<XSidebar ref="nav"/>
|
2020-07-11 10:13:11 +09:00
|
|
|
|
|
|
|
<!-- TODO: deckMainColumnPlace を見て位置変える -->
|
|
|
|
<deck-column class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
|
|
|
|
<template #header>
|
2020-10-17 20:12:00 +09:00
|
|
|
<XHeader :info="pageInfo"/>
|
2020-07-11 10:13:11 +09:00
|
|
|
</template>
|
|
|
|
|
2020-10-17 20:12:00 +09:00
|
|
|
<router-view v-slot="{ Component }">
|
|
|
|
<transition>
|
|
|
|
<keep-alive :include="['timeline']">
|
|
|
|
<component :is="Component" :ref="changePage"/>
|
|
|
|
</keep-alive>
|
|
|
|
</transition>
|
|
|
|
</router-view>
|
2020-07-11 10:13:11 +09:00
|
|
|
</deck-column>
|
|
|
|
|
|
|
|
<template v-for="ids in layout">
|
|
|
|
<div v-if="ids.length > 1" class="folder column">
|
2020-10-17 20:12:00 +09:00
|
|
|
<deck-column-core v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
|
2020-07-11 10:13:11 +09:00
|
|
|
</div>
|
|
|
|
<deck-column-core v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
|
|
|
|
</template>
|
|
|
|
|
2020-10-17 20:12:00 +09:00
|
|
|
<button @click="addColumn" class="_button add"><Fa :icon="faPlus"/></button>
|
2020-07-11 10:13:11 +09:00
|
|
|
|
2020-10-17 20:12:00 +09:00
|
|
|
<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>
|
2020-07-11 10:13:11 +09:00
|
|
|
|
2020-10-25 01:21:41 +09:00
|
|
|
<XCommon/>
|
2020-07-11 10:13:11 +09:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2020-10-17 20:12:00 +09:00
|
|
|
import { defineComponent } from 'vue';
|
2020-07-11 10:13:11 +09:00
|
|
|
import { faPlus, faPencilAlt, faChevronLeft, faBars, faCircle } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
import { } from '@fortawesome/free-regular-svg-icons';
|
|
|
|
import { v4 as uuid } from 'uuid';
|
2020-10-17 20:12:00 +09:00
|
|
|
import { host } from '@/config';
|
|
|
|
import { search } from '@/scripts/search';
|
2020-10-25 09:15:20 +09:00
|
|
|
import DeckColumnCore from '@/ui/deck/column-core.vue';
|
|
|
|
import DeckColumn from '@/ui/deck/column.vue';
|
2020-10-17 20:12:00 +09:00
|
|
|
import XSidebar from '@/components/sidebar.vue';
|
|
|
|
import XHeader from './_common_/header.vue';
|
|
|
|
import { getScrollContainer } from '@/scripts/scroll';
|
|
|
|
import * as os from '@/os';
|
|
|
|
import { sidebarDef } from '@/sidebar';
|
2020-10-25 01:21:41 +09:00
|
|
|
import XCommon from './_common_/common.vue';
|
2020-10-17 20:12:00 +09:00
|
|
|
|
|
|
|
export default defineComponent({
|
2020-07-11 10:13:11 +09:00
|
|
|
components: {
|
2020-10-25 01:21:41 +09:00
|
|
|
XCommon,
|
2020-07-11 10:13:11 +09:00
|
|
|
XSidebar,
|
2020-10-17 20:12:00 +09:00
|
|
|
XHeader,
|
2020-07-11 10:13:11 +09:00
|
|
|
DeckColumn,
|
|
|
|
DeckColumnCore,
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
host: host,
|
2020-10-17 20:12:00 +09:00
|
|
|
pageInfo: null,
|
2020-07-11 10:13:11 +09:00
|
|
|
pageKey: 0,
|
|
|
|
connection: null,
|
2020-10-17 20:12:00 +09:00
|
|
|
menuDef: sidebarDef,
|
2020-07-11 10:13:11 +09:00
|
|
|
wallpaper: localStorage.getItem('wallpaper') != null,
|
|
|
|
faPlus, faPencilAlt, faChevronLeft, faBars, faCircle
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
deck() {
|
|
|
|
return this.$store.state.deviceUser.deck;
|
|
|
|
},
|
|
|
|
columns(): any[] {
|
|
|
|
return this.deck.columns;
|
|
|
|
},
|
|
|
|
layout(): any[] {
|
|
|
|
return this.deck.layout;
|
|
|
|
},
|
|
|
|
navIndicated(): boolean {
|
|
|
|
if (!this.$store.getters.isSignedIn) return false;
|
|
|
|
for (const def in this.menuDef) {
|
|
|
|
if (this.menuDef[def].indicated) return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
keymap(): any {
|
|
|
|
return {
|
|
|
|
'p': this.post,
|
|
|
|
'n': this.post,
|
|
|
|
's': this.search,
|
|
|
|
'h|/': this.help
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
$route(to, from) {
|
|
|
|
this.pageKey++;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
created() {
|
|
|
|
document.documentElement.style.overflowY = 'hidden';
|
2020-07-17 21:53:34 +09:00
|
|
|
document.documentElement.style.scrollBehavior = 'auto';
|
2020-07-17 21:56:30 +09:00
|
|
|
window.addEventListener('wheel', this.onWheel);
|
2020-07-11 10:13:11 +09:00
|
|
|
|
|
|
|
if (this.$store.getters.isSignedIn) {
|
2020-10-17 20:12:00 +09:00
|
|
|
this.connection = os.stream.useSharedConnection('main');
|
2020-07-11 10:13:11 +09:00
|
|
|
this.connection.on('notification', this.onNotification);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
2020-10-17 20:12:00 +09:00
|
|
|
changePage(page) {
|
|
|
|
if (page == null) return;
|
|
|
|
if (page.INFO) {
|
|
|
|
this.pageInfo = page.INFO;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-07-17 21:53:34 +09:00
|
|
|
onWheel(e) {
|
|
|
|
if (getScrollContainer(e.target) == null) {
|
|
|
|
document.documentElement.scrollLeft += e.deltaY > 0 ? 96 : -96;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-07-11 10:13:11 +09:00
|
|
|
showNav() {
|
|
|
|
this.$refs.nav.show();
|
|
|
|
},
|
|
|
|
|
|
|
|
help() {
|
|
|
|
this.$router.push('/docs/keyboard-shortcut');
|
|
|
|
},
|
|
|
|
|
|
|
|
post() {
|
2020-10-17 20:12:00 +09:00
|
|
|
os.post();
|
2020-07-11 10:13:11 +09:00
|
|
|
},
|
|
|
|
|
|
|
|
async onNotification(notification) {
|
2020-09-18 22:18:21 +09:00
|
|
|
if (this.$store.state.i.mutingNotificationTypes.includes(notification.type)) {
|
2020-08-22 10:06:17 +09:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-07-11 10:13:11 +09:00
|
|
|
if (document.visibilityState === 'visible') {
|
2020-10-17 20:12:00 +09:00
|
|
|
os.stream.send('readNotification', {
|
2020-07-11 10:13:11 +09:00
|
|
|
id: notification.id
|
|
|
|
});
|
|
|
|
|
2020-10-17 20:12:00 +09:00
|
|
|
os.popup(await import('@/components/toast.vue'), {
|
2020-07-11 10:13:11 +09:00
|
|
|
notification
|
2020-10-17 20:12:00 +09:00
|
|
|
}, {}, 'closed');
|
2020-07-11 10:13:11 +09:00
|
|
|
}
|
2020-10-17 20:12:00 +09:00
|
|
|
os.sound('notification');
|
2020-07-11 10:13:11 +09:00
|
|
|
},
|
|
|
|
|
|
|
|
async addColumn(ev) {
|
|
|
|
const columns = [
|
|
|
|
'widgets',
|
|
|
|
'notifications',
|
|
|
|
'tl',
|
|
|
|
'antenna',
|
|
|
|
'list',
|
|
|
|
'mentions',
|
|
|
|
'direct',
|
|
|
|
];
|
|
|
|
|
2020-10-17 20:12:00 +09:00
|
|
|
const { canceled, result: column } = await os.dialog({
|
2020-07-11 10:13:11 +09:00
|
|
|
title: this.$t('_deck.addColumn'),
|
|
|
|
type: null,
|
|
|
|
select: {
|
|
|
|
items: columns.map(column => ({
|
|
|
|
value: column, text: this.$t('_deck._columns.' + column)
|
|
|
|
}))
|
|
|
|
},
|
|
|
|
showCancelButton: true
|
|
|
|
});
|
|
|
|
if (canceled) return;
|
|
|
|
|
|
|
|
this.$store.commit('deviceUser/addDeckColumn', {
|
|
|
|
type: column,
|
|
|
|
id: uuid(),
|
|
|
|
name: this.$t('_deck._columns.' + column),
|
|
|
|
width: 330,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.mk-deck {
|
|
|
|
$nav-hide-threshold: 650px; // TODO: どこかに集約したい
|
|
|
|
|
|
|
|
// TODO: この値を設定で変えられるようにする?
|
|
|
|
$columnMargin: 12px;
|
|
|
|
|
|
|
|
$deckMargin: 12px;
|
|
|
|
|
|
|
|
--margin: var(--marginHalf);
|
|
|
|
|
|
|
|
display: flex;
|
2020-07-15 18:22:19 +09:00
|
|
|
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
|
|
|
height: calc(var(--vh, 1vh) * 100);
|
2020-07-11 10:13:11 +09:00
|
|
|
box-sizing: border-box;
|
|
|
|
flex: 1;
|
|
|
|
padding: $deckMargin 0 $deckMargin $deckMargin;
|
|
|
|
|
|
|
|
&.center {
|
|
|
|
> .column:first-of-type {
|
|
|
|
margin-left: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .add {
|
|
|
|
margin-right: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
> .column {
|
|
|
|
flex-shrink: 0;
|
|
|
|
margin-right: $columnMargin;
|
|
|
|
|
|
|
|
&.folder {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
> *:not(:last-child) {
|
|
|
|
margin-bottom: $columnMargin;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
> .post,
|
|
|
|
> .nav {
|
|
|
|
position: fixed;
|
|
|
|
z-index: 1000;
|
|
|
|
bottom: 32px;
|
|
|
|
width: 64px;
|
|
|
|
height: 64px;
|
|
|
|
border-radius: 100%;
|
|
|
|
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
|
|
|
|
font-size: 22px;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .post {
|
|
|
|
right: 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .nav {
|
|
|
|
left: 32px;
|
|
|
|
background: var(--panel);
|
|
|
|
color: var(--fg);
|
|
|
|
|
|
|
|
@media (min-width: ($nav-hide-threshold + 1px)) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: var(--X2);
|
|
|
|
}
|
|
|
|
|
|
|
|
> i {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
color: var(--indicator);
|
|
|
|
font-size: 16px;
|
|
|
|
animation: blink 1s infinite;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|