mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
new menu
This commit is contained in:
parent
15295cb441
commit
b19f7120bd
@ -1,259 +1,130 @@
|
||||
import { LitElement, html, css } from 'lit'
|
||||
import { connect } from 'pwa-helpers'
|
||||
import { store } from '../store.js'
|
||||
import { doLogout } from '../redux/app/actions/login'
|
||||
|
||||
import '@material/mwc-icon'
|
||||
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) {
|
||||
static get properties() {
|
||||
return {
|
||||
config: { type: Object },
|
||||
urls: { type: Object }
|
||||
static get properties() {
|
||||
return {
|
||||
config: { type: Object },
|
||||
urls: { type: Object }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return [
|
||||
css`
|
||||
.mcd-menu {
|
||||
list-style: none;
|
||||
padding: 0px 0px;
|
||||
background: var(--sidetopbar);
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
static get styles() {
|
||||
return [
|
||||
css`
|
||||
* {
|
||||
--item-selected-color: var(--nav-selected-color);
|
||||
--item-selected-color-text: var(--nav-selected-color-text);
|
||||
--item-color-active: var(--nav-color-active);
|
||||
--item-color-hover: var(--nav-color-hover);
|
||||
--item-text-color: var(--nav-text-color);
|
||||
--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 {
|
||||
position: relative;
|
||||
line-height: 48px;
|
||||
outline: none;
|
||||
padding: 2px;
|
||||
list-style: none;
|
||||
}
|
||||
.s-menu {
|
||||
list-style: none;
|
||||
padding: 0px 0px;
|
||||
background: var(--sidetopbar);
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--border);
|
||||
outline: none;
|
||||
}
|
||||
`
|
||||
]
|
||||
}
|
||||
|
||||
.mcd-menu li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding-left: 20px;
|
||||
color: var(--mainmenutext);
|
||||
text-align: left;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--border);
|
||||
outline: none;
|
||||
}
|
||||
constructor() {
|
||||
super()
|
||||
this.urls = []
|
||||
}
|
||||
|
||||
.mcd-menu li a mwc-icon {
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
padding-top: 12px;
|
||||
padding-right: 9px;
|
||||
}
|
||||
|
||||
.mcd-menu li a span {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li a small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li:hover > a mwc-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mcd-menu li:hover a span {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li:hover > a {
|
||||
background: var(--menuhover);
|
||||
color: var(--mainmenutexthover);
|
||||
}
|
||||
|
||||
.mcd-menu li a.active {
|
||||
position: relative;
|
||||
color: #515151;
|
||||
background-color: var(--menuactive);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mcd-menu li a.active:before {
|
||||
content: "";
|
||||
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>
|
||||
render() {
|
||||
return html`
|
||||
<div class="s-menu">
|
||||
<side-menu>
|
||||
<side-menu-item label="MINTING DETAILS" href="/app/minting">
|
||||
<vaadin-icon icon="vaadin:info-circle" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="WALLETS" href="/app/wallet" selected>
|
||||
<vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="SEND COIN" href="/app/send-coin">
|
||||
<vaadin-icon icon="vaadin:coin-piles" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="TRADE PORTAL" href="/app/trade-portal">
|
||||
<vaadin-icon icon="vaadin:bullets" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="REWARD SHARE" href="/app/reward-share">
|
||||
<vaadin-icon icon="vaadin:share-square" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="NAME REGISTRATION" href="/app/name-registration">
|
||||
<vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="WEBSITES" href="/app/websites">
|
||||
<vaadin-icon icon="vaadin:desktop" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="DATA MANAGEMENT" href="/app/data-management">
|
||||
<vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="Q-CHAT" href="/app/q-chat">
|
||||
<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="GROUP MANAGEMENT" href="/app/group-management">
|
||||
<vaadin-icon icon="vaadin:group" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
<side-menu-item label="PUZZLES" href="/app/puzzles">
|
||||
<vaadin-icon icon="vaadin:puzzle-piece" slot="icon"></vaadin-icon>
|
||||
</side-menu-item>
|
||||
${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>
|
||||
</side-menu-item>
|
||||
</side-menu>
|
||||
</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)
|
||||
|
Loading…
x
Reference in New Issue
Block a user