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…
	
	Add table
		Add a link
		
	
		Reference in a new issue