Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

Continued Chat UI Refactor

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-11 22:03:58 -05:00
parent 5e4c5cf862
commit e145c9b0e1
5 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
qortal-ui-core/font/switch-theme.css
View File

@ -7,7 +7,7 @@ html {
--border: #d0d6de;
--border2: #dde2e8;
--copybutton: #707584;
--chat-bubble: #efefef73;
--chat-bubble: #9f9f9f0a;
--chat-bubble-bg: #f3f3f3;
--chat-bubble-msg-color: #080808;
--sectxt: #576374;

2
qortal-ui-core/src/styles/switch-theme.css
View File

@ -7,7 +7,7 @@ html {
--border: #d0d6de;
--border2: #dde2e8;
--copybutton: #707584;
--chat-bubble: #efefef73;
--chat-bubble: #9f9f9f0a;
--chat-bubble-bg: #f3f3f3;
--chat-bubble-msg-color: #080808;
--sectxt: #576374;

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

@ -82,8 +82,14 @@ export const chatStyles = css`
}
.message-data-name {
color: var(--black);
user-select: none;
color: #03a9f4;
margin-bottom: 5px;
}
.message-data-my-name {
color: #cf21e8;
text-shadow: 0 0 3px #cf21e8;
}
.message-data-time {
@ -127,7 +133,6 @@ export const chatStyles = css`
justify-content: center;
border-radius: 5px;
padding: 12px 15px;
gap: 10px;
width: fit-content;
min-width: 150px;
}
@ -158,16 +163,14 @@ export const chatStyles = css`
position: relative;
display: flex;
flex-direction: column;
color: black;
color: var(--chat-bubble-msg-color);
line-height: 19px;
overflow-wrap: break-word;
user-select: text;
font-size: 13px;
font-size: 15px;
width: 90%;
border-radius: 5px;
background-color: rgba(232, 232, 232, 0.79);
padding: 8px 5px 8px 25px;
white-space: nowrap;
margin-bottom: 10px;
}
.original-message:before {
@ -187,8 +190,10 @@ export const chatStyles = css`
.replied-message {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
}
.message {

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

@ -14,6 +14,7 @@ import '@material/mwc-button';
import '@material/mwc-dialog';
import '@material/mwc-icon';
import { EmojiPicker } from 'emoji-picker-js';
import {cropAddress} from "../../utils/cropAddress";
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@ -247,6 +248,8 @@ class MessageTemplate extends LitElement {
}
render() {
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
console.log({isFirstMessage: this.isFirstMessage, isSingleMessageInGroup: this.isSingleMessageInGroup, isLastMessageInGroup: this.isLastMessageInGroup, messageText: parsedMessageObj.messageText})
const hidemsg = this.hideMessages;
let message = "";
let reactions = [];
@ -321,11 +324,12 @@ class MessageTemplate extends LitElement {
imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
}
if (this.messageObj.sender === this.myAddress) {
nameMenu = html`<span style="color: #03a9f4;">${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>`;
} else {
nameMenu = html`<span>${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>`;
}
nameMenu = html`
<span class="${this.messageObj.sender === this.myAddress && 'message-data-my-name'}">
${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)}
</span>
`;
if (repliedToData) {
try {
const parsedMsg = JSON.parse(repliedToData.decodedMessage);
@ -347,7 +351,6 @@ class MessageTemplate extends LitElement {
${this.isFirstMessage ? (
html`
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
<span class="message-data-name">${nameMenu}</span>
<span class="message-data-level">${levelFounder}</span>
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
</div>
@ -376,20 +379,32 @@ class MessageTemplate extends LitElement {
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) &&
'message-triangle'}`}"
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null}
${(this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === false)
? 'border-radius: 25px 25px 25px 0px;'
: (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
${(this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
? 'border-radius: 8px 25px 25px 8px;'
: (this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
? 'border-radius: 27px 25px 25px 12px;'
: (this.isSingleMessageInGroup === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?
: (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?
'border-radius: 10px 25px 25px 0;'
: this.isFirstMessage === true
? 'border-radius: 25px 25px 25px 0px;'
: null
}">
${this.isFirstMessage ?
html`
<span class="message-data-name">
${nameMenu}
</span>
`
: null
}
${repliedToData && html`
<div class="original-message">
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
<p class="replied-message">${repliedToData.decodedMessage.messageText}</p>
<p class="original-message-sender">
${repliedToData.sendName ?? cropAddress(repliedToData.sender)}
</p>
<p class="replied-message">
${repliedToData.decodedMessage.messageText}
</p>
</div>
`}
${image && !isImageDeleted ? html`

8
qortal-ui-plugins/plugins/utils/cropAddress.js Normal file
View File

@ -0,0 +1,8 @@
export function cropAddress(string = "", range = 5) {
const [start, end] = [
string?.substring(0, range),
string?.substring(string?.length - range, string?.length),
//
];
return start + "..." + end;
}