This commit is contained in:
syuilo 2018-09-04 02:09:56 +09:00
parent ba38f64353
commit 3698c679e2
6 changed files with 143 additions and 116 deletions

View file

@ -375,6 +375,10 @@ common/views/components/visibility-chooser.vue:
specified-desc: "指定したユーザーにのみ公開" specified-desc: "指定したユーザーにのみ公開"
private: "非公開" private: "非公開"
common/views/components/trends.vue:
count: "{}人が投稿"
empty: "トレンドなし"
common/views/widgets/broadcast.vue: common/views/widgets/broadcast.vue:
fetching: "確認中" fetching: "確認中"
no-broadcasts: "お知らせはありません" no-broadcasts: "お知らせはありません"
@ -403,8 +407,6 @@ common/views/widgets/posts-monitor.vue:
common/views/widgets/hashtags.vue: common/views/widgets/hashtags.vue:
title: "ハッシュタグ" title: "ハッシュタグ"
count: "{}人が投稿"
empty: "トレンドなし"
common/views/widgets/server.vue: common/views/widgets/server.vue:
title: "サーバー情報" title: "サーバー情報"

View file

@ -1,5 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
import trends from './trends.vue';
import analogClock from './analog-clock.vue'; import analogClock from './analog-clock.vue';
import menu from './menu.vue'; import menu from './menu.vue';
import noteHeader from './note-header.vue'; import noteHeader from './note-header.vue';
@ -40,6 +41,7 @@ import uiSelect from './ui/select.vue';
import formButton from './ui/form/button.vue'; import formButton from './ui/form/button.vue';
import formRadio from './ui/form/radio.vue'; import formRadio from './ui/form/radio.vue';
Vue.component('mk-trends', trends);
Vue.component('mk-analog-clock', analogClock); Vue.component('mk-analog-clock', analogClock);
Vue.component('mk-menu', menu); Vue.component('mk-menu', menu);
Vue.component('mk-note-header', noteHeader); Vue.component('mk-note-header', noteHeader);

View file

