no message
This commit is contained in:
parent
11a86c0cdd
commit
c6285c57c8
@ -19,7 +19,7 @@
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'MessageUpload',
|
||||
name: 'DialogUpload',
|
||||
props: {
|
||||
maxSize: {
|
||||
type: Number,
|
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="message-view" :data-id="msgData.id">
|
||||
<div class="dialog-view" :data-id="msgData.id">
|
||||
|
||||
<!--文本-->
|
||||
<div v-if="msgData.type === 'text'" class="message-content" v-html="textMsg(msgInfo.text)"></div>
|
||||
<div v-if="msgData.type === 'text'" class="dialog-content" v-html="textMsg(msgInfo.text)"></div>
|
||||
<!--等待-->
|
||||
<div v-else-if="msgData.type === 'loading'" class="message-content loading"><Loading/></div>
|
||||
<div v-else-if="msgData.type === 'loading'" class="dialog-content loading"><Loading/></div>
|
||||
<!--文件-->
|
||||
<div v-else-if="msgData.type === 'file'" :class="['message-content', msgInfo.type]">
|
||||
<div v-else-if="msgData.type === 'file'" :class="['dialog-content', msgInfo.type]">
|
||||
<a :href="msgInfo.url" target="_blank">
|
||||
<img v-if="msgInfo.type === 'img'" class="file-img" :style="imageStyle(msgInfo)" :src="msgInfo.thumb"/>
|
||||
<div v-else class="file-box">
|
||||
@ -19,10 +19,10 @@
|
||||
</a>
|
||||
</div>
|
||||
<!--未知-->
|
||||
<div v-else class="message-content unknown">{{$L("未知的消息类型")}}</div>
|
||||
<div v-else class="dialog-content unknown">{{$L("未知的消息类型")}}</div>
|
||||
|
||||
<!--时间/阅读-->
|
||||
<div v-if="msgData.created_at" class="message-foot">
|
||||
<div v-if="msgData.created_at" class="dialog-foot">
|
||||
<div class="time">{{formatTime(msgData.created_at)}}</div>
|
||||
<Poptip
|
||||
v-if="msgData.send > 1 || dialogType == 'group'"
|
||||
@ -32,7 +32,7 @@
|
||||
:width="360"
|
||||
:offset="8"
|
||||
@on-popper-show="popperShow">
|
||||
<div slot="content" class="message-readbox">
|
||||
<div slot="content" class="dialog-readbox">
|
||||
<ul class="read">
|
||||
<li class="read-title"><em>{{readList.length}}</em>{{$L('已读')}}</li>
|
||||
<li v-for="item in readList"><UserAvatar :userid="item.userid" :size="26" show-name/></li>
|
||||
@ -47,7 +47,7 @@
|
||||
<Icon v-else-if="msgData.percentage === 100" class="done" type="md-done-all"/>
|
||||
<Icon v-else class="done" type="md-checkmark"/>
|
||||
</div>
|
||||
<div v-else class="message-foot"><Loading/></div>
|
||||
<div v-else class="dialog-foot"><Loading/></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -57,7 +57,7 @@ import {mapState} from "vuex";
|
||||
import WCircle from "../../../components/WCircle";
|
||||
|
||||
export default {
|
||||
name: "MessageView",
|
||||
name: "DialogView",
|
||||
components: {WCircle},
|
||||
props: {
|
||||
msgData: {
|
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="$store.state.projectChatShow"
|
||||
class="project-message"
|
||||
class="project-dialog"
|
||||
@drop.prevent="chatPasteDrag($event, 'drag')"
|
||||
@dragover.prevent="chatDragOver(true)"
|
||||
@dragleave.prevent="chatDragOver(false)">
|
||||
<div class="group-member">
|
||||
<div class="dialog-user">
|
||||
<div class="member-head">
|
||||
<div class="member-title">{{$L('项目成员')}}<span>({{projectDetail.project_user.length}})</span></div>
|
||||
<div class="member-view-all" @click="memberShowAll=!memberShowAll">{{$L('查看所有')}}</div>
|
||||
@ -16,26 +16,26 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="group-title">{{$L('群聊')}}</div>
|
||||
<ScrollerY ref="groupChat" class="group-chat message-scroller" @on-scroll="chatScroll">
|
||||
<div ref="manageList" class="message-list">
|
||||
<div class="dialog-title">{{$L('群聊')}}</div>
|
||||
<ScrollerY class="dialog-chat dialog-scroller" @on-scroll="chatScroll">
|
||||
<div ref="manageList" class="dialog-list">
|
||||
<ul>
|
||||
<li v-if="dialogLoad > 0" class="loading"><Loading/></li>
|
||||
<li v-else-if="dialogList.length === 0" class="nothing">{{$L('暂无消息')}}</li>
|
||||
<li v-for="(item, key) in dialogList" :key="key" :class="{self:item.userid == userId}">
|
||||
<div class="message-avatar">
|
||||
<div class="dialog-avatar">
|
||||
<UserAvatar :userid="item.userid" :size="30"/>
|
||||
</div>
|
||||
<MessageView :msg-data="item" dialog-type="group"/>
|
||||
<DialogView :msg-data="item" dialog-type="group"/>
|
||||
</li>
|
||||
<li ref="bottom" class="bottom"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollerY>
|
||||
<div :class="['group-footer', msgNew > 0 ? 'newmsg' : '']">
|
||||
<div class="group-newmsg" @click="goNewBottom">{{$L('有' + msgNew + '条新消息')}}</div>
|
||||
<DragInput class="group-input" v-model="msgText" type="textarea" :rows="1" :autosize="{ minRows: 1, maxRows: 3 }" :maxlength="255" @on-keydown="chatKeydown" @on-input-paste="pasteDrag" :placeholder="$L('输入消息...')" />
|
||||
<MessageUpload
|
||||
<div :class="['dialog-footer', msgNew > 0 ? 'newmsg' : '']">
|
||||
<div class="dialog-newmsg" @click="goNewBottom">{{$L('有' + msgNew + '条新消息')}}</div>
|
||||
<DragInput class="dialog-input" v-model="msgText" type="textarea" :rows="1" :autosize="{ minRows: 1, maxRows: 3 }" :maxlength="255" @on-keydown="chatKeydown" @on-input-paste="pasteDrag" :placeholder="$L('输入消息...')" />
|
||||
<DialogUpload
|
||||
ref="chatUpload"
|
||||
class="chat-upload"
|
||||
@on-progress="chatFile('progress', $event)"
|
||||
@ -50,9 +50,9 @@
|
||||
|
||||
<style lang="scss">
|
||||
:global {
|
||||
.project-message {
|
||||
.group-footer {
|
||||
.group-input {
|
||||
.project-dialog {
|
||||
.dialog-footer {
|
||||
.dialog-input {
|
||||
background-color: #F4F5F7;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
@ -71,12 +71,12 @@
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.project-message {
|
||||
.project-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
z-index: 1;
|
||||
.group-member {
|
||||
.dialog-user {
|
||||
margin-top: 36px;
|
||||
padding: 0 32px;
|
||||
.member-head {
|
||||
@ -119,24 +119,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-title {
|
||||
.dialog-title {
|
||||
padding: 0 32px;
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.group-chat {
|
||||
.dialog-chat {
|
||||
flex: 1;
|
||||
padding: 0 32px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.group-footer {
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding: 0 28px;
|
||||
margin-bottom: 20px;
|
||||
.group-newmsg {
|
||||
.dialog-newmsg {
|
||||
display: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
@ -158,7 +158,7 @@
|
||||
}
|
||||
&.newmsg {
|
||||
margin-top: -50px;
|
||||
.group-newmsg {
|
||||
.dialog-newmsg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -198,12 +198,12 @@
|
||||
import DragInput from "../../../components/DragInput";
|
||||
import ScrollerY from "../../../components/ScrollerY";
|
||||
import {mapState} from "vuex";
|
||||
import MessageView from "./message-view";
|
||||
import MessageUpload from "./message-upload";
|
||||
import DialogView from "./DialogView";
|
||||
import DialogUpload from "./DialogUpload";
|
||||
|
||||
export default {
|
||||
name: "ProjectMessage",
|
||||
components: {MessageUpload, MessageView, ScrollerY, DragInput},
|
||||
name: "ProjectDialog",
|
||||
components: {DialogUpload, DialogView, ScrollerY, DragInput},
|
||||
data() {
|
||||
return {
|
||||
autoBottom: true,
|
@ -826,8 +826,8 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import TaskPriority from "./task-priority";
|
||||
import TaskAdd from "./task-add";
|
||||
import TaskPriority from "./TaskPriority";
|
||||
import TaskAdd from "./TaskAdd";
|
||||
import {mapState} from "vuex";
|
||||
import UserInput from "../../../components/UserInput";
|
||||
export default {
|
17
resources/assets/js/pages/manage/dialog.vue
Normal file
17
resources/assets/js/pages/manage/dialog.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="calendar">
|
||||
<PageTitle>{{$L('Calendar')}}</PageTitle>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
@ -2,7 +2,7 @@
|
||||
<div class="project-detail">
|
||||
<PageTitle>{{ $L('项目面板') }}</PageTitle>
|
||||
<ProjectList/>
|
||||
<ProjectMessage/>
|
||||
<ProjectDialog/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.project-message {
|
||||
.project-dialog {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
@ -39,10 +39,10 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import ProjectList from "./components/project-list";
|
||||
import ProjectMessage from "./components/project-message";
|
||||
import ProjectList from "./components/ProjectList";
|
||||
import ProjectDialog from "./components/ProjectDialog";
|
||||
export default {
|
||||
components: {ProjectMessage, ProjectList},
|
||||
components: {ProjectDialog, ProjectList},
|
||||
data() {
|
||||
return {
|
||||
project_id: 0,
|
||||
|
20
resources/assets/sass/main.scss
vendored
20
resources/assets/sass/main.scss
vendored
@ -686,10 +686,10 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.message-scroller {
|
||||
.dialog-scroller {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
.message-list {
|
||||
.dialog-list {
|
||||
> ul {
|
||||
> li {
|
||||
display: flex;
|
||||
@ -697,18 +697,18 @@ body {
|
||||
align-items: flex-end;
|
||||
list-style: none;
|
||||
margin-bottom: 16px;
|
||||
.message-avatar {
|
||||
.dialog-avatar {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.message-view {
|
||||
.dialog-view {
|
||||
max-width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 0 0 0 8px;
|
||||
.message-content {
|
||||
.dialog-content {
|
||||
color: #333333;
|
||||
background-color: #F4F5F7;
|
||||
padding: 8px;
|
||||
@ -773,7 +773,7 @@ body {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.message-foot {
|
||||
.dialog-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 4px;
|
||||
@ -825,10 +825,10 @@ body {
|
||||
}
|
||||
&.self {
|
||||
flex-direction: row-reverse;
|
||||
.message-view {
|
||||
.dialog-view {
|
||||
align-items: flex-end;
|
||||
margin: 0 8px 0 0;
|
||||
.message-content {
|
||||
.dialog-content {
|
||||
color: #ffffff;
|
||||
background-color: #2d8cf0;
|
||||
border-radius: 6px 6px 0 6px;
|
||||
@ -840,7 +840,7 @@ body {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.message-foot {
|
||||
.dialog-foot {
|
||||
.done {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -855,7 +855,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.message-readbox {
|
||||
.dialog-readbox {
|
||||
display: flex;
|
||||
position: relative;
|
||||
.read,
|
||||
|
Loading…
x
Reference in New Issue
Block a user