🍕
This commit is contained in:
syuilo
parent
ba38f64353
commit
3698c679e2
6 changed files with 143 additions and 116 deletions
|
|
@ -375,6 +375,10 @@ common/views/components/visibility-chooser.vue:
|
|||
specified-desc: "指定したユーザーにのみ公開"
|
||||
private: "非公開"
|
||||
|
||||
common/views/components/trends.vue:
|
||||
count: "{}人が投稿"
|
||||
empty: "トレンドなし"
|
||||
|
||||
common/views/widgets/broadcast.vue:
|
||||
fetching: "確認中"
|
||||
no-broadcasts: "お知らせはありません"
|
||||
|
|
@ -403,8 +407,6 @@ common/views/widgets/posts-monitor.vue:
|
|||
|
||||
common/views/widgets/hashtags.vue:
|
||||
title: "ハッシュタグ"
|
||||
count: "{}人が投稿"
|
||||
empty: "トレンドなし"
|
||||
|
||||
common/views/widgets/server.vue:
|
||||
title: "サーバー情報"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
import trends from './trends.vue';
|
||||
import analogClock from './analog-clock.vue';
|
||||
import menu from './menu.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 formRadio from './ui/form/radio.vue';
|
||||
|
||||
Vue.component('mk-trends', trends);
|
||||
Vue.component('mk-analog-clock', analogClock);
|
||||
Vue.component('mk-menu', menu);
|
||||
Vue.component('mk-note-header', noteHeader);
|
||||
|
|
|
|||
105
src/client/app/common/views/components/trends.vue
Normal file
105
src/client/app/common/views/components/trends.vue
Normal 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>
|
||||
|
|
@ -4,20 +4,7 @@
|
|||
<template slot="header">%fa:hashtag%%i18n:@title%</template>
|
||||
|
||||
<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>
|
||||
<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> -->
|
||||
<mk-trends/>
|
||||
</div>
|
||||
</mk-widget-container>
|
||||
</div>
|
||||
|
|
@ -25,7 +12,6 @@
|
|||
|
||||
<script lang="ts">
|
||||
import define from '../../../common/define-widget';
|
||||
import XChart from './hashtags.chart.vue';
|
||||
|
||||
export default define({
|
||||
name: 'hashtags',
|
||||
|
|
@ -33,89 +19,11 @@ export default define({
|
|||
compact: false
|
||||
})
|
||||
}).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: {
|
||||
func() {
|
||||
this.props.compact = !this.props.compact;
|
||||
this.save();
|
||||
},
|
||||
fetch() {
|
||||
(this as any).api('hashtags/trend').then(stats => {
|
||||
this.stats = stats;
|
||||
this.fetching = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<mk-forkit class="forkit"/>
|
||||
|
||||
<div class="body">
|
||||
<div class="main">
|
||||
<div class="main block">
|
||||
<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>
|
||||
|
||||
|
|
@ -27,24 +27,24 @@
|
|||
<span class="divider">|</span>
|
||||
<span class="signin" @click="signin">%i18n:@signin%</span>
|
||||
</p>
|
||||
|
||||
<div class="hashtags">
|
||||
<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="broadcasts">
|
||||
<div class="broadcasts block">
|
||||
<div v-for="broadcast in broadcasts">
|
||||
<h1 v-html="broadcast.title"></h1>
|
||||
<div v-html="broadcast.text"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<div class="nav block">
|
||||
<mk-nav class="nav"/>
|
||||
</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>
|
||||
|
||||
<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,
|
||||
name: 'Misskey',
|
||||
description: '',
|
||||
broadcasts: [],
|
||||
tags: []
|
||||
broadcasts: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -86,9 +85,6 @@ export default Vue.extend({
|
|||
this.stats = stats;
|
||||
});
|
||||
|
||||
(this as any).api('hashtags/trend').then(stats => {
|
||||
this.tags = stats.map(x => x.tag);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
signup() {
|
||||
|
|
@ -113,7 +109,7 @@ export default Vue.extend({
|
|||
left 15px
|
||||
|
||||
.v--modal-overlay
|
||||
background rgba(0, 0, 0, 0.4)
|
||||
background rgba(0, 0, 0, 0.6)
|
||||
|
||||
.modal-light
|
||||
.v--modal-box
|
||||
|
|
@ -162,8 +158,8 @@ root(isDark)
|
|||
> button
|
||||
position fixed
|
||||
z-index 1
|
||||
bottom 64px
|
||||
left 64px
|
||||
bottom 16px
|
||||
left 16px
|
||||
padding 16px
|
||||
font-size 18px
|
||||
color isDark ? #fff : #444
|
||||
|
|
@ -179,7 +175,7 @@ root(isDark)
|
|||
margin 0 auto
|
||||
padding 64px
|
||||
|
||||
> *
|
||||
.block
|
||||
color isDark ? #fff : #444
|
||||
background isDark ? #313543 : #fff
|
||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||
|
|
@ -190,6 +186,7 @@ root(isDark)
|
|||
grid-row 1
|
||||
grid-column 1
|
||||
padding 32px
|
||||
border-top solid 5px $theme-color
|
||||
|
||||
> h1
|
||||
margin 0
|
||||
|
|
@ -257,12 +254,25 @@ root(isDark)
|
|||
grid-column 1
|
||||
font-size 14px
|
||||
|
||||
> .tl
|
||||
> .side
|
||||
display grid
|
||||
grid-row 1 / 4
|
||||
grid-column 2
|
||||
text-align left
|
||||
max-height 100%
|
||||
overflow auto
|
||||
grid-template-rows 1fr 350px
|
||||
grid-template-columns 1fr
|
||||
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]
|
||||
root(true)
|
||||
|
|
|
|||
Loading…
Reference in a new issue