Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-14 11:15:50 +00:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-11-12 13:20:09 +02:00
commit 3f099258bd
6 changed files with 264 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
qortal-ui-core/font/switch-theme.css
View File

@ -7,7 +7,9 @@ html {
--border: #d0d6de;
--border2: #dde2e8;
--copybutton: #707584;
--chat-bubble: #efefef73;
--chat-bubble: #9f9f9f0a;
--chat-bubble-bg: #f3f3f3;
--chat-bubble-msg-color: #080808;
--sectxt: #576374;
--vdicon: #707b8a;
--tradehead: #6a6c75;
@ -45,6 +47,8 @@ html[theme="dark"] {
--border2: #0b305e;
--copybutton: #d0d6de;
--chat-bubble: #9694941a;
--chat-bubble-bg: #2d3749;
--chat-bubble-msg-color: #ffffff;
--sectxt: #bbc3cd;
--vdicon: #d0d6de;
--tradehead: #008fd5;

6
qortal-ui-core/src/styles/switch-theme.css
View File

@ -7,7 +7,9 @@ html {
--border: #d0d6de;
--border2: #dde2e8;
--copybutton: #707584;
--chat-bubble: #efefef73;
--chat-bubble: #9f9f9f0a;
--chat-bubble-bg: #f3f3f3;
--chat-bubble-msg-color: #080808;
--sectxt: #576374;
--vdicon: #707b8a;
--tradehead: #6a6c75;
@ -44,6 +46,8 @@ html[theme="dark"] {
--border2: #0b305e;
--copybutton: #d0d6de;
--chat-bubble: #9694941a;
--chat-bubble-bg: #2d3749;
--chat-bubble-msg-color: #ffffff;
--sectxt: #bbc3cd;
--vdicon: #d0d6de;
--tradehead: #008fd5;

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

@ -130,6 +130,7 @@ class ChatPage extends LitElement {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
}
@ -138,7 +139,7 @@ class ChatPage extends LitElement {
display: flex;
flex-direction: column;
gap: 5px;
width: 95%;
width: 92%;
}
@ -639,13 +640,13 @@ class ChatPage extends LitElement {
<p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
<p class="original-message">${this.repliedToMessageObj.message}</p>
</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`
@ -656,36 +657,40 @@ class ChatPage extends LitElement {
<p class="senderName">${translate("chatpage.cchange25")}</p>
<p class="original-message">${this.editedMessageObj.message}</p>
</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" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}">
<div class="chatbar-container" style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'align-items: flex-end' : "align-items: center"}"
>
<div class="file-picker-container">
<vaadin-icon
class="paperclip-icon"
icon="vaadin:paperclip"
slot="icon"
@click=${() => this.closeEditMessageContainer()}
>
</vaadin-icon>
<div class="file-picker-input-container">
<input
.value="${this.imageFile}"
@change="${e => this.insertImage(e.target.files[0])}"
class="file-picker-input" type="file" name="myImage" accept="image/*" />
${this.accountName && (
html`
<div class="file-picker-container">
<vaadin-icon
class="paperclip-icon"
icon="vaadin:paperclip"
slot="icon"
@click=${() => this.closeEditMessageContainer()}
>
</vaadin-icon>
<div class="file-picker-input-container">
<input
.value="${this.imageFile}"
@change="${e => this.insertImage(e.target.files[0])}"
class="file-picker-input" type="file" name="myImage" accept="image/*" />
</div>
</div>
</div>
`
)}
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe
}}" id="_chatEditorDOM" class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
id="_chatEditorDOM" class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
</iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
@ -787,6 +792,7 @@ class ChatPage extends LitElement {
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM');
this.accountName = window.parent.reduxStore.getState().app.accountInfo.names[0];
document.addEventListener('keydown', (e) => {
if (!this.chatEditor.content.body.matches(':focus')) {
// WARNING: Deprecated methods from KeyBoard Event
@ -1515,7 +1521,7 @@ class ChatPage extends LitElement {
}
}
if(outSideMsg && outSideMsg.type === 'delete'){
if (outSideMsg && outSideMsg.type === 'delete') {
this.isDeletingImage = true
const userName = outSideMsg.name
const identifier = outSideMsg.identifier
@ -1542,19 +1548,18 @@ class ChatPage extends LitElement {
return blob;
}
const blob = b64toBlob(str, 'image/png');
await new Promise(resolve => {
new Compressor( blob, {
new Compressor(blob, {
quality: 0.6,
maxWidth: 500,
success(result){
console.log({result})
success(result) {
console.log({result});
const file = new File([result], "name", {
type: 'image/png'
});
console.log({file})
compressedFile = file
resolve()
console.log({file});
compressedFile = file;
resolve();
},
error(err) {
console.log(err.message);
@ -1617,7 +1622,7 @@ class ChatPage extends LitElement {
const identifier = `qchat_${id}`;
let compressedFile = '';
await new Promise(resolve => {
new Compressor( outSideMsg.imageFile, {
new Compressor(outSideMsg.imageFile, {
quality: .6,
maxWidth: 500,
success(result){
@ -1632,7 +1637,6 @@ class ChatPage extends LitElement {
},
})
})
const fileSize = compressedFile.size;
if (fileSize > 5000000) {
parentEpml.request('showSnackBar', get("chatpage.cchange26"));
@ -1844,8 +1848,6 @@ class ChatPage extends LitElement {
worker.postMessage({chatBytes, path, difficulty});
worker.onmessage = e => {
worker.terminate()
chatBytesArray = e.data.chatBytesArray
nonce = e.data.nonce

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

@ -82,8 +82,14 @@ export const chatStyles = css`
}
.message-data-name {
color: var(--black);
user-select: none;
color: #03a9f4;
margin-bottom: 5px;
}
.message-data-my-name {
color: #cf21e8;
text-shadow: 0 0 3px #cf21e8;
}
.message-data-time {
@ -109,21 +115,42 @@ export const chatStyles = css`
.message-container {
position: relative;
margin-bottom: 20px;
}
.message-subcontainer {
.message-subcontainer1 {
position: relative;
display: flex;
align-items: flex-end;
}
.message-subcontainer2 {
position: relative;
display: flex;
background-color: #f3f3f3;
background-color: var(--chat-bubble-bg);
flex-grow: 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
border-radius: 5px;
padding: 10px 15px;
gap: 10px;
margin-bottom: 10px;
padding: 12px 15px;
width: fit-content;
min-width: 150px;
}
.message-triangle {
position: relative;
}
.message-triangle:after {
content: "";
position: absolute;
bottom: 0px;
left: -9px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 7px 9px;
border-color: transparent transparent var(--chat-bubble-bg) transparent;
}
.message-reactions {
@ -136,16 +163,14 @@ export const chatStyles = css`
position: relative;
display: flex;
flex-direction: column;
color: black;
color: var(--chat-bubble-msg-color);
line-height: 19px;
overflow-wrap: break-word;
user-select: text;
font-size: 13px;
font-size: 15px;
width: 90%;
border-radius: 5px;
background-color: rgba(232, 232, 232, 0.79);
padding: 8px 5px 8px 25px;
white-space: nowrap;
margin-bottom: 10px;
}
.original-message:before {
@ -165,12 +190,14 @@ export const chatStyles = css`
.replied-message {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
}
.message {
color: black;
color: var(--chat-bubble-msg-color);
line-height: 19px;
word-wrap: break-word;
-webkit-user-select: text;
@ -178,12 +205,12 @@ export const chatStyles = css`
-ms-user-select: text;
user-select: text;
font-size: 16px;
width: 90%;
width: 100%;
position: relative;
}
.message-data-avatar {
margin: 0px 8px 3px 3px;
margin: 0px 10px 0px 3px;
width: 42px;
height: 42px;
float: left;
@ -207,7 +234,7 @@ export const chatStyles = css`
.chat-hover {
display: none;
position: absolute;
top: -38px;
top: -25px;
right: 5px;
}

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

@ -14,6 +14,7 @@ import '@material/mwc-button';
import '@material/mwc-dialog';
import '@material/mwc-icon';
import { EmojiPicker } from 'emoji-picker-js';
import {cropAddress} from "../../utils/cropAddress";
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@ -75,28 +76,27 @@ class ChatScroller extends LitElement {
return html`
<ul id="viewElement" class="chat-list clearfix">
<div id="upObserver"></div>
${formattedMessages.map((formattedMessage)=> {
return repeat(
${formattedMessages.map((formattedMessage) => {
return repeat(
formattedMessage.messages,
(message) => message.reference,
(message, indexMessage) => html`
<message-template
.emojiPicker=${this.emojiPicker}
.escapeHTML=${this.escapeHTML}
.messageObj=${message}
.hideMessages=${this.hideMessages}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor}
.sendMessage=${this.sendMessage}
?isfirstmessage=${indexMessage === 0}
?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
>
</message-template>`
)
(message) => message.reference,
(message, indexMessage) => html`
<message-template
.emojiPicker=${this.emojiPicker}
.escapeHTML=${this.escapeHTML}
.messageObj=${message}
.hideMessages=${this.hideMessages}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor}
.sendMessage=${this.sendMessage}
?isFirstMessage=${indexMessage === 0}
?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1}
>
</message-template>`
)
})}
<div id='downObserver'></div>
<div class='last-message-ref'>
<vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
@ -195,10 +195,11 @@ class MessageTemplate extends LitElement {
setEditedMessageObj: { type: Function },
focusChatEditor: { type: Function },
sendMessage: { type: Function },
openDialogImage: {type: Function},
isImageLoaded: {type: Boolean},
isFirstMessage: {type: Boolean},
isSingleMessageInGroup: {type: Boolean}
openDialogImage: { type: Function },
isImageLoaded: { type: Boolean },
isFirstMessage: { type: Boolean },
isSingleMessageInGroup: { type: Boolean },
isLastMessageInGroup: { type: Boolean },
}
}
@ -214,6 +215,7 @@ class MessageTemplate extends LitElement {
this.isImageLoaded = false
this.isFirstMessage = false
this.isSingleMessageInGroup = false
this.isLastMessageInGroup = false
}
static styles = [chatStyles]
@ -245,21 +247,22 @@ class MessageTemplate extends LitElement {
}
}
render() {
const hidemsg = this.hideMessages
let message = ""
let reactions = []
let repliedToData = null
let image = null
let isImageDeleted = false
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
console.log({isFirstMessage: this.isFirstMessage, isSingleMessageInGroup: this.isSingleMessageInGroup, isLastMessageInGroup: this.isLastMessageInGroup, messageText: parsedMessageObj.messageText})
const hidemsg = this.hideMessages;
let message = "";
let reactions = [];
let repliedToData = null;
let image = null;
let isImageDeleted = false;
try {
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
message = parsedMessageObj.messageText;
repliedToData = this.messageObj.repliedToData;
isImageDeleted = parsedMessageObj.isImageDeleted;
reactions = parsedMessageObj.reactions || [];
if(parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0){
if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
image = parsedMessageObj.images[0];
}
} catch (error) {
@ -284,19 +287,19 @@ class MessageTemplate extends LitElement {
avatarImg = html`<img src='/img/incognito.png' style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
}
const createImage=(imageUrl)=>{
const imageHTMLRes = new Image();
const createImage = (imageUrl) => {
const imageHTMLRes = new Image();
imageHTMLRes.src = imageUrl;
imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
imageHTMLRes.onclick= () => {
this.openDialogImage = true
this.openDialogImage = true;
}
imageHTMLRes.onload = ()=> {
this.isImageLoaded = true
imageHTMLRes.onload = () => {
this.isImageLoaded = true;
}
imageHTMLRes.onerror = ()=> {
imageHTMLRes.onerror = () => {
if (this.imageFetches < 4) {
setTimeout(()=> {
setTimeout(() => {
this.imageFetches = this.imageFetches + 1;
imageHTMLRes.src = imageUrl;
}, 500);
@ -321,11 +324,12 @@ class MessageTemplate extends LitElement {
imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
}
if (this.messageObj.sender === this.myAddress) {
nameMenu = html`<span style="color: #03a9f4;">${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>`;
} else {
nameMenu = html`<span>${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>`;
}
nameMenu = html`
<span class="${this.messageObj.sender === this.myAddress && 'message-data-my-name'}">
${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)}
</span>
`;
if (repliedToData) {
try {
const parsedMsg = JSON.parse(repliedToData.decodedMessage);
@ -338,71 +342,122 @@ class MessageTemplate extends LitElement {
const replacedMessage = escapedMessage.replace(new RegExp('\r?\n','g'), '<br />');
return hideit ? html`<li class="clearfix"></li>` : html`
<li class="clearfix message-parent">
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
<span class="message-data-name">${nameMenu}</span>
<span class="message-data-level">${levelFounder}</span>
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
</div>
<div class="message-data-avatar">
${avatarImg}
</div>
<div class="message-container">
<div class="message-subcontainer">
${repliedToData && html`
<div class="original-message">
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
<p class="replied-message">${repliedToData.decodedMessage.messageText}</p>
</div>
<li
class="clearfix message-parent"
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false && reactions.length === 0) ?
'padding-bottom: 0;'
: null}
${this.isFirstMessage && 'margin-top: 20px;'}">
${this.isFirstMessage ? (
html`
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
<span class="message-data-level">${levelFounder}</span>
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
</div>
`
) : null}
<div>
<div
class="message-container"
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) && 'margin-bottom: 0'}">
<div class="message-subcontainer1">
${(this.isSingleMessageInGroup === false ||
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true))
? (
html`
<div class="message-data-avatar">
${avatarImg}
</div>
`
) :
html`
<div class="message-data-avatar"></div>
`}
${image && !isImageDeleted ? html`
<div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}>
${imageHTML}<vaadin-icon
@click=${() => this.sendMessage({
type: 'delete',
name: image.name,
identifier: image.identifier,
editedMessageObj: this.messageObj,
})}
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
</div>
` : html``}
<div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
<div
class="${`message-subcontainer2
${((this.isFirstMessage === true && this.isSingleMessageInGroup === false) ||
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) &&
'message-triangle'}`}"
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null}
${(this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
? 'border-radius: 8px 25px 25px 8px;'
: (this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
? 'border-radius: 27px 25px 25px 12px;'
: (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?
'border-radius: 10px 25px 25px 0;'
: this.isFirstMessage === true
? 'border-radius: 25px 25px 25px 0px;'
: null
}">
${this.isFirstMessage ?
html`
<span class="message-data-name">
${nameMenu}
</span>
`
: null
}
${repliedToData && html`
<div class="original-message">
<p class="original-message-sender">
${repliedToData.sendName ?? cropAddress(repliedToData.sender)}
</p>
<p class="replied-message">
${repliedToData.decodedMessage.messageText}
</p>
</div>
`}
${image && !isImageDeleted ? html`
<div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}>
${imageHTML}<vaadin-icon
@click=${() => this.sendMessage({
type: 'delete',
name: image.name,
identifier: image.identifier,
editedMessageObj: this.messageObj,
})}
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
</div>
` : html``}
<div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
</div>
</div>
<chat-menu
tabindex="0"
class="chat-hover"
style="${this.showBlockAddressIcon ? 'display: block;' : null} ${this.isFirstMessage && 'top: -50px'}"
toblockaddress="${this.messageObj.sender}"
.showPrivateMessageModal=${() => this.showPrivateMessageModal()}
.showBlockUserModal=${() => this.showBlockUserModal()}
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
.showBlockAddressIcon=${this.showBlockAddressIcon}
.originalMessage=${{...this.messageObj, message}}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor}
.myAddress=${this.myAddress}
@blur=${() => this.showBlockIconFunc(false)}
.sendMessage=${this.sendMessage}
>
</chat-menu>
</div>
<div class="message-reactions" style="${reactions.length > 0 &&
'margin-top: 10px; margin-bottom: 5px;'}">
${reactions.map((reaction)=> {
return html`
<span
@click=${() => this.sendMessage({
type: 'reaction',
editedMessageObj: this.messageObj,
reaction: reaction.type,
})}
class="reactions-bg">
${reaction.type} ${reaction.qty}
</span>`
})}
</div>
</div>
<div class="message-reactions">
${reactions.map((reaction)=> {
return html`
<span
@click=${() => this.sendMessage({
type: 'reaction',
editedMessageObj: this.messageObj,
reaction: reaction.type,
})}
class="reactions-bg">
${reaction.type} ${reaction.qty}
</span>`
})}
</div>
<chat-menu
tabindex="0"
class="chat-hover"
style=${this.showBlockAddressIcon && "display: block"}
toblockaddress="${this.messageObj.sender}"
.showPrivateMessageModal=${() => this.showPrivateMessageModal()}
.showBlockUserModal=${() => this.showBlockUserModal()}
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
.showBlockAddressIcon=${this.showBlockAddressIcon}
.originalMessage=${{...this.messageObj, message}}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor}
.myAddress=${this.myAddress}
@blur=${() => this.showBlockIconFunc(false)}
.sendMessage=${this.sendMessage}
>
</chat-menu>
</div>
</div>
</li>

8
qortal-ui-plugins/plugins/utils/cropAddress.js Normal file
View File

@ -0,0 +1,8 @@
export function cropAddress(string = "", range = 5) {
const [start, end] = [
string?.substring(0, range),
string?.substring(string?.length - range, string?.length),
//
];
return start + "..." + end;
}