wip

6 files changed, 188 insertions, 184 deletions

diff --git a/src/web/app/desktop/-tags/user-followers.tag b/src/web/app/desktop/-tags/user-followers.tag
deleted file mode 100644
index 3a5430d37a..0000000000
--- a/src/web/app/desktop/-tags/user-followers.tag
+++ /dev/null
@@ -1,23 +0,0 @@
-<mk-user-followers>
-	<mk-users-list fetch={ fetch } count={ user.followers_count } you-know-count={ user.followers_you_know_count } no-users={ 'フォロワーはいないようです。' }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			height 100%
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = this.opts.user;
-
-		this.fetch = (iknow, limit, cursor, cb) => {
-			this.$root.$data.os.api('users/followers', {
-				user_id: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		};
-	</script>
-</mk-user-followers>
diff --git a/src/web/app/desktop/-tags/user-following.tag b/src/web/app/desktop/-tags/user-following.tag
deleted file mode 100644
index 42ad5f88a8..0000000000
--- a/src/web/app/desktop/-tags/user-following.tag
+++ /dev/null
@@ -1,23 +0,0 @@
-<mk-user-following>
-	<mk-users-list fetch={ fetch } count={ user.following_count } you-know-count={ user.following_you_know_count } no-users={ 'フォロー中のユーザーはいないようです。' }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			height 100%
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = this.opts.user;
-
-		this.fetch = (iknow, limit, cursor, cb) => {
-			this.$root.$data.os.api('users/following', {
-				user_id: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		};
-	</script>
-</mk-user-following>
diff --git a/src/web/app/desktop/-tags/users-list.tag b/src/web/app/desktop/-tags/users-list.tag
deleted file mode 100644
index 03c527109b..0000000000
--- a/src/web/app/desktop/-tags/users-list.tag
+++ /dev/null
@@ -1,138 +0,0 @@
-<mk-users-list>
-	<nav>
-		<div>
-			<span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">すべて<span>{ opts.count }</span></span>
-			<span v-if="$root.$data.os.isSignedIn && opts.youKnowCount" data-is-active={ mode == 'iknow' } @click="setMode.bind(this, 'iknow')">知り合い<span>{ opts.youKnowCount }</span></span>
-		</div>
-	</nav>
-	<div class="users" v-if="!fetching && users.length != 0">
-		<div each={ users }>
-			<mk-list-user user={ this }/>
-		</div>
-	</div>
-	<button class="more" v-if="!fetching && next != null" @click="more" disabled={ moreFetching }>
-		<span v-if="!moreFetching">もっと</span>
-		<span v-if="moreFetching">読み込み中<mk-ellipsis/></span>
-	</button>
-	<p class="no" v-if="!fetching && users.length == 0">{ opts.noUsers }</p>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			height 100%
-			background #fff
-
-			> nav
-				z-index 1
-				box-shadow 0 1px 0 rgba(#000, 0.1)
-
-				> div
-					display flex
-					justify-content center
-					margin 0 auto
-					max-width 600px
-
-					> span
-						display block
-						flex 1 1
-						text-align center
-						line-height 52px
-						font-size 14px
-						color #657786
-						border-bottom solid 2px transparent
-						cursor pointer
-
-						*
-							pointer-events none
-
-						&[data-is-active]
-							font-weight bold
-							color $theme-color
-							border-color $theme-color
-							cursor default
-
-						> span
-							display inline-block
-							margin-left 4px
-							padding 2px 5px
-							font-size 12px
-							line-height 1
-							color #888
-							background #eee
-							border-radius 20px
-
-			> .users
-				height calc(100% - 54px)
-				overflow auto
-
-				> *
-					border-bottom solid 1px rgba(0, 0, 0, 0.05)
-
-					> *
-						max-width 600px
-						margin 0 auto
-
-			> .no
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-			> .fetching
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-
-		this.limit = 30;
-		this.mode = 'all';
-
-		this.fetching = true;
-		this.moreFetching = false;
-
-		this.on('mount', () => {
-			this.fetch(() => this.$emit('loaded'));
-		});
-
-		this.fetch = cb => {
-			this.update({
-				fetching: true
-			});
-			this.opts.fetch(this.mode == 'iknow', this.limit, null, obj => {
-				this.update({
-					fetching: false,
-					users: obj.users,
-					next: obj.next
-				});
-				if (cb) cb();
-			});
-		};
-
-		this.more = () => {
-			this.update({
-				moreFetching: true
-			});
-			this.opts.fetch(this.mode == 'iknow', this.limit, this.cursor, obj => {
-				this.update({
-					moreFetching: false,
-					users: this.users.concat(obj.users),
-					next: obj.next
-				});
-			});
-		};
-
-		this.setMode = mode => {
-			this.update({
-				mode: mode
-			});
-			this.fetch();
-		};
-	</script>
-</mk-users-list>
diff --git a/src/web/app/desktop/views/components/user-followers.vue b/src/web/app/desktop/views/components/user-followers.vue
new file mode 100644
index 0000000000..67e694cf41
--- /dev/null
+++ b/src/web/app/desktop/views/components/user-followers.vue
@@ -0,0 +1,26 @@
+<template>
+<mk-users-list
+	:fetch="fetch"
+	:count="user.followers_count"
+	:you-know-count="user.followers_you_know_count"
+>
+	フォロワーはいないようです。
+</mk-users-list>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	methods: {
+		fetch(iknow, limit, cursor, cb) {
+			this.$root.$data.os.api('users/followers', {
+				user_id: this.user.id,
+				iknow: iknow,
+				limit: limit,
+				cursor: cursor ? cursor : undefined
+			}).then(cb);
+		}
+	}
+});
+</script>
diff --git a/src/web/app/desktop/views/components/user-following.vue b/src/web/app/desktop/views/components/user-following.vue
new file mode 100644
index 0000000000..16cc3c42f1
--- /dev/null
+++ b/src/web/app/desktop/views/components/user-following.vue
@@ -0,0 +1,26 @@
+<template>
+<mk-users-list
+	:fetch="fetch"
+	:count="user.following_count"
+	:you-know-count="user.following_you_know_count"
+>
+	フォロー中のユーザーはいないようです。
+</mk-users-list>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	methods: {
+		fetch(iknow, limit, cursor, cb) {
+			this.$root.$data.os.api('users/following', {
+				user_id: this.user.id,
+				iknow: iknow,
+				limit: limit,
+				cursor: cursor ? cursor : undefined
+			}).then(cb);
+		}
+	}
+});
+</script>
diff --git a/src/web/app/desktop/views/components/users-list.vue b/src/web/app/desktop/views/components/users-list.vue
new file mode 100644
index 0000000000..268fac4ec1
--- /dev/null
+++ b/src/web/app/desktop/views/components/users-list.vue
@@ -0,0 +1,136 @@
+<template>
+<div class="mk-users-list">
+	<nav>
+		<div>
+			<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
+			<span v-if="$root.$data.os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
+		</div>
+	</nav>
+	<div class="users" v-if="!fetching && users.length != 0">
+		<div v-for="u in users" :key="u.id">
+			<mk-list-user :user="u"/>
+		</div>
+	</div>
+	<button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching">
+		<span v-if="!moreFetching">もっと</span>
+		<span v-if="moreFetching">読み込み中<mk-ellipsis/></span>
+	</button>
+	<p class="no" v-if="!fetching && users.length == 0">
+		<slot></slot>
+	</p>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['fetch', 'count', 'youKnowCount'],
+	data() {
+		return {
+			limit: 30,
+			mode: 'all',
+			fetching: true,
+			moreFetching: false,
+			users: [],
+			next: null
+		};
+	},
+	mounted() {
+		this._fetch(() => {
+			this.$emit('loaded');
+		});
+	},
+	methods: {
+		_fetch(cb) {
+			this.fetching = true;
+			this.fetch(this.mode == 'iknow', this.limit, null, obj => {
+				this.fetching = false;
+				this.users = obj.users;
+				this.next = obj.next;
+				if (cb) cb();
+			});
+		},
+		more() {
+			this.moreFetching = true;
+			this.fetch(this.mode == 'iknow', this.limit, this.next, obj => {
+				this.moreFetching = false;
+				this.users = this.users.concat(obj.users);
+				this.next = obj.next;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-users-list
+	height 100%
+	background #fff
+
+	> nav
+		z-index 1
+		box-shadow 0 1px 0 rgba(#000, 0.1)
+
+		> div
+			display flex
+			justify-content center
+			margin 0 auto
+			max-width 600px
+
+			> span
+				display block
+				flex 1 1
+				text-align center
+				line-height 52px
+				font-size 14px
+				color #657786
+				border-bottom solid 2px transparent
+				cursor pointer
+
+				*
+					pointer-events none
+
+				&[data-is-active]
+					font-weight bold
+					color $theme-color
+					border-color $theme-color
+					cursor default
+
+				> span
+					display inline-block
+					margin-left 4px
+					padding 2px 5px
+					font-size 12px
+					line-height 1
+					color #888
+					background #eee
+					border-radius 20px
+
+	> .users
+		height calc(100% - 54px)
+		overflow auto
+
+		> *
+			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+
+			> *
+				max-width 600px
+				margin 0 auto
+
+	> .no
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .fetching
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+</style>