From 17d62b689df22af66486cb50e9de82d745b129ce Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Nov 2020 12:34:39 +0900
Subject: wip

---
 src/client/pages/user/clips.vue | 57 +++++++++++++++++++++++++++++++++++++++++
 src/client/pages/user/index.vue | 20 ++++++++++++---
 src/client/pages/user/pages.vue | 56 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 129 insertions(+), 4 deletions(-)
 create mode 100644 src/client/pages/user/clips.vue
 create mode 100644 src/client/pages/user/pages.vue

(limited to 'src/client')

diff --git a/src/client/pages/user/clips.vue b/src/client/pages/user/clips.vue
new file mode 100644
index 0000000000..2a66b6752d
--- /dev/null
+++ b/src/client/pages/user/clips.vue
@@ -0,0 +1,57 @@
+<template>
+<div>
+	<MkPagination :pagination="pagination" #default="{items}" ref="list">
+		<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _vMargin">
+			<b>{{ item.name }}</b>
+			<div v-if="item.description" class="description">{{ item.description }}</div>
+		</MkA>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import { userPage, acct } from '../../filters/user';
+
+export default defineComponent({
+	components: {
+		MkPagination,
+	},
+
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			pagination: {
+				endpoint: 'users/clips',
+				limit: 20,
+				params: {
+					userId: this.user.id,
+				}
+			},
+		};
+	},
+
+	watch: {
+		user() {
+			this.$refs.list.reload();
+		}
+	},
+
+	methods: {
+		userPage,
+		
+		acct
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 0c816a2d22..70f6662604 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -60,12 +60,15 @@
 			<div class="main">
 				<div class="nav _vMargin">
 					<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
+						<Fa :icon="faCommentAlt" class="icon"/>
 						<span>{{ $t('notes') }}</span>
 					</MkA>
 					<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
+						<Fa :icon="faPaperclip" class="icon"/>
 						<span>{{ $t('clips') }}</span>
 					</MkA>
 					<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
+						<Fa :icon="faFileAlt" class="icon"/>
 						<span>{{ $t('pages') }}</span>
 					</MkA>
 					<div class="actions">
@@ -83,6 +86,8 @@
 				</template>
 				<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_vMargin"/>
 				<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_vMargin"/>
+				<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
+				<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
 			</div>
 		</div>
 	</div>
@@ -193,8 +198,8 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import { faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker } from '@fortawesome/free-solid-svg-icons';
-import { faCalendarAlt, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
+import { faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faPaperclip, faFileAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarAlt, faBookmark as farBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
 import * as age from 's-age';
 import XUserTimeline from './index.timeline.vue';
 import XNote from '@/components/note.vue';
@@ -221,6 +226,8 @@ export default defineComponent({
 		MkFolder,
 		MkTab,
 		XFollowList: defineAsyncComponent(() => import('./follow-list.vue')),
+		XClips: defineAsyncComponent(() => import('./clips.vue')),
+		XPages: defineAsyncComponent(() => import('./pages.vue')),
 		XPhotos: defineAsyncComponent(() => import('./index.photos.vue')),
 		XActivity: defineAsyncComponent(() => import('./index.activity.vue')),
 	},
@@ -251,7 +258,7 @@ export default defineComponent({
 			error: null,
 			parallaxAnimationId: null,
 			narrow: null,
-			faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt
+			faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt, faCommentAlt, faPaperclip, faFileAlt,
 		};
 	},
 
@@ -471,7 +478,8 @@ export default defineComponent({
 				display: flex;
 				align-items: center;
 				margin-top: var(--margin);
-				font-size: 120%;
+				//font-size: 120%;
+				font-weight: bold;
 
 				> .link {
 					display: inline-block;
@@ -479,6 +487,10 @@ export default defineComponent({
 					text-align: center;
 					border-bottom: solid 3px transparent;
 
+					&:hover {
+						text-decoration: none;
+					}
+
 					&.active {
 						color: var(--accent);
 						border-bottom-color: var(--accent);
diff --git a/src/client/pages/user/pages.vue b/src/client/pages/user/pages.vue
new file mode 100644
index 0000000000..66658ac57d
--- /dev/null
+++ b/src/client/pages/user/pages.vue
@@ -0,0 +1,56 @@
+<template>
+<div>
+	<MkPagination :pagination="pagination" #default="{items}" ref="list">
+		<MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_vMargin"/>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkPagePreview from '@/components/page-preview.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import { userPage, acct } from '../../filters/user';
+
+export default defineComponent({
+	components: {
+		MkPagination,
+		MkPagePreview,
+	},
+
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			pagination: {
+				endpoint: 'users/pages',
+				limit: 20,
+				params: {
+					userId: this.user.id,
+				}
+			},
+		};
+	},
+
+	watch: {
+		user() {
+			this.$refs.list.reload();
+		}
+	},
+
+	methods: {
+		userPage,
+		
+		acct
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
-- 
cgit v1.2.3-freya