From f052d8912b324a02c55100d89409c7e29c670f8e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 8 Nov 2018 15:16:39 +0900
Subject: wip: フォロー/フォロワーページ (#3157)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

フォロー/フォロワーページ
---
 .../desktop/views/components/followers-window.vue  |  32 -----
 .../app/desktop/views/components/followers.vue     |  26 ----
 .../desktop/views/components/following-window.vue  |  32 -----
 .../app/desktop/views/components/following.vue     |  26 ----
 src/client/app/desktop/views/components/index.ts   |   8 +-
 .../app/desktop/views/components/user-card.vue     |  79 +++++++++++
 .../desktop/views/components/users-list.item.vue   |  91 -------------
 .../app/desktop/views/components/users-list.vue    | 145 ---------------------
 8 files changed, 81 insertions(+), 358 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/followers-window.vue
 delete mode 100644 src/client/app/desktop/views/components/followers.vue
 delete mode 100644 src/client/app/desktop/views/components/following-window.vue
 delete mode 100644 src/client/app/desktop/views/components/following.vue
 create mode 100644 src/client/app/desktop/views/components/user-card.vue
 delete mode 100644 src/client/app/desktop/views/components/users-list.item.vue
 delete mode 100644 src/client/app/desktop/views/components/users-list.vue

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/followers-window.vue b/src/client/app/desktop/views/components/followers-window.vue
deleted file mode 100644
index d5214adb2f..0000000000
--- a/src/client/app/desktop/views/components/followers-window.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-<mk-window width="400px" height="550px" @closed="destroyDom">
-	<span slot="header" :class="$style.header">
-		<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@followers%'.replace('{}', name) }}
-	</span>
-	<mk-followers :user="user"/>
-</mk-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['user'],
-	computed: {
-		name(): string {
-			return Vue.filter('userName')(this.user);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" module>
-.header
-	> img
-		display inline-block
-		vertical-align bottom
-		height calc(100% - 10px)
-		margin 5px
-		border-radius 4px
-
-</style>
diff --git a/src/client/app/desktop/views/components/followers.vue b/src/client/app/desktop/views/components/followers.vue
deleted file mode 100644
index 1ef9f69771..0000000000
--- a/src/client/app/desktop/views/components/followers.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-<mk-users-list
-	:fetch="fetch"
-	:count="user.followersCount"
-	:you-know-count="user.followersYouKnowCount"
->
-	%i18n:@empty%
-</mk-users-list>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	methods: {
-		fetch(iknow, limit, cursor, cb) {
-			(this as any).api('users/followers', {
-				userId: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/components/following-window.vue b/src/client/app/desktop/views/components/following-window.vue
deleted file mode 100644
index aa9f2bde7b..0000000000
--- a/src/client/app/desktop/views/components/following-window.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-<mk-window width="400px" height="550px" @closed="destroyDom">
-	<span slot="header" :class="$style.header">
-		<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@following%'.replace('{}', name) }}
-	</span>
-	<mk-following :user="user"/>
-</mk-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['user'],
-	computed: {
-		name(): string {
-			return Vue.filter('userName')(this.user);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" module>
-.header
-	> img
-		display inline-block
-		vertical-align bottom
-		height calc(100% - 10px)
-		margin 5px
-		border-radius 4px
-
-</style>
diff --git a/src/client/app/desktop/views/components/following.vue b/src/client/app/desktop/views/components/following.vue
deleted file mode 100644
index d55ce1c0d4..0000000000
--- a/src/client/app/desktop/views/components/following.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-<mk-users-list
-	:fetch="fetch"
-	:count="user.followingCount"
-	:you-know-count="user.followingYouKnowCount"
->
-	%i18n:@empty%
-</mk-users-list>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	methods: {
-		fetch(iknow, limit, cursor, cb) {
-			(this as any).api('users/following', {
-				userId: this.user.id,
-				iknow: iknow,
-				limit: limit,
-				cursor: cursor ? cursor : undefined
-			}).then(cb);
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index ff4e845f62..2478f75ac4 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -22,9 +22,7 @@ import settings from './settings.vue';
 import calendar from './calendar.vue';
 import activity from './activity.vue';
 import friendsMaker from './friends-maker.vue';
-import followers from './followers.vue';
-import following from './following.vue';
-import usersList from './users-list.vue';
+import userCard from './user-card.vue';
 import userListTimeline from './user-list-timeline.vue';
 import widgetContainer from './widget-container.vue';
 
@@ -50,8 +48,6 @@ Vue.component('mk-settings', settings);
 Vue.component('mk-calendar', calendar);
 Vue.component('mk-activity', activity);
 Vue.component('mk-friends-maker', friendsMaker);
-Vue.component('mk-followers', followers);
-Vue.component('mk-following', following);
-Vue.component('mk-users-list', usersList);
+Vue.component('mk-user-card', userCard);
 Vue.component('mk-user-list-timeline', userListTimeline);
 Vue.component('mk-widget-container', widgetContainer);
diff --git a/src/client/app/desktop/views/components/user-card.vue b/src/client/app/desktop/views/components/user-card.vue
new file mode 100644
index 0000000000..ccc0a49dc0
--- /dev/null
+++ b/src/client/app/desktop/views/components/user-card.vue
@@ -0,0 +1,79 @@
+<template>
+<div class="zvdbznxvfixtmujpsigoccczftvpiwqh">
+	<div class="banner" :style="bannerStyle"></div>
+	<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
+	<mk-follow-button :user="user" class="follow"/>
+	<div class="body">
+		<router-link :to="user | userPage" class="name">{{ user | userName }}</router-link>
+		<span class="username">@{{ user | acct }}</span>
+		<div class="description">
+			<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['user'],
+
+	computed: {
+		bannerStyle(): any {
+			if (this.user.bannerUrl == null) return {};
+			return {
+				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundImage: `url(${ this.user.bannerUrl })`
+			};
+		}
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.zvdbznxvfixtmujpsigoccczftvpiwqh
+	$bg = var(--face)
+
+	height 280px
+	overflow hidden
+	font-size 14px
+	text-align center
+	background $bg
+	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+	color var(--faceText)
+
+	> .banner
+		height 90px
+		background-color #f9f4f4
+		background-position center
+		background-size cover
+
+	> .avatar
+		display block
+		margin -40px auto 0 auto
+		width 80px
+		height 80px
+		border-radius 100%
+		border solid 4px $bg
+
+	> .follow
+		position absolute
+		top 16px
+		right 16px
+
+	> .body
+		padding 0px 24px
+
+		> .name
+			font-size 120%
+			font-weight bold
+
+		> .username
+			display block
+			opacity 0.7
+
+		> .description
+			margin 8px 0 16px 0
+
+</style>
diff --git a/src/client/app/desktop/views/components/users-list.item.vue b/src/client/app/desktop/views/components/users-list.item.vue
deleted file mode 100644
index 66a002c708..0000000000
--- a/src/client/app/desktop/views/components/users-list.item.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-<div class="zvdbznxvfixtmujpsigoccczftvpiwqh">
-	<div class="banner" :style="bannerStyle"></div>
-	<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
-	<mk-follow-button :user="user" class="follow"/>
-	<div class="body">
-		<router-link :to="user | userPage" class="name">{{ user | userName }}</router-link>
-		<span class="username">@{{ user | acct }}</span>
-		<div class="description">
-			<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
-		</div>
-		<p class="followed" v-if="user.isFollowed">%i18n:@followed%</p>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['user'],
-
-	computed: {
-		bannerStyle(): any {
-			if (this.user.bannerUrl == null) return {};
-			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
-				backgroundImage: `url(${ this.user.bannerUrl })`
-			};
-		}
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.zvdbznxvfixtmujpsigoccczftvpiwqh
-	$bg = #fff
-
-	margin 16px auto
-	max-width calc(100% - 32px)
-	font-size 16px
-	text-align center
-	background $bg
-	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
-
-	> .banner
-		height 100px
-		background-color #f9f4f4
-		background-position center
-		background-size cover
-
-	> .avatar
-		display block
-		margin -40px auto 0 auto
-		width 80px
-		height 80px
-		border-radius 100%
-		border solid 4px $bg
-
-	> .follow
-		position absolute
-		top 16px
-		right 16px
-
-	> .body
-		padding 4px 32px 32px 32px
-
-		@media (max-width 400px)
-			padding 4px 16px 16px 16px
-
-		> .name
-			font-size 20px
-			font-weight bold
-
-		> .username
-			display block
-			opacity 0.7
-
-		> .description
-			margin 16px 0
-
-		> .followed
-			margin 0
-			padding 0
-			line-height 24px
-			font-size 0.8em
-			color #71afc7
-			background #eefaff
-			border-radius 4px
-
-</style>
diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue
deleted file mode 100644
index 05fe6c292e..0000000000
--- a/src/client/app/desktop/views/components/users-list.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-<div class="mk-users-list">
-	<nav>
-		<div>
-			<span :data-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span>
-			<span v-if="$store.getters.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@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">
-			<x-item :user="u"/>
-		</div>
-	</div>
-	<button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching">
-		<span v-if="!moreFetching">%i18n:@load-more%</span>
-		<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
-	</button>
-	<p class="no" v-if="!fetching && users.length == 0">
-		<slot></slot>
-	</p>
-	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@fetching%<mk-ellipsis/></p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XItem from './users-list.item.vue';
-
-export default Vue.extend({
-	components: {
-		XItem
-	},
-	props: ['fetch', 'count', 'youKnowCount'],
-	data() {
-		return {
-			limit: 20,
-			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.users = obj.users;
-				this.next = obj.next;
-				this.fetching = false;
-				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%
-	overflow auto
-	background #eee
-
-	> nav
-		z-index 10
-		position sticky
-		top 0
-		background #fff
-		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-active]
-					font-weight bold
-					color var(--primary)
-					border-color var(--primary)
-					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
-
-	> button
-		display block
-		width calc(100% - 32px)
-		margin 16px
-		padding 16px
-
-		&:hover
-			background rgba(#000, 0.1)
-
-	> .no
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-	> .fetching
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-		> [data-icon]
-			margin-right 4px
-
-</style>
-- 
cgit v1.2.3-freya