From 469ff88287086d91444aafcfa94b1d61e16fe3f9 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Mon, 19 Feb 2018 14:29:42 +0900 Subject: [PATCH] wip --- src/web/app/common/views/components/nav.vue | 8 +++++++- src/web/app/desktop/script.ts | 3 +++ .../desktop/views/components/posts-post.vue | 18 ++++++++++-------- .../views/components/ui-header-nav.vue | 4 ++-- .../desktop/views/directives/user-preview.ts | 19 +++++++++---------- .../desktop/views/pages/user/user-home.vue | 2 +- src/web/app/desktop/views/pages/user/user.vue | 13 ++++++++----- webpack/plugins/index.ts | 2 +- 8 files changed, 41 insertions(+), 28 deletions(-) diff --git a/src/web/app/common/views/components/nav.vue b/src/web/app/common/views/components/nav.vue index 6cd86216c..8ce75d352 100644 --- a/src/web/app/common/views/components/nav.vue +++ b/src/web/app/common/views/components/nav.vue @@ -1,5 +1,5 @@ <template> -<span> +<span class="mk-nav"> <a :href="aboutUrl">%i18n:common.tags.mk-nav-links.about%</a> <i>・</i> <a :href="statsUrl">%i18n:common.tags.mk-nav-links.stats%</a> @@ -33,3 +33,9 @@ export default Vue.extend({ } }); </script> + +<style lang="stylus" scoped> +.mk-nav + a + color inherit +</style> diff --git a/src/web/app/desktop/script.ts b/src/web/app/desktop/script.ts index cb7a53fb2..7278c9af1 100644 --- a/src/web/app/desktop/script.ts +++ b/src/web/app/desktop/script.ts @@ -16,6 +16,7 @@ import dialog from './api/dialog'; import input from './api/input'; import MkIndex from './views/pages/index.vue'; +import MkUser from './views/pages/user/user.vue'; /** * init @@ -55,6 +56,8 @@ init(async (launch) => { app.$router.addRoutes([{ path: '/', component: MkIndex + }, { + path: '/:user', component: MkUser }]); }, true); diff --git a/src/web/app/desktop/views/components/posts-post.vue b/src/web/app/desktop/views/components/posts-post.vue index 90db8088c..f16811609 100644 --- a/src/web/app/desktop/views/components/posts-post.vue +++ b/src/web/app/desktop/views/components/posts-post.vue @@ -5,32 +5,34 @@ </div> <div class="repost" v-if="isRepost"> <p> - <a class="avatar-anchor" :href="`/${post.user.username}`" v-user-preview="post.user_id"> + <router-link class="avatar-anchor" :to="`/${post.user.username}`" v-user-preview="post.user_id"> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=32`" alt="avatar"/> - </a> + </router-link> %fa:retweet%{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}}<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}} </p> <mk-time :time="post.created_at"/> </div> <article> - <a class="avatar-anchor" :href="`/${p.user.username}`"> + <router-link class="avatar-anchor" :to="`/${p.user.username}`"> <img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/> - </a> + </router-link> <div class="main"> <header> - <a class="name" :href="`/${p.user.username}`" v-user-preview="p.user.id">{{ p.user.name }}</a> + <router-link class="name" :to="`/${p.user.username}`" v-user-preview="p.user.id">{{ p.user.name }}</router-link> <span class="is-bot" v-if="p.user.is_bot">bot</span> <span class="username">@{{ p.user.username }}</span> <div class="info"> <span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span> - <a class="created-at" :href="url"> + <router-link class="created-at" :to="url"> <mk-time :time="p.created_at"/> - </a> + </router-link> </div> </header> <div class="body"> <div class="text" ref="text"> - <p class="channel" v-if="p.channel"><a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:</p> + <p class="channel" v-if="p.channel"> + <a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>: + </p> <a class="reply" v-if="p.reply">%fa:reply%</a> <mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i"/> <a class="quote" v-if="p.repost">RP:</a> diff --git a/src/web/app/desktop/views/components/ui-header-nav.vue b/src/web/app/desktop/views/components/ui-header-nav.vue index 6d2c3bd47..cf276dc5c 100644 --- a/src/web/app/desktop/views/components/ui-header-nav.vue +++ b/src/web/app/desktop/views/components/ui-header-nav.vue @@ -3,10 +3,10 @@ <ul> <template v-if="os.isSignedIn"> <li class="home" :class="{ active: page == 'home' }"> - <a href="/"> + <router-link to="/"> %fa:home% <p>%i18n:desktop.tags.mk-ui-header-nav.home%</p> - </a> + </router-link> </li> <li class="messaging"> <a @click="messaging"> diff --git a/src/web/app/desktop/views/directives/user-preview.ts b/src/web/app/desktop/views/directives/user-preview.ts index 6e800ee73..8a4035881 100644 --- a/src/web/app/desktop/views/directives/user-preview.ts +++ b/src/web/app/desktop/views/directives/user-preview.ts @@ -6,32 +6,31 @@ import MkUserPreview from '../components/user-preview.vue'; export default { bind(el, binding, vn) { - const self = vn.context._userPreviewDirective_ = {} as any; + const self = el._userPreviewDirective_ = {} as any; self.user = binding.value; - - let tag = null; + self.tag = null; self.showTimer = null; self.hideTimer = null; self.close = () => { - if (tag) { - tag.close(); - tag = null; + if (self.tag) { + self.tag.close(); + self.tag = null; } }; const show = () => { - if (tag) return; + if (self.tag) return; - tag = new MkUserPreview({ + self.tag = new MkUserPreview({ parent: vn.context, propsData: { user: self.user } }).$mount(); - const preview = tag.$el; + const preview = self.tag.$el; const rect = el.getBoundingClientRect(); const x = rect.left + el.offsetWidth + window.pageXOffset; const y = rect.top + window.pageYOffset; @@ -65,7 +64,7 @@ export default { }, unbind(el, binding, vn) { - const self = vn.context._userPreviewDirective_; + const self = el._userPreviewDirective_; clearTimeout(self.showTimer); clearTimeout(self.hideTimer); self.close(); diff --git a/src/web/app/desktop/views/pages/user/user-home.vue b/src/web/app/desktop/views/pages/user/user-home.vue index 2e67b1ec3..ca2c68840 100644 --- a/src/web/app/desktop/views/pages/user/user-home.vue +++ b/src/web/app/desktop/views/pages/user/user-home.vue @@ -17,7 +17,7 @@ <mk-calendar-widget @warp="warp" :start="new Date(user.created_at)"/> <mk-activity-widget :user="user"/> <mk-user-friends :user="user"/> - <div class="nav"><mk-nav-links/></div> + <div class="nav"><mk-nav/></div> </div> </div> </div> diff --git a/src/web/app/desktop/views/pages/user/user.vue b/src/web/app/desktop/views/pages/user/user.vue index 3339c2dce..765057e65 100644 --- a/src/web/app/desktop/views/pages/user/user.vue +++ b/src/web/app/desktop/views/pages/user/user.vue @@ -10,13 +10,16 @@ <script lang="ts"> import Vue from 'vue'; -import Progress from '../../../common/scripts/loading'; +import Progress from '../../../../common/scripts/loading'; +import MkUserHeader from './user-header.vue'; +import MkUserHome from './user-home.vue'; export default Vue.extend({ + components: { + 'mk-user-header': MkUserHeader, + 'mk-user-home': MkUserHome + }, props: { - username: { - type: String - }, page: { default: 'home' } @@ -30,7 +33,7 @@ export default Vue.extend({ mounted() { Progress.start(); (this as any).api('users/show', { - username: this.username + username: this.$route.params.user }).then(user => { this.fetching = false; this.user = user; diff --git a/webpack/plugins/index.ts b/webpack/plugins/index.ts index a29d2b7e2..027f60224 100644 --- a/webpack/plugins/index.ts +++ b/webpack/plugins/index.ts @@ -9,7 +9,7 @@ const isProduction = env === 'production'; export default (version, lang) => { const plugins = [ - new HardSourceWebpackPlugin(), + //new HardSourceWebpackPlugin(), consts(lang) ];