From e98626dbbcf026865a24fb46275c6880a721b42f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 22 Feb 2018 23:05:05 +0900
Subject: wip

---
 .../desktop/views/components/followers-window.vue  |   2 +-
 src/web/app/desktop/views/components/followers.vue |  26 ++++++
 .../desktop/views/components/following-window.vue  |   2 +-
 src/web/app/desktop/views/components/following.vue |  26 ++++++
 src/web/app/desktop/views/components/index.ts      |   6 ++
 src/web/app/desktop/views/components/list-user.vue | 101 ---------------------
 .../desktop/views/components/user-followers.vue    |  26 ------
 .../desktop/views/components/user-following.vue    |  26 ------
 .../desktop/views/components/users-list.item.vue   | 100 ++++++++++++++++++++
 .../app/desktop/views/components/users-list.vue    |   7 +-
 .../app/desktop/views/pages/user/user.profile.vue  |   4 +-
 11 files changed, 169 insertions(+), 157 deletions(-)
 create mode 100644 src/web/app/desktop/views/components/followers.vue
 create mode 100644 src/web/app/desktop/views/components/following.vue
 delete mode 100644 src/web/app/desktop/views/components/list-user.vue
 delete mode 100644 src/web/app/desktop/views/components/user-followers.vue
 delete mode 100644 src/web/app/desktop/views/components/user-following.vue
 create mode 100644 src/web/app/desktop/views/components/users-list.item.vue

(limited to 'src/web')

diff --git a/src/web/app/desktop/views/components/followers-window.vue b/src/web/app/desktop/views/components/followers-window.vue
index ed439114c3..d41d356f9b 100644
--- a/src/web/app/desktop/views/components/followers-window.vue
+++ b/src/web/app/desktop/views/components/followers-window.vue
@@ -3,7 +3,7 @@
 	<span slot="header" :class="$style.header">
 		<img :src="`${user.avatar_url}?thumbnail&size=64`" alt=""/>{{ user.name }}のフォロワー
 	</span>
-	<mk-followers-list :user="user"/>
+	<mk-followers :user="user"/>
 </mk-window>
 </template>
 
diff --git a/src/web/app/desktop/views/components/followers.vue b/src/web/app/desktop/views/components/followers.vue
new file mode 100644
index 0000000000..4541a00072
--- /dev/null
+++ b/src/web/app/desktop/views/components/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 as any).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/following-window.vue b/src/web/app/desktop/views/components/following-window.vue
index 4e1fb0306f..c516b3b17b 100644
--- a/src/web/app/desktop/views/components/following-window.vue
+++ b/src/web/app/desktop/views/components/following-window.vue
@@ -3,7 +3,7 @@
 	<span slot="header" :class="$style.header">
 		<img :src="`${user.avatar_url}?thumbnail&size=64`" alt=""/>{{ user.name }}のフォロー
 	</span>
-	<mk-following-list :user="user"/>
+	<mk-following :user="user"/>
 </mk-window>
 </template>
 
diff --git a/src/web/app/desktop/views/components/following.vue b/src/web/app/desktop/views/components/following.vue
new file mode 100644
index 0000000000..e0b9f11695
--- /dev/null
+++ b/src/web/app/desktop/views/components/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 as any).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/index.ts b/src/web/app/desktop/views/components/index.ts
index 0e46291720..fc30bb729e 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -27,6 +27,9 @@ 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 wNav from './widgets/nav.vue';
 import wCalendar from './widgets/calendar.vue';
 import wPhotoStream from './widgets/photo-stream.vue';
@@ -76,6 +79,9 @@ 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('mkw-nav', wNav);
 Vue.component('mkw-calendar', wCalendar);
 Vue.component('mkw-photo-stream', wPhotoStream);
