Skip to content

foreign / customer-service

Go to a project
Commit 3347be3d by Sixong.Zhu
Options

style

parent eca55214
Inline Side-by-side
Showing with 59 additions and 51 deletions
components/message-item/file-message.vue
<template> <template>
<div class="msg-detail file-message d-flex" @dblclick="openFile"> <div class="msg-detail file-message d-flex" @dblclick="openFile">
<div class="file-message-info">
<div <div
class="text-nowrap text-truncate file-message-name" class="file-message-info"
:class="{ 'd-flex align-items-center': !messageBody.msg.size }"
>
<div
class="file-message-name"
:title="messageBody.msg.name" :title="messageBody.msg.name"
:class="{ 'text-truncate': messageBody.msg.size }"
> >
{{ messageBody.msg.name }} {{ messageBody.msg.name }}
</div> </div>
<div class="text-hint"> <div class="text-hint" v-if="messageBody.msg.size">
{{ format(messageBody.msg.size) }} {{ format(messageBody.msg.size) }}
</div> </div>
</div> </div>
......
components/message.vue
...@@ -108,32 +108,32 @@ ...@@ -108,32 +108,32 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Inject, Prop, Vue } from "vue-property-decorator"; import { Component, Inject, Prop, Vue } from "vue-property-decorator";
import * as dto from "../model"; import * as dto from "../model";
import chat from "./../xim"; import chat from "./../xim";
import { import {
isAudio, isAudio,
isImage, isImage,
isVideo, isVideo,
MAX_FILE_SIZE, MAX_FILE_SIZE,
MAX_IMAGE_SIZE, MAX_IMAGE_SIZE,
} from "./message-item/file-controller"; } from "./message-item/file-controller";
import WhoReadList from "./who-read-list.vue"; import WhoReadList from "./who-read-list.vue";
import avatar from "@/customer-service/components/avatar.vue"; import avatar from "@/customer-service/components/avatar.vue";
import { chatStore, ChatStore } from "@/customer-service/store/model"; import { chatStore, ChatStore } from "@/customer-service/store/model";
import ximInstance from "../xim/xim"; import ximInstance from "../xim/xim";
import { dbController } from "../database"; import { dbController } from "../database";
import ImageMessage from "./message-item/image-message.vue"; import ImageMessage from "./message-item/image-message.vue";
import FileMessage from "./message-item/file-message.vue"; import FileMessage from "./message-item/file-message.vue";
import AudioMessage from "./message-item/audio-message.vue"; import AudioMessage from "./message-item/audio-message.vue";
import VideoMessage from "./message-item/video-message.vue"; import VideoMessage from "./message-item/video-message.vue";
import TextMessage from "./message-item/text-message.vue"; import TextMessage from "./message-item/text-message.vue";
import WithdrawMessage from "./message-item/withdraw-message.vue"; import WithdrawMessage from "./message-item/withdraw-message.vue";
import xim from "./../xim"; import xim from "./../xim";
const twoMinutes = 2 * 60 * 1000; const twoMinutes = 2 * 60 * 1000;
const messageMapping = new Map<dto.MessageType, string>([ const messageMapping = new Map<dto.MessageType, string>([
[dto.MessageType.Image, "image-message"], [dto.MessageType.Image, "image-message"],
[dto.MessageType.File, "file-message"], [dto.MessageType.File, "file-message"],
[dto.MessageType.Video, "video-message"], [dto.MessageType.Video, "video-message"],
...@@ -141,9 +141,9 @@ const messageMapping = new Map<dto.MessageType, string>([ ...@@ -141,9 +141,9 @@ const messageMapping = new Map<dto.MessageType, string>([
[dto.MessageType.Text, "text-message"], [dto.MessageType.Text, "text-message"],
[dto.MessageType.Withdraw, "withdraw-message"], [dto.MessageType.Withdraw, "withdraw-message"],
[dto.MessageType.GeneralOrderMsg, "text-message"], [dto.MessageType.GeneralOrderMsg, "text-message"],
]); ]);
@Component({ @Component({
components: { components: {
WhoReadList, WhoReadList,
avatar, avatar,
...@@ -154,8 +154,8 @@ const messageMapping = new Map<dto.MessageType, string>([ ...@@ -154,8 +154,8 @@ const messageMapping = new Map<dto.MessageType, string>([
TextMessage, TextMessage,
WithdrawMessage, WithdrawMessage,
}, },
}) })
export default class Message extends Vue { export default class Message extends Vue {
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_USER_UID) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_USER_UID)
private readonly chatMyId!: ChatStore.STATE_CHAT_CURRENT_USER_UID; private readonly chatMyId!: ChatStore.STATE_CHAT_CURRENT_USER_UID;
...@@ -386,11 +386,11 @@ export default class Message extends Vue { ...@@ -386,11 +386,11 @@ export default class Message extends Vue {
private closeKeywordPopover() { private closeKeywordPopover() {
document.body.click(); document.body.click();
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.message-con { .message-con {
padding-bottom: 20px; padding-bottom: 20px;
margin-right: 15px; margin-right: 15px;
position: relative; position: relative;
...@@ -431,6 +431,10 @@ export default class Message extends Vue { ...@@ -431,6 +431,10 @@ export default class Message extends Vue {
display: inline-block; display: inline-block;
} }
} }
/deep/ .file-message-info {
text-align: initial;
}
} }
&.offset-bottom { &.offset-bottom {
...@@ -442,9 +446,9 @@ export default class Message extends Vue { ...@@ -442,9 +446,9 @@ export default class Message extends Vue {
font-size: 16px; font-size: 16px;
margin-right: 10px; margin-right: 10px;
} }
} }
.msg-name { .msg-name {
font-size: 14px; font-size: 14px;
color: #888; color: #888;
text-align: right; text-align: right;
...@@ -453,16 +457,16 @@ export default class Message extends Vue { ...@@ -453,16 +457,16 @@ export default class Message extends Vue {
&.algin-left { &.algin-left {
text-align: left; text-align: left;
} }
} }
.msg-content { .msg-content {
text-align: right; text-align: right;
&.algin-left { &.algin-left {
text-align: left; text-align: left;
} }
} }
.msg-detail { .msg-detail {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
...@@ -473,9 +477,9 @@ export default class Message extends Vue { ...@@ -473,9 +477,9 @@ export default class Message extends Vue {
/deep/ img { /deep/ img {
max-width: 300px; max-width: 300px;
} }
} }
.download-icon { .download-icon {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
margin-left: 15px; margin-left: 15px;
...@@ -485,21 +489,21 @@ export default class Message extends Vue { ...@@ -485,21 +489,21 @@ export default class Message extends Vue {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }
} }
.no-selection { .no-selection {
user-select: none; user-select: none;
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.all { .all {
color: #4389f8; color: #4389f8;
} }
.match-keyword { .match-keyword {
background-color: #fff3e0; background-color: #fff3e0;
border-radius: 13px; border-radius: 13px;
padding: 3px 8px; padding: 3px 8px;
...@@ -525,9 +529,9 @@ export default class Message extends Vue { ...@@ -525,9 +529,9 @@ export default class Message extends Vue {
i { i {
margin-right: 5px; margin-right: 5px;
} }
} }
.keyword-action { .keyword-action {
list-style: none; list-style: none;
li { li {
...@@ -540,11 +544,11 @@ export default class Message extends Vue { ...@@ -540,11 +544,11 @@ export default class Message extends Vue {
background-color: #f5f6fa; background-color: #f5f6fa;
} }
} }
} }
</style> </style>
<style lang="less"> <style lang="less">
.match-keyword-popover { .match-keyword-popover {
padding: 0; padding: 0;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment