HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
syuilo 2018-02-13 13:49:48 +09:00
parent c775e7d965
commit f789f111c1
4 changed files with 80 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/web/app/common/views/components/index.ts
View file

@ -6,6 +6,7 @@ import forkit from './forkit.vue';
import nav from './nav.vue'; import nav from './nav.vue';
import postHtml from './post-html'; import postHtml from './post-html';
import reactionIcon from './reaction-icon.vue'; import reactionIcon from './reaction-icon.vue';
import time from './time.vue';
Vue.component('mk-signin', signin); Vue.component('mk-signin', signin);
Vue.component('mk-signup', signup); Vue.component('mk-signup', signup);
@ -13,3 +14,4 @@ Vue.component('mk-forkit', forkit);
Vue.component('mk-nav', nav); Vue.component('mk-nav', nav);
Vue.component('mk-post-html', postHtml); Vue.component('mk-post-html', postHtml);
Vue.component('mk-reaction-icon', reactionIcon); Vue.component('mk-reaction-icon', reactionIcon);
Vue.component('mk-time', time);

53
src/web/app/common/views/components/time.vue
View file

@ -6,38 +6,51 @@
</time> </time>
</template> </template>
<script lang="typescript"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: ['time', 'mode'], props: {
time: {
type: [Date, String],
required: true
},
mode: {
type: String,
default: 'relative'
}
},
data() { data() {
return { return {
mode: 'relative',
tickId: null, tickId: null,
now: new Date() now: new Date()
}; };
}, },
computed: { computed: {
absolute() { _time(): Date {
return ( return typeof this.time == 'string' ? new Date(this.time) : this.time;
this.time.getFullYear() + '年' +
(this.time.getMonth() + 1) + '月' +
this.time.getDate() + '日' +
' ' +
this.time.getHours() + '時' +
this.time.getMinutes() + '分');
}, },
relative() { absolute(): string {
const ago = (this.now - this.time) / 1000/*ms*/; const time = this._time;
return ( return (
ago >= 31536000 ? '%i18n:common.time.years_ago%' .replace('{}', ~~(ago / 31536000)) : time.getFullYear() + '年' +
ago >= 2592000 ? '%i18n:common.time.months_ago%' .replace('{}', ~~(ago / 2592000)) : (time.getMonth() + 1) + '月' +
ago >= 604800 ? '%i18n:common.time.weeks_ago%' .replace('{}', ~~(ago / 604800)) : time.getDate() + '日' +
ago >= 86400 ? '%i18n:common.time.days_ago%' .replace('{}', ~~(ago / 86400)) : ' ' +
ago >= 3600 ? '%i18n:common.time.hours_ago%' .replace('{}', ~~(ago / 3600)) : time.getHours() + '時' +
ago >= 60 ? '%i18n:common.time.minutes_ago%'.replace('{}', ~~(ago / 60)) : time.getMinutes() + '分');
ago >= 10 ? '%i18n:common.time.seconds_ago%'.replace('{}', ~~(ago % 60)) : },
relative(): string {
const time = this._time;
const ago = (this.now.getTime() - time.getTime()) / 1000/*ms*/;
return (
ago >= 31536000 ? '%i18n:common.time.years_ago%' .replace('{}', (~~(ago / 31536000)).toString()) :
ago >= 2592000 ? '%i18n:common.time.months_ago%' .replace('{}', (~~(ago / 2592000)).toString()) :
ago >= 604800 ? '%i18n:common.time.weeks_ago%' .replace('{}', (~~(ago / 604800)).toString()) :
ago >= 86400 ? '%i18n:common.time.days_ago%' .replace('{}', (~~(ago / 86400)).toString()) :
ago >= 3600 ? '%i18n:common.time.hours_ago%' .replace('{}', (~~(ago / 3600)).toString()) :
ago >= 60 ? '%i18n:common.time.minutes_ago%'.replace('{}', (~~(ago / 60)).toString()) :
ago >= 10 ? '%i18n:common.time.seconds_ago%'.replace('{}', (~~(ago % 60)).toString()) :
ago >= 0 ? '%i18n:common.time.just_now%' : ago >= 0 ? '%i18n:common.time.just_now%' :
ago < 0 ? '%i18n:common.time.future%' : ago < 0 ? '%i18n:common.time.future%' :
'%i18n:common.time.unknown%'); '%i18n:common.time.unknown%');

2
src/web/app/desktop/views/components/images-image.vue
View file

@ -4,7 +4,7 @@
@mousemove="onMousemove" @mousemove="onMousemove"
@mouseleave="onMouseleave" @mouseleave="onMouseleave"
@click.prevent="onClick" @click.prevent="onClick"
:style="styles" :style="style"
:title="image.name"></a> :title="image.name"></a>
</template> </template>

11
src/web/app/desktop/views/components/posts-post.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-posts-post" tabindex="-1" :title="title" @keydown="onKeydown" @dblclick="onDblClick"> <div class="mk-posts-post" tabindex="-1" :title="title" @keydown="onKeydown">
<div class="reply-to" v-if="p.reply"> <div class="reply-to" v-if="p.reply">
<mk-posts-post-sub post="p.reply"/> <mk-posts-post-sub post="p.reply"/>
</div> </div>
@ -58,7 +58,7 @@
<button @click="menu" ref="menuButton"> <button @click="menu" ref="menuButton">
%fa:ellipsis-h% %fa:ellipsis-h%
</button> </button>
<button @click="toggleDetail" title="%i18n:desktop.tags.mk-timeline-post.detail"> <button title="%i18n:desktop.tags.mk-timeline-post.detail">
<template v-if="!isDetailOpened">%fa:caret-down%</template> <template v-if="!isDetailOpened">%fa:caret-down%</template>
<template v-if="isDetailOpened">%fa:caret-up%</template> <template v-if="isDetailOpened">%fa:caret-up%</template>
</button> </button>
@ -94,6 +94,7 @@ export default Vue.extend({
props: ['post'], props: ['post'],
data() { data() {
return { return {
isDetailOpened: false,
connection: null, connection: null,
connectionId: null connectionId: null
}; };
@ -109,7 +110,11 @@ export default Vue.extend({
return this.isRepost ? this.post.repost : this.post; return this.isRepost ? this.post.repost : this.post;
}, },
reactionsCount(): number { reactionsCount(): number {
return this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0; return this.p.reaction_counts
? Object.keys(this.p.reaction_counts)
.map(key => this.p.reaction_counts[key])
.reduce((a, b) => a + b)
: 0;
}, },
title(): string { title(): string {
return dateStringify(this.p.created_at); return dateStringify(this.p.created_at);