Trim notifications text (#3438)

* Trim notifications

* Remove needless colons

* Use single quote

* 🎨
This commit is contained in:
MeiMei 2018-11-30 09:34:37 +09:00 committed by syuilo
parent ee82f99f5a
commit 59a1b9adbe
4 changed files with 36 additions and 18 deletions

View File

@ -20,7 +20,7 @@
<mk-reaction-icon :reaction="notification.reaction"/> <mk-reaction-icon :reaction="notification.reaction"/>
<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link> <router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p> </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"/> <fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
</router-link> </router-link>
</div> </div>
@ -32,7 +32,7 @@
<p><fa icon="retweet"/> <p><fa icon="retweet"/>
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link> <router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p> </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"/> <fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
</router-link> </router-link>
</div> </div>
@ -44,7 +44,7 @@
<p><fa icon="quote-left"/> <p><fa icon="quote-left"/>
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link> <router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p> </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> </div>
</template> </template>
@ -72,7 +72,7 @@
<p><fa icon="reply"/> <p><fa icon="reply"/>
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link> <router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p> </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> </div>
</template> </template>
@ -82,7 +82,7 @@
<p><fa icon="at"/> <p><fa icon="at"/>
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link> <router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p> </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> </div>
</template> </template>
@ -90,7 +90,7 @@
<mk-avatar class="avatar" :user="notification.user"/> <mk-avatar class="avatar" :user="notification.user"/>
<div class="text"> <div class="text">
<p><fa icon="chart-pie"/><a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p> <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"/> <fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
</router-link> </router-link>
</div> </div>
@ -219,7 +219,7 @@ export default Vue.extend({
margin 0 margin 0
padding 16px padding 16px
overflow-wrap break-word overflow-wrap break-word
font-size 13px font-size 12px
border-bottom solid 1px var(--faceDivider) border-bottom solid 1px var(--faceDivider)
&:last-child &:last-child
@ -262,9 +262,17 @@ export default Vue.extend({
.note-preview .note-preview
color var(--noteText) color var(--noteText)
display inline-block
overflow hidden
max-height 48px
.note-ref .note-ref
color var(--noteText) color var(--noteText)
display inline-block
width: 100%
overflow hidden
white-space nowrap
text-overflow ellipsis
[data-icon] [data-icon]
font-size 1em font-size 1em

View File

@ -8,7 +8,7 @@
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
</header> </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-left"/>{{ getNoteSummary(notification.note) }}
<fa icon="quote-right"/> <fa icon="quote-right"/>
</router-link> </router-link>
@ -23,7 +23,7 @@
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
</header> </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"/> <fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
</router-link> </router-link>
</div> </div>
@ -59,7 +59,7 @@
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
</header> </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"/> <fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
</router-link> </router-link>
</div> </div>
@ -112,7 +112,7 @@ export default Vue.extend({
.dsfykdcjpuwfvpefwufddclpjhzktmpw .dsfykdcjpuwfvpefwufddclpjhzktmpw
> .notification > .notification
padding 16px padding 16px
font-size 13px font-size 12px
overflow-wrap break-word overflow-wrap break-word
&:after &:after
@ -150,6 +150,11 @@ export default Vue.extend({
> .note-ref > .note-ref
color var(--noteText) color var(--noteText)
display inline-block
width: 100%
overflow hidden
white-space nowrap
text-overflow ellipsis
[data-icon] [data-icon]
font-size 1em font-size 1em

View File

@ -8,7 +8,7 @@
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
</header> </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-left"/>{{ getNoteSummary(notification.note) }}
<fa icon="quote-right"/> <fa icon="quote-right"/>
</router-link> </router-link>
@ -23,7 +23,7 @@
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
</header> </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"/> <fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
</router-link> </router-link>
</div> </div>
@ -59,7 +59,7 @@
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
</header> </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"/> <fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
</router-link> </router-link>
</div> </div>
@ -162,6 +162,11 @@ export default Vue.extend({
> .note-ref > .note-ref
color var(--noteText) color var(--noteText)
display inline-block
width: 100%
overflow hidden
white-space nowrap
text-overflow ellipsis
[data-icon] [data-icon]
font-size 1em font-size 1em

View File

@ -29,18 +29,18 @@ const summarize = (note: any): string => {
// 返信のとき // 返信のとき
if (note.replyId) { if (note.replyId) {
if (note.reply) { if (note.reply) {
summary += ` RE: ${summarize(note.reply)}`; summary += `\n\nRE: ${summarize(note.reply)}`;
} else { } else {
summary += ' RE: ...'; summary += '\n\nRE: ...';
} }
} }
// Renoteのとき // Renoteのとき
if (note.renoteId) { if (note.renoteId) {
if (note.renote) { if (note.renote) {
summary += ` RN: ${summarize(note.renote)}`; summary += `\n\nRN: ${summarize(note.renote)}`;
} else { } else {
summary += ' RN: ...'; summary += '\n\nRN: ...';
} }
} }