jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests 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-18 11:20:53 +02:00
commit bf4f6e5f19
3 changed files with 69 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,11 +59,11 @@ class ChatPage extends LitElement {
editedMessageObj: { type: Object }, editedMessageObj: { type: Object },
iframeHeight: { type: Number }, iframeHeight: { type: Number },
chatMessageSize: { type: Number}, chatMessageSize: { type: Number},
imageFile: {type: Object}, imageFile: { type: Object },
isUploadingImage: {type: Boolean}, isUploadingImage: { type: Boolean },
caption: { type: String }, caption: { type: String },
chatEditor: {type: Object}, chatEditor: { type: Object },
chatEditorNewChat: {type: Object} chatEditorNewChat: { type: Object }
} }
} }
@ -144,7 +144,6 @@ class ChatPage extends LitElement {
width: 92%; width: 92%;
} }
.senderName { .senderName {
margin: 0; margin: 0;
color: var(--mdc-theme-primary); color: var(--mdc-theme-primary);
@ -435,7 +434,16 @@ class ChatPage extends LitElement {
.dialog-container { .dialog-container {
position: relative; position: relative;
display: flex; display: flex;
align-items: center;
flex-direction: column; flex-direction: column;
padding: 0 10px;
gap: 10px;
height: 100%;
}
.dialog-container-loader {
position: relative;
display: flex;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 10px;
gap: 10px; gap: 10px;
@ -523,7 +531,6 @@ class ChatPage extends LitElement {
${this.imageFile && html` ${this.imageFile && html`
<img src=${URL.createObjectURL(this.imageFile)} alt="dialog-img" class="dialog-image" /> <img src=${URL.createObjectURL(this.imageFile)} alt="dialog-img" class="dialog-image" />
`} `}
<!-- Replace by reusable chatbar component -->
<div class="caption-container"> <div class="caption-container">
<chat-text-editor <chat-text-editor
iframeId="newChat" iframeId="newChat"
@ -534,17 +541,10 @@ class ChatPage extends LitElement {
.chatEditor=${this.chatEditorNewChat} .chatEditor=${this.chatEditorNewChat}
.imageFile=${this.imageFile} .imageFile=${this.imageFile}
.insertImage=${this.insertImage} .insertImage=${this.insertImage}
.editedMessageObj=${this.editedMessageObj} .editedMessageObj=${this.editedMessageObj}
?isLoading=${this.isLoading} ?isLoading=${this.isLoading}
?isLoadingMessages=${this.isLoadingMessages} ?isLoadingMessages=${this.isLoadingMessages}>
></chat-text-editor> </chat-text-editor>
<!-- <iframe
}}" id="newChat" class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
</iframe> -->
</div> </div>
${this.chatMessageSize >= 750 ? ${this.chatMessageSize >= 750 ?
html` html`
@ -630,16 +630,15 @@ class ChatPage extends LitElement {
.editedMessageObj=${this.editedMessageObj} .editedMessageObj=${this.editedMessageObj}
.mirrorChatInput=${this.mirrorChatInput} .mirrorChatInput=${this.mirrorChatInput}
?isLoading=${this.isLoading} ?isLoading=${this.isLoading}
?isLoadingMessages=${this.isLoadingMessages} ?isLoadingMessages=${this.isLoadingMessages}>
></chat-text-editor> </chat-text-editor>
</div> </div>
</div> </div>
</div> </div>
${(this.isUploadingImage || this.isDeletingImage) ? html` ${(this.isUploadingImage || this.isDeletingImage) ? html`
<div class="dialogCustom"> <div class="dialogCustom">
<div class="dialogCustomInner"> <div class="dialogCustomInner">
<div class="dialog-container"> <div class="dialog-container-loader">
<div class=${`smallLoading marginLoader`}></div> <div class=${`smallLoading marginLoader`}></div>
<p> <p>
${this.isDeletingImage ? ${this.isDeletingImage ?

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

@ -400,26 +400,33 @@ export const chatStyles = css`
.image-container { .image-container {
display: flex; display: flex;
} }
.message-data-level { .message-data-level {
height: 21px; height: 21px;
width: 21px; width: 21px;
overflow: hidden; overflow: hidden;
} }
.defaultSize { .defaultSize {
width:45vh; width: 45vh;
height:40vh height: 40vh;
} }
.image-delete-icon { .image-delete-icon {
margin-left: 5px; margin-left: 5px;
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;
visibility: hidden; visibility: hidden;
transition: .2s all; transition: .2s all;
opacity: .8 opacity: 0.8;
color: rgb(228, 222, 222);
padding-left: 7px;
} }
.image-delete-icon:hover { .image-delete-icon:hover {
opacity: 1 opacity: 1;
} }
.message-parent:hover .image-delete-icon { .message-parent:hover .image-delete-icon {
visibility: visible; visibility: visible;
} }

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

@ -132,13 +132,10 @@ class ChatScroller extends LitElement {
this.upObserverElement = this.shadowRoot.getElementById('upObserver'); this.upObserverElement = this.shadowRoot.getElementById('upObserver');
this.downObserverElement = this.shadowRoot.getElementById('downObserver'); this.downObserverElement = this.shadowRoot.getElementById('downObserver');
// Intialize Observers // Intialize Observers
this.upElementObserver() this.upElementObserver();
this.downElementObserver() this.downElementObserver();
await this.getUpdateComplete() await this.getUpdateComplete();
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50;
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
} }
_getOldMessage(_scrollElement) { _getOldMessage(_scrollElement) {
@ -417,7 +414,10 @@ class MessageTemplate extends LitElement {
</div> </div>
`} `}
${image && !isImageDeleted ? html` ${image && !isImageDeleted ? html`
<div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}> <div
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
style=${this.isFirstMessage && "margin-top: 10px;"}
>
${imageHTML}<vaadin-icon ${imageHTML}<vaadin-icon
@click=${() => this.sendMessage({ @click=${() => this.sendMessage({
type: 'delete', type: 'delete',
@ -428,7 +428,10 @@ class MessageTemplate extends LitElement {
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon> class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
</div> </div>
` : html``} ` : html``}
<div id="messageContent" class="message"> <div
id="messageContent"
class="message"
style=${(image && replacedMessage !== "") &&"margin-top: 15px;"}>
${unsafeHTML(this.emojiPicker.parse(replacedMessage))} ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
<div class="${((this.isFirstMessage === false && <div class="${((this.isFirstMessage === false &&
this.isSingleMessageInGroup === true && this.isSingleMessageInGroup === true &&