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

Fixed Cache Bug + Finished UI Refactor

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-13 20:24:23 -05:00
parent e145c9b0e1
commit 97bad6d760
10 changed files with 106 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

14
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -559,7 +559,7 @@ class ChatPage extends LitElement {
<div></div>
</div>
` :
this.renderChatScroller(this._initialMessages)}
this.renderChatScroller()}
<mwc-dialog
id="showDialogPublicKey"
?open=${this.imageFile}
@ -900,9 +900,9 @@ class ChatPage extends LitElement {
if (changedProperties.has('messagesRendered')) {
const chatReference1 = this.isReceipient ? 'direct' : 'group';
const chatReference2 = this._chatId
if (chatReference1 && chatReference2) {
await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered);
}
// if (chatReference1 && chatReference2) {
// await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered);
// }
}
if (changedProperties && changedProperties.has('editedMessageObj')) {
this.chatEditor.insertText(this.editedMessageObj.message)
@ -949,10 +949,9 @@ class ChatPage extends LitElement {
this.chatEditorPlaceholder = placeholder;
}
renderChatScroller(initialMessages) {
renderChatScroller() {
return html`
<chat-scroller
.initialMessages=${initialMessages}
.messages=${this.messagesRendered}
.emojiPicker=${this.emojiPicker}
.escapeHTML=${escape}
@ -1062,8 +1061,7 @@ class ChatPage extends LitElement {
})
// TODO: Determine number of initial messages by screen height...
this._initialMessages = this._messages;
this.messagesRendered = this._initialMessages;
this.messagesRendered = this._messages;
this.isLoadingMessages = false;
setTimeout(() => this.downElementObserver(), 500);
} else {

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

@ -93,19 +93,32 @@ export const chatStyles = css`
}
.message-data-time {
color: #a8aab1;
color: #888888;
font-size: 13px;
padding-left: 6px;
padding-bottom: 4px;
user-select: none;
float: right;
padding-left: 15px;
padding-bottom: 3px;
transform: translateY(10px);
}
.message-data-level {
color: #03a9f4;
.message-data-time-hidden {
visibility: hidden;
transition: all 0.1s ease-in-out;
color: #888888;
font-size: 13px;
padding-left: 8px;
padding-bottom: 4px;
user-select: none;
float: right;
padding-left: 15px;
padding-bottom: 3px;
transform: translateY(10px);
}
.message-user-info {
display: flex;
justify-content: space-between;
width: 100%;
gap: 10px;
}
.chat-bubble-container {
@ -231,6 +244,10 @@ export const chatStyles = css`
display: block;
}
.message-parent:hover .message-data-time-hidden {
visibility: visible;
}
.chat-hover {
display: none;
position: absolute;

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

@ -16,7 +16,6 @@ import '@material/mwc-icon';
import { EmojiPicker } from 'emoji-picker-js';
import { cropAddress } from "../../utils/cropAddress";
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
class ChatScroller extends LitElement {
static get properties() {
@ -25,7 +24,6 @@ class ChatScroller extends LitElement {
getOldMessage: { attribute: false },
emojiPicker: { attribute: false },
escapeHTML: { attribute: false },
initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props )
messages: { type: Array },
hideMessages: { type: Array },
setRepliedToMessageObj: { type: Function },
@ -51,26 +49,26 @@ class ChatScroller extends LitElement {
console.log({messages: this.messages})
let formattedMessages = this.messages.reduce((messageArray, message) => {
const lastGroupedMessage = messageArray[messageArray.length - 1]
let timestamp
let sender
let repliedToData
const lastGroupedMessage = messageArray[messageArray.length - 1];
let timestamp;
let sender;
let repliedToData;
if (lastGroupedMessage) {
timestamp = lastGroupedMessage.timestamp
sender = lastGroupedMessage.sender
repliedToData = lastGroupedMessage.repliedToData
timestamp = lastGroupedMessage.timestamp;
sender = lastGroupedMessage.sender;
repliedToData = lastGroupedMessage.repliedToData;
}
const isSameGroup = Math.abs(timestamp - message.timestamp) < 600000 && sender === message.sender && !repliedToData
const isSameGroup = Math.abs(timestamp - message.timestamp) < 600000 && sender === message.sender && !repliedToData;
if (isSameGroup) {
messageArray[messageArray.length - 1].messages = [...(messageArray[messageArray.length - 1]?.messages || []), message]
messageArray[messageArray.length - 1].messages = [...(messageArray[messageArray.length - 1]?.messages || []), message];
} else {
messageArray.push({
messages: [message],
...message
})
});
}
return messageArray
return messageArray;
}, [])
return html`
@ -248,8 +246,7 @@ 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})
console.log(this.messageObj);
const hidemsg = this.hideMessages;
let message = "";
let reactions = [];
@ -348,14 +345,6 @@ class MessageTemplate extends LitElement {
'padding-bottom: 0;'
: null}
${this.isFirstMessage && 'margin-top: 20px;'}">
${this.isFirstMessage ? (
html`
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
<span class="message-data-level">${levelFounder}</span>
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
</div>
`
) : null}
<div>
<div
class="message-container"
@ -385,10 +374,11 @@ class MessageTemplate extends LitElement {
? 'border-radius: 27px 25px 25px 12px;'
: (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?
'border-radius: 10px 25px 25px 0;'
: this.isFirstMessage === true
: (this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === true)
? 'border-radius: 25px 25px 25px 0px;'
: null
}">
<div class="message-user-info">
${this.isFirstMessage ?
html`
<span class="message-data-name">
@ -397,6 +387,12 @@ class MessageTemplate extends LitElement {
`
: null
}
${this.isFirstMessage ? (
html`
<span class="message-data-level">${levelFounder}</span>
`
) : null}
</div>
${repliedToData && html`
<div class="original-message">
<p class="original-message-sender">
@ -421,12 +417,23 @@ class MessageTemplate extends LitElement {
` : html``}
<div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
<div class="${((this.isFirstMessage === false &&
this.isSingleMessageInGroup === true &&
this.isLastMessageInGroup === true) ||
(this.isFirstMessage === true &&
this.isSingleMessageInGroup === false &&
this.isLastMessageInGroup === true))
? 'message-data-time'
: 'message-data-time-hidden'
}">
<message-time timestamp=${this.messageObj.timestamp}></message-time>
</div>
</div>
</div>
<chat-menu
tabindex="0"
class="chat-hover"
style="${this.showBlockAddressIcon ? 'display: block;' : null} ${this.isFirstMessage && 'top: -50px'}"
style="${this.showBlockAddressIcon && 'display: block;'}"
toblockaddress="${this.messageObj.sender}"
.showPrivateMessageModal=${() => this.showPrivateMessageModal()}
.showBlockUserModal=${() => this.showBlockUserModal()}
@ -538,8 +545,6 @@ class ChatMenu extends LitElement {
}
}
firstUpdated () {
this.emojiPicker = new EmojiPicker({
style: "twemoji",
@ -559,13 +564,9 @@ class ChatMenu extends LitElement {
})
});
}
render() {
return html`
<div class="container">

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

@ -48,32 +48,42 @@ class LevelFounder extends LitElement {
font-weight: 400;
}
.level {
position: relative;
display: inline;
}
.custom {
--paper-tooltip-background: #03a9f4;
--paper-tooltip-text-color: #fff;
}
.level-img-tooltip {
--paper-tooltip-background: #000000;
--paper-tooltip-text-color: #fff;
--paper-tooltip-delay-in: 300;
--paper-tooltip-delay-out: 3000;
}
.message-data {
display: flex;
justify-content: center;
gap: 5px;
}
.message-data-level {
width: 20px;
height: 20px;
}
.badge {
align-items: center;
background: #03a9f4;
background: rgb(3, 169, 244);
border: 1px solid transparent;
border-radius: 99em;
color: #fff;
border-radius: 50%;
color: rgb(255, 255, 255);
display: flex;
font-size: 10px;
font-weight: 400;
height: 12px;
width: 12px;
justify-content: center;
line-height: 1;
min-width: 12px;
position: absolute;
left: -16px;
top: -12px;
cursor: pointer;
}
`
@ -87,7 +97,7 @@ class LevelFounder extends LitElement {
render() {
return html`
<div class="level">
<div class="message-data">
${this.renderFounder()}
${this.renderLevel()}
</div>
@ -135,21 +145,24 @@ class LevelFounder extends LitElement {
}
renderFounder() {
let adressfounder = this.memberInfo.flags
let adressfounder = this.memberInfo.flags;
if (adressfounder === 1) {
return html `
<span id="founderTooltip" class="badge">F</span>
<paper-tooltip class="custom" for="founderTooltip" position="top">FOUNDER</paper-tooltip>
`
} else {
return html ``
return null;
}
}
renderLevel() {
let adresslevel = this.memberInfo.level
let adresslevel = this.memberInfo.level;
return html `
<span id="levelTooltip">${translate("mintingpage.mchange27")} ${adresslevel}</span>
<img id="level-img" src=${`/img/badges/level-${adresslevel}.png`} alt=${`badge-${adresslevel}`} class="message-data-level" />
<paper-tooltip class="level-img-tooltip" for="level-img" position="top" >
${translate("mintingpage.mchange27")} ${adresslevel}
</paper-tooltip>
`
}