You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
RTL/src/app/app.component.html

72 lines
3.8 KiB
HTML

<div fxLayout="column" id="rtl-container" class="rtl-container" [ngClass]="settings.theme" [class.horizontal]="settings.menu === 'Horizontal'" [class.compact]="settings.menuType === 'Compact'" [class.mini]="settings.menuType === 'Mini'">
<mat-sidenav-container>
<mat-sidenav perfectScrollbar *ngIf="settings.menu === 'Vertical'" [opened]="settings.flgSidenavOpened" [mode]="(settings.flgSidenavPinned) ? 'side' : 'over'"
#sideNavigation class="sidenav mat-elevation-z6 overflow-auto">
<rtl-side-navigation (ChildNavClicked)="onNavigationClicked($event)"></rtl-side-navigation>
</mat-sidenav>
<mat-sidenav-content perfectScrollbar class="overflow-auto">
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="padding-gap-x bg-primary">
<div fxLayoutAlign="center center">
<button *ngIf="settings.menu === 'Vertical'" mat-icon-button (click)="sideNavToggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<div>
<h2>Ride The Lightning <span class="font-60-percent">(Beta)</span></h2>
</div>
<div fxLayoutAlign="space-between center">
<rtl-top-menu></rtl-top-menu>
</div>
</mat-toolbar>
<div fxLayout="row" fxLayoutAlign="center center" class="bg-primary flex-wrap pubkey-info-top" rtlClipboard [payload]="information?.identity_pubkey" (copied)="copiedText($event)">
<mat-icon [ngClass]="{'icon-smaller': smallScreen}">vpn_key</mat-icon>
<div [ngClass]="{'word-break font-9px': smallScreen, 'word-break': !smallScreen}">&nbsp;{{information?.identity_pubkey}}
<mat-spinner [diameter]="20" *ngIf="flgLoading[0]" class="inline-spinner foreground"></mat-spinner>
<fa-icon [icon]="faCopy"></fa-icon>
<span [hidden]="!flgCopied">Copied</span>
</div>
</div>
<mat-toolbar color="primary" *ngIf="settings.menu === 'Horizontal'" class="padding-gap-x horizontal-nav">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="center center" class="h-100">
<rtl-horizontal-navigation></rtl-horizontal-navigation>
</div>
</mat-toolbar>
<div [ngClass]="{'mt-minus-1': smallScreen, 'inner-sidenav-content': true}">
<router-outlet></router-outlet>
</div>
<div fxLayout="row" fxLayoutAlign="center center" class="bg-primary settings-icon" (click)="settingSidenav.toggle()">
<mat-icon class="animate-settings">settings</mat-icon>
</div>
</mat-sidenav-content>
<mat-sidenav #settingSidenav position="end" class="settings mat-elevation-z6" mode="side">
<rtl-settings-nav (done)="settingSidenav.toggle()"></rtl-settings-nav>
</mat-sidenav>
</mat-sidenav-container>
<div class="rtl-spinner" *ngIf="undefined === settings.theme">
<mat-spinner color="accent"></mat-spinner>
<h4>Loading RTL...</h4>
</div>
</div>
<!-- <div perfectScrollbar id="rtl-container" class="rtl-container purple-white-light-theme">
<mat-toolbar class="bg-alternate-primary toolbar-nodes">
<div class="toolbar-node-info">Node 1</div>
<div class="toolbar-node-info">Node 2</div>
<span class="spacer"></span>
<div fxLayoutAlign="space-between center">
<rtl-top-menu></rtl-top-menu>
</div>
</mat-toolbar>
<mat-sidenav-container class="container">
<mat-sidenav #sidenav class="bg-primary mat-elevation-z24" mode="side">
<p><button mat-raised-button class="bg-accent" (click)="sidenav.toggle()">Toggle</button></p>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="bg-primary toolbar">
<span>Lightning Menu</span>
<span class="spacer"></span>
<p><button mat-raised-button class="btn-primary-darker" (click)="sidenav.toggle()">show public key</button></p>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
</div> -->