ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2026-01-15 09:24:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor notifications menu

Browse Source
This commit is contained in:
Wolfgang Huß 2020-04-03 09:26:18 +02:00
parent 6f8b48024d
commit c574c58ad5
2 changed files with 4 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
webapp/components/Notification/Notification.vue
View File

@ -1,74 +1,4 @@
<template>
<!-- Wolle <ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
<client-only>
<ds-space margin-bottom="x-small">
<user-teaser :user="notificationData.triggerer" :date-time="notificationData.createdAt" />
</ds-space>
<ds-text data-test="reason-text" color="soft">
<base-icon
:name="notificationData.iconName"
v-tooltip="{ content: $t(notificationData.iconTooltip), placement: 'right' }"
/>
{{
$t(
`notifications.reason.${notificationData.reason}` +
notificationData.reasonTranslationExtention,
)
}}
</ds-text>
</client-only>
<ds-space margin-bottom="x-small" />
<nuxt-link :to="notificationData.linkTo" @click.native="$emit('read')"> -->
<!-- <ds-space margin-bottom="x-small">
<ds-card
:header="
(notificationData.isPost || notificationData.isComment) && notificationData.title
"
hover
space="x-small"
class="notifications-card"
>
<! because of different margin above ds-card content without header property >
<user-teaser
v-if="notificationData.isUser"
class="notifications-user-teaser"
:user="notificationData.user"
/>
<div v-else>
<span v-if="notificationData.isComment" class="notification-content-header-text">
{{ $t(`notifications.comment`) }}:
</span>
{{ notificationData.contentExcerpt | removeHtml }}
</div>
<div v-if="notificationData.isReport">
<ds-space margin-bottom="x-small" />
<span class="notification-content-header-text">
{{ $t(`notifications.report.category`) }}:
</span>
{{ $t('report.reason.category.options.' + notificationData.report.reasonCategory) }}
<br />
<span class="notification-content-header-text">
{{ $t(`notifications.report.description`) }}:
</span>
<span
v-if="
notificationData.report.reasonDescription &&
notificationData.report.reasonDescription !== ''
"
>
{{ notificationData.report.reasonDescription }}
</span>
<span v-else>
—
</span>
</div>
<! because of different margin underneath ds-card content without header property >
<ds-space
v-if="!(notificationData.isPost || notificationData.isComment)"
margin-bottom="base"
/>
</ds-card>
</ds-space> -->
<article :class="{ '--read': notificationData.read, notification: true }">
<client-only>
<user-teaser :user="notificationData.triggerer" :date-time="notificationData.createdAt" />
@ -87,21 +17,10 @@
</p>
<nuxt-link class="link" :to="notificationData.linkTo" @click.native="$emit('read')">
<base-card wideContent>
<h2 class="title">
{{ (notificationData.isPost || notificationData.isComment) && notificationData.title }}
<h2 v-if="notificationData.isPost || notificationData.isComment" class="title">
{{ notificationData.title }}
</h2>
<p>
<strong v-if="notificationData.isComment" class="comment">
{{ $t(`notifications.comment`) }}:
</strong>
{{ notificationData.contentExcerpt | removeHtml }}
</p>
<!-- because of different margin above ds-card content without header property -->
<user-teaser
v-if="notificationData.isUser"
class="notifications-user-teaser"
:user="notificationData.user"
/>
<user-teaser v-if="notificationData.isUser" :user="notificationData.user" />
<p v-else>
<strong v-if="notificationData.isComment" class="comment">
{{ $t(`notifications.comment`) }}:
@ -126,11 +45,6 @@
—
</span>
</div>
<!-- because of different margin underneath ds-card content without header property -->
<ds-space
v-if="!(notificationData.isPost || notificationData.isComment)"
margin-bottom="base"
/>
</base-card>
</nuxt-link>
</article>
@ -164,16 +78,6 @@ export default {
</script>
<style lang="scss">
// Wolle .notification.read {
// opacity: $opacity-soft;
// }
// .notifications-card {
// min-width: 500px;
// }
// .notification-content-header-text {
// font-weight: 700;
// margin-right: 0.1rem;
.notification {
margin-bottom: $space-base;
@ -206,12 +110,4 @@ export default {
font-weight: $font-weight-bold;
}
}
// Wolle .notifications-card {
// > .user-teaser {
// margin-top: $space-small;
// }
// }
.notifications-user-teaser {
margin-top: $space-small;
}
</style>

4
webapp/components/utils/Notifications.js
View File

@ -60,7 +60,6 @@ export const testNotifications = [
export const extractNotificationDataOfCurrentUser = (notification, currentUser) => {
const from = notification.from // for readability
// Wolle console.log('from: ', from)
let user = null
let post = null
let comment = null
@ -73,7 +72,7 @@ export const extractNotificationDataOfCurrentUser = (notification, currentUser)
let reasonTranslationExtention = ''
let iconName, iconTooltip, triggerer, title, author, linkName, linkParams, linkHashParam
// extract data out of the deep structure of db response
// extract flattened data out of the deep structure of db response
// leave undefined data as default, see above. so later by priority user, comment, post we get easely a clou what it is
switch (from.__typename) {
@ -169,6 +168,5 @@ export const extractNotificationDataOfCurrentUser = (notification, currentUser)
reasonTranslationExtention,
linkTo: { name: linkName, params: linkParams, ...linkHashParam },
}
// Wolle console.log('data: ', data)
return data
}