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

no message

Browse Source
This commit is contained in:
kuaifan 2022-05-28 17:05:45 +08:00
parent ca74ba1c15
commit 85f95ff89c
6 changed files with 242 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -37,7 +37,7 @@
"notification-koro1": "^1.1.1", "notification-koro1": "^1.1.1",
"postcss": "^8.4.5", "postcss": "^8.4.5",
"quill": "^1.3.7", "quill": "^1.3.7",
"quill-mention": "^3.1.0", "quill-mention-hi": "^3.1.0-1",
"resolve-url-loader": "^4.0.0", "resolve-url-loader": "^4.0.0",
"sass": "^1.45.1", "sass": "^1.45.1",
"sass-loader": "^12.4.0", "sass-loader": "^12.4.0",

4
resources/assets/js/components/Mobile/Back.vue
View File

@ -59,7 +59,9 @@ export default {
}, },
touchmove(event) { touchmove(event) {
this.getXY(event) if (this.show) {
this.getXY(event)
}
}, },
touchend() { touchend() {

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

@ -105,7 +105,7 @@
<script> <script>
import {mapState} from "vuex"; import {mapState} from "vuex";
import Quill from 'quill'; import Quill from 'quill';
import "quill-mention"; import "quill-mention-hi";
import ChatEmoji from "./emoji"; import ChatEmoji from "./emoji";
import touchmouse from "../../../../directives/touchmouse"; import touchmouse from "../../../../directives/touchmouse";
import TransferDom from "../../../../directives/transfer-dom"; import TransferDom from "../../../../directives/transfer-dom";
@ -308,6 +308,7 @@ export default {
if (!val && this.$refs.emojiTip) { if (!val && this.$refs.emojiTip) {
this.$refs.emojiTip.updatePopper() this.$refs.emojiTip.updatePopper()
} }
this.$emit('on-emoji-visible-change', val)
}, },
showMore(val) { showMore(val) {
@ -317,6 +318,7 @@ export default {
if (!val && this.$refs.moreTip) { if (!val && this.$refs.moreTip) {
this.$refs.moreTip.updatePopper() this.$refs.moreTip.updatePopper()
} }
this.$emit('on-more-visible-change', val)
}, },
dialogInputCache() { dialogInputCache() {
@ -365,6 +367,7 @@ export default {
mentionDenotationChars: ["@", "#"], mentionDenotationChars: ["@", "#"],
defaultMenuOrientation: this.defaultMenuOrientation, defaultMenuOrientation: this.defaultMenuOrientation,
isolateCharacter: true, isolateCharacter: true,
positioningStrategy: 'fixed',
renderItem: (data) => { renderItem: (data) => {
if (data.disabled === true) { if (data.disabled === true) {
return `<div class="mention-item-disabled">${data.value}</div>`; return `<div class="mention-item-disabled">${data.value}</div>`;
@ -381,6 +384,13 @@ export default {
return "Loading..."; return "Loading...";
}, },
source: (searchTerm, renderList, mentionChar) => { source: (searchTerm, renderList, mentionChar) => {
const mentionName = mentionChar == "@" ? 'user-mention' : 'task-mention';
const containers = document.getElementsByClassName("ql-mention-list-container");
for (let i = 0; i < containers.length; i++) {
containers[i].classList.remove("user-mention");
containers[i].classList.remove("task-mention");
containers[i].classList.add(mentionName);
}
this.getSource(mentionChar).then(array => { this.getSource(mentionChar).then(array => {
let values = []; let values = [];
array.some(item => { array.some(item => {
@ -492,7 +502,18 @@ export default {
this.recordDuration = duration; this.recordDuration = duration;
} }
}) })
this.recordReady = true; if (window.Recorder.Support()) {
this.recordReady = true;
this.$nextTick(_ => {
this.recordWave = window.Recorder.FrequencyHistogramView({
elem: this.$refs.recwave,
lineCount: 90,
position: 0,
minHeight: 1,
stripeEnable: false
})
})
}
}); });
// Ready event // Ready event
@ -586,24 +607,17 @@ export default {
this.recordState = "ready"; this.recordState = "ready";
this.recordRec.open(_ => { this.recordRec.open(_ => {
if (this.recordState === "ready") { if (this.recordState === "ready") {
this.recordDuration = 0;
this.recordState = "ing" this.recordState = "ing"
this.recordBlob = null this.recordBlob = null
this.$nextTick(_ => { setTimeout(_ => {
this.$refs.recwave.innerHTML = "";
this.recordWave = window.Recorder.FrequencyHistogramView({
elem: this.$refs.recwave,
lineCount: 90,
position: 0,
minHeight: 1,
stripeEnable: false
})
this.recordRec.start() this.recordRec.start()
}) }, 300)
} else { } else {
this.recordRec.close(); this.recordRec.close();
} }
}, (msg) => { }, (msg) => {
$A.modalError(msg || '打开录音失败') $A.messageError(msg || '打开录音失败')
}); });
return true; return true;
} else { } else {
@ -612,28 +626,33 @@ export default {
}, },
stopRecord(isCancel) { stopRecord(isCancel) {
if (this.recordState === "ing") { switch (this.recordState) {
this.recordState = "stop"; case "ing":
this.recordRec.stop((blob, duration) => { this.recordState = "stop";
this.recordRec.close(); this.recordRec.stop((blob, duration) => {
if (isCancel === true) { this.recordRec.close();
return; if (isCancel === true) {
} return;
if (duration < 600) { }
// 小于 600ms 不发送 if (duration < 600) {
$A.messageWarning("说话时间太短") $A.messageWarning("说话时间太短") // 小于 600ms 不发送
} else { } else {
this.recordBlob = blob; this.recordBlob = blob;
this.uploadRecord(duration); this.uploadRecord(duration);
} }
}, (msg) => { }, (msg) => {
this.recordRec.close(); this.recordRec.close();
$A.modalError("录音失败: " + msg); $A.messageError(msg || "录音失败");
}); });
return true; return true;
} else {
this.recordState = "stop"; case "ready":
return false; this.recordState = "stop";
return true;
default:
this.recordState = "stop";
return false;
} }
}, },

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

@ -2,6 +2,7 @@
<div <div
v-if="isReady" v-if="isReady"
class="dialog-wrapper" class="dialog-wrapper"
:style="wrapperStyle"
@drop.prevent="chatPasteDrag($event, 'drag')" @drop.prevent="chatPasteDrag($event, 'drag')"
@dragover.prevent="chatDragOver(true, $event)" @dragover.prevent="chatDragOver(true, $event)"
@dragleave.prevent="chatDragOver(false, $event)"> @dragleave.prevent="chatDragOver(false, $event)">
@ -116,6 +117,7 @@
@on-more="onEventMore" @on-more="onEventMore"
@on-file="sendFileMsg" @on-file="sendFileMsg"
@on-send="sendMsg" @on-send="sendMsg"
@on-emoji-visible-change="onEventEmojiVisibleChange"
:placeholder="$L('输入消息...')"/> :placeholder="$L('输入消息...')"/>
</div> </div>
<div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false"> <div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
@ -218,15 +220,21 @@ export default {
dialogDrag: false, dialogDrag: false,
groupInfoShow: false, groupInfoShow: false,
windowScrollY: 0
} }
}, },
mounted() { mounted() {
if ($A.isIos()) {
window.addEventListener('scroll', this.onScrollEvent);
}
}, },
beforeDestroy() { beforeDestroy() {
if ($A.isIos()) {
window.removeEventListener('scroll', this.onScrollEvent);
}
}, },
computed: { computed: {
@ -313,6 +321,13 @@ export default {
isMyDialog() { isMyDialog() {
const {dialogData, userId} = this; const {dialogData, userId} = this;
return dialogData.dialog_user && dialogData.dialog_user.userid == userId return dialogData.dialog_user && dialogData.dialog_user.userid == userId
},
wrapperStyle() {
const {windowScrollY} = this;
return {
top: windowScrollY + 'px'
}
} }
}, },
@ -580,6 +595,12 @@ export default {
} }
}, },
onEventEmojiVisibleChange(val) {
if (val && !this.$isDesktop) {
this.onToBottom();
}
},
onActive() { onActive() {
this.$emit("on-active"); this.$emit("on-active");
}, },
@ -673,6 +694,10 @@ export default {
} }
}, 100) }, 100)
}, },
onScrollEvent() {
this.windowScrollY = window.scrollY
}
} }
} }
</script> </script>

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

