diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/notification/notification.js | 14 | ||||
| -rw-r--r-- | src/components/notification/notification.vue | 20 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 10 | ||||
| -rw-r--r-- | src/i18n/en.json | 4 |
4 files changed, 39 insertions, 9 deletions
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index ddba560e..265aaee0 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -20,7 +20,9 @@ import { faUserPlus, faEyeSlash, faUser, - faSuitcaseRolling + faSuitcaseRolling, + faExpandAlt, + faCompressAlt } from '@fortawesome/free-solid-svg-icons' library.add( @@ -31,13 +33,15 @@ library.add( faUserPlus, faUser, faEyeSlash, - faSuitcaseRolling + faSuitcaseRolling, + faExpandAlt, + faCompressAlt ) const Notification = { data () { return { - userExpanded: false, + statusExpanded: false, betterShadow: this.$store.state.interface.browserSupport.cssFilter, unmuted: false } @@ -55,8 +59,8 @@ const Notification = { UserLink }, methods: { - toggleUserExpanded () { - this.userExpanded = !this.userExpanded + toggleStatusExpanded () { + this.statusExpanded = !this.statusExpanded }, generateUserProfileLink (user) { return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 84f3f7de..f1aa5420 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -144,13 +144,25 @@ <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" - class="faint-link" + class="timeago-link faint-link" > <Timeago :time="notification.created_at" :auto-update="240" /> </router-link> + <button + class="button-unstyled expand-icon" + @click.prevent="toggleStatusExpanded" + :title="$t('tool_tip.toggle_expand')" + :aria-expanded="statusExpanded" + > + <FAIcon + class="fa-scale-110" + fixed-width + :icon="statusExpanded ? 'compress-alt' : 'expand-alt'" + /> + </button> </div> <div v-else @@ -166,6 +178,8 @@ <button v-if="needMute" class="button-unstyled" + :title="$t('tool_tip.toggle_mute')" + :aria-expanded="!unmuted" @click.prevent="toggleMute" > <FAIcon @@ -222,8 +236,8 @@ /> <template v-else> <StatusContent - class="faint" - :compact="true" + :class="{ faint: !statusExpanded }" + :compact="!statusExpanded" :status="notification.action" /> </template> diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index f71f9b76..9b241565 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -112,6 +112,16 @@ min-width: 3em; text-align: right; } + + .timeago-link { + margin-right: 0.2em; + } + + .expand-icon { + .svg-inline--fa { + margin-left: 0.25em; + } + } } .emoji-reaction-emoji { diff --git a/src/i18n/en.json b/src/i18n/en.json index 187d4dcd..59ee1c17 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -991,7 +991,9 @@ "user_settings": "User Settings", "accept_follow_request": "Accept follow request", "reject_follow_request": "Reject follow request", - "bookmark": "Bookmark" + "bookmark": "Bookmark", + "toggle_expand": "Expand or collapse notification to show post in full", + "toggle_mute": "Expand or collapse notification to reveal muted content" }, "upload": { "error": { |