From 2ec25a7729e8d2fa6734bdf25ffb5a1b35ca2d5b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 11 Jun 2018 09:11:32 +0900
Subject: wip

---
 src/client/app/common/views/widgets/hashtags.vue   | 97 ++++++++++++++++++++++
 src/client/app/common/views/widgets/index.ts       |  2 +
 src/client/app/desktop/views/components/home.vue   |  1 +
 .../views/pages/deck/deck.widgets-column.vue       |  1 +
 src/client/app/mobile/views/pages/widgets.vue      |  1 +
 5 files changed, 102 insertions(+)
 create mode 100644 src/client/app/common/views/widgets/hashtags.vue

(limited to 'src/client')

diff --git a/src/client/app/common/views/widgets/hashtags.vue b/src/client/app/common/views/widgets/hashtags.vue
new file mode 100644
index 0000000000..0ac62af705
--- /dev/null
+++ b/src/client/app/common/views/widgets/hashtags.vue
@@ -0,0 +1,97 @@
+<template>
+<div class="mkw-hashtags">
+	<mk-widget-container :show-header="!props.compact">
+		<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>
+			<div v-else>
+				<router-link v-for="stat in stats" :key="stat.tag" :to="`/tags/${ stat.tag }`">{{ stat.tag }}</router-link>
+			</div>
+		</div>
+	</mk-widget-container>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+export default define({
+	name: 'hashtags',
+	props: () => ({
+		compact: false
+	})
+}).extend({
+	data() {
+		return {
+			stats: [],
+			fetching: true,
+			clock: null
+		};
+	},
+	mounted() {
+		this.fetch();
+		this.clock = setInterval(this.fetch, 1000 * 60 * 10);
+	},
+	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-rss--body
+		.feed
+			padding 12px 16px
+			font-size 0.9em
+
+			> a
+				display block
+				padding 4px 0
+				color isDark ? #9aa4b3 : #666
+				border-bottom dashed 1px isDark ? #1c2023 : #eee
+
+				&:last-child
+					border-bottom none
+
+		.fetching
+			margin 0
+			padding 16px
+			text-align center
+			color #aaa
+
+			> [data-fa]
+				margin-right 4px
+
+		&[data-mobile]
+			background isDark ? #21242f : #f3f3f3
+
+			.feed
+				padding 0
+
+				> a
+					padding 8px 16px
+					border-bottom none
+
+					&:nth-child(even)
+						background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7)
+
+.mkw-rss[data-darkmode]
+	root(true)
+
+.mkw-rss:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/common/views/widgets/index.ts b/src/client/app/common/views/widgets/index.ts
index 0190393ba7..7d548ef353 100644
--- a/src/client/app/common/views/widgets/index.ts
+++ b/src/client/app/common/views/widgets/index.ts
@@ -13,6 +13,7 @@ import wSlideshow from './slideshow.vue';
 import wTips from './tips.vue';
 import wDonation from './donation.vue';
 import wNav from './nav.vue';
+import wHashtags from './hashtags.vue';
 
 Vue.component('mkw-analog-clock', wAnalogClock);
 Vue.component('mkw-nav', wNav);
@@ -27,3 +28,4 @@ Vue.component('mkw-posts-monitor', wPostsMonitor);
 Vue.component('mkw-memo', wMemo);
 Vue.component('mkw-rss', wRss);
 Vue.component('mkw-version', wVersion);
+Vue.component('mkw-hashtags', wHashtags);
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index cac1fd935b..8774aada63 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -23,6 +23,7 @@
 					<option value="post-form">%i18n:common.widgets.post-form%</option>
 					<option value="messaging">%i18n:common.widgets.messaging%</option>
 					<option value="memo">%i18n:common.widgets.memo%</option>
+					<option value="hashtags">%i18n:common.widgets.hashtags%</option>
 					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
 					<option value="server">%i18n:common.widgets.server%</option>
 					<option value="donation">%i18n:common.widgets.donation%</option>
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index 2a3a2472dc..a41bf8c3ca 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -23,6 +23,7 @@
 					<option value="post-form">%i18n:common.widgets.post-form%</option>
 					<option value="messaging">%i18n:common.widgets.messaging%</option>
 					<option value="memo">%i18n:common.widgets.memo%</option>
+					<option value="hashtags">%i18n:common.widgets.hashtags%</option>
 					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
 					<option value="server">%i18n:common.widgets.server%</option>
 					<option value="donation">%i18n:common.widgets.donation%</option>
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index ea8580b4d0..294c80e7a0 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -15,6 +15,7 @@
 					<option value="rss">%i18n:common.widgets.rss%</option>
 					<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
 					<option value="slideshow">%i18n:common.widgets.slideshow%</option>
+					<option value="hashtags">%i18n:common.widgets.hashtags%</option>
 					<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
 					<option value="version">%i18n:common.widgets.version%</option>
 					<option value="server">%i18n:common.widgets.server%</option>
-- 
cgit v1.2.3-freya