This commit is contained in:
syuilo 2018-02-19 14:29:42 +09:00
parent 2fe720c610
commit 469ff88287
8 changed files with 41 additions and 28 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<span> <span class="mk-nav">
<a :href="aboutUrl">%i18n:common.tags.mk-nav-links.about%</a> <a :href="aboutUrl">%i18n:common.tags.mk-nav-links.about%</a>
<i></i> <i></i>
<a :href="statsUrl">%i18n:common.tags.mk-nav-links.stats%</a> <a :href="statsUrl">%i18n:common.tags.mk-nav-links.stats%</a>
@ -33,3 +33,9 @@ export default Vue.extend({
} }
}); });
</script> </script>
<style lang="stylus" scoped>
.mk-nav
a
color inherit
</style>

View File

@ -16,6 +16,7 @@ import dialog from './api/dialog';
import input from './api/input'; import input from './api/input';
import MkIndex from './views/pages/index.vue'; import MkIndex from './views/pages/index.vue';
import MkUser from './views/pages/user/user.vue';
/** /**
* init * init
@ -55,6 +56,8 @@ init(async (launch) => {
app.$router.addRoutes([{ app.$router.addRoutes([{
path: '/', component: MkIndex path: '/', component: MkIndex
}, {
path: '/:user', component: MkUser
}]); }]);
}, true); }, true);

View File

@ -5,32 +5,34 @@
</div> </div>
<div class="repost" v-if="isRepost"> <div class="repost" v-if="isRepost">
<p> <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"/> <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)}} %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> </p>
<mk-time :time="post.created_at"/> <mk-time :time="post.created_at"/>
</div> </div>
<article> <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"/> <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"> <div class="main">
<header> <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="is-bot" v-if="p.user.is_bot">bot</span>
<span class="username">@{{ p.user.username }}</span> <span class="username">@{{ p.user.username }}</span>
<div class="info"> <div class="info">
<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span> <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"/> <mk-time :time="p.created_at"/>
</a> </router-link>
</div> </div>
</header> </header>
<div class="body"> <div class="body">
<div class="text" ref="text"> <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> <a class="reply" v-if="p.reply">%fa:reply%</a>
<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i"/> <mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i"/>
<a class="quote" v-if="p.repost">RP:</a> <a class="quote" v-if="p.repost">RP:</a>

View File

@ -3,10 +3,10 @@
<ul> <ul>
<template v-if="os.isSignedIn"> <template v-if="os.isSignedIn">
<li class="home" :class="{ active: page == 'home' }"> <li class="home" :class="{ active: page == 'home' }">
<a href="/"> <router-link to="/">
%fa:home% %fa:home%
<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p> <p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
</a> </router-link>
</li> </li>
<li class="messaging"> <li class="messaging">
<a @click="messaging"> <a @click="messaging">

View File

@ -6,32 +6,31 @@ import MkUserPreview from '../components/user-preview.vue';
export default { export default {
bind(el, binding, vn) { bind(el, binding, vn) {
const self = vn.context._userPreviewDirective_ = {} as any; const self = el._userPreviewDirective_ = {} as any;
self.user = binding.value; self.user = binding.value;
self.tag = null;
let tag = null;
self.showTimer = null; self.showTimer = null;
self.hideTimer = null; self.hideTimer = null;
self.close = () => { self.close = () => {
if (tag) { if (self.tag) {
tag.close(); self.tag.close();
tag = null; self.tag = null;
} }
}; };
const show = () => { const show = () => {
if (tag) return; if (self.tag) return;
tag = new MkUserPreview({ self.tag = new MkUserPreview({
parent: vn.context, parent: vn.context,
propsData: { propsData: {
user: self.user user: self.user
} }
}).$mount(); }).$mount();
const preview = tag.$el; const preview = self.tag.$el;
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const x = rect.left + el.offsetWidth + window.pageXOffset; const x = rect.left + el.offsetWidth + window.pageXOffset;
const y = rect.top + window.pageYOffset; const y = rect.top + window.pageYOffset;
@ -65,7 +64,7 @@ export default {
}, },
unbind(el, binding, vn) { unbind(el, binding, vn) {
const self = vn.context._userPreviewDirective_; const self = el._userPreviewDirective_;
clearTimeout(self.showTimer); clearTimeout(self.showTimer);
clearTimeout(self.hideTimer); clearTimeout(self.hideTimer);
self.close(); self.close();

View File

@ -17,7 +17,7 @@
<mk-calendar-widget @warp="warp" :start="new Date(user.created_at)"/> <mk-calendar-widget @warp="warp" :start="new Date(user.created_at)"/>
<mk-activity-widget :user="user"/> <mk-activity-widget :user="user"/>
<mk-user-friends :user="user"/> <mk-user-friends :user="user"/>
<div class="nav"><mk-nav-links/></div> <div class="nav"><mk-nav/></div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -10,13 +10,16 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; 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({ export default Vue.extend({
components: {
'mk-user-header': MkUserHeader,
'mk-user-home': MkUserHome
},
props: { props: {
username: {
type: String
},
page: { page: {
default: 'home' default: 'home'
} }
@ -30,7 +33,7 @@ export default Vue.extend({
mounted() { mounted() {
Progress.start(); Progress.start();
(this as any).api('users/show', { (this as any).api('users/show', {
username: this.username username: this.$route.params.user
}).then(user => { }).then(user => {
this.fetching = false; this.fetching = false;
this.user = user; this.user = user;

View File

@ -9,7 +9,7 @@ const isProduction = env === 'production';
export default (version, lang) => { export default (version, lang) => {
const plugins = [ const plugins = [
new HardSourceWebpackPlugin(), //new HardSourceWebpackPlugin(),
consts(lang) consts(lang)
]; ];