From f565c5f730b8d90233e050ff2abf803870e5c4c8 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 7 Aug 2021 19:19:31 +0900 Subject: Improve chat UI (wip) --- src/client/ui/chat/index.vue | 246 ++++++---------------------- src/client/ui/chat/pages/channel.vue | 259 ++++++++++++++++++++++++++++++ src/client/ui/chat/pages/timeline.vue | 221 +++++++++++++++++++++++++ src/client/ui/chat/side.vue | 11 +- src/client/ui/chat/timeline.vue | 292 ---------------------------------- 5 files changed, 538 insertions(+), 491 deletions(-) create mode 100644 src/client/ui/chat/pages/channel.vue create mode 100644 src/client/ui/chat/pages/timeline.vue delete mode 100644 src/client/ui/chat/timeline.vue (limited to 'src/client/ui') diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue index 6e433de126..db663c4530 100644 --- a/src/client/ui/chat/index.vue +++ b/src/client/ui/chat/index.vue @@ -73,54 +73,16 @@
-
-
- - - - - -
- -
-
{{ instanceName }}
- - - - - - -
+
+
- - - + + + + + + +
@@ -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) { diff --git a/src/client/ui/chat/pages/channel.vue b/src/client/ui/chat/pages/channel.vue new file mode 100644 index 0000000000..76b334487e --- /dev/null +++ b/src/client/ui/chat/pages/channel.vue @@ -0,0 +1,259 @@ + + + + + diff --git a/src/client/ui/chat/pages/timeline.vue b/src/client/ui/chat/pages/timeline.vue new file mode 100644 index 0000000000..0f9cd7f11e --- /dev/null +++ b/src/client/ui/chat/pages/timeline.vue @@ -0,0 +1,221 @@ + + + + + diff --git a/src/client/ui/chat/side.vue b/src/client/ui/chat/side.vue index 7ad39c7a19..5ccfad1b75 100644 --- a/src/client/ui/chat/side.vue +++ b/src/client/ui/chat/side.vue @@ -1,11 +1,9 @@ @@ -130,7 +128,6 @@ export default defineComponent({ top: 0; height: $header-height; width: 100%; - line-height: $header-height; font-weight: bold; //background-color: var(--panel); -webkit-backdrop-filter: blur(32px); @@ -153,6 +150,10 @@ export default defineComponent({ position: relative; } } + + > .body { + + } } diff --git a/src/client/ui/chat/timeline.vue b/src/client/ui/chat/timeline.vue deleted file mode 100644 index 0fbcbfb713..0000000000 --- a/src/client/ui/chat/timeline.vue +++ /dev/null @@ -1,292 +0,0 @@ - - - - - -- cgit v1.2.3-freya