diff --git a/plugins/plugins/core/components/ChatPage.js b/plugins/plugins/core/components/ChatPage.js index 36ed523c..d8302976 100644 --- a/plugins/plugins/core/components/ChatPage.js +++ b/plugins/plugins/core/components/ChatPage.js @@ -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) { diff --git a/plugins/plugins/core/components/plugins-css.js b/plugins/plugins/core/components/plugins-css.js index f5454e97..50391307 100644 --- a/plugins/plugins/core/components/plugins-css.js +++ b/plugins/plugins/core/components/plugins-css.js @@ -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; } ` diff --git a/plugins/plugins/core/q-chat/q-chat.src.js b/plugins/plugins/core/q-chat/q-chat.src.js index 04b80174..33e6b170 100644 --- a/plugins/plugins/core/q-chat/q-chat.src.js +++ b/plugins/plugins/core/q-chat/q-chat.src.js @@ -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 {
-
{ this.shadowRoot.querySelector('#viewChatDialog').show() }}> +
{ this.openView(this.activeChatHeadUrl) }}> pageview ${translate("chatpage.cchange5")} keyboard_arrow_down
- ${this.activeChatHeadUrl ? html`${this.renderChatPage()}` : html`${this.renderChatWelcomePage()}`} + ${this.activeChatHeadUrl ? + html`${this.renderChatPage()}` + : this.isViewOpen ? html`${this.renderChatViewPage()}` + : html`${this.renderChatWelcomePage()}` + }
@@ -315,43 +324,24 @@ class Chat extends LitElement { - -
-

${translate("modals.mpchange87")}

-
-
+ +
+
+ + + + +
-
- - -
- - ${translate("general.close")} - - - ${translate("general.view")} - - - -
-
-
-
-
-
-
-
-
-
-

Checking
` @@ -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` +
+
+
+
+
+
+
+
+
+
+
+ ` + } + renderChatHead(chatHeadArr) { return chatHeadArr.map(eachChatHead => { return html` this.setActiveChatHeadUrl(val)} chatInfo=${JSON.stringify(eachChatHead)}>`