diff options
author | Carl Schwan <carl@carlschwan.eu> | 2022-10-28 15:32:17 +0200 |
---|---|---|
committer | Carl Schwan <carl@carlschwan.eu> | 2022-10-28 15:32:17 +0200 |
commit | fae005454fce0da2f6120b892d2742facd3fc88d (patch) | |
tree | 032fca48d04a563779a1f8284dd527aed8d8d27a /src | |
parent | 1e4a9f2cab8de2a581f536a6985097525e272747 (diff) |
Fix notification
Port to vue components
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/TimelineEntry.vue | 43 |
1 files changed, 22 insertions, 21 deletions
diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue index 0d490133..2283850c 100644 --- a/src/components/TimelineEntry.vue +++ b/src/components/TimelineEntry.vue @@ -1,11 +1,11 @@ <template> <div :class="['timeline-entry', hasHeader ? 'with-header' : '']"> - <template v-if="item.type === 'SocialAppNotification'"> - <div class="notification-icon" :class="notificationIcon" /> + <div v-if="item.type === 'SocialAppNotification'" class="notification"> + <Bell :size="22" /> <span class="notification-action"> {{ actionSummary }} </span> - </template> + </div> <template v-else-if="item.type === 'Announce'"> <div class="container-icon-boost boost"> <span class="icon-boost" /> @@ -40,6 +40,7 @@ import TimelinePost from './TimelinePost.vue' import TimelineAvatar from './TimelineAvatar.vue' import UserEntry from './UserEntry.vue' +import Bell from 'vue-material-design-icons/Bell.vue' export default { name: 'TimelineEntry', @@ -47,6 +48,7 @@ export default { TimelinePost, TimelineAvatar, UserEntry, + Bell, }, props: { item: { @@ -138,27 +140,26 @@ export default { align-items: bottom; } - .notification-action { - flex-grow: 1; - display: inline-block; - grid-row: 1; - grid-column: 2; - } + .notification { + display: flex; + padding-left: 2rem; + gap: 0.2rem; + margin-top: 1rem; + + &-action { + flex-grow: 1; + display: inline-block; + grid-row: 1; + grid-column: 2; + color: var(--color-text-lighter); + } - .notification-icon { - opacity: .5; - background-position: center; - background-size: contain; - overflow: hidden; - height: 20px; - min-width: 32px; - flex-shrink: 0; - display: inline-block; - vertical-align: middle; - grid-column: 1; - grid-row: 1; + .bell-icon { + opacity: .5; + } } + .icon-boost { display: inline-block; vertical-align: middle; |