From 30cf0b1569b45bb8c13e3a54a811c37c7ba4d16a Mon Sep 17 00:00:00 2001
From: Justin Ferrari <‘justinwesleyferrari@gmail.com’>
Date: Mon, 26 Dec 2022 15:49:08 -0500
Subject: [PATCH] Delete Image Modal Completed
---
.../plugins/core/components/ChatPage.js | 2 +-
.../core/components/ChatScroller-css.js | 48 +++++++++++++++++
.../plugins/core/components/ChatScroller.js | 52 ++++++++++++++-----
3 files changed, 87 insertions(+), 15 deletions(-)
diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index 5eb61296..2b2384fc 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@@ -804,7 +804,7 @@ class ChatPage extends LitElement {
.onClickFunc=${() => {
this.chatEditorNewChat.resetValue();
this.removeImage();
- } }
+ }}
style=${(this.imageFile && !this.isUploadingImage) ? "display: block" : "display: none"}>
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
index 4b644c79..1d054bab 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
@@ -446,4 +446,52 @@ export const chatStyles = css`
width: 100%;
justify-content: center
}
+
+ .delete-image-msg {
+ font-family: Livvic, sans-serif;
+ font-size: 20px;
+ color: var(--chat-bubble-msg-color);
+ letter-spacing: 0.3px;
+ font-weight: 300;
+ text-align: center;
+ }
+
+ .modal-button-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ .modal-button {
+ font-family: Roboto, sans-serif;
+ font-size: 16px;
+ color: var(--mdc-theme-primary);
+ background-color: transparent;
+ padding: 8px 10px;
+ border-radius: 5px;
+ border: none;
+ transition: all 0.3s ease-in-out;
+ }
+
+ .modal-button-red {
+ font-family: Roboto, sans-serif;
+ font-size: 16px;
+ color: #F44336;
+ background-color: transparent;
+ padding: 8px 10px;
+ border-radius: 5px;
+ border: none;
+ transition: all 0.3s ease-in-out;
+ }
+
+ .modal-button-red:hover {
+ cursor: pointer;
+ background-color: #f4433663;
+ }
+
+ .modal-button:hover {
+ cursor: pointer;
+ background-color: #03a8f475;
+ }
`
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index f343baa4..cd58558e 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -226,15 +226,16 @@ class MessageTemplate extends LitElement {
emojiPicker: { attribute: false },
escapeHTML: { attribute: false },
hideMessages: { type: Array },
- openDialogPrivateMessage: {type: Boolean},
- openDialogBlockUser: {type: Boolean},
+ openDialogPrivateMessage: { type: Boolean },
+ openDialogBlockUser: { type: Boolean },
showBlockAddressIcon: { type: Boolean },
- setRepliedToMessageObj: {attribute: false},
- setEditedMessageObj: {attribute: false},
- focusChatEditor: {attribute: false},
- sendMessage: {attribute: false},
- sendMessageForward: {attribute: false},
- openDialogImage: {attribute: false},
+ setRepliedToMessageObj: { attribute: false },
+ setEditedMessageObj: { attribute: false },
+ focusChatEditor: { attribute: false },
+ sendMessage: { attribute: false },
+ sendMessageForward: { attribute: false },
+ openDialogImage: { attribute: false },
+ openDeleteImage: { type: Boolean },
isImageLoaded: { type: Boolean },
isFirstMessage: { type: Boolean },
isSingleMessageInGroup: { type: Boolean },
@@ -468,12 +469,10 @@ class MessageTemplate extends LitElement {
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
style=${this.isFirstMessage && "margin-top: 10px;"}>
${imageHTML} this.sendMessage({
- type: 'delete',
- name: image.name,
- identifier: image.identifier,
- editedMessageObj: this.messageObj,
- })}
+ @click=${() => {
+ this.openDeleteImage = true;
+ this.chatE
+ }}
class="image-delete-icon" icon="vaadin:close" slot="icon">
` : image && isImageDeleted ? html`
@@ -573,6 +572,31 @@ class MessageTemplate extends LitElement {
${translate("general.close")}
+
{
+ this.openDeleteImage = false;
+ }}>
+
+
Are you sure you want to delete this image?
+
+ this.openDeleteImage = false}>
+
+
+
+
`
}
}