diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 97fe5c03..0a22107f 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -488,7 +488,9 @@ "cchange26": "File size exceeds 5 MB", "cchange27": "A registered name is required to send images", "cchange28": "This file is not an image", - "cchange29": "Maximum message size is 1000 bytes" + "cchange29": "Maximum message size is 1000 bytes", + "cchange30": "Uploading image. This may take up to one minute.", + "cchange31": "Deleting image. This may take up to one minute." }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index a62e724a..7f49cad4 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -59,7 +59,8 @@ class ChatPage extends LitElement { editedMessageObj: { type: Object }, iframeHeight: { type: Number }, chatMessageSize: { type: Number}, - imageFile: {type: Object} + imageFile: {type: Object}, + isUploadingImage: {type: Boolean} } } @@ -337,6 +338,86 @@ class ChatPage extends LitElement { input[type=file]::-webkit-file-upload-button { cursor: pointer; } + + .dialogCustom { + position: fixed; + z-index: 10000; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + top: 10px; + right: 20px; + user-select: none; + } + + .dialogCustom p { + color: var(--black) + } + .row { + display: flex; + width: 100%; + align-items: center; + } + + .between { + justify-content: space-between; + } + + .dialogCustomInner { + min-width: 300px; + height: 40px; + background-color: var(--white); + box-shadow: var(--mdc-dialog-box-shadow, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)); + padding: 10px; + border-radius: 4px; + } + .dialogCustomInner ul { + padding-left: 0px + } + .dialogCustomInner li { + margin-bottom: 10px; + } + .marginLoader { + margin-right: 8px; + } + .smallLoading, + .smallLoading:after { + border-radius: 50%; + width: 2px; + height: 2px; + } + .smallLoading { + border-width: 0.6em; + border-style: solid; + border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) + rgba(3, 169, 244, 0.2) rgb(3, 169, 244); + font-size: 10px; + position: relative; + text-indent: -9999em; + transform: translateZ(0px); + animation: 1.1s linear 0s infinite normal none running loadingAnimation; + } + @-webkit-keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + @keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } ` } @@ -538,6 +619,31 @@ class ChatPage extends LitElement { + ${(this.isUploadingImage || this.isDeletingImage) ? html` +
+ ${this.isDeletingImage ? + translate("chatpage.cchange31") : translate("chatpage.cchange30")} + +
+