diff --git a/src/web/app/desktop/views/components/list-user.vue b/src/web/app/desktop/views/components/list-user.vue
deleted file mode 100644
index adaa8f092c..0000000000
--- a/src/web/app/desktop/views/components/list-user.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-<div class="mk-list-user">
-	<a class="avatar-anchor" :href="`/${user.username}`">
-		<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
-	</a>
-	<div class="main">
-		<header>
-			<a class="name" :href="`/${user.username}`">{{ user.name }}</a>
-			<span class="username">@{{ user.username }}</span>
-		</header>
-		<div class="body">
-			<p class="followed" v-if="user.is_followed">フォローされています</p>
-			<div class="description">{{ user.description }}</div>
-		</div>
-	</div>
-	<mk-follow-button :user="user"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user']
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-list-user
-	margin 0
-	padding 16px
-	font-size 16px
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 58px
-			height 58px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 74px)
-
-		> header
-			margin-bottom 2px
-
-			> .name
-				display inline
-				margin 0
-				padding 0
-				color #777
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				text-align left
-				margin 0 0 0 8px
-				color #ccc
-
-		> .body
-			> .followed
-				display inline-block
-				margin 0 0 4px 0
-				padding 2px 8px
-				vertical-align top
-				font-size 10px
-				color #71afc7
-				background #eefaff
-				border-radius 4px
-
-			> .description
-				cursor default
-				display block
-				margin 0
-				padding 0
-				overflow-wrap break-word
-				font-size 1.1em
-				color #717171
-
-	> .mk-follow-button
-		position absolute
-		top 16px
-		right 16px
-
-</style>
diff --git a/src/web/app/desktop/views/components/user-followers.vue b/src/web/app/desktop/views/components/user-followers.vue
deleted file mode 100644
index 4541a00072..0000000000
--- a/src/web/app/desktop/views/components/user-followers.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<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 as any).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
deleted file mode 100644
index e0b9f11695..0000000000
--- a/src/web/app/desktop/views/components/user-following.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<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 as any).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.item.vue b/src/web/app/desktop/views/components/users-list.item.vue
new file mode 100644
index 0000000000..374f55b410
--- /dev/null
+++ b/src/web/app/desktop/views/components/users-list.item.vue
@@ -0,0 +1,100 @@
+<template>
+<div class="root item">
+	<router-link class="avatar-anchor" :to="`/${user.username}`" v-user-preview="user.id">
+		<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="`/${user.username}`" v-user-preview="user.id">{{ user.name }}</router-link>
+			<span class="username">@{{ user.username }}</span>
+		</header>
+		<div class="body">
+			<p class="followed" v-if="user.is_followed">フォローされています</p>
+			<div class="description">{{ user.description }}</div>
+		</div>
+	</div>
+	<mk-follow-button :user="user"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user']
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.item
+	padding 16px
+	font-size 16px
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 16px 0 0
+
+		> .avatar
+			display block
+			width 58px
+			height 58px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 74px)
+
+		> header
+			margin-bottom 2px
+
+			> .name
+				display inline
+				margin 0
+				padding 0
+				color #777
+				font-size 1em
+				font-weight 700
+				text-align left
+				text-decoration none
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				text-align left
+				margin 0 0 0 8px
+				color #ccc
+
+		> .body
+			> .followed
+				display inline-block
+				margin 0 0 4px 0
+				padding 2px 8px
+				vertical-align top
+				font-size 10px
+				color #71afc7
+				background #eefaff
+				border-radius 4px
+
+			> .description
+				cursor default
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 1.1em
+				color #717171
+
+	> .mk-follow-button
+		position absolute
+		top 16px
+		right 16px
+
+</style>
diff --git a/src/web/app/desktop/views/components/users-list.vue b/src/web/app/desktop/views/components/users-list.vue
index b93a81630c..fd15f478d2 100644
--- a/src/web/app/desktop/views/components/users-list.vue
+++ b/src/web/app/desktop/views/components/users-list.vue
@@ -8,7 +8,7 @@
 	</nav>
 	<div class="users" v-if="!fetching && users.length != 0">
 		<div v-for="u in users" :key="u.id">
-			<mk-list-user :user="u"/>
+			<x-item :user="u"/>
 		</div>
 	</div>
 	<button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching">
@@ -24,7 +24,12 @@
 
 <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 {
diff --git a/src/web/app/desktop/views/pages/user/user.profile.vue b/src/web/app/desktop/views/pages/user/user.profile.vue
index db2e32e808..b55787c95c 100644
--- a/src/web/app/desktop/views/pages/user/user.profile.vue
+++ b/src/web/app/desktop/views/pages/user/user.profile.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import age from 's-age';
+import * as age from 's-age';
 import MkFollowingWindow from '../../components/following-window.vue';
 import MkFollowersWindow from '../../components/followers-window.vue';
 
@@ -37,6 +37,7 @@ export default Vue.extend({
 	methods: {
 		showFollowing() {
 			document.body.appendChild(new MkFollowingWindow({
+				parent: this,
 				propsData: {
 					user: this.user
 				}
@@ -45,6 +46,7 @@ export default Vue.extend({
 
 		showFollowers() {
 			document.body.appendChild(new MkFollowersWindow({
+				parent: this,
 				propsData: {
 					user: this.user
 				}
-- 
cgit v1.2.3-freya