2019-03-19 09:53:11 +01:00
|
|
|
<template>
|
2019-10-18 13:05:01 +02:00
|
|
|
<Modal
|
2019-07-05 09:17:44 +02:00
|
|
|
v-if="isOpen"
|
2019-10-22 02:52:31 +02:00
|
|
|
@backdropClicked="closeModal"
|
2019-07-05 09:17:44 +02:00
|
|
|
>
|
2019-10-18 13:05:01 +02:00
|
|
|
<div class="user-reporting-panel panel">
|
2019-07-05 09:17:44 +02:00
|
|
|
<div class="panel-heading">
|
|
|
|
<div class="title">
|
2021-02-26 15:23:11 +01:00
|
|
|
{{ $t('user_reporting.title', [user.screen_name_ui]) }}
|
2019-03-19 09:53:11 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2019-07-05 09:17:44 +02:00
|
|
|
<div class="panel-body">
|
|
|
|
<div class="user-reporting-panel-left">
|
|
|
|
<div>
|
|
|
|
<p>{{ $t('user_reporting.add_comment_description') }}</p>
|
|
|
|
<textarea
|
|
|
|
v-model="comment"
|
|
|
|
class="form-control"
|
|
|
|
:placeholder="$t('user_reporting.additional_comments')"
|
|
|
|
rows="1"
|
|
|
|
@input="resize"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div v-if="!user.is_local">
|
|
|
|
<p>{{ $t('user_reporting.forward_description') }}</p>
|
|
|
|
<Checkbox v-model="forward">
|
|
|
|
{{ $t('user_reporting.forward_to', [remoteInstance]) }}
|
|
|
|
</Checkbox>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<button
|
2020-11-24 11:32:42 +01:00
|
|
|
class="btn button-default"
|
2019-07-05 09:17:44 +02:00
|
|
|
:disabled="processing"
|
|
|
|
@click="reportUser"
|
|
|
|
>
|
|
|
|
{{ $t('user_reporting.submit') }}
|
|
|
|
</button>
|
|
|
|
<div
|
|
|
|
v-if="error"
|
|
|
|
class="alert error"
|
|
|
|
>
|
|
|
|
{{ $t('user_reporting.generic_error') }}
|
2019-04-26 21:31:10 +02:00
|
|
|
</div>
|
2019-07-05 09:17:44 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="user-reporting-panel-right">
|
|
|
|
<List :items="statuses">
|
|
|
|
<template
|
|
|
|
slot="item"
|
|
|
|
slot-scope="{item}"
|
|
|
|
>
|
|
|
|
<div class="status-fadein user-reporting-panel-sitem">
|
|
|
|
<Status
|
|
|
|
:in-conversation="false"
|
|
|
|
:focused="false"
|
|
|
|
:statusoid="item"
|
|
|
|
/>
|
|
|
|
<Checkbox
|
|
|
|
:checked="isChecked(item.id)"
|
|
|
|
@change="checked => toggleStatus(checked, item.id)"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</List>
|
|
|
|
</div>
|
2019-03-19 09:53:11 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2019-10-18 13:05:01 +02:00
|
|
|
</Modal>
|
2019-03-19 09:53:11 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script src="./user_reporting_modal.js"></script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
@import '../../_variables.scss';
|
|
|
|
|
|
|
|
.user-reporting-panel {
|
|
|
|
width: 90vw;
|
|
|
|
max-width: 700px;
|
2019-03-22 19:19:50 +01:00
|
|
|
min-height: 20vh;
|
|
|
|
max-height: 80vh;
|
2019-03-19 09:53:11 +01:00
|
|
|
|
2019-03-28 18:48:13 +01:00
|
|
|
.panel-heading {
|
2019-03-28 21:19:27 +01:00
|
|
|
.title {
|
|
|
|
text-align: center;
|
|
|
|
// TODO: Consider making these as default of panel
|
|
|
|
flex: 1;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
}
|
2019-03-28 18:48:13 +01:00
|
|
|
}
|
|
|
|
|
2019-03-19 09:53:11 +01:00
|
|
|
.panel-body {
|
|
|
|
display: flex;
|
2019-03-22 19:19:50 +01:00
|
|
|
flex-direction: column-reverse;
|
2019-03-19 09:53:11 +01:00
|
|
|
border-top: 1px solid;
|
|
|
|
border-color: $fallback--border;
|
|
|
|
border-color: var(--border, $fallback--border);
|
2019-03-28 18:48:13 +01:00
|
|
|
overflow: hidden;
|
2019-03-19 09:53:11 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
&-left {
|
2019-03-22 19:19:50 +01:00
|
|
|
padding: 1.1em 0.7em 0.7em;
|
2019-03-19 09:53:11 +01:00
|
|
|
line-height: 1.4em;
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
> div {
|
2019-03-22 19:19:50 +01:00
|
|
|
margin-bottom: 1em;
|
2019-03-19 09:53:11 +01:00
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
textarea.form-control {
|
|
|
|
line-height: 16px;
|
|
|
|
resize: none;
|
|
|
|
overflow: hidden;
|
|
|
|
transition: min-height 200ms 100ms;
|
|
|
|
min-height: 44px;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
min-width: 10em;
|
|
|
|
padding: 0 2em;
|
|
|
|
}
|
2019-03-20 17:37:13 +01:00
|
|
|
|
|
|
|
.alert {
|
|
|
|
margin: 1em 0 0 0;
|
2019-03-20 18:46:53 +01:00
|
|
|
line-height: 1.3em;
|
2019-03-20 17:37:13 +01:00
|
|
|
}
|
2019-03-19 09:53:11 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
&-right {
|
2019-03-28 20:50:53 +01:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2019-04-29 20:37:08 +02:00
|
|
|
overflow-y: auto;
|
2019-03-22 19:19:50 +01:00
|
|
|
}
|
2019-03-19 09:53:11 +01:00
|
|
|
|
2019-03-22 19:19:50 +01:00
|
|
|
&-sitem {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
2020-07-28 00:27:11 +02:00
|
|
|
/* TODO cleanup this */
|
|
|
|
> .Status {
|
2019-03-22 19:19:50 +01:00
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .checkbox {
|
|
|
|
margin: 0.75em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media all and (min-width: 801px) {
|
|
|
|
.panel-body {
|
|
|
|
flex-direction: row;
|
|
|
|
}
|
|
|
|
|
|
|
|
&-left {
|
|
|
|
width: 50%;
|
|
|
|
max-width: 320px;
|
|
|
|
border-right: 1px solid;
|
2019-03-19 09:53:11 +01:00
|
|
|
border-color: $fallback--border;
|
|
|
|
border-color: var(--border, $fallback--border);
|
2019-03-22 19:19:50 +01:00
|
|
|
padding: 1.1em;
|
2019-03-19 09:53:11 +01:00
|
|
|
|
2019-03-22 19:19:50 +01:00
|
|
|
> div {
|
|
|
|
margin-bottom: 2em;
|
2019-03-19 09:53:11 +01:00
|
|
|
}
|
|
|
|
}
|
2019-03-22 19:19:50 +01:00
|
|
|
|
|
|
|
&-right {
|
|
|
|
width: 50%;
|
|
|
|
flex: 1 1 auto;
|
2019-04-29 20:37:08 +02:00
|
|
|
margin-bottom: 12px;
|
2019-03-22 19:19:50 +01:00
|
|
|
}
|
2019-03-19 09:53:11 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|