mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-11-28 14:58:29 +09:00
Remove deprecate files (friendly)
This commit is contained in:
NoriDev
parent
a852d0daf9
commit
37235b0013
@ -1,314 +0,0 @@
|
||||
<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="/admin" :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="openProfile" v-click-anime>
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button class="_button toggler" @click="openAccountMenu">
|
||||
<i class="fas fa-chevron-down"/>
|
||||
</button>
|
||||
<div class="post" @click="post">
|
||||
<MkButton class="button" gradate 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, signout, signoutAll } 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_form();
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
openProfile() {
|
||||
this.$router.push({ path: `/@${ this.$i.username }` })
|
||||
},
|
||||
|
||||
async openAccountMenu(ev) {
|
||||
const storedAccounts = await getAccounts().then(accounts => accounts.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); }
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
await os.popupMenu([...[{
|
||||
type: 'link',
|
||||
text: this.$ts.profile,
|
||||
to: `/@${this.$i.username}`,
|
||||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
text: this.$ts.addAccount,
|
||||
icon: 'fas fa-plus',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => {
|
||||
this.addAccount();
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => {
|
||||
this.createAccount();
|
||||
},
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.logout,
|
||||
icon: 'fas fa-sign-out-alt',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.logout,
|
||||
action: () => {
|
||||
this.signout();
|
||||
},
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => {
|
||||
this.signoutAll();
|
||||
},
|
||||
danger: true,
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
danger: true,
|
||||
}]], 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');
|
||||
},
|
||||
|
||||
async switchAccount(account: any) {
|
||||
const storedAccounts = await getAccounts();
|
||||
const token = storedAccounts.find(x => x.id === account.id).token;
|
||||
this.switchAccountWithToken(token);
|
||||
},
|
||||
|
||||
switchAccountWithToken(token: string) {
|
||||
login(token);
|
||||
},
|
||||
|
||||
signout,
|
||||
signoutAll,
|
||||
}
|
||||
});
|
||||
</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;
|
||||
bottom: 10px;
|
||||
right: 0;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
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;
|
||||
|
||||
> .name {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
> .toggler {
|
||||
position: relative;
|
||||
right: 5px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
> .right {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<div class="qvzfzxam _narrow_" v-if="component">
|
||||
<div class="container">
|
||||
<header class="header" @contextmenu.prevent.stop="onContextmenu">
|
||||
<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
|
||||
<XHeader class="title" :info="pageInfo" :with-back="false"/>
|
||||
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
|
||||
</header>
|
||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import XHeader from './friendly/header.vue';
|
||||
import * as os from '@client/os';
|
||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||
import { resolve } from '@client/router';
|
||||
import { url } from '@client/config';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XHeader
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
navHook: (path) => {
|
||||
this.navigate(path);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
path: null,
|
||||
component: null,
|
||||
props: {},
|
||||
pageInfo: null,
|
||||
history: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
url(): string {
|
||||
return url + this.path;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
if (page == null) return;
|
||||
if (page[symbols.PAGE_INFO]) {
|
||||
this.pageInfo = page[symbols.PAGE_INFO];
|
||||
}
|
||||
},
|
||||
|
||||
navigate(path, record = true) {
|
||||
if (record && this.path) this.history.push(this.path);
|
||||
this.path = path;
|
||||
const { component, props } = resolve(path);
|
||||
this.component = component;
|
||||
this.props = props;
|
||||
},
|
||||
|
||||
back() {
|
||||
this.navigate(this.history.pop(), false);
|
||||
},
|
||||
|
||||
close() {
|
||||
this.path = null;
|
||||
this.component = null;
|
||||
this.props = {};
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
os.contextMenu([{
|
||||
type: 'label',
|
||||
text: this.path,
|
||||
}, {
|
||||
icon: 'fas fa-expand-alt',
|
||||
text: this.$ts.showInPage,
|
||||
action: () => {
|
||||
this.$router.push(this.path);
|
||||
this.close();
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-window-maximize',
|
||||
text: this.$ts.openInWindow,
|
||||
action: () => {
|
||||
os.pageWindow(this.path);
|
||||
this.close();
|
||||
}
|
||||
}, null, {
|
||||
icon: 'fas fa-external-link-alt',
|
||||
text: this.$ts.openInNewTab,
|
||||
action: () => {
|
||||
window.open(this.url, '_blank');
|
||||
this.close();
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-link',
|
||||
text: this.$ts.copyLink,
|
||||
action: () => {
|
||||
copyToClipboard(this.url);
|
||||
}
|
||||
}], e);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qvzfzxam {
|
||||
$header-height: 58px; // TODO: どこかに集約したい
|
||||
|
||||
--root-margin: 16px;
|
||||
--margin: var(--marginHalf);
|
||||
|
||||
> .container {
|
||||
position: fixed;
|
||||
width: 370px;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
> .header {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
height: $header-height;
|
||||
width: 100%;
|
||||
line-height: $header-height;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
//background-color: var(--panel);
|
||||
-webkit-backdrop-filter: blur(32px);
|
||||
backdrop-filter: blur(32px);
|
||||
background-color: var(--header);
|
||||
|
||||
> ._button {
|
||||
height: $header-height;
|
||||
width: $header-height;
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,631 +0,0 @@
|
||||
<template>
|
||||
<div class="npcljfve" :class="{ iconOnly }">
|
||||
<transition name="nav-back">
|
||||
<div class="nav-back _modalBg"
|
||||
v-if="showing"
|
||||
@click="showing = isAccountMenuMode = false"
|
||||
@touchstart.passive="showing = isAccountMenuMode = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="nav">
|
||||
<nav class="nav">
|
||||
<div class="profile">
|
||||
<button v-if="!iconOnly" class="item _button account" @click="openProfile">
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button v-if="iconOnly" class="item _button account" @click="openAccountMenu">
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button v-else class="_button toggler" @click="toggleMenuMode">
|
||||
<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
|
||||
<i v-else class="fas fa-chevron-down"/>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="!isAccountMenuMode">
|
||||
<div class="post" @click="post">
|
||||
<MkButton class="button" gradate full rounded>
|
||||
<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
|
||||
</MkButton>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<MkA class="item index" active-class="active" to="/" exact v-click-anime>
|
||||
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
|
||||
</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>
|
||||
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
|
||||
<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="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
|
||||
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
|
||||
</MkA>
|
||||
<button class="item _button" @click="more" v-click-anime>
|
||||
<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
|
||||
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
|
||||
</MkA>
|
||||
<div class="divider"></div>
|
||||
<template v-if="$i.isPatron">
|
||||
<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
|
||||
</button>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<div class="about">
|
||||
<MkA class="link" to="/about" v-click-anime>
|
||||
<template v-if="isKokonect">
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
|
||||
<p v-if="iconOnly" style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><br/><span style="color: var(--pick);">NECT</span></b></p>
|
||||
<p v-else style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
|
||||
</template>
|
||||
</MkA>
|
||||
</div>
|
||||
<!--<MisskeyLogo class="misskey"/>-->
|
||||
</template>
|
||||
<template v-else>
|
||||
<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
|
||||
<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
|
||||
</button>
|
||||
<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
|
||||
<div class="divider"></div>
|
||||
<button class="item-switch-acct _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
|
||||
<button class="item-switch-acct danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
|
||||
</template>
|
||||
</nav>
|
||||
</transition>
|
||||
</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, signout, signoutAll } from '@client/account';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||
import MisskeyLogo from '@/../assets/client/misskey.svg';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
MisskeyLogo,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: host,
|
||||
accounts: [],
|
||||
connection: null,
|
||||
menuDef: menuDef,
|
||||
iconOnly: false,
|
||||
settingsWindowed: false,
|
||||
isAccountMenuMode: false,
|
||||
loadingAccounts: false,
|
||||
showing: false,
|
||||
isKokonect: null
|
||||
};
|
||||
},
|
||||
|
||||
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: {
|
||||
$route(to, from) {
|
||||
this.showing = false;
|
||||
},
|
||||
|
||||
'$store.reactiveState.menuDisplay.value'() {
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
iconOnly() {
|
||||
this.isAccountMenuMode = false;
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('resize', this.calcViewState);
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const sticky = new StickySidebar(this.$el.parentElement, 16);
|
||||
window.addEventListener('scroll', () => {
|
||||
sticky.calc(window.scrollY);
|
||||
}, { passive: true });
|
||||
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcViewState() {
|
||||
this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
|
||||
this.settingsWindowed = (window.innerWidth > 1400);
|
||||
},
|
||||
|
||||
show() {
|
||||
this.showing = true;
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
openProfile() {
|
||||
this.$router.push({ path: `/@${ this.$i.username }` })
|
||||
},
|
||||
|
||||
async fetchAccounts() {
|
||||
this.loadingAccounts = true;
|
||||
this.accounts = await os.getAccounts();
|
||||
this.loadingAccounts = false;
|
||||
},
|
||||
|
||||
toggleMenuMode() {
|
||||
this.isAccountMenuMode = !this.isAccountMenuMode;
|
||||
if (this.isAccountMenuMode) {
|
||||
this.fetchAccounts();
|
||||
}
|
||||
},
|
||||
|
||||
async openAccountMenu(ev) {
|
||||
const storedAccounts = await getAccounts().then(accounts => accounts.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.popupMenu([...[{
|
||||
type: 'link',
|
||||
text: this.$ts.profile,
|
||||
to: `/@${ this.$i.username }`,
|
||||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
text: this.$ts.addAccount,
|
||||
icon: 'fas fa-plus',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.logout,
|
||||
icon: 'fas fa-sign-out-alt',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
danger: true,
|
||||
}]], 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');
|
||||
},
|
||||
|
||||
async switchAccount(account: any) {
|
||||
const storedAccounts = await getAccounts();
|
||||
const token = storedAccounts.find(x => x.id === account.id).token;
|
||||
this.switchAccountWithToken(token);
|
||||
},
|
||||
|
||||
switchAccountWithToken(token: string) {
|
||||
login(token);
|
||||
},
|
||||
|
||||
patron() {
|
||||
window.open("https://www.patreon.com/noridev", "_blank");
|
||||
},
|
||||
|
||||
async init() {
|
||||
const meta = await os.api('meta', { detail: true });
|
||||
this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
|
||||
},
|
||||
|
||||
async openDrawerAccountMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
async openSignoutMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
signout,
|
||||
signoutAll,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.npcljfve {
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$nav-icon-only-width: 78px; // TODO: どこかに集約したい
|
||||
$avatar-size: 46px;
|
||||
$avatar-margin: 8px;
|
||||
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
width: 260px;
|
||||
|
||||
&.iconOnly {
|
||||
flex: 0 0 $nav-icon-only-width;
|
||||
width: $nav-icon-only-width !important;
|
||||
|
||||
> .nav {
|
||||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
> .post {
|
||||
> .button {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: (850px)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $ui-font-size * 1.1;
|
||||
line-height: 3.7rem;
|
||||
overflow: unset;
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
> .text,
|
||||
.name,
|
||||
.patron-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 11px;
|
||||
left: 33px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .nav {
|
||||
> .divider {
|
||||
margin: 10px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .post {
|
||||
position: sticky;
|
||||
top: 65px;
|
||||
z-index: 1;
|
||||
padding: 16px 0;
|
||||
background: var(--bg);
|
||||
|
||||
> .button {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .about {
|
||||
fill: currentColor;
|
||||
padding: 8px 0 16px 0;
|
||||
text-align: center;
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
//width: 32px;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.6rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
margin-left: 3px;
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
margin-left: unset;
|
||||
margin-right: $avatar-margin;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin-left: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
color: var(--patron);
|
||||
}
|
||||
|
||||
> .patron-text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
}
|
||||
|
||||
> .item-switch-acct {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: 12px;
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
margin-left: 3px;
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
margin-left: unset;
|
||||
margin-right: $avatar-margin;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
> .patron-button {
|
||||
background: unset;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
> .profile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: var(--bg);
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
> .item {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.6rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
margin-left: 3px;
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
margin-left: unset;
|
||||
margin-right: $avatar-margin;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
}
|
||||
|
||||
> .account {
|
||||
padding: 10px 20px 0 0;
|
||||
}
|
||||
|
||||
> .toggler {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
z-index: 400;
|
||||
}
|
||||
}
|
||||
|
||||
> .account {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,612 +0,0 @@
|
||||
<template>
|
||||
<div class="mk-app" :class="{ wallpaper, isMobile }">
|
||||
<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" :style="{ background: pageInfo?.bg }">
|
||||
<header class="header">
|
||||
<XHeader @kn-drawernav="showDrawerNav" :info="pageInfo" :back-button="true" @back="back()"/>
|
||||
</header>
|
||||
<div class="content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
|
||||
<keep-alive :include="['timeline']">
|
||||
<component :is="Component" :ref="changePage"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
|
||||
<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button v-if="fabButton && !(isDesktop || isWideTablet)" class="fab _buttonPrimary" :class="{ navHidden }" @click="onFabClicked" v-click-anime><i :key="fabIcon" :class="fabIcon"/></button>
|
||||
|
||||
<div class="buttons" v-if="isMobile">
|
||||
<!-- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
|
||||
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button explore _button" @click="$route.name === 'explore' ? top() : $router.replace('/explore')" :class="{ active: $route.name === 'explore' }"><i class="fas fa-hashtag"/></button>
|
||||
<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
|
||||
<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
|
||||
</div>
|
||||
|
||||
<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
|
||||
|
||||
<transition name="tray-back">
|
||||
<div class="tray-back _modalBg"
|
||||
v-if="widgetsShowing"
|
||||
@click="widgetsShowing = false"
|
||||
@touchstart.passive="widgetsShowing = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="tray">
|
||||
<XWidgets v-if="widgetsShowing" class="tray"/>
|
||||
</transition>
|
||||
|
||||
<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
|
||||
|
||||
<XCommon/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
|
||||
import { instanceName } from '@client/config';
|
||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||
import XSidebar from './friendly.sidebar.vue';
|
||||
import XDrawerSidebar from './sidebar.vue';
|
||||
import XCommon from '../_common_/common.vue';
|
||||
import XHeader from './header.vue';
|
||||
import * as os from '@client/os';
|
||||
import { menuDef } from '@client/menu';
|
||||
import * as symbols from '@client/symbols';
|
||||
import XTimeline from '@client/components/timeline.vue';
|
||||
import { eventBus } from '@client/friendly/eventBus';
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const WIDE_TABLET_THRESHOLD = 850;
|
||||
const MOBILE_THRESHOLD = 600;
|
||||
|
||||
localStorage.setItem('ui', 'friendly');
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XCommon,
|
||||
XSidebar,
|
||||
XDrawerSidebar,
|
||||
XHeader,
|
||||
XTimeline,
|
||||
XHeaderMenu: defineAsyncComponent(() => import('./friendly.header.vue')),
|
||||
XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue'))
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
shouldHeaderThin: this.showMenuOnTop,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
pageInfo: null,
|
||||
menuDef: menuDef,
|
||||
navHidden: false,
|
||||
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
||||
isWideTablet: window.innerWidth >= WIDE_TABLET_THRESHOLD,
|
||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||
widgetsShowing: false,
|
||||
fullView: false,
|
||||
wallpaper: localStorage.getItem('wallpaper') != null,
|
||||
queue: 0,
|
||||
routeList: [
|
||||
'index',
|
||||
'explore',
|
||||
'notifications',
|
||||
'messaging',
|
||||
'user',
|
||||
'drive',
|
||||
'clips',
|
||||
'pages',
|
||||
'ads',
|
||||
'gallery',
|
||||
'channels',
|
||||
'groups',
|
||||
'antennas'
|
||||
],
|
||||
fabButton: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
navIndicated(): boolean {
|
||||
for (const def in this.menuDef) {
|
||||
if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
|
||||
if (this.menuDef[def].indicated) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
fabIcon() {
|
||||
return this.pageInfo && this.pageInfo.action ? this.pageInfo.action.icon : 'fas fa-pencil-alt';
|
||||
},
|
||||
|
||||
showMenuOnTop(): boolean {
|
||||
return !this.isMobile && this.$store.state.menuDisplay === 'top';
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
document.documentElement.style.overflowY = 'scroll';
|
||||
|
||||
if (this.$store.state.widgets.length === 0) {
|
||||
this.$store.set('widgets', [{
|
||||
name: 'calendar',
|
||||
id: 'a', place: null, data: {}
|
||||
}, {
|
||||
name: 'notifications',
|
||||
id: 'b', place: null, data: {}
|
||||
}, {
|
||||
name: 'trends',
|
||||
id: 'c', place: null, data: {}
|
||||
}]);
|
||||
}
|
||||
|
||||
eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
|
||||
eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
|
||||
this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
|
||||
}, { passive: true });
|
||||
|
||||
this.navHidden = this.isMobile;
|
||||
|
||||
if (this.$store.state.aiChanMode) {
|
||||
const iframeRect = this.$refs.live2d.getBoundingClientRect();
|
||||
window.addEventListener('mousemove', ev => {
|
||||
this.$refs.live2d.contentWindow.postMessage({
|
||||
type: 'moveCursor',
|
||||
body: {
|
||||
x: ev.clientX - iframeRect.left,
|
||||
y: ev.clientY - iframeRect.top,
|
||||
}
|
||||
}, '*');
|
||||
}, { passive: true });
|
||||
window.addEventListener('touchmove', ev => {
|
||||
this.$refs.live2d.contentWindow.postMessage({
|
||||
type: 'moveCursor',
|
||||
body: {
|
||||
x: ev.touches[0].clientX - iframeRect.left,
|
||||
y: ev.touches[0].clientY - iframeRect.top,
|
||||
}
|
||||
}, '*');
|
||||
}, { passive: true });
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
if (page == null) return;
|
||||
if (page[symbols.PAGE_INFO]) {
|
||||
this.pageInfo = page[symbols.PAGE_INFO];
|
||||
document.title = `${this.pageInfo.title} | ${instanceName}`;
|
||||
this.fabButton = this.routeList.includes(this.$route.name);
|
||||
}
|
||||
},
|
||||
|
||||
attachSticky(ref) {
|
||||
const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
|
||||
window.addEventListener('scroll', () => {
|
||||
sticky.calc(window.scrollY);
|
||||
}, { passive: true });
|
||||
},
|
||||
|
||||
top() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
back() {
|
||||
history.back();
|
||||
},
|
||||
|
||||
showDrawerNav() {
|
||||
this.$refs.drawerNav.show();
|
||||
},
|
||||
|
||||
onTransition() {
|
||||
if (window._scroll) window._scroll();
|
||||
},
|
||||
|
||||
onHeaderClick() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(e.target)) return;
|
||||
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
|
||||
if (window.getSelection().toString() !== '') return;
|
||||
const path = this.$route.path;
|
||||
os.contextMenu([{
|
||||
type: 'label',
|
||||
text: path,
|
||||
}, {
|
||||
icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
|
||||
text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
|
||||
action: () => {
|
||||
this.fullView = !this.fullView;
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-window-maximize',
|
||||
text: this.$ts.openInWindow,
|
||||
action: () => {
|
||||
os.pageWindow(path);
|
||||
}
|
||||
}], e);
|
||||
},
|
||||
|
||||
queueUpdated(q) {
|
||||
this.queue = q;
|
||||
},
|
||||
|
||||
queueReset() {
|
||||
this.queue = 0;
|
||||
},
|
||||
|
||||
onFabClicked(e) {
|
||||
if (this.pageInfo && this.pageInfo.action) {
|
||||
this.pageInfo.action.handler(e);
|
||||
} else {
|
||||
os.post_form();
|
||||
}
|
||||
},
|
||||
|
||||
onAiClick(ev) {
|
||||
//if (this.live2d) this.live2d.click(ev);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tray-enter-active,
|
||||
.tray-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.tray-enter-from,
|
||||
.tray-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(240px);
|
||||
}
|
||||
|
||||
.tray-back-enter-active,
|
||||
.tray-back-leave-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.tray-back-enter-from,
|
||||
.tray-back-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mk-app {
|
||||
$nav-hide-threshold: 600px;
|
||||
$header-height: 60px;
|
||||
$ui-font-size: 1em;
|
||||
$widgets-hide-threshold: 1200px;
|
||||
$nav-icon-only-width: 78px; // TODO: どこかに集約したい
|
||||
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
box-sizing: border-box;
|
||||
|
||||
&.wallpaper {
|
||||
background: var(--wallpaperOverlay);
|
||||
//backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
&.isMobile {
|
||||
> .columns {
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
||||
> .main {
|
||||
margin: 0;
|
||||
padding-bottom: 92px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
|
||||
> .header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
> .button {
|
||||
&:hover {
|
||||
background: var(--panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .columns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
//margin: 32px 0;
|
||||
|
||||
&.fullView {
|
||||
margin: 0;
|
||||
|
||||
> .sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
min-width: 0;
|
||||
width: 750px;
|
||||
margin: 0 16px 0 0;
|
||||
background: var(--bg);
|
||||
box-shadow: 0 0 0 1px var(--divider);
|
||||
border-radius: 0;
|
||||
border: initial;
|
||||
--margin: 12px;
|
||||
|
||||
> .header {
|
||||
position: sticky;
|
||||
z-index: 1000;
|
||||
top: var(--globalHeaderHeight, 0px);
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
-webkit-backdrop-filter: blur(32px);
|
||||
backdrop-filter: blur(32px);
|
||||
background-color: var(--header);
|
||||
}
|
||||
|
||||
> .content {
|
||||
background: var(--bg);
|
||||
--stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
padding-top: $header-height;
|
||||
|
||||
> .header {
|
||||
position: fixed;
|
||||
width: calc(100% - #{$nav-icon-only-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
//--panelShadow: none;
|
||||
width: 300px;
|
||||
margin-top: 16px;
|
||||
|
||||
@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;
|
||||
|
||||
> .sidebar {
|
||||
border-right: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .fab {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
right: calc(32px + var(--margin) * 2 + 300px);
|
||||
bottom: 32px;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 100%;
|
||||
// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
font-size: 22px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
|
||||
@media (max-width: $widgets-hide-threshold) {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: $nav-hide-threshold) {
|
||||
bottom: calc(66px + env(safe-area-inset-bottom));
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: (850px) + 1px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: (600px) + 1px) {
|
||||
bottom: calc(45px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
bottom: 0;
|
||||
//padding: 16px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-backdrop-filter: blur(32px);
|
||||
backdrop-filter: blur(32px);
|
||||
background-color: var(--header);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
||||
> .button {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
//padding: 0;
|
||||
margin: auto;
|
||||
height: 50px;
|
||||
//border-radius: 8px;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
|
||||
padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
|
||||
|
||||
&:not(:last-child) {
|
||||
//margin-right: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 300px) {
|
||||
height: 60px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--X2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
> .indicator,
|
||||
.indicator-home {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 20px;
|
||||
color: var(--indicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .indicator-home {
|
||||
top: 8px;
|
||||
right: 25px;
|
||||
font-size: 6px;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
|
||||
> * {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tray-back {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
> .tray {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
padding: var(--margin);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
> .ivnzpscs {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div class="ddiqwdnk">
|
||||
<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 v-if="($i.isPatron && !$store.state.removeAds) || !$i.isPatron" 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>
|
||||
<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
||||
import XWidgets from '@client/components/widgets.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XWidgets
|
||||
},
|
||||
|
||||
props: {
|
||||
place: {
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['mounted'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
editMode: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$emit('mounted', this.$el);
|
||||
},
|
||||
|
||||
methods: {
|
||||
addWidget(widget) {
|
||||
this.$store.set('widgets', [{
|
||||
...widget,
|
||||
place: this.place,
|
||||
}, ...this.$store.state.widgets]);
|
||||
},
|
||||
|
||||
removeWidget(widget) {
|
||||
this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
|
||||
},
|
||||
|
||||
updateWidget({ id, data }) {
|
||||
this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
|
||||
...w,
|
||||
data: data
|
||||
} : w));
|
||||
},
|
||||
|
||||
updateWidgets(widgets) {
|
||||
this.$store.set('widgets', [
|
||||
...this.$store.state.widgets.filter(w => w.place !== this.place),
|
||||
...widgets
|
||||
]);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ddiqwdnk {
|
||||
position: sticky;
|
||||
height: min-content;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 8px;
|
||||
|
||||
> .widgets,
|
||||
> .a {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
> .edit {
|
||||
display: block;
|
||||
margin: 28px auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,465 +0,0 @@
|
||||
<template>
|
||||
<div class="fdidabkb" :class="{ slim: titleOnly || narrow }" :style="`--height:${height};`" :key="key">
|
||||
<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
|
||||
<div class="buttons left" v-if="backButton && canBack && !fabButton">
|
||||
<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="buttons left" v-if="isMobile">
|
||||
<button class="_button button" v-if="!(backButton && canBack) || fabButton" @click="showDrawerNav">
|
||||
<MkAvatar class="avatar" v-if="!canBack || menuBar" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
|
||||
<!-- <i class="fas fa-bars"/> -->
|
||||
<div v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></div>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="info">
|
||||
<div class="titleContainer" :class="{ center: $route.name !== 'user' }" @click="showTabsPopup">
|
||||
<template v-if="info.tabs">
|
||||
<template v-if="$route.name === 'user'">
|
||||
<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
|
||||
<div class="title_user">
|
||||
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
|
||||
<div class="subtitle" v-if="!narrow && info.subtitle">
|
||||
{{ info.subtitle }}
|
||||
</div>
|
||||
<div class="subtitle activeTab" v-if="narrow && hasTabs">
|
||||
{{ info.tabs.find(tab => tab.active)?.title }}
|
||||
<i class="chevron fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="title tabs" v-else v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
|
||||
<i v-if="tab.icon" class="fa-fw" :class="tab.icon" :key="tab.icon"/>
|
||||
<span v-if="tab.title" class="title">{{ tab.title }}</span>
|
||||
<i class="fas fa-circle indicator" v-if="tab.indicate"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<i v-if="info.icon" class="icon" :class="info.icon"></i>
|
||||
<div class="title">
|
||||
<div v-if="info.title" class="title">{{ info.title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tabs" v-if="!narrow && $route.name !== 'index'">
|
||||
<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
|
||||
<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
|
||||
<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="buttons right">
|
||||
<button v-if="queue > 0 && $route.name === 'index' && ($store.state.newNoteNotiBehavior === 'smail' || $store.state.newNoteNotiBehavior === 'header')" :class="{ 'new _button': $store.state.newNoteNotiBehavior === 'header', 'new-hover _buttonPrimary': $store.state.newNoteNotiBehavior === 'smail' }" @click="top" v-click-anime><i class="fas fa-chevron-up"></i></button>
|
||||
<template v-if="info && info.actions && !narrow">
|
||||
<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
|
||||
</template>
|
||||
<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
|
||||
<button v-if="closeButton" class="_button button" @click.stop="$emit('close')" @touchstart="preventDrag" v-tooltip="$ts.close"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { popupMenu } from '@client/os';
|
||||
import { url } from '@client/config';
|
||||
import { eventBus } from "@client/friendly/eventBus";
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const MOBILE_THRESHOLD = 600;
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
info: {
|
||||
required: true
|
||||
},
|
||||
menu: {
|
||||
required: false
|
||||
},
|
||||
backButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
closeButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
titleOnly: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
showIndicator: {
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||
canBack: false,
|
||||
narrow: false,
|
||||
height: 0,
|
||||
key: 0,
|
||||
queue: 0,
|
||||
routeList: [
|
||||
'explore',
|
||||
'notifications',
|
||||
'messaging'
|
||||
],
|
||||
fabButton: false,
|
||||
menuBar: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasTabs(): boolean {
|
||||
return this.info.tabs && this.info.tabs.length > 0;
|
||||
},
|
||||
|
||||
shouldShowMenu() {
|
||||
if (this.info == null) return false;
|
||||
if (this.info.actions != null && this.narrow) return true;
|
||||
if (this.info.menu != null) return true;
|
||||
if (this.info.share != null) return true;
|
||||
if (this.menu != null) return true;
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
info() {
|
||||
this.key++;
|
||||
},
|
||||
|
||||
$route: {
|
||||
handler(to, from) {
|
||||
this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
|
||||
this.fabButton = this.routeList.includes(this.$route.name);
|
||||
this.menuBar = this.routeList.includes(this.$route.name);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
|
||||
eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.height = this.$el.parentElement.offsetHeight + 'px';
|
||||
this.narrow = this.titleOnly || window.innerWidth < 600;
|
||||
new ResizeObserver((entries, observer) => {
|
||||
this.height = this.$el.parentElement.offsetHeight + 'px';
|
||||
this.narrow = this.titleOnly || window.innerWidth < 600;
|
||||
}).observe(this.$el);
|
||||
},
|
||||
|
||||
methods: {
|
||||
share() {
|
||||
navigator.share({
|
||||
url: url + this.info.path,
|
||||
...this.info.share,
|
||||
});
|
||||
},
|
||||
|
||||
showDrawerNav() {
|
||||
this.$emit('kn-drawernav');
|
||||
},
|
||||
|
||||
onHeaderClick() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
showMenu(ev) {
|
||||
let menu = this.info.menu ? this.info.menu() : [];
|
||||
if (!this.narrow && this.info.actions) {
|
||||
menu = [...this.info.actions.map(x => ({
|
||||
text: x.text,
|
||||
icon: x.icon,
|
||||
action: x.handler
|
||||
})), menu.length > 0 ? null : undefined, ...menu];
|
||||
}
|
||||
if (this.info.share) {
|
||||
if (menu.length > 0) menu.push(null);
|
||||
menu.push({
|
||||
text: this.$ts.share,
|
||||
icon: 'fas fa-share-alt',
|
||||
action: this.share
|
||||
});
|
||||
}
|
||||
if (this.menu) {
|
||||
if (menu.length > 0) menu.push(null);
|
||||
menu = menu.concat(this.menu);
|
||||
}
|
||||
popupMenu(menu, ev.currentTarget || ev.target);
|
||||
},
|
||||
|
||||
showTabsPopup(ev) {
|
||||
if (!this.hasTabs) return;
|
||||
if (!this.narrow) return;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const menu = this.info.tabs.map(tab => ({
|
||||
text: tab.title,
|
||||
icon: tab.icon,
|
||||
action: tab.onClick,
|
||||
}));
|
||||
popupMenu(menu, ev.currentTarget || ev.target);
|
||||
},
|
||||
|
||||
preventDrag(ev) {
|
||||
ev.stopPropagation();
|
||||
},
|
||||
|
||||
queueUpdated(q) {
|
||||
this.queue = q;
|
||||
},
|
||||
|
||||
queueReset() {
|
||||
this.queue = 0;
|
||||
},
|
||||
|
||||
top() {
|
||||
this.onHeaderClick();
|
||||
this.queueReset();
|
||||
eventBus.emit('kn-header-new-queue-reset', 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fdidabkb {
|
||||
$ui-font-size: 1em;
|
||||
$avatar-size: 32px;
|
||||
$avatar-margin: 10px;
|
||||
|
||||
display: flex;
|
||||
|
||||
&.slim {
|
||||
text-align: center;
|
||||
|
||||
> .titleContainer {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
&.left, &.right {
|
||||
>.button {
|
||||
height: var(--height);
|
||||
width: var(--height);
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
> .button {
|
||||
height: var(--height);
|
||||
width: var(--height);
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 13px;
|
||||
left: 43px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .new {
|
||||
width: $avatar-size;
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
> .new-hover {
|
||||
position: absolute;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
top: 55px;
|
||||
right: 14px;
|
||||
border-radius: 100%;
|
||||
// border: 2px solid var(--patron);
|
||||
line-height: 0;
|
||||
background: var(--pick);
|
||||
margin-top: 10px;
|
||||
// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:hover {
|
||||
background: var(--pickLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
width: var(--height);
|
||||
}
|
||||
}
|
||||
|
||||
> .titleContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
height: var(--height);
|
||||
flex-shrink: 0;
|
||||
|
||||
> .avatar {
|
||||
$size: 32px;
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: bottom;
|
||||
margin: 0 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
> .title,
|
||||
.title_user {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 7px;
|
||||
color: var(--indicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
margin-left: 0.5em;
|
||||
color: var(--patron);
|
||||
}
|
||||
|
||||
> .subtitle {
|
||||
opacity: 0.6;
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.activeTab {
|
||||
text-align: center;
|
||||
|
||||
> .chevron {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&._button {
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow: 0 -2px 0 0 var(--accent) inset;
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> .title_user {
|
||||
min-width: 0;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
&.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
> .tabs {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> .tabs {
|
||||
margin-left: 16px;
|
||||
font-size: 0.8em;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
> .tab {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
> .icon + .title {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,735 +0,0 @@
|
||||
<template>
|
||||
<div class="mvcprjjd">
|
||||
<transition name="nav-back">
|
||||
<div class="nav-back _modalBg"
|
||||
v-if="showing"
|
||||
@click="showing = isAccountMenuMode = false"
|
||||
@touchstart.passive="showing = isAccountMenuMode = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="nav">
|
||||
<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
|
||||
<div>
|
||||
<div class="profile">
|
||||
<button class="item _button account" @click="openProfile">
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
|
||||
<i class="fas fa-ellipsis-v"/>
|
||||
</button>
|
||||
<button v-else class="_button toggler" @click="toggleMenuMode">
|
||||
<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
|
||||
<i v-else class="fas fa-chevron-down"/>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="!isAccountMenuMode">
|
||||
<div class="divider"></div>
|
||||
<MkA class="item index" active-class="active" to="/" exact v-click-anime>
|
||||
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
|
||||
</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: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
|
||||
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
|
||||
<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="/admin" v-click-anime>
|
||||
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
|
||||
</MkA>
|
||||
<button class="item _button" @click="more" v-click-anime>
|
||||
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
<MkA class="item" active-class="active" to="/settings" v-click-anime>
|
||||
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
|
||||
</MkA>
|
||||
<!-- <button class="item _button post" @click="post">
|
||||
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
|
||||
</button> -->
|
||||
<div class="divider"></div>
|
||||
<template v-if="$i.isPatron">
|
||||
<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
|
||||
</button>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<div class="about">
|
||||
<MkA class="link" to="/about" v-click-anime>
|
||||
<template v-if="isKokonect">
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
|
||||
<p style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
|
||||
</template>
|
||||
</MkA>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
|
||||
<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
|
||||
</button>
|
||||
<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
|
||||
<div class="divider" v-if="accounts.length > 0"></div>
|
||||
<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
|
||||
<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</nav>
|
||||
</transition>
|
||||
</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/friendly/menu-mobile';
|
||||
import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
defaultHidden: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: host,
|
||||
showing: false,
|
||||
accounts: [],
|
||||
connection: null,
|
||||
menuDef: menuDef,
|
||||
iconOnly: false,
|
||||
hidden: this.defaultHidden,
|
||||
isAccountMenuMode: false,
|
||||
loadingAccounts: false,
|
||||
isKokonect: null
|
||||
};
|
||||
},
|
||||
|
||||
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: {
|
||||
$route(to, from) {
|
||||
this.showing = false;
|
||||
},
|
||||
|
||||
'$store.reactiveState.menuDisplay.value'() {
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
iconOnly() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
},
|
||||
|
||||
hidden() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('resize', this.calcViewState);
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcViewState() {
|
||||
this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
|
||||
if (!this.defaultHidden) {
|
||||
this.hidden = (window.innerWidth <= 650);
|
||||
}
|
||||
},
|
||||
|
||||
show() {
|
||||
this.showing = true;
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
openProfile() {
|
||||
this.$router.push({ path: `/@${ this.$i.username }` })
|
||||
},
|
||||
|
||||
async fetchAccounts() {
|
||||
this.loadingAccounts = true;
|
||||
this.accounts = await os.getAccounts();
|
||||
this.loadingAccounts = false;
|
||||
},
|
||||
|
||||
toggleMenuMode() {
|
||||
this.isAccountMenuMode = !this.isAccountMenuMode;
|
||||
if (this.isAccountMenuMode) {
|
||||
this.fetchAccounts();
|
||||
}
|
||||
},
|
||||
|
||||
async openAccountMenu(ev) {
|
||||
const storedAccounts = await getAccounts().then(accounts => accounts.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.popupMenu([...[{
|
||||
type: 'link',
|
||||
text: this.$ts.profile,
|
||||
to: `/@${ this.$i.username }`,
|
||||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
text: this.$ts.addAccount,
|
||||
icon: 'fas fa-plus',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.logout,
|
||||
icon: 'fas fa-sign-out-alt',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
danger: true,
|
||||
}]], 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');
|
||||
},
|
||||
|
||||
async switchAccount(account: any) {
|
||||
const storedAccounts = await getAccounts();
|
||||
const token = storedAccounts.find(x => x.id === account.id).token;
|
||||
this.switchAccountWithToken(token);
|
||||
},
|
||||
|
||||
switchAccountWithToken(token: string) {
|
||||
login(token);
|
||||
},
|
||||
|
||||
patron() {
|
||||
window.open("https://www.patreon.com/noridev", "_blank");
|
||||
},
|
||||
|
||||
async init() {
|
||||
const meta = await os.api('meta', { detail: true });
|
||||
this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
|
||||
},
|
||||
|
||||
async openDrawerAccountMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
async openSignoutMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
signout,
|
||||
signoutAll,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-enter-active,
|
||||
.nav-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-enter-from,
|
||||
.nav-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
.nav-back-enter-active,
|
||||
.nav-back-leave-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-back-enter-from,
|
||||
.nav-back-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mvcprjjd {
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$nav-width: 250px;
|
||||
$nav-icon-only-width: 86px;
|
||||
|
||||
> .nav-back {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
> .nav {
|
||||
$avatar-size: 38px;
|
||||
$avatar-margin: 8px;
|
||||
|
||||
flex: 0 0 $nav-width;
|
||||
width: $nav-width;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.iconOnly {
|
||||
flex: 0 0 $nav-icon-only-width;
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
&:not(.hidden) {
|
||||
> div {
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
padding: 18px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $ui-font-size * 1.1;
|
||||
line-height: initial;
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
> i {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .text,
|
||||
.patron-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
> i, > .text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
&:not(.hidden) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
width: $nav-width;
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overflow-x: clip;
|
||||
background: var(--navBg);
|
||||
|
||||
> .divider {
|
||||
margin: 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .about {
|
||||
fill: currentColor;
|
||||
padding: 8px 0 16px 0;
|
||||
text-align: center;
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
//width: 32px;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 24px;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.85rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 20px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .text {
|
||||
position: relative;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin-left: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
color: var(--patron);
|
||||
}
|
||||
|
||||
> .patron-text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 24px);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 8px;
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
margin-top: 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
color: var(--fgOnAccent);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
background: var(--accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item-switch-acct,
|
||||
> .item-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 24px 0;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
> .item-button {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
> .profile {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
> .item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 24px 0;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
}
|
||||
|
||||
> .toggler {
|
||||
//position: absolute;
|
||||
//right: 15px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 12px 15px 0 0;
|
||||
padding: 10px;
|
||||
z-index: 400;
|
||||
}
|
||||
}
|
||||
|
||||
> .patron-button {
|
||||
background: unset;
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<div class="qvzfzxam _narrow_" v-if="component">
|
||||
<div class="container">
|
||||
<header class="header" @contextmenu.prevent.stop="onContextmenu">
|
||||
<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
|
||||
<XHeader class="title" :info="pageInfo" :with-back="false"/>
|
||||
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
|
||||
</header>
|
||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import XHeader from './friendly/header.vue';
|
||||
import * as os from '@client/os';
|
||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||
import { resolve } from '@client/router';
|
||||
import { url } from '@client/config';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XHeader
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
navHook: (path) => {
|
||||
this.navigate(path);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
path: null,
|
||||
component: null,
|
||||
props: {},
|
||||
pageInfo: null,
|
||||
history: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
url(): string {
|
||||
return url + this.path;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
if (page == null) return;
|
||||
if (page[symbols.PAGE_INFO]) {
|
||||
this.pageInfo = page[symbols.PAGE_INFO];
|
||||
}
|
||||
},
|
||||
|
||||
navigate(path, record = true) {
|
||||
if (record && this.path) this.history.push(this.path);
|
||||
this.path = path;
|
||||
const { component, props } = resolve(path);
|
||||
this.component = component;
|
||||
this.props = props;
|
||||
},
|
||||
|
||||
back() {
|
||||
this.navigate(this.history.pop(), false);
|
||||
},
|
||||
|
||||
close() {
|
||||
this.path = null;
|
||||
this.component = null;
|
||||
this.props = {};
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
os.contextMenu([{
|
||||
type: 'label',
|
||||
text: this.path,
|
||||
}, {
|
||||
icon: 'fas fa-expand-alt',
|
||||
text: this.$ts.showInPage,
|
||||
action: () => {
|
||||
this.$router.push(this.path);
|
||||
this.close();
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-window-maximize',
|
||||
text: this.$ts.openInWindow,
|
||||
action: () => {
|
||||
os.pageWindow(this.path);
|
||||
this.close();
|
||||
}
|
||||
}, null, {
|
||||
icon: 'fas fa-external-link-alt',
|
||||
text: this.$ts.openInNewTab,
|
||||
action: () => {
|
||||
window.open(this.url, '_blank');
|
||||
this.close();
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-link',
|
||||
text: this.$ts.copyLink,
|
||||
action: () => {
|
||||
copyToClipboard(this.url);
|
||||
}
|
||||
}], e);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qvzfzxam {
|
||||
$header-height: 58px; // TODO: どこかに集約したい
|
||||
|
||||
--root-margin: 16px;
|
||||
--margin: var(--marginHalf);
|
||||
|
||||
> .container {
|
||||
position: fixed;
|
||||
width: 370px;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
> .header {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
height: $header-height;
|
||||
width: 100%;
|
||||
line-height: $header-height;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
//background-color: var(--panel);
|
||||
-webkit-backdrop-filter: blur(32px);
|
||||
backdrop-filter: blur(32px);
|
||||
background-color: var(--header);
|
||||
|
||||
> ._button {
|
||||
height: $header-height;
|
||||
width: $header-height;
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,426 +0,0 @@
|
||||
<template>
|
||||
<div class="npcljfve" :class="{ iconOnly }">
|
||||
<button class="item _button account profile" @click="openProfile" @contextmenu.stop.prevent="openAccountMenu" v-click-anime>
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<div class="post" @click="post">
|
||||
<MkButton class="button" gradate full rounded>
|
||||
<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
|
||||
</MkButton>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<MkA class="item index" active-class="active" to="/" exact v-click-anime>
|
||||
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
|
||||
</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>
|
||||
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
|
||||
<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="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
|
||||
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
|
||||
</MkA>
|
||||
<button class="item _button" @click="more" v-click-anime>
|
||||
<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
|
||||
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
|
||||
</MkA>
|
||||
<div class="divider"></div>
|
||||
<template v-if="$i.isPatron">
|
||||
<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
|
||||
</button>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<div class="about">
|
||||
<MkA class="link" to="/about" v-click-anime>
|
||||
<template v-if="isKokonect">
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
|
||||
<p v-if="iconOnly" style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><br/><span style="color: var(--pick);">NECT</span></b></p>
|
||||
<p v-else style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
|
||||
</template>
|
||||
</MkA>
|
||||
</div>
|
||||
<!--<MisskeyLogo class="misskey"/>-->
|
||||
</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';
|
||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||
import MisskeyLogo from '@/../assets/client/misskey.svg';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
MisskeyLogo,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: host,
|
||||
accounts: [],
|
||||
connection: null,
|
||||
menuDef: menuDef,
|
||||
iconOnly: false,
|
||||
settingsWindowed: false,
|
||||
isKokonect: null
|
||||
};
|
||||
},
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
iconOnly() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('resize', this.calcViewState);
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const sticky = new StickySidebar(this.$el.parentElement, 16);
|
||||
window.addEventListener('scroll', () => {
|
||||
sticky.calc(window.scrollY);
|
||||
}, { passive: true });
|
||||
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcViewState() {
|
||||
this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
|
||||
this.settingsWindowed = (window.innerWidth > 1400);
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
openProfile() {
|
||||
this.$router.push({ path: `/@${ this.$i.username }` })
|
||||
},
|
||||
|
||||
async openAccountMenu(ev) {
|
||||
const storedAccounts = (await 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); }
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
await os.popupMenu([...[{
|
||||
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.popupMenu([{
|
||||
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);
|
||||
},
|
||||
|
||||
patron() {
|
||||
window.open("https://www.patreon.com/noridev", "_blank");
|
||||
},
|
||||
|
||||
async init() {
|
||||
const meta = await os.api('meta', { detail: true });
|
||||
this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.npcljfve {
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$nav-icon-only-width: 78px; // TODO: どこかに集約したい
|
||||
$avatar-size: 46px;
|
||||
$avatar-margin: 8px;
|
||||
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
width: 260px;
|
||||
|
||||
&.iconOnly {
|
||||
flex: 0 0 $nav-icon-only-width;
|
||||
width: $nav-icon-only-width !important;
|
||||
|
||||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
> .post {
|
||||
> .button {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: (850px)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $ui-font-size * 1.1;
|
||||
line-height: 3.7rem;
|
||||
overflow: unset;
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
> .text,
|
||||
.name,
|
||||
.patron-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 11px;
|
||||
left: 33px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .divider {
|
||||
margin: 10px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .post {
|
||||
position: sticky;
|
||||
top: 65px;
|
||||
z-index: 1;
|
||||
padding: 16px 0;
|
||||
background: var(--bg);
|
||||
|
||||
> .button {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .about {
|
||||
fill: currentColor;
|
||||
padding: 8px 0 16px 0;
|
||||
text-align: center;
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
//width: 32px;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.6rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
margin-left: 3px;
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
margin-left: unset;
|
||||
margin-right: $avatar-margin;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin-left: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
color: var(--patron);
|
||||
}
|
||||
|
||||
> .patron-text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
}
|
||||
|
||||
> .patron-button {
|
||||
background: unset;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
> .profile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: var(--bg);
|
||||
padding: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,581 +0,0 @@
|
||||
<template>
|
||||
<div class="mk-app" :class="{ wallpaper, isMobile }">
|
||||
<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" :style="{ background: pageInfo?.bg }">
|
||||
<header class="header">
|
||||
<XHeader @kn-drawernav="showDrawerNav" :info="pageInfo"/>
|
||||
</header>
|
||||
<div class="content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
|
||||
<keep-alive :include="['timeline']">
|
||||
<component :is="Component" :ref="changePage"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
|
||||
<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="floatbtn" v-if="!isDesktop">
|
||||
<button v-if="$route.name === 'index' || $route.name === 'notifications' || $route.name === 'user'" class="post _buttonPrimary" @click="post()" v-click-anime><i class="fas fa-pencil-alt"/></button>
|
||||
<button v-if="$route.name === 'messaging'" class="post _buttonPrimary" @click="createMessagingRoom()" v-click-anime><i class="fas fa-plus"/></button>
|
||||
<button v-if="$route.name === 'drive'" class="post _buttonPrimary" @click="driveMenu()" v-click-anime><i class="fas fa-plus"/></button>
|
||||
<button v-if="$route.name === 'clips'" class="post _buttonPrimary" @click="createClip()" v-click-anime><i class="fas fa-plus"/></button>
|
||||
<button v-if="$route.name === 'pages'" class="post _buttonPrimary" @click="createPage()" v-click-anime><i class="fas fa-plus"/></button>
|
||||
<button v-if="$route.name === 'ads'" class="post _buttonPrimary" @click="createAd()" v-click-anime><i class="fas fa-plus"/></button>
|
||||
</div>
|
||||
|
||||
<div class="buttons" v-if="isMobile">
|
||||
<!-- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
|
||||
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i></button>
|
||||
<button class="button search _button" @click="search"><i class="fas fa-search"/></button>
|
||||
<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
|
||||
<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
|
||||
</div>
|
||||
|
||||
<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
|
||||
|
||||
<transition name="tray-back">
|
||||
<div class="tray-back _modalBg"
|
||||
v-if="widgetsShowing"
|
||||
@click="widgetsShowing = false"
|
||||
@touchstart.passive="widgetsShowing = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="tray">
|
||||
<XWidgets v-if="widgetsShowing" class="tray"/>
|
||||
</transition>
|
||||
|
||||
<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
|
||||
|
||||
<XCommon/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
|
||||
import { instanceName } from '@client/config';
|
||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||
import XSidebar from './friendly.sidebar.vue';
|
||||
import XDrawerSidebar from './sidebar.vue';
|
||||
import XCommon from '../_common_/common.vue';
|
||||
import XHeader from './header.vue';
|
||||
import * as os from '@client/os';
|
||||
import { menuDef } from '@client/menu';
|
||||
import * as symbols from '@client/symbols';
|
||||
import XTimeline from '@client/components/timeline.vue';
|
||||
import { search } from '@client/scripts/search';
|
||||
import { eventBus } from '@client/friendly/eventBus';
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const MOBILE_THRESHOLD = 600;
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XCommon,
|
||||
XSidebar,
|
||||
XDrawerSidebar,
|
||||
XHeader,
|
||||
XTimeline,
|
||||
XHeaderMenu: defineAsyncComponent(() => import('../classic.header.vue')),
|
||||
XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue'))
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
pageInfo: null,
|
||||
menuDef: menuDef,
|
||||
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||
widgetsShowing: false,
|
||||
fullView: false,
|
||||
wallpaper: localStorage.getItem('wallpaper') != null,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
navIndicated(): boolean {
|
||||
for (const def in this.menuDef) {
|
||||
if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
|
||||
if (this.menuDef[def].indicated) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
showMenuOnTop(): boolean {
|
||||
return !this.isMobile && this.$store.state.menuDisplay === 'top';
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
document.documentElement.style.overflowY = 'scroll';
|
||||
|
||||
if (this.$store.state.widgets.length === 0) {
|
||||
this.$store.set('widgets', [{
|
||||
name: 'calendar',
|
||||
id: 'a', place: 'right', data: {}
|
||||
}, {
|
||||
name: 'notifications',
|
||||
id: 'b', place: 'right', data: {}
|
||||
}, {
|
||||
name: 'trends',
|
||||
id: 'c', place: 'right', data: {}
|
||||
}]);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
|
||||
this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
|
||||
}, { passive: true });
|
||||
|
||||
if (this.$store.state.aiChanMode) {
|
||||
const iframeRect = this.$refs.live2d.getBoundingClientRect();
|
||||
window.addEventListener('mousemove', ev => {
|
||||
this.$refs.live2d.contentWindow.postMessage({
|
||||
type: 'moveCursor',
|
||||
body: {
|
||||
x: ev.clientX - iframeRect.left,
|
||||
y: ev.clientY - iframeRect.top,
|
||||
}
|
||||
}, '*');
|
||||
}, { passive: true });
|
||||
window.addEventListener('touchmove', ev => {
|
||||
this.$refs.live2d.contentWindow.postMessage({
|
||||
type: 'moveCursor',
|
||||
body: {
|
||||
x: ev.touches[0].clientX - iframeRect.left,
|
||||
y: ev.touches[0].clientY - iframeRect.top,
|
||||
}
|
||||
}, '*');
|
||||
}, { passive: true });
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
if (page == null) return;
|
||||
if (page[symbols.PAGE_INFO]) {
|
||||
this.pageInfo = page[symbols.PAGE_INFO];
|
||||
document.title = `${this.pageInfo.title} | ${instanceName}`;
|
||||
}
|
||||
},
|
||||
|
||||
attachSticky(ref) {
|
||||
const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
|
||||
window.addEventListener('scroll', () => {
|
||||
sticky.calc(window.scrollY);
|
||||
}, { passive: true });
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
createMessagingRoom() {
|
||||
eventBus.emit('kn-createmsgroom');
|
||||
},
|
||||
|
||||
driveMenu() {
|
||||
eventBus.emit('kn-drivemenu');
|
||||
},
|
||||
|
||||
createClip() {
|
||||
eventBus.emit('kn-createclip');
|
||||
},
|
||||
|
||||
createPage() {
|
||||
eventBus.emit('kn-createpage');
|
||||
},
|
||||
|
||||
createAd() {
|
||||
eventBus.emit('kn-createad');
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
top() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
showDrawerNav() {
|
||||
this.$refs.drawerNav.show();
|
||||
},
|
||||
|
||||
onTransition() {
|
||||
if (window._scroll) window._scroll();
|
||||
},
|
||||
|
||||
onHeaderClick() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(e.target)) return;
|
||||
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
|
||||
if (window.getSelection().toString() !== '') return;
|
||||
const path = this.$route.path;
|
||||
os.contextMenu([{
|
||||
type: 'label',
|
||||
text: path,
|
||||
}, {
|
||||
icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
|
||||
text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
|
||||
action: () => {
|
||||
this.fullView = !this.fullView;
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-window-maximize',
|
||||
text: this.$ts.openInWindow,
|
||||
action: () => {
|
||||
os.pageWindow(path);
|
||||
}
|
||||
}], e);
|
||||
},
|
||||
|
||||
onAiClick(ev) {
|
||||
//if (this.live2d) this.live2d.click(ev);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tray-enter-active,
|
||||
.tray-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.tray-enter-from,
|
||||
.tray-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(240px);
|
||||
}
|
||||
|
||||
.tray-back-enter-active,
|
||||
.tray-back-leave-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.tray-back-enter-from,
|
||||
.tray-back-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mk-app {
|
||||
$nav-hide-threshold: 650px;
|
||||
$header-height: 50px;
|
||||
$ui-font-size: 1em;
|
||||
$widgets-hide-threshold: 1200px;
|
||||
$nav-icon-only-width: 78px; // TODO: どこかに集約したい
|
||||
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
box-sizing: border-box;
|
||||
|
||||
&.wallpaper {
|
||||
background: var(--wallpaperOverlay);
|
||||
//backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
&.isMobile {
|
||||
> .columns {
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
||||
> .main {
|
||||
margin: 0;
|
||||
padding-bottom: 92px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
|
||||
> .header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
> .button {
|
||||
&:hover {
|
||||
background: var(--panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .columns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
//margin: 32px 0;
|
||||
|
||||
&.fullView {
|
||||
margin: 0;
|
||||
|
||||
> .sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
min-width: 0;
|
||||
width: 750px;
|
||||
margin: 0 16px 0 0;
|
||||
background: var(--bg);
|
||||
box-shadow: 0 0 0 1px var(--divider);
|
||||
border-radius: 0;
|
||||
--margin: 12px;
|
||||
|
||||
> .header {
|
||||
position: sticky;
|
||||
z-index: 1000;
|
||||
top: var(--globalHeaderHeight, 0px);
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
-webkit-backdrop-filter: blur(32px);
|
||||
backdrop-filter: blur(32px);
|
||||
background-color: var(--header);
|
||||
}
|
||||
|
||||
> .content {
|
||||
background: var(--bg);
|
||||
--stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
padding-top: $header-height;
|
||||
|
||||
> .header {
|
||||
position: fixed;
|
||||
width: calc(100% - #{$nav-icon-only-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
//--panelShadow: none;
|
||||
width: 300px;
|
||||
margin-top: 16px;
|
||||
|
||||
@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;
|
||||
|
||||
> .sidebar {
|
||||
border-right: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .floatbtn {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
bottom: 77px;
|
||||
box-sizing: border-box;
|
||||
padding: 18px 0 calc(constant(safe-area-inset-bottom) + 43px); /* iOS 11.0 */
|
||||
padding: 18px 0 calc(env(safe-area-inset-bottom) + 43px); /* iOS 11.2 */
|
||||
|
||||
> .post {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
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;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: (850px) + 1px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: (600px) + 1px) {
|
||||
bottom: 50px;
|
||||
|
||||
> .post {
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
bottom: 0;
|
||||
//padding: 16px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-backdrop-filter: blur(32px);
|
||||
backdrop-filter: blur(32px);
|
||||
background-color: var(--header);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
||||
> .button {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
//padding: 0;
|
||||
margin: auto;
|
||||
height: 50px;
|
||||
//border-radius: 8px;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
|
||||
padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
|
||||
|
||||
&:not(:last-child) {
|
||||
//margin-right: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 300px) {
|
||||
height: 60px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--X2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 20px;
|
||||
color: var(--indicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
|
||||
> * {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tray-back {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
> .tray {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
padding: var(--margin);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
> .ivnzpscs {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div class="ddiqwdnk">
|
||||
<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 v-if="($i.isPatron && !$store.state.removeAds) || !$i.isPatron" 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>
|
||||
<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
||||
import XWidgets from '@client/components/widgets.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XWidgets
|
||||
},
|
||||
|
||||
props: {
|
||||
place: {
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['mounted'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
editMode: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$emit('mounted', this.$el);
|
||||
},
|
||||
|
||||
methods: {
|
||||
addWidget(widget) {
|
||||
this.$store.set('widgets', [{
|
||||
...widget,
|
||||
place: this.place,
|
||||
}, ...this.$store.state.widgets]);
|
||||
},
|
||||
|
||||
removeWidget(widget) {
|
||||
this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
|
||||
},
|
||||
|
||||
updateWidget({ id, data }) {
|
||||
this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
|
||||
...w,
|
||||
data: data
|
||||
} : w));
|
||||
},
|
||||
|
||||
updateWidgets(widgets) {
|
||||
this.$store.set('widgets', [
|
||||
...this.$store.state.widgets.filter(w => w.place !== this.place),
|
||||
...widgets
|
||||
]);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ddiqwdnk {
|
||||
position: sticky;
|
||||
height: min-content;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 8px;
|
||||
|
||||
> .widgets,
|
||||
> .a {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
> .edit {
|
||||
display: block;
|
||||
margin: 16px auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,309 +0,0 @@
|
||||
<template>
|
||||
<div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key">
|
||||
<template v-if="info">
|
||||
<div class="titleContainer" @click="onHeaderClick">
|
||||
<div class="title">
|
||||
<!-- <i v-if="info.icon" class="icon" :class="info.icon"></i> -->
|
||||
<MkAvatar v-if="info.avatar && !($route.name === 'note')" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
|
||||
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
|
||||
<span v-else-if="info.title" class="text">{{ info.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons_L" v-if="isMobile">
|
||||
<button class="_button button_L" v-if="!(withBack && canBack) || ($route.name === 'notifications' || $route.name === 'messaging')" @click="showDrawerNav" v-click-anime>
|
||||
<i class="fas fa-bars"/>
|
||||
<span v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator">
|
||||
<i class="fas fa-circle"></i>
|
||||
</span>
|
||||
</button>
|
||||
<MkAvatar class="avatar" v-if="!(withBack && canBack) || ($route.name === 'notifications' || $route.name === 'messaging')" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
|
||||
<MkAvatar class="avatar_back" v-else-if="withBack && canBack && !(info.avatar)" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
|
||||
<!--
|
||||
<template v-if="$i.isPatron && !(info.avatar) || ($route.name === 'notifications' || $route.name === 'messaging')">
|
||||
<span class="patron" v-if="$i.isVip"><i class="fas fa-gem"></i></span>
|
||||
<span class="patron" v-else><i class="fas fa-heart"></i></span>
|
||||
</template>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
<div class="buttons_R">
|
||||
<button v-if="queue > 0 && $route.name === 'index' && !isDesktop" class="new _buttonPrimary" @click="top" v-click-anime><i class="fas fa-chevron-up"></i></button>
|
||||
<template v-if="info && info.actions && showActions">
|
||||
<button v-for="action in info.actions" class="_button button_R" @click.stop="action.handler" v-tooltip="action.text" v-click-anime><i :class="action.icon"></i></button>
|
||||
</template>
|
||||
<button v-if="showMenu" class="_button button_R" @click.stop="menu" v-click-anime><i class="fas fa-ellipsis-h"></i></button>
|
||||
</div>
|
||||
<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
|
||||
<button class="_button back" v-if="withBack && canBack && isMobile && !($route.name === 'notifications' || $route.name === 'messaging')" @click.stop="back()" v-click-anime><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="_button back" v-else-if="withBack && canBack && !isMobile" @click.stop="back()" v-click-anime><i class="fas fa-chevron-left"></i></button>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { popupMenu } from '@client/os';
|
||||
import { url } from '@client/config';
|
||||
import { eventBus } from "../../friendly/eventBus";
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const MOBILE_THRESHOLD = 600;
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
info: {
|
||||
required: true
|
||||
},
|
||||
withBack: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
center: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
showIndicator: {
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||
canBack: false,
|
||||
showActions: false,
|
||||
height: 0,
|
||||
key: 0,
|
||||
queue: 0,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
showMenu() {
|
||||
if (this.info == null) return false;
|
||||
if (this.info.actions != null && !this.showActions) return true;
|
||||
if (this.info.menu != null) return true;
|
||||
if (this.info.share != null) return true;
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
info() {
|
||||
this.key++;
|
||||
},
|
||||
|
||||
$route: {
|
||||
handler(to, from) {
|
||||
this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
|
||||
eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.height = this.$el.parentElement.offsetHeight + 'px';
|
||||
this.showActions = this.$el.parentElement.offsetWidth >= 500;
|
||||
new ResizeObserver((entries, observer) => {
|
||||
this.height = this.$el.parentElement.offsetHeight + 'px';
|
||||
this.showActions = this.$el.parentElement.offsetWidth >= 500;
|
||||
}).observe(this.$el);
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
|
||||
this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
|
||||
}, { passive: true });
|
||||
},
|
||||
|
||||
methods: {
|
||||
back() {
|
||||
if (this.canBack) this.$router.back();
|
||||
},
|
||||
|
||||
share() {
|
||||
navigator.share({
|
||||
url: url + this.info.path,
|
||||
...this.info.share,
|
||||
});
|
||||
},
|
||||
|
||||
showDrawerNav() {
|
||||
this.$emit('kn-drawernav');
|
||||
},
|
||||
|
||||
onHeaderClick() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
menu(ev) {
|
||||
let menu = this.info.menu ? this.info.menu() : [];
|
||||
if (!this.showActions && this.info.actions) {
|
||||
menu = [...this.info.actions.map(x => ({
|
||||
text: x.text,
|
||||
icon: x.icon,
|
||||
action: x.handler
|
||||
})), menu.length > 0 ? null : undefined, ...menu];
|
||||
}
|
||||
if (this.info.share) {
|
||||
if (menu.length > 0) menu.push(null);
|
||||
menu.push({
|
||||
text: this.$ts.share,
|
||||
icon: 'fas fa-share-alt',
|
||||
action: this.share
|
||||
});
|
||||
}
|
||||
popupMenu(menu, ev.currentTarget || ev.target);
|
||||
},
|
||||
|
||||
queueUpdated(q) {
|
||||
this.queue = q;
|
||||
},
|
||||
|
||||
queueReset() {
|
||||
this.queue = 0;
|
||||
},
|
||||
|
||||
top() {
|
||||
this.onHeaderClick();
|
||||
this.queueReset();
|
||||
eventBus.emit('kn-header-new-queue-reset', 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fdidabkb {
|
||||
$ui-font-size: 1em;
|
||||
$avatar-size: 32px;
|
||||
$avatar-margin: 10px;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
|
||||
> .titleContainer {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .back {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: var(--height);
|
||||
width: var(--height);
|
||||
}
|
||||
|
||||
> .buttons_L {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
> .button_L {
|
||||
height: var(--height);
|
||||
width: var(--height);
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 13px;
|
||||
left: 35px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .avatar_back {
|
||||
margin-left: 50px;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
margin-left: 0.5em;
|
||||
color: var(--patron);
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons_R {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
> .button_R {
|
||||
height: var(--height);
|
||||
width: var(--height);
|
||||
}
|
||||
|
||||
> .new {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 50px;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
border-radius: 100px;
|
||||
// border: 2px solid var(--patron);
|
||||
background: transparent;
|
||||
|
||||
i {
|
||||
color: var(--panelHeaderFg)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .titleContainer {
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
width: calc(100% - (var(--height) * 2));
|
||||
|
||||
> .title {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
height: var(--height);
|
||||
|
||||
> .icon + .text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
$size: 32px;
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: bottom;
|
||||
margin: calc((var(--height) - #{$size}) / 2) 8px calc((var(--height) - #{$size}) / 2) 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
margin-left: 0.5em;
|
||||
color: var(--patron);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,540 +0,0 @@
|
||||
<template>
|
||||
<div class="mvcprjjd">
|
||||
<transition name="nav-back">
|
||||
<div class="nav-back _modalBg"
|
||||
v-if="showing"
|
||||
@click="showing = false"
|
||||
@touchstart.passive="showing = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="nav">
|
||||
<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
|
||||
<div>
|
||||
<button class="item _button account" @click="openAccountMenu" v-click-anime>
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<MkA class="item index" active-class="active" to="/" exact v-click-anime>
|
||||
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
|
||||
</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: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
|
||||
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
|
||||
<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="/admin" v-click-anime>
|
||||
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
|
||||
</MkA>
|
||||
<button class="item _button" @click="more" v-click-anime>
|
||||
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
<MkA class="item" active-class="active" to="/settings" v-click-anime>
|
||||
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
|
||||
</MkA>
|
||||
<!-- <button class="item _button post" @click="post">
|
||||
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
|
||||
</button> -->
|
||||
<div class="divider"></div>
|
||||
<template v-if="$i.isPatron">
|
||||
<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
|
||||
</button>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<div class="about">
|
||||
<MkA class="link" to="/about" v-click-anime>
|
||||
<template v-if="isKokonect">
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
|
||||
<p style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
|
||||
</template>
|
||||
</MkA>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</transition>
|
||||
</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/friendly/menu-mobile';
|
||||
import { getAccounts, addAccount, login } from '@client/account';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
defaultHidden: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: host,
|
||||
showing: false,
|
||||
accounts: [],
|
||||
connection: null,
|
||||
menuDef: menuDef,
|
||||
iconOnly: false,
|
||||
hidden: this.defaultHidden,
|
||||
isKokonect: null
|
||||
};
|
||||
},
|
||||
|
||||
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: {
|
||||
$route(to, from) {
|
||||
this.showing = false;
|
||||
},
|
||||
|
||||
'$store.reactiveState.menuDisplay.value'() {
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
iconOnly() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
},
|
||||
|
||||
hidden() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('resize', this.calcViewState);
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcViewState() {
|
||||
this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
|
||||
if (!this.defaultHidden) {
|
||||
this.hidden = (window.innerWidth <= 650);
|
||||
}
|
||||
},
|
||||
|
||||
show() {
|
||||
this.showing = true;
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
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.popupMenu([...[{
|
||||
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.popupMenu([{
|
||||
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);
|
||||
},
|
||||
|
||||
patron() {
|
||||
window.open("https://www.patreon.com/noridev", "_blank");
|
||||
},
|
||||
|
||||
async init() {
|
||||
const meta = await os.api('meta', { detail: true });
|
||||
this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-enter-active,
|
||||
.nav-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-enter-from,
|
||||
.nav-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
.nav-back-enter-active,
|
||||
.nav-back-leave-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-back-enter-from,
|
||||
.nav-back-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mvcprjjd {
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$nav-width: 250px;
|
||||
$nav-icon-only-width: 86px;
|
||||
|
||||
> .nav-back {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
> .nav {
|
||||
$avatar-size: 38px;
|
||||
$avatar-margin: 8px;
|
||||
|
||||
flex: 0 0 $nav-width;
|
||||
width: $nav-width;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.iconOnly {
|
||||
flex: 0 0 $nav-icon-only-width;
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
&:not(.hidden) {
|
||||
> div {
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
padding: 18px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $ui-font-size * 1.1;
|
||||
line-height: initial;
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
> i {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .text,
|
||||
.patron-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
> i, > .text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
&:not(.hidden) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
width: $nav-width;
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overflow-x: clip;
|
||||
background: var(--navBg);
|
||||
|
||||
> .divider {
|
||||
margin: 16px 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .about {
|
||||
fill: currentColor;
|
||||
padding: 8px 0 16px 0;
|
||||
text-align: center;
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
//width: 32px;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 24px;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.85rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 20px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .text {
|
||||
position: relative;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin-left: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
color: var(--patron);
|
||||
}
|
||||
|
||||
> .patron-text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 24px);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 8px;
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child, &:last-child {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
top: 0;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
bottom: 0;
|
||||
margin-top: 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
color: var(--fgOnAccent);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
background: var(--accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .patron-button {
|
||||
background: unset;
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<div class="qvzfzxam _narrow_" v-if="component">
|
||||
<div class="container">
|
||||
<header class="header" @contextmenu.prevent.stop="onContextmenu">
|
||||
<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
|
||||
<span class="title">{{ pageInfo.title }}</span>
|
||||
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
|
||||
</header>
|
||||
<MkHeader class="pageHeader" :info="pageInfo"/>
|
||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import * as os from '@client/os';
|
||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||
import { resolve } from '@client/router';
|
||||
import { url } from '@client/config';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
export default defineComponent({
|
||||
provide() {
|
||||
return {
|
||||
navHook: (path) => {
|
||||
this.navigate(path);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
path: null,
|
||||
component: null,
|
||||
props: {},
|
||||
pageInfo: null,
|
||||
history: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
url(): string {
|
||||
return url + this.path;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
if (page == null) return;
|
||||
if (page[symbols.PAGE_INFO]) {
|
||||
this.pageInfo = page[symbols.PAGE_INFO];
|
||||
}
|
||||
},
|
||||
|
||||
navigate(path, record = true) {
|
||||
if (record && this.path) this.history.push(this.path);
|
||||
this.path = path;
|
||||
const { component, props } = resolve(path);
|
||||
this.component = component;
|
||||
this.props = props;
|
||||
},
|
||||
|
||||
back() {
|
||||
this.navigate(this.history.pop(), false);
|
||||
},
|
||||
|
||||
close() {
|
||||
this.path = null;
|
||||
this.component = null;
|
||||
this.props = {};
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
os.contextMenu([{
|
||||
type: 'label',
|
||||
text: this.path,
|
||||
}, {
|
||||
icon: 'fas fa-expand-alt',
|
||||
text: this.$ts.showInPage,
|
||||
action: () => {
|
||||
this.$router.push(this.path);
|
||||
this.close();
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-window-maximize',
|
||||
text: this.$ts.openInWindow,
|
||||
action: () => {
|
||||
os.pageWindow(this.path);
|
||||
this.close();
|
||||
}
|
||||
}, null, {
|
||||
icon: 'fas fa-external-link-alt',
|
||||
text: this.$ts.openInNewTab,
|
||||
action: () => {
|
||||
window.open(this.url, '_blank');
|
||||
this.close();
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-link',
|
||||
text: this.$ts.copyLink,
|
||||
action: () => {
|
||||
copyToClipboard(this.url);
|
||||
}
|
||||
}], e);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qvzfzxam {
|
||||
$header-height: 58px; // TODO: どこかに集約したい
|
||||
|
||||
--root-margin: 16px;
|
||||
--margin: var(--marginHalf);
|
||||
|
||||
> .container {
|
||||
position: fixed;
|
||||
width: 370px;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
> .header {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
height: $header-height;
|
||||
width: 100%;
|
||||
line-height: $header-height;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
//background-color: var(--panel);
|
||||
-webkit-backdrop-filter: var(--blur, blur(32px));
|
||||
backdrop-filter: var(--blur, blur(32px));
|
||||
background-color: var(--header);
|
||||
|
||||
> ._button {
|
||||
height: $header-height;
|
||||
width: $header-height;
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,506 +0,0 @@
|
||||
<template>
|
||||
<div class="mk-app" :class="{ wallpaper }">
|
||||
<XSidebar v-if="!isMobile" ref="nav" class="sidebar"/>
|
||||
<XSidebarMobile v-if="isMobile" ref="nav" class="sidebar"/>
|
||||
|
||||
<div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
|
||||
<main ref="main">
|
||||
<div class="content">
|
||||
<MkStickyContainer>
|
||||
<template #header><MkHeaderCP v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo" @back="back()"/></template>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
|
||||
<keep-alive :include="['timeline']">
|
||||
<component :is="Component" :ref="changePage"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</MkStickyContainer>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<XSide v-if="isDesktop" class="side" ref="side"/>
|
||||
|
||||
<div v-if="isDesktop" class="widgets" ref="widgets">
|
||||
<XWidgets @mounted="attachSticky"/>
|
||||
</div>
|
||||
|
||||
<div class="buttons" :class="{ navHidden }">
|
||||
<!-- <button class="button nav _button" @click="showNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
|
||||
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button explore _button" @click="$route.name === 'explore' ? top() : $router.replace('/explore')" :class="{ active: $route.name === 'explore' }"><i class="fas fa-hashtag"/></button>
|
||||
<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
|
||||
<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
|
||||
</div>
|
||||
|
||||
<button v-if="fabButton && !isMobile" class="fab _buttonPrimary" :class="{ navHidden }" @click="onFabClicked" v-click-anime><i :key="fabIcon" :class="fabIcon"/></button>
|
||||
|
||||
<button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
|
||||
|
||||
<transition name="tray-back">
|
||||
<div class="tray-back _modalBg"
|
||||
v-if="widgetsShowing"
|
||||
@click="widgetsShowing = false"
|
||||
@touchstart.passive="widgetsShowing = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="tray">
|
||||
<XWidgets v-if="widgetsShowing" class="tray"/>
|
||||
</transition>
|
||||
|
||||
<XCommon/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
||||
import { instanceName } from '@client/config';
|
||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||
import XSidebar from './sidebar.vue';
|
||||
import XSidebarMobile from './sidebar-mobile.vue';
|
||||
import XCommon from '../_common_/common.vue';
|
||||
import XSide from './friendly.side.vue';
|
||||
import * as os from '@client/os';
|
||||
import { menuDef } from '@client/menu';
|
||||
import * as symbols from '@client/symbols';
|
||||
import { eventBus } from '@client/friendly/eventBus';
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const WIDE_TABLET_THRESHOLD = 850;
|
||||
const MOBILE_THRESHOLD = 600;
|
||||
|
||||
localStorage.setItem('ui', 'friendly');
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XCommon,
|
||||
XSidebar,
|
||||
XSidebarMobile,
|
||||
XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue')),
|
||||
XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
sideViewHook: this.isDesktop ? (url) => {
|
||||
this.$refs.side.navigate(url);
|
||||
} : null
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
pageInfo: null,
|
||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||
isWideTablet: window.innerWidth >= WIDE_TABLET_THRESHOLD,
|
||||
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
||||
menuDef: menuDef,
|
||||
navHidden: false,
|
||||
widgetsShowing: false,
|
||||
wallpaper: localStorage.getItem('wallpaper') != null,
|
||||
queue: 0,
|
||||
routeList: [
|
||||
'index',
|
||||
'explore',
|
||||
'notifications',
|
||||
'messaging',
|
||||
'user',
|
||||
'drive',
|
||||
'clips',
|
||||
'pages',
|
||||
'ads',
|
||||
'gallery',
|
||||
'channels',
|
||||
'groups',
|
||||
'antennas'
|
||||
],
|
||||
fabButton: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
navIndicated(): boolean {
|
||||
for (const def in this.menuDef) {
|
||||
if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
|
||||
if (this.menuDef[def].indicated) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
fabIcon() {
|
||||
return this.pageInfo && this.pageInfo.action ? this.pageInfo.action.icon : 'fas fa-pencil-alt';
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
document.documentElement.style.overflowY = 'scroll';
|
||||
|
||||
if (this.$store.state.widgets.length === 0) {
|
||||
this.$store.set('widgets', [{
|
||||
name: 'calendar',
|
||||
id: 'a', place: 'right', data: {}
|
||||
}, {
|
||||
name: 'notifications',
|
||||
id: 'b', place: 'right', data: {}
|
||||
}, {
|
||||
name: 'trends',
|
||||
id: 'c', place: 'right', data: {}
|
||||
}]);
|
||||
}
|
||||
|
||||
eventBus.on('kn-drawernav', () => this.showNav());
|
||||
eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
|
||||
eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.adjustUI();
|
||||
|
||||
const ro = new ResizeObserver((entries, observer) => {
|
||||
this.adjustUI();
|
||||
});
|
||||
|
||||
ro.observe(this.$refs.contents);
|
||||
|
||||
window.addEventListener('resize', this.adjustUI, { passive: true });
|
||||
|
||||
if (!this.isDesktop) {
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
|
||||
}, { passive: true });
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
if (page == null) return;
|
||||
if (page[symbols.PAGE_INFO]) {
|
||||
this.pageInfo = page[symbols.PAGE_INFO];
|
||||
document.title = `${this.pageInfo.title} | ${instanceName}`;
|
||||
this.fabButton = this.routeList.includes(this.$route.name);
|
||||
}
|
||||
},
|
||||
|
||||
adjustUI() {
|
||||
const navWidth = this.$refs.nav.$el.offsetWidth;
|
||||
this.navHidden = navWidth === 0;
|
||||
},
|
||||
|
||||
showNav() {
|
||||
this.$refs.nav.show();
|
||||
},
|
||||
|
||||
attachSticky(el) {
|
||||
const sticky = new StickySidebar(this.$refs.widgets);
|
||||
window.addEventListener('scroll', () => {
|
||||
sticky.calc(window.scrollY);
|
||||
}, { passive: true });
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
top() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
back() {
|
||||
history.back();
|
||||
},
|
||||
|
||||
onTransition() {
|
||||
if (window._scroll) window._scroll();
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(e.target)) return;
|
||||
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
|
||||
if (window.getSelection().toString() !== '') return;
|
||||
const path = this.$route.path;
|
||||
os.contextMenu([{
|
||||
type: 'label',
|
||||
text: path,
|
||||
}, {
|
||||
icon: 'fas fa-columns',
|
||||
text: this.$ts.openInSideView,
|
||||
action: () => {
|
||||
this.$refs.side.navigate(path);
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-window-maximize',
|
||||
text: this.$ts.openInWindow,
|
||||
action: () => {
|
||||
os.pageWindow(path);
|
||||
}
|
||||
}], e);
|
||||
},
|
||||
|
||||
queueUpdated(q) {
|
||||
this.queue = q;
|
||||
},
|
||||
|
||||
queueReset() {
|
||||
this.queue = 0;
|
||||
},
|
||||
|
||||
onFabClicked(e) {
|
||||
if (this.pageInfo && this.pageInfo.action) {
|
||||
this.pageInfo.action.handler(e);
|
||||
} else {
|
||||
os.post_form();
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tray-enter-active,
|
||||
.tray-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.tray-enter-from,
|
||||
.tray-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(240px);
|
||||
}
|
||||
|
||||
.tray-back-enter-active,
|
||||
.tray-back-leave-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.tray-back-enter-from,
|
||||
.tray-back-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mk-app {
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$widgets-hide-threshold: 1090px;
|
||||
$nav-hide-threshold: 600px;
|
||||
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
&.wallpaper {
|
||||
background: var(--wallpaperOverlay);
|
||||
//backdrop-filter: var(--blur, blur(4px));
|
||||
}
|
||||
|
||||
> .sidebar {
|
||||
}
|
||||
|
||||
> .contents {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background: var(--panel);
|
||||
|
||||
> main {
|
||||
min-width: 0;
|
||||
|
||||
> .spacer {
|
||||
height: 82px;
|
||||
|
||||
@media (min-width: ($widgets-hide-threshold + 1px)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .side {
|
||||
min-width: 370px;
|
||||
max-width: 370px;
|
||||
border-left: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
padding: 0 var(--margin);
|
||||
border-left: solid 0.5px var(--divider);
|
||||
background: var(--bg);
|
||||
|
||||
@media (max-width: $widgets-hide-threshold) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .widgetButton {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
bottom: 32px;
|
||||
right: 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;
|
||||
background: var(--panel);
|
||||
|
||||
&.navHidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: ($widgets-hide-threshold + 1px)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
bottom: 0;
|
||||
//padding: 16px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-backdrop-filter: var(--blur, blur(32px));
|
||||
backdrop-filter: var(--blur, blur(32px));
|
||||
background-color: var(--header);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
||||
&:not(.navHidden) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .button {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
//padding: 0;
|
||||
margin: auto;
|
||||
height: 50px;
|
||||
//border-radius: 8px;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
|
||||
padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
|
||||
|
||||
&:not(:last-child) {
|
||||
//margin-right: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 300px) {
|
||||
height: 60px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--X2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
> .indicator,
|
||||
.indicator-home {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 20px;
|
||||
color: var(--indicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .indicator-home {
|
||||
top: 8px;
|
||||
right: 25px;
|
||||
font-size: 6px;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
|
||||
> * {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .fab {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
right: calc(32px + var(--margin) * 2 + 300px);
|
||||
bottom: 32px;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 100%;
|
||||
// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
font-size: 22px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
|
||||
@media (max-width: $widgets-hide-threshold) {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: $nav-hide-threshold) {
|
||||
bottom: calc(66px + env(safe-area-inset-bottom));
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: (850px) + 1px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: (600px) + 1px) {
|
||||
bottom: calc(45px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
> .tray-back {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
> .tray {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
padding: var(--margin);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
background: var(--bg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<div class="efzpzdvf">
|
||||
<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
|
||||
|
||||
<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
|
||||
<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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
|
||||
},
|
||||
|
||||
emits: ['mounted'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
editMode: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$emit('mounted', this.$el);
|
||||
},
|
||||
|
||||
methods: {
|
||||
addWidget(widget) {
|
||||
this.$store.set('widgets', [{
|
||||
...widget,
|
||||
place: null,
|
||||
}, ...this.$store.state.widgets]);
|
||||
},
|
||||
|
||||
removeWidget(widget) {
|
||||
this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
|
||||
},
|
||||
|
||||
updateWidget({ id, data }) {
|
||||
this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
|
||||
...w,
|
||||
data: data
|
||||
} : w));
|
||||
},
|
||||
|
||||
updateWidgets(widgets) {
|
||||
this.$store.set('widgets', widgets);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.efzpzdvf {
|
||||
position: sticky;
|
||||
height: min-content;
|
||||
min-height: 100vh;
|
||||
padding: var(--margin) 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
> * {
|
||||
margin: var(--margin) 0;
|
||||
width: 300px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .add {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,437 +0,0 @@
|
||||
<template>
|
||||
<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
|
||||
<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
|
||||
<div class="buttons left" v-if="canBack && !fabButton">
|
||||
<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="buttons left" v-if="isMobile && !canBack">
|
||||
<button class="_button button" v-if="!canBack || fabButton" @click="showNav">
|
||||
<MkAvatar class="avatar" v-if="!canBack" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
|
||||
<!-- <i class="fas fa-bars"/> -->
|
||||
<div v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></div>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="info">
|
||||
<div class="titleContainer" @click="showTabsPopup" v-if="!hideTitle">
|
||||
<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
|
||||
<i v-else-if="info.icon" class="icon" :class="info.icon"></i>
|
||||
|
||||
<div class="title">
|
||||
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
|
||||
<div v-else-if="info.title" class="title">{{ info.title }}</div>
|
||||
<div class="subtitle" v-if="!narrow && info.subtitle">
|
||||
{{ info.subtitle }}
|
||||
</div>
|
||||
<div class="subtitle activeTab" v-if="narrow && hasTabs">
|
||||
{{ info.tabs.find(tab => tab.active)?.title }}
|
||||
<i class="chevron fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs" v-if="!narrow || hideTitle">
|
||||
<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
|
||||
<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
|
||||
<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="buttons right">
|
||||
<template v-if="info && info.actions && !narrow">
|
||||
<template v-for="action in info.actions">
|
||||
<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
|
||||
<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
|
||||
</template>
|
||||
</template>
|
||||
<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject, watch } from 'vue';
|
||||
import * as tinycolor from 'tinycolor2';
|
||||
import { popupMenu } from '@client/os';
|
||||
import { url } from '@client/config';
|
||||
import { scrollToTop } from '@client/scripts/scroll';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import { i18n } from '@client/i18n';
|
||||
import { globalEvents } from '@client/events';
|
||||
import { eventBus } from "@client/friendly/eventBus";
|
||||
import {useRoute} from "vue-router";
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const MOBILE_THRESHOLD = 600;
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton
|
||||
},
|
||||
|
||||
props: {
|
||||
info: {
|
||||
type: Object as PropType<{
|
||||
actions?: {}[];
|
||||
tabs?: {}[];
|
||||
}>,
|
||||
required: true
|
||||
},
|
||||
menu: {
|
||||
required: false
|
||||
},
|
||||
thin: {
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const el = ref<HTMLElement>(null);
|
||||
const bg = ref(null);
|
||||
const narrow = ref(false);
|
||||
const height = ref(0);
|
||||
const hasTabs = computed(() => {
|
||||
return props.info.tabs && props.info.tabs.length > 0;
|
||||
});
|
||||
const shouldShowMenu = computed(() => {
|
||||
if (props.info == null) return false;
|
||||
if (props.info.actions != null && narrow.value) return true;
|
||||
if (props.info.menu != null) return true;
|
||||
if (props.info.share != null) return true;
|
||||
if (props.menu != null) return true;
|
||||
return false;
|
||||
});
|
||||
const canBack = ref(false);
|
||||
const fabButton = ref(false);
|
||||
const routeList = ref([
|
||||
'/',
|
||||
'/explore',
|
||||
'/my/notifications',
|
||||
'/my/messaging'
|
||||
]);
|
||||
const route = useRoute();
|
||||
|
||||
const share = () => {
|
||||
navigator.share({
|
||||
url: url + props.info.path,
|
||||
...props.info.share,
|
||||
});
|
||||
};
|
||||
|
||||
const showMenu = (ev: MouseEvent) => {
|
||||
let menu = props.info.menu ? props.info.menu() : [];
|
||||
if (narrow.value && props.info.actions) {
|
||||
menu = [...props.info.actions.map(x => ({
|
||||
text: x.text,
|
||||
icon: x.icon,
|
||||
action: x.handler
|
||||
})), menu.length > 0 ? null : undefined, ...menu];
|
||||
}
|
||||
if (props.info.share) {
|
||||
if (menu.length > 0) menu.push(null);
|
||||
menu.push({
|
||||
text: i18n.locale.share,
|
||||
icon: 'fas fa-share-alt',
|
||||
action: share
|
||||
});
|
||||
}
|
||||
if (props.menu) {
|
||||
if (menu.length > 0) menu.push(null);
|
||||
menu = menu.concat(props.menu);
|
||||
}
|
||||
popupMenu(menu, ev.currentTarget || ev.target);
|
||||
};
|
||||
|
||||
const showTabsPopup = (ev: MouseEvent) => {
|
||||
if (!hasTabs.value) return;
|
||||
if (!narrow.value) return;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const menu = props.info.tabs.map(tab => ({
|
||||
text: tab.title,
|
||||
icon: tab.icon,
|
||||
action: tab.onClick,
|
||||
}));
|
||||
popupMenu(menu, ev.currentTarget || ev.target);
|
||||
};
|
||||
|
||||
const preventDrag = (ev: TouchEvent) => {
|
||||
ev.stopPropagation();
|
||||
};
|
||||
|
||||
const onClick = () => {
|
||||
scrollToTop(el.value, { behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const calcBg = () => {
|
||||
const rawBg = props.info?.bg || 'var(--bg)';
|
||||
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
||||
tinyBg.setAlpha(0.85);
|
||||
bg.value = tinyBg.toRgbString();
|
||||
};
|
||||
|
||||
const showNav = () => {
|
||||
eventBus.emit('kn-drawernav');
|
||||
};
|
||||
|
||||
watch(
|
||||
route, (to, from) => {
|
||||
canBack.value = (window.history.length > 0 && !(routeList.value.includes(to.path)));
|
||||
fabButton.value = routeList.value.includes(to.path);
|
||||
}, { immediate: true }
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
calcBg();
|
||||
globalEvents.on('themeChanged', calcBg);
|
||||
onUnmounted(() => {
|
||||
globalEvents.off('themeChanged', calcBg);
|
||||
});
|
||||
|
||||
if (el.value.parentElement) {
|
||||
narrow.value = el.value.parentElement.offsetWidth < 500;
|
||||
const ro = new ResizeObserver((entries, observer) => {
|
||||
if (el.value) {
|
||||
narrow.value = el.value.parentElement.offsetWidth < 500;
|
||||
}
|
||||
});
|
||||
ro.observe(el.value.parentElement);
|
||||
onUnmounted(() => {
|
||||
ro.disconnect();
|
||||
});
|
||||
}
|
||||
|
||||
console.log(canBack.value)
|
||||
console.log(fabButton.value)
|
||||
console.log(routeList.value)
|
||||
});
|
||||
|
||||
return {
|
||||
el,
|
||||
bg,
|
||||
narrow,
|
||||
height,
|
||||
hasTabs,
|
||||
shouldShowMenu,
|
||||
canBack,
|
||||
fabButton,
|
||||
routeList,
|
||||
share,
|
||||
showMenu,
|
||||
showTabsPopup,
|
||||
preventDrag,
|
||||
onClick,
|
||||
showNav,
|
||||
hideTitle: inject('shouldOmitHeaderTitle', false),
|
||||
thin_: props.thin || inject('shouldHeaderThin', false),
|
||||
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fdidabkb {
|
||||
$avatar-size: 32px;
|
||||
$avatar-margin: 10px;
|
||||
--height: 60px;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: var(--stickyTop, 0);
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
|
||||
&.thin {
|
||||
--height: 50px;
|
||||
|
||||
> .buttons {
|
||||
> .button {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.slim {
|
||||
text-align: center;
|
||||
|
||||
> .titleContainer {
|
||||
flex: 1;
|
||||
margin: 0 auto;
|
||||
margin-left: var(--height);
|
||||
|
||||
> *:first-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
--margin: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--height);
|
||||
margin: 0 var(--margin);
|
||||
|
||||
&.left {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
> .button {
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 13px;
|
||||
left: 43px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
width: var(--height);
|
||||
}
|
||||
|
||||
> .button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--height) - (var(--margin) * 2));
|
||||
width: calc(var(--height) - (var(--margin) * 2));
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
> .fullButton {
|
||||
& + .fullButton {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .titleContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
margin-left: 24px;
|
||||
|
||||
> .avatar {
|
||||
$size: 32px;
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: bottom;
|
||||
margin: 0 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
> .title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.1;
|
||||
|
||||
> .subtitle {
|
||||
opacity: 0.6;
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.activeTab {
|
||||
text-align: center;
|
||||
|
||||
> .chevron {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tabs {
|
||||
margin-left: 16px;
|
||||
font-size: 0.8em;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
> .tab {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
> .icon + .title {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,656 +0,0 @@
|
||||
<template>
|
||||
<div class="mvcprjjd">
|
||||
<transition name="nav-back">
|
||||
<div class="nav-back _modalBg"
|
||||
v-if="showing"
|
||||
@click="showing = isAccountMenuMode = false"
|
||||
@touchstart.passive="showing = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="nav">
|
||||
<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
|
||||
<div>
|
||||
<div class="profile">
|
||||
<button class="item _button account" @click="openProfile">
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
|
||||
<i class="fas fa-ellipsis-v"/>
|
||||
</button>
|
||||
<button v-else class="_button toggler" @click="toggleMenuMode">
|
||||
<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
|
||||
<i v-else class="fas fa-chevron-down"/>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="!isAccountMenuMode">
|
||||
<div style="margin: 15px"></div>
|
||||
<MkA class="item index" active-class="active" to="/" exact v-click-anime>
|
||||
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
|
||||
</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: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
|
||||
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
|
||||
<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="/admin" v-click-anime>
|
||||
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
|
||||
</MkA>
|
||||
<button class="item _button" @click="more" v-click-anime>
|
||||
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
<MkA class="item" active-class="active" to="/settings" v-click-anime>
|
||||
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
|
||||
</MkA>
|
||||
<button class="item _button post" @click="post" data-cy-open-post-form>
|
||||
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
|
||||
<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
|
||||
</button>
|
||||
<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
|
||||
<div class="divider"></div>
|
||||
<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
|
||||
<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</nav>
|
||||
</transition>
|
||||
</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/friendly/menu-mobile';
|
||||
import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
defaultHidden: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: host,
|
||||
showing: false,
|
||||
accounts: [],
|
||||
connection: null,
|
||||
menuDef: menuDef,
|
||||
iconOnly: false,
|
||||
hidden: this.defaultHidden,
|
||||
isAccountMenuMode: false,
|
||||
loadingAccounts: 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: {
|
||||
$route(to, from) {
|
||||
this.showing = false;
|
||||
},
|
||||
|
||||
'$store.reactiveState.menuDisplay.value'() {
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
iconOnly() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
},
|
||||
|
||||
hidden() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('resize', this.calcViewState);
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcViewState() {
|
||||
this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
|
||||
if (!this.defaultHidden) {
|
||||
this.hidden = (window.innerWidth <= 650);
|
||||
}
|
||||
},
|
||||
|
||||
show() {
|
||||
this.showing = true;
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
more(ev) {
|
||||
os.popup(import('@client/components/launch-pad.vue'), {}, {
|
||||
}, 'closed');
|
||||
},
|
||||
|
||||
openProfile() {
|
||||
this.$router.push({ path: `/@${ this.$i.username }` })
|
||||
},
|
||||
|
||||
async fetchAccounts() {
|
||||
this.loadingAccounts = true;
|
||||
this.accounts = await os.getAccounts();
|
||||
this.loadingAccounts = false;
|
||||
},
|
||||
|
||||
toggleMenuMode() {
|
||||
this.isAccountMenuMode = !this.isAccountMenuMode;
|
||||
if (this.isAccountMenuMode) {
|
||||
this.fetchAccounts();
|
||||
}
|
||||
},
|
||||
|
||||
async openAccountMenu(ev) {
|
||||
const storedAccounts = await getAccounts().then(accounts => accounts.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.popupMenu([...[{
|
||||
type: 'link',
|
||||
text: this.$ts.profile,
|
||||
to: `/@${ this.$i.username }`,
|
||||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
text: this.$ts.addAccount,
|
||||
icon: 'fas fa-plus',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.logout,
|
||||
icon: 'fas fa-sign-out-alt',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
danger: true,
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
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');
|
||||
},
|
||||
|
||||
async switchAccount(account: any) {
|
||||
const storedAccounts = await getAccounts();
|
||||
const token = storedAccounts.find(x => x.id === account.id).token;
|
||||
this.switchAccountWithToken(token);
|
||||
},
|
||||
|
||||
switchAccountWithToken(token: string) {
|
||||
login(token);
|
||||
},
|
||||
|
||||
async openDrawerAccountMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
async openSignoutMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
signout,
|
||||
signoutAll,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-enter-active,
|
||||
.nav-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-enter-from,
|
||||
.nav-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
.nav-back-enter-active,
|
||||
.nav-back-leave-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-back-enter-from,
|
||||
.nav-back-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mvcprjjd {
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$nav-width: 250px;
|
||||
$nav-icon-only-width: 86px;
|
||||
|
||||
> .nav-back {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
> .nav {
|
||||
$avatar-size: 32px;
|
||||
$avatar-margin: 8px;
|
||||
|
||||
flex: 0 0 $nav-width;
|
||||
width: $nav-width;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.iconOnly {
|
||||
flex: 0 0 $nav-icon-only-width;
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
&:not(.hidden) {
|
||||
> div {
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
> .item {
|
||||
padding-left: 0;
|
||||
padding: 18px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $ui-font-size * 1.1;
|
||||
line-height: initial;
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
> i {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
> i, > .text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
&:not(.hidden) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
width: $nav-width;
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overflow-x: clip;
|
||||
background: var(--navBg);
|
||||
|
||||
> .divider {
|
||||
margin: 16px 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 24px;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.85rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .text {
|
||||
position: relative;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 24px);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child, &:last-child {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
top: 0;
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
bottom: 0;
|
||||
color: var(--fgOnAccent);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
background: var(--accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item-switch-acct,
|
||||
> .item-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 24px 0;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
> .item-button {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
> .profile {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
> .item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 24px 0;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
}
|
||||
|
||||
> .toggler {
|
||||
//position: absolute;
|
||||
//right: 15px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 12px 15px 0 0;
|
||||
padding: 10px;
|
||||
z-index: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,656 +0,0 @@
|
||||
<template>
|
||||
<div class="mvcprjjd">
|
||||
<transition name="nav-back">
|
||||
<div class="nav-back _modalBg"
|
||||
v-if="showing"
|
||||
@click="showing = isAccountMenuMode = false"
|
||||
@touchstart.passive="showing = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="nav">
|
||||
<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
|
||||
<div>
|
||||
<div class="profile">
|
||||
<button class="item _button account" @click="openProfile">
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
|
||||
<i class="fas fa-ellipsis-v"/>
|
||||
</button>
|
||||
<button v-else class="_button toggler" @click="toggleMenuMode">
|
||||
<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
|
||||
<i v-else class="fas fa-chevron-down"/>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="!isAccountMenuMode">
|
||||
<div style="margin: 15px"></div>
|
||||
<MkA class="item index" active-class="active" to="/" exact v-click-anime>
|
||||
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
|
||||
</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: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
|
||||
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
|
||||
<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="/admin" v-click-anime>
|
||||
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
|
||||
</MkA>
|
||||
<button class="item _button" @click="more" v-click-anime>
|
||||
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
<MkA class="item" active-class="active" to="/settings" v-click-anime>
|
||||
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
|
||||
</MkA>
|
||||
<button class="item _button post" @click="post" data-cy-open-post-form>
|
||||
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
|
||||
<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
|
||||
</button>
|
||||
<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
|
||||
<div class="divider"></div>
|
||||
<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
|
||||
<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</nav>
|
||||
</transition>
|
||||
</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, signout, signoutAll } from '@client/account';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
defaultHidden: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: host,
|
||||
showing: false,
|
||||
accounts: [],
|
||||
connection: null,
|
||||
menuDef: menuDef,
|
||||
iconOnly: false,
|
||||
hidden: this.defaultHidden,
|
||||
isAccountMenuMode: false,
|
||||
loadingAccounts: 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: {
|
||||
$route(to, from) {
|
||||
this.showing = false;
|
||||
},
|
||||
|
||||
'$store.reactiveState.menuDisplay.value'() {
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
iconOnly() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
},
|
||||
|
||||
hidden() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('resize', this.calcViewState);
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcViewState() {
|
||||
this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
|
||||
if (!this.defaultHidden) {
|
||||
this.hidden = (window.innerWidth <= 650);
|
||||
}
|
||||
},
|
||||
|
||||
show() {
|
||||
this.showing = true;
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
more(ev) {
|
||||
os.popup(import('@client/components/launch-pad.vue'), {}, {
|
||||
}, 'closed');
|
||||
},
|
||||
|
||||
openProfile() {
|
||||
this.$router.push({ path: `/@${ this.$i.username }` })
|
||||
},
|
||||
|
||||
async fetchAccounts() {
|
||||
this.loadingAccounts = true;
|
||||
this.accounts = await os.getAccounts();
|
||||
this.loadingAccounts = false;
|
||||
},
|
||||
|
||||
toggleMenuMode() {
|
||||
this.isAccountMenuMode = !this.isAccountMenuMode;
|
||||
if (this.isAccountMenuMode) {
|
||||
this.fetchAccounts();
|
||||
}
|
||||
},
|
||||
|
||||
async openAccountMenu(ev) {
|
||||
const storedAccounts = await getAccounts().then(accounts => accounts.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.popupMenu([...[{
|
||||
type: 'link',
|
||||
text: this.$ts.profile,
|
||||
to: `/@${ this.$i.username }`,
|
||||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
text: this.$ts.addAccount,
|
||||
icon: 'fas fa-plus',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.logout,
|
||||
icon: 'fas fa-sign-out-alt',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
danger: true,
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
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');
|
||||
},
|
||||
|
||||
async switchAccount(account: any) {
|
||||
const storedAccounts = await getAccounts();
|
||||
const token = storedAccounts.find(x => x.id === account.id).token;
|
||||
this.switchAccountWithToken(token);
|
||||
},
|
||||
|
||||
switchAccountWithToken(token: string) {
|
||||
login(token);
|
||||
},
|
||||
|
||||
async openDrawerAccountMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
async openSignoutMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
signout,
|
||||
signoutAll,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-enter-active,
|
||||
.nav-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-enter-from,
|
||||
.nav-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
.nav-back-enter-active,
|
||||
.nav-back-leave-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-back-enter-from,
|
||||
.nav-back-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mvcprjjd {
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$nav-width: 250px;
|
||||
$nav-icon-only-width: 86px;
|
||||
|
||||
> .nav-back {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
> .nav {
|
||||
$avatar-size: 32px;
|
||||
$avatar-margin: 8px;
|
||||
|
||||
flex: 0 0 $nav-width;
|
||||
width: $nav-width;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.iconOnly {
|
||||
flex: 0 0 $nav-icon-only-width;
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
&:not(.hidden) {
|
||||
> div {
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
> .item {
|
||||
padding-left: 0;
|
||||
padding: 18px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $ui-font-size * 1.1;
|
||||
line-height: initial;
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
> i {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
> i, > .text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
&:not(.hidden) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
width: $nav-width;
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overflow-x: clip;
|
||||
background: var(--navBg);
|
||||
|
||||
> .divider {
|
||||
margin: 16px 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 24px;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.85rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .text {
|
||||
position: relative;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 24px);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child, &:last-child {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
top: 0;
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
bottom: 0;
|
||||
color: var(--fgOnAccent);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
background: var(--accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item-switch-acct,
|
||||
> .item-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 24px 0;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
> .item-button {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
> .profile {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
> .item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 24px 0;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
}
|
||||
|
||||
> .toggler {
|
||||
//position: absolute;
|
||||
//right: 15px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 12px 15px 0 0;
|
||||
padding: 10px;
|
||||
z-index: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,314 +0,0 @@
|
||||
<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="/admin" :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="openProfile" v-click-anime>
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button class="_button toggler" @click="openAccountMenu">
|
||||
<i class="fas fa-chevron-down"/>
|
||||
</button>
|
||||
<div class="post" @click="post">
|
||||
<MkButton class="button" gradate 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, signout, signoutAll } 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_form();
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
openProfile() {
|
||||
this.$router.push({ path: `/@${ this.$i.username }` })
|
||||
},
|
||||
|
||||
async openAccountMenu(ev) {
|
||||
const storedAccounts = await getAccounts().then(accounts => accounts.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); }
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
await os.popupMenu([...[{
|
||||
type: 'link',
|
||||
text: this.$ts.profile,
|
||||
to: `/@${this.$i.username}`,
|
||||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
text: this.$ts.addAccount,
|
||||
icon: 'fas fa-plus',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => {
|
||||
this.addAccount();
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => {
|
||||
this.createAccount();
|
||||
},
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.logout,
|
||||
icon: 'fas fa-sign-out-alt',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.logout,
|
||||
action: () => {
|
||||
this.signout();
|
||||
},
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => {
|
||||
this.signoutAll();
|
||||
},
|
||||
danger: true,
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
danger: true,
|
||||
}]], 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');
|
||||
},
|
||||
|
||||
async switchAccount(account: any) {
|
||||
const storedAccounts = await getAccounts();
|
||||
const token = storedAccounts.find(x => x.id === account.id).token;
|
||||
this.switchAccountWithToken(token);
|
||||
},
|
||||
|
||||
switchAccountWithToken(token: string) {
|
||||
login(token);
|
||||
},
|
||||
|
||||
signout,
|
||||
signoutAll,
|
||||
}
|
||||
});
|
||||
</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;
|
||||
bottom: 10px;
|
||||
right: 0;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
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;
|
||||
|
||||
> .name {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
> .toggler {
|
||||
position: relative;
|
||||
right: 5px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
> .right {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<div class="qvzfzxam _narrow_" v-if="component">
|
||||
<div class="container">
|
||||
<header class="header" @contextmenu.prevent.stop="onContextmenu">
|
||||
<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
|
||||
<XHeader class="title" :info="pageInfo" :with-back="false"/>
|
||||
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
|
||||
</header>
|
||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import XHeader from './friendly/header.vue';
|
||||
import * as os from '@client/os';
|
||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||
import { resolve } from '@client/router';
|
||||
import { url } from '@client/config';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XHeader
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
navHook: (path) => {
|
||||
this.navigate(path);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
path: null,
|
||||
component: null,
|
||||
props: {},
|
||||
pageInfo: null,
|
||||
history: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
url(): string {
|
||||
return url + this.path;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
if (page == null) return;
|
||||
if (page[symbols.PAGE_INFO]) {
|
||||
this.pageInfo = page[symbols.PAGE_INFO];
|
||||
}
|
||||
},
|
||||
|
||||
navigate(path, record = true) {
|
||||
if (record && this.path) this.history.push(this.path);
|
||||
this.path = path;
|
||||
const { component, props } = resolve(path);
|
||||
this.component = component;
|
||||
this.props = props;
|
||||
},
|
||||
|
||||
back() {
|
||||
this.navigate(this.history.pop(), false);
|
||||
},
|
||||
|
||||
close() {
|
||||
this.path = null;
|
||||
this.component = null;
|
||||
this.props = {};
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
os.contextMenu([{
|
||||
type: 'label',
|
||||
text: this.path,
|
||||
}, {
|
||||
icon: 'fas fa-expand-alt',
|
||||
text: this.$ts.showInPage,
|
||||
action: () => {
|
||||
this.$router.push(this.path);
|
||||
this.close();
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-window-maximize',
|
||||
text: this.$ts.openInWindow,
|
||||
action: () => {
|
||||
os.pageWindow(this.path);
|
||||
this.close();
|
||||
}
|
||||
}, null, {
|
||||
icon: 'fas fa-external-link-alt',
|
||||
text: this.$ts.openInNewTab,
|
||||
action: () => {
|
||||
window.open(this.url, '_blank');
|
||||
this.close();
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-link',
|
||||
text: this.$ts.copyLink,
|
||||
action: () => {
|
||||
copyToClipboard(this.url);
|
||||
}
|
||||
}], e);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qvzfzxam {
|
||||
$header-height: 58px; // TODO: どこかに集約したい
|
||||
|
||||
--root-margin: 16px;
|
||||
--margin: var(--marginHalf);
|
||||
|
||||
> .container {
|
||||
position: fixed;
|
||||
width: 370px;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
> .header {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
height: $header-height;
|
||||
width: 100%;
|
||||
line-height: $header-height;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
//background-color: var(--panel);
|
||||
-webkit-backdrop-filter: blur(32px);
|
||||
backdrop-filter: blur(32px);
|
||||
background-color: var(--header);
|
||||
|
||||
> ._button {
|
||||
height: $header-height;
|
||||
width: $header-height;
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,631 +0,0 @@
|
||||
<template>
|
||||
<div class="npcljfve" :class="{ iconOnly }">
|
||||
<transition name="nav-back">
|
||||
<div class="nav-back _modalBg"
|
||||
v-if="showing"
|
||||
@click="showing = isAccountMenuMode = false"
|
||||
@touchstart.passive="showing = isAccountMenuMode = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="nav">
|
||||
<nav class="nav">
|
||||
<div class="profile">
|
||||
<button v-if="!iconOnly" class="item _button account" @click="openProfile">
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button v-if="iconOnly" class="item _button account" @click="openAccountMenu">
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button v-else class="_button toggler" @click="toggleMenuMode">
|
||||
<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
|
||||
<i v-else class="fas fa-chevron-down"/>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="!isAccountMenuMode">
|
||||
<div class="post" @click="post">
|
||||
<MkButton class="button" gradate full rounded>
|
||||
<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
|
||||
</MkButton>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<MkA class="item index" active-class="active" to="/" exact v-click-anime>
|
||||
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
|
||||
</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>
|
||||
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
|
||||
<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="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
|
||||
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
|
||||
</MkA>
|
||||
<button class="item _button" @click="more" v-click-anime>
|
||||
<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
|
||||
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
|
||||
</MkA>
|
||||
<div class="divider"></div>
|
||||
<template v-if="$i.isPatron">
|
||||
<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
|
||||
</button>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<div class="about">
|
||||
<MkA class="link" to="/about" v-click-anime>
|
||||
<template v-if="isKokonect">
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
|
||||
<p v-if="iconOnly" style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><br/><span style="color: var(--pick);">NECT</span></b></p>
|
||||
<p v-else style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
|
||||
</template>
|
||||
</MkA>
|
||||
</div>
|
||||
<!--<MisskeyLogo class="misskey"/>-->
|
||||
</template>
|
||||
<template v-else>
|
||||
<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
|
||||
<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
|
||||
</button>
|
||||
<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
|
||||
<div class="divider"></div>
|
||||
<button class="item-switch-acct _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
|
||||
<button class="item-switch-acct danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
|
||||
</template>
|
||||
</nav>
|
||||
</transition>
|
||||
</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, signout, signoutAll } from '@client/account';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||
import MisskeyLogo from '@/../assets/client/misskey.svg';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
MisskeyLogo,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: host,
|
||||
accounts: [],
|
||||
connection: null,
|
||||
menuDef: menuDef,
|
||||
iconOnly: false,
|
||||
settingsWindowed: false,
|
||||
isAccountMenuMode: false,
|
||||
loadingAccounts: false,
|
||||
showing: false,
|
||||
isKokonect: null
|
||||
};
|
||||
},
|
||||
|
||||
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: {
|
||||
$route(to, from) {
|
||||
this.showing = false;
|
||||
},
|
||||
|
||||
'$store.reactiveState.menuDisplay.value'() {
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
iconOnly() {
|
||||
this.isAccountMenuMode = false;
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('resize', this.calcViewState);
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const sticky = new StickySidebar(this.$el.parentElement, 16);
|
||||
window.addEventListener('scroll', () => {
|
||||
sticky.calc(window.scrollY);
|
||||
}, { passive: true });
|
||||
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcViewState() {
|
||||
this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
|
||||
this.settingsWindowed = (window.innerWidth > 1400);
|
||||
},
|
||||
|
||||
show() {
|
||||
this.showing = true;
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
openProfile() {
|
||||
this.$router.push({ path: `/@${ this.$i.username }` })
|
||||
},
|
||||
|
||||
async fetchAccounts() {
|
||||
this.loadingAccounts = true;
|
||||
this.accounts = await os.getAccounts();
|
||||
this.loadingAccounts = false;
|
||||
},
|
||||
|
||||
toggleMenuMode() {
|
||||
this.isAccountMenuMode = !this.isAccountMenuMode;
|
||||
if (this.isAccountMenuMode) {
|
||||
this.fetchAccounts();
|
||||
}
|
||||
},
|
||||
|
||||
async openAccountMenu(ev) {
|
||||
const storedAccounts = await getAccounts().then(accounts => accounts.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.popupMenu([...[{
|
||||
type: 'link',
|
||||
text: this.$ts.profile,
|
||||
to: `/@${ this.$i.username }`,
|
||||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
text: this.$ts.addAccount,
|
||||
icon: 'fas fa-plus',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.logout,
|
||||
icon: 'fas fa-sign-out-alt',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
danger: true,
|
||||
}]], 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');
|
||||
},
|
||||
|
||||
async switchAccount(account: any) {
|
||||
const storedAccounts = await getAccounts();
|
||||
const token = storedAccounts.find(x => x.id === account.id).token;
|
||||
this.switchAccountWithToken(token);
|
||||
},
|
||||
|
||||
switchAccountWithToken(token: string) {
|
||||
login(token);
|
||||
},
|
||||
|
||||
patron() {
|
||||
window.open("https://www.patreon.com/noridev", "_blank");
|
||||
},
|
||||
|
||||
async init() {
|
||||
const meta = await os.api('meta', { detail: true });
|
||||
this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
|
||||
},
|
||||
|
||||
async openDrawerAccountMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
async openSignoutMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
signout,
|
||||
signoutAll,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.npcljfve {
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$nav-icon-only-width: 78px; // TODO: どこかに集約したい
|
||||
$avatar-size: 46px;
|
||||
$avatar-margin: 8px;
|
||||
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
width: 260px;
|
||||
|
||||
&.iconOnly {
|
||||
flex: 0 0 $nav-icon-only-width;
|
||||
width: $nav-icon-only-width !important;
|
||||
|
||||
> .nav {
|
||||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
> .post {
|
||||
> .button {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: (850px)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $ui-font-size * 1.1;
|
||||
line-height: 3.7rem;
|
||||
overflow: unset;
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
> .text,
|
||||
.name,
|
||||
.patron-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 11px;
|
||||
left: 33px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .nav {
|
||||
> .divider {
|
||||
margin: 10px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .post {
|
||||
position: sticky;
|
||||
top: 65px;
|
||||
z-index: 1;
|
||||
padding: 16px 0;
|
||||
background: var(--bg);
|
||||
|
||||
> .button {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .about {
|
||||
fill: currentColor;
|
||||
padding: 8px 0 16px 0;
|
||||
text-align: center;
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
//width: 32px;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.6rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
margin-left: 3px;
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
margin-left: unset;
|
||||
margin-right: $avatar-margin;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin-left: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
color: var(--patron);
|
||||
}
|
||||
|
||||
> .patron-text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
}
|
||||
|
||||
> .item-switch-acct {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: 12px;
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
margin-left: 3px;
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
margin-left: unset;
|
||||
margin-right: $avatar-margin;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
> .patron-button {
|
||||
background: unset;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
> .profile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: var(--bg);
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
> .item {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.6rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
margin-left: 3px;
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
margin-left: unset;
|
||||
margin-right: $avatar-margin;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
}
|
||||
|
||||
> .account {
|
||||
padding: 10px 20px 0 0;
|
||||
}
|
||||
|
||||
> .toggler {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
z-index: 400;
|
||||
}
|
||||
}
|
||||
|
||||
> .account {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,600 +0,0 @@
|
||||
<template>
|
||||
<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
|
||||
<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
|
||||
|
||||
<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" :style="{ background: pageInfo?.bg }">
|
||||
<header class="header">
|
||||
<XHeader :info="pageInfo" :back-button="true" @back="back()"/>
|
||||
</header>
|
||||
<div class="content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
|
||||
<keep-alive :include="['timeline']">
|
||||
<component :is="Component" :ref="changePage"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
|
||||
<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button v-if="fabButton && !(isDesktop || isWideTablet)" class="fab _buttonPrimary" :class="{ navHidden }" @click="onFabClicked" v-click-anime><i :key="fabIcon" :class="fabIcon"/></button>
|
||||
|
||||
<div class="buttons" v-if="isMobile">
|
||||
<!-- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
|
||||
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button explore _button" @click="$route.name === 'explore' ? top() : $router.replace('/explore')" :class="{ active: $route.name === 'explore' }"><i class="fas fa-hashtag"/></button>
|
||||
<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
|
||||
<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
|
||||
<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
|
||||
</div>
|
||||
|
||||
<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
|
||||
|
||||
<transition name="tray-back">
|
||||
<div class="tray-back _modalBg"
|
||||
v-if="widgetsShowing"
|
||||
@click="widgetsShowing = false"
|
||||
@touchstart.passive="widgetsShowing = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="tray">
|
||||
<XWidgets v-if="widgetsShowing" class="tray"/>
|
||||
</transition>
|
||||
|
||||
<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
|
||||
|
||||
<XCommon/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
|
||||
import { instanceName } from '@client/config';
|
||||
import { StickySidebar } from '@client/scripts/sticky-sidebar';
|
||||
import XSidebar from './friendly.sidebar.vue';
|
||||
import XDrawerSidebar from './sidebar.vue';
|
||||
import XCommon from '../_common_/common.vue';
|
||||
import XHeader from './header.vue';
|
||||
import * as os from '@client/os';
|
||||
import { menuDef } from '@client/menu';
|
||||
import * as symbols from '@client/symbols';
|
||||
import XTimeline from '@client/components/timeline.vue';
|
||||
import { eventBus } from '@client/friendly/eventBus';
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const WIDE_TABLET_THRESHOLD = 850;
|
||||
const MOBILE_THRESHOLD = 600;
|
||||
|
||||
localStorage.setItem('ui', 'friendly');
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XCommon,
|
||||
XSidebar,
|
||||
XDrawerSidebar,
|
||||
XHeader,
|
||||
XTimeline,
|
||||
XHeaderMenu: defineAsyncComponent(() => import('./friendly.header.vue')),
|
||||
XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue'))
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
shouldHeaderThin: this.showMenuOnTop,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
pageInfo: null,
|
||||
menuDef: menuDef,
|
||||
globalHeaderHeight: 0,
|
||||
navHidden: false,
|
||||
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
||||
isWideTablet: window.innerWidth >= WIDE_TABLET_THRESHOLD,
|
||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||
widgetsShowing: false,
|
||||
fullView: false,
|
||||
wallpaper: localStorage.getItem('wallpaper') != null,
|
||||
queue: 0,
|
||||
routeList: [
|
||||
'index',
|
||||
'explore',
|
||||
'notifications',
|
||||
'messaging',
|
||||
'user',
|
||||
'drive',
|
||||
'clips',
|
||||
'pages',
|
||||
'ads',
|
||||
'gallery',
|
||||
'channels',
|
||||
'groups',
|
||||
'antennas'
|
||||
],
|
||||
fabButton: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
navIndicated(): boolean {
|
||||
for (const def in this.menuDef) {
|
||||
if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
|
||||
if (this.menuDef[def].indicated) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
fabIcon() {
|
||||
return this.pageInfo && this.pageInfo.action ? this.pageInfo.action.icon : 'fas fa-pencil-alt';
|
||||
},
|
||||
|
||||
showMenuOnTop(): boolean {
|
||||
return !this.isMobile && this.$store.state.menuDisplay === 'top';
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
document.documentElement.style.overflowY = 'scroll';
|
||||
|
||||
if (this.$store.state.widgets.length === 0) {
|
||||
this.$store.set('widgets', [{
|
||||
name: 'calendar',
|
||||
id: 'a', place: null, data: {}
|
||||
}, {
|
||||
name: 'notifications',
|
||||
id: 'b', place: null, data: {}
|
||||
}, {
|
||||
name: 'trends',
|
||||
id: 'c', place: null, data: {}
|
||||
}]);
|
||||
}
|
||||
|
||||
eventBus.on('kn-drawernav', () => this.showDrawerNav());
|
||||
eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
|
||||
eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
|
||||
this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
|
||||
}, { passive: true });
|
||||
|
||||
this.navHidden = this.isMobile;
|
||||
|
||||
if (this.$store.state.aiChanMode) {
|
||||
const iframeRect = this.$refs.live2d.getBoundingClientRect();
|
||||
window.addEventListener('mousemove', ev => {
|
||||
this.$refs.live2d.contentWindow.postMessage({
|
||||
type: 'moveCursor',
|
||||
body: {
|
||||
x: ev.clientX - iframeRect.left,
|
||||
y: ev.clientY - iframeRect.top,
|
||||
}
|
||||
}, '*');
|
||||
}, { passive: true });
|
||||
window.addEventListener('touchmove', ev => {
|
||||
this.$refs.live2d.contentWindow.postMessage({
|
||||
type: 'moveCursor',
|
||||
body: {
|
||||
x: ev.touches[0].clientX - iframeRect.left,
|
||||
y: ev.touches[0].clientY - iframeRect.top,
|
||||
}
|
||||
}, '*');
|
||||
}, { passive: true });
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
if (page == null) return;
|
||||
if (page[symbols.PAGE_INFO]) {
|
||||
this.pageInfo = page[symbols.PAGE_INFO];
|
||||
document.title = `${this.pageInfo.title} | ${instanceName}`;
|
||||
this.fabButton = this.routeList.includes(this.$route.name);
|
||||
}
|
||||
},
|
||||
|
||||
attachSticky(ref) {
|
||||
const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
|
||||
window.addEventListener('scroll', () => {
|
||||
sticky.calc(window.scrollY);
|
||||
}, { passive: true });
|
||||
},
|
||||
|
||||
top() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
back() {
|
||||
history.back();
|
||||
},
|
||||
|
||||
showDrawerNav() {
|
||||
this.$refs.drawerNav.show();
|
||||
},
|
||||
|
||||
onTransition() {
|
||||
if (window._scroll) window._scroll();
|
||||
},
|
||||
|
||||
onHeaderClick() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(e.target)) return;
|
||||
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
|
||||
if (window.getSelection().toString() !== '') return;
|
||||
const path = this.$route.path;
|
||||
os.contextMenu([{
|
||||
type: 'label',
|
||||
text: path,
|
||||
}, {
|
||||
icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
|
||||
text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
|
||||
action: () => {
|
||||
this.fullView = !this.fullView;
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-window-maximize',
|
||||
text: this.$ts.openInWindow,
|
||||
action: () => {
|
||||
os.pageWindow(path);
|
||||
}
|
||||
}], e);
|
||||
},
|
||||
|
||||
queueUpdated(q) {
|
||||
this.queue = q;
|
||||
},
|
||||
|
||||
queueReset() {
|
||||
this.queue = 0;
|
||||
},
|
||||
|
||||
onFabClicked(e) {
|
||||
if (this.pageInfo && this.pageInfo.action) {
|
||||
this.pageInfo.action.handler(e);
|
||||
} else {
|
||||
os.post_form();
|
||||
}
|
||||
},
|
||||
|
||||
onAiClick(ev) {
|
||||
//if (this.live2d) this.live2d.click(ev);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tray-enter-active,
|
||||
.tray-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.tray-enter-from,
|
||||
.tray-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(240px);
|
||||
}
|
||||
|
||||
.tray-back-enter-active,
|
||||
.tray-back-leave-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.tray-back-enter-from,
|
||||
.tray-back-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mk-app {
|
||||
$nav-hide-threshold: 600px;
|
||||
$header-height: 60px;
|
||||
$ui-font-size: 1em;
|
||||
$widgets-hide-threshold: 1200px;
|
||||
$nav-icon-only-width: 78px; // TODO: どこかに集約したい
|
||||
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
box-sizing: border-box;
|
||||
|
||||
&.wallpaper {
|
||||
background: var(--wallpaperOverlay);
|
||||
//backdrop-filter: var(--blur, blur(4px));
|
||||
}
|
||||
|
||||
&.isMobile {
|
||||
> .columns {
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
||||
> .main {
|
||||
margin: 0;
|
||||
padding-bottom: 92px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
|
||||
> .header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
> .button {
|
||||
&:hover {
|
||||
background: var(--panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .columns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
//margin: 32px 0;
|
||||
|
||||
&.fullView {
|
||||
margin: 0;
|
||||
|
||||
> .sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
min-width: 0;
|
||||
width: 750px;
|
||||
margin: 0 16px 0 0;
|
||||
background: var(--panel);
|
||||
border-left: solid 1px var(--divider);
|
||||
border-right: solid 1px var(--divider);
|
||||
border-radius: 0;
|
||||
overflow: clip;
|
||||
--margin: 12px;
|
||||
|
||||
> .header {
|
||||
position: sticky;
|
||||
z-index: 1000;
|
||||
top: var(--globalHeaderHeight, 0px);
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
-webkit-backdrop-filter: blur(32px);
|
||||
backdrop-filter: blur(32px);
|
||||
background-color: var(--header);
|
||||
}
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
//--panelShadow: none;
|
||||
width: 300px;
|
||||
margin-top: 16px;
|
||||
|
||||
@media (max-width: $widgets-hide-threshold) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.left {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> .sidebar {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&.withGlobalHeader {
|
||||
> .main {
|
||||
margin-top: 0;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: var(--radius);
|
||||
--stickyTop: var(--globalHeaderHeight);
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
--stickyTop: var(--globalHeaderHeight);
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
margin: 0;
|
||||
|
||||
> .sidebar {
|
||||
border-right: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .fab {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
right: calc(32px + var(--margin) * 2 + 300px);
|
||||
bottom: 32px;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 100%;
|
||||
// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
font-size: 22px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
|
||||
@media (max-width: $widgets-hide-threshold) {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: $nav-hide-threshold) {
|
||||
bottom: calc(66px + env(safe-area-inset-bottom));
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: (850px) + 1px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: (600px) + 1px) {
|
||||
bottom: calc(45px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
bottom: 0;
|
||||
//padding: 16px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-backdrop-filter: var(--blur, blur(32px));
|
||||
backdrop-filter: var(--blur, blur(32px));
|
||||
background-color: var(--header);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
||||
> .button {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
//padding: 0;
|
||||
margin: auto;
|
||||
height: 50px;
|
||||
//border-radius: 8px;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
|
||||
padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
|
||||
|
||||
&:not(:last-child) {
|
||||
//margin-right: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 300px) {
|
||||
height: 60px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--X2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
> .indicator,
|
||||
.indicator-home {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 20px;
|
||||
color: var(--indicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .indicator-home {
|
||||
top: 8px;
|
||||
right: 25px;
|
||||
font-size: 6px;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
|
||||
> * {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tray-back {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
> .tray {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
padding: var(--margin);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
> .ivnzpscs {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div class="ddiqwdnk">
|
||||
<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 v-if="($i.isPatron && !$store.state.removeAds) || !$i.isPatron" 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>
|
||||
<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
||||
import XWidgets from '@client/components/widgets.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XWidgets
|
||||
},
|
||||
|
||||
props: {
|
||||
place: {
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['mounted'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
editMode: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$emit('mounted', this.$el);
|
||||
},
|
||||
|
||||
methods: {
|
||||
addWidget(widget) {
|
||||
this.$store.set('widgets', [{
|
||||
...widget,
|
||||
place: this.place,
|
||||
}, ...this.$store.state.widgets]);
|
||||
},
|
||||
|
||||
removeWidget(widget) {
|
||||
this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
|
||||
},
|
||||
|
||||
updateWidget({ id, data }) {
|
||||
this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
|
||||
...w,
|
||||
data: data
|
||||
} : w));
|
||||
},
|
||||
|
||||
updateWidgets(widgets) {
|
||||
this.$store.set('widgets', [
|
||||
...this.$store.state.widgets.filter(w => w.place !== this.place),
|
||||
...widgets
|
||||
]);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ddiqwdnk {
|
||||
position: sticky;
|
||||
height: min-content;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 8px;
|
||||
|
||||
> .widgets,
|
||||
> .a {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
> .edit {
|
||||
display: block;
|
||||
margin: 28px auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,556 +0,0 @@
|
||||
<template>
|
||||
<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="`--height:${height};`" :key="key" ref="el">
|
||||
<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
|
||||
<div class="buttons left" v-if="backButton && canBack && !fabButton">
|
||||
<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="buttons left" v-if="isMobile && !canBack">
|
||||
<button class="_button button" v-if="!(backButton && canBack) || fabButton" @click="showDrawerNav">
|
||||
<MkAvatar class="avatar" v-if="!canBack || menuBar" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
|
||||
<!-- <i class="fas fa-bars"/> -->
|
||||
<div v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></div>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="info">
|
||||
<div class="titleContainer" :class="{ center: $route.name !== 'user' }" @click="showTabsPopup" v-if="!hideTitle">
|
||||
<template v-if="info.tabs || $route.name === 'user'">
|
||||
<template v-if="$route.name === 'user'">
|
||||
<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
|
||||
<div class="title_user">
|
||||
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
|
||||
<div class="subtitle" v-if="!narrow && info.subtitle">
|
||||
{{ info.subtitle }}
|
||||
</div>
|
||||
<div class="subtitle activeTab" v-if="narrow && hasTabs">
|
||||
{{ info.tabs.find(tab => tab.active)?.title }}
|
||||
<i class="chevron fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="title tabs" v-else v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
|
||||
<i v-if="tab.icon" class="fa-fw" :class="tab.icon" :key="tab.icon"/>
|
||||
<span v-if="tab.title" class="title">{{ tab.title }}</span>
|
||||
<i class="fas fa-circle indicator" v-if="tab.indicate"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<i v-if="info.icon" class="icon" :class="info.icon"></i>
|
||||
<div class="title">
|
||||
<div v-if="info.title" class="title">{{ info.title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="tabs" v-if="!narrow && $route.name !== 'index' || hideTitle">
|
||||
<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
|
||||
<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
|
||||
<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="buttons right">
|
||||
<button v-if="queue > 0 && $route.name === 'index' && ($store.state.newNoteNotiBehavior === 'smail' || $store.state.newNoteNotiBehavior === 'header')" :class="{ 'new _button': $store.state.newNoteNotiBehavior === 'header', 'new-hover _buttonPrimary': $store.state.newNoteNotiBehavior === 'smail' }" @click="top" v-click-anime><i class="fas fa-chevron-up"></i></button>
|
||||
<template v-if="info && info.actions && !narrow">
|
||||
<template v-for="action in info.actions">
|
||||
<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
|
||||
<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
|
||||
</template>
|
||||
</template>
|
||||
<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, onUnmounted, watch, PropType, ref, inject } from 'vue';
|
||||
import * as tinycolor from 'tinycolor2';
|
||||
import { eventBus } from "@client/friendly/eventBus";
|
||||
import { popupMenu } from '@client/os';
|
||||
import { url } from '@client/config';
|
||||
import { scrollToTop } from '@client/scripts/scroll';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import { i18n } from '@client/i18n';
|
||||
import { globalEvents } from '@client/events';
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
const MOBILE_THRESHOLD = 600;
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton
|
||||
},
|
||||
|
||||
props: {
|
||||
info: {
|
||||
type: Object as PropType<{
|
||||
actions?: {}[];
|
||||
tabs?: {}[];
|
||||
}>,
|
||||
required: true
|
||||
},
|
||||
menu: {
|
||||
required: false
|
||||
},
|
||||
thin: {
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
backButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
closeButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
titleOnly: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
showIndicator: {
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const el = ref<HTMLElement>(null);
|
||||
const bg = ref(null);
|
||||
const narrow = ref(false);
|
||||
const height = ref(0);
|
||||
const hasTabs = computed(() => {
|
||||
return props.info.tabs && props.info.tabs.length > 0;
|
||||
});
|
||||
const shouldShowMenu = computed(() => {
|
||||
if (props.info == null) return false;
|
||||
if (props.info.actions != null && narrow.value) return true;
|
||||
if (props.info.menu != null) return true;
|
||||
if (props.info.share != null) return true;
|
||||
if (props.menu != null) return true;
|
||||
return false;
|
||||
});
|
||||
const canBack = ref(false);
|
||||
const key = ref(0);
|
||||
const queue = ref(0);
|
||||
const fabButton = ref(false);
|
||||
const menuBar = ref(false);
|
||||
|
||||
const share = () => {
|
||||
navigator.share({
|
||||
url: url + props.info.path,
|
||||
...props.info.share,
|
||||
});
|
||||
};
|
||||
|
||||
const showMenu = (ev: MouseEvent) => {
|
||||
let menu = props.info.menu ? props.info.menu() : [];
|
||||
if (narrow.value && props.info.actions) {
|
||||
menu = [...props.info.actions.map(x => ({
|
||||
text: x.text,
|
||||
icon: x.icon,
|
||||
action: x.handler
|
||||
})), menu.length > 0 ? null : undefined, ...menu];
|
||||
}
|
||||
if (props.info.share) {
|
||||
if (menu.length > 0) menu.push(null);
|
||||
menu.push({
|
||||
text: i18n.locale.share,
|
||||
icon: 'fas fa-share-alt',
|
||||
action: share
|
||||
});
|
||||
}
|
||||
if (props.menu) {
|
||||
if (menu.length > 0) menu.push(null);
|
||||
menu = menu.concat(props.menu);
|
||||
}
|
||||
popupMenu(menu, ev.currentTarget || ev.target);
|
||||
};
|
||||
|
||||
const showTabsPopup = (ev: MouseEvent) => {
|
||||
if (!hasTabs.value) return;
|
||||
if (!narrow.value) return;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const menu = props.info.tabs.map(tab => ({
|
||||
text: tab.title,
|
||||
icon: tab.icon,
|
||||
action: tab.onClick,
|
||||
}));
|
||||
popupMenu(menu, ev.currentTarget || ev.target);
|
||||
};
|
||||
|
||||
const preventDrag = (ev: TouchEvent) => {
|
||||
ev.stopPropagation();
|
||||
};
|
||||
|
||||
const onClick = () => {
|
||||
scrollToTop(el.value, { behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const calcBg = () => {
|
||||
const rawBg = props.info?.bg || 'var(--bg)';
|
||||
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
||||
tinyBg.setAlpha(0.85);
|
||||
bg.value = tinyBg.toRgbString();
|
||||
};
|
||||
|
||||
const showDrawerNav = () => {
|
||||
eventBus.emit('kn-drawernav');
|
||||
};
|
||||
|
||||
const onHeaderClick = () => {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const queueUpdated = (q) => {
|
||||
this.queue = q;
|
||||
};
|
||||
|
||||
const queueReset = () => {
|
||||
this.queue = 0;
|
||||
};
|
||||
|
||||
const top = () => {
|
||||
this.onHeaderClick();
|
||||
this.queueReset();
|
||||
eventBus.emit('kn-header-new-queue-reset', 0);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
calcBg();
|
||||
globalEvents.on('themeChanged', calcBg);
|
||||
onUnmounted(() => {
|
||||
globalEvents.off('themeChanged', calcBg);
|
||||
});
|
||||
|
||||
if (el.value.parentElement) {
|
||||
height.value = el.value.parentElement.offsetHeight + 'px';
|
||||
narrow.value = el.value.parentElement.offsetWidth < 500;
|
||||
const ro = new ResizeObserver((entries, observer) => {
|
||||
if (el.value) {
|
||||
height.value = el.value.parentElement.offsetHeight + 'px';
|
||||
narrow.value = el.value.parentElement.offsetWidth < 500;
|
||||
}
|
||||
});
|
||||
ro.observe(el.value.parentElement);
|
||||
onUnmounted(() => {
|
||||
ro.disconnect();
|
||||
});
|
||||
setTimeout(() => {
|
||||
const currentStickyTop = getComputedStyle(el.value.parentElement).getPropertyValue('--stickyTop') || '0px';
|
||||
el.value.style.setProperty('--stickyTop', currentStickyTop);
|
||||
el.value.parentElement.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${el.value.offsetHeight}px)`);
|
||||
}, 100); // レンダリング順序の関係で親のstickyTopの設定が少し遅れることがあるため
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
el,
|
||||
bg,
|
||||
narrow,
|
||||
height,
|
||||
hasTabs,
|
||||
shouldShowMenu,
|
||||
canBack,
|
||||
key,
|
||||
queue,
|
||||
fabButton,
|
||||
menuBar,
|
||||
share,
|
||||
showMenu,
|
||||
showTabsPopup,
|
||||
preventDrag,
|
||||
onClick,
|
||||
showDrawerNav,
|
||||
onHeaderClick,
|
||||
queueUpdated,
|
||||
queueReset,
|
||||
top,
|
||||
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
|
||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
||||
routeList: [
|
||||
'explore',
|
||||
'notifications',
|
||||
'messaging'
|
||||
],
|
||||
hideTitle: inject('shouldOmitHeaderTitle', false),
|
||||
thin_: props.thin || inject('shouldHeaderThin', false),
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route: {
|
||||
handler(to, from) {
|
||||
this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
|
||||
this.fabButton = this.routeList.includes(this.$route.name);
|
||||
this.menuBar = this.routeList.includes(this.$route.name);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
|
||||
eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
|
||||
console.log(this.fabButton);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fdidabkb {
|
||||
$ui-font-size: 1em;
|
||||
$avatar-size: 32px;
|
||||
$avatar-margin: 10px;
|
||||
display: flex;
|
||||
|
||||
&.thin {
|
||||
--height: 50px;
|
||||
|
||||
> .titleContainer {
|
||||
> .buttons {
|
||||
&.left, &.right {
|
||||
> .button {
|
||||
$size: 50px;
|
||||
height: $size;
|
||||
width: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.slim {
|
||||
text-align: center;
|
||||
|
||||
> .titleContainer {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
&.right {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
&:empty {
|
||||
width: var(--height);
|
||||
}
|
||||
|
||||
&.left, &.right {
|
||||
>.button {
|
||||
height: var(--height);
|
||||
width: var(--height);
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
> .button {
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 13px;
|
||||
left: 43px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .new {
|
||||
width: $avatar-size;
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
> .new-hover {
|
||||
position: absolute;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
top: 55px;
|
||||
right: 14px;
|
||||
border-radius: 100%;
|
||||
// border: 2px solid var(--patron);
|
||||
line-height: 0;
|
||||
background: var(--pick);
|
||||
margin-top: 10px;
|
||||
// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:hover {
|
||||
background: var(--pickLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .fullButton {
|
||||
& + .fullButton {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .titleContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
height: var(--height);
|
||||
flex-shrink: 0;
|
||||
|
||||
> .avatar {
|
||||
$size: 32px;
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: bottom;
|
||||
margin: 0 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
> .title,
|
||||
.title_user {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 7px;
|
||||
color: var(--indicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
margin-left: 0.5em;
|
||||
color: var(--patron);
|
||||
}
|
||||
|
||||
> .subtitle {
|
||||
opacity: 0.6;
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.activeTab {
|
||||
text-align: center;
|
||||
|
||||
> .chevron {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&._button {
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow: 0 -2px 0 0 var(--accent) inset;
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> .title_user {
|
||||
min-width: 0;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
&.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
> .tabs {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> .tabs {
|
||||
margin-left: 16px;
|
||||
font-size: 0.8em;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
> .tab {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
> .icon + .title {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,735 +0,0 @@
|
||||
<template>
|
||||
<div class="mvcprjjd">
|
||||
<transition name="nav-back">
|
||||
<div class="nav-back _modalBg"
|
||||
v-if="showing"
|
||||
@click="showing = isAccountMenuMode = false"
|
||||
@touchstart.passive="showing = isAccountMenuMode = false"
|
||||
></div>
|
||||
</transition>
|
||||
|
||||
<transition name="nav">
|
||||
<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
|
||||
<div>
|
||||
<div class="profile">
|
||||
<button class="item _button account" @click="openProfile">
|
||||
<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
|
||||
</button>
|
||||
<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
|
||||
<i class="fas fa-ellipsis-v"/>
|
||||
</button>
|
||||
<button v-else class="_button toggler" @click="toggleMenuMode">
|
||||
<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
|
||||
<i v-else class="fas fa-chevron-down"/>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="!isAccountMenuMode">
|
||||
<div class="divider"></div>
|
||||
<MkA class="item index" active-class="active" to="/" exact v-click-anime>
|
||||
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
|
||||
</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: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
|
||||
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
|
||||
<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="/admin" v-click-anime>
|
||||
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
|
||||
</MkA>
|
||||
<button class="item _button" @click="more" v-click-anime>
|
||||
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
<MkA class="item" active-class="active" to="/settings" v-click-anime>
|
||||
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
|
||||
</MkA>
|
||||
<!-- <button class="item _button post" @click="post">
|
||||
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
|
||||
</button> -->
|
||||
<div class="divider"></div>
|
||||
<template v-if="$i.isPatron">
|
||||
<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
|
||||
</button>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<button v-else class="patron-button _button" @click="patron" v-click-anime>
|
||||
<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<div class="about">
|
||||
<MkA class="link" to="/about" v-click-anime>
|
||||
<template v-if="isKokonect">
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
|
||||
<p style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
|
||||
</template>
|
||||
</MkA>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
|
||||
<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
|
||||
</button>
|
||||
<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
|
||||
<div class="divider" v-if="accounts.length > 0"></div>
|
||||
<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
|
||||
<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</nav>
|
||||
</transition>
|
||||
</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/friendly/menu-mobile';
|
||||
import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
defaultHidden: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: host,
|
||||
showing: false,
|
||||
accounts: [],
|
||||
connection: null,
|
||||
menuDef: menuDef,
|
||||
iconOnly: false,
|
||||
hidden: this.defaultHidden,
|
||||
isAccountMenuMode: false,
|
||||
loadingAccounts: false,
|
||||
isKokonect: null
|
||||
};
|
||||
},
|
||||
|
||||
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: {
|
||||
$route(to, from) {
|
||||
this.showing = false;
|
||||
},
|
||||
|
||||
'$store.reactiveState.menuDisplay.value'() {
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
iconOnly() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
},
|
||||
|
||||
hidden() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change-view-mode');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('resize', this.calcViewState);
|
||||
this.calcViewState();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcViewState() {
|
||||
this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
|
||||
if (!this.defaultHidden) {
|
||||
this.hidden = (window.innerWidth <= 650);
|
||||
}
|
||||
},
|
||||
|
||||
show() {
|
||||
this.showing = true;
|
||||
},
|
||||
|
||||
post() {
|
||||
os.post_form();
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
openProfile() {
|
||||
this.$router.push({ path: `/@${ this.$i.username }` })
|
||||
},
|
||||
|
||||
async fetchAccounts() {
|
||||
this.loadingAccounts = true;
|
||||
this.accounts = await os.getAccounts();
|
||||
this.loadingAccounts = false;
|
||||
},
|
||||
|
||||
toggleMenuMode() {
|
||||
this.isAccountMenuMode = !this.isAccountMenuMode;
|
||||
if (this.isAccountMenuMode) {
|
||||
this.fetchAccounts();
|
||||
}
|
||||
},
|
||||
|
||||
async openAccountMenu(ev) {
|
||||
const storedAccounts = await getAccounts().then(accounts => accounts.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.popupMenu([...[{
|
||||
type: 'link',
|
||||
text: this.$ts.profile,
|
||||
to: `/@${ this.$i.username }`,
|
||||
avatar: this.$i,
|
||||
}, null, ...accountItemPromises, {
|
||||
text: this.$ts.addAccount,
|
||||
icon: 'fas fa-plus',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
}, {
|
||||
text: this.$ts.logout,
|
||||
icon: 'fas fa-sign-out-alt',
|
||||
action: () => {
|
||||
os.popupMenu([{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
danger: true,
|
||||
}]], 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');
|
||||
},
|
||||
|
||||
async switchAccount(account: any) {
|
||||
const storedAccounts = await getAccounts();
|
||||
const token = storedAccounts.find(x => x.id === account.id).token;
|
||||
this.switchAccountWithToken(token);
|
||||
},
|
||||
|
||||
switchAccountWithToken(token: string) {
|
||||
login(token);
|
||||
},
|
||||
|
||||
patron() {
|
||||
window.open("https://www.patreon.com/noridev", "_blank");
|
||||
},
|
||||
|
||||
async init() {
|
||||
const meta = await os.api('meta', { detail: true });
|
||||
this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
|
||||
},
|
||||
|
||||
async openDrawerAccountMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.existingAccount,
|
||||
action: () => { this.addAccount(); },
|
||||
}, {
|
||||
text: this.$ts.createAccount,
|
||||
action: () => { this.createAccount(); },
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
async openSignoutMenu(ev) {
|
||||
os.popupMenu([...[{
|
||||
text: this.$ts.logout,
|
||||
action: () => { this.signout(); },
|
||||
danger: true,
|
||||
}, {
|
||||
text: this.$ts.logoutAll,
|
||||
action: () => { this.signoutAll(); },
|
||||
danger: true,
|
||||
}]], ev.currentTarget || ev.target, {
|
||||
align: 'left'
|
||||
});
|
||||
},
|
||||
|
||||
signout,
|
||||
signoutAll,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-enter-active,
|
||||
.nav-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-enter-from,
|
||||
.nav-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
.nav-back-enter-active,
|
||||
.nav-back-leave-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.nav-back-enter-from,
|
||||
.nav-back-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mvcprjjd {
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$nav-width: 250px;
|
||||
$nav-icon-only-width: 86px;
|
||||
|
||||
> .nav-back {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
> .nav {
|
||||
$avatar-size: 38px;
|
||||
$avatar-margin: 8px;
|
||||
|
||||
flex: 0 0 $nav-width;
|
||||
width: $nav-width;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.iconOnly {
|
||||
flex: 0 0 $nav-icon-only-width;
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
&:not(.hidden) {
|
||||
> div {
|
||||
width: $nav-icon-only-width;
|
||||
|
||||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
padding: 18px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $ui-font-size * 1.1;
|
||||
line-height: initial;
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
> i {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .text,
|
||||
.patron-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
> i, > .text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
&:not(.hidden) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
width: $nav-width;
|
||||
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overflow-x: clip;
|
||||
background: var(--navBg);
|
||||
|
||||
> .divider {
|
||||
margin: 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .about {
|
||||
fill: currentColor;
|
||||
padding: 8px 0 16px 0;
|
||||
text-align: center;
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
//width: 32px;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item,
|
||||
.patron-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 24px;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 2.85rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 20px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 7px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .text {
|
||||
position: relative;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
> .patron,
|
||||
.not-patron {
|
||||
margin-left: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> .patron {
|
||||
color: var(--patron);
|
||||
}
|
||||
|
||||
> .patron-text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 24px);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 8px;
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
margin-top: 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
color: var(--fgOnAccent);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
background: var(--accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item-switch-acct,
|
||||
> .item-button {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 24px 0;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
> .item-button {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
> .profile {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
> .item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 24px 0;
|
||||
font-size: $ui-font-size;
|
||||
line-height: 3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
|
||||
> i {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
> i,
|
||||
> .avatar {
|
||||
margin-right: $avatar-margin;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
}
|
||||
}
|
||||
|
||||
> .toggler {
|
||||
//position: absolute;
|
||||
//right: 15px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 12px 15px 0 0;
|
||||
padding: 10px;
|
||||
z-index: 400;
|
||||
}
|
||||
}
|
||||
|
||||
> .patron-button {
|
||||
background: unset;
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user