From 638d81b66ee48bab0264ab9bb71fd3feddad5a14 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Tue, 11 Dec 2018 20:18:12 +0900
Subject: Show user fields (#3590)

---
 .../desktop/views/pages/deck/deck.user-column.vue  | 33 ++++++++++++++++++++
 .../app/desktop/views/pages/user/user.header.vue   | 35 ++++++++++++++++++++++
 src/client/app/mobile/views/pages/user.vue         | 35 ++++++++++++++++++++++
 3 files changed, 103 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
index ddfb4310bc..6f0b38434f 100644
--- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
@@ -26,6 +26,14 @@
 			<div class="description">
 				<misskey-flavored-markdown v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
 			</div>
+			<div class="fields" v-if="user.fields">
+				<dl class="field" v-for="(field, i) in user.fields" :key="i">
+					<dt class="name">{{ field.name }}</dt>
+					<dd class="value">
+						<misskey-flavored-markdown :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+					</dd>
+				</dl>
+			</div>
 			<div class="counts">
 				<div>
 					<b>{{ user.notesCount | number }}</b>
@@ -416,6 +424,31 @@ export default Vue.extend({
 			border-right solid 16px transparent
 			border-bottom solid 16px var(--face)
 
+		> .fields
+			margin-top 8px
+
+			> .field
+				display flex
+				padding 0
+				margin 0
+
+				> .name
+					padding 4px
+					margin 4px
+					width 30%
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
+					font-weight bold
+
+				> .value
+					padding 4px
+					margin 4px
+					width 70%
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
+
 		> .counts
 			display grid
 			grid-template-columns 1fr 1fr 1fr
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index e451e770c3..f9b4f53aed 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -18,6 +18,14 @@
 		<div class="description">
 			<misskey-flavored-markdown v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
 		</div>
+		<div class="fields" v-if="user.fields">
+			<dl class="field" v-for="(field, i) in user.fields" :key="i">
+				<dt class="name">{{ field.name }}</dt>
+				<dd class="value">
+					<misskey-flavored-markdown :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+				</dd>
+			</dl>
+		</div>
 		<div class="info">
 			<span class="location" v-if="user.host === null && user.profile.location"><fa icon="map-marker"/> {{ user.profile.location }}</span>
 			<span class="birthday" v-if="user.host === null && user.profile.birthday"><fa icon="birthday-cake"/> {{ user.profile.birthday.replace('-', $t('year')).replace('-', $t('month')) + $t('day') }} ({{ $t('years-old', { age }) }})</span>
@@ -174,6 +182,33 @@ export default Vue.extend({
 		padding 16px 16px 16px 154px
 		color var(--text)
 
+		> .fields
+			margin-top 16px
+
+			> .field
+				display flex
+				padding 0
+				margin 0
+
+				> .name
+					border-right solid 1px var(--faceDivider)
+					padding 4px
+					margin 4px
+					width 30%
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
+					font-weight bold
+					text-align center
+
+				> .value
+					padding 4px
+					margin 4px
+					width 70%
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
+
 		> .info
 			margin-top 16px
 			padding-top 16px
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 804168a187..dc03f10f91 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -24,6 +24,14 @@
 				<div class="description">
 					<misskey-flavored-markdown v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
 				</div>
+				<div class="fields" v-if="user.fields">
+					<dl class="field" v-for="(field, i) in user.fields" :key="i">
+						<dt class="name">{{ field.name }}</dt>
+						<dd class="value">
+							<misskey-flavored-markdown :text="field.value" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+						</dd>
+					</dl>
+				</div>
 				<div class="info">
 					<p class="location" v-if="user.host === null && user.profile.location">
 						<fa icon="map-marker"/>{{ user.profile.location }}
@@ -301,6 +309,33 @@ main
 				margin 8px 0
 				color var(--mobileUserPageDescription)
 
+			> .fields
+				margin 8px 0
+
+				> .field
+					display flex
+					padding 0
+					margin 0
+
+					> .name
+						padding 4px
+						margin 4px
+						width 30%
+						overflow hidden
+						white-space nowrap
+						text-overflow ellipsis
+						font-weight bold
+						color var(--mobileUserPageStatusHighlight)
+
+					> .value
+						padding 4px
+						margin 4px
+						width 70%
+						overflow hidden
+						white-space nowrap
+						text-overflow ellipsis
+						color var(--mobileUserPageStatusHighlight)
+
 			> .info
 				margin 8px 0
 
-- 
cgit v1.2.3-freya