@ -1,5 +1,5 @@
@import "~quill/dist/quill.bubble.css"; @import "~quill/dist/quill.bubble.css";
@import "~quill-mention/dist/quill.mention.min.css"; @import "~quill-mention-hi/dist/quill.mention.min.css";
.chat-input-box { .chat-input-box {
display: inline-block; display: inline-block;
@ -7,6 +7,9 @@
&.record-ing { &.record-ing {
.chat-input-wrapper { .chat-input-wrapper {
.ql-container {
opacity: 0;
}
.chat-toolbar { .chat-toolbar {
> li { > li {
&.chat-send { &.chat-send {
@ -15,29 +18,8 @@
} }
} }
&.chat-record-recwave { &.chat-record-recwave {
display: flex; visibility: visible;
} opacity: 1;
}
}
}
}
&.task-mention {
.chat-input-wrapper {
.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;
}
} }
} }
} }
@ -102,136 +84,6 @@
} }
} }
} }
.ql-mention-list-container {
width: auto;
min-width: 220px;
max-width: 280px;
max-height: 360px;
//noinspection CssInvalidPropertyValue
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: $primary-color;
overflow: hidden;
}
.mention-item-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
> img {
width: 28px;
height: 28px;
border-radius: 50%;
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;
}
&.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-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;
}
}
}
} }
.ql-bubble { .ql-bubble {
@ -245,6 +97,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
user-select: none;
> li { > li {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -297,10 +150,12 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
display: none;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pointer-events: none;
visibility: hidden;
opacity: 0;
> div { > div {
flex: 1; flex: 1;
width: 100%; width: 100%;
@ -499,6 +354,151 @@
} }
} }
.ql-mention-list-container {
width: auto;
min-width: 220px;
max-width: 280px;
max-height: 360px;
overflow-y: overlay;
&.task-mention {
.ql-mention-list {
> li {
&:first-child {
margin-top: 0;
}
}
}
.ql-mention-list-item {
line-height: 36px;
.mention-item-disabled {
padding: 8px 4px 0;
}
}
}
&::-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: $primary-color;
overflow: hidden;
}
.mention-item-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
> img {
width: 28px;
height: 28px;
border-radius: 50%;
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;
}
&.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-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;
}
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.chat-input-box { .chat-input-box {
.chat-input-wrapper { .chat-input-wrapper {

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

@ -451,7 +451,7 @@
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-end; justify-content: flex-end;
align-content: center; align-content: center;
color: #ffffff; color: #333333;
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
@ -691,6 +691,7 @@
.dialog-record { .dialog-record {
flex-direction: row; flex-direction: row;
color: #ffffff;
.record-time { .record-time {
padding: 0 4px 0 0; padding: 0 4px 0 0;