hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

separated component

Browse source
This commit is contained in:
Shpuld Shpuldson 2021-01-11 19:32:58 +02:00
commit 8674f20023
8 changed files with 171 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/notification/notification.js
View file

@ -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 () {

28
src/components/notification/notification.scss
View file

@ -56,34 +56,6 @@
margin: 0 0.1em;
}
.report-content {
margin: 0.5em 0;
}
.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-name {
font-weight: bold;
}
.reported-status-timeago {
float: right;
}
}
&.-type--repeat .type-icon {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);

33
src/components/notification/notification.vue
View file

@ -183,37 +183,10 @@
@{{ notification.target.screen_name }}
</router-link>
</div>
<div
<Report
v-else-if="notification.type === 'pleroma:report'"
>
<small>Reported user:</small>
<router-link :to="generateUserProfileLink(notification.report.acct)">
@{{ notification.report.acct.screen_name }}
</router-link>
<!-- eslint-disable vue/no-v-html -->
<div
class="report-content"
v-html="notification.report.content"
/>
<div v-if="notification.report.statuses.length">
<small>Reported statuses:</small>
<!-- eslint-enable vue/no-v-html -->
<router-link
v-for="status in notification.report.statuses"
:key="status.id"
:to="{ name: 'conversation', params: { id: status.id } }"
class="reported-status"
>
<span class="reported-status-name">{{ status.user.name }}</span>
<Timeago
:time="status.created_at"
:auto-update="240"
class="reported-status-timeago faint"
/>
<status-content :status="status" />
</router-link>
</div>
</div>
:report="notification.report"
/>
<template v-else>
<status-content
class="faint"

23
src/components/report/report.js Normal file
View file

@ -0,0 +1,23 @@
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: [
'report'
],
components: {
StatusContent,
Timeago
},
methods: {
generateUserProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
},
setReportState (id, state) {
return this.$store.state.api.backendInteractor.setReportState({ id, state })
}
}
}
export default Report

39
src/components/report/report.scss Normal file
View file

@ -0,0 +1,39 @@
@import '../../_variables.scss';
.Report {
.report-content {
margin: 0.5em 0;
}
.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;
}
}

63
src/components/report/report.vue Normal file
View file

@ -0,0 +1,63 @@
<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>
<b>{{ $t('report.state_' + report.state) }}</b>
</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>