Extract statuses into separate file
This commit is contained in:
Angelina Filippova
parent
cf50fb0528
commit
7a0180c727
3 changed files with 114 additions and 49 deletions
|
|
@ -213,7 +213,17 @@ export default {
|
|||
deleteCompleted: 'Delete comleted',
|
||||
deleteCanceled: 'Delete canceled',
|
||||
noNotes: 'No notes to display',
|
||||
changeState: 'Change state'
|
||||
changeState: 'Change state',
|
||||
changeScope: 'Change scope',
|
||||
resolve: 'Resolve',
|
||||
reopen: 'Reopen',
|
||||
close: 'Close',
|
||||
addSensitive: 'Add Sensitive flag',
|
||||
removeSensitive: 'Remove Sensitive flag',
|
||||
public: 'Make status public',
|
||||
private: 'Make status private',
|
||||
unlisted: 'Make status unlisted',
|
||||
sensitive: 'Sensitive'
|
||||
},
|
||||
reportsFilter: {
|
||||
inputPlaceholder: 'Select filter',
|
||||
|
|
|
|||
96
src/views/reports/components/Statuses.vue
Normal file
96
src/views/reports/components/Statuses.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<el-collapse-item :title="getStatusesTitle(report.statuses)">
|
||||
<el-card v-for="status in report.statuses" :key="status.id" class="status-card">
|
||||
<div slot="header">
|
||||
<div class="status-header">
|
||||
<div class="status-account">
|
||||
<img :src="status.account.avatar" alt="avatar" class="status-avatar-img">
|
||||
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
|
||||
</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">{{ $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">{{ $t('reports.addSensitive') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="status.sensitive">{{ $t('reports.removeSensitive') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="status.visibility !== 'public'">{{ $t('reports.public') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="status.visibility !== 'private'">{{ $t('reports.private') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="status.visibility !== 'unlisted'">{{ $t('reports.unlisted') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<a :href="status.account.url" target="_blank" class="account">
|
||||
@{{ status.account.acct }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="status-body">
|
||||
<span class="status-content">{{ status.content }}</span>
|
||||
<a :href="status.url" target="_blank" class="account">
|
||||
{{ parseTimestamp(status.created_at) }}
|
||||
</a>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-collapse-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'Statuses',
|
||||
props: {
|
||||
report: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
capitalizeFirstLetter(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
},
|
||||
getStatusesTitle(statuses) {
|
||||
console.log(this.report)
|
||||
return `Reported statuses: ${statuses.length} item(s)`
|
||||
},
|
||||
parseTimestamp(timestamp) {
|
||||
return moment(timestamp).format('YYYY-MM-DD HH:mm')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel='stylesheet/scss' lang='scss'>
|
||||
.account {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.status-account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.status-avatar-img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.status-account-name {
|
||||
margin: 0;
|
||||
}
|
||||
.status-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status-content {
|
||||
font-size: 15px;
|
||||
}
|
||||
.status-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,12 +5,12 @@
|
|||
<h3 class="report-title">Report on {{ report.account.display_name }}</h3>
|
||||
<div>
|
||||
<el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
|
||||
<el-dropdown>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">Resolve</el-dropdown-item>
|
||||
<el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">Reopen</el-dropdown-item>
|
||||
<el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">Close</el-dropdown-item>
|
||||
<el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
|
@ -46,25 +46,7 @@
|
|||
</div>
|
||||
<div v-if="report.statuses.length > 0" class="statuses">
|
||||
<el-collapse>
|
||||
<el-collapse-item :title="getStatusesTitle(report.statuses)">
|
||||
<el-card v-for="status in report.statuses" :key="status.id" class="status-card">
|
||||
<div slot="header">
|
||||
<div class="status-header">
|
||||
<img :src="status.account.avatar" alt="User's 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-body">
|
||||
<span class="status-content">{{ status.content }}</span>
|
||||
<a :href="status.url" target="_blank" class="account">
|
||||
{{ parseTimestamp(status.created_at) }}
|
||||
</a>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-collapse-item>
|
||||
<statuses :report="report"/>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -74,9 +56,11 @@
|
|||
<script>
|
||||
import i18n from '@/lang'
|
||||
import * as moment from 'moment'
|
||||
import Statuses from './Statuses'
|
||||
|
||||
export default {
|
||||
name: 'TimelineItem',
|
||||
components: { Statuses },
|
||||
props: {
|
||||
report: {
|
||||
type: Object,
|
||||
|
|
@ -137,9 +121,6 @@ export default {
|
|||
return 'primary'
|
||||
}
|
||||
},
|
||||
getStatusesTitle(statuses) {
|
||||
return `Reported statuses: ${statuses.length} item(s)`
|
||||
},
|
||||
parseTimestamp(timestamp) {
|
||||
return moment(timestamp).format('YYYY-MM-DD HH:mm')
|
||||
},
|
||||
|
|
@ -230,28 +211,6 @@ export default {
|
|||
.report-title {
|
||||
margin: 0;
|
||||
}
|
||||
.status-account-name {
|
||||
margin: 0;
|
||||
}
|
||||
.status-avatar-img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.status-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.status-content {
|
||||
font-size: 15px;
|
||||
}
|
||||
.status-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.statuses {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue