From 59a1b9adbe5af3655a30987e73ea60597bb9d5ca Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Fri, 30 Nov 2018 09:34:37 +0900
Subject: Trim notifications text (#3438)

* Trim notifications

* Remove needless colons

* Use single quote

* :art:
---
 .../app/desktop/views/components/notifications.vue | 22 +++++++++++++++-------
 .../desktop/views/pages/deck/deck.notification.vue | 13 +++++++++----
 .../app/mobile/views/components/notification.vue   | 11 ++++++++---
 3 files changed, 32 insertions(+), 14 deletions(-)

(limited to 'src/client')

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
-- 
cgit v1.2.3-freya