Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-12 02:05: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

66
qortal-ui-plugins/plugins/core/components/ChatPage.js
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 = []
@ -893,12 +901,31 @@ class ChatPage extends LitElement {
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,7 +1727,6 @@ class ChatPage extends LitElement {
} }
renderChatScroller() { renderChatScroller() {
console.log('renderChatScroller')
return html` return html`
<chat-scroller <chat-scroller
chatId=${this.chatId} chatId=${this.chatId}
@ -1688,7 +1744,11 @@ class ChatPage extends LitElement {
.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)}
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setUserName=${(val) => this.setUserName(val)}
.setSelectedHead=${(val) => this.setSelectedHead(val)}
?openTipUser=${this.openTipUser} ?openTipUser=${this.openTipUser}
.selectedHead=${this.selectedHead}
> >
</chat-scroller> </chat-scroller>
` `

63
qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
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
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;

69
qortal-ui-plugins/plugins/core/components/ChatScroller.js
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,7 +826,10 @@ 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
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
data-text="${translate("blockpage.bcchange9")}"
@click="${() => this.setOpenPrivateMessage({
name: this.originalMessage.senderName ? this.originalMessage.senderName : this.originalMessage.sender, name: this.originalMessage.senderName ? this.originalMessage.senderName : this.originalMessage.sender,
open: true open: true
})}"> })}">
@ -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>

8
qortal-ui-plugins/plugins/core/components/WrapperModal.js
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
style="z-index: ${this.zIndex || 50}"
class="backdrop"
@click=${() => {
this.onClickFunc(); this.onClickFunc();
}}></div> }}>
</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>

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

@ -118,10 +118,8 @@ class Chat extends LitElement {
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,