forked from FoundKeyGang/FoundKey
wip
This commit is contained in:
parent
2fe720c610
commit
469ff88287
8 changed files with 41 additions and 28 deletions
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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)
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue