Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-24 20:07:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix notification and add connected node on main screen

Browse Source
This commit is contained in:
AlphaX-Projects 2023-10-30 13:14:06 +01:00
parent b9353e4197
commit 788d30e0d5
2 changed files with 104 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
core/src/components/login-view/login-view.js
View File

@ -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 {
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,6 +250,7 @@ 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 {
@ -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) {
<div class="login-card-center-container">
<div class="login-card" id="login-card">
<img class="qortal-logo" src="${this.config.coin.logo}">
<h5 style="color:var(--mdc-theme-primary)" ?hidden="${this.selectedPage != "welcome"}">${translate("appinfo.uiversion")}: ${this.nodeConfig.version ? this.nodeConfig.version : ''}</h5>
<h5 ?hidden="${this.selectedPage != "welcome"}">${translate("appinfo.uiversion")}: ${this.nodeConfig.version ? this.nodeConfig.version : ''}</h5>
${this.renderSelectedNodeOnStart()}
<iron-pages selected="${this.selectedPage}" attr-for-selected="page" id="loginContainerPages">
<welcome-page @next=${e => this.selectedPageElement.next(e)} page="welcome"></welcome-page>
<create-account-section @next=${e => this.selectedPageElement.next(e)} page="create-account"></create-account-section>
@ -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`<h6>${connectString} : ${selectedNameOnStart} ${selectedNodeUrlOnStart}</h6>`
}
selectPage(newPage) {
this.selectedPage = newPage
}

75
core/src/functional-components/settings-page.js
View File

@ -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`
<mwc-dialog id="settingsDialog" opened="false">
<div style="display: inline; text-align: center;">
@ -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()}"
></mwc-button>
>
</mwc-button>
`
}
@ -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
}
}