forked from Qortal/qortal-ui
Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages
This commit is contained in:
commit
bf4f6e5f19
@ -59,11 +59,11 @@ class ChatPage extends LitElement {
|
||||
editedMessageObj: { type: Object },
|
||||
iframeHeight: { type: Number },
|
||||
chatMessageSize: { type: Number},
|
||||
imageFile: {type: Object},
|
||||
isUploadingImage: {type: Boolean},
|
||||
imageFile: { type: Object },
|
||||
isUploadingImage: { type: Boolean },
|
||||
caption: { type: String },
|
||||
chatEditor: {type: Object},
|
||||
chatEditorNewChat: {type: Object}
|
||||
chatEditor: { type: Object },
|
||||
chatEditorNewChat: { type: Object }
|
||||
}
|
||||
}
|
||||
|
||||
@ -144,7 +144,6 @@ class ChatPage extends LitElement {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
|
||||
.senderName {
|
||||
margin: 0;
|
||||
color: var(--mdc-theme-primary);
|
||||
@ -234,8 +233,8 @@ class ChatPage extends LitElement {
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
background: white;
|
||||
padding: 5px;
|
||||
border-radius: 1px;
|
||||
padding: 5px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.chatbar-caption {
|
||||
@ -435,7 +434,16 @@ class ChatPage extends LitElement {
|
||||
.dialog-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dialog-container-loader {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
gap: 10px;
|
||||
@ -523,29 +531,21 @@ class ChatPage extends LitElement {
|
||||
${this.imageFile && html`
|
||||
<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
|
||||
iframeId="newChat"
|
||||
?hasGlobalEvents=${false}
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.setChatEditor=${(editor)=> this.setChatEditorNewChat(editor)}
|
||||
.chatEditor=${this.chatEditorNewChat}
|
||||
.imageFile=${this.imageFile}
|
||||
.insertImage=${this.insertImage}
|
||||
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
|
||||
?isLoading=${this.isLoading}
|
||||
?isLoadingMessages=${this.isLoadingMessages}
|
||||
></chat-text-editor>
|
||||
<!-- <iframe
|
||||
}}" id="newChat" class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
|
||||
</iframe> -->
|
||||
|
||||
|
||||
</div>
|
||||
iframeId="newChat"
|
||||
?hasGlobalEvents=${false}
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.setChatEditor=${(editor)=> this.setChatEditorNewChat(editor)}
|
||||
.chatEditor=${this.chatEditorNewChat}
|
||||
.imageFile=${this.imageFile}
|
||||
.insertImage=${this.insertImage}
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
?isLoading=${this.isLoading}
|
||||
?isLoadingMessages=${this.isLoadingMessages}>
|
||||
</chat-text-editor>
|
||||
</div>
|
||||
${this.chatMessageSize >= 750 ?
|
||||
html`
|
||||
<div class="message-size-container">
|
||||
@ -617,29 +617,28 @@ class ChatPage extends LitElement {
|
||||
</div>
|
||||
`}
|
||||
<div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}">
|
||||
<chat-text-editor
|
||||
?hasGlobalEvents=${true}
|
||||
iframeId="_chatEditorDOM"
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
<chat-text-editor
|
||||
?hasGlobalEvents=${true}
|
||||
iframeId="_chatEditorDOM"
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.setChatEditor=${(editor)=> this.setChatEditor(editor)}
|
||||
.chatEditor=${this.chatEditor}
|
||||
.imageFile=${this.imageFile}
|
||||
.insertImage=${this.insertImage}
|
||||
.chatMessageInput=${this.chatMessageInput}
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
.mirrorChatInput=${this.mirrorChatInput}
|
||||
?isLoading=${this.isLoading}
|
||||
?isLoadingMessages=${this.isLoadingMessages}
|
||||
></chat-text-editor>
|
||||
|
||||
.imageFile=${this.imageFile}
|
||||
.insertImage=${this.insertImage}
|
||||
.chatMessageInput=${this.chatMessageInput}
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
.mirrorChatInput=${this.mirrorChatInput}
|
||||
?isLoading=${this.isLoading}
|
||||
?isLoadingMessages=${this.isLoadingMessages}>
|
||||
</chat-text-editor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${(this.isUploadingImage || this.isDeletingImage) ? html`
|
||||
<div class="dialogCustom">
|
||||
<div class="dialogCustomInner">
|
||||
<div class="dialog-container">
|
||||
<div class="dialog-container-loader">
|
||||
<div class=${`smallLoading marginLoader`}></div>
|
||||
<p>
|
||||
${this.isDeletingImage ?
|
||||
|
||||
@ -400,26 +400,33 @@ export const chatStyles = css`
|
||||
.image-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message-data-level {
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.defaultSize {
|
||||
width:45vh;
|
||||
height:40vh
|
||||
width: 45vh;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.image-delete-icon {
|
||||
margin-left: 5px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
transition: .2s all;
|
||||
opacity: .8
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
transition: .2s all;
|
||||
opacity: 0.8;
|
||||
color: rgb(228, 222, 222);
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.image-delete-icon:hover {
|
||||
opacity: 1
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message-parent:hover .image-delete-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@ -132,13 +132,10 @@ class ChatScroller extends LitElement {
|
||||
this.upObserverElement = this.shadowRoot.getElementById('upObserver');
|
||||
this.downObserverElement = this.shadowRoot.getElementById('downObserver');
|
||||
// Intialize Observers
|
||||
this.upElementObserver()
|
||||
this.downElementObserver()
|
||||
await this.getUpdateComplete()
|
||||
|
||||
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
|
||||
|
||||
|
||||
this.upElementObserver();
|
||||
this.downElementObserver();
|
||||
await this.getUpdateComplete();
|
||||
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50;
|
||||
}
|
||||
|
||||
_getOldMessage(_scrollElement) {
|
||||
@ -417,7 +414,10 @@ class MessageTemplate extends LitElement {
|
||||
</div>
|
||||
`}
|
||||
${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
|
||||
@click=${() => this.sendMessage({
|
||||
type: 'delete',
|
||||
@ -428,7 +428,10 @@ class MessageTemplate extends LitElement {
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
` : html``}
|
||||
<div id="messageContent" class="message">
|
||||
<div
|
||||
id="messageContent"
|
||||
class="message"
|
||||
style=${(image && replacedMessage !== "") &&"margin-top: 15px;"}>
|
||||
${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
|
||||
<div class="${((this.isFirstMessage === false &&
|
||||
this.isSingleMessageInGroup === true &&
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user