mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
Added delete attachment UI
This commit is contained in:
Justin Ferrari
parent
dd52365abb
commit
66f32f799a
@ -574,7 +574,11 @@
|
||||
"cchange65": "Uploading attachment. This may take up to one minute.",
|
||||
"cchange66": "Deleting attachment. This may take up to one minute.",
|
||||
"cchange67": "Attachment size exceeds 1 MB",
|
||||
"cchange68": "edited"
|
||||
"cchange68": "edited",
|
||||
"cchange69": "Are you sure you want to delete this image?",
|
||||
"cchange70": "Are you sure you want to delete this attachment?",
|
||||
"cchange71": "This image has been deleted",
|
||||
"cchange72": "This attachment has been deleted"
|
||||
},
|
||||
"welcomepage": {
|
||||
"wcchange1": "Welcome to Q-Chat",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "qortal-ui-core",
|
||||
"version": "2.2.5",
|
||||
"version": "3.0.0",
|
||||
"description": "Qortal Project - decentralize the world - Data storage, communications, web hosting, decentralized trading, complete infrastructure for the future blockchain-based Internet",
|
||||
"keywords": [
|
||||
"QORT",
|
||||
@ -17,7 +17,7 @@
|
||||
"author": "QORTAL <admin@qortal.org>",
|
||||
"license": "GPL-3.0",
|
||||
"dependencies": {
|
||||
"@hapi/hapi": "21.1.0",
|
||||
"@hapi/hapi": "21.2.0",
|
||||
"@hapi/inert": "7.0.0",
|
||||
"sass": "1.57.1"
|
||||
},
|
||||
@ -53,28 +53,28 @@
|
||||
"@polymer/paper-spinner": "3.0.2",
|
||||
"@polymer/paper-toast": "3.0.1",
|
||||
"@polymer/paper-tooltip": "3.0.1",
|
||||
"@rollup/plugin-alias": "4.0.2",
|
||||
"@rollup/plugin-alias": "4.0.3",
|
||||
"@rollup/plugin-babel": "6.0.3",
|
||||
"@rollup/plugin-commonjs": "24.0.0",
|
||||
"@rollup/plugin-commonjs": "24.0.1",
|
||||
"@rollup/plugin-node-resolve": "15.0.1",
|
||||
"@rollup/plugin-replace": "5.0.2",
|
||||
"@rollup/plugin-terser": "0.3.0",
|
||||
"@vaadin/button": "23.3.3",
|
||||
"@vaadin/grid": "23.3.3",
|
||||
"@vaadin/icons": "23.3.3",
|
||||
"@vaadin/password-field": "23.3.3",
|
||||
"@vaadin/tooltip": "23.3.3",
|
||||
"@vaadin/button": "23.3.5",
|
||||
"@vaadin/grid": "23.3.5",
|
||||
"@vaadin/icons": "23.3.5",
|
||||
"@vaadin/password-field": "23.3.5",
|
||||
"@vaadin/tooltip": "23.3.5",
|
||||
"asmcrypto.js": "2.3.2",
|
||||
"bcryptjs": "2.4.3",
|
||||
"epml": "0.3.3",
|
||||
"file-saver": "2.0.5",
|
||||
"lit": "2.6.0",
|
||||
"lit": "2.6.1",
|
||||
"lit-translate": "2.0.1",
|
||||
"pwa-helpers": "0.9.1",
|
||||
"random-sentence-generator": "0.0.8",
|
||||
"redux": "4.2.0",
|
||||
"redux-thunk": "2.4.2",
|
||||
"rollup": "3.9.1",
|
||||
"rollup": "3.10.1",
|
||||
"rollup-plugin-node-globals": "1.4.0",
|
||||
"rollup-plugin-progress": "1.1.2",
|
||||
"rollup-plugin-scss": "3.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "qortal-ui-plugins",
|
||||
"version": "2.2.5",
|
||||
"version": "3.0.0",
|
||||
"description": "Qortal Project - decentralize the world - Data storage, communications, web hosting, decentralized trading, complete infrastructure for the future blockchain-based Internet",
|
||||
"keywords": [
|
||||
"QORT",
|
||||
@ -64,24 +64,24 @@
|
||||
"@polymer/paper-slider": "3.0.1",
|
||||
"@polymer/paper-spinner": "3.0.2",
|
||||
"@polymer/paper-tooltip": "3.0.1",
|
||||
"@rollup/plugin-alias": "4.0.2",
|
||||
"@rollup/plugin-alias": "4.0.3",
|
||||
"@rollup/plugin-babel": "6.0.3",
|
||||
"@rollup/plugin-commonjs": "24.0.0",
|
||||
"@rollup/plugin-commonjs": "24.0.1",
|
||||
"@rollup/plugin-node-resolve": "15.0.1",
|
||||
"@rollup/plugin-replace": "5.0.2",
|
||||
"@rollup/plugin-terser": "0.3.0",
|
||||
"@vaadin/avatar": "23.3.3",
|
||||
"@vaadin/button": "23.3.3",
|
||||
"@vaadin/grid": "23.3.3",
|
||||
"@vaadin/icons": "23.3.3",
|
||||
"@vaadin/tooltip": "23.3.3",
|
||||
"@vaadin/avatar": "23.3.5",
|
||||
"@vaadin/button": "23.3.5",
|
||||
"@vaadin/grid": "23.3.5",
|
||||
"@vaadin/icons": "23.3.5",
|
||||
"@vaadin/tooltip": "23.3.5",
|
||||
"epml": "0.3.3",
|
||||
"file-saver": "2.0.5",
|
||||
"highcharts": "10.3.2",
|
||||
"highcharts": "10.3.3",
|
||||
"html-escaper": "3.0.3",
|
||||
"lit": "2.6.0",
|
||||
"lit": "2.6.1",
|
||||
"lit-translate": "2.0.1",
|
||||
"rollup": "3.9.1",
|
||||
"rollup": "3.10.1",
|
||||
"rollup-plugin-node-globals": "1.4.0",
|
||||
"rollup-plugin-progress": "1.1.2",
|
||||
"rollup-plugin-web-worker-loader": "1.6.1"
|
||||
|
||||
@ -79,7 +79,9 @@ class ChatPage extends LitElement {
|
||||
imageFile: { type: Object },
|
||||
attachment: { type: Object },
|
||||
isUploadingImage: { type: Boolean },
|
||||
isDeletingImage: { type: Boolean },
|
||||
isUploadingAttachment: { type: Boolean },
|
||||
isDeletingAttachment: { type: Boolean },
|
||||
userLanguage: { type: String },
|
||||
lastMessageRefVisible: { type: Boolean },
|
||||
isLoadingOldMessages: { type: Boolean },
|
||||
@ -1088,13 +1090,14 @@ class ChatPage extends LitElement {
|
||||
</div>
|
||||
</div>
|
||||
`: ''}
|
||||
${(this.isUploadingAttachment) ? html`
|
||||
${(this.isUploadingAttachment || this.isDeletingAttachment) ? html`
|
||||
<div class="dialogCustom">
|
||||
<div class="dialogCustomInner">
|
||||
<div class="dialog-container-loader">
|
||||
<div class=${`smallLoading marginLoader`}></div>
|
||||
<p>
|
||||
${translate("chatpage.cchange65")}
|
||||
${this.isDeletingAttachment ?
|
||||
translate("chatpage.cchange66") : translate("chatpage.cchange65")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -2419,56 +2422,146 @@ class ChatPage extends LitElement {
|
||||
this.webWorkerFile = new WebWorkerFile();
|
||||
}
|
||||
|
||||
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
|
||||
const byteCharacters = atob(b64Data);
|
||||
const byteArrays = [];
|
||||
|
||||
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
|
||||
const slice = byteCharacters.slice(offset, offset + sliceSize);
|
||||
|
||||
const byteNumbers = new Array(slice.length);
|
||||
for (let i = 0; i < slice.length; i++) {
|
||||
byteNumbers[i] = slice.charCodeAt(i);
|
||||
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
|
||||
const byteCharacters = atob(b64Data);
|
||||
const byteArrays = [];
|
||||
|
||||
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
|
||||
const slice = byteCharacters.slice(offset, offset + sliceSize);
|
||||
|
||||
const byteNumbers = new Array(slice.length);
|
||||
for (let i = 0; i < slice.length; i++) {
|
||||
byteNumbers[i] = slice.charCodeAt(i);
|
||||
}
|
||||
|
||||
const byteArray = new Uint8Array(byteNumbers);
|
||||
byteArrays.push(byteArray);
|
||||
}
|
||||
|
||||
const blob = new Blob(byteArrays, {type: contentType});
|
||||
return blob;
|
||||
}
|
||||
const blob = b64toBlob(str, 'image/png');
|
||||
await new Promise(resolve => {
|
||||
new Compressor(blob, {
|
||||
quality: 0.6,
|
||||
maxWidth: 500,
|
||||
success(result) {
|
||||
const file = new File([result], "name", {
|
||||
type: 'image/png'
|
||||
});
|
||||
|
||||
compressedFile = file;
|
||||
resolve();
|
||||
},
|
||||
error(err) {
|
||||
console.log(err.message);
|
||||
},
|
||||
})
|
||||
})
|
||||
try {
|
||||
await publishData({
|
||||
registeredName: userName,
|
||||
file : compressedFile,
|
||||
service: 'QCHAT_IMAGE',
|
||||
identifier: identifier,
|
||||
parentEpml,
|
||||
metaData: undefined,
|
||||
uploadType: 'file',
|
||||
selectedAddress: this.selectedAddress,
|
||||
worker: workerImage
|
||||
})
|
||||
this.isDeletingImage = false
|
||||
} catch (error) {
|
||||
this.isLoading = false;
|
||||
return
|
||||
}
|
||||
typeMessage = 'edit';
|
||||
let chatReference = outSideMsg.editedMessageObj.reference;
|
||||
|
||||
if(outSideMsg.editedMessageObj.chatReference){
|
||||
chatReference = outSideMsg.editedMessageObj.chatReference;
|
||||
}
|
||||
|
||||
const byteArray = new Uint8Array(byteNumbers);
|
||||
byteArrays.push(byteArray);
|
||||
let message = "";
|
||||
try {
|
||||
const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
|
||||
message = parsedMessageObj;
|
||||
|
||||
} catch (error) {
|
||||
message = outSideMsg.editedMessageObj.decodedMessage;
|
||||
}
|
||||
|
||||
const blob = new Blob(byteArrays, {type: contentType});
|
||||
return blob;
|
||||
}
|
||||
const blob = b64toBlob(str, 'image/png');
|
||||
await new Promise(resolve => {
|
||||
new Compressor(blob, {
|
||||
quality: 0.6,
|
||||
maxWidth: 500,
|
||||
success(result) {
|
||||
const file = new File([result], "name", {
|
||||
type: 'image/png'
|
||||
});
|
||||
|
||||
compressedFile = file;
|
||||
resolve();
|
||||
},
|
||||
error(err) {
|
||||
console.log(err.message);
|
||||
},
|
||||
const messageObject = {
|
||||
...message,
|
||||
isImageDeleted: true
|
||||
}
|
||||
const stringifyMessageObject = JSON.stringify(messageObject);
|
||||
this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
|
||||
} else if (outSideMsg && outSideMsg.type === 'deleteAttachment') {
|
||||
this.isDeletingAttachment = true;
|
||||
let compressedFile = ''
|
||||
var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg==";
|
||||
const userName = outSideMsg.name;
|
||||
const identifier = outSideMsg.identifier;
|
||||
|
||||
if (this.webWorkerFile) {
|
||||
workerAttachment = this.webWorkerFile;
|
||||
} else {
|
||||
this.webWorkerFile = new WebWorkerFile();
|
||||
}
|
||||
|
||||
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
|
||||
const byteCharacters = atob(b64Data);
|
||||
const byteArrays = [];
|
||||
|
||||
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
|
||||
const slice = byteCharacters.slice(offset, offset + sliceSize);
|
||||
|
||||
const byteNumbers = new Array(slice.length);
|
||||
for (let i = 0; i < slice.length; i++) {
|
||||
byteNumbers[i] = slice.charCodeAt(i);
|
||||
}
|
||||
|
||||
const byteArray = new Uint8Array(byteNumbers);
|
||||
byteArrays.push(byteArray);
|
||||
}
|
||||
|
||||
const blob = new Blob(byteArrays, {type: contentType});
|
||||
return blob;
|
||||
}
|
||||
|
||||
const blob = b64toBlob(str, 'image/png');
|
||||
await new Promise(resolve => {
|
||||
new Compressor(blob, {
|
||||
quality: 0.6,
|
||||
maxWidth: 500,
|
||||
success(result) {
|
||||
const file = new File([result], "name", {
|
||||
type: 'image/png'
|
||||
});
|
||||
|
||||
compressedFile = file;
|
||||
resolve();
|
||||
},
|
||||
error(err) {
|
||||
console.log(err.message);
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
try {
|
||||
await publishData({
|
||||
registeredName: userName,
|
||||
file : compressedFile,
|
||||
service: 'QCHAT_IMAGE',
|
||||
file: compressedFile,
|
||||
service: 'QCHAT_ATTACHMENT',
|
||||
identifier: identifier,
|
||||
parentEpml,
|
||||
metaData: undefined,
|
||||
uploadType: 'file',
|
||||
selectedAddress: this.selectedAddress,
|
||||
worker: workerImage
|
||||
})
|
||||
this.isDeletingImage = false
|
||||
worker: workerAttachment
|
||||
})
|
||||
this.isDeletingAttachment = false
|
||||
} catch (error) {
|
||||
this.isLoading = false;
|
||||
return
|
||||
@ -2479,7 +2572,7 @@ class ChatPage extends LitElement {
|
||||
if(outSideMsg.editedMessageObj.chatReference){
|
||||
chatReference = outSideMsg.editedMessageObj.chatReference;
|
||||
}
|
||||
|
||||
|
||||
let message = "";
|
||||
try {
|
||||
const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
|
||||
@ -2490,13 +2583,11 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
const messageObject = {
|
||||
...message,
|
||||
isImageDeleted: true
|
||||
isAttachmentDeleted: true
|
||||
}
|
||||
const stringifyMessageObject = JSON.stringify(messageObject);
|
||||
this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
|
||||
|
||||
}
|
||||
else if (outSideMsg && outSideMsg.type === 'image') {
|
||||
} else if (outSideMsg && outSideMsg.type === 'image') {
|
||||
this.isUploadingImage = true;
|
||||
const userName = await getName(this.selectedAddress.address);
|
||||
if (!userName) {
|
||||
|
||||
@ -649,11 +649,6 @@ export const chatStyles = css`
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.attachment-container:hover .download-icon::before {
|
||||
background-color: rgb(161 158 158 / 41%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.attachment-icon-container {
|
||||
display: flex;
|
||||
@ -704,6 +699,11 @@ export const chatStyles = css`
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.download-icon:hover::before {
|
||||
background-color: rgb(161 158 158 / 41%);
|
||||
}
|
||||
|
||||
|
||||
.download-icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
@ -71,7 +71,6 @@ class ChatScroller extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(4, "here");
|
||||
let formattedMessages = this.messages.reduce((messageArray, message, index) => {
|
||||
const lastGroupedMessage = messageArray[messageArray.length - 1];
|
||||
let timestamp;
|
||||
@ -262,6 +261,7 @@ class MessageTemplate extends LitElement {
|
||||
sendMessageForward: { attribute: false },
|
||||
openDialogImage: { attribute: false },
|
||||
openDeleteImage: { type: Boolean },
|
||||
openDeleteAttachment: { type: Boolean },
|
||||
isImageLoaded: { type: Boolean },
|
||||
isFirstMessage: { type: Boolean },
|
||||
isSingleMessageInGroup: { type: Boolean },
|
||||
@ -337,7 +337,6 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.messageObj, "message object here");
|
||||
const hidemsg = this.hideMessages;
|
||||
let message = "";
|
||||
let messageVersion2 = ""
|
||||
@ -345,6 +344,7 @@ class MessageTemplate extends LitElement {
|
||||
let repliedToData = null;
|
||||
let image = null;
|
||||
let isImageDeleted = false;
|
||||
let isAttachmentDeleted = false;
|
||||
let version = 0;
|
||||
let isForwarded = false
|
||||
let isEdited = false
|
||||
@ -363,6 +363,7 @@ class MessageTemplate extends LitElement {
|
||||
message = parsedMessageObj.messageText;
|
||||
repliedToData = this.messageObj.repliedToData;
|
||||
isImageDeleted = parsedMessageObj.isImageDeleted;
|
||||
isAttachmentDeleted = parsedMessageObj.isAttachmentDeleted;
|
||||
reactions = parsedMessageObj.reactions || [];
|
||||
version = parsedMessageObj.version
|
||||
isForwarded = parsedMessageObj.type === 'forward'
|
||||
@ -588,16 +589,18 @@ class MessageTemplate extends LitElement {
|
||||
<div
|
||||
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
|
||||
style=${this.isFirstMessage && "margin-top: 10px;"}>
|
||||
${imageHTML}<vaadin-icon
|
||||
@click=${() => {
|
||||
this.openDeleteImage = true;
|
||||
}}
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
|
||||
${imageHTML}
|
||||
<vaadin-icon
|
||||
@click=${() => {
|
||||
this.openDeleteImage = true;
|
||||
}}
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon">
|
||||
</vaadin-icon>
|
||||
</div>
|
||||
` : image && isImageDeleted ? html`
|
||||
<p class="image-deleted-msg">This image has been deleted</p>
|
||||
<p class="image-deleted-msg">${translate("chatpage.cchange71")}</p>
|
||||
` : html``}
|
||||
${attachment ?
|
||||
${attachment && !isAttachmentDeleted ?
|
||||
html`
|
||||
<div @click=${async () => await this.downloadAttachment(attachment)} class="attachment-container">
|
||||
<div class="attachment-icon-container">
|
||||
@ -619,8 +622,28 @@ class MessageTemplate extends LitElement {
|
||||
slot="icon"
|
||||
class="download-icon">
|
||||
</vaadin-icon>
|
||||
${this.myAddress === this.messageObj.sender
|
||||
? html`
|
||||
<vaadin-icon
|
||||
@click=${(e) => {
|
||||
e.stopPropagation();
|
||||
this.openDeleteAttachment = true;
|
||||
}}
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon">
|
||||
</vaadin-icon>
|
||||
` : html``}
|
||||
</div>
|
||||
`
|
||||
: attachment && isAttachmentDeleted ?
|
||||
html`
|
||||
<div class="attachment-container">
|
||||
<div class="attachment-info">
|
||||
<p style=${"font-style: italic;"} class="attachment-name">
|
||||
${translate("chatpage.cchange72")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: html``}
|
||||
<div
|
||||
id="messageContent"
|
||||
@ -737,7 +760,7 @@ class MessageTemplate extends LitElement {
|
||||
this.openDeleteImage = false;
|
||||
}}>
|
||||
<div class="delete-image-msg">
|
||||
<p>Are you sure you want to delete this image?</p>
|
||||
<p>${translate("chatpage.cchange69")}</p>
|
||||
</div>
|
||||
<div class="modal-button-row" @click=${() => this.openDeleteImage = false}>
|
||||
<button class="modal-button-red">
|
||||
@ -755,6 +778,34 @@ class MessageTemplate extends LitElement {
|
||||
</button>
|
||||
</div>
|
||||
</mwc-dialog>
|
||||
<mwc-dialog
|
||||
hideActions
|
||||
?open=${this.openDeleteAttachment}
|
||||
@closed=${()=> {
|
||||
this.openDeleteAttachment = false;
|
||||
}}>
|
||||
<div class="delete-image-msg">
|
||||
<p>${translate("chatpage.cchange70")}</p>
|
||||
</div>
|
||||
<div class="modal-button-row" @click=${() => this.openDeleteAttachment = false}>
|
||||
<button class="modal-button-red">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="modal-button"
|
||||
@click=${() => {
|
||||
this.sendMessage({
|
||||
type: 'deleteAttachment',
|
||||
attachment: attachment,
|
||||
name: attachment.name,
|
||||
identifier: attachment.identifier,
|
||||
editedMessageObj: this.messageObj,
|
||||
})}
|
||||
}>
|
||||
Yes
|
||||
</button>
|
||||
</div>
|
||||
</mwc-dialog>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user