Skip to content
Snippets Groups Projects
Commit 9f99dea7 authored by Angelina Filippova's avatar Angelina Filippova
Browse files

Extract status into separate view

parent d29cd299
No related branches found
No related tags found
3 merge requests!67Add statuses page + fetch statuses from given instance,!62Add statuses page + fetch statuses from given instance,!52Combine reports with one topic and add pagination
Hide whitespace changes
Inline Side-by-side
src/views/reports/components/GroupedReport.vue
+ 5
− 3
View file @ 9f99dea7
......@@ -40,7 +40,9 @@
<div v-if="group.status">
<div class="line"/>
<span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
<statuses :statuses="group.status" class="reported-status"/>
<div v-for="status in group.status" :key="status.id">
<status :status="status" class="reported-status"/>
</div>
</div>
<div v-if="group.reports">
<div class="line"/>
......@@ -57,11 +59,11 @@
<script>
import ModerateUserDropdown from './ModerateUserDropdown'
import ReportCard from './ReportCard'
import Statuses from './Statuses'
import Status from '../../status/Status'
export default {
name: 'Report',
components: { ModerateUserDropdown, ReportCard, Statuses },
components: { ModerateUserDropdown, ReportCard, Status },
props: {
groups: {
type: Array,
......
src/views/reports/components/Report.vue
+ 5
− 3
View file @ 9f99dea7
......@@ -57,7 +57,9 @@
<div v-if="report.statuses.length > 0" class="statuses">
<el-collapse>
<el-collapse-item :title="getStatusesTitle(report.statuses)">
<statuses :statuses="report.statuses" />
<div v-for="status in report.statuses" :key="status.id">
<status :status="status" />
</div>
</el-collapse-item>
</el-collapse>
</div>
......@@ -79,12 +81,12 @@
<script>
import moment from 'moment'
import Statuses from './Statuses'
import Status from '../../status/Status'
import ModerateUserDropdown from './ModerateUserDropdown'
export default {
name: 'Report',
components: { Statuses, ModerateUserDropdown },
components: { Status, ModerateUserDropdown },
props: {
reports: {
type: Array,
......
src/views/reports/components/Statuses.vue → src/views/status/Status.vue
+ 171
− 0
View file @ 9f99dea7
<template>
<div>
<el-card v-for="status in statuses" :key="status.id" class="status-card">
<div slot="header">
<div class="status-header">
<div class="status-account-container">
<div class="status-account">
<img :src="status.account.avatar" class="status-avatar-img">
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
</div>
<a :href="status.account.url" target="_blank" class="account">
@{{ status.account.acct }}
</a>
</div>
<div class="status-actions">
<el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
<el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
<el-dropdown trigger="click">
<el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
{{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-if="!status.sensitive"
@click.native="changeStatus(status.id, true, status.visibility)">
{{ $t('reports.addSensitive') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.sensitive"
@click.native="changeStatus(status.id, false, status.visibility)">
{{ $t('reports.removeSensitive') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.visibility !== 'public'"
@click.native="changeStatus(status.id, status.sensitive, 'public')">
{{ $t('reports.public') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.visibility !== 'private'"
@click.native="changeStatus(status.id, status.sensitive, 'private')">
{{ $t('reports.private') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.visibility !== 'unlisted'"
@click.native="changeStatus(status.id, status.sensitive, 'unlisted')">
{{ $t('reports.unlisted') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="deleteStatus(status.id)">
{{ $t('reports.deleteStatus') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-card class="status-card">
<div slot="header">
<div class="status-header">
<div class="status-account-container">
<div class="status-account">
<img :src="status.account.avatar" class="status-avatar-img">
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
</div>
<a :href="status.account.url" target="_blank" class="account">
@{{ status.account.acct }}
</a>
</div>
<div class="status-actions">
<el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
<el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
<el-dropdown trigger="click">
<el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
{{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-if="!status.sensitive"
@click.native="changeStatus(status.id, true, status.visibility)">
{{ $t('reports.addSensitive') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.sensitive"
@click.native="changeStatus(status.id, false, status.visibility)">
{{ $t('reports.removeSensitive') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.visibility !== 'public'"
@click.native="changeStatus(status.id, status.sensitive, 'public')">
{{ $t('reports.public') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.visibility !== 'private'"
@click.native="changeStatus(status.id, status.sensitive, 'private')">
{{ $t('reports.private') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.visibility !== 'unlisted'"
@click.native="changeStatus(status.id, status.sensitive, 'unlisted')">
{{ $t('reports.unlisted') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="deleteStatus(status.id)">
{{ $t('reports.deleteStatus') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="status-body">
<span class="status-content" v-html="status.content"/>
<a :href="status.url" target="_blank" class="account">
{{ parseTimestamp(status.created_at) }}
</a>
</div>
</el-card>
</div>
</div>
<div class="status-body">
<span class="status-content" v-html="status.content"/>
<a :href="status.url" target="_blank" class="account">
{{ parseTimestamp(status.created_at) }}
</a>
</div>
</el-card>
</template>
<script>
......@@ -70,8 +68,8 @@ import moment from 'moment'
export default {
name: 'Statuses',
props: {
statuses: {
type: Array,
status: {
type: Object,
required: true
}
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment