Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Phillip 2023-01-16 08:19:36 +02:00
commit 6cf881f73b
6 changed files with 129 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
qortal-ui-plugins/plugins/core/components/ChatPage.js
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
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
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
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
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
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,