mirror of
https://github.com/kuaifan/dootask.git
synced 2026-03-03 07:37:05 +00:00
no message
This commit is contained in:
kuaifan
parent
8893254664
commit
572415d089
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="chat-input-wrapper" :class="modeClass">
|
||||
<div ref="editor"></div>
|
||||
<div class="chat-input-toolbar">
|
||||
<Loading v-if="loading"/>
|
||||
<Icon v-else :class="[value ? '' : 'disabled']" type="md-send" @click="send"/>
|
||||
<slot name="toolbarAfter"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -33,6 +38,10 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
enterSend: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@ -118,7 +127,7 @@ export default {
|
||||
shortKey: true,
|
||||
handler: _ => {
|
||||
if (!this.enterSend) {
|
||||
this.$emit('on-send', this.quill)
|
||||
this.send();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
@ -129,7 +138,7 @@ export default {
|
||||
shiftKey: false,
|
||||
handler: _ => {
|
||||
if (this.enterSend) {
|
||||
this.$emit('on-send', this.quill)
|
||||
this.send();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
@ -230,6 +239,10 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
send() {
|
||||
this.$emit('on-send', this.quill)
|
||||
},
|
||||
|
||||
getSource(mentionChar) {
|
||||
return new Promise(resolve => {
|
||||
switch (mentionChar) {
|
||||
|
||||
@ -82,19 +82,18 @@
|
||||
</ScrollerY>
|
||||
<div :class="['dialog-footer', msgNew > 0 && dialogMsgList.length > 0 ? 'newmsg' : '']" @click="onActive">
|
||||
<div class="dialog-newmsg" @click="onToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
|
||||
<slot name="inputBefore"/>
|
||||
<ChatInput
|
||||
ref="input"
|
||||
class="dialog-input"
|
||||
:dialog-id="dialogId"
|
||||
v-model="msgText"
|
||||
:maxlength="20000"
|
||||
@on-focus="onEventFocus"
|
||||
@on-blur="onEventblur"
|
||||
@on-send="sendMsg"
|
||||
:placeholder="$L('输入消息...')"/>
|
||||
<div v-if="msgText != ''" class="dialog-send" @click="sendMsg">
|
||||
<Icon type="md-send" />
|
||||
<div class="dialog-input">
|
||||
<slot name="inputBefore"/>
|
||||
<ChatInput
|
||||
ref="input"
|
||||
:dialog-id="dialogId"
|
||||
v-model="msgText"
|
||||
:maxlength="20000"
|
||||
@on-focus="onEventFocus"
|
||||
@on-blur="onEventblur"
|
||||
@on-send="sendMsg"
|
||||
:placeholder="$L('输入消息...')"/>
|
||||
<slot name="inputAfter"/>
|
||||
</div>
|
||||
<DialogUpload
|
||||
ref="chatUpload"
|
||||
|
||||
@ -399,20 +399,15 @@
|
||||
<div class="no-tip">{{$L('暂无消息')}}</div>
|
||||
<div class="no-input">
|
||||
<ChatInput
|
||||
class="dialog-input"
|
||||
:task-id="taskId"
|
||||
v-model="msgText"
|
||||
:disabled="sendLoad > 0"
|
||||
:loading="sendLoad > 0"
|
||||
:maxlength="20000"
|
||||
:placeholder="$L('输入消息...')"
|
||||
@on-send="msgDialog"/>
|
||||
<div class="no-send" @click="msgDialog">
|
||||
<Loading v-if="sendLoad > 0"/>
|
||||
<template v-else>
|
||||
<Badge :count="taskDetail.msg_num"/>
|
||||
<Icon type="md-send" />
|
||||
</template>
|
||||
</div>
|
||||
@on-send="msgDialog">
|
||||
<Badge slot="toolbarAfter" :count="taskDetail.msg_num"/>
|
||||
</ChatInput>
|
||||
</div>
|
||||
<div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
|
||||
<div class="drag-text">{{$L('拖动到这里发送')}}</div>
|
||||
@ -1090,7 +1085,7 @@ export default {
|
||||
};
|
||||
this.msgFile = [];
|
||||
this.msgText = "";
|
||||
this.goForward({name: 'manage-messenger', params: {dialogId: data.dialog_id}});
|
||||
this.goForward({name: 'manage-messenger', params: {dialogId: data.dialog_id}, query: {_: $A.randomString(6)}});
|
||||
this.$store.dispatch('openTask', 0);
|
||||
} else {
|
||||
this.sendDialogMsg();
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
<em v-if="dialog.last_at">{{$A.formatTime(dialog.last_at)}}</em>
|
||||
</div>
|
||||
<div class="dialog-text no-dark-mode">
|
||||
<template v-if="dialog.type=='group'">
|
||||
<template v-if="dialog.type=='group' && dialog.last_msg">
|
||||
<div v-if="dialog.last_msg.userid == userId" class="last-self">{{$L('您')}}</div>
|
||||
<UserAvatar v-else :userid="dialog.last_msg.userid" :show-name="true" :show-icon="false"/>
|
||||
</template>
|
||||
|
||||
@ -6,169 +6,199 @@
|
||||
width: 100%;
|
||||
|
||||
&.task-mention {
|
||||
.ql-container {
|
||||
.ql-mention-list-container {
|
||||
.ql-mention-list {
|
||||
> li {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ql-mention-list-item {
|
||||
line-height: 36px;
|
||||
.mention-item-disabled {
|
||||
padding: 8px 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
display: block;
|
||||
float: left;
|
||||
max-width: 100%;
|
||||
min-width: calc(100% - 28px);
|
||||
|
||||
.ql-editor {
|
||||
padding: 4px 7px;
|
||||
font-size: 14px;
|
||||
max-height: 200px;
|
||||
|
||||
img {
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
&.ql-blank {
|
||||
&::before {
|
||||
left: 7px;
|
||||
right: 7px;
|
||||
color: #ccc;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-mention-list-container {
|
||||
width: auto;
|
||||
min-width: 220px;
|
||||
max-width: 350px;
|
||||
max-height: 360px;
|
||||
overflow-y: overlay;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb:hover {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.ql-mention-list {
|
||||
> li {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-mention-list-item {
|
||||
line-height: 36px;
|
||||
.mention-item-disabled {
|
||||
padding: 8px 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-editor {
|
||||
padding: 4px 7px;
|
||||
font-size: 14px;
|
||||
max-height: 200px;
|
||||
|
||||
img {
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
&.ql-blank {
|
||||
&::before {
|
||||
left: 7px;
|
||||
right: 7px;
|
||||
color: #ccc;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-mention-list-container {
|
||||
width: auto;
|
||||
min-width: 220px;
|
||||
max-width: 350px;
|
||||
max-height: 360px;
|
||||
overflow-y: overlay;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb:hover {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.ql-mention-list {
|
||||
> li {
|
||||
&:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-mention-list-item {
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 8px;
|
||||
|
||||
&.selected {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mention-item-at {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background-color: #8bcf70;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mention-item-img {
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 8px;
|
||||
|
||||
> img {
|
||||
&.selected {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mention-item-at {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background-color: #8bcf70;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> em {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff9900;
|
||||
border: 1px solid #ffffff;
|
||||
transform-origin: right bottom;
|
||||
z-index: 1;
|
||||
}
|
||||
.mention-item-img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.online {
|
||||
> em {
|
||||
background-color: $primary-color;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff9900;
|
||||
border: 1px solid #ffffff;
|
||||
transform-origin: right bottom;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.online {
|
||||
> em {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mention-item-name {
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mention-item-name {
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mention-item-tip {
|
||||
color: #8f8f8e;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mention-item-tip {
|
||||
color: #8f8f8e;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mention-item-disabled {
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
line-height: 40px;
|
||||
.mention-item-disabled {
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
float: right;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 2px;
|
||||
.common-loading {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
> i {
|
||||
font-size: 18px;
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -550,21 +550,16 @@
|
||||
}
|
||||
|
||||
.dialog-input {
|
||||
background-color: #F4F5F7;
|
||||
padding: 10px 52px 10px 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dialog-send {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 28px;
|
||||
bottom: 0;
|
||||
font-size: 18px;
|
||||
width: 46px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.chat-input-wrapper {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background-color: #F4F5F7;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-upload {
|
||||
|
||||
@ -68,8 +68,18 @@
|
||||
padding: 0 20px;
|
||||
}
|
||||
.dialog-footer {
|
||||
.dialog-back {
|
||||
display: none;
|
||||
.dialog-input {
|
||||
.dialog-back {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 100%;
|
||||
max-height: 64px;
|
||||
font-size: 26px;
|
||||
margin-left: -20px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -90,24 +100,11 @@
|
||||
padding: 0 20px;
|
||||
}
|
||||
.dialog-footer {
|
||||
position: relative;
|
||||
.dialog-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 64px;
|
||||
z-index: 1;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dialog-input {
|
||||
width: calc(100% - 44px);
|
||||
}
|
||||
.dialog-send {
|
||||
right: 22px;
|
||||
align-items: flex-end;
|
||||
.dialog-back {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -574,21 +574,13 @@
|
||||
background-color: #F4F5F7;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
.ivu-input {
|
||||
border: 0;
|
||||
resize: none;
|
||||
background-color: transparent;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.no-send {
|
||||
display: none;
|
||||
.chat-input-toolbar {
|
||||
position: relative;
|
||||
.ivu-badge {
|
||||
position: absolute;
|
||||
transform: scale(0.6);
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
top: -6px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -826,28 +818,5 @@
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
.task-dialog {
|
||||
.no-dialog {
|
||||
.no-input {
|
||||
position: relative;
|
||||
padding-right: 52px;
|
||||
.no-send {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 18px;
|
||||
width: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.common-loading {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
35
resources/assets/sass/pages/page-messenger.scss
vendored
35
resources/assets/sass/pages/page-messenger.scss
vendored
@ -352,8 +352,18 @@
|
||||
position: relative;
|
||||
.dialog-wrapper {
|
||||
.dialog-footer {
|
||||
.dialog-back {
|
||||
display: none;
|
||||
.dialog-input {
|
||||
.dialog-back {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 100%;
|
||||
max-height: 64px;
|
||||
font-size: 26px;
|
||||
margin-left: -20px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -415,24 +425,11 @@
|
||||
justify-content: center;
|
||||
}
|
||||
.dialog-footer {
|
||||
position: relative;
|
||||
.dialog-back {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 64px;
|
||||
height: 49px;
|
||||
z-index: 1;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dialog-input {
|
||||
width: calc(100% - 44px);
|
||||
}
|
||||
.dialog-send {
|
||||
right: 22px;
|
||||
align-items: flex-end;
|
||||
.dialog-back {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user