Browse Source

Started UI Fixes

q-apps
Justin Ferrari 2 years ago
parent
commit
d6bffbeaa9
  1. 34
      qortal-ui-plugins/plugins/core/components/ChatModals.js
  2. 106
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  3. 97
      qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js
  4. 6
      qortal-ui-plugins/plugins/core/components/NameMenu.js

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

@ -92,11 +92,11 @@ class ChatModals extends LitElement {
// Send Private Message
_sendMessage() {
this.isLoading = true
this.isLoading = true;
const recipient = this.shadowRoot.getElementById('sendTo').value
const messageBox = this.shadowRoot.getElementById('messageBox')
const messageText = messageBox.value
const recipient = this.shadowRoot.getElementById('sendTo').value;
const messageBox = this.shadowRoot.getElementById('messageBox');
const messageText = messageBox.value;
if (recipient.length === 0) {
this.isLoading = false
@ -105,22 +105,21 @@ class ChatModals extends LitElement {
} else {
this.sendMessage()
}
}
};
async sendMessage() {
this.isLoading = true
const _recipient = this.shadowRoot.getElementById('sendTo').value
const messageBox = this.shadowRoot.getElementById('messageBox')
const messageText = messageBox.value
let recipient
this.isLoading = true;
const _recipient = this.shadowRoot.getElementById('sendTo').value;
const messageBox = this.shadowRoot.getElementById('messageBox');
const messageText = messageBox.value;
let recipient;
const validateName = async (receiverName) => {
let myRes
let myRes;
let myNameRes = await parentEpml.request('apiCall', {
type: 'api',
url: `/names/${receiverName}`
})
});
if (myNameRes.error === 401) {
myRes = false
@ -128,7 +127,7 @@ class ChatModals extends LitElement {
myRes = myNameRes
}
return myRes
return myRes;
}
const myNameRes = await validateName(_recipient)
@ -139,7 +138,6 @@ class ChatModals extends LitElement {
recipient = myNameRes.owner
}
let _reference = new Uint8Array(64);
window.crypto.getRandomValues(_reference);
@ -367,7 +365,11 @@ class ChatModals extends LitElement {
<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>
</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
?disabled='${this.isLoading}'

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

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

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

@ -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>
</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
?disabled="${this.isLoading}"
slot="secondaryAction"
@ -319,86 +323,80 @@ class ChatWelcomePage extends LitElement {
}
_sendMessage() {
this.isLoading = true
const recipient = this.shadowRoot.getElementById('sendTo').value
const messageBox = this.shadowRoot.getElementById('messageBox')
const messageText = messageBox.value
this.isLoading = true;
const recipient = this.shadowRoot.getElementById('sendTo').value;
const messageBox = this.shadowRoot.getElementById('messageBox');
const messageText = messageBox.value;
if (recipient.length === 0) {
this.isLoading = false
this.isLoading = false;
} else if (messageText.length === 0) {
this.isLoading = false
this.isLoading = false;
} else {
this.sendMessage()
this.sendMessage();
}
}
async sendMessage(e) {
this.isLoading = true
};
const _recipient = this.shadowRoot.getElementById('sendTo').value
const messageBox = this.shadowRoot.getElementById('messageBox')
const messageText = messageBox.value
let recipient
async sendMessage() {
this.isLoading = true;
const _recipient = this.shadowRoot.getElementById('sendTo').value;
const messageBox = this.shadowRoot.getElementById('messageBox');
const messageText = messageBox.value;
let recipient;
const validateName = async (receiverName) => {
let myRes
let myRes;
let myNameRes = await parentEpml.request('apiCall', {
type: 'api',
url: `/names/${receiverName}`
})
});
if (myNameRes.error === 401) {
myRes = false
myRes = false;
} else {
myRes = myNameRes
}
myRes = myNameRes;
};
return myRes;
};
return myRes
}
const myNameRes = await validateName(_recipient);
const myNameRes = await validateName(_recipient)
if (!myNameRes) {
recipient = _recipient
recipient = _recipient;
} else {
recipient = myNameRes.owner
}
recipient = myNameRes.owner;
};
let _reference = new Uint8Array(64);
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 () => {
let isEncrypted
let _publicKey
let isEncrypted;
let _publicKey;
let addressPublicKey = await parentEpml.request('apiCall', {
type: 'api',
url: `/addresses/publickey/${recipient}`
})
if (addressPublicKey.error === 102) {
_publicKey = false
_publicKey = false;
// Do something here...
let err1string = get("welcomepage.wcchange7")
parentEpml.request('showSnackBar', `${err1string}`)
this.isLoading = false
let err1string = get("welcomepage.wcchange7");
parentEpml.request('showSnackBar', `${err1string}`);
this.isLoading = false;
} else if (addressPublicKey !== false) {
isEncrypted = 1
_publicKey = addressPublicKey
sendMessageRequest(isEncrypted, _publicKey)
isEncrypted = 1;
_publicKey = addressPublicKey;
sendMessageRequest(isEncrypted, _publicKey);
} else {
isEncrypted = 0
_publicKey = this.selectedAddress.address
sendMessageRequest(isEncrypted, _publicKey)
}
isEncrypted = 0;
_publicKey = this.selectedAddress.address;
sendMessageRequest(isEncrypted, _publicKey);
};
};
const sendMessageRequest = async (isEncrypted, _publicKey) => {
@ -407,8 +405,8 @@ class ChatWelcomePage extends LitElement {
images: [''],
repliedTo: '',
version: 1
}
const stringifyMessageObject = JSON.stringify(messageObject)
};
const stringifyMessageObject = JSON.stringify(messageObject);
let chatResponse = await parentEpml.request('chat', {
type: 18,
nonce: this.selectedAddress.nonce,
@ -424,7 +422,6 @@ class ChatWelcomePage extends LitElement {
isText: 1
}
})
_computePow(chatResponse)
}

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

@ -232,7 +232,11 @@ class NameMenu extends LitElement {
<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>
</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
?disabled="${this.isLoading}"
slot="secondaryAction"

Loading…
Cancel
Save