4
1
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +00:00

Update to latest lit and some fixes

This commit is contained in:
AlphaX-Projects 2022-02-10 00:38:06 -08:00 committed by GitHub
parent 9bac6b8f79
commit 998d0cbc24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 146 additions and 351 deletions

View File

@ -10,7 +10,6 @@ const build = () => {
for (const chunkOrAsset of output) {
if (chunkOrAsset.type === 'asset') {
// console.log('Asset', chunkOrAsset);
} else {
// ..
}

View File

@ -1,4 +1,3 @@
const PLUGINS = 'plugins'
const BUILD = 'build'
const WATCH = 'watch'

View File

@ -1,6 +1,5 @@
import { Epml, EpmlReadyPlugin, RequestPlugin, ContentWindow as EpmlContentWindowPlugin, EpmlStreamPlugin, EpmlProxyPlugin, EpmlStream } from 'epml'
// Epml.registerPlugin(contentWindowsPlugin)
Epml.registerPlugin(RequestPlugin)
Epml.registerPlugin(EpmlReadyPlugin)
Epml.registerPlugin(EpmlContentWindowPlugin)

View File

@ -34,16 +34,16 @@
"@material/mwc-textfield": "^0.25.3",
"@polymer/paper-progress": "^3.0.1",
"@polymer/paper-spinner": "^3.0.2",
"@rollup/plugin-alias": "^3.1.8",
"@rollup/plugin-alias": "^3.1.9",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.0.6",
"@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-replace": "^3.0.0",
"@vaadin/vaadin-grid": "^5.9.3",
"epml": "^0.3.3",
"html-escaper": "^3.0.3",
"lit-html": "^1.4.1",
"rollup": "^2.67.0",
"lit": "^2.1.2",
"rollup": "^2.67.1",
"rollup-plugin-node-globals": "^1.4.0",
"rollup-plugin-progress": "^1.1.2",
"rollup-plugin-terser": "^7.0.2"

View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element'
import { LitElement, html, css } from 'lit'
import { Epml } from '../../../epml.js'
import '@material/mwc-icon-button'

View File

@ -1,5 +1,4 @@
import { LitElement, html, css } from 'lit-element'
// import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { Epml } from '../../../epml.js'
import '@material/mwc-icon'
@ -19,48 +18,39 @@ class ChatHead extends LitElement {
static get styles() {
return css`
li {
padding: 10px 2px 20px 5px;
cursor: pointer;
width: 100%;
}
li:hover {
background-color: #eee;
}
.active {
background: #ebebeb;
border-left: 4px solid #3498db;
}
.img-icon {
float: left;
font-size:40px;
}
.about {
margin-top: 8px;
}
.about {
padding-left: 8px;
}
.status {
color: #92959e;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
li {
padding: 10px 2px 20px 5px;
cursor: pointer;
width: 100%;
}
li:hover {
background-color: #eee;
}
.active {
background: #ebebeb;
border-left: 4px solid #3498db;
}
.img-icon {
float: left;
font-size:40px;
}
.about {
margin-top: 8px;
}
.about {
padding-left: 8px;
}
.status {
color: #92959e;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
`
}
@ -80,7 +70,6 @@ class ChatHead extends LitElement {
}
render() {
return html`
<li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
<mwc-icon class="img-icon">account_circle</mwc-icon>
@ -91,46 +80,8 @@ class ChatHead extends LitElement {
`
}
// renderEncryptedIcon(chatInfo) {
// if (chatInfo.groupId !== undefined) {
// this.iconName = 'lock_open'
// } else {
// parentEpml.request('apiCall', {
// type: 'api',
// url: `/addresses/publickey/${chatInfo.address}`
// }).then(res => {
// if (res.error === 102) {
// // Do something here...
// } else if (res !== false) {
// this.iconName = 'lock'
// } else {
// this.iconName = 'lock'
// }
// })
// }
// }
getUrl(chatUrl) {
this.onPageNavigation(`/app/q-chat/${chatUrl}`)
}
onPageNavigation(pageUrl) {
parentEpml.request('setPageUrl', pageUrl)
}
firstUpdated() {
let configLoaded = false
// this.renderEncryptedIcon(this.chatInfo)
parentEpml.ready().then(() => {
parentEpml.subscribe('selected_address', async selectedAddress => {
this.selectedAddress = {}
@ -145,12 +96,16 @@ class ChatHead extends LitElement {
this.config = JSON.parse(c)
})
})
parentEpml.imReady()
}
getUrl(chatUrl) {
this.onPageNavigation(`/app/q-chat/${chatUrl}`)
}
onPageNavigation(pageUrl) {
parentEpml.request('setPageUrl', pageUrl)
}
}
window.customElements.define('chat-head', ChatHead)

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
@ -16,85 +16,69 @@ class ChatMessage extends LitElement {
static get styles() {
return css`
.message-data {
margin-bottom: 15px;
}
.message-data-time {
color: #a8aab1;
font-size: 13px;
padding-left: 6px;
}
.message {
color: black;
padding: 12px 10px;
line-height: 19px;
font-size: 16px;
border-radius: 7px;
margin-bottom: 20px;
width: 90%;
position: relative;
}
.message:after {
bottom: 100%;
left: 93%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #ddd;
border-width: 10px;
margin-left: -10px;
}
.my-message {
background: #ddd;
border: 2px #ccc solid;
}
.other-message {
background: #f1f1f1;
border: 2px solid #dedede;
}
.other-message:after {
border-bottom-color: #f1f1f1;
left: 7%;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.message-data {
margin-bottom: 15px;
}
.message-data-time {
color: #a8aab1;
font-size: 13px;
padding-left: 6px;
}
.message {
color: black;
padding: 12px 10px;
line-height: 19px;
font-size: 16px;
border-radius: 7px;
margin-bottom: 20px;
width: 90%;
position: relative;
}
.message:after {
bottom: 100%;
left: 93%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #ddd;
border-width: 10px;
margin-left: -10px;
}
.my-message {
background: #ddd;
border: 2px #ccc solid;
}
.other-message {
background: #f1f1f1;
border: 2px solid #dedede;
}
.other-message:after {
border-bottom-color: #f1f1f1;
left: 7%;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
`
}
// attributeChangedCallback(name, oldVal, newVal) {
// console.log('attribute change: ', name, newVal.address);
// super.attributeChangedCallback(name, oldVal, newVal);
// }
constructor() {
super()
this.selectedAddress = {}
@ -109,13 +93,11 @@ class ChatMessage extends LitElement {
}
render() {
return html`
<li class="clearfix">
<div class="message-data ${this.message.sender === this.selectedAddress.address ? "align-right" : ""}">
<span class="message-data-name">${this.message.sender}</span> &nbsp;
<span class="message-data-time">10:10 AM, Today</span>
</div>
<div class="message ${this.message.sender === this.selectedAddress.address ? "my-message float-right" : "other-message"}">
${this.message.decodedMessage}
@ -142,10 +124,8 @@ class ChatMessage extends LitElement {
this.config = JSON.parse(c)
})
})
parentEpml.imReady()
}
}
window.customElements.define('chat-message', ChatMessage)

View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element'
import { LitElement, html, css } from 'lit'
import { Epml } from '../../../epml.js'
import { escape, unescape } from 'html-escaper';
@ -91,15 +91,6 @@ class ChatPage extends LitElement {
}
updated(changedProps) {
// changedProps.forEach((OldProp, name) => {
// if (name === 'messages') {
// this.scrollDownPage()
// }
// // if (name === 'newMessages') {
// // this.updateChatHistory(this.newMessages)
// // }
// });
}
constructor() {

View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element'
import { LitElement, html, css } from 'lit'
class ChatScroller extends LitElement {
static get properties() {

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
import '@material/mwc-icon'

View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element'
import { LitElement, html, css } from 'lit'
import '@github/time-elements'

View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element'
import { LitElement, html, css } from 'lit'
import { Epml } from '../../../epml.js'
@ -60,11 +60,6 @@ class ToolTip extends LitElement {
`
}
// attributeChangedCallback(name, oldVal, newVal) {
// console.log('attribute change: ', name, newVal.address);
// super.attributeChangedCallback(name, oldVal, newVal);
// }
constructor() {
super()
this.selectedAddress = {}
@ -80,32 +75,11 @@ class ToolTip extends LitElement {
}
render() {
console.log(this.toolTipMessage, "tool");
return html`
<span id="myTool" class="tooltiptext">${this.toolTipMessage}</span>
`
}
// {
// "type": "CHAT",
// "timestamp": 1589189772000,
// "reference": "1111111111111111111111111111111111111111111111111111111111111111",
// "fee": "0.00000000",
// "signature": "7gXr4sZ3W6Lq7sRHwoxQ6nEq4LvV7aiVkhfi2xtsf6v1P4M2v4oYptMowRXvbtEhJQfg2wfr3BMDmhCEcrAENRn",
// "txGroupId": 0,
// "approvalStatus": "NOT_REQUIRED",
// "creatorAddress": "QdevPHFK86KNuzoYKLqFz7DPkr2x4juzvi",
// "senderPublicKey": "31J8KD24kFbNtdrQg5iUEHXGxGSxKC9jxLDakE1QChyG",
// "sender": "QdevPHFK86KNuzoYKLqFz7DPkr2x4juzvi",
// "nonce": 89955,
// "data": "35sYULUFnjz7SCRSb",
// "isText": false,
// "isEncrypted": false
// }
firstUpdated() {
let configLoaded = false
@ -124,12 +98,8 @@ class ToolTip extends LitElement {
this.config = JSON.parse(c)
})
})
parentEpml.imReady()
}
}
window.customElements.define('tool-tip', ToolTip)

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
import '@material/mwc-icon'

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
// import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
// import { render } from 'lit/html.js'
// import { Epml } from '../../../src/epml.js'
import { Epml } from '../../../../epml.js'

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element'
import { LitElement, html, css } from 'lit'
class ChainMessaging extends LitElement {
static get properties() {
@ -42,55 +42,21 @@ class ChainMessaging extends LitElement {
`
}
firstUpdated() {
window.addEventListener("contextmenu", (event) => {
event.preventDefault();
// this._textMenu(event)
});
window.addEventListener("click", () => {
// parentEpml.request('closeCopyTextMenu', null)
});
window.onkeyup = (e) => {
if (e.keyCode === 27) {
// parentEpml.request('closeCopyTextMenu', null)
}
}
}
// _textMenu(event) {
// const getSelectedText = () => {
// var text = "";
// if (typeof window.getSelection != "undefined") {
// text = window.getSelection().toString();
// } else if (typeof this.shadowRoot.selection != "undefined" && this.shadowRoot.selection.type == "Text") {
// text = this.shadowRoot.selection.createRange().text;
// }
// return text;
// }
// const checkSelectedTextAndShowMenu = () => {
// let selectedText = getSelectedText();
// if (selectedText && typeof selectedText === 'string') {
// let _eve = { pageX: event.pageX, pageY: event.pageY, clientX: event.clientX, clientY: event.clientY }
// let textMenuObject = { selectedText: selectedText, eventObject: _eve, isFrame: true }
// parentEpml.request('openCopyTextMenu', textMenuObject)
// }
// }
// checkSelectedTextAndShowMenu()
// }
isEmptyArray(arr) {
if (!arr) { return true }
return arr.length === 0

View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element'
import { LitElement, html, css } from 'lit'
import { Epml } from '../../../epml.js'
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../../epml.js'
// Components

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from "lit-element";
import { render } from "lit-html";
import { LitElement, html, css } from "lit";
import { render } from "lit/html.js";
import { Epml } from "../../../epml.js";
import "@material/mwc-icon";

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
import '@material/mwc-icon'

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from "lit-element";
import { render } from 'lit-html'
import { LitElement, html, css } from "lit";
import { render } from 'lit/html.js'
import { Epml } from "../../../epml.js";
import "@polymer/paper-spinner/paper-spinner-lite.js";

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
// Not sure if these are imported in the proper way:

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../../epml'
import '@material/mwc-button'

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../../epml'
import '@material/mwc-icon'

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../../epml'
import '@material/mwc-button'

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
import '@material/mwc-icon'

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
import '@material/mwc-icon'

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml'
import '@material/mwc-button'

View File

@ -38,24 +38,11 @@ export class AddressWatcher {
}
async testBlock (block) {
// console.log('TESTING BLOCK')
const pendingUpdateAddresses = []
// blockTests.forEach(fn => {
// })
// transactionTests.forEach(fn => {
//
const transactions = await parentEpml.request('apiCall', { url: `/transactions/block/${block.signature}` })
transactions.forEach(transaction => {
// console.log(this)
// fn(transaction, Object.keys(this._addresses))
// Guess the block needs transactions
for (const addr of Object.keys(this._addresses)) {
// const addrChanged = transactionTests.some(fn => {
// return fn(transaction, addr)
// })
// console.log('checking ' + addr)
const addrChanged = true // Just update it every block...for now
if (!addrChanged) return
@ -71,7 +58,6 @@ export class AddressWatcher {
}
async updateAddress (addr) {
// console.log('UPPPDDAAATTTINGGG AADDDRRR', addr)
let addressRequest = await parentEpml.request('apiCall', {
type: 'explorer',
data: {
@ -79,23 +65,15 @@ export class AddressWatcher {
txOnPage: 10
}
})
// addressRequest = JSON.parse(addressRequest)
// console.log(addressRequest, 'AAADDDREESS REQQUEESTT')
// console.log('response: ', addressRequest)
const addressInfo = addressRequest.success ? addressRequest.data : DEFAULT_ADDRESS_INFO
// const addressInfo = addressRequest.success ? addressRequest.data : DEFAULT_ADDRESS_INFO
addressInfo.transactions = []
for (let i = addressInfo.start; i >= addressInfo.end; i--) {
addressInfo.transactions.push(addressInfo[i])
delete addressInfo[i]
}
// console.log('ADDRESS INFO', addressInfo)
if (!(addr in this._addresses)) return
this._addresses[addr] = addressInfo
// console.log('---------------------------Emitting-----------------------------', this._addresses[addr], this._addressStreams[addr])
this._addressStreams[addr].emit(addressInfo)
}
}

View File

@ -1,5 +1,4 @@
import { parentEpml } from '../connect.js'
// import { EpmlStream } from 'epml' maybe not needed...loaded for me
export class UnconfirmedTransactionWatcher {
constructor () {
@ -18,47 +17,29 @@ export class UnconfirmedTransactionWatcher {
// Adds an address to watch
addAddress (address) {
// console.log("Added address", address)
const addr = address.address
this._addresses[addr] = address
this._addressesUnconfirmedTransactions[addr] = []
if (this._unconfirmedTransactionStreams[addr]) return
// console.log("CREATING A STRTRREEAAAMMMM")
this._unconfirmedTransactionStreams[addr] = new EpmlStream(`unconfirmedOfAddress/${addr}`, () => this._addressesUnconfirmedTransactions[addr])
// this.updateAddress(address.address)
}
check () {
// console.log("checkin for unconfirmed")
const c = this._addressTransactionCheck()
.then(() => setTimeout(() => this.check(), 5000))
.catch(() => setTimeout(() => this.check(), 5000))
// console.log(c)
}
async _addressTransactionCheck () {
// console.log("Checking for unconfirmed transactions")
// console.log(this._addresses, Object.keys(this._addresses))
return Promise.all(Object.keys(this._addresses).map(addr => {
// console.log(`checking ${addr}`)
return parentEpml.request('apiCall', {
type: 'api',
// url: `transactions/unconfirmedof/${addr}`
url: `/transactions/unconfirmed`
}).then(unconfirmedTransactions => {
// unconfirmedTransactions = JSON.parse(unconfirmedTransactions)
// console.log(unconfirmedTransactions)
unconfirmedTransactions.filter(tx => {
tx.creatorAddress === addr || tx.recipient === addr
})
// console.log(unconfirmedTransactions, unconfirmedTransactions.length)
// if(unconfirmedTransactions.length === 0) {
// return
// }
this._unconfirmedTransactionStreams[addr].emit(unconfirmedTransactions)
// console.log(this._unconfirmedTransactionStreams[addr])
})
}))
}

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element';
import { render } from 'lit-html';
import { LitElement, html, css } from 'lit';
import { render } from 'lit/html.js';
import { Epml } from '../../../epml.js';
import '@material/mwc-button';

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element'
import { render } from 'lit-html'
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
import '../components/ButtonIconCopy'

View File

@ -1,5 +1,3 @@
// From original frag-ui build
import babel from '@rollup/plugin-babel'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import builtins from 'rollup-plugin-node-builtins'
@ -9,8 +7,6 @@ import commonjs from '@rollup/plugin-commonjs'
import sass from 'rollup-plugin-sass'
import autoprefixer from 'autoprefixer'
import postcss from 'postcss'
// import minifyHTML from 'rollup-plugin-minify-html-literals'
import { terser } from 'rollup-plugin-terser'
const sassOptions = {
@ -22,22 +18,13 @@ const sassOptions = {
const babelOptions = {
babelHelpers: 'bundled',
// exclude: 'node_modules/**',
exclude: ['node_modules/babel-runtime/**', /[\/\\]core-js/, 'node_modules/@babel/runtime-corejs3/**', 'node_modules/@webcomponentsjs/**'],
// exclude: 'node_modules/core-js/**',
ignore: [/[\/\\]core-js/, 'node_modules/@babel/runtime-corejs3/**', 'node_modules/@webcomponentsjs/**'],
runtimeHelpers: true,
presets: [
[
'@babel/preset-env',
{
// 'targets': 'Chrome 60, Firefox 66',
// debug: true,
// modules: 'false',
// targets: {
// browsers: 'Edge 16, Firefox 60, Chrome 61, Safari 11, Android 67, ChromeAndroid 73, FirefoxAndroid 66'
// },
// useBuiltIns: 'usage',
useBuiltIns: 'entry',
corejs: '3'
}
@ -65,7 +52,6 @@ const plugins = [
if (process.env.NODE_ENV === 'production') {
plugins.push(
// minifyHTML(),
terser()
)
}
@ -121,16 +107,6 @@ export default [
],
plugins: plugins.concat([babel({
...babelOptions//,
// presets: [
// [
// '@babel/preset-env',
// {
// useBuiltIns: 'usage',
// targets: 'IE 10',
// corejs: '3'
// }
// ]
// ]
})])
},
{