From 3698c679e23c184e897d86e9d75dfe2a110a282c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 4 Sep 2018 02:09:56 +0900
Subject: [PATCH] :pizza:
---
locales/ja-JP.yml | 6 +-
.../app/common/views/components/index.ts | 2 +
.../trends.chart.vue} | 0
.../app/common/views/components/trends.vue | 105 ++++++++++++++++++
.../app/common/views/widgets/hashtags.vue | 94 +---------------
.../app/desktop/views/pages/welcome.vue | 52 +++++----
6 files changed, 143 insertions(+), 116 deletions(-)
rename src/client/app/common/views/{widgets/hashtags.chart.vue => components/trends.chart.vue} (100%)
create mode 100644 src/client/app/common/views/components/trends.vue
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c5a3fc81ff..a57f724a32 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -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: "サーバー情報"
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 422a3da050..4700b6269e 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -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);
diff --git a/src/client/app/common/views/widgets/hashtags.chart.vue b/src/client/app/common/views/components/trends.chart.vue
similarity index 100%
rename from src/client/app/common/views/widgets/hashtags.chart.vue
rename to src/client/app/common/views/components/trends.chart.vue
diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue
new file mode 100644
index 0000000000..627edc3876
--- /dev/null
+++ b/src/client/app/common/views/components/trends.vue
@@ -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>
diff --git a/src/client/app/common/views/widgets/hashtags.vue b/src/client/app/common/views/widgets/hashtags.vue
index 56520400b6..0cb6b2df10 100644
--- a/src/client/app/common/views/widgets/hashtags.vue
+++ b/src/client/app/common/views/widgets/hashtags.vue
@@ -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>
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index e67ef16136..481441c3c7 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -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)