Improve welcome page

This commit is contained in:
syuilo 2018-09-07 20:21:25 +09:00
parent 1917b0339e
commit 8c6856d894
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
5 changed files with 136 additions and 5 deletions

View File

@ -994,6 +994,7 @@ desktop/views/pages/welcome.vue:
announcements: "お知らせ" announcements: "お知らせ"
photos: "最近の画像" photos: "最近の画像"
powered-by-misskey: "Powered by <b>Misskey</b>." powered-by-misskey: "Powered by <b>Misskey</b>."
info: "情報"
desktop/views/pages/drive.vue: desktop/views/pages/drive.vue:
title: "Misskey Drive" title: "Misskey Drive"

View File

@ -217,6 +217,7 @@
"vue-style-loader": "4.1.2", "vue-style-loader": "4.1.2",
"vue-template-compiler": "2.5.17", "vue-template-compiler": "2.5.17",
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",
"vuewordcloud": "18.7.11",
"vuex": "3.0.1", "vuex": "3.0.1",
"vuex-persistedstate": "2.5.4", "vuex-persistedstate": "2.5.4",
"web-push": "3.3.2", "web-push": "3.3.2",

View File

@ -1,5 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
import tagCloud from './tag-cloud.vue';
import trends from './trends.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';
@ -41,6 +42,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-tag-cloud', tagCloud);
Vue.component('mk-trends', trends); 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);

View File

@ -0,0 +1,90 @@
<template>
<div class="jtivnzhfwquxpsfidertopbmwmchmnmo">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<p class="empty" v-else-if="tags.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
<div v-else>
<vue-word-cloud
:words="tags.map(x => [x.name, x.count])"
:color="color"
font-family="Roboto">
<template slot-scope="{word, text, weight}">
<div style="cursor: pointer;" :title="weight">
{{ text }}
</div>
</template>
</vue-word-cloud>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import * as VueWordCloud from 'vuewordcloud';
export default Vue.extend({
components: {
[VueWordCloud.name]: VueWordCloud
},
data() {
return {
tags: [],
fetching: true,
clock: null
};
},
mounted() {
this.fetch();
this.clock = setInterval(this.fetch, 1000 * 60);
},
beforeDestroy() {
clearInterval(this.clock);
},
methods: {
fetch() {
(this as any).api('aggregation/hashtags').then(tags => {
this.tags = tags;
this.fetching = false;
});
},
color([, weight]) {
const peak = Math.max.apply(null, this.tags.map(x => x.count));
const w = weight / peak;
if (w == 1) {
return this.$store.state.device.darkmode ? '#ff4e69' : '#ff4e69';
} else if (w > 0.5) {
return this.$store.state.device.darkmode ? '#3bc4c7' : '#3bc4c7';
} else {
return this.$store.state.device.darkmode ? '#fff' : '#555';
}
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
height 100%
width 100%
> .fetching
> .empty
margin 0
padding 16px
text-align center
color #aaa
> [data-fa]
margin-right 4px
> div
height 100%
width 100%
.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
root(true)
.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
root(false)
</style>

View File

@ -50,6 +50,12 @@
</div> </div>
</div> </div>
<div class="tag-cloud block">
<div>
<mk-tag-cloud/>
</div>
</div>
<div class="nav block"> <div class="nav block">
<div> <div>
<mk-nav class="nav"/> <mk-nav class="nav"/>
@ -69,6 +75,16 @@
<mk-welcome-timeline class="tl" :max="20"/> <mk-welcome-timeline class="tl" :max="20"/>
</div> </div>
</div> </div>
<div class="info block">
<header>%fa:info-circle% %i18n:@info%</header>
<div>
<div v-if="meta" class="body">
<p>Version: <b>{{ meta.version }}</b></p>
<p>Maintainer: <b><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></b></p>
</div>
</div>
</div>
</div> </div>
</div> </div>
@ -92,6 +108,7 @@ import { concat } from '../../../../../prelude/array';
export default Vue.extend({ export default Vue.extend({
data() { data() {
return { return {
meta: null,
stats: null, stats: null,
copyright, copyright,
host, host,
@ -104,6 +121,7 @@ export default Vue.extend({
created() { created() {
(this as any).os.getMeta().then(meta => { (this as any).os.getMeta().then(meta => {
this.meta = meta;
this.name = meta.name; this.name = meta.name;
this.description = meta.description; this.description = meta.description;
this.announcements = meta.broadcasts; this.announcements = meta.broadcasts;
@ -210,13 +228,12 @@ root(isDark)
> .body > .body
display grid display grid
grid-template-rows 1fr 1fr 64px grid-template-rows 1fr 1fr 256px 64px
grid-template-columns 1fr 1fr 350px grid-template-columns 1fr 1fr 350px
gap 16px gap 16px
width 100% width 100%
max-width 1200px max-width 1200px
height 100vh height 1200px
min-height 950px
margin 0 auto margin 0 auto
padding 64px padding 64px
@ -328,17 +345,25 @@ root(isDark)
background-position center center background-position center center
background-size cover background-size cover
> .tag-cloud
grid-row 3
grid-column 1 / 3
> div
height 256px
padding 32px
> .nav > .nav
display flex display flex
justify-content center justify-content center
align-items center align-items center
grid-row 3 grid-row 4
grid-column 1 / 3 grid-column 1 / 3
font-size 14px font-size 14px
> .side > .side
display grid display grid
grid-row 1 / 4 grid-row 1 / 5
grid-column 3 grid-column 3
grid-template-rows 1fr 350px grid-template-rows 1fr 350px
grid-template-columns 1fr grid-template-columns 1fr
@ -354,6 +379,18 @@ root(isDark)
grid-column 1 grid-column 1
padding 8px padding 8px
> .info
grid-row 3
grid-column 1
> div
padding 16px
> .body
> p
display block
margin 0
.mk-welcome[data-darkmode] .mk-welcome[data-darkmode]
root(true) root(true)