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

Update to latest lit and some fixes

Browse Source
This commit is contained in:
AlphaX-Projects 2022-02-10 00:35:21 -08:00 committed by GitHub
parent a9c2314197
commit 18520ed90f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 110 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
qortal-ui-core/config/default.build.options.js
View File

@ -15,7 +15,6 @@ const aliases = {
} }
const apiComponents = { const apiComponents = {
// All the do stuff imports...such as login(...) and logout()
api: { api: {
file: 'api/api.js', file: 'api/api.js',
className: 'api' className: 'api'
@ -34,7 +33,6 @@ const functionalComponents = {
} }
} }
// Inlines all dependencies... transpiles to es5
const inlineComponents = [ const inlineComponents = [
{ {
className: 'worker', className: 'worker',

2
qortal-ui-core/config/default.styles.config.js
View File

@ -6,7 +6,6 @@ const styles = {
}, },
theme: { theme: {
colors: { colors: {
// primary: '#64ffda', /* Sets the text color to the theme primary color. */
primary: '#03a9f4', /* Sets the text color to the theme primary color. */ primary: '#03a9f4', /* Sets the text color to the theme primary color. */
primaryBg: '#e8eaf6', /* Sets the background color to the theme primary color. */ primaryBg: '#e8eaf6', /* Sets the background color to the theme primary color. */
onPrimary: '#fff', /* Sets the text color to the color configured for text on the primary color. */ onPrimary: '#fff', /* Sets the text color to the color configured for text on the primary color. */
@ -44,7 +43,6 @@ const styles = {
dark: { dark: {
// ... // ...
} }
// And more... perhaps installable or user definable, like slack (...used to be? haven't been on it in ages)
} }
} }

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

@ -42,33 +42,32 @@
"@polymer/iron-pages": "^3.0.1", "@polymer/iron-pages": "^3.0.1",
"@polymer/paper-checkbox": "^3.1.0", "@polymer/paper-checkbox": "^3.1.0",
"@polymer/paper-dialog": "^3.0.1", "@polymer/paper-dialog": "^3.0.1",
"@polymer/paper-dropdown-menu": "^3.1.0", "@polymer/paper-dropdown-menu": "^3.2.0",
"@polymer/paper-icon-button": "^3.0.2", "@polymer/paper-icon-button": "^3.0.2",
"@polymer/paper-input": "^3.2.0", "@polymer/paper-input": "^3.2.1",
"@polymer/paper-item": "^3.0.1", "@polymer/paper-item": "^3.0.1",
"@polymer/paper-listbox": "^3.0.1", "@polymer/paper-listbox": "^3.0.1",
"@polymer/paper-progress": "^3.0.1", "@polymer/paper-progress": "^3.0.1",
"@polymer/paper-ripple": "^3.0.2", "@polymer/paper-ripple": "^3.0.2",
"@polymer/paper-spinner": "^3.0.2", "@polymer/paper-spinner": "^3.0.2",
"@polymer/paper-toast": "^3.0.1", "@polymer/paper-toast": "^3.0.1",
"@rollup/plugin-alias": "^3.1.8", "@rollup/plugin-alias": "^3.1.9",
"@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1", "@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", "@rollup/plugin-replace": "^3.0.0",
"@vaadin/vaadin-app-layout": "^2.2.0",
"@vaadin/vaadin-grid": "^5.9.3", "@vaadin/vaadin-grid": "^5.9.3",
"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-element": "^2.5.1", "lit": "^2.1.2",
"postcss": "^8.4.4", "postcss": "^8.4.6",
"pwa-helpers": "^0.9.1", "pwa-helpers": "^0.9.1",
"random-sentence-generator": "^0.0.8", "random-sentence-generator": "^0.0.8",
"redux": "^4.1.2", "redux": "^4.1.2",
"redux-thunk": "^2.4.1", "redux-thunk": "^2.4.1",
"rollup": "^2.67.0", "rollup": "^2.67.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",

12
qortal-ui-core/src/components/app-info.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'
import { doPageUrl } from '../redux/app/app-actions.js' import { doPageUrl } from '../redux/app/app-actions.js'
@ -27,12 +27,10 @@ class AppInfo extends connect(store)(LitElement) {
.normal { .normal {
--mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-primary: rgb(3, 169, 244);
} }
.normal-button { .normal-button {
--mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-on-primary: white; --mdc-theme-on-primary: white;
} }
mwc-button.normal-button { mwc-button.normal-button {
--mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-on-primary: white; --mdc-theme-on-primary: white;
@ -40,12 +38,10 @@ class AppInfo extends connect(store)(LitElement) {
.test-net { .test-net {
--mdc-theme-primary: black; --mdc-theme-primary: black;
} }
.test-net-button { .test-net-button {
--mdc-theme-primary: black; --mdc-theme-primary: black;
--mdc-theme-on-primary: white; --mdc-theme-on-primary: white;
} }
mwc-button.test-net-button { mwc-button.test-net-button {
--mdc-theme-primary: black; --mdc-theme-primary: black;
--mdc-theme-on-primary: white; --mdc-theme-on-primary: white;
@ -54,10 +50,6 @@ class AppInfo extends connect(store)(LitElement) {
flex: 0 0 100px; flex: 0 0 100px;
padding:12px; padding:12px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
/* position: fixed;
top: 102vh;
left: 0; */
/* margin-top: 2.5rem; */
} }
.info { .info {
margin: 0; margin: 0;
@ -105,7 +97,6 @@ class AppInfo extends connect(store)(LitElement) {
} }
firstUpdated() { firstUpdated() {
// ...
} }
_renderStatus() { _renderStatus() {
@ -138,7 +129,6 @@ class AppInfo extends connect(store)(LitElement) {
this.nodeStatus = state.app.nodeStatus this.nodeStatus = state.app.nodeStatus
this.nodeInfo = state.app.nodeInfo this.nodeInfo = state.app.nodeInfo
this.nodeConfig = state.app.nodeConfig this.nodeConfig = state.app.nodeConfig
this.pageUrl = state.app.pageUrl this.pageUrl = state.app.pageUrl
if (this.pageUrl.length > 5) { if (this.pageUrl.length > 5) {
this.gotoPage(this.pageUrl) this.gotoPage(this.pageUrl)

76
qortal-ui-core/src/components/app-view.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'
@ -30,11 +30,9 @@ class AppView extends connect(store)(LitElement) {
:host { :host {
--app-drawer-width: 260px; --app-drawer-width: 260px;
} }
app-drawer-layout:not([narrow]) [drawer-toggle]:not(sidenav-menu) { app-drawer-layout:not([narrow]) [drawer-toggle]:not(sidenav-menu) {
display: none; display: none;
} }
app-drawer { app-drawer {
box-shadow: var(--shadow-2); box-shadow: var(--shadow-2);
background: var(--mdc-theme-surface); background: var(--mdc-theme-surface);
@ -46,7 +44,6 @@ class AppView extends connect(store)(LitElement) {
background: var(--mdc-theme-surface); background: var(--mdc-theme-surface);
color: var(--mdc-theme-on-surface); color: var(--mdc-theme-on-surface);
} }
#sideBar { #sideBar {
height: 100vh; height: 100vh;
display: flex; display: flex;
@ -76,56 +73,44 @@ class AppView extends connect(store)(LitElement) {
render() { render() {
return html` return html`
<style> <app-drawer-layout responsive-width='${getComputedStyle(document.body).getPropertyValue('--layout-breakpoint-desktop')}' fullbleed >
</style> <app-drawer swipe-open slot="drawer" id="appdrawer">
<app-drawer-layout responsive-width='${getComputedStyle(document.body).getPropertyValue('--layout-breakpoint-desktop')}' fullbleed > <app-header-layout>
<app-drawer swipe-open slot="drawer" id="appdrawer"> <div id="sideBar">
<app-header-layout> <wallet-profile></wallet-profile>
<div id="sideBar"> <div class="sideBarMenu">
<wallet-profile></wallet-profile> <sidenav-menu></sidenav-menu>
<div class="sideBarMenu"> </div>
<sidenav-menu></sidenav-menu> <app-info></app-info>
</div> </div>
<app-info></app-info> </app-header-layout>
</app-drawer>
</div> <app-header-layout style="height: var(--window-height);">
<app-header id='appHeader' slot="header" fixed>
<app-toolbar>
<paper-icon-button class="menu-toggle-button" drawer-toggle icon="menu"></paper-icon-button>
<div main-title>
<span class="qora-title">
<img src="${this.config.coin.logo}" style="height:32px; padding-left:12px;">
</span>
</div>
<div style="display:inline">
<paper-icon-button icon="icons:settings" @click=${ () => this.openSettings()} title="Settings" ></paper-icon-button>
</div>
</app-toolbar>
</app-header>
<show-plugin></show-plugin>
</app-header-layout> </app-header-layout>
</app-drawer> </app-drawer-layout>
<user-settings></user-settings>
<app-header-layout style="height: var(--window-height);"> `
<app-header id='appHeader' slot="header" fixed>
<app-toolbar>
<paper-icon-button class="menu-toggle-button" drawer-toggle icon="menu"></paper-icon-button>
<div main-title>
<span class="qora-title">
<img src="${this.config.coin.logo}" style="height:32px; padding-left:12px;">
</span>
</div>
<div style="display:inline">
<paper-icon-button icon="icons:settings" @click=${ () => this.openSettings()} title="Settings" ></paper-icon-button>
</div>
</app-toolbar>
</app-header>
<show-plugin></show-plugin>
</app-header-layout>
</app-drawer-layout>
<user-settings></user-settings>
`
} }
constructor() { constructor() {
super() super()
} }
firstUpdated() { firstUpdated() {
//
} }
stateChanged(state) { stateChanged(state) {
@ -133,7 +118,6 @@ class AppView extends connect(store)(LitElement) {
} }
openSettings() { openSettings() {
const settingsDialog = document.getElementById('main-app').shadowRoot.querySelector('app-view').shadowRoot.querySelector('user-settings') const settingsDialog = document.getElementById('main-app').shadowRoot.querySelector('app-view').shadowRoot.querySelector('user-settings')
settingsDialog.openSettings() settingsDialog.openSettings()
} }

10
qortal-ui-core/src/components/base.js
View File

@ -1,31 +1,25 @@
/* Just a copy paste for setting up elements :) */ import { LitElement, html, css } from 'lit'
import { LitElement, html, css } from 'lit-element'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'
class MyElement extends connect(store)(LitElement) { class MyElement extends connect(store)(LitElement) {
static get properties () { static get properties () {
return { return {
} }
} }
static get styles () { static get styles () {
return css` return css``
`
} }
render () { render () {
return html` return html`
<style> <style>
</style> </style>
` `
} }
stateChanged (state) { stateChanged (state) {
// this.loggedIn = state.app.loggedIn
} }
} }

58
qortal-ui-core/src/components/login-view/create-account-section.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../../store.js' import { store } from '../../store.js'
@ -14,7 +14,10 @@ import snackbar from '../../functional-components/snackbar.js'
import '@material/mwc-button' import '@material/mwc-button'
import '@material/mwc-checkbox' import '@material/mwc-checkbox'
import '@material/mwc-textfield'
import '@material/mwc-icon' import '@material/mwc-icon'
import '@material/mwc-dialog'
import '@material/mwc-formfield'
import '@polymer/iron-pages' import '@polymer/iron-pages'
import '@polymer/paper-input/paper-input-container.js' import '@polymer/paper-input/paper-input-container.js'
@ -222,23 +225,6 @@ class CreateAccountSection extends connect(store)(LitElement) {
this.prevEnabled = false this.prevEnabled = false
} }
cleanup() {
this.shadowRoot.getElementById('randSentence').generate()
this.shadowRoot.getElementById('nameInput').value = ''
this.shadowRoot.getElementById('password').value = ''
this.showSeedphrase = false
this.selectPage('info')
this.error = false
this.errorMessage = ''
this.nextButtonText = 'Next'
this.createAccountLoading = false
this.saveAccount = true
this.isDownloadedBackup = false
this._wallet = ''
this._pass = ''
this._name = ''
}
render() { render() {
return html` return html`
<style> <style>
@ -382,8 +368,10 @@ class CreateAccountSection extends connect(store)(LitElement) {
</div> </div>
</div> </div>
<div style="text-align: right; vertical-align: top; line-height: 40px; margin:0;"> <div style="text-align: right; vertical-align: top; line-height: 40px; margin:0;">
<label for="hasSavedSeedphraseCheckbox" @click=${() => this.shadowRoot.getElementById('showSeedphraseCheckbox').click()} >I'm an advanced user, show my seed phrase</label> <mwc-formfield alignEnd label="I'm an advanced user, show my seed phrase.">
<mwc-checkbox style="display: inline; id="showSeedphraseCheckbox" @click=${e => { this.showSeedphrase = !e.target.checked; this.updateNext() }} ?checked=${this.showSeedphrase}></mwc-checkbox> <label for="hasSavedSeedphraseCheckbox" @click=${() => this.shadowRoot.getElementById('showSeedphraseCheckbox').click()} ></label>
<mwc-checkbox style="display: inline; id="showSeedphraseCheckbox" @click=${e => { this.showSeedphrase = !e.target.checked; this.updateNext() }} ?checked=${this.showSeedphrase}></mwc-checkbox>
</mwc-formfield>
</div> </div>
</div> </div>
@ -405,8 +393,10 @@ class CreateAccountSection extends connect(store)(LitElement) {
<vaadin-password-field style="width:100%;" label="Confirm Password" id="rePassword"></vaadin-password-field> <vaadin-password-field style="width:100%;" label="Confirm Password" id="rePassword"></vaadin-password-field>
</div> </div>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;"> <div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<label for="saveInBrowserCheckbox" @click=${() => this.shadowRoot.getElementById('saveInBrowserCheckbox').click()}>Save in this browser</label> <mwc-formfield alignEnd label="Save in this browser.">
<mwc-checkbox style="display: inline; id="saveInBrowserCheckbox" @click=${e => { this.saveAccount = !e.target.checked }} ?checked=${this.saveAccount}></mwc-checkbox> <label for="saveInBrowserCheckbox" @click=${() => this.shadowRoot.getElementById('saveInBrowserCheckbox').click()}></label>
<mwc-checkbox style="display: inline; id="saveInBrowserCheckbox" @click=${e => { this.saveAccount = !e.target.checked }} ?checked=${this.saveAccount}></mwc-checkbox>
</mwc-formfield>
</div> </div>
</div> </div>
</div> </div>
@ -427,8 +417,10 @@ class CreateAccountSection extends connect(store)(LitElement) {
</div> </div>
</div> </div>
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;"> <div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<label for="downloadBackupCheckbox" @click=${() => this.shadowRoot.getElementById('downloadBackupCheckbox').click()}>Done saving your wallet backup ?</label> <mwc-formfield alignEnd label="Done saving your wallet backup ?">
<mwc-checkbox style="display: inline;" id="downloadBackupCheckbox" @click=${e => { this.isDownloadedBackup = !e.target.checked; this.updateNext() }} ?checked=${this.isDownloadedBackup}></mwc-checkbox> <label for="downloadBackupCheckbox" @click=${() => this.shadowRoot.getElementById('downloadBackupCheckbox').click()}></label>
<mwc-checkbox style="display: inline;" id="downloadBackupCheckbox" @click=${e => { this.isDownloadedBackup = !e.target.checked; this.updateNext() }} ?checked=${this.isDownloadedBackup}></mwc-checkbox>
</mwc-formfield>
</div> </div>
</div> </div>
</div> </div>
@ -437,6 +429,23 @@ class CreateAccountSection extends connect(store)(LitElement) {
` `
} }
cleanup() {
this.shadowRoot.getElementById('randSentence').generate()
this.shadowRoot.getElementById('nameInput').value = ''
this.shadowRoot.getElementById('password').value = ''
this.showSeedphrase = false
this.selectPage('info')
this.error = false
this.errorMessage = ''
this.nextButtonText = 'Next'
this.createAccountLoading = false
this.saveAccount = true
this.isDownloadedBackup = false
this._wallet = ''
this._pass = ''
this._name = ''
}
_pageChange(newPage, oldPage) { _pageChange(newPage, oldPage) {
if (!this.shadowRoot.querySelector('#createAccountPages') || !newPage) { if (!this.shadowRoot.querySelector('#createAccountPages') || !newPage) {
return return
@ -506,7 +515,6 @@ class CreateAccountSection extends connect(store)(LitElement) {
} }
createAccount() { createAccount() {
} }
async downloadBackup(wallet) { async downloadBackup(wallet) {

18
qortal-ui-core/src/components/login-view/loading-ripple_old.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../../store.js' import { store } from '../../store.js'
@ -156,21 +156,6 @@ class LoadingRipple extends connect(store)(LitElement) {
this._ripple.classList.remove('activating-done') this._ripple.classList.remove('activating-done')
this._ripple.classList.remove('disabling') this._ripple.classList.remove('disabling')
resolve() resolve()
// this._ripple.classList.add('disabling')
// const rippleFadedEvent = () => {
// console.log('ripple closed event')
// if (rippleClosed) return
// rippleClosed = true
// // Reset the ripple
// TRANSITION_EVENT_NAMES.forEach(name => this._ripple.removeEventListener(name, rippleFadedEvent))
// this._ripple.classList.remove('activating')
// this._ripple.classList.remove('activating-done')
// this._ripple.classList.remove('disabling')
// this.rippleIsOpen = false
// resolve()
// }
// console.log('==============================================================================================================================================')
// TRANSITION_EVENT_NAMES.forEach(name => this._ripple.addEventListener(name, rippleFadedEvent))
}) })
} }
@ -195,7 +180,6 @@ class LoadingRipple extends connect(store)(LitElement) {
} }
stateChanged (state) { stateChanged (state) {
// this.loggedIn = state.app.loggedIn
} }
} }

8
qortal-ui-core/src/components/login-view/login-section.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../../store.js' import { store } from '../../store.js'
import { checkApiKey } from '../../apiKeyUtils.js' import { checkApiKey } from '../../apiKeyUtils.js'
@ -341,8 +341,10 @@ class LoginSection extends connect(store)(LitElement) {
</div> </div>
${this.showPasswordCheckboxPages.includes(this.selectedPage) ? html` ${this.showPasswordCheckboxPages.includes(this.selectedPage) ? html`
<div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;"> <div style="text-align:right; vertical-align: top; line-height: 40px; margin:0;">
<label for="storeCheckbox" class="checkboxLabel" @click=${() => this.shadowRoot.getElementById('storeCheckbox').click()}>Save in this browser</label> <mwc-formfield alignEnd label="Save in this browser.">
<mwc-checkbox style="display: inline;" id="storeCheckbox" @click=${e => { this.saveInBrowser = !e.target.checked }} ?checked="${this.saveInBrowser}"></mwc-checkbox> <label for="storeCheckbox" class="checkboxLabel" @click=${() => this.shadowRoot.getElementById('storeCheckbox').click()}></label>
<mwc-checkbox style="display: inline;" id="storeCheckbox" @click=${e => { this.saveInBrowser = !e.target.checked }} ?checked="${this.saveInBrowser}"></mwc-checkbox>
</mwc-formfield>
</div> </div>
` : ''} ` : ''}
</div> </div>

2
qortal-ui-core/src/components/login-view/login-view.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../../store.js' import { store } from '../../store.js'
import { stateAwait } from '../../stateAwait.js' import { stateAwait } from '../../stateAwait.js'

2
qortal-ui-core/src/components/login-view/welcome-page.js
View File

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

15
qortal-ui-core/src/components/main-app.js
View File

@ -1,4 +1,4 @@
import { LitElement, html } from 'lit-element' import { LitElement, html } from 'lit'
import { installRouter } from 'pwa-helpers/router.js' import { installRouter } from 'pwa-helpers/router.js'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'
@ -12,7 +12,6 @@ import './login-view/login-view.js'
import './app-view.js' import './app-view.js'
import copyTextMenu from '../functional-components/copy-text-menu.js' import copyTextMenu from '../functional-components/copy-text-menu.js'
// import pasteMenu from '../functional-components/paste-menu.js';
import framePasteMenu from '../functional-components/frame-paste-menu.js'; import framePasteMenu from '../functional-components/frame-paste-menu.js';
installRouter((location) => store.dispatch(doNavigate(location))) installRouter((location) => store.dispatch(doNavigate(location)))
@ -30,7 +29,6 @@ class MainApp extends connect(store)(LitElement) {
} }
render() { render() {
return html`${this.renderViews(this.loggedIn)}` return html`${this.renderViews(this.loggedIn)}`
} }
@ -41,33 +39,26 @@ class MainApp extends connect(store)(LitElement) {
renderViews(isLoggedIn) { renderViews(isLoggedIn) {
if (isLoggedIn) { if (isLoggedIn) {
return html` return html`
<app-view></app-view> <app-view></app-view>
` `
} else { } else {
return html` return html`
<login-view></login-view> <login-view></login-view>
` `
} }
} }
stateChanged(state) { stateChanged(state) {
this.loggedIn = state.app.loggedIn this.loggedIn = state.app.loggedIn
if (this.loggedIn === true && this.initial === 0) { if (this.loggedIn === true && this.initial === 0) {
this.initial = this.initial + 1 this.initial = this.initial + 1
this._loadPlugins() this._loadPlugins()
} }
document.title = state.config.coin.name document.title = state.config.coin.name
} }
_loadPlugins() { _loadPlugins() {
loadPlugins() loadPlugins()
} }

2
qortal-ui-core/src/components/settings-view/account-view.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element'; import { LitElement, html, css } from 'lit';
import { connect } from 'pwa-helpers'; import { connect } from 'pwa-helpers';
import { store } from '../../store.js'; import { store } from '../../store.js';

12
qortal-ui-core/src/components/settings-view/notifications-view.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../../store.js' import { store } from '../../store.js'
@ -29,7 +29,6 @@ class NotificationsView extends connect(store)(LitElement) {
position: relative; position: relative;
text-align: center; text-align: center;
} }
.notification-box { .notification-box {
display: block; display: block;
position: relative; position: relative;
@ -38,7 +37,6 @@ class NotificationsView extends connect(store)(LitElement) {
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
text-align: center; text-align: center;
} }
@media(min-width: 1150px) { @media(min-width: 1150px) {
.notification-box { .notification-box {
display: grid; display: grid;
@ -46,7 +44,6 @@ class NotificationsView extends connect(store)(LitElement) {
grid-gap: 30px; grid-gap: 30px;
} }
} }
.content-box { .content-box {
border: 1px solid #a1a1a1; border: 1px solid #a1a1a1;
padding: 10px 25px; padding: 10px 25px;
@ -56,19 +53,15 @@ class NotificationsView extends connect(store)(LitElement) {
min-height: 150px; min-height: 150px;
margin: 20px 0; margin: 20px 0;
} }
h4 { h4 {
margin-bottom: 0; margin-bottom: 0;
} }
mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::before { mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::before {
background-color:var(--mdc-theme-primary) background-color:var(--mdc-theme-primary)
} }
label:hover { label:hover {
cursor: pointer; cursor: pointer;
} }
.title { .title {
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 15px;
@ -126,16 +119,13 @@ class NotificationsView extends connect(store)(LitElement) {
} }
stateChanged(state) { stateChanged(state) {
this.notificationConfig = state.user.notifications this.notificationConfig = state.user.notifications
this.q_chatConfig = this.notificationConfig.q_chat this.q_chatConfig = this.notificationConfig.q_chat
this.blockConfig = this.notificationConfig.block this.blockConfig = this.notificationConfig.block
} }
setQChatNotificationConfig(valueObject) { setQChatNotificationConfig(valueObject) {
if (valueObject.type === 'PLAY_SOUND') { if (valueObject.type === 'PLAY_SOUND') {
let data = { let data = {
playSound: !valueObject.value, playSound: !valueObject.value,
showNotification: this.q_chatConfig.showNotification showNotification: this.q_chatConfig.showNotification

21
qortal-ui-core/src/components/settings-view/security-view.js
View File

@ -1,15 +1,17 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../../store.js' import { store } from '../../store.js'
import '@material/mwc-textfield' import '@material/mwc-textfield'
import '@material/mwc-icon'
import '@vaadin/vaadin-text-field/vaadin-password-field.js'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
class SecurityView extends connect(store)(LitElement) { class SecurityView extends connect(store)(LitElement) {
static get properties() { static get properties() {
return { return {
} }
} }
@ -22,7 +24,6 @@ class SecurityView extends connect(store)(LitElement) {
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
text-align: center; text-align: center;
} }
.q-button { .q-button {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -33,7 +34,7 @@ class SecurityView extends connect(store)(LitElement) {
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
color: white; color: white;
background: #6a6c75; background: #03a9f4;
width: 50%; width: 50%;
font-size: 17px; font-size: 17px;
cursor: pointer; cursor: pointer;
@ -54,8 +55,11 @@ class SecurityView extends connect(store)(LitElement) {
<p> <p>
Please choose a password to encrypt your backup with (this can be the same as the one you logged in with, or different) Please choose a password to encrypt your backup with (this can be the same as the one you logged in with, or different)
</p> </p>
<div style="max-width: 500px; display: inline-block;"> <div style="max-width: 500px; display: flex; justify-content: center; margin: auto;">
<mwc-textfield style="width:100%;" icon="vpn_key" id="downloadBackupPassword" label="Password" type="password" ></mwc-textfield> <mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">password</mwc-icon>
<vaadin-password-field style="width:100%;" label="Password" id="downloadBackupPassword"></vaadin-password-field>
</div>
<div style="max-width: 500px; display: flex; justify-content: center; margin: auto;">
<div @click=${() => this.downloadBackup()} class="q-button"> Download BackUp File </div> <div @click=${() => this.downloadBackup()} class="q-button"> Download BackUp File </div>
</div> </div>
</div> </div>
@ -64,18 +68,13 @@ class SecurityView extends connect(store)(LitElement) {
} }
stateChanged(state) { stateChanged(state) {
// ...
} }
async downloadBackup() { async downloadBackup() {
const state = store.getState() const state = store.getState()
const password = this.shadowRoot.getElementById('downloadBackupPassword').value const password = this.shadowRoot.getElementById('downloadBackupPassword').value
console.log(password);
const data = await state.app.wallet.generateSaveWalletData(password, state.config.crypto.kdfThreads, () => { }) const data = await state.app.wallet.generateSaveWalletData(password, state.config.crypto.kdfThreads, () => { })
const dataString = JSON.stringify(data) const dataString = JSON.stringify(data)
const blob = new Blob([dataString], { type: 'text/plain;charset=utf-8' }) const blob = new Blob([dataString], { type: 'text/plain;charset=utf-8' })
FileSaver.saveAs(blob, `qortal_backup_${state.app.selectedAddress.address}.json`) FileSaver.saveAs(blob, `qortal_backup_${state.app.selectedAddress.address}.json`)
} }

62
qortal-ui-core/src/components/settings-view/user-settings.js
View File

@ -1,11 +1,10 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../../store.js' import { store } from '../../store.js'
import '@polymer/paper-dialog/paper-dialog.js' import '@polymer/paper-dialog/paper-dialog.js'
import '@material/mwc-button' import '@material/mwc-button'
// Settings View
import './account-view.js' import './account-view.js'
import './security-view.js' import './security-view.js'
import './notifications-view.js' import './notifications-view.js'
@ -23,7 +22,6 @@ class UserSettings extends connect(store)(LitElement) {
static get styles() { static get styles() {
return css` return css`
:host { :host {
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -34,11 +32,9 @@ class UserSettings extends connect(store)(LitElement) {
color: #333333; color: #333333;
line-height: 1.6; line-height: 1.6;
} }
.decline { .decline {
--mdc-theme-primary: var(--mdc-theme-error) --mdc-theme-primary: var(--mdc-theme-error)
} }
paper-dialog.userSettings { paper-dialog.userSettings {
width: 100%; width: 100%;
max-width: 100vw; max-width: 100vw;
@ -49,27 +45,22 @@ class UserSettings extends connect(store)(LitElement) {
line-height: 1.6; line-height: 1.6;
overflow-y: auto; overflow-y: auto;
} }
.actions { .actions {
display:flex; display:flex;
justify-content: space-between; justify-content: space-between;
padding: 0 4em; padding: 0 4em;
margin: 15px 0 -2px 0; margin: 15px 0 -2px 0;
} }
.close-icon { .close-icon {
font-size: 36px; font-size: 36px;
} }
.close-icon:hover { .close-icon:hover {
cursor: pointer; cursor: pointer;
opacity: .6; opacity: .6;
} }
.buttons { .buttons {
text-align:right; text-align:right;
} }
.container { .container {
max-width: 90vw; max-width: 90vw;
margin-left: auto; margin-left: auto;
@ -77,13 +68,11 @@ class UserSettings extends connect(store)(LitElement) {
margin-top: 20px; margin-top: 20px;
padding: .6em; padding: .6em;
} }
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.leftBar { .leftBar {
background-color: #fff; background-color: #fff;
color: #333333; color: #333333;
@ -91,14 +80,12 @@ class UserSettings extends connect(store)(LitElement) {
padding: 20px 0 0 0; padding: 20px 0 0 0;
border-radius: 5px; border-radius: 5px;
} }
.leftBar img { .leftBar img {
margin: 0 auto; margin: 0 auto;
width: 75%; width: 75%;
height: 75%; height: 75%;
text-align: center; text-align: center;
} }
.leftBar .slug { .leftBar .slug {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
@ -107,16 +94,12 @@ class UserSettings extends connect(store)(LitElement) {
font-weight: 600; font-weight: 600;
margin-bottom: 7px; margin-bottom: 7px;
} }
.leftBar ul li { .leftBar ul li {
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
} }
.leftBar ul li:last-child { .leftBar ul li:last-child {
border-bottom: none; border-bottom: none;
} }
.leftBar ul li a { .leftBar ul li a {
color: #333333; color: #333333;
font-size: 16px; font-size: 16px;
@ -125,31 +108,23 @@ class UserSettings extends connect(store)(LitElement) {
padding: .9em; padding: .9em;
display: block; display: block;
} }
.leftBar ul li a i { .leftBar ul li a i {
margin-right: 8px; margin-right: 8px;
font-size: 16px; font-size: 16px;
} }
.leftBar ul li a:hover { .leftBar ul li a:hover {
background-color: #f6f6f6; background-color: #f6f6f6;
color: #515151; color: #515151;
} }
.leftBar ul li:active { .leftBar ul li:active {
border-bottom: none; border-bottom: none;
} }
.leftBar ul li a.active { .leftBar ul li a.active {
color: #515151; color: #515151;
background-color: #eee; background-color: #eee;
border-left: 2px solid #515151; border-left: 2px solid #515151;
margin-left: -2px; margin-left: -2px;
} }
/* Main Profile Page */
.mainPage { .mainPage {
background-color: #fff; background-color: #fff;
color: #333333; color: #333333;
@ -160,56 +135,40 @@ class UserSettings extends connect(store)(LitElement) {
text-align: center; text-align: center;
min-height: 460px; min-height: 460px;
} }
/* Styles for Smaller Screen Sizes */
@media(max-width:700px) { @media(max-width:700px) {
.mainPage { .mainPage {
margin-top: 30px; margin-top: 30px;
} }
} }
/* Styles for Larger Screen Sizes */
@media(min-width:765px) { @media(min-width:765px) {
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.actions { .actions {
display:flex; display:flex;
justify-content: space-between; justify-content: space-between;
padding: 0 4em; padding: 0 4em;
margin: 15px 0 -25px 0; margin: 15px 0 -25px 0;
} }
.container { .container {
padding: 2em; padding: 2em;
} }
.wrapper { .wrapper {
display: grid; display: grid;
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-gap: 30px; grid-gap: 30px;
} }
.wrapper > .mainPage { .wrapper > .mainPage {
padding: 2em; padding: 2em;
} }
.leftBar { .leftBar {
text-align: left; text-align: left;
max-height: 403px; max-height: 403px;
max-width: 400px; max-width: 400px;
font-size: 16px; font-size: 16px;
} }
.mainPage { .mainPage {
font-size: 16px; font-size: 16px;
} }
@ -224,17 +183,11 @@ class UserSettings extends connect(store)(LitElement) {
render() { render() {
return html` return html`
<style>
</style>
<paper-dialog id="userSettingsDialog" class="userSettings" modal> <paper-dialog id="userSettingsDialog" class="userSettings" modal>
<div class="actions"> <div class="actions">
<h2></h2> <h2></h2>
<mwc-icon class="close-icon" @click=${ () => this.closeSettings()} title="Close Settings" >highlight_off</mwc-icon> <mwc-icon class="close-icon" @click=${ () => this.closeSettings()} title="Close Settings" >highlight_off</mwc-icon>
</div> </div>
<div class="container"> <div class="container">
<div class="wrapper"> <div class="wrapper">
<div class="leftBar" style="display: table; width: 100%;"> <div class="leftBar" style="display: table; width: 100%;">
@ -245,19 +198,10 @@ class UserSettings extends connect(store)(LitElement) {
<li @click=${ () => this.setSettingsView('notification')} ><a class=${this.selectedView.id === 'notification' ? 'active' : ''} href="javascript:void(0)">Notifications</a></li> <li @click=${ () => this.setSettingsView('notification')} ><a class=${this.selectedView.id === 'notification' ? 'active' : ''} href="javascript:void(0)">Notifications</a></li>
</ul> </ul>
</div> </div>
<div class="mainPage"> <div class="mainPage">
<h1>${ this.selectedView.name}</h1> <h1>${ this.selectedView.name}</h1>
<hr> <hr>
${html`${this.renderSettingViews(this.selectedView)}`} ${html`${this.renderSettingViews(this.selectedView)}`}
<!-- <div class="depoAddress">
<h3>Deposit Address</h3>
<div class="box">
<input type="text" placeholder="RNd2ioGJZKKmwaKB7ydWjuy8VUzmRzSNWe">
<span class="copyAddress">Copy</span>
</div>
</div> -->
</div> </div>
</div> </div>
</div> </div>
@ -270,7 +214,6 @@ class UserSettings extends connect(store)(LitElement) {
} }
renderSettingViews(selectedView) { renderSettingViews(selectedView) {
if (selectedView.id === 'info') { if (selectedView.id === 'info') {
return html`<account-view></account-view>`; return html`<account-view></account-view>`;
} else if (selectedView.id === 'security') { } else if (selectedView.id === 'security') {
@ -281,7 +224,6 @@ class UserSettings extends connect(store)(LitElement) {
} }
setSettingsView(pageId) { setSettingsView(pageId) {
if (pageId === 'info') { if (pageId === 'info') {
return this.selectedView = { id: 'info', name: 'General Account Info' } return this.selectedView = { id: 'info', name: 'General Account Info' }
} else if (pageId === 'security') { } else if (pageId === 'security') {
@ -293,13 +235,11 @@ class UserSettings extends connect(store)(LitElement) {
openSettings() { openSettings() {
if (this.loggedIn) { if (this.loggedIn) {
this.shadowRoot.getElementById('userSettingsDialog').open() this.shadowRoot.getElementById('userSettingsDialog').open()
} }
} }
closeSettings() { closeSettings() {
this.shadowRoot.getElementById('userSettingsDialog').close() this.shadowRoot.getElementById('userSettingsDialog').close()
this.cleanUp() this.cleanUp()
} }

2
qortal-ui-core/src/components/show-plugin.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'
import { Epml } from '../epml.js' import { Epml } from '../epml.js'

5
qortal-ui-core/src/components/sidenav-menu.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'
@ -27,7 +27,6 @@ class SidenavMenu extends connect(store)(LitElement) {
} }
.mcd-menu li { .mcd-menu li {
position: relative; position: relative;
/* height:48px; */
line-height: 48px; line-height: 48px;
outline: none; outline: none;
padding: 2px; padding: 2px;
@ -144,7 +143,6 @@ class SidenavMenu extends connect(store)(LitElement) {
} }
.mcd-menu li ul li a { .mcd-menu li ul li a {
/* padding: 10px; */
text-align: left; text-align: left;
border: 0; border: 0;
border-bottom: 1px solid #EEE; border-bottom: 1px solid #EEE;
@ -152,7 +150,6 @@ class SidenavMenu extends connect(store)(LitElement) {
outline: none; outline: none;
} }
.mcd-menu li ul li a mwc-icon { .mcd-menu li ul li a mwc-icon {
/* font-size: 16px; */
display: inline-block; display: inline-block;
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }

4
qortal-ui-core/src/components/wallet-profile.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'
@ -39,7 +39,6 @@ class WalletProfile extends connect(store)(LitElement) {
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
} }
#profileInMenu:hover { #profileInMenu:hover {
/* cursor:pointer; */
} }
#accountIcon { #accountIcon {
font-size:48px; font-size:48px;
@ -68,7 +67,6 @@ class WalletProfile extends connect(store)(LitElement) {
margin:0; margin:0;
margin-top:8px; margin-top:8px;
font-size:11px; font-size:11px;
/* padding-top:8px; */
} }
</style> </style>

6
qortal-ui-core/src/custom-elements/frag-file-input.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import '@material/mwc-button' import '@material/mwc-button'
import '@material/mwc-icon' import '@material/mwc-icon'
@ -84,7 +84,6 @@ class FragFileInput extends LitElement {
firstUpdated () { firstUpdated () {
this._dropArea = this.shadowRoot.getElementById('drop-area') this._dropArea = this.shadowRoot.getElementById('drop-area')
// console.log(this._dropArea)
const preventDefaults = e => { const preventDefaults = e => {
e.preventDefault() e.preventDefault()
@ -104,17 +103,14 @@ class FragFileInput extends LitElement {
} }
;['dragenter', 'dragover'].forEach(eventName => { ;['dragenter', 'dragover'].forEach(eventName => {
// console.log('dragenter/dragover')
this._dropArea.addEventListener(eventName, highlight, false) this._dropArea.addEventListener(eventName, highlight, false)
}) })
;['dragleave', 'drop'].forEach(eventName => { ;['dragleave', 'drop'].forEach(eventName => {
// console.log('drag-leave/drop')
this._dropArea.addEventListener(eventName, unhighlight, false) this._dropArea.addEventListener(eventName, unhighlight, false)
}) })
this._dropArea.addEventListener('drop', e => { this._dropArea.addEventListener('drop', e => {
// console.log('DROPPED')
const dt = e.dataTransfer const dt = e.dataTransfer
const file = dt.files[0] const file = dt.files[0]

1
qortal-ui-core/src/epml.js
View File

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

2
qortal-ui-core/src/functional-components/confirm-transaction-dialog.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'

7
qortal-ui-core/src/functional-components/copy-text-menu.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store'; import { store } from '../store';
@ -45,7 +45,6 @@ class CopyTextMenu extends connect(store)(LitElement) {
min-width: 150px; min-width: 150px;
max-width: 300px; max-width: 300px;
background: #F9F9F9; background: #F9F9F9;
/* box-shadow: 3px 3px 2px #E9E9E9; */
border-radius: 4px; border-radius: 4px;
} }
@ -90,10 +89,6 @@ class CopyTextMenu extends connect(store)(LitElement) {
<ul id='items'> <ul id='items'>
<li @click=${() => this.saveToClipboard(this.selectedText)} >Copy</li> <li @click=${() => this.saveToClipboard(this.selectedText)} >Copy</li>
</ul> </ul>
<!-- <hr /> -->
<!-- <ul id="items">
<li>Another Menu Option</li>
</ul> -->
</div> </div>
` `
} }

3
qortal-ui-core/src/functional-components/frame-paste-menu.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store'; import { store } from '../store';
@ -46,7 +46,6 @@ class FramePasteMenu extends connect(store)(LitElement) {
min-width: 150px; min-width: 150px;
max-width: 300px; max-width: 300px;
background: #F9F9F9; background: #F9F9F9;
/* box-shadow: 3px 3px 2px #E9E9E9; */
border-radius: 4px; border-radius: 4px;
} }

2
qortal-ui-core/src/functional-components/loading-ripple.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
const TRANSITION_EVENT_NAMES = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd', 'MSTransitionEnd'] const TRANSITION_EVENT_NAMES = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd', 'MSTransitionEnd']

2
qortal-ui-core/src/functional-components/mykey-page.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'
import { testApiKey } from '../apiKeyUtils.js' import { testApiKey } from '../apiKeyUtils.js'

3
qortal-ui-core/src/functional-components/paste-menu.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store'; import { store } from '../store';
@ -39,7 +39,6 @@ class FramePasteMenu extends connect(store)(LitElement) {
min-width: 150px; min-width: 150px;
max-width: 300px; max-width: 300px;
background: #F9F9F9; background: #F9F9F9;
/* box-shadow: 3px 3px 2px #E9E9E9; */
border-radius: 4px; border-radius: 4px;
} }

2
qortal-ui-core/src/functional-components/settings-page.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers'
import { store } from '../store.js' import { store } from '../store.js'

2
qortal-ui-core/src/functional-components/snackbar.js
View File

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit'
import '@material/mwc-snackbar' import '@material/mwc-snackbar'
let queueElement let queueElement

1
qortal-ui-core/src/initStore.js
View File

@ -3,7 +3,6 @@ import { doLoadConfigFromAPI } from './redux/config/config-actions.js'
import { doLoadNodeConfig, doInitWorkers } from './redux/app/app-actions.js' import { doLoadNodeConfig, doInitWorkers } from './redux/app/app-actions.js'
import { doLoadNotificationConfig } from './redux/user/user-actions.js' import { doLoadNotificationConfig } from './redux/user/user-actions.js'
import './persistState.js' import './persistState.js'
import { initApi } from 'qortal-ui-crypto' import { initApi } from 'qortal-ui-crypto'

6
qortal-ui-core/src/localStorageHelpers.js
View File

@ -9,12 +9,6 @@ export const loadStateFromLocalStorage = (key) => {
} }
} }
// const loadConfigFromAPI = () => {
// return fetch(configURL).then(res => res.json())
// }
// export const loadConfig = async (key) => loadConfigFromLocalStorage() || loadConfigFromAPI()
export const saveStateToLocalStorage = (key, state) => { export const saveStateToLocalStorage = (key, state) => {
try { try {
const stateJSON = JSON.stringify(state) const stateJSON = JSON.stringify(state)

1
qortal-ui-core/src/main.js
View File

@ -1,3 +1,2 @@
import './initStore.js' import './initStore.js'
import './components/main-app.js' import './components/main-app.js'

1
qortal-ui-core/src/notifications/notification-actions/new-message.js
View File

@ -35,6 +35,5 @@ export const newMessage = (data) => {
} }
const playSound = (soundUrl) => { const playSound = (soundUrl) => {
return new Audio(soundUrl) return new Audio(soundUrl)
} }

1
qortal-ui-core/src/worker.js
View File

@ -11,7 +11,6 @@ Epml.registerPlugin(EpmlWorkerPlugin)
const parentEpml = new Epml({ type: 'WORKER', source: self }) const parentEpml = new Epml({ type: 'WORKER', source: self })
parentEpml.route('kdf', async req => { parentEpml.route('kdf', async req => {
const { salt, key, nonce, staticSalt, staticBcryptSalt } = req.data const { salt, key, nonce, staticSalt, staticBcryptSalt } = req.data
const combinedBytes = utils.appendBuffer(salt, utils.stringtoUTF8Array(staticSalt + key + nonce)) const combinedBytes = utils.appendBuffer(salt, utils.stringtoUTF8Array(staticSalt + key + nonce))
const sha512Hash = new Sha512().process(combinedBytes).finish().result const sha512Hash = new Sha512().process(combinedBytes).finish().result

6
qortal-ui-core/tooling/utils.js
View File

@ -1,16 +1,10 @@
const path = require('path') const path = require('path')
// So that the directory rollup is running in doesn't matter as the paths aren't relative
const makeSourceAbsolute = (dir, tree) => { const makeSourceAbsolute = (dir, tree) => {
for (const component of Object.values(tree)) { for (const component of Object.values(tree)) {
// console.log(component)
component.source = path.join(dir, component.file) component.source = path.join(dir, component.file)
if (component.children) { if (component.children) {
makeSourceAbsolute(dir, component.children) makeSourceAbsolute(dir, component.children)
// for (const child of Object.values(component.children)) {
// console.log(child)
// addPathToSource(child)
// }
} }
} }
return tree return tree

24
qortal-ui-core/tooling/watch-inlines.js
View File

@ -4,38 +4,14 @@ async function watchInlines (inlineConfigs) {
for (const conf of inlineConfigs) { for (const conf of inlineConfigs) {
const watchOptions = { const watchOptions = {
...conf.inputOptions, ...conf.inputOptions,
// output: [outputOptions],
output: [conf.outputOptions], output: [conf.outputOptions],
watch: { watch: {
// chokidar,
// clearScreen,
// exclude,
// include
} }
} }
const watcher = rollup.watch(watchOptions) const watcher = rollup.watch(watchOptions)
watcher.on('event', event => { watcher.on('event', event => {
// event.code can be one of:
// START — the watcher is (re)starting
// BUNDLE_START — building an individual bundle
// BUNDLE_END — finished building a bundle
// END — finished building all bundles
// ERROR — encountered an error while bundling
// FATAL — encountered an unrecoverable error
}) })
// stop watching
// watcher.close()
} }
// console.log(bundle.watchFiles) // an array of file names this bundle depends on
// console.log(bundle, conf.outputOptions)
// await writeBundle(bundle, conf.outputOptions)
// console.log('bundle written')
} }
// build()
module.exports = watchInlines module.exports = watchInlines

11
qortal-ui-core/tooling/watch.js
View File

@ -11,23 +11,15 @@ async function watch(options, outputs, outputOptions, inputOptions) {
} }
}), }),
watch: { watch: {
// chokidar,
// clearScreen,
// exclude,
// include
} }
} }
const watcher = rollup.watch(watchOptions) const watcher = rollup.watch(watchOptions)
watcher.on('event', event => {.
watcher.on('event', event => {
// ...
}) })
} }
async function writeBundle(bundle, outputOptions) { async function writeBundle(bundle, outputOptions) {
await bundle.generate(outputOptions) await bundle.generate(outputOptions)
await bundle.write(outputOptions) await bundle.write(outputOptions)
console.log('WATCH CORE ==> Write Bundle : Done 🎉'); console.log('WATCH CORE ==> Write Bundle : Done 🎉');
} }
@ -36,7 +28,6 @@ async function buildInline(conf) {
const bundle = await rollup.rollup(conf.inputOptions).catch(err => { const bundle = await rollup.rollup(conf.inputOptions).catch(err => {
throw err throw err
}) })
await writeBundle(bundle, conf.outputOptions) await writeBundle(bundle, conf.outputOptions)
} }