Merge pull request #358 from AlphaX-Qortal/master

Fixed view chat timestamp and reworked view chat dialog
This commit is contained in:
AlphaX 2025-02-18 10:44:07 +01:00 committed by GitHub
commit e2d6d83fd8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 180 additions and 126 deletions

View File

@ -2600,12 +2600,17 @@ class ChatPage extends LitElement {
let getInitialMessages = []
let count = 0
let isUnread = false
let chatInfoTimestamp
const chatId = this.chatId
const findContent = this.chatHeads.find((item) => item.url === chatId)
const chatInfoTimestamp = findContent.timestamp || 0
const lastReadMessageTimestamp = this.lastReadMessageTimestamp
if (findContent === undefined) {
chatInfoTimestamp = 0
} else {
chatInfoTimestamp = findContent.timestamp || 0
}
if (lastReadMessageTimestamp && chatInfoTimestamp) {
if (lastReadMessageTimestamp < chatInfoTimestamp) {
@ -2721,13 +2726,18 @@ class ChatPage extends LitElement {
this.lastReadMessageTimestamp = await chatLastSeen.getItem(this.chatId) || 0
if (noInitial) return
let getInitialMessages = []
const lastReadMessageTimestamp = this.lastReadMessageTimestamp
let isUnread = false
let chatInfoTimestamp
const chatId = this.chatId
const findContent = this.chatHeads.find((item) => item.url === chatId)
const chatInfoTimestamp = findContent.timestamp || 0
const lastReadMessageTimestamp = this.lastReadMessageTimestamp
if (findContent === undefined) {
chatInfoTimestamp = 0
} else {
chatInfoTimestamp = findContent.timestamp || 0
}
if (lastReadMessageTimestamp && chatInfoTimestamp) {
if (lastReadMessageTimestamp < chatInfoTimestamp) {

View File

@ -7146,18 +7146,28 @@ export const qchatStyles = css`
* {
--mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-secondary: var(--mdc-theme-primary);
--paper-input-container-focus-color: var(--mdc-theme-primary);
--mdc-theme-surface: var(--white);
--mdc-dialog-content-ink-color: var(--black);
--mdc-dialog-min-width: 750px;
--lumo-primary-text-color: rgb(0, 167, 245);
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
--lumo-primary-color: hsl(199, 100%, 48%);
--lumo-secondary-text-color: var(--sectxt);
--lumo-contrast-60pct: var(--vdicon);
--item-selected-color: var(--nav-selected-color);
--lumo-base-color: var(--white);
--lumo-body-text-color: var(--black);
--_lumo-grid-border-color: var(--border);
--_lumo-grid-secondary-border-color: var(--border2);
--mdc-dialog-min-width: 750px;
--item-selected-color-text: var(--nav-selected-color-text);
--item-color-active: var(--nav-color-active);
--item-color-hover: var(--nav-color-hover);
--item-text-color: var(--nav-text-color);
--item-icon-color: var(--nav-icon-color);
--item-border-color: var(--nav-border-color);
--item-border-selected-color: var(--nav-border-selected-color);
--paper-input-container-focus-color: var(--mdc-theme-primary);
}
paper-spinner-lite {
@ -7655,109 +7665,108 @@ export const qchatStyles = css`
overflow: hidden;
}
.check-roller {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.check-roller div {
animation: check-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px;
}
.check-roller div:after {
content: " ";
display: block;
.view-grid {
width: 120px;
height: 120px;
position: absolute;
width: 7px;
height: 7px;
left: 50%;
top: 50%;
}
.view-grid div {
position: absolute;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--black);
margin: -4px 0 0 -4px;
background: #03a9f4;
animation: view-grid 1.2s linear infinite;
}
.check-roller div:nth-child(1) {
animation-delay: -0.036s;
.view-grid div:nth-child(1) {
top: 4px;
left: 4px;
animation-delay: 0s;
}
.check-roller div:nth-child(1):after {
top: 63px;
left: 63px;
}
.check-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.check-roller div:nth-child(2):after {
top: 68px;
left: 56px;
}
.check-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.check-roller div:nth-child(3):after {
top: 71px;
.view-grid div:nth-child(2) {
top: 4px;
left: 48px;
animation-delay: -0.4s;
}
.check-roller div:nth-child(4) {
animation-delay: -0.144s;
.view-grid div:nth-child(3) {
top: 4px;
left: 90px;
animation-delay: -0.8s;
}
.check-roller div:nth-child(4):after {
top: 72px;
left: 40px;
.view-grid div:nth-child(4) {
top: 50px;
left: 4px;
animation-delay: -0.4s;
}
.check-roller div:nth-child(5) {
animation-delay: -0.18s;
.view-grid div:nth-child(5) {
top: 50px;
left: 48px;
animation-delay: -0.8s;
}
.check-roller div:nth-child(5):after {
top: 71px;
left: 32px;
.view-grid div:nth-child(6) {
top: 50px;
left: 90px;
animation-delay: -1.2s;
}
.check-roller div:nth-child(6) {
animation-delay: -0.216s;
.view-grid div:nth-child(7) {
top: 95px;
left: 4px;
animation-delay: -0.8s;
}
.check-roller div:nth-child(6):after {
top: 68px;
left: 24px;
.view-grid div:nth-child(8) {
top: 95px;
left: 48px;
animation-delay: -1.2s;
}
.check-roller div:nth-child(7) {
animation-delay: -0.252s;
.view-grid div:nth-child(9) {
top: 95px;
left: 90px;
animation-delay: -1.6s;
}
.check-roller div:nth-child(7):after {
top: 63px;
left: 17px;
}
.check-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.check-roller div:nth-child(8):after {
top: 56px;
left: 12px;
}
@keyframes check-roller {
0% {
transform: rotate(0deg);
}
@keyframes view-grid {
0%,
100% {
transform: rotate(360deg);
opacity: 1;
}
50% {
opacity: 0.5;
}
}
paper-dialog.viewSettings {
min-width: 525px;
max-width: 525px;
min-height: auto;
max-height: 150px;
background-color: var(--white);
color: var(--black);
line-height: 1.6;
overflow: hidden;
border: 1px solid var(--black);
border-radius: 10px;
padding: 15px;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}
.view {
display: inline;
width: 50%;
align-items: center;
}
`

View File

@ -39,6 +39,7 @@ import '@polymer/paper-icon-button/paper-icon-button.js'
import '@polymer/paper-spinner/paper-spinner-lite.js'
import '@vaadin/grid'
import '@vaadin/tooltip'
import '@vaadin/text-field'
// Multi language support
import { get, registerTranslateConfig, translate, use } from '../../../../core/translate'
@ -62,6 +63,7 @@ class Chat extends LitElement {
messages: { type: Array },
btnDisable: { type: Boolean },
isLoading: { type: Boolean },
isViewOpen: { type: Boolean },
balance: { type: Number },
theme: { type: String, reflect: true },
blockedUsers: { type: Array },
@ -69,6 +71,7 @@ class Chat extends LitElement {
privateMessagePlaceholder: { type: String },
imageFile: { type: Object },
activeChatHeadUrl: { type: String },
switchChatHeadUrl: { type: String },
openPrivateMessage: { type: Boolean },
userFound: { type: Array },
userFoundModalOpen: { type: Boolean },
@ -102,6 +105,7 @@ class Chat extends LitElement {
this.messages = []
this.btnDisable = false
this.isLoading = false
this.isViewOpen = false
this.showNewMessageBar = this.showNewMessageBar.bind(this)
this.hideNewMessageBar = this.hideNewMessageBar.bind(this)
this.setOpenPrivateMessage = this.setOpenPrivateMessage.bind(this)
@ -113,6 +117,7 @@ class Chat extends LitElement {
this.privateMessagePlaceholder = ''
this.imageFile = null
this.activeChatHeadUrl = ''
this.switchChatHeadUrl = ''
this.openPrivateMessage = false
this.userFound = []
this.userFoundModalOpen = false
@ -140,7 +145,7 @@ class Chat extends LitElement {
</vaadin-tooltip>
</div>
<div style="display:flex; align-items:center;gap:10px">
<div id="viewChat" class="create-chat" @click=${() => { this.shadowRoot.querySelector('#viewChatDialog').show() }}>
<div id="viewChat" class="create-chat" @click=${() => { this.openView(this.activeChatHeadUrl) }}>
<mwc-icon style="color: var(--black);">pageview</mwc-icon>
<vaadin-tooltip
for="viewChat"
@ -185,7 +190,11 @@ class Chat extends LitElement {
<span>${translate("chatpage.cchange5")} <mwc-icon style="font-size: 16px; vertical-align: bottom;">keyboard_arrow_down</mwc-icon></span>
</div>
<div class="chat-history">
${this.activeChatHeadUrl ? html`${this.renderChatPage()}` : html`${this.renderChatWelcomePage()}`}
${this.activeChatHeadUrl ?
html`${this.renderChatPage()}`
: this.isViewOpen ? html`${this.renderChatViewPage()}`
: html`${this.renderChatWelcomePage()}`
}
</div>
</div>
<!-- Start Chatting Dialog -->
@ -315,43 +324,24 @@ class Chat extends LitElement {
</mwc-button>
</mwc-dialog>
<!-- View Chat Over ID -->
<mwc-dialog id="viewChatDialog">
<div style="text-align: center;">
<h1>${translate("modals.mpchange87")}</h1>
<hr>
<br>
<paper-dialog id="viewChatDialog" class="viewSettings" modal>
<div style="display: inline;">
<div class="view">
<vaadin-text-field
style="width: 350px"
id="groupIdInput"
required
allowed-char-pattern="[0-9]"
placeholder="${translate("modals.mpchange87")}"
value=""
@keydown="${this.viewKeyListener}"
clear-button-visible
>
</vaadin-text-field>
<paper-icon-button icon="icons:visibility" @click="${() => this.switchChatID()}" title="${translate("general.view")}"></paper-icon-button>
<paper-icon-button icon="icons:close" @click="${() => this.closeView()}" title="${translate("general.close")}"></paper-icon-button>
</div>
</div>
<div style="display: flex; align-items: center;">
<mwc-textfield
style="width: 100%;"
required
id="groupIdInput"
label="${translate("managegroup.mg8")}"
type="number"
auto-validate="false"
value=""
>
</mwc-textfield>
</div>
<mwc-button slot="primaryAction" dialogAction="cancel" class="red">
${translate("general.close")}
</mwc-button>
<mwc-button slot="secondaryAction" class="green" @click=${this.switchChatID}>
${translate("general.view")}
</mwc-button>
</mwc-dialog>
<paper-dialog id="checkIdDialog" class="check" modal>
<div class="check-roller">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h2>Checking</h2>
</paper-dialog>
</div>
`
@ -499,8 +489,6 @@ class Chat extends LitElement {
viewGroupID = this.shadowRoot.getElementById('groupIdInput').value
this.shadowRoot.getElementById('checkIdDialog').open()
await parentEpml.request('apiCall', {
url: `/groups/${viewGroupID}`
}).then(res => {
@ -508,25 +496,55 @@ class Chat extends LitElement {
})
if (checkTheID.error) {
this.shadowRoot.getElementById('checkIdDialog').close()
this.shadowRoot.getElementById('viewChatDialog').close()
this.shadowRoot.getElementById('groupIdInput').value = ''
this.isViewOpen = false
this.activeChatHeadUrl = this.switchChatHeadUrl
this.switchChatHeadUrl = ''
this.resetChatEditor()
parentEpml.request('showSnackBar', `${notFound}`)
} else if (checkTheID.groupId) {
let switchToID = checkTheID.groupName
this.shadowRoot.getElementById('checkIdDialog').close()
this.shadowRoot.getElementById('viewChatDialog').close()
this.shadowRoot.getElementById('groupIdInput').value = ''
this.switchChatHeadUrl = ''
parentEpml.request('showSnackBar', `${switchToID}`)
this.processChatID(checkTheID.groupId)
} else {
this.shadowRoot.getElementById('checkIdDialog').close()
this.shadowRoot.getElementById('viewChatDialog').close()
this.shadowRoot.getElementById('groupIdInput').value = ''
this.isViewOpen = false
this.activeChatHeadUrl = this.switchChatHeadUrl
this.switchChatHeadUrl = ''
this.resetChatEditor()
parentEpml.request('showSnackBar', `${wentWrong}`)
}
}
openView(currentUrl) {
this.switchChatHeadUrl = currentUrl
this.activeChatHeadUrl = ''
this.isViewOpen = true
this.shadowRoot.getElementById('viewChatDialog').open()
this.shadowRoot.getElementById('groupIdInput').value = ''
this.resetChatEditor()
}
closeView() {
this.shadowRoot.getElementById('viewChatDialog').close()
this.shadowRoot.getElementById('groupIdInput').value = ''
this.isViewOpen = false
this.activeChatHeadUrl = this.switchChatHeadUrl
this.switchChatHeadUrl = ''
this.resetChatEditor()
}
viewKeyListener(e) {
if (e.key === 'Enter') {
this.switchChatID()
}
}
async processChatID(newID) {
let viewNewUrl = 'group/' + newID
this.setActiveChatHeadUrl(viewNewUrl)
@ -535,6 +553,7 @@ class Chat extends LitElement {
async setActiveChatHeadUrl(url) {
await this.getSymKeyFile(url)
this.isViewOpen = false
}
async getSymKeyFile(url) {
@ -1153,6 +1172,22 @@ class Chat extends LitElement {
`
}
renderChatViewPage() {
return html`
<div class="view-grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
`
}
renderChatHead(chatHeadArr) {
return chatHeadArr.map(eachChatHead => {
return html`<chat-head activeChatHeadUrl=${this.activeChatHeadUrl} .setActiveChatHeadUrl=${(val) => this.setActiveChatHeadUrl(val)} chatInfo=${JSON.stringify(eachChatHead)}></chat-head>`