nanka iroiro

7 files changed, 14 insertions, 234 deletions

diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index c6cb667165..2f8a1943ad 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -23,7 +23,7 @@ export default Vue.extend({
 	},
 	mounted() {
 		// for Safari bug
-		this.$refs.grid.style.height = `${this.$refs.grid.clientHeight}px`;
+		this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px';
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue
deleted file mode 100644
index 00e54ff1a6..0000000000
--- a/src/client/app/desktop/views/components/note-detail.sub.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-<div class="sub" :title="title">
-	<mk-avatar class="avatar" :user="note.user"/>
-	<div class="main">
-		<header>
-			<div class="left">
-				<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
-				<span class="username"><mk-acct :user="note.user"/></span>
-			</div>
-			<div class="right">
-				<router-link class="time" :to="note | notePage">
-					<mk-time :time="note.createdAt"/>
-				</router-link>
-			</div>
-		</header>
-		<div class="body">
-			<div class="text">
-				<span v-if="note.isHidden" style="opacity: 0.5">%i18n:@private%</span>
-				<span v-if="note.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span>
-				<mk-note-html v-if="note.text" :text="note.text" :i="$store.state.i"/>
-			</div>
-			<div class="media" v-if="note.mediaIds.length > 0">
-				<mk-media-list :media-list="note.media"/>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-
-export default Vue.extend({
-	props: ['note'],
-	computed: {
-		title(): string {
-			return dateStringify(this.note.createdAt);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-root(isDark)
-	margin 0
-	padding 20px 32px
-	background isDark ? #21242d : #fdfdfd
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar
-		display block
-		float left
-		margin 0 16px 0 0
-		width 44px
-		height 44px
-		border-radius 4px
-
-	> .main
-		float left
-		width calc(100% - 60px)
-
-		> header
-			margin-bottom 4px
-			white-space nowrap
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .left
-				float left
-
-				> .name
-					display inline
-					margin 0
-					padding 0
-					color isDark ? #fff : #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 isDark ? #606984 : #ccc
-
-			> .right
-				float right
-
-				> .time
-					font-size 0.9em
-					color isDark ? #606984 : #c0c0c0
-
-		> .body
-			> .text
-				cursor default
-				display block
-				margin 0
-				padding 0
-				overflow-wrap break-word
-				font-size 1em
-				color isDark ? #959ba7 : #717171
-
-.sub[data-darkmode]
-	root(true)
-
-.sub:not([data-darkmode])
-	root(false)
-
-</style>
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index a8accaf531..2f28d223dd 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -89,7 +89,7 @@ import MkPostFormWindow from './post-form-window.vue';
 import MkRenoteFormWindow from './renote-form-window.vue';
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './note-detail.sub.vue';
+import XSub from './notes.note.sub.vue';
 
 export default Vue.extend({
 	components: {
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index 4938b7984e..827112ecd8 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -115,8 +115,6 @@ root(isDark)
 					margin-left 6px
 
 		> .body
-			max-height 128px
-			overflow hidden
 
 			> .text
 				cursor default
diff --git a/src/client/app/mobile/views/components/note-detail.sub.vue b/src/client/app/mobile/views/components/note-detail.sub.vue
deleted file mode 100644
index 3ad5af1719..0000000000
--- a/src/client/app/mobile/views/components/note-detail.sub.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-<div class="root sub">
-	<mk-avatar class="avatar" :user="note.user"/>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span class="username"><mk-acct :user="note.user"/></span>
-			<router-link class="time" :to="note | notePage">
-				<mk-time :time="note.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-note-content class="text" :note="note"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['note']
-});
-</script>
-
-<style lang="stylus" scoped>
-root(isDark)
-	padding 8px
-	font-size 0.9em
-	background isDark ? #21242d : #fdfdfd
-
-	@media (min-width 500px)
-		padding 12px
-
-	@media (min-width 600px)
-		padding 24px 32px
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	> .avatar
-		display block
-		float left
-		margin 0 12px 0 0
-		width 48px
-		height 48px
-		border-radius 8px
-
-	> .main
-		float left
-		width calc(100% - 60px)
-
-		> header
-			display flex
-			align-items baseline
-			margin-bottom 4px
-			white-space nowrap
-
-			> .name
-				display block
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color isDark ? #fff : #607073
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				text-align left
-				margin 0 .5em 0 0
-				color isDark ? #606984 : #d1d8da
-
-			> .time
-				margin-left auto
-				color isDark ? #606984 : #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color isDark ? #959ba7 : #717171
-
-.root.sub[data-darkmode]
-	root(true)
-
-.root.sub:not([data-darkmode])
-	root(false)
-
-</style>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 211ca27f1c..bdbb8876df 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -87,7 +87,7 @@ import parse from '../../../../../text/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './note-detail.sub.vue';
+import XSub from './note.sub.vue';
 
 export default Vue.extend({
 	components: {
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index a0084e6c29..f487b7647e 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -33,7 +33,17 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['note']
+	props: {
+		note: {
+			type: Object,
+			required: true
+		},
+		// TODO
+		truncate: {
+			type: Boolean,
+			default: true
+		}
+	}
 });
 </script>
 
@@ -144,11 +154,8 @@ root(isDark)
 					margin-left 6px
 
 		> .body
-			max-height 128px
-			overflow hidden
 
 			> .text
-				cursor default
 				margin 0
 				padding 0
 				color isDark ? #959ba7 : #717171