Improve chat UI (wip)
This commit is contained in:
syuilo
@@ -73,54 +73,16 @@
|
||||
</div>
|
||||
|
||||
<main class="main" @contextmenu.stop="onContextmenu">
|
||||
<header class="header" ref="header" @click="onHeaderClick">
|
||||
<div class="left">
|
||||
<template v-if="tl === 'home'">
|
||||
<i class="fas fa-home icon"></i>
|
||||
<div class="title">{{ $ts._timelines.home }}</div>
|
||||
</template>
|
||||
<template v-else-if="tl === 'local'">
|
||||
<i class="fas fa-comments icon"></i>
|
||||
<div class="title">{{ $ts._timelines.local }}</div>
|
||||
</template>
|
||||
<template v-else-if="tl === 'social'">
|
||||
<i class="fas fa-share-alt icon"></i>
|
||||
<div class="title">{{ $ts._timelines.social }}</div>
|
||||
</template>
|
||||
<template v-else-if="tl === 'global'">
|
||||
<i class="fas fa-globe icon"></i>
|
||||
<div class="title">{{ $ts._timelines.global }}</div>
|
||||
</template>
|
||||
<template v-else-if="tl.startsWith('channel:')">
|
||||
<i class="fas fa-satellite-dish icon"></i>
|
||||
<div class="title" v-if="currentChannel">{{ currentChannel.name }}<div class="description">{{ currentChannel.description }}</div></div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="instance">{{ instanceName }}</div>
|
||||
<XHeaderClock class="clock"/>
|
||||
<button class="_button button timetravel" @click="timetravel" v-tooltip="$ts.jumpToSpecifiedDate">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
</button>
|
||||
<button class="_button button search" v-if="tl.startsWith('channel:') && currentChannel" @click="inChannelSearch" v-tooltip="$ts.inChannelSearch">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<button class="_button button search" v-else @click="search" v-tooltip="$ts.search">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<button class="_button button follow" v-if="tl.startsWith('channel:') && currentChannel" :class="{ followed: currentChannel.isFollowing }" @click="toggleChannelFollow" v-tooltip="currentChannel.isFollowing ? $ts.unfollow : $ts.follow">
|
||||
<i v-if="currentChannel.isFollowing" class="fas fa-star"></i>
|
||||
<i v-else class="far fa-star"></i>
|
||||
</button>
|
||||
<button class="_button button menu" v-if="tl.startsWith('channel:') && currentChannel" @click="openChannelMenu">
|
||||
<i class="fas fa-ellipsis-h"></i>
|
||||
</button>
|
||||
</div>
|
||||
<header class="header">
|
||||
<XHeader class="header" :info="pageInfo" :menu="menu" :center="false" :back-button="true" @back="back()" @click="onHeaderClick"/>
|
||||
</header>
|
||||
|
||||
<XTimeline class="body" ref="tl" v-if="tl.startsWith('channel:')" src="channel" :key="tl" :channel="tl.replace('channel:', '')"/>
|
||||
<XTimeline class="body" ref="tl" v-else :src="tl" :key="tl"/>
|
||||
<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" class="body"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</main>
|
||||
|
||||
<XSide class="side" ref="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
|
||||
@@ -139,7 +101,7 @@ import XSidebar from '@client/ui/_common_/sidebar.vue';
|
||||
import XWidgets from './widgets.vue';
|
||||
import XCommon from '../_common_/common.vue';
|
||||
import XSide from './side.vue';
|
||||
import XTimeline from './timeline.vue';
|
||||
import XHeader from '../_common_/header.vue';
|
||||
import XHeaderClock from './header-clock.vue';
|
||||
import * as os from '@client/os';
|
||||
import { router } from '@client/router';
|
||||
@@ -147,6 +109,7 @@ import { menuDef } from '@client/menu';
|
||||
import { search } from '@client/scripts/search';
|
||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||
import { store } from './store';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@@ -154,29 +117,12 @@ export default defineComponent({
|
||||
XSidebar,
|
||||
XWidgets,
|
||||
XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
|
||||
XTimeline,
|
||||
XHeader,
|
||||
XHeaderClock,
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
navHook: (path) => {
|
||||
switch (path) {
|
||||
case '/timeline/home': this.tl = 'home'; return;
|
||||
case '/timeline/local': this.tl = 'local'; return;
|
||||
case '/timeline/social': this.tl = 'social'; return;
|
||||
case '/timeline/global': this.tl = 'global'; return;
|
||||
|
||||
default:
|
||||
if (path.startsWith('/channels/')) {
|
||||
this.tl = `channel:${ path.replace('/channels/', '') }`;
|
||||
return;
|
||||
}
|
||||
//os.pageWindow(path);
|
||||
this.$refs.side.navigate(path);
|
||||
break;
|
||||
}
|
||||
},
|
||||
sideViewHook: (path) => {
|
||||
this.$refs.side.navigate(path);
|
||||
}
|
||||
@@ -185,7 +131,7 @@ export default defineComponent({
|
||||
|
||||
data() {
|
||||
return {
|
||||
tl: store.state.tl,
|
||||
pageInfo: null,
|
||||
lists: null,
|
||||
antennas: null,
|
||||
followedChannels: null,
|
||||
@@ -197,18 +143,30 @@ export default defineComponent({
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
menu() {
|
||||
return [{
|
||||
icon: 'fas fa-columns',
|
||||
text: this.$ts.openInSideView,
|
||||
action: () => {
|
||||
this.$refs.side.navigate(this.$route.path);
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-window-maximize',
|
||||
text: this.$ts.openInWindow,
|
||||
action: () => {
|
||||
os.pageWindow(this.$route.path);
|
||||
}
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
if (window.innerWidth < 1024) {
|
||||
localStorage.setItem('ui', 'default');
|
||||
location.reload();
|
||||
}
|
||||
|
||||
router.beforeEach((to, from) => {
|
||||
this.$refs.side.navigate(to.fullPath);
|
||||
// search?q=foo のようなクエリを受け取れるようにするため、return falseはできない
|
||||
//return false;
|
||||
});
|
||||
|
||||
os.api('users/lists/list').then(lists => {
|
||||
this.lists = lists;
|
||||
});
|
||||
@@ -225,18 +183,22 @@ export default defineComponent({
|
||||
os.api('channels/featured', { limit: 20 }).then(channels => {
|
||||
this.featuredChannels = channels;
|
||||
});
|
||||
|
||||
this.$watch('tl', () => {
|
||||
if (this.tl.startsWith('channel:')) {
|
||||
os.api('channels/show', { channelId: this.tl.replace('channel:', '') }).then(channel => {
|
||||
this.currentChannel = channel;
|
||||
});
|
||||
}
|
||||
store.set('tl', this.tl);
|
||||
}, { immediate: true });
|
||||
},
|
||||
|
||||
methods: {
|
||||
changePage(page) {
|
||||
console.log(page);
|
||||
if (page == null) return;
|
||||
if (page[symbols.PAGE_INFO]) {
|
||||
this.pageInfo = page[symbols.PAGE_INFO];
|
||||
document.title = `${this.pageInfo.title} | ${instanceName}`;
|
||||
}
|
||||
},
|
||||
|
||||
onTransition() {
|
||||
if (window._scroll) window._scroll();
|
||||
},
|
||||
|
||||
showMenu() {
|
||||
this.$refs.menu.show();
|
||||
},
|
||||
@@ -245,59 +207,18 @@ export default defineComponent({
|
||||
os.post();
|
||||
},
|
||||
|
||||
async timetravel() {
|
||||
const { canceled, result: date } = await os.dialog({
|
||||
title: this.$ts.date,
|
||||
input: {
|
||||
type: 'date'
|
||||
}
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
this.$refs.tl.timetravel(new Date(date));
|
||||
},
|
||||
|
||||
search() {
|
||||
search();
|
||||
},
|
||||
|
||||
async inChannelSearch() {
|
||||
const { canceled, result: query } = await os.dialog({
|
||||
title: this.$ts.inChannelSearch,
|
||||
input: true
|
||||
});
|
||||
if (canceled || query == null || query === '') return;
|
||||
router.push(`/search?q=${encodeURIComponent(query)}&channel=${this.currentChannel.id}`);
|
||||
back() {
|
||||
history.back();
|
||||
},
|
||||
|
||||
top() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
|
||||
async toggleChannelFollow() {
|
||||
if (this.currentChannel.isFollowing) {
|
||||
await os.apiWithDialog('channels/unfollow', {
|
||||
channelId: this.currentChannel.id
|
||||
});
|
||||
this.currentChannel.isFollowing = false;
|
||||
} else {
|
||||
await os.apiWithDialog('channels/follow', {
|
||||
channelId: this.currentChannel.id
|
||||
});
|
||||
this.currentChannel.isFollowing = true;
|
||||
}
|
||||
},
|
||||
|
||||
openChannelMenu(ev) {
|
||||
os.modalMenu([{
|
||||
text: this.$ts.copyUrl,
|
||||
icon: 'fas fa-link',
|
||||
action: () => {
|
||||
copyToClipboard(`${url}/channels/${this.currentChannel.id}`);
|
||||
}
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
|
||||
onTransition() {
|
||||
if (window._scroll) window._scroll();
|
||||
},
|
||||
@@ -516,87 +437,24 @@ export default defineComponent({
|
||||
background: var(--panel);
|
||||
|
||||
> .header {
|
||||
$padding: 8px;
|
||||
display: flex;
|
||||
z-index: 1000;
|
||||
height: $header-height;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--panel);
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
> .left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
> .icon {
|
||||
height: ($header-height - ($padding * 2));
|
||||
width: ($header-height - ($padding * 2));
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 4px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
> .title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
font-weight: bold;
|
||||
|
||||
> .description {
|
||||
opacity: 0.6;
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
margin-left: auto;
|
||||
padding-left: 8px;
|
||||
|
||||
> .instance {
|
||||
margin-right: 16px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
> .clock {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
> .button {
|
||||
height: ($header-height - ($padding * 2));
|
||||
width: ($header-height - ($padding * 2));
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&.follow.followed {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .body {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .side {
|
||||
width: 350px;
|
||||
border-left: solid 4px var(--divider);
|
||||
background: var(--panel);
|
||||
|
||||
&.widgets.sideViewOpening {
|
||||
@media (max-width: 1400px) {
|
||||
|
||||
Reference in New Issue
Block a user