Qortal
/
qortal-ui
mirror of https://github.com/qortal/qortal-ui
4
1
Fork 4
Code Issues Projects Releases Wiki Activity
Browse Source

new menu

qdn-metadata
AlphaX-Projects 3 years ago committed by GitHub
parent
15295cb441
commit
b19f7120bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 108 additions and 237 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 345
      qortal-ui-core/src/components/sidenav-menu.js

345
qortal-ui-core/src/components/sidenav-menu.js
Unescape View File

@ -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'
class SidenavMenu extends connect(store)(LitElement) {
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;
}
.mcd-menu li {
position: relative;
line-height: 48px;
outline: none;
padding: 2px;
list-style: 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;
}
.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;
}
import '@vaadin/icon'
import '@vaadin/icons'
.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;
}
import '../functional-components/side-menu.js'
import '../functional-components/side-menu-item.js'
.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;
class SidenavMenu extends connect(store)(LitElement) {
static get properties() {
return {
config: { type: Object },
urls: { type: Object }
}
}
.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;
}
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);
}
.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:hover > ul,
.mcd-menu li ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
left:260px;
outline: none;
}
constructor() {
super()
this.urls = []
}
.mcd-menu li ul li a {
text-align: left;
border: 0;
border-bottom: 1px solid var(--border);
height: auto;
outline: none;
}
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>
`
}
.mcd-menu li ul li a mwc-icon {
display: inline-block;
margin: 0 10px 0 0;
}
firstUpdated() {
// ...
}
.mcd-menu li ul li ul {
left: 230px;
top: 0;
border: 0;
border-left: 4px solid #515151;
outline: none;
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`
`
}
}
.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;
}
stateChanged(state) {
this.config = state.config
this.urls = state.app.registeredUrls
}
.mcd-menu li ul li:hover > ul {
top: 0px;
left: 200px;
outline: none;
async logout(e) {
if(window.confirm('Are you sure you want to logout?')) {
store.dispatch(doLogout());
}
`
]
}
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>
`
}
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());
}
}
}
window.customElements.define('sidenav-menu', SidenavMenu)

Write Preview
Loading…
Cancel
Save