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

add level to chat and founder badge

Browse Source
This commit is contained in:
AlphaX-Projects 2022-05-23 18:27:08 +02:00
parent e6c5f0629c
commit 55631d83d1
5 changed files with 59 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
qortal-ui-core/package.json
View File

@ -19,22 +19,22 @@
"dependencies": { "dependencies": {
"@hapi/hapi": "20.2.2", "@hapi/hapi": "20.2.2",
"@hapi/inert": "6.0.5", "@hapi/inert": "6.0.5",
"sass": "1.51.0" "sass": "1.52.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.17.10", "@babel/core": "7.18.0",
"@material/mwc-button": "0.25.3", "@material/mwc-button": "0.26.1",
"@material/mwc-checkbox": "0.25.3", "@material/mwc-checkbox": "0.26.1",
"@material/mwc-dialog": "0.25.3", "@material/mwc-dialog": "0.26.1",
"@material/mwc-drawer": "0.25.3", "@material/mwc-drawer": "0.26.1",
"@material/mwc-fab": "0.25.3", "@material/mwc-fab": "0.26.1",
"@material/mwc-formfield": "0.25.3", "@material/mwc-formfield": "0.26.1",
"@material/mwc-icon": "0.25.3", "@material/mwc-icon": "0.26.1",
"@material/mwc-icon-button": "0.25.3", "@material/mwc-icon-button": "0.26.1",
"@material/mwc-list": "0.25.3", "@material/mwc-list": "0.26.1",
"@material/mwc-select": "0.25.3", "@material/mwc-select": "0.26.1",
"@material/mwc-snackbar": "0.25.3", "@material/mwc-snackbar": "0.26.1",
"@material/mwc-textfield": "0.25.3", "@material/mwc-textfield": "0.26.1",
"@polymer/app-layout": "3.1.0", "@polymer/app-layout": "3.1.0",
"@polymer/iron-collapse": "3.0.1", "@polymer/iron-collapse": "3.0.1",
"@polymer/iron-flex-layout": "3.0.1", "@polymer/iron-flex-layout": "3.0.1",
@ -58,21 +58,21 @@
"@rollup/plugin-commonjs": "22.0.0", "@rollup/plugin-commonjs": "22.0.0",
"@rollup/plugin-node-resolve": "13.3.0", "@rollup/plugin-node-resolve": "13.3.0",
"@rollup/plugin-replace": "4.0.0", "@rollup/plugin-replace": "4.0.0",
"@vaadin/grid": "23.0.7", "@vaadin/grid": "23.0.10",
"@vaadin/icons": "23.0.7", "@vaadin/icons": "23.0.10",
"@vaadin/password-field": "23.0.7", "@vaadin/password-field": "23.0.10",
"asmcrypto.js": "2.3.2", "asmcrypto.js": "2.3.2",
"bcryptjs": "2.4.3", "bcryptjs": "2.4.3",
"epml": "0.3.3", "epml": "0.3.3",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"lit": "2.2.3", "lit": "2.2.4",
"lit-translate": "2.0.1", "lit-translate": "2.0.1",
"postcss": "8.4.13", "postcss": "8.4.14",
"pwa-helpers": "0.9.1", "pwa-helpers": "0.9.1",
"random-sentence-generator": "0.0.8", "random-sentence-generator": "0.0.8",
"redux": "4.2.0", "redux": "4.2.0",
"redux-thunk": "2.4.1", "redux-thunk": "2.4.1",
"rollup": "2.72.0", "rollup": "2.74.1",
"rollup-plugin-node-globals": "1.4.0", "rollup-plugin-node-globals": "1.4.0",
"rollup-plugin-postcss": "4.0.2", "rollup-plugin-postcss": "4.0.2",
"rollup-plugin-progress": "1.1.2", "rollup-plugin-progress": "1.1.2",

38
qortal-ui-plugins/package.json
View File

@ -17,24 +17,24 @@
"author": "QORTAL <admin@qortal.org>", "author": "QORTAL <admin@qortal.org>",
"license": "GPL-3.0", "license": "GPL-3.0",
"dependencies": { "dependencies": {
"@material/mwc-list": "0.25.3", "@material/mwc-list": "0.26.1",
"@material/mwc-select": "0.25.3", "@material/mwc-select": "0.26.1",
"emoji-picker-js": "https://github.com/Qortal/emoji-picker-js" "emoji-picker-js": "https://github.com/Qortal/emoji-picker-js"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.17.10", "@babel/core": "7.18.0",
"@github/time-elements": "3.1.2", "@github/time-elements": "3.1.2",
"@material/mwc-button": "0.25.3", "@material/mwc-button": "0.26.1",
"@material/mwc-checkbox": "0.25.3", "@material/mwc-checkbox": "0.26.1",
"@material/mwc-dialog": "0.25.3", "@material/mwc-dialog": "0.26.1",
"@material/mwc-formfield": "0.25.3", "@material/mwc-formfield": "0.26.1",
"@material/mwc-icon": "0.25.3", "@material/mwc-icon": "0.26.1",
"@material/mwc-icon-button": "0.25.3", "@material/mwc-icon-button": "0.26.1",
"@material/mwc-slider": "0.25.3", "@material/mwc-slider": "0.26.1",
"@material/mwc-snackbar": "0.25.3", "@material/mwc-snackbar": "0.26.1",
"@material/mwc-tab": "0.25.3", "@material/mwc-tab": "0.26.1",
"@material/mwc-tab-bar": "0.25.3", "@material/mwc-tab-bar": "0.26.1",
"@material/mwc-textfield": "0.25.3", "@material/mwc-textfield": "0.26.1",
"@polymer/iron-icons": "3.0.1", "@polymer/iron-icons": "3.0.1",
"@polymer/paper-icon-button": "3.0.2", "@polymer/paper-icon-button": "3.0.2",
"@polymer/paper-progress": "3.0.1", "@polymer/paper-progress": "3.0.1",
@ -46,14 +46,14 @@
"@rollup/plugin-commonjs": "22.0.0", "@rollup/plugin-commonjs": "22.0.0",
"@rollup/plugin-node-resolve": "13.3.0", "@rollup/plugin-node-resolve": "13.3.0",
"@rollup/plugin-replace": "4.0.0", "@rollup/plugin-replace": "4.0.0",
"@vaadin/button": "23.0.7", "@vaadin/button": "23.0.10",
"@vaadin/grid": "23.0.7", "@vaadin/grid": "23.0.10",
"@vaadin/icons": "23.0.7", "@vaadin/icons": "23.0.10",
"epml": "0.3.3", "epml": "0.3.3",
"html-escaper": "3.0.3", "html-escaper": "3.0.3",
"lit": "2.2.3", "lit": "2.2.4",
"lit-translate": "2.0.1", "lit-translate": "2.0.1",
"rollup": "2.72.0", "rollup": "2.74.1",
"rollup-plugin-node-globals": "1.4.0", "rollup-plugin-node-globals": "1.4.0",
"rollup-plugin-progress": "1.1.2", "rollup-plugin-progress": "1.1.2",
"rollup-plugin-terser": "7.0.2" "rollup-plugin-terser": "7.0.2"

6
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -10,6 +10,7 @@ registerTranslateConfig({
import { escape, unescape } from 'html-escaper'; import { escape, unescape } from 'html-escaper';
import { inputKeyCodes } from '../../utils/keyCodes.js' import { inputKeyCodes } from '../../utils/keyCodes.js'
import './ChatScroller.js' import './ChatScroller.js'
import './LevelFounder.js'
import './NameMenu.js' import './NameMenu.js'
import './TimeAgo.js' import './TimeAgo.js'
import { EmojiPicker } from 'emoji-picker-js'; import { EmojiPicker } from 'emoji-picker-js';
@ -356,6 +357,8 @@ class ChatPage extends LitElement {
chatMessageTemplate(messageObj) { chatMessageTemplate(messageObj) {
let avatarImg = ''; let avatarImg = '';
let nameMenu = ''; let nameMenu = '';
let levelFounder = '';
if (messageObj.senderName) { if (messageObj.senderName) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
@ -369,10 +372,13 @@ class ChatPage extends LitElement {
nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}"></name-menu>` nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}"></name-menu>`
} }
levelFounder = `<level-founder checkleveladdress="${messageObj.sender}"></level-founder>`
return ` return `
<li class="clearfix"> <li class="clearfix">
<div class="message-data ${messageObj.sender === this.selectedAddress.address ? "align-right" : ""}"> <div class="message-data ${messageObj.sender === this.selectedAddress.address ? "align-right" : ""}">
<span class="message-data-name">${nameMenu}</span> <span class="message-data-name">${nameMenu}</span>
<span class="message-data-level">${levelFounder}</span>
<span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span> <span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span>
</div> </div>
<div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.selectedAddress.address ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div> <div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.selectedAddress.address ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div>

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

@ -2,6 +2,7 @@ import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js' import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js' import { Epml } from '../../../epml.js'
import './LevelFounder.js'
import './NameMenu.js' import './NameMenu.js'
import '@material/mwc-button' import '@material/mwc-button'
@ -76,6 +77,13 @@ class ChatScroller extends LitElement {
cursor: pointer; cursor: pointer;
} }
.message-data-level {
color: #03a9f4;
font-size: 13px;
padding-left: 8px;
padding-bottom: 4px;
}
.message-data-time { .message-data-time {
color: #a8aab1; color: #a8aab1;
font-size: 13px; font-size: 13px;
@ -203,6 +211,8 @@ class ChatScroller extends LitElement {
chatMessageTemplate(messageObj) { chatMessageTemplate(messageObj) {
let avatarImg = ''; let avatarImg = '';
let nameMenu = ''; let nameMenu = '';
let levelFounder = '';
if (messageObj.senderName) { if (messageObj.senderName) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
@ -216,12 +226,14 @@ class ChatScroller extends LitElement {
nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}"></name-menu>` nameMenu = `<name-menu toblockaddress="${messageObj.sender}" nametodialog="${messageObj.senderName ? messageObj.senderName : messageObj.sender}"></name-menu>`
} }
levelFounder = `<level-founder checkleveladdress="${messageObj.sender}"></level-founder>`
return ` return `
<li class="clearfix"> <li class="clearfix">
<div class="message-data ${messageObj.sender === this.myAddress ? "align-right" : ""}"> <div class="message-data ${messageObj.sender === this.myAddress ? "align-right" : ""}">
<span class="message-data-name">${nameMenu}</span> <span class="message-data-name">${nameMenu}</span>
<span class="message-data-level">${levelFounder}</span>
<span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span> <span class="message-data-time"><message-time timestamp=${messageObj.timestamp}></message-time></span>
</div>
</div> </div>
<div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.myAddress ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div> <div class="message-data-avatar" style="width:42px; height:42px; ${messageObj.sender === this.myAddress ? "float:right;" : "float:left;"} margin:3px;">${avatarImg}</div>
<div id="messageContent" class="message ${messageObj.sender === this.myAddress ? "my-message float-right" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}</div> <div id="messageContent" class="message ${messageObj.sender === this.myAddress ? "my-message float-right" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}</div>

2
qortal-ui-plugins/plugins/core/components/NameMenu.js
View File

@ -190,7 +190,7 @@ class NameMenu extends LitElement {
return html` return html`
<div class="dropdown"> <div class="dropdown">
<a class="block" id="myNameMenu" href="#" @click="${() => this.myMenu()}">${this.nametodialog}</a> <a class="block" id="myNameMenu" href="#" @click="${() => this.myMenu()}">${this.nametodialog}</a>
<paper-tooltip class="custom" for="myNameMenu" position="right">${translate("blockpage.bcchange7")}</paper-tooltip> <paper-tooltip class="custom" for="myNameMenu" position="top">${translate("blockpage.bcchange7")}</paper-tooltip>
<div id="myDropdown" class="dropdown-content"> <div id="myDropdown" class="dropdown-content">
<span>${this.nametodialog}</span> <span>${this.nametodialog}</span>
<hr style="color: var(--nav-text-color); border-radius: 90%;"> <hr style="color: var(--nav-text-color); border-radius: 90%;">