@ -0,0 +1,105 @@
<template>
<div class="csqvmxybqbycalfhkxvyfrgbrdalkaoc">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
<!-- トランジションを有効にするとなぜかメモリリークする -->
<!-- <transition-group v-else tag="div" name="chart"> -->
<div>
<div v-for="stat in stats" :key="stat.tag">
<div class="tag">
<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
</div>
<x-chart class="chart" :src="stat.chart"/>
</div>
</div>
<!-- </transition-group> -->
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import XChart from './trends.chart.vue';
export default Vue.extend({
components: {
XChart
},
data() {
return {
stats: [],
fetching: true,
clock: null
};
},
mounted() {
this.fetch();
this.clock = setInterval(this.fetch, 1000 * 60);
},
beforeDestroy() {
clearInterval(this.clock);
},
methods: {
fetch() {
(this as any).api('hashtags/trend').then(stats => {
this.stats = stats;
this.fetching = false;
});
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
> .fetching
> .empty
margin 0
padding 16px
text-align center
color #aaa
> [data-fa]
margin-right 4px
> div
.chart-move
transition transform 1s ease
> div
display flex
align-items center
padding 14px 16px
&:not(:last-child)
border-bottom solid 1px isDark ? #393f4f : #eee
> .tag
flex 1
overflow hidden
font-size 14px
color isDark ? #9baec8 : #65727b
> a
display block
width 100%
white-space nowrap
overflow hidden
text-overflow ellipsis
color inherit
> p
margin 0
font-size 75%
opacity 0.7
> .chart
height 30px
.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
root(true)
.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
root(false)
</style>

View file

@ -4,20 +4,7 @@
<template slot="header">%fa:hashtag%%i18n:@title%</template> <template slot="header">%fa:hashtag%%i18n:@title%</template>
<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'"> <div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> <mk-trends/>
<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
<!-- トランジションを有効にするとなぜかメモリリークする -->
<!-- <transition-group v-else tag="div" name="chart"> -->
<div>
<div v-for="stat in stats" :key="stat.tag">
<div class="tag">
<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
</div>
<x-chart class="chart" :src="stat.chart"/>
</div>
</div>
<!-- </transition-group> -->
</div> </div>
</mk-widget-container> </mk-widget-container>
</div> </div>
@ -25,7 +12,6 @@
<script lang="ts"> <script lang="ts">
import define from '../../../common/define-widget'; import define from '../../../common/define-widget';
import XChart from './hashtags.chart.vue';
export default define({ export default define({
name: 'hashtags', name: 'hashtags',
@ -33,89 +19,11 @@ export default define({
compact: false compact: false
}) })
}).extend({ }).extend({
components: {
XChart
},
data() {
return {
stats: [],
fetching: true,
clock: null
};
},
mounted() {
this.fetch();
this.clock = setInterval(this.fetch, 1000 * 60);
},
beforeDestroy() {
clearInterval(this.clock);
},
methods: { methods: {
func() { func() {
this.props.compact = !this.props.compact; this.props.compact = !this.props.compact;
this.save(); this.save();
},
fetch() {
(this as any).api('hashtags/trend').then(stats => {
this.stats = stats;
this.fetching = false;
});
} }
} }
}); });
</script> </script>
<style lang="stylus" scoped>
root(isDark)
.mkw-hashtags--body
> .fetching
> .empty
margin 0
padding 16px
text-align center
color #aaa
> [data-fa]
margin-right 4px
> div
.chart-move
transition transform 1s ease
> div
display flex
align-items center
padding 14px 16px
&:not(:last-child)
border-bottom solid 1px isDark ? #393f4f : #eee
> .tag
flex 1
overflow hidden
font-size 14px
color isDark ? #9baec8 : #65727b
> a
display block
width 100%
white-space nowrap
overflow hidden
text-overflow ellipsis
color inherit
> p
margin 0
font-size 75%
opacity 0.7
> .chart
height 30px
.mkw-hashtags[data-darkmode]
root(true)
.mkw-hashtags:not([data-darkmode])
root(false)
</style>

View file

@ -8,7 +8,7 @@
<mk-forkit class="forkit"/> <mk-forkit class="forkit"/>
<div class="body"> <div class="body">
<div class="main"> <div class="main block">
<h1 v-if="name != 'Misskey'">{{ name }}</h1> <h1 v-if="name != 'Misskey'">{{ name }}</h1>
<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1> <h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
@ -27,24 +27,24 @@
<span class="divider">|</span> <span class="divider">|</span>
<span class="signin" @click="signin">%i18n:@signin%</span> <span class="signin" @click="signin">%i18n:@signin%</span>
</p> </p>
<div class="hashtags">
<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
</div>
</div> </div>
<div class="broadcasts"> <div class="broadcasts block">
<div v-for="broadcast in broadcasts"> <div v-for="broadcast in broadcasts">
<h1 v-html="broadcast.title"></h1> <h1 v-html="broadcast.title"></h1>
<div v-html="broadcast.text"></div> <div v-html="broadcast.text"></div>
</div> </div>
</div> </div>
<div class="nav"> <div class="nav block">
<mk-nav class="nav"/> <mk-nav class="nav"/>
</div> </div>
<mk-welcome-timeline class="tl" :max="20"/> <div class="side">
<mk-trends class="trends block"/>
<mk-welcome-timeline class="tl block" :max="20"/>
</div>
</div> </div>
<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable> <modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
@ -71,8 +71,7 @@ export default Vue.extend({
host, host,
name: 'Misskey', name: 'Misskey',
description: '', description: '',
broadcasts: [], broadcasts: []
tags: []
}; };
}, },
created() { created() {
@ -86,9 +85,6 @@ export default Vue.extend({
this.stats = stats; this.stats = stats;
}); });
(this as any).api('hashtags/trend').then(stats => {
this.tags = stats.map(x => x.tag);
});
}, },
methods: { methods: {
signup() { signup() {
@ -113,7 +109,7 @@ export default Vue.extend({
left 15px left 15px
.v--modal-overlay .v--modal-overlay
background rgba(0, 0, 0, 0.4) background rgba(0, 0, 0, 0.6)
.modal-light .modal-light
.v--modal-box .v--modal-box
@ -162,8 +158,8 @@ root(isDark)
> button > button
position fixed position fixed
z-index 1 z-index 1
bottom 64px bottom 16px
left 64px left 16px
padding 16px padding 16px
font-size 18px font-size 18px
color isDark ? #fff : #444 color isDark ? #fff : #444
@ -179,7 +175,7 @@ root(isDark)
margin 0 auto margin 0 auto
padding 64px padding 64px
> * .block
color isDark ? #fff : #444 color isDark ? #fff : #444
background isDark ? #313543 : #fff background isDark ? #313543 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2) box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
@ -190,6 +186,7 @@ root(isDark)
grid-row 1 grid-row 1
grid-column 1 grid-column 1
padding 32px padding 32px
border-top solid 5px $theme-color
> h1 > h1
margin 0 margin 0
@ -257,12 +254,25 @@ root(isDark)
grid-column 1 grid-column 1
font-size 14px font-size 14px
> .tl > .side
display grid
grid-row 1 / 4 grid-row 1 / 4
grid-column 2 grid-column 2
text-align left grid-template-rows 1fr 350px
max-height 100% grid-template-columns 1fr
overflow auto gap 16px
> .tl
grid-row 1
grid-column 1
text-align left
max-height 100%
overflow auto
> .trends
grid-row 2
grid-column 1
padding 8px
.mk-welcome[data-darkmode] .mk-welcome[data-darkmode]
root(true) root(true)