diff --git a/core/src/components/login-view/login-view.js b/core/src/components/login-view/login-view.js index bc044daa..2df4dd22 100644 --- a/core/src/components/login-view/login-view.js +++ b/core/src/components/login-view/login-view.js @@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit' import { connect } from 'pwa-helpers' import { store } from '../../store.js' import { stateAwait } from '../../stateAwait.js' -import { translate, translateUnsafeHTML } from 'lit-translate' +import { translate, get, translateUnsafeHTML } from 'lit-translate' import '@material/mwc-button' import '@material/mwc-icon' @@ -15,7 +15,20 @@ import './login-section.js' import '../qort-theme-toggle.js' import settings from '../../functional-components/settings-page.js' -import { addAutoLoadImageChat, removeAutoLoadImageChat, addChatLastSeen, allowQAPPAutoAuth, removeQAPPAutoAuth, removeQAPPAutoLists, allowQAPPAutoLists, addTabInfo, setTabNotifications, setNewTab, setNewNotification, setSideEffectAction } from '../../redux/app/app-actions.js' +import { + addAutoLoadImageChat, + removeAutoLoadImageChat, + addChatLastSeen, + allowQAPPAutoAuth, + removeQAPPAutoAuth, + removeQAPPAutoLists, + allowQAPPAutoLists, + addTabInfo, + setTabNotifications, + setNewTab, + setNewNotification, + setSideEffectAction +} from '../../redux/app/app-actions.js' window.reduxStore = store window.reduxAction = { @@ -137,6 +150,7 @@ class LoginView extends connect(store)(LitElement) { left:0; z-index:1; } + .login-card-container { max-width:1240px; max-height:var(--window-height); @@ -144,6 +158,7 @@ class LoginView extends connect(store)(LitElement) { margin-left: auto; width: calc(100vw); } + .qortal-logo { margin-left: auto; margin-right: auto; @@ -151,6 +166,7 @@ class LoginView extends connect(store)(LitElement) { max-width:40%; z-index:1; } + .login-card-center-container { max-width:100%; max-height:var(--window-height); @@ -160,13 +176,16 @@ class LoginView extends connect(store)(LitElement) { height: var(--window-height); overflow:hidden; } + #loginContainerPages { display:inline; } + #loginContainerPages [page] { background: none; padding:0; } + .login-card { min-width: 340px; border-bottom: 2px solid var(--mdc-theme-primary); @@ -177,30 +196,49 @@ class LoginView extends connect(store)(LitElement) { border: 0; border-radius: 4px; } + .login-card p { margin-top: 0; font-size: 1rem; font-style: italic; } - .login-card h1{ + + .login-card h1 { margin-bottom:12px; font-size:64px; } + + .login-card h5 { + margin-top: -16px; + margin-left: 50px; + font-size: 12px; + color: var(--black); + } + + .login-card h6 { + font-size: 12px; + color: var(--mdc-theme-primary); + } + .login-card iron-pages { height:100%; + margin-top: -16px; } + .backButton { padding-top:18px; text-align:center; } + #login-pages-nav { text-align: left; - /* padding-bottom:8px; */ padding: 12px 0 8px 0; } + #nav-next { float: right; } + @media only screen and (min-width: ${getComputedStyle(document.body).getPropertyValue('--layout-breakpoint-tablet')}) { /* Desktop/tablet */ .login-card { @@ -212,13 +250,14 @@ class LoginView extends connect(store)(LitElement) { #loginContainerPages [page="welcome"] { } } + @media only screen and (max-width: ${getComputedStyle(document.body).getPropertyValue('--layout-breakpoint-tablet')}) { /* Mobile */ .qortal-logo { display:none; visibility:hidden; } - .login-card{ + .login-card { width:100%; margin:0; top:0; @@ -228,7 +267,14 @@ class LoginView extends connect(store)(LitElement) { text-align: left; padding-left:12px; } + .login-card h5 { + margin-top: 0px; + margin-left: 0px; + font-size: 12px; + color: var(--black); + } } + @keyframes fade { from { opacity: 0; @@ -239,6 +285,7 @@ class LoginView extends connect(store)(LitElement) { transform: translateX(0); } } + @keyframes grow-up { from { overflow:hidden; @@ -249,16 +296,20 @@ class LoginView extends connect(store)(LitElement) { max-height:var(--window-height); } } + iron-pages .animated, .animated { animation-duration: ${animationDuration}s; animation-name: grow-up; } + div[page] > paper-icon-button { margin:12px; } + .corner-box { border-color: var(--mdc-theme-primary) !important; } + [hidden] { visibility: hidden; display: none; @@ -271,7 +322,8 @@ class LoginView extends connect(store)(LitElement) {
-
${translate("appinfo.uiversion")}: ${this.nodeConfig.version ? this.nodeConfig.version : ''}
+
${translate("appinfo.uiversion")}: ${this.nodeConfig.version ? this.nodeConfig.version : ''}
+ ${this.renderSelectedNodeOnStart()} this.selectedPageElement.next(e)} page="welcome"> this.selectedPageElement.next(e)} page="create-account"> @@ -292,6 +344,18 @@ class LoginView extends connect(store)(LitElement) { ` } + renderSelectedNodeOnStart() { + const selectedNodeIndexOnStart = localStorage.getItem('mySelectedNode') + const catchSavedNodes = JSON.parse(localStorage.getItem('myQortalNodes')) + const selectedNodeOnStart = catchSavedNodes[selectedNodeIndexOnStart] + const selectedNameOnStart = `${selectedNodeOnStart.name}` + const selectedNodeUrlOnStart = `${selectedNodeOnStart.protocol + '://' + selectedNodeOnStart.domain +':' + selectedNodeOnStart.port}` + + let connectString = get('settings.snack2') + + return html`
${connectString} : ${selectedNameOnStart} ${selectedNodeUrlOnStart}
` + } + selectPage(newPage) { this.selectedPage = newPage } diff --git a/core/src/functional-components/settings-page.js b/core/src/functional-components/settings-page.js index 4323ffaa..c96e36e0 100644 --- a/core/src/functional-components/settings-page.js +++ b/core/src/functional-components/settings-page.js @@ -36,7 +36,6 @@ class SettingsPage extends connect(store)(LitElement) { lastSelected: { type: Number }, nodeConfig: { type: Object }, theme: { type: String, reflect: true }, - nodeIndex: { type: Number }, isBeingEdited: { type: Boolean }, dropdownOpen: { type: Boolean } } @@ -159,14 +158,12 @@ class SettingsPage extends connect(store)(LitElement) { super() this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' this.nodeConfig = {} - this.nodeIndex = localStorage.getItem('mySelectedNode') this.isBeingEdited = false this.isBeingEditedIndex = null this.dropdownOpen = false } render() { - this.nodeSelectedOnNewStart() return html`
@@ -331,7 +328,7 @@ class SettingsPage extends connect(store)(LitElement) { firstUpdated() { const checkNode = localStorage.getItem('mySelectedNode') if (checkNode === null || checkNode.length === 0) { - localStorage.setItem('mySelectedNode', 0); + localStorage.setItem('mySelectedNode', 0) } else { this.handleSelectionOnNewStart(checkNode) } @@ -344,24 +341,6 @@ class SettingsPage extends connect(store)(LitElement) { this.requestUpdate() } - nodeSelectedOnNewStart() { - const selectedNodeIndexOnNewStart = localStorage.getItem('mySelectedNode') - this.catchSavedNodes = JSON.parse(localStorage.getItem('myQortalNodes')) - const selectedNodeOnNewStart = this.catchSavedNodes[selectedNodeIndexOnNewStart] - const selectedNameOnNewStart = `${selectedNodeOnNewStart.name}` - const selectedNodeUrlOnNewStart = `${selectedNodeOnNewStart.protocol + '://' + selectedNodeOnNewStart.domain +':' + selectedNodeOnNewStart.port}` - - const index = parseInt(selectedNodeIndexOnNewStart) - if (isNaN(index)) return - - const snack0string = get('settings.snack2') - - snackbar.add({ - labelText: `${snack0string} : ${selectedNameOnNewStart} ${selectedNodeUrlOnNewStart}`, - dismiss: true - }) - } - toggleDropdown() { this.dropdownOpen = !this.dropdownOpen } @@ -387,6 +366,19 @@ class SettingsPage extends connect(store)(LitElement) { this.requestUpdate() this.nodeSelected(index) localStorage.setItem('mySelectedNode', index) + + const selectedNodeIndexOnNewStart = localStorage.getItem('mySelectedNode') + const catchSavedNodes = JSON.parse(localStorage.getItem('myQortalNodes')) + const selectedNodeOnNewStart = catchSavedNodes[selectedNodeIndexOnNewStart] + const selectedNameOnNewStart = `${selectedNodeOnNewStart.name}` + const selectedNodeUrlOnNewStart = `${selectedNodeOnNewStart.protocol + '://' + selectedNodeOnNewStart.domain +':' + selectedNodeOnNewStart.port}` + + let snack2string = get('settings.snack2') + + snackbar.add({ + labelText: `${snack2string} : ${selectedNameOnNewStart} ${selectedNodeUrlOnNewStart}`, + dismiss: true + }) } show() { @@ -444,16 +436,11 @@ class SettingsPage extends connect(store)(LitElement) { localStorage.removeItem('mySelectedNode'); localStorage.setItem('mySelectedNode', selectedNodeIndex) - - let snack2string = get('settings.snack2') - snackbar.add({ - labelText: `${snack2string} : ${selectedName} ${selectedNodeUrl}`, - dismiss: true - }) } addNode(e) { e.stopPropagation() + if (this.isBeingEdited) { this.editNode(this.isBeingEditedIndex) return @@ -517,13 +504,15 @@ class SettingsPage extends connect(store)(LitElement) { removeNode(event, index) { event.stopPropagation() + let stored = JSON.parse(localStorage.getItem('myQortalNodes')) stored.splice(index, 1) localStorage.setItem('myQortalNodes', JSON.stringify(stored)) - store.dispatch(doRemoveNode(index)); - let snack3string = get('settings.snack6') + store.dispatch(doRemoveNode(index)) + + let snack6string = get('settings.snack6') snackbar.add({ - labelText: `${snack3string}`, + labelText: `${snack6string}`, dismiss: true }) @@ -550,11 +539,13 @@ class SettingsPage extends connect(store)(LitElement) { copyStored[index] = nodeObject localStorage.setItem('myQortalNodes', JSON.stringify(copyStored)) store.dispatch(doEditNode(index, nodeObject)) - let snack3string = get('settings.snack7') + + let snack7string = get('settings.snack7') snackbar.add({ - labelText: `${snack3string}`, + labelText: `${snack7string}`, dismiss: true }) + this.shadowRoot.getElementById('nameInput').value = '' this.shadowRoot.getElementById('protocolList').value = '' this.shadowRoot.getElementById('domainInput').value = '' @@ -587,14 +578,14 @@ class SettingsPage extends connect(store)(LitElement) { } exportQortalNodesList() { - let nodelist = ''; + let nodelist = '' const qortalNodesList = JSON.stringify( localStorage.getItem('myQortalNodes') ); const qortalNodesListSave = JSON.parse(qortalNodesList || '[]') const blob = new Blob([qortalNodesListSave], { type: 'text/plain;charset=utf-8', - }); + }) nodelist = 'qortal.nodes' this.saveFileToDisk(blob, nodelist) } @@ -611,8 +602,9 @@ class SettingsPage extends connect(store)(LitElement) { const writable = await fileHandle.createWritable() await writable.write(contents) await writable.close() - }; - writeFile(fileHandle, blob).then(() => console.log('FILE SAVED')); + } + writeFile(fileHandle, blob).then(() => console.log('FILE SAVED')) + let snack4string = get('settings.snack4') snackbar.add({ labelText: `${snack4string} qortal.nodes`, @@ -633,7 +625,8 @@ class SettingsPage extends connect(store)(LitElement) { unelevated label="${translate('settings.import')}" @click="${() => this.openImportNodesDialog()}" - > + > + ` } @@ -647,7 +640,7 @@ class SettingsPage extends connect(store)(LitElement) { snackbar.add({ labelText: `${snack5string}`, dismiss: true, - }); + }) localStorage.removeItem('mySelectedNode') localStorage.setItem('mySelectedNode', 0) @@ -656,8 +649,8 @@ class SettingsPage extends connect(store)(LitElement) { } stateChanged(state) { - this.config = state.config; - this.nodeConfig = state.app.nodeConfig; + this.config = state.config + this.nodeConfig = state.app.nodeConfig } }