diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/interactions/interactions.js | 2 | ||||
| -rw-r--r-- | src/components/interactions/interactions.vue | 9 | ||||
| -rw-r--r-- | src/components/notification/notification.js | 7 | ||||
| -rw-r--r-- | src/components/notification/notification.vue | 7 | ||||
| -rw-r--r-- | src/components/notifications/notifications.js | 1 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 6 | ||||
| -rw-r--r-- | src/components/report/report.js | 33 | ||||
| -rw-r--r-- | src/components/report/report.scss | 43 | ||||
| -rw-r--r-- | src/components/report/report.vue | 84 |
9 files changed, 189 insertions, 3 deletions
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js index 7fe5e76d..54275a7b 100644 --- a/src/components/interactions/interactions.js +++ b/src/components/interactions/interactions.js @@ -4,6 +4,8 @@ const tabModeDict = { mentions: ['mention'], 'likes+repeats': ['repeat', 'like'], follows: ['follow'], + reactions: ['pleroma:emoji_reaction'], + reports: ['pleroma:report'], moves: ['move'] } diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue index 57d5d87c..b7291c02 100644 --- a/src/components/interactions/interactions.vue +++ b/src/components/interactions/interactions.vue @@ -22,6 +22,15 @@ :label="$t('interactions.follows')" /> <span + key="reactions" + :label="$t('interactions.emoji_reactions')" + /> + <span + v-if="canSeeReports" + key="reports" + :label="$t('interactions.reports')" + /> + <span v-if="!allowFollowingMove" key="moves" :label="$t('interactions.moves')" diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 4aa9affd..38211bb3 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -4,6 +4,7 @@ import Status from '../status/status.vue' import UserAvatar from '../user_avatar/user_avatar.vue' import UserCard from '../user_card/user_card.vue' import Timeago from '../timeago/timeago.vue' +import Report from '../report/report.vue' import { isStatusNotification } from '../../services/notification_utils/notification_utils.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' @@ -44,7 +45,8 @@ const Notification = { UserAvatar, UserCard, Timeago, - Status + Status, + Report }, methods: { toggleUserExpanded () { @@ -76,6 +78,9 @@ const Notification = { this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id }) this.$store.dispatch('removeFollowRequest', this.user) }) + }, + testlog (a) { + console.log(a) } }, computed: { diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index f56aa977..40ea0431 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -106,6 +106,9 @@ </i18n> </small> </span> + <span v-if="notification.type === 'pleroma:report'"> + <small>{{ $t('notifications.submitted_report') }}</small> + </span> </div> <div v-if="isStatusNotification" @@ -180,6 +183,10 @@ @{{ notification.target.screen_name }} </router-link> </div> + <Report + v-else-if="notification.type === 'pleroma:report'" + :report-id="notification.report.id" + /> <template v-else> <status-content class="faint" diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 49258563..25773fe0 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -66,6 +66,7 @@ const Notifications = { return this.$store.state.statuses.notifications.loading }, notificationsToDisplay () { + console.log(this.notifications) return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount) }, ...mapGetters(['unreadChatCount']) diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 682ae127..58a86fb0 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -60,8 +60,10 @@ height: 32px; } - --link: var(--faintLink); - --text: var(--faint); + .faint { + --link: var(--faintLink); + --text: var(--faint); + } } .follow-request-accept { diff --git a/src/components/report/report.js b/src/components/report/report.js new file mode 100644 index 00000000..4d9108af --- /dev/null +++ b/src/components/report/report.js @@ -0,0 +1,33 @@ +import StatusContent from '../status_content/status_content.vue' +import Timeago from '../timeago/timeago.vue' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' + +const Report = { + props: [ + 'reportId' + ], + components: { + StatusContent, + Timeago + }, + computed: { + report () { + return this.$store.state.reports.reports[this.reportId] || {} + }, + state: { + get: function () { return this.report.state }, + set: function (val) { this.setReportState(val) } + } + }, + methods: { + generateUserProfileLink (user) { + return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) + }, + setReportState (state) { + console.log('setting state', state) + return this.$store.dispatch('setReportState', { id: this.report.id, state }) + } + } +} + +export default Report diff --git a/src/components/report/report.scss b/src/components/report/report.scss new file mode 100644 index 00000000..578b4eb1 --- /dev/null +++ b/src/components/report/report.scss @@ -0,0 +1,43 @@ +@import '../../_variables.scss'; + +.Report { + .report-content { + margin: 0.5em 0 1em; + } + + .report-state { + margin: 0.5em 0 1em; + } + + .reported-status { + border: 1px solid $fallback--faint; + border-color: var(--faint, $fallback--faint); + border-radius: $fallback--inputRadius; + border-radius: var(--inputRadius, $fallback--inputRadius); + color: $fallback--text; + color: var(--text, $fallback--text); + display: block; + padding: 0.5em; + margin: 0.5em 0; + + .status-content { + pointer-events: none; + } + + .reported-status-heading { + display: flex; + width: 100%; + justify-content: space-between; + margin-bottom: 0.2em; + } + + .reported-status-name { + font-weight: bold; + } + } + + .note { + width: 100%; + margin-bottom: 0.5em; + } +} diff --git a/src/components/report/report.vue b/src/components/report/report.vue new file mode 100644 index 00000000..4020773d --- /dev/null +++ b/src/components/report/report.vue @@ -0,0 +1,84 @@ +<template> + <div class="Report"> + <div class="reported-user"> + <span>{{ $t('report.reported_user') }}</span> + <router-link :to="generateUserProfileLink(report.acct)"> + @{{ report.acct.screen_name }} + </router-link> + </div> + <div class="reporter"> + <span>{{ $t('report.reporter') }}</span> + <router-link :to="generateUserProfileLink(report.actor)"> + @{{ report.actor.screen_name }} + </router-link> + </div> + <div class="report-state"> + <span>{{ $t('report.state') }}</span> + <label + for="report-state" + class="select" + > + <select + id="report-state" + v-model="state" + class="form-control" + > + <option + v-for="state in ['open', 'closed', 'resolved']" + :key="state" + :value="state" + > + {{ $t('report.state_' + state) }} + </option> + </select> + <FAIcon + class="select-down-icon" + icon="chevron-down" + /> + </label> + </div> + <!-- eslint-disable vue/no-v-html --> + <div + class="report-content" + v-html="report.content" + /> + <div v-if="report.statuses.length"> + <small>{{ $t('report.reported_statuses') }}</small> + <!-- eslint-enable vue/no-v-html --> + <router-link + v-for="status in report.statuses" + :key="status.id" + :to="{ name: 'conversation', params: { id: status.id } }" + class="reported-status" + > + <div class="reported-status-heading"> + <span class="reported-status-name">{{ status.user.name }}</span> + <Timeago + :time="status.created_at" + :auto-update="240" + class="faint" + /> + </div> + <status-content :status="status" /> + </router-link> + </div> + <div v-if="report.notes.length"> + <small>{{ $t('report.notes') }}</small> + <div + v-for="note in report.notes" + :key="note.id" + class="note" + > + <span>{{ note.content }}</span> + <Timeago + :time="note.created_at" + :auto-update="240" + class="faint" + /> + </div> + </div> + </div> +</template> + +<script src="./report.js"></script> +<style src="./report.scss" lang="scss"></style> |