Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +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 = {
// All the do stuff imports...such as login(...) and logout()
api: {
file: 'api/api.js',
className: 'api'
@ -34,7 +33,6 @@ const functionalComponents = {
}
}
// Inlines all dependencies... transpiles to es5
const inlineComponents = [
{
className: 'worker',

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

@ -6,7 +6,6 @@ const styles = {
},
theme: {
colors: {
// primary: '#64ffda', /* 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. */
onPrimary: '#fff', /* Sets the text color to the color configured for text on the primary color. */
@ -44,7 +43,6 @@ const styles = {
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/paper-checkbox": "^3.1.0",
"@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-input": "^3.2.0",
"@polymer/paper-input": "^3.2.1",
"@polymer/paper-item": "^3.0.1",
"@polymer/paper-listbox": "^3.0.1",
"@polymer/paper-progress": "^3.0.1",
"@polymer/paper-ripple": "^3.0.2",
"@polymer/paper-spinner": "^3.0.2",
"@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-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-app-layout": "^2.2.0",
"@vaadin/vaadin-grid": "^5.9.3",
"asmcrypto.js": "^2.3.2",
"bcryptjs": "^2.4.3",
"epml": "^0.3.3",
"file-saver": "^2.0.5",
"lit-element": "^2.5.1",
"postcss": "^8.4.4",
"lit": "^2.1.2",
"postcss": "^8.4.6",
"pwa-helpers": "^0.9.1",
"random-sentence-generator": "^0.0.8",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"rollup": "^2.67.0",
"rollup": "^2.67.1",
"rollup-plugin-node-globals": "^1.4.0",
"rollup-plugin-postcss": "^4.0.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 { store } from '../store.js'
import { doPageUrl } from '../redux/app/app-actions.js'
@ -27,12 +27,10 @@ class AppInfo extends connect(store)(LitElement) {
.normal {
--mdc-theme-primary: rgb(3, 169, 244);
}
.normal-button {
--mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-on-primary: white;
}
mwc-button.normal-button {
--mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-on-primary: white;
@ -40,12 +38,10 @@ class AppInfo extends connect(store)(LitElement) {
.test-net {
--mdc-theme-primary: black;
}
.test-net-button {
--mdc-theme-primary: black;
--mdc-theme-on-primary: white;
}
mwc-button.test-net-button {
--mdc-theme-primary: black;
--mdc-theme-on-primary: white;
@ -54,10 +50,6 @@ class AppInfo extends connect(store)(LitElement) {
flex: 0 0 100px;
padding:12px;
border-top: 1px solid #eee;
/* position: fixed;
top: 102vh;
left: 0; */
/* margin-top: 2.5rem; */
}
.info {
margin: 0;
@ -105,7 +97,6 @@ class AppInfo extends connect(store)(LitElement) {
}
firstUpdated() {
// ...
}
_renderStatus() {
@ -138,7 +129,6 @@ class AppInfo extends connect(store)(LitElement) {
this.nodeStatus = state.app.nodeStatus
this.nodeInfo = state.app.nodeInfo
this.nodeConfig = state.app.nodeConfig
this.pageUrl = state.app.pageUrl
if (this.pageUrl.length > 5) {
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 { store } from '../store.js'
@ -30,11 +30,9 @@ class AppView extends connect(store)(LitElement) {
:host {
--app-drawer-width: 260px;
}
app-drawer-layout:not([narrow]) [drawer-toggle]:not(sidenav-menu) {
display: none;
}
app-drawer {
box-shadow: var(--shadow-2);
background: var(--mdc-theme-surface);
@ -46,7 +44,6 @@ class AppView extends connect(store)(LitElement) {
background: var(--mdc-theme-surface);
color: var(--mdc-theme-on-surface);
}
#sideBar {
height: 100vh;
display: flex;
@ -76,56 +73,44 @@ class AppView extends connect(store)(LitElement) {
render() {
return html`
<style>
</style>
<app-drawer-layout responsive-width='${getComputedStyle(document.body).getPropertyValue('--layout-breakpoint-desktop')}' fullbleed >
<app-drawer swipe-open slot="drawer" id="appdrawer">
<app-header-layout>
<div id="sideBar">
<wallet-profile></wallet-profile>
<div class="sideBarMenu">
<sidenav-menu></sidenav-menu>
<app-drawer-layout responsive-width='${getComputedStyle(document.body).getPropertyValue('--layout-breakpoint-desktop')}' fullbleed >
<app-drawer swipe-open slot="drawer" id="appdrawer">
<app-header-layout>
<div id="sideBar">
<wallet-profile></wallet-profile>
<div class="sideBarMenu">
<sidenav-menu></sidenav-menu>
</div>
<app-info></app-info>
</div>
<app-info></app-info>
</div>
</app-header-layout>
</app-drawer>
<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>
<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>
`
</app-drawer-layout>
<user-settings></user-settings>
`
}
constructor() {
super()
}
firstUpdated() {
//
}
stateChanged(state) {
@ -133,7 +118,6 @@ class AppView extends connect(store)(LitElement) {
}
openSettings() {
const settingsDialog = document.getElementById('main-app').shadowRoot.querySelector('app-view').shadowRoot.querySelector('user-settings')
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-element'
import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers'
import { store } from '../store.js'
class MyElement extends connect(store)(LitElement) {
static get properties () {
return {
}
}
static get styles () {
return css`
`
return css``
}
render () {
return html`
<style>
</style>
`
}
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 { store } from '../../store.js'
@ -14,7 +14,10 @@ import snackbar from '../../functional-components/snackbar.js'
import '@material/mwc-button'
import '@material/mwc-checkbox'
import '@material/mwc-textfield'
import '@material/mwc-icon'
import '@material/mwc-dialog'
import '@material/mwc-formfield'
import '@polymer/iron-pages'
import '@polymer/paper-input/paper-input-container.js'
@ -222,23 +225,6 @@ class CreateAccountSection extends connect(store)(LitElement) {
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() {
return html`
<style>
@ -382,8 +368,10 @@ class CreateAccountSection extends connect(store)(LitElement) {
</div>
</div>
<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-checkbox style="display: inline; id="showSeedphraseCheckbox" @click=${e => { this.showSeedphrase = !e.target.checked; this.updateNext() }} ?checked=${this.showSeedphrase}></mwc-checkbox>
<mwc-formfield alignEnd label="I'm an advanced user, show my seed phrase.">
<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>
@ -405,8 +393,10 @@ class CreateAccountSection extends connect(store)(LitElement) {
<vaadin-password-field style="width:100%;" label="Confirm Password" id="rePassword"></vaadin-password-field>
</div>
<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-checkbox style="display: inline; id="saveInBrowserCheckbox" @click=${e => { this.saveAccount = !e.target.checked }} ?checked=${this.saveAccount}></mwc-checkbox>
<mwc-formfield alignEnd label="Save in this browser.">
<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>
@ -427,8 +417,10 @@ class CreateAccountSection extends connect(store)(LitElement) {
</div>
</div>
<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-checkbox style="display: inline;" id="downloadBackupCheckbox" @click=${e => { this.isDownloadedBackup = !e.target.checked; this.updateNext() }} ?checked=${this.isDownloadedBackup}></mwc-checkbox>
<mwc-formfield alignEnd label="Done saving your wallet backup ?">
<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>
@ -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) {
if (!this.shadowRoot.querySelector('#createAccountPages') || !newPage) {
return
@ -506,7 +515,6 @@ class CreateAccountSection extends connect(store)(LitElement) {
}
createAccount() {
}
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 { store } from '../../store.js'
@ -156,21 +156,6 @@ class LoadingRipple extends connect(store)(LitElement) {
this._ripple.classList.remove('activating-done')
this._ripple.classList.remove('disabling')
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) {
// 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 { store } from '../../store.js'
import { checkApiKey } from '../../apiKeyUtils.js'
@ -341,8 +341,10 @@ class LoginSection extends connect(store)(LitElement) {
</div>
${this.showPasswordCheckboxPages.includes(this.selectedPage) ? html`
<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-checkbox style="display: inline;" id="storeCheckbox" @click=${e => { this.saveInBrowser = !e.target.checked }} ?checked="${this.saveInBrowser}"></mwc-checkbox>
<mwc-formfield alignEnd label="Save in this browser.">
<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>

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 { store } from '../../store.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'

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 { connect } from 'pwa-helpers'
import { store } from '../store.js'
@ -12,7 +12,6 @@ import './login-view/login-view.js'
import './app-view.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';
installRouter((location) => store.dispatch(doNavigate(location)))
@ -30,7 +29,6 @@ class MainApp extends connect(store)(LitElement) {
}
render() {
return html`${this.renderViews(this.loggedIn)}`
}
@ -41,33 +39,26 @@ class MainApp extends connect(store)(LitElement) {
renderViews(isLoggedIn) {
if (isLoggedIn) {
return html`
<app-view></app-view>
`
`
} else {
return html`
<login-view></login-view>
`
`
}
}
stateChanged(state) {
this.loggedIn = state.app.loggedIn
if (this.loggedIn === true && this.initial === 0) {
this.initial = this.initial + 1
this._loadPlugins()
}
document.title = state.config.coin.name
}
_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 { 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 { store } from '../../store.js'
@ -29,7 +29,6 @@ class NotificationsView extends connect(store)(LitElement) {
position: relative;
text-align: center;
}
.notification-box {
display: block;
position: relative;
@ -38,7 +37,6 @@ class NotificationsView extends connect(store)(LitElement) {
transform: translate(-50%, 0%);
text-align: center;
}
@media(min-width: 1150px) {
.notification-box {
display: grid;
@ -46,7 +44,6 @@ class NotificationsView extends connect(store)(LitElement) {
grid-gap: 30px;
}
}
.content-box {
border: 1px solid #a1a1a1;
padding: 10px 25px;
@ -56,19 +53,15 @@ class NotificationsView extends connect(store)(LitElement) {
min-height: 150px;
margin: 20px 0;
}
h4 {
margin-bottom: 0;
}
mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::before {
background-color:var(--mdc-theme-primary)
}
label:hover {
cursor: pointer;
}
.title {
font-weight: 600;
font-size: 15px;
@ -126,16 +119,13 @@ class NotificationsView extends connect(store)(LitElement) {
}
stateChanged(state) {
this.notificationConfig = state.user.notifications
this.q_chatConfig = this.notificationConfig.q_chat
this.blockConfig = this.notificationConfig.block
}
setQChatNotificationConfig(valueObject) {
if (valueObject.type === 'PLAY_SOUND') {
let data = {
playSound: !valueObject.value,
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 { store } from '../../store.js'
import '@material/mwc-textfield'
import '@material/mwc-icon'
import '@vaadin/vaadin-text-field/vaadin-password-field.js'
import FileSaver from 'file-saver'
class SecurityView extends connect(store)(LitElement) {
static get properties() {
return {
}
}
@ -22,7 +24,6 @@ class SecurityView extends connect(store)(LitElement) {
transform: translate(-50%, 0%);
text-align: center;
}
.q-button {
display: inline-flex;
flex-direction: column;
@ -33,7 +34,7 @@ class SecurityView extends connect(store)(LitElement) {
padding-left: 25px;
padding-right: 25px;
color: white;
background: #6a6c75;
background: #03a9f4;
width: 50%;
font-size: 17px;
cursor: pointer;
@ -54,8 +55,11 @@ class SecurityView extends connect(store)(LitElement) {
<p>
Please choose a password to encrypt your backup with (this can be the same as the one you logged in with, or different)
</p>
<div style="max-width: 500px; display: inline-block;">
<mwc-textfield style="width:100%;" icon="vpn_key" id="downloadBackupPassword" label="Password" type="password" ></mwc-textfield>
<div style="max-width: 500px; display: flex; justify-content: center; margin: auto;">
<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>
</div>
@ -64,18 +68,13 @@ class SecurityView extends connect(store)(LitElement) {
}
stateChanged(state) {
// ...
}
async downloadBackup() {
const state = store.getState()
const password = this.shadowRoot.getElementById('downloadBackupPassword').value
console.log(password);
const data = await state.app.wallet.generateSaveWalletData(password, state.config.crypto.kdfThreads, () => { })
const dataString = JSON.stringify(data)
const blob = new Blob([dataString], { type: 'text/plain;charset=utf-8' })
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 { store } from '../../store.js'
import '@polymer/paper-dialog/paper-dialog.js'
import '@material/mwc-button'
// Settings View
import './account-view.js'
import './security-view.js'
import './notifications-view.js'
@ -23,7 +22,6 @@ class UserSettings extends connect(store)(LitElement) {
static get styles() {
return css`
:host {
margin: 0;
width: 100%;
@ -34,11 +32,9 @@ class UserSettings extends connect(store)(LitElement) {
color: #333333;
line-height: 1.6;
}
.decline {
--mdc-theme-primary: var(--mdc-theme-error)
}
paper-dialog.userSettings {
width: 100%;
max-width: 100vw;
@ -49,27 +45,22 @@ class UserSettings extends connect(store)(LitElement) {
line-height: 1.6;
overflow-y: auto;
}
.actions {
display:flex;
justify-content: space-between;
padding: 0 4em;
margin: 15px 0 -2px 0;
}
.close-icon {
font-size: 36px;
}
.close-icon:hover {
cursor: pointer;
opacity: .6;
}
.buttons {
text-align:right;
}
.container {
max-width: 90vw;
margin-left: auto;
@ -77,13 +68,11 @@ class UserSettings extends connect(store)(LitElement) {
margin-top: 20px;
padding: .6em;
}
ul {
list-style: none;
padding: 0;
margin-bottom: 0;
}
.leftBar {
background-color: #fff;
color: #333333;
@ -91,14 +80,12 @@ class UserSettings extends connect(store)(LitElement) {
padding: 20px 0 0 0;
border-radius: 5px;
}
.leftBar img {
margin: 0 auto;
width: 75%;
height: 75%;
text-align: center;
}
.leftBar .slug {
text-align: center;
margin-top: 20px;
@ -107,16 +94,12 @@ class UserSettings extends connect(store)(LitElement) {
font-weight: 600;
margin-bottom: 7px;
}
.leftBar ul li {
border-bottom: 1px solid #DDD;
}
.leftBar ul li:last-child {
border-bottom: none;
}
.leftBar ul li a {
color: #333333;
font-size: 16px;
@ -125,31 +108,23 @@ class UserSettings extends connect(store)(LitElement) {
padding: .9em;
display: block;
}
.leftBar ul li a i {
margin-right: 8px;
font-size: 16px;
}
.leftBar ul li a:hover {
background-color: #f6f6f6;
color: #515151;
}
.leftBar ul li:active {
border-bottom: none;
}
.leftBar ul li a.active {
color: #515151;
background-color: #eee;
border-left: 2px solid #515151;
margin-left: -2px;
}
/* Main Profile Page */
.mainPage {
background-color: #fff;
color: #333333;
@ -160,56 +135,40 @@ class UserSettings extends connect(store)(LitElement) {
text-align: center;
min-height: 460px;
}
/* Styles for Smaller Screen Sizes */
@media(max-width:700px) {
.mainPage {
margin-top: 30px;
}
}
/* Styles for Larger Screen Sizes */
@media(min-width:765px) {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.actions {
display:flex;
justify-content: space-between;
padding: 0 4em;
margin: 15px 0 -25px 0;
}
.container {
padding: 2em;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 30px;
}
.wrapper > .mainPage {
padding: 2em;
}
.leftBar {
text-align: left;
max-height: 403px;
max-width: 400px;
font-size: 16px;
}
.mainPage {
font-size: 16px;
}
@ -224,17 +183,11 @@ class UserSettings extends connect(store)(LitElement) {
render() {
return html`
<style>
</style>
<paper-dialog id="userSettingsDialog" class="userSettings" modal>
<div class="actions">
<h2></h2>
<mwc-icon class="close-icon" @click=${ () => this.closeSettings()} title="Close Settings" >highlight_off</mwc-icon>
</div>
<div class="container">
<div class="wrapper">
<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>
</ul>
</div>
<div class="mainPage">
<h1>${ this.selectedView.name}</h1>
<hr>
${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>
@ -270,7 +214,6 @@ class UserSettings extends connect(store)(LitElement) {
}
renderSettingViews(selectedView) {
if (selectedView.id === 'info') {
return html`<account-view></account-view>`;
} else if (selectedView.id === 'security') {
@ -281,7 +224,6 @@ class UserSettings extends connect(store)(LitElement) {
}
setSettingsView(pageId) {
if (pageId === 'info') {
return this.selectedView = { id: 'info', name: 'General Account Info' }
} else if (pageId === 'security') {
@ -293,13 +235,11 @@ class UserSettings extends connect(store)(LitElement) {
openSettings() {
if (this.loggedIn) {
this.shadowRoot.getElementById('userSettingsDialog').open()
}
}
closeSettings() {
this.shadowRoot.getElementById('userSettingsDialog').close()
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 { store } from '../store.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 { store } from '../store.js'
@ -27,7 +27,6 @@ class SidenavMenu extends connect(store)(LitElement) {
}
.mcd-menu li {
position: relative;
/* height:48px; */
line-height: 48px;
outline: none;
padding: 2px;
@ -144,7 +143,6 @@ class SidenavMenu extends connect(store)(LitElement) {
}
.mcd-menu li ul li a {
/* padding: 10px; */
text-align: left;
border: 0;
border-bottom: 1px solid #EEE;
@ -152,7 +150,6 @@ class SidenavMenu extends connect(store)(LitElement) {
outline: none;
}
.mcd-menu li ul li a mwc-icon {
/* font-size: 16px; */
display: inline-block;
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 { store } from '../store.js'
@ -39,7 +39,6 @@ class WalletProfile extends connect(store)(LitElement) {
background: rgb(255, 255, 255);
}
#profileInMenu:hover {
/* cursor:pointer; */
}
#accountIcon {
font-size:48px;
@ -68,7 +67,6 @@ class WalletProfile extends connect(store)(LitElement) {
margin:0;
margin-top:8px;
font-size:11px;
/* padding-top:8px; */
}
</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-icon'
@ -84,7 +84,6 @@ class FragFileInput extends LitElement {
firstUpdated () {
this._dropArea = this.shadowRoot.getElementById('drop-area')
// console.log(this._dropArea)
const preventDefaults = e => {
e.preventDefault()
@ -104,17 +103,14 @@ class FragFileInput extends LitElement {
}
;['dragenter', 'dragover'].forEach(eventName => {
// console.log('dragenter/dragover')
this._dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
// console.log('drag-leave/drop')
this._dropArea.addEventListener(eventName, unhighlight, false)
})
this._dropArea.addEventListener('drop', e => {
// console.log('DROPPED')
const dt = e.dataTransfer
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'
// Epml.registerPlugin(contentWindowsPlugin)
Epml.registerPlugin(RequestPlugin)
Epml.registerPlugin(EpmlReadyPlugin)
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 { 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 { store } from '../store';
@ -45,7 +45,6 @@ class CopyTextMenu extends connect(store)(LitElement) {
min-width: 150px;
max-width: 300px;
background: #F9F9F9;
/* box-shadow: 3px 3px 2px #E9E9E9; */
border-radius: 4px;
}
@ -90,10 +89,6 @@ class CopyTextMenu extends connect(store)(LitElement) {
<ul id='items'>
<li @click=${() => this.saveToClipboard(this.selectedText)} >Copy</li>
</ul>
<!-- <hr /> -->
<!-- <ul id="items">
<li>Another Menu Option</li>
</ul> -->
</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 { store } from '../store';
@ -46,7 +46,6 @@ class FramePasteMenu extends connect(store)(LitElement) {
min-width: 150px;
max-width: 300px;
background: #F9F9F9;
/* box-shadow: 3px 3px 2px #E9E9E9; */
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']

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 { store } from '../store.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 { store } from '../store';
@ -39,7 +39,6 @@ class FramePasteMenu extends connect(store)(LitElement) {
min-width: 150px;
max-width: 300px;
background: #F9F9F9;
/* box-shadow: 3px 3px 2px #E9E9E9; */
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 { 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'
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 { doLoadNotificationConfig } from './redux/user/user-actions.js'
import './persistState.js'
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) => {
try {
const stateJSON = JSON.stringify(state)

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

@ -1,3 +1,2 @@
import './initStore.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) => {
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 })
parentEpml.route('kdf', async req => {
const { salt, key, nonce, staticSalt, staticBcryptSalt } = req.data
const combinedBytes = utils.appendBuffer(salt, utils.stringtoUTF8Array(staticSalt + key + nonce))
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')
// So that the directory rollup is running in doesn't matter as the paths aren't relative
const makeSourceAbsolute = (dir, tree) => {
for (const component of Object.values(tree)) {
// console.log(component)
component.source = path.join(dir, component.file)
if (component.children) {
makeSourceAbsolute(dir, component.children)
// for (const child of Object.values(component.children)) {
// console.log(child)
// addPathToSource(child)
// }
}
}
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) {
const watchOptions = {
...conf.inputOptions,
// output: [outputOptions],
output: [conf.outputOptions],
watch: {
// chokidar,
// clearScreen,
// exclude,
// include
}
}
const watcher = rollup.watch(watchOptions)
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

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

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