Trim notifications text (#3438)

* Trim notifications

* Remove needless colons

* Use single quote

* :art:

4 files changed, 36 insertions, 18 deletions

diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index b838a5a558..ab4c627ce6 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -20,7 +20,7 @@
 								<mk-reaction-icon :reaction="notification.reaction"/>
 								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
 							</p>
-							<router-link class="note-ref" :to="notification.note | notePage">
+							<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
 								<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
 							</router-link>
 						</div>
@@ -32,7 +32,7 @@
 							<p><fa icon="retweet"/>
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 							</p>
-							<router-link class="note-ref" :to="notification.note | notePage">
+							<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
 								<fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
 							</router-link>
 						</div>
@@ -44,7 +44,7 @@
 							<p><fa icon="quote-left"/>
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 							</p>
-							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
+							<router-link class="note-preview" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">{{ getNoteSummary(notification.note) }}</router-link>
 						</div>
 					</template>
 
@@ -72,7 +72,7 @@
 							<p><fa icon="reply"/>
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 							</p>
-							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
+							<router-link class="note-preview" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">{{ getNoteSummary(notification.note) }}</router-link>
 						</div>
 					</template>
 
@@ -82,7 +82,7 @@
 							<p><fa icon="at"/>
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 							</p>
-							<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
+							<a class="note-preview" :href="notification.note | notePage" :title="getNoteSummary(notification.note)">{{ getNoteSummary(notification.note) }}</a>
 						</div>
 					</template>
 
@@ -90,7 +90,7 @@
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
 							<p><fa icon="chart-pie"/><a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
-							<router-link class="note-ref" :to="notification.note | notePage">
+							<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
 								<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
 							</router-link>
 						</div>
@@ -219,7 +219,7 @@ export default Vue.extend({
 				margin 0
 				padding 16px
 				overflow-wrap break-word
-				font-size 13px
+				font-size 12px
 				border-bottom solid 1px var(--faceDivider)
 
 				&:last-child
@@ -262,9 +262,17 @@ export default Vue.extend({
 
 				.note-preview
 					color var(--noteText)
+					display inline-block
+					overflow hidden
+					max-height 48px
 
 				.note-ref
 					color var(--noteText)
+					display inline-block
+					width: 100%
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
 
 					[data-icon]
 						font-size 1em
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
index 9418007f2b..fce9853b6f 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -8,7 +8,7 @@
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
-			<router-link class="note-ref" :to="notification.note | notePage">
+			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
 				<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}
 				<fa icon="quote-right"/>
 			</router-link>
@@ -23,7 +23,7 @@
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
-			<router-link class="note-ref" :to="notification.note | notePage">
+			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
 				<fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
 			</router-link>
 		</div>
@@ -59,7 +59,7 @@
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
-			<router-link class="note-ref" :to="notification.note | notePage">
+			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
 				<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
 			</router-link>
 		</div>
@@ -112,7 +112,7 @@ export default Vue.extend({
 .dsfykdcjpuwfvpefwufddclpjhzktmpw
 	> .notification
 		padding 16px
-		font-size 13px
+		font-size 12px
 		overflow-wrap break-word
 
 		&:after
@@ -150,6 +150,11 @@ export default Vue.extend({
 
 			> .note-ref
 				color var(--noteText)
+				display inline-block
+				width: 100%
+				overflow hidden
+				white-space nowrap
+				text-overflow ellipsis
 
 				[data-icon]
 					font-size 1em
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index c99b291ff6..1228047c94 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -8,7 +8,7 @@
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
-			<router-link class="note-ref" :to="notification.note | notePage">
+			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
 				<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}
 				<fa icon="quote-right"/>
 			</router-link>
@@ -23,7 +23,7 @@
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
-			<router-link class="note-ref" :to="notification.note | notePage">
+			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
 				<fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
 			</router-link>
 		</div>
@@ -59,7 +59,7 @@
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
-			<router-link class="note-ref" :to="notification.note | notePage">
+			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
 				<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
 			</router-link>
 		</div>
@@ -162,6 +162,11 @@ export default Vue.extend({
 
 			> .note-ref
 				color var(--noteText)
+				display inline-block
+				width: 100%
+				overflow hidden
+				white-space nowrap
+				text-overflow ellipsis
 
 				[data-icon]
 					font-size 1em
diff --git a/src/misc/get-note-summary.ts b/src/misc/get-note-summary.ts
index 3f96483032..aa7687c522 100644
--- a/src/misc/get-note-summary.ts
+++ b/src/misc/get-note-summary.ts
@@ -29,18 +29,18 @@ const summarize = (note: any): string => {
 	// 返信のとき
 	if (note.replyId) {
 		if (note.reply) {
-			summary += ` RE: ${summarize(note.reply)}`;
+			summary += `\n\nRE: ${summarize(note.reply)}`;
 		} else {
-			summary += ' RE: ...';
+			summary += '\n\nRE: ...';
 		}
 	}
 
 	// Renoteのとき
 	if (note.renoteId) {
 		if (note.renote) {
-			summary += ` RN: ${summarize(note.renote)}`;
+			summary += `\n\nRN: ${summarize(note.renote)}`;
 		} else {
-			summary += ' RN: ...';
+			summary += '\n\nRN: ...';
 		}
 	}