Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-14 11:15:50 +00:00
Code Issues Projects Releases Wiki Activity

Chat User Info Completed

Browse Source
This commit is contained in:
Justin Ferrari 2023-01-09 19:37:52 -05:00
parent f19c6ce673
commit 9fec8908c1
5 changed files with 94 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
View File

@ -12,15 +12,14 @@ import "@material/mwc-icon";
import '@vaadin/button';
import "./WrapperModal";
import "./TipUser"
import "./UserInfo/UserInfo";
class ChatRightPanel extends LitElement {
static get properties() {
return {
isLoading: { type: Boolean },
openUserInfo: { type: Boolean },
leaveGroupObj: { type: Object },
error: { type: Boolean },
message: { type: String },
chatHeads: { type: Array },
groupAdmin: { attribute: false },
groupMembers: { attribute: false },
@ -41,12 +40,10 @@ class ChatRightPanel extends LitElement {
constructor() {
super()
this.isLoading = false
this.openUserInfo = false
this.leaveGroupObj = {}
this.leaveFee = 0.001
this.error = false
this.message = ""
this.chatHeads = []
this.groupAdmin = []
this.groupMembers = []
@ -61,6 +58,7 @@ class ChatRightPanel extends LitElement {
this.errorMessage = ""
this.successMessage = ""
this.setOpenTipUser = this.setOpenTipUser.bind(this);
this.setOpenUserInfo = this.setOpenUserInfo.bind(this);
}
static get styles() {
@ -190,46 +188,6 @@ class ChatRightPanel extends LitElement {
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;
}
`
}
@ -279,6 +237,10 @@ class ChatRightPanel extends LitElement {
this.openTipUser = props
}
setOpenUserInfo(props) {
this.openUserInfo = props
}
render() {
const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
return html`
@ -291,7 +253,7 @@ class ChatRightPanel extends LitElement {
<div class="group-info">
<p class="group-description">${this.leaveGroupObj && this.leaveGroupObj.description}</p>
<p class="group-subheader">Members: <span class="group-data">${this.leaveGroupObj && this.leaveGroupObj.memberCount}</span></p>
<p class="group-subheader">Date created : <span class="group-data">${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}</span></p>
</div>
<br />
@ -337,9 +299,8 @@ class ChatRightPanel extends LitElement {
<div id='downObserver'></div>
</div>
<wrapper-modal
<wrapper-modal
.onClickFunc=${() => {
if (this.isLoading) return
this.openUserInfo = false;
this.userName = "";
this.shadowRoot.querySelector("tip-user").shadowRoot.getElementById('amountInput').value = "";
@ -347,59 +308,14 @@ class ChatRightPanel extends LitElement {
style=${
this.openUserInfo ? "display: block" : "display: none"
}>
<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("chatpage.cchange57")}
</div>
<div
class="send-message-button"
@click="${() => {
this.setOpenPrivateMessage({
name: this.userName,
open: true
})
this.openUserInfo = false
}
}">
${translate("chatpage.cchange58")}
</div>
<div
style=${"margin-top: 5px;"}
class="send-message-button"
@click=${() => {
this.openTipUser = true
this.openUserInfo = false
this.chatEditor.disable();
}}>
${translate("chatpage.cchange59")}
</div>
<div ?hidden="${!this.isLoading || this.message === ""}" style="text-align: right; height: 36px;">
<span ?hidden="${!this.isLoading}">
<!-- loading message -->
${translate("grouppage.gchange36")} &nbsp;
<paper-spinner-lite
style="margin-top:12px;"
?active="${this.isLoading}"
alt="Leaving"
>
</paper-spinner-lite>
</span>
<span
?hidden=${this.message === ""}
style="${this.error ? "color:red;" : ""}">
${this.message}
</span>
</div>
</div>
<user-info
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.chatEditor=${this.chatEditor}
.userName=${this.userName}
.selectedHead=${this.selectedHead}
></user-info>
</wrapper-modal>
<wrapper-modal
.onClickFunc=${() => {

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

@ -63,12 +63,19 @@ export const chatStyles = css`
margin-bottom: 5px;
}
.forwarded-text {
user-select: none;
color: #03a9f4;
margin-bottom: 5px;
}
.message-data-forward {
user-select: none;
color: var(--mainmenutext);
margin-bottom: 5px;
font-size: 12px;
}
.message-data-my-name {
color: #cf21e8;
text-shadow: 0 0 3px #cf21e8;

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

@ -5,18 +5,19 @@ import { translate, get } from 'lit-translate';
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
import { chatStyles } from './ChatScroller-css.js'
import { Epml } from "../../../epml";
import { EmojiPicker } from 'emoji-picker-js';
import { cropAddress } from "../../utils/cropAddress";
import './LevelFounder.js';
import './NameMenu.js';
import './ChatModals.js';
import './WrapperModal';
import './TipUser'
import "./UserInfo/UserInfo";
import '@vaadin/icons';
import '@vaadin/icon';
import '@material/mwc-button';
import '@material/mwc-dialog';
import '@material/mwc-icon';
import { EmojiPicker } from 'emoji-picker-js';
import { cropAddress } from "../../utils/cropAddress";
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
let toggledMessage = {}
@ -42,7 +43,9 @@ class ChatScroller extends LitElement {
setForwardProperties: { attribute: false },
setOpenPrivateMessage: { attribute: false },
openTipUser: { type: Boolean },
userName: { type: String }
openUserInfo: { type: Boolean },
userName: { type: String },
selectedHead: { type: Object }
}
}
@ -54,14 +57,17 @@ class ChatScroller extends LitElement {
this._upObserverhandler = this._upObserverhandler.bind(this)
this._downObserverHandler = this._downObserverHandler.bind(this)
this.setOpenTipUser = this.setOpenTipUser.bind(this)
this.setOpenUserInfo = this.setOpenUserInfo.bind(this)
this.setUserName = this.setUserName.bind(this)
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
this.openTipUser = false;
this.openUserInfo = false;
this.userName = "";
}
render() {
console.log(9, "chat scroller here");
let formattedMessages = this.messages.reduce((messageArray, message, index) => {
const lastGroupedMessage = messageArray[messageArray.length - 1];
let timestamp;
@ -126,6 +132,7 @@ class ChatScroller extends LitElement {
.setForwardProperties=${this.setForwardProperties}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setUserName=${(val) => this.setUserName(val)}>
</message-template>`
)
@ -146,6 +153,25 @@ class ChatScroller extends LitElement {
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}>
</tip-user>
</wrapper-modal>
<wrapper-modal
.onClickFunc=${() => {
this.openUserInfo = false;
this.chatEditor.enable();
this.userName = "";
this.selectedHead = {};
}}
style=${
this.openUserInfo ? "display: block" : "display: none"
}>
<user-info
.setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
.chatEditor=${this.chatEditor}
.userName=${this.userName}
.selectedHead=${this.selectedHead}
></user-info>
</wrapper-modal>
`
}
@ -159,6 +185,9 @@ class ChatScroller extends LitElement {
if(changedProperties.has('openTipUser')){
return true
}
if(changedProperties.has('openUserInfo')){
return true
}
// Only update element if prop1 changed.
return changedProperties.has('messages');
}
@ -179,8 +208,18 @@ class ChatScroller extends LitElement {
this.chatEditor.disable();
}
setOpenUserInfo(props) {
this.openUserInfo = props;
this.chatEditor.disable();
}
setUserName(props) {
this.userName = props;
this.userName = props.senderName ? props.senderName : props.sender;
this.selectedHead = {
...this.selectedHead,
address: props.sender,
name: props.senderName,
};
}
async firstUpdated() {
@ -280,6 +319,7 @@ class MessageTemplate extends LitElement {
viewImage: { type: Boolean },
setOpenPrivateMessage : { attribute: false },
setOpenTipUser: { attribute: false },
setOpenUserInfo: { attribute: false },
setUserName: { attribute: false }
}
}
@ -450,7 +490,13 @@ class MessageTemplate extends LitElement {
(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true))
? (
html`
<div class="message-data-avatar">
<div
style=${this.myAddress === this.messageObj.sender ? "cursor: auto;" : "cursor: pointer;"}
@click=${() => {
if (this.myAddress === this.messageObj.sender) return;
this.setOpenUserInfo(true);
this.setUserName(this.messageObj);
}} class="message-data-avatar">
${avatarImg}
</div>
`
@ -477,7 +523,14 @@ class MessageTemplate extends LitElement {
<div class="message-user-info">
${this.isFirstMessage ?
html`
<span class="message-data-name">
<span
style=${this.myAddress === this.messageObj.sender ? "cursor: auto;" : "cursor: pointer;"}
@click=${() => {
if (this.myAddress === this.messageObj.sender) return;
this.setOpenUserInfo(true);
this.setUserName(this.messageObj);
}}
class="message-data-name">
${nameMenu}
</span>
`
@ -485,7 +538,7 @@ class MessageTemplate extends LitElement {
}
${isForwarded ?
html`
<span class="message-data-name">
<span class="forwarded-text">
${forwarded}
</span>
`
@ -499,8 +552,15 @@ class MessageTemplate extends LitElement {
</div>
${repliedToData && html`
<div class="original-message">
<p class="original-message-sender">
${repliedToData.senderName ?? cropAddress(repliedToData.sender)}
<p
style=${this.myAddress === repliedToData.sender ? "cursor: auto;" : "cursor: pointer;"}
@click=${() => {
if (this.myAddress === repliedToData.sender) return;
this.setOpenUserInfo(true);
this.setUserName(repliedToData)
}}
class="original-message-sender">
${repliedToData.senderName ?? cropAddress(repliedToData.sender)}
</p>
<p class="replied-message">
${repliedToData.decodedMessage.messageText}
@ -837,7 +897,7 @@ class ChatMenu extends LitElement {
data-text="${translate("blockpage.bcchange18")}"
@click=${() => {
this.setOpenTipUser(true);
this.setUserName(this.originalMessage.sender);
this.setUserName(this.originalMessage);
}}>
<vaadin-icon icon="vaadin:dollar" slot="icon"></vaadin-icon>
</div>

15
qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js
View File

@ -93,7 +93,6 @@ class ChatSideNavHeads extends LitElement {
}
imageHTMLRes.onload = () => {
this.isImageLoaded = true;
this.requestUpdate();
}
imageHTMLRes.onerror = () => {
if (this.imageFetches < 4) {
@ -105,14 +104,10 @@ class ChatSideNavHeads extends LitElement {
this.isImageLoaded = false
}
};
console.log(imageHTMLRes, "here8")
return imageHTMLRes;
}
render() {
console.log(9, 'chat side nav head');
console.log(this.isImageLoaded, 'Is image loaded');
console.log(this.chatInfo, 'Chat Info Here');
let avatarImg = ""
if (this.chatInfo.name) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
@ -181,15 +176,7 @@ class ChatSideNavHeads extends LitElement {
this.config = JSON.parse(c)
})
})
parentEpml.imReady()
}
updated(changedProperties) {
if (changedProperties && changedProperties.has("avatarImg")) {
console.log(this.avatarImg, "avatarImg");
}
parentEpml.imReady();
}
shouldUpdate(changedProperties) {

0
qortal-ui-plugins/plugins/core/components/UserInfo.js
View File