github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-17 19:23:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
kuaifan 2022-04-16 12:46:38 +08:00
parent 8893254664
commit 572415d089
9 changed files with 245 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
resources/assets/js/pages/manage/components/ChatInput.vue
View File

@ -1,6 +1,11 @@
<template> <template>
<div class="chat-input-wrapper" :class="modeClass"> <div class="chat-input-wrapper" :class="modeClass">
<div ref="editor"></div> <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> </div>
</template> </template>
@ -33,6 +38,10 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
loading: {
type: Boolean,
default: false
},
enterSend: { enterSend: {
type: Boolean, type: Boolean,
default: true default: true
@ -118,7 +127,7 @@ export default {
shortKey: true, shortKey: true,
handler: _ => { handler: _ => {
if (!this.enterSend) { if (!this.enterSend) {
this.$emit('on-send', this.quill) this.send();
return false; return false;
} }
return true; return true;
@ -129,7 +138,7 @@ export default {
shiftKey: false, shiftKey: false,
handler: _ => { handler: _ => {
if (this.enterSend) { if (this.enterSend) {
this.$emit('on-send', this.quill) this.send();
return false; return false;
} }
return true; return true;
@ -230,6 +239,10 @@ export default {
}) })
}, },
send() {
this.$emit('on-send', this.quill)
},
getSource(mentionChar) { getSource(mentionChar) {
return new Promise(resolve => { return new Promise(resolve => {
switch (mentionChar) { switch (mentionChar) {

25
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -82,19 +82,18 @@
</ScrollerY> </ScrollerY>
<div :class="['dialog-footer', msgNew > 0 && dialogMsgList.length > 0 ? 'newmsg' : '']" @click="onActive"> <div :class="['dialog-footer', msgNew > 0 && dialogMsgList.length > 0 ? 'newmsg' : '']" @click="onActive">
<div class="dialog-newmsg" @click="onToBottom">{{$L('有' + msgNew + '条新消息')}}</div> <div class="dialog-newmsg" @click="onToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
<slot name="inputBefore"/> <div class="dialog-input">
<ChatInput <slot name="inputBefore"/>
ref="input" <ChatInput
class="dialog-input" ref="input"
:dialog-id="dialogId" :dialog-id="dialogId"
v-model="msgText" v-model="msgText"
:maxlength="20000" :maxlength="20000"
@on-focus="onEventFocus" @on-focus="onEventFocus"
@on-blur="onEventblur" @on-blur="onEventblur"
@on-send="sendMsg" @on-send="sendMsg"
:placeholder="$L('输入消息...')"/> :placeholder="$L('输入消息...')"/>
<div v-if="msgText != ''" class="dialog-send" @click="sendMsg"> <slot name="inputAfter"/>
<Icon type="md-send" />
</div> </div>
<DialogUpload <DialogUpload
ref="chatUpload" ref="chatUpload"

15
resources/assets/js/pages/manage/components/TaskDetail.vue
View File

@ -399,20 +399,15 @@
<div class="no-tip">{{$L('暂无消息')}}</div> <div class="no-tip">{{$L('暂无消息')}}</div>
<div class="no-input"> <div class="no-input">
<ChatInput <ChatInput
class="dialog-input"
:task-id="taskId" :task-id="taskId"
v-model="msgText" v-model="msgText"
:disabled="sendLoad > 0" :disabled="sendLoad > 0"
:loading="sendLoad > 0"
:maxlength="20000" :maxlength="20000"
:placeholder="$L('输入消息...')" :placeholder="$L('输入消息...')"
@on-send="msgDialog"/> @on-send="msgDialog">
<div class="no-send" @click="msgDialog"> <Badge slot="toolbarAfter" :count="taskDetail.msg_num"/>
<Loading v-if="sendLoad > 0"/> </ChatInput>
<template v-else>
<Badge :count="taskDetail.msg_num"/>
<Icon type="md-send" />
</template>
</div>
</div> </div>
<div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false"> <div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
<div class="drag-text">{{$L('拖动到这里发送')}}</div> <div class="drag-text">{{$L('拖动到这里发送')}}</div>
@ -1090,7 +1085,7 @@ export default {
}; };
this.msgFile = []; this.msgFile = [];
this.msgText = ""; 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); this.$store.dispatch('openTask', 0);
} else { } else {
this.sendDialogMsg(); this.sendDialogMsg();

2
resources/assets/js/pages/manage/messenger.vue
View File

@ -59,7 +59,7 @@
<em v-if="dialog.last_at">{{$A.formatTime(dialog.last_at)}}</em> <em v-if="dialog.last_at">{{$A.formatTime(dialog.last_at)}}</em>
</div> </div>
<div class="dialog-text no-dark-mode"> <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> <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"/> <UserAvatar v-else :userid="dialog.last_msg.userid" :show-name="true" :show-icon="false"/>
</template> </template>

306
resources/assets/sass/pages/components/chat-input.scss vendored
View File

@ -6,169 +6,199 @@
width: 100%; width: 100%;
&.task-mention { &.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 { .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 { .ql-mention-list {
> li { > li {
&:first-child { &:first-child {
margin-top: 0; margin-top: 8px;
}
&:last-child {
margin-bottom: 8px;
} }
} }
} }
.ql-mention-list-item { .ql-mention-list-item {
line-height: 36px; padding: 0 8px;
.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;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; margin: 0 8px;
> img { &.selected {
border-radius: 4px;
}
.mention-item-at {
width: 28px; width: 28px;
height: 28px; height: 28px;
line-height: 28px;
border-radius: 50%; border-radius: 50%;
text-align: center;
color: #ffffff;
background-color: #8bcf70;
overflow: hidden; overflow: hidden;
} }
> em { .mention-item-img {
position: absolute; position: relative;
right: 0; display: flex;
bottom: 0; align-items: center;
width: 8px; justify-content: center;
height: 8px;
border-radius: 50%; > img {
background-color: #ff9900; width: 28px;
border: 1px solid #ffffff; height: 28px;
transform-origin: right bottom; border-radius: 50%;
z-index: 1; overflow: hidden;
} }
&.online {
> em { > 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 { .mention-item-name {
padding: 0 8px; padding: 0 8px;
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.mention-item-tip { .mention-item-tip {
color: #8f8f8e; color: #8f8f8e;
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.mention-item-disabled { .mention-item-disabled {
color: #aaa; color: #aaa;
font-size: 12px; font-size: 12px;
padding: 0 4px; padding: 0 4px;
line-height: 40px; 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;
}
}
}
} }

21
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -550,21 +550,16 @@
} }
.dialog-input { .dialog-input {
background-color: #F4F5F7; width: 100%;
padding: 10px 52px 10px 12px;
border-radius: 10px;
}
.dialog-send {
position: absolute;
top: 0;
right: 28px;
bottom: 0;
font-size: 18px;
width: 46px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; .chat-input-wrapper {
flex: 1;
width: 0;
background-color: #F4F5F7;
padding: 10px 12px;
border-radius: 10px;
}
} }
.chat-upload { .chat-upload {

35
resources/assets/sass/pages/components/project-dialog.scss vendored
View File

@ -68,8 +68,18 @@
padding: 0 20px; padding: 0 20px;
} }
.dialog-footer { .dialog-footer {
.dialog-back { .dialog-input {
display: none; .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; padding: 0 20px;
} }
.dialog-footer { .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 { .dialog-input {
width: calc(100% - 44px); align-items: flex-end;
} .dialog-back {
.dialog-send { display: flex;
right: 22px; }
} }
} }
} }

39
resources/assets/sass/pages/components/task-detail.scss vendored
View File

@ -574,21 +574,13 @@
background-color: #F4F5F7; background-color: #F4F5F7;
padding: 10px 12px; padding: 10px 12px;
border-radius: 10px; border-radius: 10px;
.ivu-input { .chat-input-toolbar {
border: 0; position: relative;
resize: none;
background-color: transparent;
&:focus {
box-shadow: none;
}
}
.no-send {
display: none;
.ivu-badge { .ivu-badge {
position: absolute; position: absolute;
transform: scale(0.6); transform: scale(0.6);
top: 5px; top: -6px;
left: 4px; left: 0;
} }
} }
} }
@ -826,28 +818,5 @@
overflow-x: auto; 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
View File

@ -352,8 +352,18 @@
position: relative; position: relative;
.dialog-wrapper { .dialog-wrapper {
.dialog-footer { .dialog-footer {
.dialog-back { .dialog-input {
display: none; .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; justify-content: center;
} }
.dialog-footer { .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 { .dialog-input {
width: calc(100% - 44px); align-items: flex-end;
} .dialog-back {
.dialog-send { display: flex;
right: 22px; }
} }
} }
} }