Exploreページを実装

src/client/app/common/views/components/index.ts

@@ -33,6 +33,7 @@ import urlPreview from './url-preview.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import emoji from './emoji.vue';
 import welcomeTimeline from './welcome-timeline.vue';
+import userList from './user-list.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
 import uiHorizonGroup from './ui/horizon-group.vue';
@@ -79,6 +80,7 @@ Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-emoji', emoji);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
+Vue.component('mk-user-list', userList);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
 Vue.component('ui-horizon-group', uiHorizonGroup);

src/client/app/common/views/components/user-list.vue

@@ -0,0 +1,73 @@
+<template>
+<ui-container :body-togglable="true">
+	<template slot="header"><slot></slot></template>
+	<div class="efvhhmdq">
+		<div class="user" v-for="friend in users">
+			<mk-avatar class="avatar" :user="friend"/>
+			<div class="body">
+				<router-link class="name" :to="friend | userPage" v-user-preview="friend.id"><mk-user-name :user="friend"/></router-link>
+				<p class="username">@{{ friend | acct }}</p>
+			</div>
+		</div>
+	</div>
+</ui-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		users: {
+			type: Array,
+			required: true
+		},
+		iconOnly: {
+			type: Boolean,
+			default: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.efvhhmdq
+	> .user
+		padding 16px
+		border-bottom solid 1px var(--faceDivider)
+
+		&:last-child
+			border-bottom none
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar
+			display block
+			float left
+			margin 0 12px 0 0
+			width 42px
+			height 42px
+			border-radius 8px
+
+		> .body
+			float left
+			width calc(100% - 54px)
+
+			> .name
+				margin 0
+				font-size 16px
+				line-height 24px
+				color var(--text)
+
+			> .username
+				display block
+				margin 0
+				font-size 15px
+				line-height 16px
+				color var(--text)
+				opacity 0.7
+
+</style>