Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-23 11:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Started UI Fixes

Browse Source
This commit is contained in:
Justin Ferrari 2022-10-29 10:51:02 -05:00
parent e708ffef82
commit d6bffbeaa9
4 changed files with 125 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
qortal-ui-plugins/plugins/core/components/ChatModals.js
View File

@ -92,11 +92,11 @@ class ChatModals extends LitElement {
// Send Private Message // Send Private Message
_sendMessage() { _sendMessage() {
this.isLoading = true this.isLoading = true;
const recipient = this.shadowRoot.getElementById('sendTo').value const recipient = this.shadowRoot.getElementById('sendTo').value;
const messageBox = this.shadowRoot.getElementById('messageBox') const messageBox = this.shadowRoot.getElementById('messageBox');
const messageText = messageBox.value const messageText = messageBox.value;
if (recipient.length === 0) { if (recipient.length === 0) {
this.isLoading = false this.isLoading = false
@ -105,22 +105,21 @@ class ChatModals extends LitElement {
} else { } else {
this.sendMessage() this.sendMessage()
} }
} };
async sendMessage() { async sendMessage() {
this.isLoading = true this.isLoading = true;
const _recipient = this.shadowRoot.getElementById('sendTo').value;
const _recipient = this.shadowRoot.getElementById('sendTo').value const messageBox = this.shadowRoot.getElementById('messageBox');
const messageBox = this.shadowRoot.getElementById('messageBox') const messageText = messageBox.value;
const messageText = messageBox.value let recipient;
let recipient
const validateName = async (receiverName) => { const validateName = async (receiverName) => {
let myRes let myRes;
let myNameRes = await parentEpml.request('apiCall', { let myNameRes = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/names/${receiverName}` url: `/names/${receiverName}`
}) });
if (myNameRes.error === 401) { if (myNameRes.error === 401) {
myRes = false myRes = false
@ -128,7 +127,7 @@ class ChatModals extends LitElement {
myRes = myNameRes myRes = myNameRes
} }
return myRes return myRes;
} }
const myNameRes = await validateName(_recipient) const myNameRes = await validateName(_recipient)
@ -139,7 +138,6 @@ class ChatModals extends LitElement {
recipient = myNameRes.owner recipient = myNameRes.owner
} }
let _reference = new Uint8Array(64); let _reference = new Uint8Array(64);
window.crypto.getRandomValues(_reference); window.crypto.getRandomValues(_reference);
@ -367,7 +365,11 @@ class ChatModals extends LitElement {
<p style='margin-bottom:0;'> <p style='margin-bottom:0;'>
<textarea class='textarea' @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id='messageBox' placeholder='${translate('welcomepage.wcchange5')}' rows='1'></textarea> <textarea class='textarea' @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id='messageBox' placeholder='${translate('welcomepage.wcchange5')}' rows='1'></textarea>
</p> </p>
<mwc-button ?disabled='${this.isLoading}' slot='primaryAction' @click=${this._sendMessage}>${translate('welcomepage.wcchange6')} <mwc-button ?disabled='${this.isLoading}' slot='primaryAction' @click=${() => {
console.log("here500");
this._sendMessage();
}
}>${translate('welcomepage.wcchange6')}
</mwc-button> </mwc-button>
<mwc-button <mwc-button
?disabled='${this.isLoading}' ?disabled='${this.isLoading}'

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

@ -213,60 +213,64 @@ class ChatPage extends LitElement {
render() { render() {
return html` return html`
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)} <div>
<div class="chat-text-area"> <div>
<div class="typing-area"> ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
${this.repliedToMessageObj && html` </div>
<div class="repliedTo-container"> <div class="chat-text-area">
<div class="repliedTo-subcontainer"> <div class="typing-area">
<vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon> ${this.repliedToMessageObj && html`
<div class="repliedTo-message"> <div class="repliedTo-container">
<p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p> <div class="repliedTo-subcontainer">
<p class="original-message">${this.repliedToMessageObj.message}</p> <vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon>
<div class="repliedTo-message">
<p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
<p class="original-message">${this.repliedToMessageObj.message}</p>
</div>
</div> </div>
<vaadin-icon
class="close-icon"
icon="vaadin:close-big"
slot="icon"
@click=${() => this.closeRepliedToContainer()}
></vaadin-icon>
</div> </div>
<vaadin-icon `}
class="close-icon" ${this.editedMessageObj && html`
icon="vaadin:close-big" <div class="repliedTo-container">
slot="icon" <div class="repliedTo-subcontainer">
@click=${() => this.closeRepliedToContainer()} <vaadin-icon class="reply-icon" icon="vaadin:pencil" slot="icon"></vaadin-icon>
></vaadin-icon> <div class="repliedTo-message">
</div> <p class="senderName">${translate("chatpage.cchange25")}</p>
`} <p class="original-message">${this.editedMessageObj.message}</p>
${this.editedMessageObj && html` </div>
<div class="repliedTo-container">
<div class="repliedTo-subcontainer">
<vaadin-icon class="reply-icon" icon="vaadin:pencil" slot="icon"></vaadin-icon>
<div class="repliedTo-message">
<p class="senderName">${translate("chatpage.cchange25")}</p>
<p class="original-message">${this.editedMessageObj.message}</p>
</div> </div>
<vaadin-icon
class="close-icon"
icon="vaadin:close-big"
slot="icon"
@click=${() => this.closeEditMessageContainer()}
></vaadin-icon>
</div> </div>
<vaadin-icon `}
class="close-icon" <div class="chatbar">
icon="vaadin:close-big" <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
slot="icon" <iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe>
@click=${() => this.closeEditMessageContainer()} <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
></vaadin-icon> ${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
</div> </button>
`} ${this.editedMessageObj ? (
<div class="chatbar"> html`
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> <vaadin-icon
<iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe> class="checkmark-icon"
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> icon="vaadin:check"
${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`} slot="icon"
</button> @click=${() => this._sendMessage()}
${this.editedMessageObj ? ( ></vaadin-icon>
html` `
<vaadin-icon ) : html`<div></div>`
class="checkmark-icon" }
icon="vaadin:check" </div>
slot="icon"
@click=${() => this._sendMessage()}
></vaadin-icon>
`
) : html`<div></div>`
}
</div> </div>
</div> </div>
</div> </div>
@ -274,7 +278,6 @@ class ChatPage extends LitElement {
} }
async firstUpdated() { async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
@ -385,6 +388,7 @@ class ChatPage extends LitElement {
parentEpml.imReady(); parentEpml.imReady();
} }
async updated(changedProperties) { async updated(changedProperties) {
if (changedProperties.has('messagesRendered')) { if (changedProperties.has('messagesRendered')) {
const chatReference1 = this.isReceipient ? 'direct' : 'group'; const chatReference1 = this.isReceipient ? 'direct' : 'group';

97
qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js
View File

@ -230,7 +230,11 @@ class ChatWelcomePage extends LitElement {
<textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea> <textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea>
</p> </p>
<mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${this._sendMessage}>${translate("welcomepage.wcchange6")}</mwc-button> <mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${() => {
this._sendMessage();
}
}>
${translate("welcomepage.wcchange6")}</mwc-button>
<mwc-button <mwc-button
?disabled="${this.isLoading}" ?disabled="${this.isLoading}"
slot="secondaryAction" slot="secondaryAction"
@ -319,86 +323,80 @@ class ChatWelcomePage extends LitElement {
} }
_sendMessage() { _sendMessage() {
this.isLoading = true this.isLoading = true;
const recipient = this.shadowRoot.getElementById('sendTo').value;
const recipient = this.shadowRoot.getElementById('sendTo').value const messageBox = this.shadowRoot.getElementById('messageBox');
const messageBox = this.shadowRoot.getElementById('messageBox') const messageText = messageBox.value;
const messageText = messageBox.value
if (recipient.length === 0) { if (recipient.length === 0) {
this.isLoading = false this.isLoading = false;
} else if (messageText.length === 0) { } else if (messageText.length === 0) {
this.isLoading = false this.isLoading = false;
} else { } else {
this.sendMessage() this.sendMessage();
} }
} };
async sendMessage(e) { async sendMessage() {
this.isLoading = true this.isLoading = true;
const _recipient = this.shadowRoot.getElementById('sendTo').value;
const _recipient = this.shadowRoot.getElementById('sendTo').value const messageBox = this.shadowRoot.getElementById('messageBox');
const messageBox = this.shadowRoot.getElementById('messageBox') const messageText = messageBox.value;
const messageText = messageBox.value let recipient;
let recipient
const validateName = async (receiverName) => { const validateName = async (receiverName) => {
let myRes let myRes;
let myNameRes = await parentEpml.request('apiCall', { let myNameRes = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/names/${receiverName}` url: `/names/${receiverName}`
}) });
if (myNameRes.error === 401) { if (myNameRes.error === 401) {
myRes = false myRes = false;
} else { } else {
myRes = myNameRes myRes = myNameRes;
} };
return myRes;
};
return myRes const myNameRes = await validateName(_recipient);
}
const myNameRes = await validateName(_recipient)
if (!myNameRes) { if (!myNameRes) {
recipient = _recipient;
recipient = _recipient
} else { } else {
recipient = myNameRes.owner;
recipient = myNameRes.owner };
}
let _reference = new Uint8Array(64); let _reference = new Uint8Array(64);
window.crypto.getRandomValues(_reference); window.crypto.getRandomValues(_reference);
let sendTimestamp = Date.now() let sendTimestamp = Date.now();
let reference = window.parent.Base58.encode(_reference) let reference = window.parent.Base58.encode(_reference);
const getAddressPublicKey = async () => { const getAddressPublicKey = async () => {
let isEncrypted let isEncrypted;
let _publicKey let _publicKey;
let addressPublicKey = await parentEpml.request('apiCall', { let addressPublicKey = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/addresses/publickey/${recipient}` url: `/addresses/publickey/${recipient}`
}) })
if (addressPublicKey.error === 102) { if (addressPublicKey.error === 102) {
_publicKey = false _publicKey = false;
// Do something here... // Do something here...
let err1string = get("welcomepage.wcchange7") let err1string = get("welcomepage.wcchange7");
parentEpml.request('showSnackBar', `${err1string}`) parentEpml.request('showSnackBar', `${err1string}`);
this.isLoading = false this.isLoading = false;
} else if (addressPublicKey !== false) { } else if (addressPublicKey !== false) {
isEncrypted = 1 isEncrypted = 1;
_publicKey = addressPublicKey _publicKey = addressPublicKey;
sendMessageRequest(isEncrypted, _publicKey) sendMessageRequest(isEncrypted, _publicKey);
} else { } else {
isEncrypted = 0 isEncrypted = 0;
_publicKey = this.selectedAddress.address _publicKey = this.selectedAddress.address;
sendMessageRequest(isEncrypted, _publicKey) sendMessageRequest(isEncrypted, _publicKey);
} };
}; };
const sendMessageRequest = async (isEncrypted, _publicKey) => { const sendMessageRequest = async (isEncrypted, _publicKey) => {
@ -407,8 +405,8 @@ class ChatWelcomePage extends LitElement {
images: [''], images: [''],
repliedTo: '', repliedTo: '',
version: 1 version: 1
} };
const stringifyMessageObject = JSON.stringify(messageObject) const stringifyMessageObject = JSON.stringify(messageObject);
let chatResponse = await parentEpml.request('chat', { let chatResponse = await parentEpml.request('chat', {
type: 18, type: 18,
nonce: this.selectedAddress.nonce, nonce: this.selectedAddress.nonce,
@ -424,7 +422,6 @@ class ChatWelcomePage extends LitElement {
isText: 1 isText: 1
} }
}) })
_computePow(chatResponse) _computePow(chatResponse)
} }

6
qortal-ui-plugins/plugins/core/components/NameMenu.js
View File

@ -232,7 +232,11 @@ class NameMenu extends LitElement {
<p style="margin-bottom:0;"> <p style="margin-bottom:0;">
<textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea> <textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea>
</p> </p>
<mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${this._sendMessage}>${translate("welcomepage.wcchange6")}</mwc-button> <mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${() => {
this._sendMessage();
}
}>
${translate("welcomepage.wcchange6")}</mwc-button>
<mwc-button <mwc-button
?disabled="${this.isLoading}" ?disabled="${this.isLoading}"
slot="secondaryAction" slot="secondaryAction"