AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Changed message bubble colors + added new badges

Browse Source
This commit is contained in:
Justin Ferrari 2023-01-24 15:11:12 -05:00
parent 9d8eb16eef
commit 432c98bee6
10 changed files with 54 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/badges/Level-8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
img/badges/level-10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
img/badges/level-6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
img/badges/level-7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
img/badges/level-9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

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

@ -10,6 +10,7 @@ html {
--chat-group: #080808;
--chat-bubble: #9f9f9f0a;
--chat-bubble-bg: #e6e6e6;
--chat-bubble-myBg: #d1ddf2;
--chat-bubble-msg-color: #080808;
--reaction-bubble-outline: #6b6969;
--chat-menu-bg: #ffffff;
@ -65,6 +66,7 @@ html[theme="dark"] {
--chat-group: #ffffff;
--chat-bubble: #9694941a;
--chat-bubble-bg: #2d3749;
--chat-bubble-myBg: #40444d;
--chat-bubble-msg-color: #ffffff;
--reaction-bubble-outline: #ffffff;
--chat-menu-bg: #32394c;

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

@ -10,6 +10,7 @@ html {
--chat-group: #080808;
--chat-bubble: #9f9f9f0a;
--chat-bubble-bg: #e6e6e6;
--chat-bubble-myBg: #d1ddf2;
--chat-bubble-msg-color: #080808;
--reaction-bubble-outline: #6b6969;
--chat-menu-bg: #ffffff;
@ -62,6 +63,7 @@ html[theme="dark"] {
--chat-group: #ffffff;
--chat-bubble: #9694941a;
--chat-bubble-bg: #2d3749;
--chat-bubble-myBg: #40444d;
--chat-bubble-msg-color: #ffffff;
--reaction-bubble-outline: #ffffff;
--chat-menu-bg: #32394c;

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

@ -77,8 +77,8 @@ export const chatStyles = css`
}
.message-data-my-name {
color: var(--mdc-theme-primary);
text-shadow: 0 0 3px var(--mdc-theme-primary);
color: #05be0e;
font-weight: bold;
}
.message-data-time {
@ -137,6 +137,11 @@ export const chatStyles = css`
min-width: 150px;
}
.message-myBg {
background-color: var(--chat-bubble-myBg) !important;
}
.message-triangle {
position: relative;
}
@ -153,6 +158,22 @@ export const chatStyles = css`
border-color: transparent transparent var(--chat-bubble-bg) transparent;
}
.message-myTriangle {
position: relative;
}
.message-myTriangle:after {
content: "";
position: absolute;
bottom: 0px;
left: -9px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 7px 9px;
border-color: transparent transparent var(--chat-bubble-myBg) transparent;
}
.message-reactions {
background-color: transparent;
width: calc(100% - 54px);
@ -185,9 +206,7 @@ export const chatStyles = css`
}
.original-message-sender {
margin: 0 0 5px 0;
color: var(--mdc-theme-primary);
cursor: pointer;
}
.replied-message {
@ -198,6 +217,7 @@ export const chatStyles = css`
max-width: 300px;
max-height: 40px;
}
.replied-message p {
margin: 0px;
padding: 0px;
@ -412,7 +432,7 @@ export const chatStyles = css`
.message-data-level {
height: 21px;
width: 21px;
width: auto;
overflow: hidden;
}

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

@ -502,9 +502,12 @@ class MessageTemplate extends LitElement {
`}
<div
class="${`message-subcontainer2
${((this.isFirstMessage === true && this.isSingleMessageInGroup === false) ||
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) &&
'message-triangle'}`}"
${this.myAddress === this.messageObj.sender && "message-myBg" }
${(((this.isFirstMessage === true && this.isSingleMessageInGroup === false) ||
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress !== this.messageObj.sender)
? 'message-triangle'
: (((this.isFirstMessage === true && this.isSingleMessageInGroup === false) ||
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress === this.messageObj.sender) ? "message-myTriangle" : null}`}"
style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null}
${(this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
? 'border-radius: 8px 25px 25px 8px;'
@ -551,28 +554,27 @@ class MessageTemplate extends LitElement {
@click=${()=> {
this.goToRepliedMessage(repliedToData)
}}>
<p
class="original-message-sender">
<p
style=${"cursor: pointer; margin: 0 0 5px 0;"}
class=${this.myAddress !== repliedToData.sender
? "original-message-sender"
: "message-data-my-name"}>
${repliedToData.senderName ?? cropAddress(repliedToData.sender)}
</p>
<p class="replied-message">
${version.toString() === '1' ? html`
${repliedToData.decodedMessage.messageText}
` : ''}
${version.toString() === '2' ? html`
${unsafeHTML(generateHTML(repliedToData.decodedMessage.messageText, [
StarterKit,
Underline,
Highlight
// other extensions …
]))}
` : ''}
</p>
${version.toString() === '1' ? html`
${repliedToData.decodedMessage.messageText}
` : ''}
${version.toString() === '2' ? html`
${unsafeHTML(generateHTML(repliedToData.decodedMessage.messageText, [
StarterKit,
Underline,
Highlight
// other extensions …
]))}
`
: ''}
</p>
</div>
`}
${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
@ -604,7 +606,6 @@ class MessageTemplate extends LitElement {
<vaadin-icon
@click=${() => {
this.openDeleteImage = true;
this.chatE
}}
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
` : ''}

1
qortal-ui-plugins/plugins/core/components/LevelFounder.js
View File

@ -63,6 +63,7 @@ class LevelFounder extends LitElement {
.message-data {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}