Skip to content
Snippets Groups Projects
Commit 0153bb98 authored by MK Fain's avatar MK Fain Committed by Angelina Filippova
Browse files

chat show style cleanup and basic message moderation functions

parent d65c5a1d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/api/chat.js
+ 5
− 2
View file @ 0153bb98
......@@ -2,10 +2,13 @@ import request from '@/utils/request'
import { getToken } from '@/utils/auth'
import { baseName } from './utils'
export async function deleteChatMessage(id, message_id, authHost, token) {
export async function deleteChatMessage(chat_id, message_id, authHost, token) {
console.log(chat_id)
console.log(message_id)
return await request({
baseURL: baseName(authHost),
url: `/api/pleroma/admin/chats/{id}/messages/${message_id}`,
url: `/api/pleroma/admin/chats/${chat_id}/messages/${message_id}`,
method: 'delete',
headers: authHeaders(token)
})
......
src/components/ChatMessage/index.vue
+ 99
− 46
View file @ 0153bb98
<template>
<el-card v-if="!message.deleted" class="message-card" @click.native="handleRouteChange()">
<el-card v-if="!message.deleted" class="message-card">
<div slot="header">
<div class="message-header">
<div class="chat-particiants-sender">
<img v-if="propertyExists(author, 'avatar')" :src="author.avatar" class="chat-avatar-img">
<span v-if="propertyExists(author, 'username')" class="chat-account-name">{{ author.username }}</span>
<span v-else>
<span v-if="propertyExists(author, 'username')" class="chat-account-name">
{{ author.username }}
</span>
<span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
</span>
<div class="message-meta">
<router-link
v-if="propertyExists(author, 'id')"
:to="{ name: 'UsersShow', params: { id: author.id }}"
class="router-link"
@click.native.stop>
<div class="message-author">
<img v-if="propertyExists(author, 'avatar')" :src="author.avatar" class="message-author-avatar-img">
<span v-if="propertyExists(author, 'username')" class="message-author-name">{{ author.username }}</span>
<span v-else>
<span v-if="propertyExists(author, 'username')" class="message-author-name">
{{ author.username }}
</span>
<span v-else class="message-author-name deactivated">({{ $t('users.invalidNickname') }})</span>
</span>
</div>
</router-link>
<span class="message-timestamp">{{ parseTimestamp(message.created_at) }}</span>
</div>
<div class="message-actions">
<el-dropdown trigger="click" @click.native.stop>
<el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
{{ $t('reports.messageModeration') }}<i class="el-icon-arrow-down el-icon--right"/>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
@click.native="deleteMessage()">
{{ $t('reports.deleteMessage') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="handleRouteChange()">
{{ $t('users.moderateUser') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
{{ message.created_at }}
</div>
</div>
<div class="message-body">
{{ message.content }}
<span class="message-content" v-html="message.content"/>
<div v-if="message.attachment" class="image">
<img :src="message.attachment.preview_url">
</div>
</div>
</el-card>
</template>
<script>
import moment from 'moment'
export default {
name: 'ChatMessage',
......@@ -48,15 +77,41 @@ export default {
methods: {
propertyExists(account, property) {
return account[property]
},
parseTimestamp(timestamp) {
return moment(timestamp).format('YYYY-MM-DD HH:mm')
},
deleteMessage() {
this.$confirm('Are you sure you want to delete this message?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
this.$store.dispatch('DeleteMessage', {
chat_id: this.message.chat_id,
message_id: this.message.id
})
this.$message({
type: 'success',
message: 'Delete completed'
})
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
})
})
},
handleRouteChange() {
this.$router.push({ name: 'UsersShow', params: { id: this.author.id }})
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
.chat-card {
.message-card {
margin-bottom: 10px;
cursor: pointer;
.account {
line-height: 26px;
font-size: 13px;
......@@ -82,61 +137,55 @@ export default {
.show-more-button {
margin-left: 5px;
}
.chat-account {
.message-author {
display: flex;
align-items: center;
}
.chat-avatar-img {
.message-author-avatar-img {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
}
.chat-account-name {
.message-author-name {
display: inline-block;
margin: 0;
font-size: 15px;
font-weight: 500;
}
.chat-body {
.message-body {
display: flex;
flex-direction: column;
}
.chat-card-header {
.message-card-header {
display: flex;
align-items: center;
}
.chat-checkbox {
margin-right: 7px;
}
.chat-content {
font-size: 15px;
line-height: 26px;
}
.chat-created-at {
.message-timestamp {
font-size: 13px;
color: #606266;
margin-left: 20px;
}
.chat-deleted {
.message-deleted {
font-style: italic;
margin-top: 3px;
}
.chat-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-header {
.message-header {
display: flex;
justify-content: space-between;
align-items: center;
.message-meta {
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
}
.chat-tags {
display: inline;
}
.chat-without-content {
font-style: italic;
}
}
@media only screen and (max-width:480px) {
......@@ -146,35 +195,39 @@ export default {
.el-message-box {
width: 80%;
}
.chat-card {
.message-card {
.el-card__header {
padding: 10px 17px;
}
.el-tag {
margin: 3px 0;
}
.chat-account-container {
.message-author-container {
margin-bottom: 5px;
}
.chat-actions-button {
.message-action-buttons {
margin: 3px 0 3px;
}
.chat-actions {
.message-actions {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.chat-footer {
flex-direction: column;
align-items: flex-start;
margin-top: 10px;
}
.chat-header {
.message-header {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
.message-actions-button {
margin: 3px 0 3px;
}
.message-actions {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
</style>
src/lang/en.js
+ 3
− 0
View file @ 0153bb98
......@@ -382,6 +382,7 @@ export default {
unlisted: 'Make status unlisted',
sensitive: 'Sensitive',
deleteStatus: 'Delete status',
deleteMessage: 'Delete message',
reportOn: 'Report on',
reportsOn: 'Reports on',
id: 'ID',
......@@ -391,6 +392,8 @@ export default {
content: 'Content',
reportedStatus: 'Reported status',
statusDeleted: 'This status has been deleted',
messageDeleted: 'This message has been deleted',
messageModeration: 'Message options',
leaveNote: 'Leave a note',
postNote: 'Send',
deleteNote: 'Delete',
......
src/store/modules/chat.js
+ 5
− 1
View file @ 0153bb98
import { fetchChat, fetchChatMessages } from '@/api/chat'
import { fetchChat, fetchChatMessages, deleteChatMessage } from '@/api/chat'
const chat = {
state: {
......@@ -30,6 +30,10 @@ const chat = {
const chat = await fetchChatMessages(id, getters.authHost, getters.token)
commit('SET_CHAT_MESSAGES', chat.data)
commit('SET_LOADING', false)
},
async DeleteMessage({ commit, dispatch, getters, state }, params) {
await deleteChatMessage(params.chat_id, params.message_id, getters.authHost, getters.token)
dispatch('FetchChatMessages', params.chat_id)
}
}
}
......
src/views/chats/show.vue
+ 65
− 150
View file @ 0153bb98
<template>
<div v-if="!loading" class="chat-show-container">
<header v-if="isDesktop || isTablet" class="user-page-header">
<div class="avatar-name-container"/>
<header v-if="isDesktop || isTablet" class="chat-page-header">
<h1>
{{ $t('chats.chatHistory') }}:
</h1>
<div class="chat-card-participants">
<div class="chat-particiants-sender">
<div class="avatar-name-container">
<el-avatar v-if="propertyExists(chat.sender, 'avatar')" :src="chat.sender.avatar" size="large" />
<h1 v-if="propertyExists(chat.sender, 'display_name')" class="particiant-display-name">{{ chat.sender.display_name }}</h1>
<h1 v-else class="particiant-display-name invalid">({{ $t('users.invalidNickname') }})</h1>
<a v-if="propertyExists(chat.sender, 'url')" :href="chat.sender.url" target="_blank">
<i :title="$t('userProfile.openAccountInInstance')" class="el-icon-top-right"/>
</a>
</div>
</div>
<div class="chat-particiants-receiver">
<div class="avatar-name-container">
<el-avatar v-if="propertyExists(chat.receiver, 'avatar')" :src="chat.receiver.avatar" size="large" />
<h1 v-if="propertyExists(chat.receiver, 'display_name')" class="particiant-display-name">{{ chat.receiver.display_name }}</h1>
<h1 v-else class="particiant-display-name invalid">({{ $t('users.invalidNickname') }})</h1>
<a v-if="propertyExists(chat.receiver, 'url')" :href="chat.receiver.url" target="_blank">
<i :title="$t('userProfile.openAccountInInstance')" class="el-icon-top-right"/>
</a>
</div>
</div>
</div>
</header>
<div v-if="isMobile" class="chat-page-header-container">
<header class="user-page-header">
<header class="chat-page-header">
<div class="avatar-name-container"/>
<reboot-button/>
</header>
</div>
<div class="chat-container">
<div class="chat-card-header">
<h1>
{{ $t('chats.chatHistory') }}
</h1>
<div class="chat-card-participants">
<div class="chat-particiants-sender">
<img v-if="propertyExists(chat.sender, 'avatar')" :src="chat.sender.avatar" class="chat-avatar-img">
<span v-if="propertyExists(chat.sender, 'username')" class="chat-account-name">{{ chat.sender.username }}</span>
<span v-else>
<span v-if="propertyExists(chat.sender, 'username')" class="chat-account-name">
{{ chat.sender.username }}
</span>
<span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
</span>
</div>
<div class="chat-particiants-receiver">
<img v-if="propertyExists(chat.receiver, 'avatar')" :src="chat.receiver.avatar" class="chat-avatar-img">
<span v-if="propertyExists(chat.receiver, 'username')" class="chat-account-name">{{ chat.receiver.username }}</span>
<span v-else>
<span v-if="propertyExists(chat.receiver, 'username')" class="chat-account-name">
{{ chat.receiver.username }}
</span>
<span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
</span>
</div>
</div>
</div>
<div class="chat-messages-container">
<div class="chat-messages">
<div v-for="message in chatMessages" :key="message.id" class="">
<el-timeline v-if="!loading" class="messages">
<el-timeline-item v-for="message in chatMessages" :key="message.id">
<chat-message :message="message" :author="getAuthor(message.account_id)"/>
</div>
</div>
</el-timeline-item>
<p v-if="chatMessages.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
</el-timeline>
</div>
</div>
......@@ -101,7 +99,20 @@ export default {
</script>
<style rel='stylesheet/scss' lang='scss'>
.chat-page-header {
display: flex;
margin: 22px 15px 22px 20px;
padding: 0;
h1 {
display: inline
}
}
.chat-card-participants {
display: flex;
margin: 0 20px;
}
.avatar-name-container {
padding-right: 20px;
display: flex;
align-items: center;
.el-icon-top-right {
......@@ -109,47 +120,29 @@ export default {
line-height: 36px;
color: #606266;
}
.particiant-display-name {
padding-left: 5px;
}
}
.avatar-name-header {
display: flex;
height: 40px;
align-items: center;
.el-avatar h1 {
padding-right: 5px;
}
.invalid {
color: gray;
.chat-messages-container {
display: flex;
flex-direction: column;
max-width: 1000px;
.el-timeline-item {
margin-left: 20px;
}
}
.no-chats {
margin-left: 28px;
color: #606266;
}
.password-reset-token {
margin: 0 0 14px 0;
}
.password-reset-token-dialog {
width: 50%
}
.reboot-button {
padding: 10px;
margin-left: 6px;
}
.recent-chats-container-show {
display: flex;
flex-direction: column;
.el-timeline-item {
margin-left: 20px;
}
.recent-chats {
margin-left: 20px;
}
.show-private-chats {
margin-left: 20px;
margin-bottom: 20px;
}
}
.reset-password-link {
text-decoration: underline;
}
.router-link {
text-decoration: none;
}
......@@ -159,103 +152,25 @@ export default {
.chats {
padding: 0 20px 0 0;
}
.user-page-header {
display: flex;
justify-content: space-between;
margin: 22px 15px 22px 20px;
padding: 0;
align-items: center;
h1 {
display: inline;
margin: 0 0 0 10px;
}
}
@media only screen and (min-width: 1824px) {
.chat-show-container {
max-width: 1824px;
margin: auto;
}
}
@media only screen and (max-width:480px) {
.chat-page-header {
padding: 0;
margin: 7px 15px 15px 10px;
}
.avatar-name-container {
margin-bottom: 10px;
}
.el-timeline-item__wrapper {
padding-left: 18px;
}
.left-header-container {
align-items: center;
display: flex;
justify-content: space-between;
}
.password-reset-token-dialog {
width: 85%
}
.recent-chats {
margin: 20px 10px 15px 10px;
}
.recent-chats-container-show {
width: 100%;
margin: 0 0 0 10px;
.el-timeline-item {
margin-left: 0;
}
.recent-chats {
margin-left: 0;
}
.show-private-chats {
margin: 0 10px 20px 0;
}
}
.chat-card {
.el-card__body {
padding: 15px;
}
}
.chat-container {
margin: 0 10px;
}
.chats {
padding-right: 10px;
margin-left: 0;
.el-timeline-item__wrapper {
margin-right: 10px;
}
}
.user-page-header {
padding: 0;
margin: 7px 15px 5px 10px;
}
.chat-page-header-container {
width: 100%;
.el-dropdown {
width: stretch;
margin: 0 10px 15px 10px;
}
}
}
@media only screen and (max-width:801px) and (min-width: 481px) {
.recent-chats-container-show {
width: 97%;
margin: 0 20px;
.el-timeline-item {
margin-left: 2px;
}
.recent-chats {
margin: 20px 10px 15px 0;
}
.show-private-chats {
margin: 0 10px 20px 0;
}
}
.show-private-chats {
margin: 0 10px 20px 0;
}
.user-page-header {
padding: 0;
margin: 7px 15px 20px 20px;
}
}
</style>
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