${this.isLoadingMessages ? html`
-
${translate("chatpage.cchange22")}
` : this.renderChatScroller(this._initialMessages)} -
-
+
+
hello
@@ -251,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`
@@ -1655,23 +1690,21 @@ class ChatPage extends LitElement {
e.preventDefault();
const item_list = await navigator.clipboard.read();
- 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 => {
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
index 4609de6c..aea9d27e 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
@@ -39,7 +39,7 @@ export const chatStyles = css`
ul {
list-style: none;
margin: 0;
- padding: 20px;
+ padding: 20px 17px;
}
.last-message-ref {
@@ -77,6 +77,7 @@ export const chatStyles = css`
.message-data-name {
color: var(--black);
+ user-select: none;
}
.message-data-time {
@@ -84,6 +85,7 @@ export const chatStyles = css`
font-size: 13px;
padding-left: 6px;
padding-bottom: 4px;
+ user-select: none;
}
.message-data-level {
@@ -91,6 +93,7 @@ export const chatStyles = css`
font-size: 13px;
padding-left: 8px;
padding-bottom: 4px;
+ user-select: none;
}
.chat-bubble-container {
@@ -100,16 +103,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 {
@@ -120,10 +134,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;
}
@@ -169,12 +183,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 {
@@ -191,16 +212,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;
@@ -322,12 +333,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 be2c9acb..8c719642 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -273,59 +273,65 @@ class MessageTemplate extends LitElement {
-
@@ -314,22 +330,41 @@ class ChatPage extends LitElement {
`}
+ this.closeEditMessageContainer()}
+ >
${this.editedMessageObj ? (
html`
+
+ ${this.isLoading === false ? html`
this._sendMessage()}
- >
- `
- ) : html``
+ >
+
+ ` :
+ html`
+
+ `
+ ) :
+ html`
+
+ ${this.isLoading === false ? html`
` : html`
+ `
}
` : html`