mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-03-27 15:55:55 +00:00
new menu
This commit is contained in:
AlphaX-Projects
GitHub
parent
15295cb441
commit
b19f7120bd
@ -1,259 +1,130 @@
|
|||||||
import { LitElement, html, css } from 'lit'
|
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 { doLogout } from '../redux/app/actions/login'
|
||||||
|
|
||||||
import '@material/mwc-icon'
|
import '@material/mwc-icon'
|
||||||
import '@polymer/paper-ripple'
|
import '@polymer/paper-ripple'
|
||||||
import { doLogout } from '../redux/app/actions/login'
|
import '@vaadin/icon'
|
||||||
|
import '@vaadin/icons'
|
||||||
|
|
||||||
|
import '../functional-components/side-menu.js'
|
||||||
|
import '../functional-components/side-menu-item.js'
|
||||||
|
|
||||||
class SidenavMenu extends connect(store)(LitElement) {
|
class SidenavMenu extends connect(store)(LitElement) {
|
||||||
static get properties() {
|
static get properties() {
|
||||||
return {
|
return {
|
||||||
config: { type: Object },
|
config: { type: Object },
|
||||||
urls: { type: Object }
|
urls: { type: Object }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
static get styles() {
|
static get styles() {
|
||||||
return [
|
return [
|
||||||
css`
|
css`
|
||||||
.mcd-menu {
|
* {
|
||||||
list-style: none;
|
--item-selected-color: var(--nav-selected-color);
|
||||||
padding: 0px 0px;
|
--item-selected-color-text: var(--nav-selected-color-text);
|
||||||
background: var(--sidetopbar);
|
--item-color-active: var(--nav-color-active);
|
||||||
border-radius: 2px;
|
--item-color-hover: var(--nav-color-hover);
|
||||||
width: 100%;
|
--item-text-color: var(--nav-text-color);
|
||||||
outline: none;
|
--item-icon-color: var(--nav-icon-color);
|
||||||
}
|
--item-border-color: var(--nav-border-color);
|
||||||
|
--item-border-selected-color: var(--nav-border-selected-color);
|
||||||
|
}
|
||||||
|
|
||||||
.mcd-menu li {
|
.s-menu {
|
||||||
position: relative;
|
list-style: none;
|
||||||
line-height: 48px;
|
padding: 0px 0px;
|
||||||
outline: none;
|
background: var(--sidetopbar);
|
||||||
padding: 2px;
|
border-radius: 2px;
|
||||||
list-style: none;
|
width: 100%;
|
||||||
}
|
border-top: 1px solid var(--border);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
.mcd-menu li a {
|
constructor() {
|
||||||
display: block;
|
super()
|
||||||
text-decoration: none;
|
this.urls = []
|
||||||
padding-left: 20px;
|
}
|
||||||
color: var(--mainmenutext);
|
|
||||||
text-align: left;
|
|
||||||
height: 48px;
|
|
||||||
position: relative;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li a mwc-icon {
|
render() {
|
||||||
float: left;
|
return html`
|
||||||
margin: 0 10px 0 0;
|
<div class="s-menu">
|
||||||
padding-top: 12px;
|
<side-menu>
|
||||||
padding-right: 9px;
|
<side-menu-item label="MINTING DETAILS" href="/app/minting">
|
||||||
}
|
<vaadin-icon icon="vaadin:info-circle" slot="icon"></vaadin-icon>
|
||||||
|
</side-menu-item>
|
||||||
.mcd-menu li a span {
|
<side-menu-item label="WALLETS" href="/app/wallet" selected>
|
||||||
display: block;
|
<vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
|
||||||
text-transform: uppercase;
|
</side-menu-item>
|
||||||
outline: none;
|
<side-menu-item label="SEND COIN" href="/app/send-coin">
|
||||||
}
|
<vaadin-icon icon="vaadin:coin-piles" slot="icon"></vaadin-icon>
|
||||||
|
</side-menu-item>
|
||||||
.mcd-menu li a small {
|
<side-menu-item label="TRADE PORTAL" href="/app/trade-portal">
|
||||||
display: block;
|
<vaadin-icon icon="vaadin:bullets" slot="icon"></vaadin-icon>
|
||||||
font-size: 10px;
|
</side-menu-item>
|
||||||
outline: none;
|
<side-menu-item label="REWARD SHARE" href="/app/reward-share">
|
||||||
}
|
<vaadin-icon icon="vaadin:share-square" slot="icon"></vaadin-icon>
|
||||||
|
</side-menu-item>
|
||||||
.mcd-menu li:hover > a mwc-icon {
|
<side-menu-item label="NAME REGISTRATION" href="/app/name-registration">
|
||||||
opacity: 1;
|
<vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon>
|
||||||
}
|
</side-menu-item>
|
||||||
|
<side-menu-item label="WEBSITES" href="/app/websites">
|
||||||
.mcd-menu li:hover a span {
|
<vaadin-icon icon="vaadin:desktop" slot="icon"></vaadin-icon>
|
||||||
opacity: 1;
|
</side-menu-item>
|
||||||
outline: none;
|
<side-menu-item label="DATA MANAGEMENT" href="/app/data-management">
|
||||||
}
|
<vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon>
|
||||||
|
</side-menu-item>
|
||||||
.mcd-menu li:hover > a {
|
<side-menu-item label="Q-CHAT" href="/app/q-chat">
|
||||||
background: var(--menuhover);
|
<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
|
||||||
color: var(--mainmenutexthover);
|
</side-menu-item>
|
||||||
}
|
<side-menu-item label="GROUP MANAGEMENT" href="/app/group-management">
|
||||||
|
<vaadin-icon icon="vaadin:group" slot="icon"></vaadin-icon>
|
||||||
.mcd-menu li a.active {
|
</side-menu-item>
|
||||||
position: relative;
|
<side-menu-item label="PUZZLES" href="/app/puzzles">
|
||||||
color: #515151;
|
<vaadin-icon icon="vaadin:puzzle-piece" slot="icon"></vaadin-icon>
|
||||||
background-color: var(--menuactive);
|
</side-menu-item>
|
||||||
outline: none;
|
${this.renderNodeManagement()}
|
||||||
}
|
<side-menu-item label="LOGOUT" href="javascript:void(0)" @click=${ e => this.logout(e)}>
|
||||||
|
<vaadin-icon icon="vaadin:sign-out" slot="icon"></vaadin-icon>
|
||||||
.mcd-menu li a.active:before {
|
</side-menu-item>
|
||||||
content: "";
|
</side-menu>
|
||||||
position: absolute;
|
|
||||||
top: 42%;
|
|
||||||
left: 0;
|
|
||||||
border-left: 5px solid #515151;
|
|
||||||
border-top: 5px solid transparent;
|
|
||||||
border-bottom: 5px solid transparent;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li a.active:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 42%;
|
|
||||||
right: 0;
|
|
||||||
border-right: 5px solid #515151;
|
|
||||||
border-top: 5px solid transparent;
|
|
||||||
border-bottom: 5px solid transparent;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li ul,
|
|
||||||
.mcd-menu li ul li ul {
|
|
||||||
position: absolute;
|
|
||||||
height: auto;
|
|
||||||
min-width: 240px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
background: #FFF;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: all 300ms linear;
|
|
||||||
-o-transition: all 300ms linear;
|
|
||||||
-ms-transition: all 300ms linear;
|
|
||||||
-moz-transition: all 300ms linear;
|
|
||||||
-webkit-transition: all 300ms linear;
|
|
||||||
z-index: 999999999;
|
|
||||||
left:280px;
|
|
||||||
top: 0px;
|
|
||||||
border-left: 4px solid #515151;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li ul:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
left: -9px;
|
|
||||||
border-right: 5px solid #515151;
|
|
||||||
border-bottom: 5px solid transparent;
|
|
||||||
border-top: 5px solid transparent;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li:hover > ul,
|
|
||||||
.mcd-menu li ul li:hover > ul {
|
|
||||||
display: block;
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
left:260px;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li ul li a {
|
|
||||||
text-align: left;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
height: auto;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li ul li a mwc-icon {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li ul li ul {
|
|
||||||
left: 230px;
|
|
||||||
top: 0;
|
|
||||||
border: 0;
|
|
||||||
border-left: 4px solid #515151;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li ul li ul:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: -9px;
|
|
||||||
border-right: 5px solid #515151;
|
|
||||||
border-bottom: 5px solid transparent;
|
|
||||||
border-top: 5px solid transparent;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mcd-menu li ul li:hover > ul {
|
|
||||||
top: 0px;
|
|
||||||
left: 200px;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.urls = []
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div>
|
|
||||||
<ul class="mcd-menu">
|
|
||||||
${this.urls.map(myPlugin => myPlugin.menus.length === 0 ? html`
|
|
||||||
<li>
|
|
||||||
<paper-ripple></paper-ripple>
|
|
||||||
<a href="/app/${myPlugin.url}">
|
|
||||||
<mwc-icon>${myPlugin.icon}</mwc-icon>
|
|
||||||
<span>${myPlugin.title}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
` : html`
|
|
||||||
<li>
|
|
||||||
<paper-ripple></paper-ripple>
|
|
||||||
<a href="/app/${myPlugin.url}">
|
|
||||||
<mwc-icon>${myPlugin.icon}</mwc-icon>
|
|
||||||
<span>${myPlugin.title}</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
${myPlugin.menus.map(myMenu => html`
|
|
||||||
<li>
|
|
||||||
<paper-ripple></paper-ripple>
|
|
||||||
<a href="/app/${myMenu.url}">
|
|
||||||
<mwc-icon>${myMenu.icon}</mwc-icon>
|
|
||||||
<span>${myMenu.title}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
`)}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
`)}
|
|
||||||
<li @click=${ e => this.logout(e)}>
|
|
||||||
<a href="javascript:void(0)">
|
|
||||||
<mwc-icon>exit_to_app</mwc-icon>
|
|
||||||
<span>LOGOUT</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
}
|
|
||||||
|
|
||||||
firstUpdated() {
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
|
|
||||||
stateChanged(state) {
|
|
||||||
this.config = state.config
|
|
||||||
this.urls = state.app.registeredUrls
|
|
||||||
}
|
|
||||||
|
|
||||||
async logout(e) {
|
|
||||||
if(window.confirm('Are you sure you want to logout?')) {
|
|
||||||
store.dispatch(doLogout());
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
firstUpdated() {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
|
||||||
|
renderNodeManagement() {
|
||||||
|
const checkNodeManagement = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
|
||||||
|
if (checkNodeManagement.enableManagement = true) {
|
||||||
|
return html`
|
||||||
|
<side-menu-item label="NODE MANAGEMENT" href="/app/node-management">
|
||||||
|
<vaadin-icon icon="vaadin:cloud" slot="icon"></vaadin-icon>
|
||||||
|
</side-menu-item>
|
||||||
|
`
|
||||||
|
} else {
|
||||||
|
return html`
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stateChanged(state) {
|
||||||
|
this.config = state.config
|
||||||
|
this.urls = state.app.registeredUrls
|
||||||
|
}
|
||||||
|
|
||||||
|
async logout(e) {
|
||||||
|
if(window.confirm('Are you sure you want to logout?')) {
|
||||||
|
store.dispatch(doLogout());
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define('sidenav-menu', SidenavMenu)
|
window.customElements.define('sidenav-menu', SidenavMenu)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user