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
Split 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 './ChatTextEditor.js';
import './WrapperModal.js';
import './TipUser'
import './ChatSelect.js'
import './ChatSideNavHeads.js'
import './ChatLeaveGroup.js'
@ -99,7 +100,9 @@ class ChatPage extends LitElement {
currentEditor: {type: String},
isEnabledChatEnter: {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.toggleEnableChatEnter = this.toggleEnableChatEnter.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.userName = ""
this.chatId = ''
this.myAddress = ''
this.messages = []
@ -889,16 +897,35 @@ class ChatPage extends LitElement {
this.requestUpdate()
}
setOpenTipUser(props) {
setOpenTipUser(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(){
localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter )
this.isEnabledChatEnter = !this.isEnabledChatEnter
}
render() {
console.log(this.userName, "username here");
return html`
<div class="main-container">
<div
@ -1225,6 +1252,35 @@ class ChatPage extends LitElement {
</div>
</div>
</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 class="chat-right-panel ${this.shifted ? "movedin" : "movedout"}" ${animate()}>
<chat-right-panel
@ -1236,7 +1292,8 @@ class ChatPage extends LitElement {
.leaveGroupObj=${this.groupInfo}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
?openTipUser=${this.openTipUser}
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setUserName=${(val) => this.setUserName(val)}
>
</chat-right-panel>
</div>
@ -1670,27 +1727,30 @@ class ChatPage extends LitElement {
}
renderChatScroller() {
console.log('renderChatScroller')
return html`
<chat-scroller
chatId=${this.chatId}
.messages=${this.messagesRendered}
.escapeHTML=${escape}
.getOldMessage=${this.getOldMessage}
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
.setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
.sendMessage=${(val) => this._sendMessage(val)}
.sendMessageForward=${(messageText, typeMessage, chatReference, isForward, forwardParams)=> this.sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams)}
.showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
.emojiPicker=${this.emojiPicker}
?isLoadingMessages=${this.isLoadingOldMessages}
.setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
.setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
?openTipUser=${this.openTipUser}
>
</chat-scroller>
<chat-scroller
chatId=${this.chatId}
.messages=${this.messagesRendered}
.escapeHTML=${escape}
.getOldMessage=${this.getOldMessage}
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
.setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
.sendMessage=${(val) => this._sendMessage(val)}
.sendMessageForward=${(messageText, typeMessage, chatReference, isForward, forwardParams)=> this.sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams)}
.showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
.emojiPicker=${this.emojiPicker}
?isLoadingMessages=${this.isLoadingOldMessages}
.setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
.setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setUserName=${(val) => this.setUserName(val)}
.setSelectedHead=${(val) => this.setSelectedHead(val)}
?openTipUser=${this.openTipUser}
.selectedHead=${this.selectedHead}
>
</chat-scroller>
`
}
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 {
static get properties() {
return {
openUserInfo: { type: Boolean },
leaveGroupObj: { type: Object },
error: { type: Boolean },
chatHeads: { type: Array },
@ -27,7 +26,6 @@ class ChatRightPanel extends LitElement {
toggle: { attribute: false },
getMoreMembers:{ attribute: false },
setOpenPrivateMessage: { attribute: false },
openTipUser: { type: Boolean },
userName: { type: String },
walletBalance: { type: Number },
sendMoneyLoading: { type: Boolean },
@ -35,12 +33,13 @@ class ChatRightPanel extends LitElement {
errorMessage: { type: String },
successMessage: { type: String },
setOpenTipUser: { attribute: false },
setOpenUserInfo: { attribute: false },
setUserName: { attribute: false },
}
}
constructor() {
super()
this.openUserInfo = false
this.leaveGroupObj = {}
this.leaveFee = 0.001
this.error = false
@ -51,13 +50,10 @@ class ChatRightPanel extends LitElement {
this.viewElement = ''
this.downObserverElement = ''
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.openTipUser = false
this.userName = ""
this.sendMoneyLoading = false
this.btnDisable = false
this.errorMessage = ""
this.successMessage = ""
this.setOpenUserInfo = this.setOpenUserInfo.bind(this);
}
static get styles() {
@ -232,12 +228,6 @@ class ChatRightPanel extends LitElement {
}
}
setOpenUserInfo(props) {
this.openUserInfo = props
}
render() {
const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
return html`
@ -262,7 +252,11 @@ class ChatRightPanel extends LitElement {
if (val.address === this.myAddress) return;
console.log({ val });
this.selectedHead = val;
this.openUserInfo = true;
this.setOpenUserInfo(true);
this.setUserName({
sender: val.address,
senderName: val.name ? val.name : ""
});
}}
chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>`
@ -275,7 +269,11 @@ class ChatRightPanel extends LitElement {
if (val.address === this.myAddress) return;
console.log({ val });
this.selectedHead = val;
this.openUserInfo = true;
this.setOpenUserInfo(true);
this.setUserName({
sender: val.address,
senderName: val.name ? val.name : ""
});
}}
chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>`
@ -288,44 +286,17 @@ class ChatRightPanel extends LitElement {
if (val.address === this.myAddress) return;
console.log({ val });
this.selectedHead = val;
this.openUserInfo = true;
this.setOpenUserInfo(true);
this.setUserName({
sender: val.address,
senderName: val.name ? val.name : ""
});
}}
chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>`
})}
<div id='downObserver'></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>
`

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

