+
@@ -230,7 +233,6 @@ import TransferDom from "../../../../directives/transfer-dom";
import clickoutside from "../../../../directives/clickoutside";
import longpress from "../../../../directives/longpress";
import {inputLoadAdd, inputLoadIsLast, inputLoadRemove} from "./one";
-import {fullToolIcons} from "./icon";
import {isMarkdownFormat} from "../../../../store/markdown";
import {Store} from "le5le-store";
@@ -354,7 +356,55 @@ export default {
fullInput: false,
fullQuill: null,
fullSelection: {index: 0, length: 0},
- fullTools: fullToolIcons,
+ fullTools: [
+ {
+ label: 'bold',
+ type: '',
+ icon: '',
+ },
+ {
+ label: 'strike',
+ type: '',
+ icon: '',
+ },
+ {
+ label: 'italic',
+ type: '',
+ icon: '',
+ },
+ {
+ label: 'underline',
+ type: '',
+ icon: '',
+ },
+ {
+ label: 'blockquote',
+ type: '',
+ icon: '',
+ },
+ {
+ label: 'link',
+ type: '',
+ icon: '',
+ },
+ {
+ label: 'list',
+ type: 'ordered',
+ icon: '',
+ },
+ {
+ label: 'list',
+ type: 'bullet',
+ icon: '',
+ },
+ {
+ label: 'list',
+ type: 'unchecked',
+ icon: '',
+ },
+ ],
+
+ viewportHeight: 0,
};
},
created() {
@@ -363,6 +413,10 @@ export default {
mounted() {
this.init();
//
+ if (window.visualViewport) {
+ window.visualViewport.addEventListener('resize', this.visualViewportResize);
+ }
+ //
this.recordInter = setInterval(_ => {
if (this.recordState === 'ing') {
// 录音中，但录音时长不增加则取消录音
@@ -399,6 +453,9 @@ export default {
if (this.recordInter) {
clearInterval(this.recordInter)
}
+ if (window.visualViewport) {
+ window.visualViewport.removeEventListener('resize', this.visualViewportResize);
+ }
},
computed: {
...mapState([
@@ -511,6 +568,14 @@ export default {
}
return null;
},
+
+ chatInputBoxStyle({fullInput, viewportHeight}) {
+ const style = {}
+ if (fullInput && viewportHeight > 0) {
+ style.height = Math.max(100, viewportHeight - 70) + 'px'
+ }
+ return style
+ },
},
watch: {
// Watch content change
@@ -661,7 +726,13 @@ export default {
fullInput(val) {
this.quill?.enable(!val)
- }
+ },
+
+ windowScrollY(val) {
+ if (this.fullInput && val > 0) {
+ window.scrollTo(0, 0)
+ }
+ },
},
methods: {
init() {
@@ -1304,6 +1375,9 @@ export default {
this.fullQuill.on('selection-change', range => {
this.fullSelection = range || {index: 0, length: 0};
})
+ this.fullQuill.on('text-change', _ => {
+ this.fullSelection = this.fullQuill.getSelection()
+ })
this.fullQuill.enable(true)
this.$refs.editorFull.firstChild.innerHTML = this.$refs.editor.firstChild.innerHTML
this.$nextTick(_ => {
@@ -1782,7 +1856,11 @@ export default {
if (mention.isOpen) {
mention.setMentionContainerPosition()
}
- }
+ },
+
+ visualViewportResize() {
+ this.viewportHeight = window.visualViewport?.height || 0;
+ },
}
}
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index f03da6efe..2a4e10239 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/resources/assets/sass/pages/components/chat-input.scss
@@ -769,10 +769,15 @@
display: flex;
align-items: center;
justify-content: center;
+ user-select: none;
+ margin: 0 -12px;
&.activation {
> li {
opacity: 1;
cursor: pointer;
+ &:active {
+ background-color: #eee;
+ }
}
}
> li {
@@ -784,39 +789,17 @@
justify-content: center;
align-items: center;
list-style: none;
- opacity: 0.6;
+ opacity: 0.8;
cursor: not-allowed;
- > svg {
- height: 20px;
- .im-fill {
- fill: #333;
- }
- .im-stroke {
- fill: none;
- stroke: #333;
- stroke-linecap: round;
- stroke-linejoin: round;
- stroke-width: 2;
- }
- .im-thin {
- stroke-width: 1;
- }
- .im-even {
- fill-rule: evenodd;
- }
- &:active {
- .im-fill {
- fill: #000;
- }
- .im-stroke {
- stroke: #000;
- }
- }
+ border-radius: 8px;
+ > i {
+ color: #555;
+ font-size: 16px;
}
@media screen and (max-width: 320px) {
height: 52px;
- > svg {
- height: 18px;
+ > i {
+ font-size: 14px;
}
}
}