|
|
|
|
@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit"
|
|
|
|
|
import { render } from "lit/html.js" |
|
|
|
|
import { get, translate } from "lit-translate" |
|
|
|
|
import { Epml } from "../../../epml" |
|
|
|
|
import { getUserNameFromAddress } from "../../utils/getUserNameFromAddress" |
|
|
|
|
import snackbar from "./snackbar.js" |
|
|
|
|
import "@material/mwc-button" |
|
|
|
|
import "@material/mwc-dialog" |
|
|
|
|
@ -15,7 +16,7 @@ class ChatRightPanel extends LitElement {
|
|
|
|
|
static get properties() { |
|
|
|
|
return { |
|
|
|
|
isLoading: { type: Boolean }, |
|
|
|
|
isOpenLeaveModal: { type: Boolean }, |
|
|
|
|
openUserInfo: { type: Boolean }, |
|
|
|
|
leaveGroupObj: { type: Object }, |
|
|
|
|
error: { type: Boolean }, |
|
|
|
|
message: { type: String }, |
|
|
|
|
@ -24,14 +25,18 @@ class ChatRightPanel extends LitElement {
|
|
|
|
|
groupMembers: { attribute: false }, |
|
|
|
|
selectedHead: { type: Object }, |
|
|
|
|
toggle: { attribute: false }, |
|
|
|
|
getMoreMembers:{ attribute: false } |
|
|
|
|
getMoreMembers:{ attribute: false }, |
|
|
|
|
setOpenPrivateMessage: { attribute: false }, |
|
|
|
|
openTipUser: { type: Boolean }, |
|
|
|
|
userName: { type: String }, |
|
|
|
|
chatEditor: { type: Object } |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
constructor() { |
|
|
|
|
super() |
|
|
|
|
this.isLoading = false |
|
|
|
|
this.isOpenLeaveModal = false |
|
|
|
|
this.openUserInfo = false |
|
|
|
|
this.leaveGroupObj = {} |
|
|
|
|
this.leaveFee = 0.001 |
|
|
|
|
this.error = false |
|
|
|
|
@ -42,6 +47,9 @@ class ChatRightPanel extends LitElement {
|
|
|
|
|
this.observerHandler = this.observerHandler.bind(this) |
|
|
|
|
this.viewElement = '' |
|
|
|
|
this.downObserverElement = '' |
|
|
|
|
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address |
|
|
|
|
this.openTipUser = false |
|
|
|
|
this.userName = {} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
static get styles() { |
|
|
|
|
@ -171,6 +179,92 @@ return css`
|
|
|
|
|
font-size: 14px; |
|
|
|
|
color: var(--chat-bubble-msg-color); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.user-info-header { |
|
|
|
|
font-family: Montserrat, sans-serif; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 25px; |
|
|
|
|
color: var(--chat-bubble-msg-color); |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
padding: 10px 0; |
|
|
|
|
user-select: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.send-message-button { |
|
|
|
|
font-family: Roboto, sans-serif; |
|
|
|
|
letter-spacing: 0.3px; |
|
|
|
|
font-weight: 300; |
|
|
|
|
padding: 8px 5px; |
|
|
|
|
border-radius: 3px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: var(--mdc-theme-primary); |
|
|
|
|
transition: all 0.3s ease-in-out; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.send-message-button:hover { |
|
|
|
|
cursor: pointer; |
|
|
|
|
background-color: #03a8f485; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.close-icon { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 3px; |
|
|
|
|
right: 5px; |
|
|
|
|
color: #676b71; |
|
|
|
|
width: 14px; |
|
|
|
|
transition: all 0.1s ease-in-out; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.close-icon:hover { |
|
|
|
|
cursor: pointer; |
|
|
|
|
color: #494c50; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tip-user-header { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 12px; |
|
|
|
|
border-bottom: 1px solid whitesmoke; |
|
|
|
|
gap: 25px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tip-user-header-font { |
|
|
|
|
font-family: Montserrat, sans-serif; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: var(--chat-bubble-msg-color); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tip-user-body { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 15px 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tip-input { |
|
|
|
|
width: 300px; |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
outline: 0; |
|
|
|
|
border-width: 0 0 2px; |
|
|
|
|
border-color: var(--mdc-theme-primary); |
|
|
|
|
background-color: transparent; |
|
|
|
|
padding: 10px; |
|
|
|
|
font-family: Roboto, sans-serif; |
|
|
|
|
font-size: 15px; |
|
|
|
|
color: var(--chat-bubble-msg-color); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tip-input::selection { |
|
|
|
|
background-color: var(--mdc-theme-primary); |
|
|
|
|
color: white;
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tip-input::placeholder { |
|
|
|
|
opacity: 0.9; |
|
|
|
|
color: var(--black); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
` |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -180,6 +274,15 @@ return css`
|
|
|
|
|
this.elementObserver(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
async updated(changedProperties) { |
|
|
|
|
if (changedProperties && changedProperties.has('selectedHead')) { |
|
|
|
|
if (this.selectedHead !== {}) {
|
|
|
|
|
const userName = await getUserNameFromAddress(this.selectedHead.address); |
|
|
|
|
this.userName = userName; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
timeIsoString(timestamp) { |
|
|
|
|
let myTimestamp = timestamp === undefined ? 1587560082346 : timestamp |
|
|
|
|
let time = new Date(myTimestamp) |
|
|
|
|
@ -212,7 +315,7 @@ return css`
|
|
|
|
|
if (myRef && myRef.type) { |
|
|
|
|
clearInterval(interval) |
|
|
|
|
this.isLoading = false |
|
|
|
|
this.isOpenLeaveModal = false |
|
|
|
|
this.openUserInfo = false |
|
|
|
|
} |
|
|
|
|
} catch (error) {} |
|
|
|
|
stop = false |
|
|
|
|
@ -437,7 +540,7 @@ return css`
|
|
|
|
|
} |
|
|
|
|
render() { |
|
|
|
|
console.log('this.groupMembers', this.groupMembers); |
|
|
|
|
console.log(5, "Chat Right Panel Here"); |
|
|
|
|
console.log(18, "Chat Right Panel Here"); |
|
|
|
|
const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner) |
|
|
|
|
return html` |
|
|
|
|
<div class="container"> |
|
|
|
|
@ -457,7 +560,12 @@ return css`
|
|
|
|
|
${owner.map((item) => { |
|
|
|
|
return html`<chat-side-nav-heads
|
|
|
|
|
activeChatHeadUrl="" |
|
|
|
|
.setActiveChatHeadUrl=${(val) => {}} |
|
|
|
|
.setActiveChatHeadUrl=${(val) => { |
|
|
|
|
if (val.address === this.myAddress) return; |
|
|
|
|
console.log({ val }); |
|
|
|
|
this.selectedHead = val; |
|
|
|
|
this.openUserInfo = true; |
|
|
|
|
}} |
|
|
|
|
chatInfo=${JSON.stringify(item)} |
|
|
|
|
></chat-side-nav-heads>` |
|
|
|
|
})} |
|
|
|
|
@ -465,7 +573,12 @@ return css`
|
|
|
|
|
${this.groupAdmin.map((item) => { |
|
|
|
|
return html`<chat-side-nav-heads
|
|
|
|
|
activeChatHeadUrl="" |
|
|
|
|
.setActiveChatHeadUrl=${(val) => {}} |
|
|
|
|
.setActiveChatHeadUrl=${(val) => { |
|
|
|
|
if (val.address === this.myAddress) return; |
|
|
|
|
console.log({ val }); |
|
|
|
|
this.selectedHead = val; |
|
|
|
|
this.openUserInfo = true; |
|
|
|
|
}} |
|
|
|
|
chatInfo=${JSON.stringify(item)} |
|
|
|
|
></chat-side-nav-heads>` |
|
|
|
|
})} |
|
|
|
|
@ -474,9 +587,10 @@ return css`
|
|
|
|
|
return html`<chat-side-nav-heads
|
|
|
|
|
activeChatHeadUrl="" |
|
|
|
|
.setActiveChatHeadUrl=${(val) => { |
|
|
|
|
console.log({ val }) |
|
|
|
|
this.selectedHead = val |
|
|
|
|
this.isOpenLeaveModal = true |
|
|
|
|
if (val.address === this.myAddress) return; |
|
|
|
|
console.log({ val }); |
|
|
|
|
this.selectedHead = val; |
|
|
|
|
this.openUserInfo = true; |
|
|
|
|
}} |
|
|
|
|
chatInfo=${JSON.stringify(item)} |
|
|
|
|
></chat-side-nav-heads>` |
|
|
|
|
@ -485,27 +599,49 @@ return css`
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<wrapper-modal
|
|
|
|
|
.removeImage=${() => { |
|
|
|
|
.onClickFunc=${() => { |
|
|
|
|
if (this.isLoading) return |
|
|
|
|
this.isOpenLeaveModal = false |
|
|
|
|
this.openUserInfo = false |
|
|
|
|
}}
|
|
|
|
|
style=${ |
|
|
|
|
this.isOpenLeaveModal ? "display: block" : "display: none" |
|
|
|
|
this.openUserInfo ? "display: block" : "display: none" |
|
|
|
|
}> |
|
|
|
|
<div style="text-align:center"> |
|
|
|
|
<h1>${translate("grouppage.gchange35")}</h1> |
|
|
|
|
<hr> |
|
|
|
|
<div style=${"position: relative;"}> |
|
|
|
|
<vaadin-icon |
|
|
|
|
class="close-icon" |
|
|
|
|
icon="vaadin:close-big" |
|
|
|
|
slot="icon" |
|
|
|
|
@click=${() => { |
|
|
|
|
this.openUserInfo = false |
|
|
|
|
}} |
|
|
|
|
?disabled="${this.isLoading}"> |
|
|
|
|
</vaadin-icon> |
|
|
|
|
<div class="user-info-header"> |
|
|
|
|
${translate("grouppage.gchange35")} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<button @click=${() => |
|
|
|
|
this._addAdmin( |
|
|
|
|
this.leaveGroupObj.groupId |
|
|
|
|
)}>Promote to Admin</button> |
|
|
|
|
<button @click=${() => |
|
|
|
|
this._removeAdmin( |
|
|
|
|
this.leaveGroupObj.groupId |
|
|
|
|
)}>Remove as Admin</button> |
|
|
|
|
<div style="text-align:right; height:36px;"> |
|
|
|
|
<div
|
|
|
|
|
class="send-message-button"
|
|
|
|
|
@click="${() => { |
|
|
|
|
this.setOpenPrivateMessage({ |
|
|
|
|
name: this.userName, |
|
|
|
|
open: true
|
|
|
|
|
}) |
|
|
|
|
this.openUserInfo = false |
|
|
|
|
}
|
|
|
|
|
}"> |
|
|
|
|
${translate("grouppage.gchange56")} |
|
|
|
|
</div> |
|
|
|
|
<div
|
|
|
|
|
style=${"margin-top: 5px;"}
|
|
|
|
|
class="send-message-button"
|
|
|
|
|
@click=${() => { |
|
|
|
|
this.openTipUser = true |
|
|
|
|
this.openUserInfo = false |
|
|
|
|
this.chatEditor.disable(); |
|
|
|
|
}}> |
|
|
|
|
${translate("grouppage.gchange57")} |
|
|
|
|
</div> |
|
|
|
|
<div ?hidden="${!this.isLoading || this.message === ""}" style="text-align: right; height: 36px;"> |
|
|
|
|
<span ?hidden="${!this.isLoading}"> |
|
|
|
|
<!-- loading message --> |
|
|
|
|
${translate("grouppage.gchange36")} |
|
|
|
|
@ -516,24 +652,28 @@ return css`
|
|
|
|
|
> |
|
|
|
|
</paper-spinner-lite> |
|
|
|
|
</span> |
|
|
|
|
<span ?hidden=${this.message === ""} style="${ |
|
|
|
|
this.error ? "color:red;" : "" |
|
|
|
|
}"> |
|
|
|
|
<span
|
|
|
|
|
?hidden=${this.message === ""}
|
|
|
|
|
style="${this.error ? "color:red;" : ""}"> |
|
|
|
|
${this.message} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button |
|
|
|
|
@click=${() => { |
|
|
|
|
this.isOpenLeaveModal = false |
|
|
|
|
</div> |
|
|
|
|
</wrapper-modal> |
|
|
|
|
<wrapper-modal |
|
|
|
|
.onClickFunc=${() => { |
|
|
|
|
this.openTipUser = false; |
|
|
|
|
this.chatEditor.enable(); |
|
|
|
|
}} |
|
|
|
|
class="modal-button" |
|
|
|
|
?disabled="${this.isLoading}" |
|
|
|
|
|
|
|
|
|
> |
|
|
|
|
${translate("general.close")} |
|
|
|
|
</button> |
|
|
|
|
style=${this.openTipUser ? "display: block" : "display: none"}> |
|
|
|
|
<div class="tip-user-header">
|
|
|
|
|
<img src="/img/qort.png" width="32" height="32"> |
|
|
|
|
<p class="tip-user-header-font">${translate("grouppage.gchange55")} ${this.userName}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="tip-user-body"> |
|
|
|
|
<p class="tip-available">${translate("grouppage.gchange59")}</p> |
|
|
|
|
<input class="tip-input" type="number" placeholder="${translate("grouppage.gchange58")}" /> |
|
|
|
|
</div> |
|
|
|
|
</wrapper-modal> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
Justin Ferrari
2 years ago