@ -87,8 +87,7 @@ export const chatStyles = css`
user-select: none;
float: right;
padding-left: 15px;
padding-bottom: 3px;
transform: translateY(10px);
text-align: right;
}
.message-data-time-hidden {
@ -100,7 +99,7 @@ export const chatStyles = css`
float: right;
padding-left: 15px;
padding-bottom: 3px;
transform: translateY(10px);
text-align: right;
}
.message-user-info {
@ -134,7 +133,7 @@ export const chatStyles = css`
align-items: flex-start;
justify-content: center;
border-radius: 5px;
padding: 12px 15px;
padding: 12px 15px 4px 15px;
width: fit-content;
min-width: 150px;
}
@ -204,6 +203,8 @@ export const chatStyles = css`
}
.message {
display: flex;
flex-direction: column;
color: var(--chat-bubble-msg-color);
line-height: 19px;
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 './ChatModals.js';
import './WrapperModal';
import './TipUser'
import "./UserInfo/UserInfo";
import '@vaadin/icons';
import '@vaadin/icon';
@ -44,6 +43,10 @@ class ChatScroller extends LitElement {
chatId: { type: String },
setForwardProperties: { attribute: false },
setOpenPrivateMessage: { attribute: false },
setOpenUserInfo: { attribute: false },
setOpenTipUser: { attribute: false },
setUserName: { attribute: false },
setSelectedHead: { attribute: false },
openTipUser: { type: Boolean },
openUserInfo: { type: Boolean },
userName: { type: String },
@ -58,13 +61,10 @@ class ChatScroller extends LitElement {
this.messages = []
this._upObserverhandler = this._upObserverhandler.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.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
this.openTipUser = false;
this.openUserInfo = false;
this.userName = "";
}
render() {
@ -138,36 +138,6 @@ class ChatScroller extends LitElement {
})}
<div id='downObserver'></div>
</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;
}
setToggledMessage (message) {
setToggledMessage(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() {
this.emojiPicker.on('emoji', selection => {
@ -316,7 +270,7 @@ class MessageTemplate extends LitElement {
setOpenTipUser: { attribute: false },
setOpenUserInfo: { attribute: false },
setUserName: { attribute: false },
openTipUser:{type: Boolean}
openTipUser:{ type: Boolean }
}
}
@ -365,7 +319,6 @@ class MessageTemplate extends LitElement {
}
render() {
console.log('this.userName', this.userName)
const hidemsg = this.hideMessages;
let message = "";
let messageVersion2 = ""
@ -873,10 +826,13 @@ class ChatMenu extends LitElement {
}}">
<vaadin-icon icon="vaadin:arrow-forward" slot="icon"></vaadin-icon>
</div>
<div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange9")}" @click="${() => this.setOpenPrivateMessage({
name: this.originalMessage.senderName ? this.originalMessage.senderName : this.originalMessage.sender,
open: true
})}">
<div
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
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>
</div>
<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
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
data-text="${translate("blockpage.bcchange18")}"
@click=${() => {
this.setOpenTipUser(true);
@click=${(e) => {
e.preventDefault();
this.setUserName(this.originalMessage);
this.setOpenTipUser(true);
}}>
<vaadin-icon icon="vaadin:dollar" slot="icon"></vaadin-icon>
</div>

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

@ -16,9 +16,13 @@ export class WrapperModal extends LitElement {
render() {
return html`
<div>
<div style="z-index: ${this.zIndex || 50}" class="backdrop" @click=${() => {
this.onClickFunc();
}}></div>
<div
style="z-index: ${this.zIndex || 50}"
class="backdrop"
@click=${() => {
this.onClickFunc();
}}>
</div>
<div class="modal-body" style=${this.customStyle ? this.customStyle : ""}>
<slot></slot>
</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;
}
async connectedCallback() {
async connectedCallback() {
super.connectedCallback();
await this.getUpdateCompleteTextEditor();
const elementChatId = this.shadowRoot.getElementById('messageBox').shadowRoot.getElementById('privateMessage')
console.log({elementChatId})
this.editor = new Editor({
onUpdate: ()=> {
console.log('q-chat editor', this.editor)
this.shadowRoot.getElementById('messageBox').getMessageSize(this.editor.getJSON())
},
element: elementChatId,

Write Preview
Loading…
Cancel
Save