mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-03-14 03:32:33 +00:00
Merge pull request #358 from AlphaX-Qortal/master
Fixed view chat timestamp and reworked view chat dialog
This commit is contained in:
AlphaX
GitHub
commit
e2d6d83fd8
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
@ -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>`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user