AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

add enter disabled enabled

Browse Source
This commit is contained in:
Phillip 2023-01-13 00:03:40 -05:00
parent a3b326243b
commit 20b31d577c
3 changed files with 59 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
qortal-ui-core/language/us.json
View File

@ -565,7 +565,9 @@
"cchange56": "Transaction Failed!",
"cchange57": "User Info",
"cchange58": "SEND MESSAGE",
"cchange59": "TIP USER"
"cchange59": "TIP USER",
"cchange60": "Enter Enabled",
"cchange61": "Enter Disabled"
},
"welcomepage": {
"wcchange1": "Welcome to Q-Chat",

29
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -96,7 +96,8 @@ class ChatPage extends LitElement {
webWorkerImage: { type: Object },
myTrimmedMeassage: { type: String },
editor: {type: Object},
currentEditor: {type: String}
currentEditor: {type: String},
isEnabledChatEnter: {type: Boolean}
}
}
@ -824,6 +825,7 @@ class ChatPage extends LitElement {
this.getOldMessage = this.getOldMessage.bind(this)
this._sendMessage = this._sendMessage.bind(this)
this.insertImage = this.insertImage.bind(this)
this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this)
this._downObserverhandler = this._downObserverhandler.bind(this)
this.selectedAddress = {}
this.chatId = ''
@ -877,6 +879,7 @@ class ChatPage extends LitElement {
this.webWorkerImage = null;
this.currentEditor = '_chatEditorDOM'
this.initialChat = this.initialChat.bind(this)
this.isEnabledChatEnter = true
}
_toggle(value) {
@ -884,6 +887,11 @@ class ChatPage extends LitElement {
this.requestUpdate()
}
toggleEnableChatEnter(){
localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter )
this.isEnabledChatEnter = !this.isEnabledChatEnter
}
render() {
return html`
<div class="main-container">
@ -998,6 +1006,8 @@ class ChatPage extends LitElement {
.updatePlaceholder=${(editor, value)=> this.updatePlaceholder(editor, value)}
id="_chatEditorDOM"
.repliedToMessageObj=${this.repliedToMessageObj}
.toggleEnableChatEnter=${this.toggleEnableChatEnter}
?isEnabledChatEnter=${this.isEnabledChatEnter}
>
</chat-text-editor>
</div>
@ -1277,18 +1287,27 @@ class ChatPage extends LitElement {
placeholder: 'Write something …',
}),
Extension.create({
name: 'shortcuts',
addKeyboardShortcuts:()=> {
return {
'Enter': ()=> {
if(this.isEnabledChatEnter){
const chatTextEditor = this.shadowRoot.getElementById('_chatEditorDOM')
chatTextEditor.sendMessageFunc({
})
return true
}
},
"Shift-Enter": () =>
"Shift-Enter": () => {
if(this.isEnabledChatEnter){
this.editor.commands.first(() => [
this.editor.commands.newlineInCode()
]),
])
}
}
}
}})
@ -1561,7 +1580,11 @@ class ChatPage extends LitElement {
})
parentEpml.imReady();
const isEnabledChatEnter = localStorage.getItem('isEnabledChatEnter')
if(isEnabledChatEnter){
this.isEnabledChatEnter = isEnabledChatEnter === 'false' ? false : true
}
await this.initUpdate()
}

36
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from "lit";
import { get } from 'lit-translate';
import { get, translate } from 'lit-translate';
import { EmojiPicker } from 'emoji-picker-js';
import { Epml } from '../../../epml.js';
@ -27,7 +27,9 @@ class ChatTextEditor extends LitElement {
theme: {
type: String,
reflect: true
}
},
toggleEnableChatEnter: {attribute: false},
isEnabledChatEnter: {type: Boolean}
}
}
@ -387,30 +389,40 @@ class ChatTextEditor extends LitElement {
}
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('italic') ? 'is-active' : ''].join(' ')}
>
<!-- <mwc-icon>format_italic</mwc-icon> -->
<span class="material-symbols-outlined">&#xe23f;</span>
</button>
<button
@click=${() => this.editor.chain().focus().toggleCodeBlock().run()}
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
>
<!-- <mwc-icon>code_blocks</mwc-icon> -->
<span class="material-symbols-outlined">&#xf84d;</span>
</button>
<button
@click=${() => this.editor.chain().focus().toggleUnderline().run()}
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('underline') ? 'is-active' : ''].join(' ')}
>
<!-- <mwc-icon>format_underlined</mwc-icon> -->
<span class="material-symbols-outlined">&#xe249;</span>
</button>
<button
@click=${() => this.editor.chain().focus().toggleHighlight().run()}
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('highlight') ? 'is-active' : ''].join(' ')}
>
<!-- <mwc-icon>format_ink_highlighter</mwc-icon> -->
<span class="material-symbols-outlined">&#xf82b;</span>
</button>
<button
@click=${() => this.editor.chain().focus().toggleCodeBlock().run()}
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
>
<span class="material-symbols-outlined">&#xf84d;</span>
</button>
<button
@click=${()=> this.toggleEnableChatEnter() }
style="height: 26px; box-sizing: border-box;"
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
>
${this.isEnabledChatEnter ? html`
${translate("chatpage.cchange60")}
` : html`
${translate("chatpage.cchange61")}
`}
</button>
</div>
<div
class=${["chatbar-container", (this.iframeId === "newChat" || this.iframeId === "privateMessage") ? "chatbar-caption" : ""].join(" ")}