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

Merge remote-tracking branch 'justin/feature/new-editor/bug-fix' into feature/new-editor

q-apps
Phillip 2 years ago
parent
6767b40406 89694f6e20
commit
6cf881f73b
6 changed files with 129 additions and 138 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  2. 63
      qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
  3. 9
      qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
  4. 75
      qortal-ui-plugins/plugins/core/components/ChatScroller.js
  5. 10
      qortal-ui-plugins/plugins/core/components/WrapperModal.js
  6. 4
      qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

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

@ -24,6 +24,7 @@ import './NameMenu.js';
import './TimeAgo.js'; import './TimeAgo.js';
import './ChatTextEditor.js'; import './ChatTextEditor.js';
import './WrapperModal.js'; import './WrapperModal.js';
import './TipUser'
import './ChatSelect.js' import './ChatSelect.js'
import './ChatSideNavHeads.js' import './ChatSideNavHeads.js'
import './ChatLeaveGroup.js' import './ChatLeaveGroup.js'
@ -99,7 +100,9 @@ class ChatPage extends LitElement {
currentEditor: {type: String}, currentEditor: {type: String},
isEnabledChatEnter: {type: Boolean}, isEnabledChatEnter: {type: Boolean},
openTipUser: { type: Boolean }, openTipUser: { type: Boolean },
setOpenTipUser: {attribute: false} openUserInfo: { type: Boolean },
selectedHead: { type: Object },
userName: { type: String }
} }
} }
@ -829,7 +832,12 @@ class ChatPage extends LitElement {
this.insertImage = this.insertImage.bind(this) this.insertImage = this.insertImage.bind(this)
this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this) this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this)
this._downObserverhandler = this._downObserverhandler.bind(this) this._downObserverhandler = this._downObserverhandler.bind(this)
this.setOpenTipUser = this.setOpenTipUser.bind(this)
this.setOpenUserInfo = this.setOpenUserInfo.bind(this)
this.setUserName = this.setUserName.bind(this)
this.setSelectedHead = this.setSelectedHead.bind(this)
this.selectedAddress = {} this.selectedAddress = {}
this.userName = ""
this.chatId = '' this.chatId = ''
this.myAddress = '' this.myAddress = ''
this.messages = [] this.messages = []
@ -889,16 +897,35 @@ class ChatPage extends LitElement {
this.requestUpdate() this.requestUpdate()
} }
setOpenTipUser(props) { setOpenTipUser(props) {
this.openTipUser = props; this.openTipUser = props;
} }
setOpenUserInfo(props) {
this.openUserInfo = props;
}
setUserName(props) {
console.log({props})
this.userName = props.senderName ? props.senderName : props.sender;
this.setSelectedHead(props);
}
setSelectedHead(props) {
this.selectedHead = {
...this.selectedHead,
address: props.sender,
name: props.senderName,
};
}
toggleEnableChatEnter(){ toggleEnableChatEnter(){
localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter ) localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter )
this.isEnabledChatEnter = !this.isEnabledChatEnter this.isEnabledChatEnter = !this.isEnabledChatEnter
} }
render() { render() {
console.log(this.userName, "username here");
return html` return html`
<div class="main-container"> <div class="main-container">
<div <div
@ -1225,6 +1252,35 @@ class ChatPage extends LitElement {
</div> </div>
</div> </div>
</wrapper-modal> </wrapper-modal>
<wrapper-modal
.onClickFunc=${() => {
this.setOpenTipUser(false);
}}
zIndex=${55}
style=${this.openTipUser ? "display: block;" : "display: none;"}>
<tip-user
.closeTipUser=${!this.openTipUser}
.userName=${this.userName}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}>
</tip-user>
</wrapper-modal>
<wrapper-modal
.onClickFunc=${() => {
this.setOpenUserInfo(false);
this.setUserName("");
this.setSelectedHead({});
}}
style=${
this.openUserInfo ? "display: block" : "display: none"
}>
<user-info
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.userName=${this.userName}
.selectedHead=${this.selectedHead}
></user-info>
</wrapper-modal>
</div> </div>
<div class="chat-right-panel ${this.shifted ? "movedin" : "movedout"}" ${animate()}> <div class="chat-right-panel ${this.shifted ? "movedin" : "movedout"}" ${animate()}>
<chat-right-panel <chat-right-panel
@ -1236,7 +1292,8 @@ class ChatPage extends LitElement {
.leaveGroupObj=${this.groupInfo} .leaveGroupObj=${this.groupInfo}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)} .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
?openTipUser=${this.openTipUser} .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setUserName=${(val) => this.setUserName(val)}
> >
</chat-right-panel> </chat-right-panel>
</div> </div>
@ -1670,27 +1727,30 @@ class ChatPage extends LitElement {
} }
renderChatScroller() { renderChatScroller() {
console.log('renderChatScroller')
return html` return html`
<chat-scroller <chat-scroller
chatId=${this.chatId} chatId=${this.chatId}
.messages=${this.messagesRendered} .messages=${this.messagesRendered}
.escapeHTML=${escape} .escapeHTML=${escape}
.getOldMessage=${this.getOldMessage} .getOldMessage=${this.getOldMessage}
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)} .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
.setEditedMessageObj=${(val) => this.setEditedMessageObj(val)} .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
.sendMessage=${(val) => this._sendMessage(val)} .sendMessage=${(val) => this._sendMessage(val)}
.sendMessageForward=${(messageText, typeMessage, chatReference, isForward, forwardParams)=> this.sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams)} .sendMessageForward=${(messageText, typeMessage, chatReference, isForward, forwardParams)=> this.sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams)}
.showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)} .showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
.emojiPicker=${this.emojiPicker} .emojiPicker=${this.emojiPicker}
?isLoadingMessages=${this.isLoadingOldMessages} ?isLoadingMessages=${this.isLoadingOldMessages}
.setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)} .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
.setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)} .setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)} .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
?openTipUser=${this.openTipUser} .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
> .setUserName=${(val) => this.setUserName(val)}
</chat-scroller> .setSelectedHead=${(val) => this.setSelectedHead(val)}
?openTipUser=${this.openTipUser}
.selectedHead=${this.selectedHead}
>
</chat-scroller>
` `
} }
setIsLoadingMessages(val){ setIsLoadingMessages(val){

63
qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
Unescape View File

@ -17,7 +17,6 @@ import "./UserInfo/UserInfo";
class ChatRightPanel extends LitElement { class ChatRightPanel extends LitElement {
static get properties() { static get properties() {
return { return {
openUserInfo: { type: Boolean },
leaveGroupObj: { type: Object }, leaveGroupObj: { type: Object },
error: { type: Boolean }, error: { type: Boolean },
chatHeads: { type: Array }, chatHeads: { type: Array },
@ -27,7 +26,6 @@ class ChatRightPanel extends LitElement {
toggle: { attribute: false }, toggle: { attribute: false },
getMoreMembers:{ attribute: false }, getMoreMembers:{ attribute: false },
setOpenPrivateMessage: { attribute: false }, setOpenPrivateMessage: { attribute: false },
openTipUser: { type: Boolean },
userName: { type: String }, userName: { type: String },
walletBalance: { type: Number }, walletBalance: { type: Number },
sendMoneyLoading: { type: Boolean }, sendMoneyLoading: { type: Boolean },
@ -35,12 +33,13 @@ class ChatRightPanel extends LitElement {
errorMessage: { type: String }, errorMessage: { type: String },
successMessage: { type: String }, successMessage: { type: String },
setOpenTipUser: { attribute: false }, setOpenTipUser: { attribute: false },
setOpenUserInfo: { attribute: false },
setUserName: { attribute: false },
} }
} }
constructor() { constructor() {
super() super()
this.openUserInfo = false
this.leaveGroupObj = {} this.leaveGroupObj = {}
this.leaveFee = 0.001 this.leaveFee = 0.001
this.error = false this.error = false
@ -51,13 +50,10 @@ class ChatRightPanel extends LitElement {
this.viewElement = '' this.viewElement = ''
this.downObserverElement = '' this.downObserverElement = ''
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.openTipUser = false
this.userName = ""
this.sendMoneyLoading = false this.sendMoneyLoading = false
this.btnDisable = false this.btnDisable = false
this.errorMessage = "" this.errorMessage = ""
this.successMessage = "" this.successMessage = ""
this.setOpenUserInfo = this.setOpenUserInfo.bind(this);
} }
static get styles() { static get styles() {
@ -232,12 +228,6 @@ class ChatRightPanel extends LitElement {
} }
} }
setOpenUserInfo(props) {
this.openUserInfo = props
}
render() { render() {
const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner) const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
return html` return html`
@ -262,7 +252,11 @@ class ChatRightPanel extends LitElement {
if (val.address === this.myAddress) return; if (val.address === this.myAddress) return;
console.log({ val }); console.log({ val });
this.selectedHead = val; this.selectedHead = val;
this.openUserInfo = true; this.setOpenUserInfo(true);
this.setUserName({
sender: val.address,
senderName: val.name ? val.name : ""
});
}} }}
chatInfo=${JSON.stringify(item)} chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>` ></chat-side-nav-heads>`
@ -275,7 +269,11 @@ class ChatRightPanel extends LitElement {
if (val.address === this.myAddress) return; if (val.address === this.myAddress) return;
console.log({ val }); console.log({ val });
this.selectedHead = val; this.selectedHead = val;
this.openUserInfo = true; this.setOpenUserInfo(true);
this.setUserName({
sender: val.address,
senderName: val.name ? val.name : ""
});
}} }}
chatInfo=${JSON.stringify(item)} chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>` ></chat-side-nav-heads>`
@ -288,44 +286,17 @@ class ChatRightPanel extends LitElement {
if (val.address === this.myAddress) return; if (val.address === this.myAddress) return;
console.log({ val }); console.log({ val });
this.selectedHead = val; this.selectedHead = val;
this.openUserInfo = true; this.setOpenUserInfo(true);
this.setUserName({
sender: val.address,
senderName: val.name ? val.name : ""
});
}} }}
chatInfo=${JSON.stringify(item)} chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>` ></chat-side-nav-heads>`
})} })}
<div id='downObserver'></div> <div id='downObserver'></div>
</div> </div>
<wrapper-modal
.onClickFunc=${() => {
this.openUserInfo = false;
this.userName = "";
this.shadowRoot.querySelector("tip-user").shadowRoot.getElementById('amountInput').value = "";
}}
style=${
this.openUserInfo ? "display: block" : "display: none"
}>
<user-info
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.userName=${this.userName}
.selectedHead=${this.selectedHead}
></user-info>
</wrapper-modal>
<wrapper-modal
zIndex=${55}
.onClickFunc=${() => {
this.setOpenTipUser(false);
}}
style=${this.openTipUser ? "display: block" : "display: none"}>
<tip-user
.closeTipUser=${this.openUserInfo}
.userName=${this.userName}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
>
</tip-user>
</wrapper-modal>
</div> </div>
</div> </div>
` `

