mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-12 02:05:51 +00:00
Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages
This commit is contained in:
commit
029e4c26b4
@ -65,6 +65,7 @@ class ChatPage extends LitElement {
|
||||
chatEditor: { type: Object },
|
||||
chatEditorNewChat: { type: Object },
|
||||
userLanguage: { type: String },
|
||||
lastMessageRefVisible: { type: Boolean },
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,10 +83,10 @@ class ChatPage extends LitElement {
|
||||
|
||||
.chat-text-area {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
min-height: 60px;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-text-area .typing-area {
|
||||
@ -145,7 +146,7 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
.original-message {
|
||||
color: black;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@ -225,7 +226,7 @@ class ChatPage extends LitElement {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
background: white;
|
||||
background-color: var(--white);
|
||||
padding: 5px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
@ -380,12 +381,14 @@ class ChatPage extends LitElement {
|
||||
.marginLoader {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.smallLoading,
|
||||
.smallLoading:after {
|
||||
border-radius: 50%;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.smallLoading {
|
||||
border-width: 0.8em;
|
||||
border-style: solid;
|
||||
@ -397,6 +400,7 @@ class ChatPage extends LitElement {
|
||||
transform: translateZ(0px);
|
||||
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@ -407,6 +411,7 @@ class ChatPage extends LitElement {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@ -446,9 +451,67 @@ class ChatPage extends LitElement {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.red {
|
||||
--mdc-theme-primary: #F44336;
|
||||
.last-message-ref {
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
top: -40px;
|
||||
right: 30px;
|
||||
width: 50;
|
||||
height: 50;
|
||||
z-index: 5;
|
||||
color: black;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.last-message-ref:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.arrow-down-icon {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@ -486,12 +549,10 @@ class ChatPage extends LitElement {
|
||||
this.imageFile = null
|
||||
this.uid = new ShortUniqueId()
|
||||
this.userLanguage = ""
|
||||
this.lastMessageRefVisible = false
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.chatEditorPlaceholder, "here1123")
|
||||
const mstring = get("chatpage.cchange8");
|
||||
console.log(mstring, "here5040");
|
||||
return html`
|
||||
<div class="chat-container">
|
||||
<div>
|
||||
@ -512,6 +573,17 @@ class ChatPage extends LitElement {
|
||||
this.renderChatScroller()}
|
||||
</div>
|
||||
<div class="chat-text-area" style="${`${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
|
||||
<div
|
||||
class='last-message-ref'
|
||||
style=${(this.lastMessageRefVisible && !this.imageFile) ? 'opacity: 1;' : 'opacity: 0;'}>
|
||||
<vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
|
||||
this.shadowRoot.querySelector("chat-scroller").shadowRoot.getElementById("downObserver")
|
||||
.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}>
|
||||
</vaadin-icon>
|
||||
</div>
|
||||
<div class="typing-area">
|
||||
${this.repliedToMessageObj && html`
|
||||
<div class="repliedTo-container">
|
||||
@ -613,24 +685,28 @@ class ChatPage extends LitElement {
|
||||
</div>
|
||||
` :
|
||||
html``}
|
||||
<button
|
||||
class="red"
|
||||
@click=${()=>{
|
||||
this.imageFile = null
|
||||
}}
|
||||
>
|
||||
${translate("chatpage.cchange33")}
|
||||
</button>
|
||||
<button
|
||||
@click=${()=> {
|
||||
this._sendMessage({
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
})
|
||||
}}
|
||||
>
|
||||
${translate("chatpage.cchange9")}
|
||||
</button>
|
||||
<div class="modal-button-row">
|
||||
<button
|
||||
class="modal-button-red"
|
||||
@click=${()=>{
|
||||
this.imageFile = null
|
||||
}}
|
||||
>
|
||||
|
||||
${translate("chatpage.cchange33")}
|
||||
</button>
|
||||
<button
|
||||
class="modal-button"
|
||||
@click=${()=> {
|
||||
this._sendMessage({
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
})
|
||||
}}
|
||||
>
|
||||
${translate("chatpage.cchange9")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wrapper-modal>
|
||||
@ -638,6 +714,10 @@ class ChatPage extends LitElement {
|
||||
`
|
||||
}
|
||||
|
||||
showLastMessageRefScroller(props) {
|
||||
this.lastMessageRefVisible = props;
|
||||
}
|
||||
|
||||
setChatEditor(editor) {
|
||||
this.chatEditor = editor;
|
||||
}
|
||||
@ -646,7 +726,7 @@ class ChatPage extends LitElement {
|
||||
this.chatEditorNewChat = editor;
|
||||
}
|
||||
|
||||
insertImage(file){
|
||||
insertImage(file) {
|
||||
if (file.type.includes('image')) {
|
||||
this.imageFile = file;
|
||||
this.chatEditor.disable();
|
||||
@ -663,7 +743,7 @@ class ChatPage extends LitElement {
|
||||
this.chatEditor.enable();
|
||||
}
|
||||
|
||||
changeMsgInput(id){
|
||||
changeMsgInput(id) {
|
||||
|
||||
this.chatEditor.remove()
|
||||
this.chatMessageInput = this.shadowRoot.getElementById(id);
|
||||
@ -690,7 +770,6 @@ class ChatPage extends LitElement {
|
||||
window.addEventListener('storage', () => {
|
||||
const checkLanguage = localStorage.getItem('qortalLanguage');
|
||||
use(checkLanguage);
|
||||
console.log(checkLanguage, "language here");
|
||||
this.userLanguage = checkLanguage;
|
||||
})
|
||||
|
||||
@ -725,7 +804,6 @@ class ChatPage extends LitElement {
|
||||
this.chatId.includes('direct') === true ? this.isReceipient = true : this.isReceipient = false;
|
||||
this._chatId = this.chatId.split('/')[1];
|
||||
const mstring = get("chatpage.cchange8");
|
||||
console.log(mstring, "here5090");
|
||||
const placeholder = isRecipient === true ? `Message ${this._chatId}` : `${mstring}`;
|
||||
this.chatEditorPlaceholder = placeholder;
|
||||
|
||||
@ -769,7 +847,6 @@ class ChatPage extends LitElement {
|
||||
|
||||
renderPlaceholder() {
|
||||
const mstring = get("chatpage.cchange8");
|
||||
console.log(mstring, "here11");
|
||||
const placeholder = this.isReceipient === true ? `Message ${this._chatId}` : `${mstring}`;
|
||||
return placeholder;
|
||||
}
|
||||
@ -783,7 +860,8 @@ class ChatPage extends LitElement {
|
||||
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
|
||||
.setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
|
||||
.focusChatEditor=${() => this.focusChatEditor()}
|
||||
.sendMessage=${(val)=> this._sendMessage(val)}
|
||||
.sendMessage=${(val) => this._sendMessage(val)}
|
||||
.showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
|
||||
>
|
||||
</chat-scroller>
|
||||
`
|
||||
|
||||
@ -44,30 +44,6 @@ export const chatStyles = css`
|
||||
padding: 20px 17px;
|
||||
}
|
||||
|
||||
.last-message-ref {
|
||||
position: fixed;
|
||||
font-size: 18px;
|
||||
right: 40px;
|
||||
bottom: 100px;
|
||||
width: 50;
|
||||
height: 50;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
color: black;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.last-message-ref:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.arrow-down-icon {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
@ -28,7 +28,8 @@ class ChatScroller extends LitElement {
|
||||
setRepliedToMessageObj: {attribute: false},
|
||||
setEditedMessageObj: {attribute: false},
|
||||
focusChatEditor: {attribute: false},
|
||||
sendMessage: {attribute: false}
|
||||
sendMessage: {attribute: false},
|
||||
showLastMessageRefScroller: { type: Function },
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,7 +55,6 @@ class ChatScroller extends LitElement {
|
||||
|
||||
|
||||
render() {
|
||||
console.log('messages', this.messages)
|
||||
let formattedMessages = this.messages.reduce((messageArray, message) => {
|
||||
const lastGroupedMessage = messageArray[messageArray.length - 1];
|
||||
let timestamp;
|
||||
@ -103,14 +103,6 @@ class ChatScroller extends LitElement {
|
||||
)
|
||||
})}
|
||||
<div id='downObserver'></div>
|
||||
<div class='last-message-ref'>
|
||||
<vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
|
||||
this.shadowRoot.getElementById('downObserver').scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}}>
|
||||
</vaadin-icon>
|
||||
</div>
|
||||
</ul>
|
||||
`
|
||||
}
|
||||
@ -151,9 +143,9 @@ class ChatScroller extends LitElement {
|
||||
|
||||
_downObserverHandler(entries) {
|
||||
if (!entries[0].isIntersecting) {
|
||||
this.shadowRoot.querySelector(".last-message-ref").style.opacity = '1'
|
||||
this.showLastMessageRefScroller(true);
|
||||
} else {
|
||||
this.shadowRoot.querySelector(".last-message-ref").style.opacity = '0'
|
||||
this.showLastMessageRefScroller(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -116,11 +116,11 @@ class ChatTextEditor extends LitElement {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chatbar-container textarea {
|
||||
.chatbar-container textarea {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chatbar-container .chat-editor {
|
||||
.chatbar-container .chat-editor {
|
||||
display: flex;
|
||||
max-height: -webkit-fill-available;
|
||||
width: 100%;
|
||||
@ -169,9 +169,7 @@ class ChatTextEditor extends LitElement {
|
||||
</div>
|
||||
</div>
|
||||
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
|
||||
<iframe
|
||||
}}" id=${this.iframeId} class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
|
||||
</iframe>
|
||||
<iframe id=${this.iframeId} class="chat-editor" tabindex="-1" height=${this.iframeHeight}></iframe>
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
||||
</button>
|
||||
@ -259,13 +257,13 @@ class ChatTextEditor extends LitElement {
|
||||
|
||||
window.addEventListener('storage', () => {
|
||||
const checkTheme = localStorage.getItem('qortalTheme');
|
||||
const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId')
|
||||
const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId');
|
||||
if (checkTheme === 'dark') {
|
||||
this.theme = 'dark';
|
||||
captionEditor.style.cssText = "color:#ffffff;"
|
||||
chatbar.style.cssText = "color:#ffffff;"
|
||||
} else {
|
||||
this.theme = 'light';
|
||||
captionEditor.style.cssText = "color:#080808;"
|
||||
chatbar.style.cssText = "color:#080808;"
|
||||
}
|
||||
})
|
||||
|
||||
@ -417,6 +415,33 @@ class ChatTextEditor extends LitElement {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.chatbar-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chatbar-body::-webkit-scrollbar-track {
|
||||
background-color: whitesmoke;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.chatbar-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
border-radius: 7px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.chatbar-body::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(180, 176, 176);
|
||||
border-radius: 7px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.chatbar-body::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(148, 146, 146);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 1rem;
|
||||
line-height: 1.38rem;
|
||||
@ -433,11 +458,11 @@ class ChatTextEditor extends LitElement {
|
||||
div[contentEditable=true]:empty:before {
|
||||
content: attr(data-placeholder);
|
||||
display: block;
|
||||
color: rgb(103, 107, 113);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
div[contentEditable=false]{
|
||||
@ -672,6 +697,7 @@ class ChatTextEditor extends LitElement {
|
||||
editor.mirror = editorConfig.mirrorElement;
|
||||
|
||||
editor.content = (editor.frame.contentDocument || editor.frame.document);
|
||||
editor.content.body.classList.add("chatbar-body");
|
||||
|
||||
let elemDiv = document.createElement('div');
|
||||
elemDiv.setAttribute('contenteditable', 'true');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user