mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-04-16 16:15:54 +00:00
Added forward message user lookup
This commit is contained in:
Justin Ferrari
parent
87f4ebff96
commit
8be65cff5c
BIN
qortal-ui-core/font/KoHo.ttf
Normal file
BIN
qortal-ui-core/font/KoHo.ttf
Normal file
Binary file not shown.
BIN
qortal-ui-core/font/Livvic.ttf
Normal file
BIN
qortal-ui-core/font/Livvic.ttf
Normal file
Binary file not shown.
@ -18,6 +18,20 @@
|
||||
url(Montserrat.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'KoHo';
|
||||
src: local('KoHo'),
|
||||
local('KoHo'),
|
||||
url(KoHo.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Livvic';
|
||||
src: local('Livvic'),
|
||||
local('Livvic'),
|
||||
url(Livvic.ttf) format('truetype');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
|
||||
@ -466,7 +466,7 @@
|
||||
"cchange4": "New Message",
|
||||
"cchange5": "(Click to scroll down)",
|
||||
"cchange6": "Type the name or address of who you want to chat with to send a private message! You can validate the person's name by clicking on the book icon.",
|
||||
"cchange7": "Name / Address",
|
||||
"cchange7": "Username / Address",
|
||||
"cchange8": "Message...",
|
||||
"cchange9": "Send",
|
||||
"cchange10": "Blocked Users List",
|
||||
@ -478,7 +478,7 @@
|
||||
"cchange16": "Successfully unblocked this user.",
|
||||
"cchange17": "Error occurred when trying to unblock this user. Please try again!",
|
||||
"cchange18": "unblock",
|
||||
"cchange19": "Invalid Name / Address, Check the name / address and retry...",
|
||||
"cchange19": "Invalid Username / Address, Check the name / address and retry...",
|
||||
"cchange20": "Message Sent Successfully!",
|
||||
"cchange21": "Sending failed, Please retry...",
|
||||
"cchange22": "Loading Messages...",
|
||||
@ -495,7 +495,8 @@
|
||||
"cchange34": "This chat message is using an older message version and cannot use this feature.",
|
||||
"cchange35": "Error when trying to fetch the user's name. Please try again!",
|
||||
"cchange36": "Search Results",
|
||||
"cchange37": "No Results Found"
|
||||
"cchange37": "No Results Found",
|
||||
"cchange38": "User Verified"
|
||||
},
|
||||
"welcomepage": {
|
||||
"wcchange1": "Welcome to Q-Chat",
|
||||
@ -524,7 +525,7 @@
|
||||
"bcchange13": "Reaction",
|
||||
"bcchange14": "Forward",
|
||||
"bcchange15": "Message Forwarded",
|
||||
"bcchange16": "Choose recipient",
|
||||
"bcchange16": "Choose Recipient or Search for One Below",
|
||||
"bcchange17": "FORWARDED"
|
||||
},
|
||||
"grouppage": {
|
||||
|
||||
@ -14,19 +14,19 @@ import './ChatScroller.js';
|
||||
import './LevelFounder.js';
|
||||
import './NameMenu.js';
|
||||
import './TimeAgo.js';
|
||||
import './ChatTextEditor';
|
||||
import './WrapperModal';
|
||||
import './ChatTextEditor.js';
|
||||
import './WrapperModal.js';
|
||||
import './ChatSelect.js'
|
||||
import './ChatSeachResults.js';
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js';
|
||||
import '@material/mwc-button';
|
||||
import '@material/mwc-dialog';
|
||||
import '@material/mwc-icon';
|
||||
import { replaceMessagesEdited } from '../../utils/replace-messages-edited.js';
|
||||
import { publishData } from '../../utils/publish-image.js';
|
||||
import { EmojiPicker } from 'emoji-picker-js';
|
||||
import WebWorker from 'web-worker:./computePowWorker.js';
|
||||
import WebWorkerImage from 'web-worker:./computePowWorkerImage.js';
|
||||
import { EmojiPicker } from 'emoji-picker-js';
|
||||
|
||||
|
||||
// const messagesCache = localForage.createInstance({
|
||||
// name: "messages-cache",
|
||||
@ -67,12 +67,14 @@ class ChatPage extends LitElement {
|
||||
chatEditorNewChat: { type: Object },
|
||||
userLanguage: { type: String },
|
||||
lastMessageRefVisible: { type: Boolean },
|
||||
isLoadingOldMessages: {type: Boolean},
|
||||
isLoadingOldMessages: { type: Boolean },
|
||||
isEditMessageOpen: { type: Boolean },
|
||||
webSocket: {attribute: false},
|
||||
chatHeads: {type: Array},
|
||||
forwardActiveChatHeadUrl: {type: String},
|
||||
openForwardOpen: {type: Boolean}
|
||||
webSocket: { attribute: false },
|
||||
chatHeads: { type: Array },
|
||||
forwardActiveChatHeadUrl: { type: Object },
|
||||
openForwardOpen: {type: Boolean },
|
||||
userFound: { type: Array },
|
||||
userFoundModalOpen: { type: Boolean },
|
||||
}
|
||||
}
|
||||
|
||||
@ -88,6 +90,7 @@ class ChatPage extends LitElement {
|
||||
flex-direction: column;
|
||||
height: 50vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -343,7 +346,7 @@ class ChatPage extends LitElement {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
@ -381,6 +384,7 @@ class ChatPage extends LitElement {
|
||||
.dialogCustomInner ul {
|
||||
padding-left: 0px
|
||||
}
|
||||
|
||||
.dialogCustomInner li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -443,8 +447,18 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
.dialog-container-title {
|
||||
font-family: Montserrat;
|
||||
color: var(--black);
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--chat-bubble-msg-color);
|
||||
user-select: none;
|
||||
width: 70%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dialog-container-loader {
|
||||
@ -475,7 +489,7 @@ class ChatPage extends LitElement {
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.last-message-ref:hover {
|
||||
cursor: pointer;
|
||||
@ -524,9 +538,112 @@ class ChatPage extends LitElement {
|
||||
cursor: pointer;
|
||||
background-color: #03a8f475;
|
||||
}
|
||||
`
|
||||
|
||||
.name-input {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
outline: 0;
|
||||
border-width: 0 0 2px;
|
||||
border-color: var(--mdc-theme-primary);
|
||||
background-color: transparent;
|
||||
padding: 10px;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 15px;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
}
|
||||
|
||||
.name-input::selection {
|
||||
background-color: var(--mdc-theme-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.name-input::placeholder {
|
||||
opacity: 0.9;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.search-results-div {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 0;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
transition: all 0.3s ease-in-out;
|
||||
background: none;
|
||||
border-radius: 50%;
|
||||
padding: 6px 3px;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.search-icon:hover {
|
||||
cursor: pointer;
|
||||
background: #d7d7d75c;
|
||||
}
|
||||
|
||||
.user-verified {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #04aa2e;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
|
||||
padding: 18px 20px;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
border-radius: 5px;
|
||||
background-color: #ececec96;
|
||||
}
|
||||
|
||||
.user-selected-name {
|
||||
font-family: Roboto, sans-serif;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.forwarding-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.user-selected-forwarding {
|
||||
font-family: Livvic, sans-serif;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.close-forwarding {
|
||||
color: #676b71;
|
||||
width: 14px;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.close-forwarding:hover {
|
||||
cursor: pointer;
|
||||
color: #4e5054;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.getOldMessage = this.getOldMessage.bind(this)
|
||||
@ -569,11 +686,17 @@ class ChatPage extends LitElement {
|
||||
boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
|
||||
});
|
||||
this.openForwardOpen = false
|
||||
this.userFoundModalOpen = false
|
||||
this.userFound = []
|
||||
this.forwardActiveChatHeadUrl = {
|
||||
url: "",
|
||||
name: "",
|
||||
selected: false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
console.log(25, 'here');
|
||||
return html`
|
||||
<div class="chat-container">
|
||||
<div>
|
||||
@ -702,14 +825,15 @@ class ChatPage extends LitElement {
|
||||
</div>
|
||||
<div class="modal-button-row">
|
||||
<button class="modal-button-red" @click=${() => {
|
||||
this.chatEditorNewChat.resetValue()
|
||||
this.removeImage()
|
||||
this.chatEditorNewChat.resetValue();
|
||||
this.removeImage();
|
||||
}}>
|
||||
${translate("chatpage.cchange33")}
|
||||
</button>
|
||||
<button
|
||||
class="modal-button"
|
||||
@click=${()=> {
|
||||
console.log("image here");
|
||||
const chatTextEditor = this.shadowRoot.getElementById('chatTextCaption')
|
||||
chatTextEditor.sendMessageFunc({
|
||||
type: 'image',
|
||||
@ -725,8 +849,10 @@ class ChatPage extends LitElement {
|
||||
</wrapper-modal>
|
||||
<wrapper-modal
|
||||
.onClickFunc=${() => {
|
||||
this.openForwardOpen = false
|
||||
this.forwardActiveChatHeadUrl = ""
|
||||
this.openForwardOpen = false;
|
||||
this.forwardActiveChatHeadUrl = {};
|
||||
this.chatEditor.enable();
|
||||
this.requestUpdate();
|
||||
} }
|
||||
style=${this.openForwardOpen ? "display: block" : "display: none"}>
|
||||
<div>
|
||||
@ -734,18 +860,88 @@ class ChatPage extends LitElement {
|
||||
<div>
|
||||
<p class="dialog-container-title">${translate("blockpage.bcchange16")}</p>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="chat-head-container">
|
||||
${this.chatHeads.map((item)=> {
|
||||
return html`<chat-select activeChatHeadUrl=${this.forwardActiveChatHeadUrl} .setActiveChatHeadUrl=${(val)=> {
|
||||
this.forwardActiveChatHeadUrl = val
|
||||
}} chatInfo=${JSON.stringify(item)}></chat-select>`
|
||||
<div class="search-field">
|
||||
<input
|
||||
type="text"
|
||||
class="name-input"
|
||||
id="sendTo"
|
||||
placeholder="${translate("chatpage.cchange7")}"
|
||||
@keydown=${() => {
|
||||
this.forwardActiveChatHeadUrl = {};
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
/>
|
||||
${this.forwardActiveChatHeadUrl.selected ? (
|
||||
html`
|
||||
<div class="user-verified">
|
||||
<p >${translate("chatpage.cchange38")}</p>
|
||||
<vaadin-icon icon="vaadin:check-circle-o" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
`
|
||||
) : (
|
||||
html`
|
||||
<vaadin-icon
|
||||
@click=${this.userSearch}
|
||||
slot="icon"
|
||||
icon="vaadin:open-book"
|
||||
class="search-icon">
|
||||
</vaadin-icon>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
${this.forwardActiveChatHeadUrl.selected ? (
|
||||
html`
|
||||
<div class="user-selected">
|
||||
<p class="user-selected-name">
|
||||
${this.forwardActiveChatHeadUrl.name}
|
||||
</p>
|
||||
<div class="forwarding-container">
|
||||
<p class="user-selected-forwarding">
|
||||
Forwarding...
|
||||
</p>
|
||||
<vaadin-icon
|
||||
class="close-forwarding"
|
||||
icon="vaadin:close-big"
|
||||
slot="icon"
|
||||
@click=${() => {
|
||||
this.userFound = [];
|
||||
this.forwardActiveChatHeadUrl = {};
|
||||
this.requestUpdate();
|
||||
this.shadowRoot.getElementById("sendTo").value = "";
|
||||
}}>
|
||||
</vaadin-icon>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
) : (
|
||||
html`
|
||||
${this.chatHeads.map((item) => {
|
||||
return html`
|
||||
<chat-select
|
||||
activeChatHeadUrl=${this.forwardActiveChatHeadUrl.url}
|
||||
.setActiveChatHeadUrl=${(val)=> {
|
||||
this.forwardActiveChatHeadUrl = {
|
||||
...this.forwardActiveChatHeadUrl,
|
||||
url: val
|
||||
};
|
||||
this.userFound = [];
|
||||
}}
|
||||
chatInfo=${JSON.stringify(item)}>
|
||||
</chat-select>`
|
||||
})}
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="modal-button-row">
|
||||
<button class="modal-button-red" @click=${() => {
|
||||
this.openForwardOpen = false
|
||||
this.forwardActiveChatHeadUrl = ""
|
||||
this.openForwardOpen = false;
|
||||
this.forwardActiveChatHeadUrl = {};
|
||||
this.chatEditor.enable();
|
||||
this.requestUpdate();
|
||||
}}>
|
||||
${translate("chatpage.cchange33")}
|
||||
</button>
|
||||
@ -760,47 +956,73 @@ class ChatPage extends LitElement {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-results-div">
|
||||
<chat-search-results
|
||||
.onClickFunc=${(result) => {
|
||||
this.forwardActiveChatHeadUrl = {
|
||||
...this.forwardActiveChatHeadUrl,
|
||||
url: `direct/${result.owner}`,
|
||||
name: result.name,
|
||||
selected: true
|
||||
};
|
||||
this.userFound = [];
|
||||
this.userFoundModalOpen = false;
|
||||
}}
|
||||
.closeFunc=${() => {
|
||||
this.userFoundModalOpen = false;
|
||||
this.userFound = [];
|
||||
}}
|
||||
.searchResults=${this.userFound}
|
||||
?isOpen=${this.userFoundModalOpen}
|
||||
?loading=${this.isLoading}>
|
||||
</chat-search-results>
|
||||
</div>
|
||||
</div>
|
||||
</wrapper-modal>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
async userSearch() {
|
||||
const nameValue = this.shadowRoot.getElementById('sendTo').value;
|
||||
if (!nameValue) {
|
||||
this.userFound = [];
|
||||
this.userFoundModalOpen = true;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const result = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/names/${nameValue}`
|
||||
})
|
||||
if (result.error === 401) {
|
||||
this.userFound = [];
|
||||
} else {
|
||||
this.userFound = [
|
||||
...this.userFound,
|
||||
result,
|
||||
];
|
||||
}
|
||||
this.userFoundModalOpen = true;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
let err4string = get("chatpage.cchange35");
|
||||
parentEpml.request('showSnackBar', `${err4string}`)
|
||||
}
|
||||
}
|
||||
|
||||
setForwardProperties(forwardedMessage){
|
||||
this.openForwardOpen = true
|
||||
this.forwardedMessage = forwardedMessage
|
||||
}
|
||||
|
||||
async sendForwardMessage(){
|
||||
let parsedMessageObj = {}
|
||||
let publicKey = {
|
||||
hasPubKey: false,
|
||||
key: ''
|
||||
}
|
||||
async sendForwardMessage() {
|
||||
let parsedMessageObj = {};
|
||||
try {
|
||||
parsedMessageObj = JSON.parse(this.forwardedMessage);
|
||||
|
||||
} catch (error) {
|
||||
parsedMessageObj = {}
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/addresses/publickey/${this.forwardChatId}`
|
||||
})
|
||||
if (res.error === 102) {
|
||||
publicKey.key = ''
|
||||
publicKey.hasPubKey = false
|
||||
} else if (res !== false) {
|
||||
publicKey.key = res
|
||||
publicKey.hasPubKey = true
|
||||
} else {
|
||||
publicKey.key = ''
|
||||
publicKey.hasPubKey = false
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
catch (error) {
|
||||
parsedMessageObj = {};
|
||||
}
|
||||
|
||||
try {
|
||||
@ -809,17 +1031,10 @@ class ChatPage extends LitElement {
|
||||
type: 'forward'
|
||||
}
|
||||
delete message.reactions
|
||||
const stringifyMessageObject = JSON.stringify(message)
|
||||
this.sendMessage(stringifyMessageObject, undefined, '', true, {
|
||||
isReceipient: true,
|
||||
chatId: 'Qdxha59Cm1Ty4QkKMBWPnKrNigcDCDk6eq',
|
||||
publicKey: {
|
||||
hasPubKey: false,
|
||||
key: ''
|
||||
}
|
||||
})
|
||||
const stringifyMessageObject = JSON.stringify(message);
|
||||
this.sendMessage(stringifyMessageObject, undefined, '', true)
|
||||
} catch (error) {
|
||||
console.log({error})
|
||||
console.log({error});
|
||||
}
|
||||
}
|
||||
|
||||
@ -949,10 +1164,20 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (changedProperties && changedProperties.has('chatId') && changedProperties.get('chatId')) {
|
||||
await this.initUpdate()
|
||||
}
|
||||
|
||||
if (changedProperties && changedProperties.has('openForwardOpen')) {
|
||||
if (this.openForwardOpen === true) {
|
||||
this.chatEditor.disable();
|
||||
}
|
||||
}
|
||||
|
||||
if (changedProperties && changedProperties.has('forwardActiveChatHeadUrl')) {
|
||||
console.log(this.forwardActiveChatHeadUrl, "forwardActiveChatHeadUrl here");
|
||||
}
|
||||
}
|
||||
|
||||
async renderPlaceholder() {
|
||||
@ -1448,7 +1673,7 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
async _sendMessage(outSideMsg) {
|
||||
|
||||
console.log(outSideMsg);
|
||||
// have params to determine if it's a reply or not
|
||||
// have variable to determine if it's a response, holds signature in constructor
|
||||
// need original message signature
|
||||
@ -1752,7 +1977,7 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
async sendMessage(messageText, typeMessage, chatReference, isForward, forwardParams) {
|
||||
async sendMessage(messageText, typeMessage, chatReference, isForward) {
|
||||
this.isLoading = true;
|
||||
|
||||
let _reference = new Uint8Array(64);
|
||||
@ -1801,19 +2026,67 @@ class ChatPage extends LitElement {
|
||||
};
|
||||
|
||||
const sendForwardRequest = async () => {
|
||||
const { publicKey } = forwardParams
|
||||
let publicKey = {
|
||||
hasPubKey: false,
|
||||
key: ''
|
||||
};
|
||||
|
||||
const isRecipient = this.forwardActiveChatHeadUrl.includes('direct') === true ? true : false;
|
||||
if (this.forwardActiveChatHeadUrl.url) {
|
||||
const activeChatHeadAddress = this.forwardActiveChatHeadUrl.url.split('/')[1]
|
||||
try {
|
||||
const res = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/addresses/publickey/${activeChatHeadAddress}`
|
||||
})
|
||||
|
||||
const chatId = this.forwardActiveChatHeadUrl.split('/')[1];
|
||||
this.openForwardOpen = false
|
||||
if (res.error === 102) {
|
||||
publicKey.key = ''
|
||||
publicKey.hasPubKey = false
|
||||
} else if (res !== false) {
|
||||
publicKey.key = res
|
||||
publicKey.hasPubKey = true
|
||||
} else {
|
||||
publicKey.key = ''
|
||||
publicKey.hasPubKey = false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.forwardActiveChatHeadUrl && this.shadowRoot.getElementById("sendTo").value !== "") {
|
||||
try {
|
||||
const res = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/addresses/publickey/${this.shadowRoot.getElementById("sendTo").value}`
|
||||
})
|
||||
if (res.error === 102) {
|
||||
publicKey.key = ''
|
||||
publicKey.hasPubKey = false
|
||||
} else if (res !== false) {
|
||||
publicKey.key = res
|
||||
publicKey.hasPubKey = true
|
||||
} else {
|
||||
publicKey.key = ''
|
||||
publicKey.hasPubKey = false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
const isRecipient = this.forwardActiveChatHeadUrl.url.includes('direct') === true ? true : false;
|
||||
|
||||
const recipientAddress = this.forwardActiveChatHeadUrl.url.split('/')[1];
|
||||
this.openForwardOpen = false;
|
||||
this.chatEditor.enable();
|
||||
if (isRecipient === true) {
|
||||
let chatResponse = await parentEpml.request('chat', {
|
||||
type: 18,
|
||||
nonce: this.selectedAddress.nonce,
|
||||
params: {
|
||||
timestamp: Date.now(),
|
||||
recipient: chatId,
|
||||
recipient: recipientAddress,
|
||||
recipientPublicKey: publicKey.key,
|
||||
hasChatReference: 0,
|
||||
chatReference: "",
|
||||
@ -1832,7 +2105,7 @@ class ChatPage extends LitElement {
|
||||
nonce: this.selectedAddress.nonce,
|
||||
params: {
|
||||
timestamp: Date.now(),
|
||||
groupID: Number(chatId),
|
||||
groupID: Number(recipientAddress),
|
||||
hasReceipient: 0,
|
||||
hasChatReference: 0,
|
||||
chatReference: chatReference,
|
||||
@ -1900,9 +2173,9 @@ class ChatPage extends LitElement {
|
||||
this.forwardActiveChatHeadUrl = ""
|
||||
};
|
||||
|
||||
if(isForward){
|
||||
if (isForward) {
|
||||
sendForwardRequest();
|
||||
return
|
||||
return;
|
||||
}
|
||||
sendMessageRequest();
|
||||
}
|
||||
|
||||
@ -16,7 +16,6 @@ export class ChatSearchResults extends LitElement {
|
||||
static styles = [chatSearchResultsStyles]
|
||||
|
||||
render() {
|
||||
console.log(10, "search results here");
|
||||
return html`
|
||||
<div class="chat-results-card" style=${this.isOpen ? "display: block;" : "display: none;"}>
|
||||
<vaadin-icon
|
||||
@ -49,7 +48,7 @@ export class ChatSearchResults extends LitElement {
|
||||
this.onClickFunc(result);
|
||||
}}>
|
||||
<p class="chat-result">
|
||||
${result}
|
||||
${result.name}
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
|
||||
@ -57,6 +57,10 @@ class ChatSelect extends LitElement {
|
||||
color: #92959e;
|
||||
}
|
||||
|
||||
.name {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
@ -122,13 +126,60 @@ class ChatSelect extends LitElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
|
||||
${this.isImageLoaded ? html`${avatarImg}` : html`` }
|
||||
${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html`` }
|
||||
${!this.isImageLoaded && this.chatInfo.name ? html`<div style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''}
|
||||
${!this.isImageLoaded && this.chatInfo.groupName ? html`<div style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''}
|
||||
<li
|
||||
@click=${() => this.getUrl(this.chatInfo.url)}
|
||||
class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
|
||||
${this.isImageLoaded ? html`${avatarImg}` : html``}
|
||||
${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` :
|
||||
html``
|
||||
}
|
||||
${!this.isImageLoaded && this.chatInfo.name ?
|
||||
html`
|
||||
<div
|
||||
style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ?
|
||||
'var(--chatHeadBgActive)' :
|
||||
'var(--chatHeadBg)' };
|
||||
color: ${this.activeChatHeadUrl === this.chatInfo.url ?
|
||||
'var(--chatHeadTextActive)' :
|
||||
'var(--chatHeadText)'};
|
||||
font-weight:bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-transform: capitalize">
|
||||
${this.chatInfo.name.charAt(0)}
|
||||
</div>`:
|
||||
''}
|
||||
${!this.isImageLoaded && this.chatInfo.groupName ?
|
||||
html`
|
||||
<div
|
||||
style="width:40px;
|
||||
height:40px;
|
||||
float: left;
|
||||
border-radius:50%;
|
||||
background: ${this.activeChatHeadUrl === this.chatInfo.url ?
|
||||
'var(--chatHeadBgActive)' :
|
||||
'var(--chatHeadBg)' };
|
||||
color: ${this.activeChatHeadUrl === this.chatInfo.url ?
|
||||
'var(--chatHeadTextActive)' :
|
||||
'var(--chatHeadText)' };
|
||||
font-weight:bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-transform: capitalize">
|
||||
${this.chatInfo.groupName.charAt(0)}
|
||||
</div>`:
|
||||
''}
|
||||
<div class="about">
|
||||
<div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> </div>
|
||||
<div class="name">
|
||||
<span style="float:left; padding-left: 8px; color: var(--chat-group);">
|
||||
${this.chatInfo.groupName ?
|
||||
this.chatInfo.groupName :
|
||||
this.chatInfo.name !== undefined ? this.chatInfo.name :
|
||||
this.chatInfo.address.substr(0, 15)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
|
||||
@ -363,14 +363,14 @@ class ChatTextEditor extends LitElement {
|
||||
return true
|
||||
}
|
||||
|
||||
sendMessageFunc() {
|
||||
sendMessageFunc(props) {
|
||||
if (this.chatMessageSize > 1000 ) {
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
|
||||
return;
|
||||
};
|
||||
this.chatMessageSize = 0;
|
||||
this.chatEditor.updateMirror();
|
||||
this._sendMessage();
|
||||
this._sendMessage(props);
|
||||
}
|
||||
|
||||
getMessageSize(message){
|
||||
|
||||
@ -42,17 +42,16 @@ class Chat extends LitElement {
|
||||
privateMessagePlaceholder: { type: String},
|
||||
chatEditor: { type: Object },
|
||||
imageFile: { type: Object },
|
||||
activeChatHeadUrl: {type: String},
|
||||
activeChatHeadUrl: { type: String },
|
||||
openPrivateMessage: { type: Boolean },
|
||||
userFound: { type: Array},
|
||||
userFoundModalOpen: { type: Boolean },
|
||||
userSelected: { type: String}
|
||||
userSelected: { type: Object }
|
||||
}
|
||||
}
|
||||
|
||||
static styles = [qchatStyles]
|
||||
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.selectedAddress = {}
|
||||
@ -84,7 +83,7 @@ class Chat extends LitElement {
|
||||
this.openPrivateMessage = false
|
||||
this.userFound = []
|
||||
this.userFoundModalOpen = false
|
||||
this.userSelected = ''
|
||||
this.userSelected = {}
|
||||
}
|
||||
|
||||
async setActiveChatHeadUrl(url) {
|
||||
@ -94,7 +93,6 @@ class Chat extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(22, "here");
|
||||
return html`
|
||||
<div class="container clearfix">
|
||||
<div class="people-list" id="people-list">
|
||||
@ -149,13 +147,16 @@ class Chat extends LitElement {
|
||||
?disabled=${this.isLoading}
|
||||
id="sendTo"
|
||||
placeholder="${translate("chatpage.cchange7")}"
|
||||
value=${this.userSelected}
|
||||
@keypress=${() => this.userSelected = ""}
|
||||
value=${this.userSelected.name}
|
||||
@keypress=${() => {
|
||||
this.userSelected = {};
|
||||
this.requestUpdate();
|
||||
}}
|
||||
/>
|
||||
${this.userSelected ? (
|
||||
${this.userSelected.name ? (
|
||||
html`
|
||||
<div class="user-verified">
|
||||
<p >User Verified</p>
|
||||
<p >${translate("chatpage.cchange38")}</p>
|
||||
<vaadin-icon icon="vaadin:check-circle-o" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
`
|
||||
@ -198,7 +199,7 @@ class Chat extends LitElement {
|
||||
</button>
|
||||
<button
|
||||
class="modal-button"
|
||||
@click=${this.sendMessageFunc}
|
||||
@click=${this._sendMessage}
|
||||
?disabled="${this.isLoading}">
|
||||
${this.isLoading === false
|
||||
? this.renderSendText()
|
||||
@ -394,15 +395,6 @@ class Chat extends LitElement {
|
||||
parentEpml.imReady()
|
||||
}
|
||||
|
||||
async updated(changedProperties) {
|
||||
if (changedProperties && changedProperties.has('userFound')) {
|
||||
console.log(this.userFound, "user found array here");
|
||||
}
|
||||
if (changedProperties && changedProperties.has('userSelected')) {
|
||||
console.log(this.userSelected, "user selected here");
|
||||
}
|
||||
}
|
||||
|
||||
async userSearch() {
|
||||
const nameValue = this.shadowRoot.getElementById('sendTo').value;
|
||||
if(!nameValue) {
|
||||
@ -420,7 +412,7 @@ class Chat extends LitElement {
|
||||
} else {
|
||||
this.userFound = [
|
||||
...this.userFound,
|
||||
result.name,
|
||||
result,
|
||||
];
|
||||
}
|
||||
this.userFoundModalOpen = true;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user