コンポーネント整理

9 files changed, 43 insertions, 444 deletions

diff --git a/src/client/app/common/views/components/user-list.vue b/src/client/app/common/views/components/user-list.vue
index 48ca54666f..80f43908f4 100644
--- a/src/client/app/common/views/components/user-list.vue
+++ b/src/client/app/common/views/components/user-list.vue
@@ -4,13 +4,13 @@
 
 	<mk-error v-if="!fetching && !inited" @retry="init()"/>
 
-	<div class="efvhhmdq" v-size="[{ lt: 500, class: 'narrow' }]">
+	<div class="efvhhmdq" :class="{ iconOnly }" v-size="[{ lt: 500, class: 'narrow' }]">
 		<div class="no-users" v-if="inited && us.length == 0">
 			<p>{{ $t('no-users') }}</p>
 		</div>
 		<div class="user" v-for="user in us">
 			<mk-avatar class="avatar" :user="user"/>
-			<div class="body">
+			<div class="body" v-if="!iconOnly">
 				<div class="name">
 					<router-link class="name" :to="user | userPage" v-user-preview="user.id"><mk-user-name :user="user"/></router-link>
 					<p class="username">@{{ user | acct }}</p>
@@ -98,6 +98,18 @@ export default Vue.extend({
 		> .user > .body > .description
 			display none
 
+	&.iconOnly
+		padding 12px
+
+		> .user
+			display inline-block
+			padding 0
+			border-bottom none
+
+			> .avatar
+				display inline-block
+				margin 4px
+
 	> .no-users
 		text-align center
 		color var(--text)
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 3840328ec4..bee10b940a 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -15,7 +15,6 @@ import notePreview from './note-preview.vue';
 import noteDetail from './note-detail.vue';
 import calendar from './calendar.vue';
 import activity from './activity.vue';
-import userCard from './user-card.vue';
 import userListTimeline from './user-list-timeline.vue';
 import uiContainer from './ui-container.vue';
 
@@ -34,6 +33,5 @@ Vue.component('mk-note-preview', notePreview);
 Vue.component('mk-note-detail', noteDetail);
 Vue.component('mk-calendar', calendar);
 Vue.component('mk-activity', activity);
-Vue.component('mk-user-card', userCard);
 Vue.component('mk-user-list-timeline', userListTimeline);
 Vue.component('ui-container', uiContainer);
diff --git a/src/client/app/desktop/views/components/user-card.vue b/src/client/app/desktop/views/components/user-card.vue
deleted file mode 100644
index 61b3be9305..0000000000
--- a/src/client/app/desktop/views/components/user-card.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-<div class="zvdbznxvfixtmujpsigoccczftvpiwqh">
-	<div class="banner" :style="bannerStyle"></div>
-	<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
-	<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow" mini/>
-	<div class="body">
-		<router-link :to="user | userPage" class="name">
-			<mk-user-name :user="user"/>
-		</router-link>
-		<span class="username">@{{ user | acct }} <fa v-if="user.isLocked == true" class="locked" icon="lock" fixed-width/></span>
-
-		<div class="description">
-			<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-		</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 13px
-	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 0 0 16px
-		width 80px
-		height 80px
-		border-radius 100%
-		border solid 4px $bg
-
-	> .follow
-		position absolute
-		top 16px
-		right 16px
-
-	> .body
-		padding 0px 24px
-		margin-top -40px
-
-		> .name
-			font-size 120%
-			font-weight bold
-
-		> .username
-			display block
-			opacity 0.7
-
-			> .locked
-				opacity 0.8
-
-		> .description
-			margin 8px 0 16px 0
-
-</style>
diff --git a/src/client/app/mobile/views/components/index.ts b/src/client/app/mobile/views/components/index.ts
index 6f2640373e..4df347ef4c 100644
--- a/src/client/app/mobile/views/components/index.ts
+++ b/src/client/app/mobile/views/components/index.ts
@@ -7,12 +7,10 @@ import mediaVideo from './media-video.vue';
 import notePreview from './note-preview.vue';
 import subNoteContent from './sub-note-content.vue';
 import noteCard from './note-card.vue';
-import userCard from './user-card.vue';
 import noteDetail from './note-detail.vue';
 import notification from './notification.vue';
 import notifications from './notifications.vue';
 import notificationPreview from './notification-preview.vue';
-import userPreview from './user-preview.vue';
 import userTimeline from './user-timeline.vue';
 import userListTimeline from './user-list-timeline.vue';
 import uiContainer from './ui-container.vue';
@@ -25,12 +23,10 @@ Vue.component('mk-media-video', mediaVideo);
 Vue.component('mk-note-preview', notePreview);
 Vue.component('mk-sub-note-content', subNoteContent);
 Vue.component('mk-note-card', noteCard);
-Vue.component('mk-user-card', userCard);
 Vue.component('mk-note-detail', noteDetail);
 Vue.component('mk-notification', notification);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-notification-preview', notificationPreview);
-Vue.component('mk-user-preview', userPreview);
 Vue.component('mk-user-timeline', userTimeline);
 Vue.component('mk-user-list-timeline', userListTimeline);
 Vue.component('ui-container', uiContainer);
diff --git a/src/client/app/mobile/views/components/user-card.vue b/src/client/app/mobile/views/components/user-card.vue
deleted file mode 100644
index c38d475690..0000000000
--- a/src/client/app/mobile/views/components/user-card.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-<div class="mk-user-card">
-	<header :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
-		<mk-avatar class="avatar" :user="user"/>
-	</header>
-	<a class="name" :href="user | userPage" target="_blank">
-		<mk-user-name :user="user"/>
-	</a>
-	<p class="username"><mk-acct :user="user"/></p>
-	<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" class="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-user-card
-	display inline-block
-	width 200px
-	text-align center
-	border-radius 8px
-	background #fff
-
-	> header
-		display block
-		height 80px
-		background-color #ddd
-		background-size cover
-		background-position center
-		border-radius 8px 8px 0 0
-
-		> .avatar
-			position absolute
-			top 20px
-			left calc(50% - 40px)
-			width 80px
-			height 80px
-			border solid 2px #fff
-			border-radius 8px
-
-	> .name
-		display block
-		margin 24px 0 0 0
-		font-size 16px
-		color #555
-
-	> .username
-		margin 0
-		font-size 15px
-		color #ccc
-
-	> .follow-button
-		display inline-block
-		margin 8px 0 16px 0
-
-</style>
diff --git a/src/client/app/mobile/views/components/user-preview.vue b/src/client/app/mobile/views/components/user-preview.vue
deleted file mode 100644
index ea8bbe242f..0000000000
--- a/src/client/app/mobile/views/components/user-preview.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-<div class="mk-user-preview">
-	<mk-avatar class="avatar" :user="user"/>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="user | userPage">
-				<mk-user-name :user="user"/>
-			</router-link>
-			<span class="username"><mk-acct :user="user"/></span>
-		</header>
-		<div class="body">
-			<div class="description">
-				<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['user']
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-user-preview
-	margin 0
-	padding 16px
-	font-size 12px
-
-	@media (min-width 350px)
-		font-size 14px
-
-	@media (min-width 500px)
-		font-size 16px
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	> .avatar
-		display block
-		float left
-		margin 0 10px 0 0
-		width 48px
-		height 48px
-		border-radius 6px
-
-		@media (min-width 500px)
-			margin-right 16px
-			width 58px
-			height 58px
-			border-radius 8px
-
-	> .main
-		float left
-		width calc(100% - 58px)
-
-		@media (min-width 500px)
-			width calc(100% - 74px)
-
-		> header
-			@media (min-width 500px)
-				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
-
-			> .description
-				cursor default
-				display block
-				margin 0
-				padding 0
-				overflow-wrap break-word
-				font-size 1.1em
-				color #717171
-
-</style>
diff --git a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
deleted file mode 100644
index 0c3efc85f2..0000000000
--- a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-<div class="root followers-you-know">
-	<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
-	<div v-if="!fetching && users.length > 0">
-		<a v-for="user in users" :key="user.id" :href="user | userPage">
-			<img :src="user.avatarUrl" :alt="user | userName"/>
-		</a>
-	</div>
-	<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-
-export default Vue.extend({
-	i18n: i18n('mobile/views/pages/user/home.followers-you-know.vue'),
-	props: ['user'],
-	data() {
-		return {
-			fetching: true,
-			users: []
-		};
-	},
-	mounted() {
-		this.$root.api('users/followers', {
-			userId: this.user.id,
-			iknow: true,
-			limit: 30
-		}).then(res => {
-			this.fetching = false;
-			this.users = res.users;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.root.followers-you-know
-
-	> div
-		padding 4px
-
-		> a
-			display inline-block
-			margin 4px
-
-			> img
-				width 48px
-				height 48px
-				vertical-align bottom
-				border-radius 100%
-
-	> .initializing
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color var(--text)
-
-		> i
-			margin-right 4px
-
-</style>
diff --git a/src/client/app/mobile/views/pages/user/home.friends.vue b/src/client/app/mobile/views/pages/user/home.friends.vue
deleted file mode 100644
index 177abe7aa2..0000000000
--- a/src/client/app/mobile/views/pages/user/home.friends.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-<div class="root friends">
-	<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
-	<div v-if="!fetching && users.length > 0">
-		<mk-user-card v-for="user in users" :key="user.id" :user="user"/>
-	</div>
-	<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-export default Vue.extend({
-	i18n: i18n('mobile/views/pages/user/home.friends.vue'),
-	props: ['user'],
-	data() {
-		return {
-			fetching: true,
-			users: []
-		};
-	},
-	mounted() {
-		this.$root.api('users/get_frequently_replied_users', {
-			userId: this.user.id
-		}).then(res => {
-			this.users = res.map(x => x.user);
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.root.friends
-	> div
-		overflow-x scroll
-		-webkit-overflow-scrolling touch
-		white-space nowrap
-		padding 8px
-
-		> .mk-user-card
-			&:not(:last-child)
-				margin-right 8px
-
-	> .fetching
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color var(--text)
-
-		> i
-			margin-right 4px
-
-</style>
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index f9b7e7f90a..00c63c288d 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -1,36 +1,26 @@
 <template>
-<div class="root home">
-	<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
-	<section class="recent-notes">
-		<h2><fa :icon="['far', 'comments']"/>{{ $t('recent-notes') }}</h2>
+<div class="wojmldye">
+	<mk-note-detail class="note" v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
+	<ui-container :body-togglable="true">
+		<template #header><fa :icon="['far', 'comments']"/>{{ $t('recent-notes') }}</template>
 		<div>
 			<x-notes :user="user"/>
 		</div>
-	</section>
-	<section class="images">
-		<h2><fa icon="image"/>{{ $t('images') }}</h2>
+	</ui-container>
+	<ui-container :body-togglable="true">
+		<template #header><fa icon="image"/>{{ $t('images') }}</template>
 		<div>
 			<x-photos :user="user"/>
 		</div>
-	</section>
-	<section class="activity">
-		<h2><fa icon="chart-bar"/>{{ $t('activity') }}</h2>
-		<div>
+	</ui-container>
+	<ui-container :body-togglable="true">
+		<template #header><fa icon="chart-bar"/>{{ $t('activity') }}</template>
+		<div style="padding:8px;">
 			<x-activity :user="user"/>
 		</div>
-	</section>
-	<section class="frequently-replied-users">
-		<h2><fa icon="users"/>{{ $t('frequently-replied-users') }}</h2>
-		<div>
-			<x-friends :user="user"/>
-		</div>
-	</section>
-	<section class="followers-you-know" v-if="$store.getters.isSignedIn && $store.state.i.id !== user.id">
-		<h2><fa icon="users"/>{{ $t('followers-you-know') }}</h2>
-		<div>
-			<x-followers-you-know :user="user"/>
-		</div>
-	</section>
+	</ui-container>
+	<mk-user-list :make-promise="makeFrequentlyRepliedUsersPromise" :icon-only="true"><fa icon="users"/> {{ $t('frequently-replied-users') }}</mk-user-list>
+	<mk-user-list v-if="$store.getters.isSignedIn && $store.state.i.id !== user.id" :make-promise="makeFollowersYouKnowPromise" :icon-only="true"><fa icon="users"/> {{ $t('followers-you-know') }}</mk-user-list>
 </div>
 </template>
 
@@ -39,66 +29,36 @@ import Vue from 'vue';
 import i18n from '../../../../i18n';
 import XNotes from './home.notes.vue';
 import XPhotos from './home.photos.vue';
-import XFriends from './home.friends.vue';
-import XFollowersYouKnow from './home.followers-you-know.vue';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/user/home.vue'),
 	components: {
 		XNotes,
 		XPhotos,
-		XFriends,
-		XFollowersYouKnow,
 		XActivity: () => import('../../../../common/views/components/activity.vue').then(m => m.default)
 	},
-	props: ['user']
+	props: ['user'],
+	data() {
+		return {
+			makeFrequentlyRepliedUsersPromise: () => this.$root.api('users/get_frequently_replied_users', {
+				userId: this.user.id
+			}).then(res => res.map(x => x.user)),
+			makeFollowersYouKnowPromise: () => this.$root.api('users/followers', {
+				userId: this.user.id,
+				iknow: true,
+				limit: 30
+			}).then(res => res.users),
+		};
+	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.root.home
-	margin 0 auto
-
-	> .mk-note-detail
+.wojmldye
+	> .note
 		margin 0 0 8px 0
 
 		@media (min-width 500px)
 			margin 0 0 16px 0
 
-	> section
-		background var(--face)
-		border-radius 8px
-		box-shadow 0 4px 16px rgba(#000, 0.1)
-
-		&:not(:last-child)
-			margin-bottom 8px
-
-			@media (min-width 500px)
-				margin-bottom 16px
-
-		> h2
-			margin 0
-			padding 8px 10px
-			font-size 15px
-			font-weight normal
-			color var(--text)
-			background var(--faceHeader)
-			border-radius 8px 8px 0 0
-
-			@media (min-width 500px)
-				padding 10px 16px
-
-			> [data-icon]
-				margin-right 6px
-
-	> .activity
-		> div
-			padding 8px
-
-	> p
-		display block
-		margin 16px
-		text-align center
-		color var(--text)
-
 </style>