-
+
+
+ ${this.isLoadingMessages ? html`
+
${translate("chatpage.cchange22")}
` : this.renderChatScroller(this._initialMessages)} +
hello
@@ -239,18 +270,15 @@ class ChatPage extends LitElement {
slot="primaryAction"
dialogAction="cancel"
class="red"
- @click=${()=>{
-
+ @click=${()=> {
this._sendMessage({
- type: 'image',
- imageFile: this.imageFile,
- caption: 'This is a caption'
-
-
- })
+ type: 'image',
+ imageFile: this.imageFile,
+ caption: 'This is a caption'
+ })
}}
>
- send
+ send
-
-
- ${this.repliedToMessageObj && html`
-
-
-
-
+
+
+ ${this.repliedToMessageObj && html`
+ this.closeRepliedToContainer()}
- >
-
- `}
- ${this.editedMessageObj && html`
-
+ this.closeRepliedToContainer()}
+ >
-
+
+
+
-
@@ -336,8 +386,6 @@ class ChatPage extends LitElement {
async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
-
-
// this.changeLanguage();
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
@@ -444,6 +492,7 @@ class ChatPage extends LitElement {
parentEpml.imReady();
}
+
async updated(changedProperties) {
if (changedProperties.has('messagesRendered')) {
const chatReference1 = this.isReceipient ? 'direct' : 'group';
@@ -454,11 +503,15 @@ class ChatPage extends LitElement {
}
if (changedProperties && changedProperties.has('editedMessageObj')) {
-
this.chatEditor.insertText(this.editedMessageObj.message)
}
}
+ calculateIFrameHeight(height) {
+ console.log(height, "height here")
+ this.iframeHeight = height;
+ }
+
changeLanguage() {
const checkLanguage = localStorage.getItem('qortalLanguage')
@@ -501,9 +554,6 @@ class ChatPage extends LitElement {
async getOldMessage(scrollElement) {
-
-
-
if (this.isReceipient) {
const getInitialMessages = await parentEpml.request('apiCall', {
type: 'api',
@@ -630,9 +680,6 @@ class ChatPage extends LitElement {
}
}
- // set replied to message in chat editor
-
-
getMessageSize(message){
try {
@@ -697,6 +744,8 @@ class ChatPage extends LitElement {
}
+ // set replied to message in chat editor
+
setRepliedToMessageObj(messageObj) {
this.repliedToMessageObj = {...messageObj};
this.editedMessageObj = null;
@@ -875,9 +924,6 @@ class ChatPage extends LitElement {
directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}`;
}
-
-
-
const directSocket = new WebSocket(directSocketLink);
// Open Connection
@@ -1653,41 +1699,33 @@ class ChatPage extends LitElement {
editorConfig.getMessageSize(editorConfig.mirrorElement.value)
if (e.type === 'click') {
-
e.preventDefault();
e.stopPropagation();
}
if (e.type === 'paste') {
-
e.preventDefault();
const item_list = await navigator.clipboard.read();
console.log({item_list})
- let image_type; // we will feed this later
- const item = item_list.find( item => // choose the one item holding our image
- item.types.some( type => { // does this item have our type
- if( type.startsWith( 'image/' ) ) {
- image_type = type; // store which kind of image type it is
- return true;
- }
- } )
- );
- const blob = item && await item.getType( image_type );
- var file = new File([blob], "name", {
- type: image_type
- });
-
- editorConfig.insertImage(file)
-
-
-
+ let image_type; // we will feed this later
+ const item = item_list.find( item => // choose the one item holding our image
+ item.types.some( type => { // does this item have our type
+ if (type.startsWith( 'image/')) {
+ image_type = type; // store which kind of image type it is
+ return true;
+ }
+ })
+ );
+ const blob = item && await item.getType( image_type );
+ var file = new File([blob], "name", {
+ type: image_type
+ });
+
+ editorConfig.insertImage(file)
navigator.clipboard.readText().then(clipboardText => {
-
let escapedText = editorConfig.escape(clipboardText);
-
editor.insertText(escapedText);
}).catch(err => {
-
// Fallback if everything fails...
let textData = (e.originalEvent || e).clipboardData.getData('text/plain');
editor.insertText(textData);
@@ -1702,7 +1740,9 @@ class ChatPage extends LitElement {
}
if (e.type === 'keydown') {
-
+ console.log(editorConfig.mirrorElement.scrollHeight);
+ editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
+
// Handle Enter
if (e.keyCode === 13 && !e.shiftKey) {
@@ -1783,6 +1823,7 @@ class ChatPage extends LitElement {
const editorConfig = {
getMessageSize: this.getMessageSize,
+ calculateIFrameHeight: this.calculateIFrameHeight,
mirrorElement: this.mirrorChatInput,
editableElement: this.chatMessageInput,
sendFunc: this._sendMessage,
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
index 9ef4e943..c8b45432 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
@@ -41,7 +41,7 @@ export const chatStyles = css`
ul {
list-style: none;
margin: 0;
- padding: 20px;
+ padding: 20px 17px;
}
.last-message-ref {
@@ -67,7 +67,7 @@ export const chatStyles = css`
.chat-list {
overflow-y: auto;
overflow-x: hidden;
- height: 92vh;
+ height: 100%;
box-sizing: border-box;
}
@@ -79,6 +79,7 @@ export const chatStyles = css`
.message-data-name {
color: var(--black);
+ user-select: none;
}
.message-data-time {
@@ -86,6 +87,7 @@ export const chatStyles = css`
font-size: 13px;
padding-left: 6px;
padding-bottom: 4px;
+ user-select: none;
}
.message-data-level {
@@ -93,6 +95,7 @@ export const chatStyles = css`
font-size: 13px;
padding-left: 8px;
padding-bottom: 4px;
+ user-select: none;
}
.chat-bubble-container {
@@ -102,16 +105,27 @@ export const chatStyles = css`
.message-container {
position: relative;
+ margin-bottom: 20px;
+ }
+
+ .message-subcontainer {
+ position: relative;
display: flex;
+ background-color: #f3f3f3;
flex-grow: 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
- background-color: whitesmoke;
border-radius: 5px;
padding: 10px 15px;
gap: 10px;
- margin-bottom: 20px;
+ margin-bottom: 10px;
+ }
+
+ .message-reactions {
+ background-color: transparent;
+ width: 100%;
+ margin-left: 54px;
}
.original-message {
@@ -122,10 +136,10 @@ export const chatStyles = css`
line-height: 19px;
overflow-wrap: break-word;
user-select: text;
- font-size: 16px;
+ font-size: 13px;
width: 90%;
border-radius: 5px;
- background-color: rgba(209, 209, 209, 0.79);
+ background-color: rgba(232, 232, 232, 0.79);
padding: 8px 5px 8px 25px;
white-space: nowrap;
}
@@ -171,12 +185,19 @@ export const chatStyles = css`
float: left;
}
- .message-parent:hover .chat-hover {
- display: block;
+ .message-parent {
+ padding: 3px;
+ background: rgba(245, 245, 245, 0);
+ transition: all 0.1s ease-in-out;
+ }
+
+ .message-parent:hover {
+ background: var(--chat-bubble);
+ border-radius: 8px;
}
- .message-parent:hover .message-container {
- filter:brightness(0.90);
+ .message-parent:hover .chat-hover {
+ display: block;
}
.chat-hover {
@@ -193,16 +214,6 @@ export const chatStyles = css`
vertical-align: bottom;
object-fit: contain;
}
-
- .my-message {
- background: #d1d1d1;
- border: 2px solid #eeeeee;
- }
-
- .other-message {
- background: #f1f1f1;
- border: 2px solid #dedede;
- }
.align-left {
text-align: left;
@@ -324,12 +335,18 @@ export const chatStyles = css`
}
.reactions-bg {
- background-color: #3C4048;
+ background-color: #d5d5d5;
border-radius: 10px;
- padding: 4px;
- color: white;
+ padding: 5px;
+ color: black;
margin-right: 10px;
- cursor: pointer
+ transition: all 0.1s ease-in-out;
+ border: 0.5px solid transparent;
+ cursor: pointer;
+ }
+
+ .reactions-bg:hover {
+ border: 0.5px solid #6b6969;
}
.image-container {
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index d2f99701..b9870e10 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -314,59 +314,65 @@ class MessageTemplate extends LitElement {
-
-
-
- `}
-
-
-
-
- ${this.editedMessageObj ? (
- html`
- this._sendMessage()}
- >
- `
- ) : html``
- }
+ `}
+
+ this.closeEditMessageContainer()}
+ >
+
+
+
+ ${this.editedMessageObj ? (
+ html`
+
+ ${this.isLoading === false ? html`
+ this._sendMessage()}
+ >
+
+ ` :
+ html`
+
+ `
+ ) :
+ html`
+
+ ${this.isLoading === false ? html`
` : html`
+ `
+ }
+ ` : html`