jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Added caption logic & Fixed edit msg styling bug

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-08 22:30:02 -05:00
parent dc489b35f3
commit 83c851d371
2 changed files with 39 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,12 +129,14 @@ class ChatPage extends LitElement {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 15px; gap: 15px;
width: 100%;
} }
.repliedTo-message { .repliedTo-message {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
width: 95%;
} }
@ -146,6 +148,10 @@ class ChatPage extends LitElement {
} }
.original-message { .original-message {
color: black;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0; margin: 0;
} }
@ -474,7 +480,7 @@ class ChatPage extends LitElement {
<mwc-dialog <mwc-dialog
id="showDialogPublicKey" id="showDialogPublicKey"
?open=${this.imageFile} ?open=${this.imageFile}
@closed=${()=> { @closed=${() => {
this.chatEditor.enable(); this.chatEditor.enable();
this.caption = ""; this.caption = "";
this.imageFile = null; this.imageFile = null;
@ -493,7 +499,13 @@ class ChatPage extends LitElement {
src="/img/qchat-send-message-icon.svg" src="/img/qchat-send-message-icon.svg"
alt="send-icon" alt="send-icon"
class="send-icon" class="send-icon"
@click=${() => this._sendMessage()} /> @click=${()=> {
this._sendMessage({
type: 'image',
imageFile: this.imageFile,
caption: this.caption,
})
}} />
` : ` :
html` html`
<paper-spinner-lite active></paper-spinner-lite> <paper-spinner-lite active></paper-spinner-lite>
@ -515,8 +527,7 @@ class ChatPage extends LitElement {
dialogAction="cancel" dialogAction="cancel"
class="red" class="red"
@click=${()=>{ @click=${()=>{
this.imageFile = null
this.imageFile = null
}} }}
> >
${translate("chatpage.cchange30")} ${translate("chatpage.cchange30")}
@ -525,12 +536,11 @@ class ChatPage extends LitElement {
slot="primaryAction" slot="primaryAction"
dialogAction="cancel" dialogAction="cancel"
@click=${()=> { @click=${()=> {
// this._sendMessage({ this._sendMessage({
// type: 'image', type: 'image',
// imageFile: this.imageFile, imageFile: this.imageFile,
// caption: 'This is a caption' caption: this.caption,
// }) })
console.log(this.caption);
}} }}
> >
${translate("chatpage.cchange9")} ${translate("chatpage.cchange9")}
@ -1371,16 +1381,17 @@ class ChatPage extends LitElement {
const getName = async (recipient)=> { const getName = async (recipient)=> {
try { try {
const getNames = await parentEpml.request("apiCall", { const getNames = await parentEpml.request("apiCall", {
type: "api", type: "api",
url: `/names/address/${recipient}`, url: `/names/address/${recipient}`,
}) });
if(Array.isArray(getNames) && getNames.length > 0 ){
if (Array.isArray(getNames) && getNames.length > 0 ) {
return getNames[0].name return getNames[0].name
} else { } else {
return '' return ''
} }
} catch (error) { } catch (error) {
return "" return ""
} }
@ -1433,10 +1444,10 @@ class ChatPage extends LitElement {
}) })
try { try {
await publishData({ await publishData({
registeredName: userName , registeredName: userName,
file : compressedFile , file : compressedFile,
service: 'IMAGE', service: 'IMAGE',
identifier : identifier, identifier: identifier,
parentEpml, parentEpml,
metaData: undefined, metaData: undefined,
uploadType: 'file', uploadType: 'file',
@ -1538,23 +1549,24 @@ class ChatPage extends LitElement {
repliedTo: '', repliedTo: '',
version: 1 version: 1
} }
const stringifyMessageObject = JSON.stringify(messageObject) const stringifyMessageObject = JSON.stringify(messageObject);
this.sendMessage(stringifyMessageObject, typeMessage); this.sendMessage(stringifyMessageObject, typeMessage);
} else if(outSideMsg && outSideMsg.type === 'reaction'){ } else if (outSideMsg && outSideMsg.type === 'reaction') {
typeMessage = 'edit' typeMessage = 'edit';
let chatReference = outSideMsg.editedMessageObj.reference let chatReference = outSideMsg.editedMessageObj.reference;
if(outSideMsg.editedMessageObj.chatReference){ if (outSideMsg.editedMessageObj.chatReference) {
chatReference = outSideMsg.editedMessageObj.chatReference chatReference = outSideMsg.editedMessageObj.chatReference;
} }
let message = "" let message = "";
try { try {
const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage) const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
message = parsedMessageObj message = parsedMessageObj;
} catch (error) { } catch (error) {
message = outSideMsg.editedMessageObj.decodedMessage message = outSideMsg.editedMessageObj.decodedMessage;
} }
let reactions = message.reactions || [] let reactions = message.reactions || []

2
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
View File

@ -371,6 +371,6 @@ export const chatStyles = css`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 80vh; height: 100%;
} }
` `