9
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
Unescape View File

@ -87,8 +87,7 @@ export const chatStyles = css`
user-select: none; user-select: none;
float: right; float: right;
padding-left: 15px; padding-left: 15px;
padding-bottom: 3px; text-align: right;
transform: translateY(10px);
} }
.message-data-time-hidden { .message-data-time-hidden {
@ -100,7 +99,7 @@ export const chatStyles = css`
float: right; float: right;
padding-left: 15px; padding-left: 15px;
padding-bottom: 3px; padding-bottom: 3px;
transform: translateY(10px); text-align: right;
} }
.message-user-info { .message-user-info {
@ -134,7 +133,7 @@ export const chatStyles = css`
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
border-radius: 5px; border-radius: 5px;
padding: 12px 15px; padding: 12px 15px 4px 15px;
width: fit-content; width: fit-content;
min-width: 150px; min-width: 150px;
} }
@ -204,6 +203,8 @@ export const chatStyles = css`
} }
.message { .message {
display: flex;
flex-direction: column;
color: var(--chat-bubble-msg-color); color: var(--chat-bubble-msg-color);
line-height: 19px; line-height: 19px;
overflow-wrap: anywhere; overflow-wrap: anywhere;

75
qortal-ui-plugins/plugins/core/components/ChatScroller.js
Unescape View File

@ -10,7 +10,6 @@ import './LevelFounder.js';
import './NameMenu.js'; import './NameMenu.js';
import './ChatModals.js'; import './ChatModals.js';
import './WrapperModal'; import './WrapperModal';
import './TipUser'
import "./UserInfo/UserInfo"; import "./UserInfo/UserInfo";
import '@vaadin/icons'; import '@vaadin/icons';
import '@vaadin/icon'; import '@vaadin/icon';
@ -44,6 +43,10 @@ class ChatScroller extends LitElement {
chatId: { type: String }, chatId: { type: String },
setForwardProperties: { attribute: false }, setForwardProperties: { attribute: false },
setOpenPrivateMessage: { attribute: false }, setOpenPrivateMessage: { attribute: false },
setOpenUserInfo: { attribute: false },
setOpenTipUser: { attribute: false },
setUserName: { attribute: false },
setSelectedHead: { attribute: false },
openTipUser: { type: Boolean }, openTipUser: { type: Boolean },
openUserInfo: { type: Boolean }, openUserInfo: { type: Boolean },
userName: { type: String }, userName: { type: String },
@ -58,13 +61,10 @@ class ChatScroller extends LitElement {
this.messages = [] this.messages = []
this._upObserverhandler = this._upObserverhandler.bind(this) this._upObserverhandler = this._upObserverhandler.bind(this)
this._downObserverHandler = this._downObserverHandler.bind(this) this._downObserverHandler = this._downObserverHandler.bind(this)
this.setOpenUserInfo = this.setOpenUserInfo.bind(this)
this.setUserName = this.setUserName.bind(this)
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
this.openTipUser = false; this.openTipUser = false;
this.openUserInfo = false; this.openUserInfo = false;
this.userName = "";
} }
render() { render() {
@ -138,36 +138,6 @@ class ChatScroller extends LitElement {
})} })}
<div id='downObserver'></div> <div id='downObserver'></div>
</ul> </ul>
<wrapper-modal
.onClickFunc=${() => {
this.setOpenTipUser(false);
}}
zIndex=${55}
style=${this.openTipUser ? "display: block;" : "display: none;"}>
<tip-user
.closeTipUser=${!this.openTipUser}
.userName=${this.userName}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}>
</tip-user>
</wrapper-modal>
<wrapper-modal
.onClickFunc=${() => {
this.openUserInfo = false;
this.userName = "";
this.selectedHead = {};
}}
style=${
this.openUserInfo ? "display: block" : "display: none"
}>
<user-info
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.userName=${this.userName}
.selectedHead=${this.selectedHead}
></user-info>
</wrapper-modal>
` `
} }
@ -198,26 +168,10 @@ class ChatScroller extends LitElement {
return true; return true;
} }
setToggledMessage (message) { setToggledMessage(message) {
toggledMessage = message; toggledMessage = message;
} }
setOpenUserInfo(props) {
this.openUserInfo = props;
}
setUserName(props) {
console.log({props})
this.userName = props.senderName ? props.senderName : props.sender;
this.selectedHead = {
...this.selectedHead,
address: props.sender,
name: props.senderName,
};
}
async firstUpdated() { async firstUpdated() {
this.emojiPicker.on('emoji', selection => { this.emojiPicker.on('emoji', selection => {
@ -316,7 +270,7 @@ class MessageTemplate extends LitElement {
setOpenTipUser: { attribute: false }, setOpenTipUser: { attribute: false },
setOpenUserInfo: { attribute: false }, setOpenUserInfo: { attribute: false },
setUserName: { attribute: false }, setUserName: { attribute: false },
openTipUser:{type: Boolean} openTipUser:{ type: Boolean }
} }
} }
@ -365,7 +319,6 @@ class MessageTemplate extends LitElement {
} }
render() { render() {
console.log('this.userName', this.userName)
const hidemsg = this.hideMessages; const hidemsg = this.hideMessages;
let message = ""; let message = "";
let messageVersion2 = "" let messageVersion2 = ""
@ -873,10 +826,13 @@ class ChatMenu extends LitElement {
}}"> }}">
<vaadin-icon icon="vaadin:arrow-forward" slot="icon"></vaadin-icon> <vaadin-icon icon="vaadin:arrow-forward" slot="icon"></vaadin-icon>
</div> </div>
<div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange9")}" @click="${() => this.setOpenPrivateMessage({ <div
name: this.originalMessage.senderName ? this.originalMessage.senderName : this.originalMessage.sender, class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
open: true data-text="${translate("blockpage.bcchange9")}"
})}"> @click="${() => this.setOpenPrivateMessage({
name: this.originalMessage.senderName ? this.originalMessage.senderName : this.originalMessage.sender,
open: true
})}">
<vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon> <vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
</div> </div>
<div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}"> <div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}">
@ -916,9 +872,10 @@ class ChatMenu extends LitElement {
<div <div
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
data-text="${translate("blockpage.bcchange18")}" data-text="${translate("blockpage.bcchange18")}"
@click=${() => { @click=${(e) => {
this.setOpenTipUser(true); e.preventDefault();
this.setUserName(this.originalMessage); this.setUserName(this.originalMessage);
this.setOpenTipUser(true);
}}> }}>
<vaadin-icon icon="vaadin:dollar" slot="icon"></vaadin-icon> <vaadin-icon icon="vaadin:dollar" slot="icon"></vaadin-icon>
</div> </div>

10
qortal-ui-plugins/plugins/core/components/WrapperModal.js
Unescape View File

@ -16,9 +16,13 @@ export class WrapperModal extends LitElement {
render() { render() {
return html` return html`
<div> <div>
<div style="z-index: ${this.zIndex || 50}" class="backdrop" @click=${() => { <div
this.onClickFunc(); style="z-index: ${this.zIndex || 50}"
}}></div> class="backdrop"
@click=${() => {
this.onClickFunc();
}}>
</div>
<div class="modal-body" style=${this.customStyle ? this.customStyle : ""}> <div class="modal-body" style=${this.customStyle ? this.customStyle : ""}>
<slot></slot> <slot></slot>
</div> </div>

4
qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
Unescape View File

@ -113,15 +113,13 @@ class Chat extends LitElement {
return true; return true;
} }
async connectedCallback() { async connectedCallback() {
super.connectedCallback(); super.connectedCallback();
await this.getUpdateCompleteTextEditor(); await this.getUpdateCompleteTextEditor();
const elementChatId = this.shadowRoot.getElementById('messageBox').shadowRoot.getElementById('privateMessage') const elementChatId = this.shadowRoot.getElementById('messageBox').shadowRoot.getElementById('privateMessage')
console.log({elementChatId})
this.editor = new Editor({ this.editor = new Editor({
onUpdate: ()=> { onUpdate: ()=> {
console.log('q-chat editor', this.editor)
this.shadowRoot.getElementById('messageBox').getMessageSize(this.editor.getJSON()) this.shadowRoot.getElementById('messageBox').getMessageSize(this.editor.getJSON())
}, },
element: elementChatId, element: elementChatId,

Write Preview
Loading…
Cancel
Save