mirror of
https://github.com/Ride-The-Lightning/RTL.git
synced 2026-08-13 12:33:07 +02:00
UX Incomplete
UX Incomplete
This commit is contained in:
Shahana Farooqui
parent
a8c5280506
commit
e9e40a31be
42 changed files with 1195 additions and 311 deletions
|
|
@ -95,6 +95,7 @@ flgSidenavOpened=true
|
|||
flgSidenavPinned=true
|
||||
menu=Vertical
|
||||
menuType=Regular
|
||||
fontSize=Regular
|
||||
theme=dark-blue
|
||||
satsToBTC=false
|
||||
lndServerUrl=https://192.168.0.0:8080/v1
|
||||
|
|
|
|||
1
angular/7.67df24f51edb78693a9a.js
Normal file
1
angular/7.67df24f51edb78693a9a.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
254
angular/assets/images/RTL-Helmet_Trans.svg
Normal file
254
angular/assets/images/RTL-Helmet_Trans.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 114 KiB |
|
|
@ -9,8 +9,8 @@
|
|||
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
|
||||
<link rel="stylesheet" href="styles.ded33f2cb836dada7910.css"></head>
|
||||
<link rel="stylesheet" href="styles.cfd1bf8aa657426ee65b.css"></head>
|
||||
<body>
|
||||
<rtl-app></rtl-app>
|
||||
<script src="runtime.c588f78aaf36ce63d59d.js"></script><script src="polyfills-es5.763f4f23e8aee5ec234d.js" nomodule></script><script src="polyfills.e59b6f9dc696bd89cf7f.js"></script><script src="main.971e5a69649a6fda0de6.js"></script></body>
|
||||
<script src="runtime.1624511154052a66aafa.js"></script><script src="polyfills-es5.763f4f23e8aee5ec234d.js" nomodule></script><script src="polyfills.e59b6f9dc696bd89cf7f.js"></script><script src="main.7b048f9b5dcb992c42b6.js"></script></body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
!function(e){function r(r){for(var n,a,i=r[0],f=r[1],c=r[2],p=0,s=[];p<i.length;p++)o[a=i[p]]&&s.push(o[a][0]),o[a]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise(function(r,n){t=o[e]=[r,n]});r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"54f1b90d9c910a1bad05",6:"9f46ff9d0ed319a0a92b",7:"df4b7e7308f19047f695"}[e]+".js"}(e);var f=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(c);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",f.name="ChunkLoadError",f.type=n,f.request=u,t[1](f)}o[e]=void 0}};var c=setTimeout(function(){u({type:"timeout",target:i})},12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],f=i.push.bind(i);i.push=r,i=i.slice();for(var c=0;c<i.length;c++)r(i[c]);var l=f;t()}([]);
|
||||
!function(e){function r(r){for(var n,a,i=r[0],f=r[1],c=r[2],p=0,s=[];p<i.length;p++)o[a=i[p]]&&s.push(o[a][0]),o[a]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise(function(r,n){t=o[e]=[r,n]});r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"54f1b90d9c910a1bad05",6:"9f46ff9d0ed319a0a92b",7:"67df24f51edb78693a9a"}[e]+".js"}(e);var f=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(c);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",f.name="ChunkLoadError",f.type=n,f.request=u,t[1](f)}o[e]=void 0}};var c=setTimeout(function(){u({type:"timeout",target:i})},12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],f=i.push.bind(i);i.push=r,i=i.slice();for(var c=0;c<i.length;c++)r(i[c]);var l=f;t()}([]);
|
||||
1
angular/styles.cfd1bf8aa657426ee65b.css
Normal file
1
angular/styles.cfd1bf8aa657426ee65b.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -48,6 +48,7 @@ connect.setDefaultConfig = () => {
|
|||
flgSidenavPinned: true,
|
||||
menu: 'Vertical',
|
||||
menuType: 'Regular',
|
||||
fontSize: 'Regular',
|
||||
theme: 'dark-blue',
|
||||
satsToBTC: false,
|
||||
channelBackupPath: homeDir + common.path_separator + 'backup' + common.path_separator + 'node-0',
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ exports.updateUISettings = (req, res, next) => {
|
|||
node.Settings.flgSidenavPinned = req.body.updatedSettings.flgSidenavPinned;
|
||||
node.Settings.menu = req.body.updatedSettings.menu;
|
||||
node.Settings.menuType = req.body.updatedSettings.menuType;
|
||||
node.Settings.fontSize = req.body.updatedSettings.fontSize;
|
||||
node.Settings.theme = req.body.updatedSettings.theme;
|
||||
node.Settings.satsToBTC = req.body.updatedSettings.satsToBTC;
|
||||
}
|
||||
|
|
@ -121,6 +122,7 @@ exports.updateUISettings = (req, res, next) => {
|
|||
settingsTemp.flgSidenavPinned = req.body.updatedSettings.flgSidenavPinned;
|
||||
settingsTemp.menu = req.body.updatedSettings.menu;
|
||||
settingsTemp.menuType = req.body.updatedSettings.menuType;
|
||||
settingsTemp.fontSize = req.body.updatedSettings.fontSize;
|
||||
settingsTemp.theme = req.body.updatedSettings.theme;
|
||||
settingsTemp.satsToBTC = req.body.updatedSettings.satsToBTC;
|
||||
delete config.Settings;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@ menu=Vertical
|
|||
;Set by RTL
|
||||
menuType=Regular
|
||||
;Set by RTL
|
||||
fontSize=Regular
|
||||
;Set by RTL
|
||||
theme=dark-blue
|
||||
;Set by RTL
|
||||
satsToBTC=false
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ Ensure that the follow values are correct per your config:
|
|||
"flgSidenavPinned": true,
|
||||
"menu": "Vertical",
|
||||
"menuType": "Regular",
|
||||
"fontSize": "Regular",
|
||||
"theme": "dark-pink",
|
||||
"satsToBTC": false,
|
||||
"bitcoindConfigPath": "",
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"menu": "Vertical",
|
||||
"menuType": "Regular",
|
||||
"theme": "dark-blue",
|
||||
"fontSize":"Regular",
|
||||
"satsToBTC": "false",
|
||||
"channelBackupPath": "C:\\RTL\\backup\\node-1",
|
||||
"bitcoindConfigPath": "<Optional: path of bitcoind.conf path if available locally>",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ flgSidenavOpened=true
|
|||
flgSidenavPinned=true
|
||||
menu=Vertical
|
||||
menuType=Regular
|
||||
fontSize=Regular
|
||||
theme=dark-blue
|
||||
satsToBTC=false
|
||||
channelBackupPath=C:\RTL\backup
|
||||
|
|
|
|||
|
|
@ -1,36 +1,33 @@
|
|||
<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'">
|
||||
<div fxLayout="column" id="rtl-container" class="rtl-container" [ngClass]="[settings.theme, settings.fontSize]" [class.horizontal]="settings.menu === 'Horizontal'" [class.compact]="settings.menuType === 'Compact'" [class.mini]="settings.menuType === 'Mini'">
|
||||
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="padding-gap-x bg-primary">
|
||||
<div fxLayoutAlign="center center">
|
||||
<button *ngIf="settings.menu === 'Vertical'" class="top-toolbar-icon" mat-icon-button (click)="sideNavToggle()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<svg *ngIf="settings.menu === 'Vertical' && settings.menuType !== 'Mini' && !smallScreen" class="top-toolbar-icon icon-pinned mr-1" viewBox="0 0 24 24"
|
||||
(click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
|
||||
<path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
|
||||
<path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
|
||||
</svg>
|
||||
<div *ngIf="appConfig.nodes.length > 1" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div *ngFor="let node of appConfig.nodes" tabindex="1" fxFlex="100">
|
||||
<button [ngClass]="{'selected-node':node.index === selNode.index, 'app-config-nodes': true}" (click)="onSelectionChange(node)" fxLayoutAlign="center center" mat-button type="button">{{node.lnNode}} ({{node.lnImplementation}})</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayoutAlign="space-between center">
|
||||
<rtl-top-menu></rtl-top-menu>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<mat-toolbar color="primary" *ngIf="settings.menu === 'Horizontal'" class="padding-gap-x horizontal-nav">
|
||||
<rtl-horizontal-navigation fxLayout="row" fxFlex="100" fxLayoutAlign="start center" class="h-100"></rtl-horizontal-navigation>
|
||||
</mat-toolbar>
|
||||
<mat-sidenav-container>
|
||||
<mat-sidenav perfectScrollbar *ngIf="settings.menu === 'Vertical'" [opened]="settings.flgSidenavOpened" [mode]="(settings.flgSidenavPinned) ? 'side' : 'over'"
|
||||
<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}"> {{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>
|
||||
|
|
@ -47,26 +44,3 @@
|
|||
<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> -->
|
||||
|
|
@ -2,3 +2,10 @@
|
|||
display: inline-flex !important;
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
.icon-pinned {
|
||||
padding-left: 16px;
|
||||
width:24px;
|
||||
height:24px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild, HostListener }
|
|||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil, filter } from 'rxjs/operators';
|
||||
import { faCopy } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { Store } from '@ngrx/store';
|
||||
import { Actions } from '@ngrx/effects';
|
||||
|
|
@ -23,7 +22,6 @@ import * as fromRTLReducer from './store/rtl.reducers';
|
|||
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||
@ViewChild('sideNavigation', { static: false }) sideNavigation: any;
|
||||
@ViewChild('settingSidenav', { static: true }) settingSidenav: any;
|
||||
faCopy = faCopy;
|
||||
public selNode: LightningNode;
|
||||
public settings: Settings;
|
||||
public information: GetInfoRoot = {};
|
||||
|
|
@ -137,6 +135,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
this.logger.info('Copied Text: ' + payload);
|
||||
}
|
||||
|
||||
onSelectionChange(selNodeValue: LightningNode) {
|
||||
this.selNode = selNodeValue;
|
||||
this.store.dispatch(new RTLActions.OpenSpinner('Updating Selected Node...'));
|
||||
this.store.dispatch(new RTLActions.SetSelelectedNode({ lnNode: selNodeValue, isInitialSetup: false }));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.unsubs.forEach(unsub => {
|
||||
unsub.next();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { ModuleWithProviders } from '@angular/core';
|
||||
|
||||
import { AppSettingsComponent } from './shared/components/app-settings/app-settings.component';
|
||||
import { NotFoundComponent } from './shared/components/not-found/not-found.component';
|
||||
import { ServerConfigComponent } from './shared/components/server-config/server-config.component';
|
||||
import { HelpComponent } from './shared/components/help/help.component';
|
||||
|
|
@ -12,6 +13,7 @@ export const routes: Routes = [
|
|||
{ path: 'lnd', loadChildren: () => import('./lnd/lnd.module').then(childModule => childModule.LNDModule), canActivate: [AuthGuard] },
|
||||
{ path: 'cl', loadChildren: () => import('./clightning/cl.module').then(childModule => childModule.CLModule), canActivate: [AuthGuard] },
|
||||
{ path: 'sconfig', component: ServerConfigComponent, canActivate: [AuthGuard] },
|
||||
{ path: 'settings', component: AppSettingsComponent, canActivate: [AuthGuard] },
|
||||
{ path: 'help', component: HelpComponent },
|
||||
{ path: 'login', component: SigninComponent },
|
||||
{ path: 'ssoerror', component: SsoFailedComponent },
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
</mat-card-content>
|
||||
<mat-icon *ngIf="information?.synced_to_chain; else notSynced" class="size-30 green sync-to-chain">check_circle</mat-icon>
|
||||
<ng-template #notSynced>
|
||||
<mat-icon class="size-30 red">cancel</mat-icon>
|
||||
<mat-icon class="size-triple red">cancel</mat-icon>
|
||||
</ng-template>
|
||||
</mat-card-content>
|
||||
<mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
<div fxLayout="row" class="padding-gap page-title">
|
||||
<fa-icon [icon]="faTools" class="fa-icon-small mr-1"></fa-icon>
|
||||
<span>Application Settings</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div fxLayout="column">
|
||||
<div *ngIf="selNode.lnImplementation !== 'CLT'">
|
||||
<h4>Currency Unit</h4>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<span>{{currencyUnit}}</span>
|
||||
<mat-slide-toggle [checked]="selNode?.settings?.satsToBTC" (change)="toggleSettings('satsToBTC')"
|
||||
labelPosition="before"></mat-slide-toggle>
|
||||
</div>
|
||||
<mat-divider class="mt-2"></mat-divider>
|
||||
</div>
|
||||
<div *ngIf="showSettingOption">
|
||||
<h4>Menu</h4>
|
||||
<mat-radio-group [(ngModel)]="selectedMenu" (change)="chooseMenu()">
|
||||
<mat-radio-button *ngFor="let menu of menus" [value]="menu">{{menu}}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<mat-divider class="mt-2"></mat-divider>
|
||||
</div>
|
||||
<h4>Menu Type</h4>
|
||||
<mat-radio-group [(ngModel)]="selectedMenuType" (change)="chooseMenuType()">
|
||||
<mat-radio-button *ngFor="let menuType of menuTypes" [value]="menuType">{{menuType}}</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<mat-divider class="mt-2"></mat-divider>
|
||||
<div *ngIf="showSettingOption">
|
||||
<div fxLayout="column">
|
||||
<h4>Sidenav Options</h4>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<span>Opened</span>
|
||||
<mat-slide-toggle [checked]="selNode?.settings?.flgSidenavOpened"
|
||||
(change)="toggleSettings('flgSidenavOpened')" labelPosition="before"></mat-slide-toggle>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<span>Pinned</span>
|
||||
<mat-slide-toggle [checked]="selNode?.settings?.flgSidenavPinned"
|
||||
(change)="toggleSettings('flgSidenavPinned')" labelPosition="before"></mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="mt-2"></mat-divider>
|
||||
</div>
|
||||
<h4>Skins</h4>
|
||||
<div fxLayout="row" fxLayoutAlign="start start" class="p-0">
|
||||
<div class="skin dark-purple m-1px" (click)="changeTheme('purple-white-dark-theme')"></div>
|
||||
<div class="skin dark-blue m-1px" (click)="changeTheme('dark-blue')"></div>
|
||||
<div class="skin dark-green m-1px" (click)="changeTheme('dark-green')"></div>
|
||||
<div class="skin dark-pink m-1px" (click)="changeTheme('dark-pink')"></div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start start" class="p-0">
|
||||
<div class="skin light-purple m-1px" (click)="changeTheme('purple-white-light-theme')"></div>
|
||||
<div class="skin light-blue m-1px" (click)="changeTheme('light-blue')"></div>
|
||||
<div class="skin light-teal m-1px" (click)="changeTheme('light-teal')"></div>
|
||||
<div class="skin light-blue-gray m-1px" (click)="changeTheme('light-blue-gray')"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex="15" fxLayoutAlign="start start">
|
||||
<button fxFlex="90" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onClose()"
|
||||
tabindex="12">Update</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AppSettingsComponent } from './app-settings.component';
|
||||
|
||||
describe('AppSettingsComponent', () => {
|
||||
let component: AppSettingsComponent;
|
||||
let fixture: ComponentFixture<AppSettingsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ AppSettingsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AppSettingsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
import { faTools } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { LightningNode, RTLConfiguration, GetInfoRoot } from '../../models/RTLconfig';
|
||||
import { LoggerService } from '../../services/logger.service';
|
||||
|
||||
import * as RTLActions from '../../../store/rtl.actions';
|
||||
import * as fromRTLReducer from '../../../store/rtl.reducers';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-app-settings',
|
||||
templateUrl: './app-settings.component.html',
|
||||
styleUrls: ['./app-settings.component.scss']
|
||||
})
|
||||
export class AppSettingsComponent implements OnInit, OnDestroy {
|
||||
public faTools = faTools;
|
||||
public selNode: LightningNode;
|
||||
public information: GetInfoRoot = {};
|
||||
public menus = ['Vertical', 'Horizontal'];
|
||||
public menuTypes = ['Regular', 'Compact', 'Mini'];
|
||||
public selectedMenu: string;
|
||||
public selectedMenuType: string;
|
||||
public currencyUnit = 'BTC';
|
||||
public showSettingOption = true;
|
||||
public appConfig: RTLConfiguration;
|
||||
|
||||
unsubs: Array<Subject<void>> = [new Subject(), new Subject()];
|
||||
@Output('done') done: EventEmitter<void> = new EventEmitter();
|
||||
|
||||
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.store.select('root')
|
||||
.pipe(takeUntil(this.unsubs[0]))
|
||||
.subscribe((rtlStore) => {
|
||||
this.appConfig = rtlStore.appConfig;
|
||||
this.selNode = rtlStore.selNode;
|
||||
this.selectedMenu = this.selNode.settings.menu;
|
||||
this.selectedMenuType = this.selNode.settings.menuType;
|
||||
if (window.innerWidth <= 768) {
|
||||
this.selNode.settings.menu = 'Vertical';
|
||||
this.selNode.settings.flgSidenavOpened = false;
|
||||
this.selNode.settings.flgSidenavPinned = false;
|
||||
this.showSettingOption = false;
|
||||
}
|
||||
this.information = rtlStore.nodeData;
|
||||
this.currencyUnit = (undefined !== this.information && undefined !== this.information.currency_unit) ? this.information.currency_unit : 'BTC';
|
||||
this.logger.info(rtlStore);
|
||||
});
|
||||
}
|
||||
|
||||
public chooseMenu() {
|
||||
this.selNode.settings.menu = this.selectedMenu;
|
||||
}
|
||||
|
||||
public chooseMenuType() {
|
||||
this.selNode.settings.menuType = this.selectedMenuType;
|
||||
}
|
||||
|
||||
toggleSettings(toggleField: string) {
|
||||
this.selNode.settings[toggleField] = !this.selNode.settings[toggleField];
|
||||
if (toggleField === 'satsToBTC') {
|
||||
this.store.dispatch(new RTLActions.SetChildNodeSettings({channelBackupPath: this.selNode.settings.channelBackupPath, satsToBTC: this.selNode.settings.satsToBTC}));
|
||||
this.store.dispatch(new RTLActions.SetChildNodeSettingsCL({channelBackupPath: this.selNode.settings.channelBackupPath, satsToBTC: this.selNode.settings.satsToBTC}));
|
||||
}
|
||||
}
|
||||
|
||||
changeTheme(newTheme: string) {
|
||||
this.selNode.settings.theme = newTheme;
|
||||
}
|
||||
|
||||
onClose() {
|
||||
this.logger.info(this.selNode.settings);
|
||||
this.store.dispatch(new RTLActions.SaveSettings(this.selNode.settings));
|
||||
this.done.emit();
|
||||
}
|
||||
|
||||
onSelectionChange(selNodeValue: LightningNode) {
|
||||
this.selNode = selNodeValue;
|
||||
this.store.dispatch(new RTLActions.OpenSpinner('Updating Selected Node...'));
|
||||
this.store.dispatch(new RTLActions.SetSelelectedNode({ lnNode: selNodeValue, isInitialSetup: false }));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.unsubs.forEach(unsub => {
|
||||
unsub.next();
|
||||
unsub.complete();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,19 +1,28 @@
|
|||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<div *ngFor="let menuNode of menuNodes">
|
||||
<button mat-button *ngIf="undefined === menuNode.children" class="horizontal-button" routerLinkActive="h-active-link" [routerLinkActiveOptions]="{exact: true}" routerLink="{{menuNode.link}}" matTooltip="{{menuNode.name}}" matTooltipPosition="above" (click)="onClick(menuNode)">
|
||||
<mat-icon class="mat-icon-36">{{menuNode.icon}}</mat-icon>
|
||||
</button>
|
||||
<div *ngIf="undefined !== menuNode.children" fxLayoutAlign="center center">
|
||||
<button mat-button class="horizontal-button" matTooltip="{{menuNode.name}}" matTooltipPosition="above">
|
||||
<mat-icon [matMenuTriggerFor]="childMenu" class="mat-icon-36">{{menuNode.icon}}</mat-icon>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
|
||||
<div fxLayoutAlign="start start">
|
||||
<div *ngFor="let menuNode of menuNodes">
|
||||
<button mat-button *ngIf="undefined === menuNode.children" class="horizontal-button" routerLinkActive="h-active-link" [routerLinkActiveOptions]="{exact: true}" routerLink="{{menuNode.link}}" (click)="onClick(menuNode)">
|
||||
<fa-icon [icon]="menuNode.icon" class="fa-icon-small mr-2"></fa-icon>
|
||||
<span>{{menuNode.name}}</span>
|
||||
</button>
|
||||
<mat-menu #childMenu="matMenu" xPosition="after" overlapTrigger="false" class="child-menu">
|
||||
<div *ngFor="let childNode of menuNode.children">
|
||||
<button mat-button class="horizontal-button bg-primary p-0" fxFlex="100" [routerLinkActive]="'h-active-link'" routerLink="{{childNode.link}}" [routerLinkActiveOptions]="{exact: true}">
|
||||
<mat-icon matTooltip="{{childNode.name}}" matTooltipPosition="after" class="mat-icon-36">{{childNode.icon}}<span *ngIf="childNode.name === 'Pending'" [matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="accent"></span></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
<div *ngIf="undefined !== menuNode.children" fxLayoutAlign="start start" [matMenuTriggerFor]="childMenu">
|
||||
<button mat-button class="horizontal-button">
|
||||
<fa-icon [icon]="menuNode.icon" class="fa-icon-small mr-2"></fa-icon>
|
||||
<span>{{menuNode.name}}</span>
|
||||
</button>
|
||||
<mat-menu #childMenu="matMenu" xPosition="after" overlapTrigger="false" class="child-menu">
|
||||
<div *ngFor="let childNode of menuNode.children">
|
||||
<button mat-button class="horizontal-button bg-primary px-2" fxFlex="100" fxLayoutAlign="start start" [routerLinkActive]="'h-active-link'" routerLink="{{childNode.link}}" [routerLinkActiveOptions]="{exact: true}">
|
||||
<fa-icon matTooltip="{{childNode.name}}" [icon]="childNode.icon" class="fa-icon-small mr-2"></fa-icon>
|
||||
<span>{{childNode.name}}<span *ngIf="childNode.name === 'Peers/Channels'" [matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="accent"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayoutAlign="end end" style="align-self: center;">
|
||||
<button mat-raised-button fxLayoutAlign="center center" class="horizontal-button-show" tabindex="20" type="click">Show Public Key</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { takeUntil, filter } from 'rxjs/operators';
|
|||
import { Store } from '@ngrx/store';
|
||||
import { Actions } from '@ngrx/effects';
|
||||
|
||||
import { faEject } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { LoggerService } from '../../../services/logger.service';
|
||||
import { MENU_DATA } from '../../../models/navMenu';
|
||||
|
||||
|
|
@ -43,14 +45,14 @@ export class HorizontalNavigationComponent implements OnInit {
|
|||
filter((action) => action.type === RTLActions.SIGNOUT || action.type === RTLActions.SIGNIN)
|
||||
).subscribe((action) => {
|
||||
if (action.type === RTLActions.SIGNIN) {
|
||||
this.menuNodes.push({id: 200, parentId: 0, name: 'Logout', icon: 'eject'});
|
||||
this.menuNodes.push({id: 200, parentId: 0, name: 'Logout', icon: faEject});
|
||||
}
|
||||
if (action.type === RTLActions.SIGNOUT) {
|
||||
this.menuNodes.pop();
|
||||
}
|
||||
});
|
||||
if (sessionStorage.getItem('token')) {
|
||||
this.menuNodes.push({id: 200, parentId: 0, name: 'Logout', icon: 'eject'});
|
||||
this.menuNodes.push({id: 200, parentId: 0, name: 'Logout', icon: faEject});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,36 +1,25 @@
|
|||
<mat-toolbar color="primary" [fxLayoutAlign] = "settings.menuType === 'Mini' ? 'center center' : 'space-between center'">
|
||||
<a *ngIf="settings.menuType === 'Mini'" routerLink="{{navMenus.data[0].link}}" class="logo padding-gap-x mat-elevation-z6">R</a>
|
||||
<a *ngIf="settings.menuType !== 'Mini'" routerLink="{{navMenus.data[0].link}}" class="logo">RTL</a>
|
||||
<svg *ngIf="settings.menuType !== 'Mini' && !smallScreen" style="width:24px;height:24px;cursor:pointer;" viewBox="0 0 24 24"
|
||||
(click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
|
||||
<path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
|
||||
<path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
|
||||
</svg>
|
||||
</mat-toolbar>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="lnd-info pl-2" *ngIf="settings.menuType !== 'Mini'">
|
||||
<div fxLayout="column">
|
||||
<p class="name">Alias: <mat-spinner [diameter]="20" *ngIf="flgLoading" class="inline-spinner"></mat-spinner>{{information?.alias}}</p>
|
||||
<p>Chain: <mat-spinner [diameter]="20" *ngIf="flgLoading" class="inline-spinner"></mat-spinner>{{informationChain.chain | titlecase}}<span> [{{informationChain.network | titlecase}}]</span></p>
|
||||
<p class="name">LN Version: <mat-spinner [diameter]="20" *ngIf="flgLoading" class="inline-spinner"></mat-spinner>{{information?.version}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" class="example-tree" *ngIf="settings.menuType !== 'Compact'">
|
||||
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" class="mt-2"
|
||||
*ngIf="settings.menuType === 'Regular'">
|
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
|
||||
<div (click)="onChildNavClicked(node)">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
|
||||
<mat-icon class="mr-1" matTooltip="{{node.name}}" matTooltipPosition="right" [matTooltipDisabled]="settings.menuType !== 'Mini'">{{node.icon}}<span *ngIf="node.name === 'Pending' && settings.menuType === 'Mini'" [matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="accent"></span></mat-icon>
|
||||
<span *ngIf="settings.menuType !== 'Mini'">{{node.name}}<span *ngIf="node.name === 'Pending'" [matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="accent"></span></span>
|
||||
<fa-icon [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon>
|
||||
<span *ngIf="settings.menuType === 'Regular'">{{node.name}}</span><span
|
||||
*ngIf="node.name === 'Peers/Channels'" [matBadgeHidden]="numPendingChannels<1"
|
||||
matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="primary"></span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tree-node>
|
||||
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
|
||||
<div fxFlex="89" fxLayoutAlign="start center">
|
||||
<mat-icon class="mr-1" matTooltip="{{node.name}}" matTooltipPosition="right" [matTooltipDisabled]="settings.menuType !== 'Mini'">{{node.icon}}</mat-icon><span *ngIf="settings.menuType !== 'Mini'">{{node.name}}</span>
|
||||
<fa-icon [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon>
|
||||
<span>{{node.name}}</span>
|
||||
</div>
|
||||
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name" fxLayoutAlign="end center">
|
||||
<mat-icon class="mat-icon-rtl-mirror"> {{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
|
||||
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name"
|
||||
fxLayoutAlign="end center">
|
||||
<mat-icon class="mat-icon-rtl-mirror">
|
||||
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
|
||||
|
|
@ -38,37 +27,80 @@
|
|||
</div>
|
||||
</mat-nested-tree-node>
|
||||
</mat-tree>
|
||||
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType !== 'Compact' && showLogout" class="mt-minus-1">
|
||||
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout"
|
||||
*ngIf="settings.menuType === 'Regular' && showLogout" class="mt-minus-1">
|
||||
<mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)">
|
||||
<mat-icon class="mr-1" matTooltip="{{node.name}}" matTooltipPosition="right" [matTooltipDisabled]="settings.menuType !== 'Mini'">{{node.icon}}</mat-icon>
|
||||
<span *ngIf="settings.menuType !== 'Mini'">{{node.name}}</span>
|
||||
</mat-tree-node>
|
||||
</mat-tree>
|
||||
|
||||
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" class="example-tree" *ngIf="settings.menuType === 'Compact'">
|
||||
<mat-tree-node fxLayout="column" matTreeNodeToggle fxLayoutAlign="center center" *matTreeNodeDef="let node" (click)="onChildNavClicked(node)" routerLinkActive="active-link" routerLink="{{node.link}}">
|
||||
<mat-icon class="mat-icon-36">{{node.icon}}</mat-icon>
|
||||
<span>{{node.name}}<span *ngIf="node.name === 'Pending'" [matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="accent"></span></span>
|
||||
</mat-tree-node>
|
||||
|
||||
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
|
||||
<div class="ml-8" fxLayout="column" fxLayoutAlign="center center" class="mat-nested-tree-node-parent">
|
||||
<mat-icon class="mat-icon-36">{{node.icon}}</mat-icon>
|
||||
<span>{{node.name}}</span>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayoutAlign="center center">
|
||||
<button mat-icon-button [attr.aria-label]="'toggle ' + node.name">
|
||||
<mat-icon class="mat-icon-rtl-mirror"> {{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
|
||||
<ng-container matTreeNodeOutlet></ng-container>
|
||||
</div>
|
||||
</mat-nested-tree-node>
|
||||
</mat-tree>
|
||||
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType === 'Compact' && showLogout" class="mt-minus-1">
|
||||
<mat-tree-node fxLayout="column" fxLayoutAlign="center center" *matTreeNodeDef="let node" (click)="onClick(node)">
|
||||
<mat-icon class="mat-icon-36">{{node.icon}}</mat-icon>
|
||||
<fa-icon [icon]="node.icon" class="fa-icon-small mr-4" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
|
||||
<span>{{node.name}}</span>
|
||||
</mat-tree-node>
|
||||
</mat-tree>
|
||||
|
||||
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" class="mt-2"
|
||||
*ngIf="settings.menuType === 'Compact'">
|
||||
<mat-tree-node fxLayout="row" matTreeNodeToggle fxLayoutAlign="start center" *matTreeNodeDef="let node"
|
||||
(click)="onChildNavClicked(node)" routerLinkActive="active-link" routerLink="{{node.link}}">
|
||||
<fa-icon [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
|
||||
<span>{{node.name}}<span *ngIf="node.name === 'Peers/Channels'" [matBadgeHidden]="numPendingChannels<1"
|
||||
matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="primary"></span></span>
|
||||
</mat-tree-node>
|
||||
|
||||
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
|
||||
<div fxFlex="89" fxLayoutAlign="start center">
|
||||
<fa-icon [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
|
||||
<span>{{node.name}}</span>
|
||||
</div>
|
||||
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name"
|
||||
fxLayoutAlign="end center">
|
||||
<mat-icon class="mat-icon-rtl-mirror">
|
||||
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
|
||||
<ng-container matTreeNodeOutlet></ng-container>
|
||||
</div>
|
||||
</mat-nested-tree-node>
|
||||
</mat-tree>
|
||||
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout"
|
||||
*ngIf="settings.menuType === 'Compact' && showLogout" class="mt-minus-1">
|
||||
<mat-tree-node fxLayout="row" fxLayoutAlign="start center" *matTreeNodeDef="let node"
|
||||
(click)="onClick(node)">
|
||||
<fa-icon [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
|
||||
<span>{{node.name}}</span>
|
||||
</mat-tree-node>
|
||||
</mat-tree>
|
||||
|
||||
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" class="mt-2"
|
||||
*ngIf="settings.menuType === 'Mini'">
|
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
|
||||
<div (click)="onChildNavClicked(node)">
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
|
||||
<fa-icon [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"><span
|
||||
*ngIf="node.name === 'Peers/Channels'"
|
||||
[matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false"
|
||||
matBadgeColor="primary"></span></fa-icon>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tree-node>
|
||||
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
|
||||
<div fxFlex="89" fxLayoutAlign="start center">
|
||||
<fa-icon [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
|
||||
</div>
|
||||
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name"
|
||||
fxLayoutAlign="end center">
|
||||
<mat-icon class="mat-icon-rtl-mirror">
|
||||
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
|
||||
<ng-container matTreeNodeOutlet></ng-container>
|
||||
</div>
|
||||
</mat-nested-tree-node>
|
||||
</mat-tree>
|
||||
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout"
|
||||
*ngIf="settings.menuType === 'Mini' && showLogout" class="mt-minus-1">
|
||||
<mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)" fxLayoutAlign="start center">
|
||||
<fa-icon [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
|
||||
</mat-tree-node>
|
||||
</mat-tree>
|
||||
|
|
@ -8,11 +8,12 @@ import { environment } from '../../../../../environments/environment';
|
|||
|
||||
import { NestedTreeControl } from '@angular/cdk/tree';
|
||||
import { MatTreeNestedDataSource } from '@angular/material/tree';
|
||||
import { faEject } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { LightningNode, Settings, GetInfoRoot } from '../../../models/RTLconfig';
|
||||
import { LoggerService } from '../../../services/logger.service';
|
||||
import { GetInfoChain } from '../../../models/lndModels';
|
||||
import { MenuChildNode, FlatMenuNode, MENU_DATA } from '../../../models/navMenu';
|
||||
import { MenuChildNode, MENU_DATA } from '../../../models/navMenu';
|
||||
|
||||
import { RTLEffects } from '../../../../store/rtl.effects';
|
||||
import * as RTLActions from '../../../../store/rtl.actions';
|
||||
|
|
@ -25,13 +26,14 @@ import * as fromRTLReducer from '../../../../store/rtl.reducers';
|
|||
})
|
||||
export class SideNavigationComponent implements OnInit, OnDestroy {
|
||||
@Output() ChildNavClicked = new EventEmitter<any>();
|
||||
faEject = faEject;
|
||||
public selNode: LightningNode;
|
||||
public settings: Settings;
|
||||
public version = '';
|
||||
public information: GetInfoRoot = {};
|
||||
public informationChain: GetInfoChain = {};
|
||||
public flgLoading = true;
|
||||
public logoutNode = [{id: 200, parentId: 0, name: 'Logout', icon: 'eject'}];
|
||||
public logoutNode = [{id: 200, parentId: 0, name: 'Logout', icon: faEject}];
|
||||
public showLogout = false;
|
||||
public numPendingChannels = 0;
|
||||
public smallScreen = false;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<mat-menu #topMenu="matMenu" [overlapTrigger]="false" class="top-menu">
|
||||
<p mat-menu-item>
|
||||
<mat-icon>publish</mat-icon>
|
||||
<fa-icon [icon]="faCodeBranch" class="fa-icon-small mr-4"></fa-icon>
|
||||
<span>Version: {{version}}</span>
|
||||
</p>
|
||||
<a mat-menu-item routerLink="/sconfig">
|
||||
<mat-icon>perm_data_setting</mat-icon>
|
||||
<fa-icon [icon]="faCog" class="fa-icon-small mr-4"></fa-icon>
|
||||
<span routerLink="/sconfig">Node Config</span>
|
||||
</a>
|
||||
<a mat-menu-item routerLink="/help">
|
||||
<mat-icon>help</mat-icon>
|
||||
<fa-icon [icon]="faLifeRing" class="fa-icon-small mr-4"></fa-icon>
|
||||
<span routerLink="/help">Help</span>
|
||||
</a>
|
||||
<a *ngIf="showLogout" mat-menu-item (click)="onClick()">
|
||||
<mat-icon>eject</mat-icon>
|
||||
<fa-icon [icon]="faEject" class="fa-icon-small mr-4"></fa-icon>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</mat-menu>
|
||||
|
||||
<button mat-icon-button [matMenuTriggerFor]="topMenu">
|
||||
<mat-icon>account_circle</mat-icon>
|
||||
<button mat-icon-button [matMenuTriggerFor]="topMenu" class="top-toolbar-icon">
|
||||
<img src="assets/images/RTL-Helmet_Trans.svg" alt="RTL Logo" style="width:24px;">
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { environment } from '../../../../../environments/environment';
|
|||
import { RTLEffects } from '../../../../store/rtl.effects';
|
||||
import * as fromRTLReducer from '../../../../store/rtl.reducers';
|
||||
import * as RTLActions from '../../../../store/rtl.actions';
|
||||
import { faCodeBranch, faCog, faLifeRing, faEject } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-top-menu',
|
||||
|
|
@ -20,6 +21,10 @@ import * as RTLActions from '../../../../store/rtl.actions';
|
|||
})
|
||||
export class TopMenuComponent implements OnInit, OnDestroy {
|
||||
public selNode: LightningNode;
|
||||
public faCodeBranch = faCodeBranch;
|
||||
public faCog = faCog;
|
||||
public faLifeRing = faLifeRing;
|
||||
public faEject = faEject;
|
||||
public version = '';
|
||||
public information: GetInfoRoot = {};
|
||||
public informationChain: GetInfoChain = {};
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export class Settings {
|
|||
public flgSidenavPinned: boolean,
|
||||
public menu: string,
|
||||
public menuType: string,
|
||||
public fontSize: string,
|
||||
public theme: string,
|
||||
public satsToBTC: boolean,
|
||||
public bitcoindConfigPath?: string,
|
||||
|
|
|
|||
|
|
@ -1,28 +1,18 @@
|
|||
import { faTachometerAlt, faLink, faBolt, faExchangeAlt, faUsers, faProjectDiagram, faCog, faLifeRing, faSearch, faTools } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export const MENU_DATA: MenuRootNode = {
|
||||
LNDChildren: [
|
||||
{id: 1, parentId: 0, name: 'Home', icon: 'home', link: '/lnd/home'},
|
||||
{id: 2, parentId: 0, name: 'LND Wallet', icon: 'account_balance_wallet', link: '/lnd/transsendreceive', children: [
|
||||
{id: 21, parentId: 2, name: 'Send/Receive', icon: 'compare_arrows', link: '/lnd/transsendreceive'},
|
||||
{id: 22, parentId: 2, name: 'List Transactions', icon: 'list_alt', link: '/lnd/translist'},
|
||||
{id: 1, parentId: 0, name: 'Dashboard', icon: faTachometerAlt, link: '/lnd/home'},
|
||||
{id: 2, parentId: 0, name: 'On-chain', icon: faLink, link: '/lnd/transsendreceive'},
|
||||
{id: 3, parentId: 0, name: 'Lightning', icon: faBolt, link: '/lnd/chnlmanage', children: [
|
||||
{id: 31, parentId: 3, name: 'Transactions', icon: faExchangeAlt, link: '/lnd/chnlmanage'},
|
||||
{id: 32, parentId: 3, name: 'Peers/Channels', icon: faUsers, link: '/lnd/chnlpending'},
|
||||
{id: 33, parentId: 3, name: 'Lookup', icon: faSearch, link: '/lnd/chnlclosed'},
|
||||
{id: 34, parentId: 3, name: 'Routing', icon: faProjectDiagram, link: '/lnd/chnlbackup'}
|
||||
]},
|
||||
{id: 3, parentId: 0, name: 'Peers', icon: 'group', link: '/lnd/peers'},
|
||||
{id: 4, parentId: 0, name: 'Channels', icon: 'settings_ethernet', link: '/lnd/chnlmanage', children: [
|
||||
{id: 41, parentId: 4, name: 'Management', icon: 'subtitles', link: '/lnd/chnlmanage'},
|
||||
{id: 42, parentId: 4, name: 'Pending', icon: 'watch', link: '/lnd/chnlpending'},
|
||||
{id: 43, parentId: 4, name: 'Closed', icon: 'watch_later', link: '/lnd/chnlclosed'},
|
||||
{id: 44, parentId: 4, name: 'Backup', icon: 'cloud_circle', link: '/lnd/chnlbackup'},
|
||||
{id: 45, parentId: 4, name: 'Restore', icon: 'restore', link: '/lnd/chnlrestore'}
|
||||
]},
|
||||
{id: 5, parentId: 0, name: 'Payments', icon: 'payment', link: '/lnd/paymentsend', children: [
|
||||
{id: 51, parentId: 5, name: 'Send', icon: 'send', link: '/lnd/paymentsend'},
|
||||
{id: 52, parentId: 5, name: 'Query Routes', icon: 'explore', link: '/lnd/queryroutes'}
|
||||
]},
|
||||
{id: 6, parentId: 0, name: 'Invoices', icon: 'receipt', link: '/lnd/invoices'},
|
||||
{id: 7, parentId: 0, name: 'Forwarding History', icon: 'timeline', link: '/lnd/switch'},
|
||||
{id: 8, parentId: 0, name: 'Routing Peers', icon: 'group_work', link: '/lnd/routingpeers'},
|
||||
{id: 9, parentId: 0, name: 'Lookups', icon: 'search', link: '/lnd/lookups'},
|
||||
{id: 10, parentId: 0, name: 'Node Config', icon: 'perm_data_setting', link: '/sconfig'},
|
||||
{id: 11, parentId: 0, name: 'Help', icon: 'help', link: '/help'}
|
||||
{id: 4, parentId: 0, name: 'Advanced', icon: faCog, link: '/sconfig'},
|
||||
{id: 5, parentId: 0, name: 'Settings', icon: faTools, link: '/settings'},
|
||||
{id: 6, parentId: 0, name: 'Help', icon: faLifeRing, link: '/help'}
|
||||
],
|
||||
CLChildren: [
|
||||
{id: 1, parentId: 0, name: 'Home', icon: 'home', link: '/cl/home'},
|
||||
|
|
@ -50,11 +40,7 @@ export class MenuChildNode {
|
|||
id: number;
|
||||
parentId: number;
|
||||
name?: string;
|
||||
icon?: string;
|
||||
icon?: any | string;
|
||||
link?: any;
|
||||
children?: MenuChildNode[];
|
||||
}
|
||||
|
||||
export class FlatMenuNode {
|
||||
constructor(public expandable: boolean, public level: number, public id: number, public parentId: number, public name: string, public icon: string, public link: string) {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
import { QRCodeModule } from 'angularx-qrcode';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
|
||||
import { AppSettingsComponent } from './components/app-settings/app-settings.component';
|
||||
import { AlertMessageComponent } from './components/alert-message/alert-message.component';
|
||||
import { ConfirmationMessageComponent } from './components/confirmation-message/confirmation-message.component';
|
||||
import { SpinnerDialogComponent } from './components/spinner-dialog/spinner-dialog.component';
|
||||
|
|
@ -101,6 +102,7 @@ import { RemoveLeadingZerosPipe } from './pipes/remove-leading-zero.pipe';
|
|||
MatBadgeModule,
|
||||
MatPaginatorModule,
|
||||
MatStepperModule,
|
||||
AppSettingsComponent,
|
||||
AlertMessageComponent,
|
||||
ConfirmationMessageComponent,
|
||||
SpinnerDialogComponent,
|
||||
|
|
@ -118,6 +120,7 @@ import { RemoveLeadingZerosPipe } from './pipes/remove-leading-zero.pipe';
|
|||
RemoveLeadingZerosPipe
|
||||
],
|
||||
declarations: [
|
||||
AppSettingsComponent,
|
||||
AlertMessageComponent,
|
||||
ConfirmationMessageComponent,
|
||||
SpinnerDialogComponent,
|
||||
|
|
|
|||
|
|
@ -4,10 +4,63 @@
|
|||
@import '~@angular/material/theming';
|
||||
@include mat-core();
|
||||
|
||||
$purple-white-dark-primary: mat-palette($purple-primary, 500, 300, 900);
|
||||
$small-typography: mat-typography-config(
|
||||
$display-4: (font-size: 100px, line-height: 105px, font-weight: 300),
|
||||
$display-3: (font-size: 50px, line-height: 54px, font-weight: 400),
|
||||
$display-2: (font-size: 40px, line-height: 45px, font-weight: 400),
|
||||
$display-1: (font-size: 30px, line-height: 35px, font-weight: 400),
|
||||
$headline: (font-size: 20px, line-height: 28px, font-weight: 400),
|
||||
$title: (font-size: 16px, line-height: 28px, font-weight: 500),
|
||||
$subheading-2: (font-size: 14px, line-height: 25px, font-weight: 400),
|
||||
$subheading-1: (font-size: 13px, line-height: 23px, font-weight: 400),
|
||||
$body-2: (font-size: 12px, line-height: 20px, font-weight: 500),
|
||||
$body-1: (font-size: 12px, line-height: 18px, font-weight: 400),
|
||||
$caption: (font-size: 10px, line-height: 18px, font-weight: 400),
|
||||
$button: (font-size: 12px, line-height: 12px, font-weight: 500),
|
||||
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
|
||||
);
|
||||
|
||||
$regular-typography: mat-typography-config(
|
||||
$display-4: (font-size: 112px, line-height: 112px, font-weight: 300),
|
||||
$display-3: (font-size: 56px, line-height: 56px, font-weight: 400),
|
||||
$display-2: (font-size: 45px, line-height: 48px, font-weight: 400),
|
||||
$display-1: (font-size: 34px, line-height: 40px, font-weight: 400),
|
||||
$headline: (font-size: 24px, line-height: 32px, font-weight: 400),
|
||||
$title: (font-size: 20px, line-height: 32px, font-weight: 500),
|
||||
$subheading-2: (font-size: 16px, line-height: 28px, font-weight: 400),
|
||||
$subheading-1: (font-size: 15px, line-height: 24px, font-weight: 400),
|
||||
$body-2: (font-size: 14px, line-height: 24px, font-weight: 500),
|
||||
$body-1: (font-size: 14px, line-height: 20px, font-weight: 400),
|
||||
$caption: (font-size: 12px, line-height: 20px, font-weight: 400),
|
||||
$button: (font-size: 14px, line-height: 14px, font-weight: 500),
|
||||
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
|
||||
);
|
||||
|
||||
$large-typography: mat-typography-config(
|
||||
$display-4: (font-size: 124px, line-height: 124px, font-weight: 300),
|
||||
$display-3: (font-size: 62px, line-height: 62px, font-weight: 400),
|
||||
$display-2: (font-size: 54px, line-height: 60px, font-weight: 400),
|
||||
$display-1: (font-size: 40px, line-height: 46px, font-weight: 400),
|
||||
$headline: (font-size: 30px, line-height: 36px, font-weight: 400),
|
||||
$title: (font-size: 26px, line-height: 38px, font-weight: 500),
|
||||
$subheading-2: (font-size: 20px, line-height: 32px, font-weight: 400),
|
||||
$subheading-1: (font-size: 18px, line-height: 28px, font-weight: 400),
|
||||
$body-2: (font-size: 16px, line-height: 26px, font-weight: 500),
|
||||
$body-1: (font-size: 16px, line-height: 22px, font-weight: 400),
|
||||
$caption: (font-size: 14px, line-height: 22px, font-weight: 400),
|
||||
$button: (font-size: 16px, line-height: 16px, font-weight: 500),
|
||||
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
|
||||
);
|
||||
|
||||
$purple-white-dark-primary: mat-palette($purple-primary, 500, 400, 700);
|
||||
$purple-white-dark-accent: mat-palette($white-accent, 800, 600, 900);
|
||||
$purple-white-dark-warn: mat-palette($mat-deep-orange);
|
||||
$purple-white-dark-theme: mat-dark-theme($purple-white-dark-primary, $purple-white-dark-accent, $purple-white-dark-warn);
|
||||
@include mat-core($small-typography);
|
||||
$purple-white-dark-small-theme: mat-dark-theme($purple-white-dark-primary, $purple-white-dark-accent, $purple-white-dark-warn);
|
||||
@include mat-core($regular-typography);
|
||||
$purple-white-dark-regular-theme: mat-dark-theme($purple-white-dark-primary, $purple-white-dark-accent, $purple-white-dark-warn);
|
||||
@include mat-core($large-typography);
|
||||
$purple-white-dark-large-theme: mat-dark-theme($purple-white-dark-primary, $purple-white-dark-accent, $purple-white-dark-warn);
|
||||
|
||||
$alternate-purple-white-dark-primary: mat-palette($blue-primary, 500, 300, 900);
|
||||
$alternate-purple-white-dark-accent: mat-palette($white-accent, 800, 600, 900);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@import '~@angular/material/theming';
|
||||
@include mat-core();
|
||||
|
||||
$purple-white-light-primary: mat-palette($purple-primary, 500, 300, 900);
|
||||
$purple-white-light-primary: mat-palette($purple-primary, 500, 400, 700);
|
||||
$purple-white-light-accent: mat-palette($white-accent, 800, 600, 900);
|
||||
$purple-white-light-warn: mat-palette($mat-deep-orange);
|
||||
$purple-white-light-theme: mat-light-theme($purple-white-light-primary, $purple-white-light-accent, $purple-white-light-warn);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
.btn-primary-darker {
|
||||
background-color: $primary-darker;
|
||||
color: $accent-color;
|
||||
border-radius: 16px;
|
||||
border-radius: 1.6rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
|
|
@ -55,12 +55,32 @@
|
|||
}
|
||||
|
||||
.active-link {
|
||||
background: mat-color($primary);
|
||||
color: white; // mat-color($foreground, text); for dark theme but for light theme the foreground text color is black
|
||||
color: mat-color($primary);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mat-tree-node:hover, .mat-nested-tree-node-parent:hover, .mat-menu-item:hover {
|
||||
color: mat-color($primary);
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.mat-button.app-config-nodes {
|
||||
border-radius: 0;
|
||||
border-bottom: 2px solid mat-color($primary);
|
||||
}
|
||||
|
||||
.mat-button.app-config-nodes:hover, .top-toolbar-icon:hover {
|
||||
background: mat-color($primary, darker);
|
||||
}
|
||||
|
||||
.mat-button.app-config-nodes.selected-node {
|
||||
border-bottom: 2px solid mat-color($accent);
|
||||
}
|
||||
|
||||
.h-active-link {
|
||||
background: mat-color($primary, lighter) !important;
|
||||
border-bottom: 2px solid mat-color($accent);
|
||||
}
|
||||
|
||||
.ngx-charts {
|
||||
|
|
@ -79,7 +99,7 @@
|
|||
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
|
||||
background: none;
|
||||
font-weight: 900;
|
||||
font-size: 110%;
|
||||
font-size: $font-size * 1.1;
|
||||
}
|
||||
|
||||
.material-icons.primary { color: mat-color($primary); }
|
||||
|
|
@ -94,26 +114,26 @@
|
|||
}
|
||||
|
||||
.validation-error-icon {
|
||||
font-size: 16px;
|
||||
font-size: $font-size * 1.2;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
left: 0.4rem;
|
||||
}
|
||||
|
||||
.genseed-message {
|
||||
width:10%;
|
||||
color: mat-color($accent);
|
||||
font-size: 120%;
|
||||
font-size: $font-size * 1.2;
|
||||
}
|
||||
|
||||
.insecure-message {
|
||||
width:100%;
|
||||
color: mat-color($accent);
|
||||
font-size: 120%;
|
||||
font-size: $font-size * 1.2;
|
||||
}
|
||||
|
||||
.mat-vertical-content {
|
||||
padding: 0 4px 0 12px;
|
||||
padding: 0 0.4rem 0 1.2rem;
|
||||
}
|
||||
|
||||
.row-disabled {
|
||||
|
|
@ -122,4 +142,34 @@
|
|||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-panel {
|
||||
min-width: 6.4rem;
|
||||
}
|
||||
|
||||
.horizontal-button {
|
||||
height: $toolbar-height;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
background: mat-color($primary, darker);
|
||||
color: mat-color($accent);
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-button-show {
|
||||
color: mat-color($accent);
|
||||
background: mat-color($primary, lighter);
|
||||
border-radius: 12rem;
|
||||
&:hover {
|
||||
// background: mat-color($primary, darker);
|
||||
background: mat-color($accent);
|
||||
color: mat-color($primary, darker);
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: $font-size * 1.1;
|
||||
color: mat-color($foreground);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
$font-family: 'Roboto', sans-serif;
|
||||
|
||||
$nodes-toolbar-height: 52px;
|
||||
// $toolbar-height: 60px;
|
||||
$nodes-toolbar-height: 5.2rem;
|
||||
$horizontal-toolbar-height: 6rem;
|
||||
|
||||
$font-family: 'Roboto', sans-serif;
|
||||
$font-size: 14px;
|
||||
$toolbar-height: 46px;
|
||||
$regular-sidenav-width: 250px;
|
||||
$compact-sidenav-width: 185px;
|
||||
$mini-sidenav-width: 100px;
|
||||
$sidenav-info-height: 90px;
|
||||
$settings-nav-width: 150px;
|
||||
$gap: 8px;
|
||||
$icon-size: 36px;
|
||||
$pubkey-info-height: 15px;
|
||||
$font-size: 1.4rem;
|
||||
$toolbar-height: 4.8rem;
|
||||
$regular-sidenav-width: 22rem;
|
||||
$compact-sidenav-width: 18.5rem;
|
||||
$mini-sidenav-width: 10rem;
|
||||
$sidenav-info-height: 9rem;
|
||||
$settings-nav-width: 15rem;
|
||||
$gap: 0.8rem;
|
||||
$icon-size: 3.6rem;
|
||||
$pubkey-info-height: 1.5rem;
|
||||
|
||||
$fa-icon-small-size: 2rem;
|
||||
$fa-icon-regular-size: 4rem;
|
||||
34
src/app/shared/theme/styles/mixins.scss
Normal file
34
src/app/shared/theme/styles/mixins.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// MEDIA QUERY MANAGER
|
||||
/*
|
||||
0 - 600px: Phone
|
||||
600 - 900px: Tablet portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our normal styles apply
|
||||
1800px + : Big desktop
|
||||
|
||||
$breakpoint arguement choices:
|
||||
- phone
|
||||
- tab-port
|
||||
- tab-land
|
||||
- big-desktop
|
||||
|
||||
ORDER: Base + typography > general layout + grid > page layout > components
|
||||
|
||||
1em = 16px
|
||||
*/
|
||||
|
||||
@mixin respond($breakpoint) {
|
||||
@if $breakpoint == phone {
|
||||
@media only screen and (max-width: 37.5em) { @content }; //600px
|
||||
}
|
||||
@if $breakpoint == tab-port {
|
||||
@media only screen and (max-width: 56.25em) { @content }; //900px
|
||||
}
|
||||
@if $breakpoint == tab-land {
|
||||
@media only screen and (max-width: 75em) { @content }; //1200px
|
||||
}
|
||||
@if $breakpoint == big-desktop {
|
||||
@media only screen and (min-width: 112.5em) { @content }; //1800
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,12 +1,29 @@
|
|||
@import "constants";
|
||||
@import "mixins";
|
||||
|
||||
html, body {
|
||||
html {
|
||||
width: 100%;
|
||||
height: 99%;
|
||||
font-family: $font-family !important;
|
||||
font-size: $font-size !important;
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
font-family: $font-family !important;
|
||||
font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
|
||||
@include respond(tab-land) { // width < 1200?
|
||||
font-size: 56.25%; //1 rem = 9px, 9/16 = 50%
|
||||
}
|
||||
@include respond(tab-port) { // width < 900?
|
||||
font-size: 50%; //1 rem = 8px, 8/16 = 50%
|
||||
}
|
||||
@include respond(big-desktop) {
|
||||
font-size: 75%; //1rem = 12, 12/16
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
@include respond(tab-port) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rtl-container{
|
||||
|
|
@ -23,11 +40,12 @@ html, body {
|
|||
padding-bottom: 0;
|
||||
}
|
||||
.mat-nested-tree-node-child>.mat-tree-node {
|
||||
padding-left: 40px;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
&.horizontal {
|
||||
.horizontal-nav {
|
||||
margin-top: 1px;
|
||||
margin-top: 1px !important;
|
||||
height: $horizontal-toolbar-height !important;
|
||||
}
|
||||
.inner-sidenav-content {
|
||||
top: $gap;
|
||||
|
|
@ -38,11 +56,12 @@ html, body {
|
|||
width: $compact-sidenav-width;
|
||||
}
|
||||
.mat-tree-node, .mat-nested-tree-node-parent {
|
||||
height: 76px;
|
||||
padding: 0;
|
||||
min-height: 4rem;
|
||||
height: 4rem;
|
||||
padding: 0 1.6rem 0 1.6rem;
|
||||
}
|
||||
.mat-nested-tree-node-child>.mat-tree-node {
|
||||
padding-left: 60px;
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
}
|
||||
&.mini {
|
||||
|
|
@ -50,13 +69,12 @@ html, body {
|
|||
width: $mini-sidenav-width;
|
||||
}
|
||||
.mat-tree-node, .mat-nested-tree-node-parent {
|
||||
padding: 0 8px 12px 8px;
|
||||
.mat-icon {
|
||||
font-size: $icon-size;
|
||||
}
|
||||
min-height: 5.4rem;
|
||||
height: 5.4rem;
|
||||
padding: 0 2.4rem 0 2.4rem;
|
||||
}
|
||||
.mat-nested-tree-node-child>.mat-tree-node {
|
||||
padding: 0 8px 12px 28px;
|
||||
padding: 0 0.8rem 1.2rem 2.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +93,7 @@ html, body {
|
|||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
font-size: $font-size * 1.75;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
|
|
@ -89,10 +107,6 @@ html, body {
|
|||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
.font-9px {
|
||||
font-size: 9px !important;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -110,17 +124,17 @@ html, body {
|
|||
|
||||
.inner-sidenav-content {
|
||||
position: relative;
|
||||
top:10px;
|
||||
top:1rem;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding: 4px;
|
||||
padding: 0.8rem 1.6rem;
|
||||
min-height: calc(100% - (#{$toolbar-height} + #{$gap}*4));
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.top-50 {
|
||||
top: 50px;
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
*{
|
||||
|
|
@ -141,7 +155,7 @@ html, body {
|
|||
visibility: visible;
|
||||
opacity: 1;
|
||||
h4{
|
||||
margin-top: 10px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -159,8 +173,8 @@ html, body {
|
|||
|
||||
.mat-raised-button {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
max-height: 36px;
|
||||
margin-top: 0.5rem;
|
||||
max-height: 3.6rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -170,21 +184,21 @@ html, body {
|
|||
}
|
||||
|
||||
.mat-card {
|
||||
padding: 12px 24px !important;
|
||||
padding: 1.2rem 2.4rem !important;
|
||||
overflow: hidden;
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
|
||||
.mat-card-actions{
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
margin-bottom: 1.6rem;
|
||||
padding-left: 0.6rem;
|
||||
padding-right: 0.6rem;
|
||||
}
|
||||
|
||||
.mat-card-content, .mat-card-subtitle, .mat-card-title {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.mat-card-header-text {
|
||||
|
|
@ -194,11 +208,11 @@ html, body {
|
|||
|
||||
.mat-form-field-wrapper {
|
||||
width: 100%;
|
||||
margin: 0 15px 0 0;
|
||||
margin: 0 1.5rem 0 0;
|
||||
}
|
||||
|
||||
.mat-select {
|
||||
margin: 0 15px 0 0;
|
||||
margin: 0 1.5rem 0 0;
|
||||
}
|
||||
|
||||
.green {
|
||||
|
|
@ -222,95 +236,95 @@ html, body {
|
|||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.55rem !important;
|
||||
margin-top: 0.9rem !important;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.55rem !important;
|
||||
margin-bottom: 0.9rem !important;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.55rem !important;
|
||||
margin-left: 0.9rem !important;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 0.55rem !important;
|
||||
margin-right: 0.9rem !important;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin: 0 0.55rem !important;
|
||||
margin: 0 0.9rem !important;
|
||||
}
|
||||
|
||||
.my-1 {
|
||||
margin: 0.55rem 0 !important;
|
||||
margin: 0.9rem 0 !important;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 0.55rem !important;
|
||||
margin: 0.9rem !important;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 1rem !important;
|
||||
margin-top: 1.6rem !important;
|
||||
}
|
||||
|
||||
.mt-minus-1 {
|
||||
margin-top: -0.5rem !important;
|
||||
margin-top: -0.8rem !important;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 1rem !important;
|
||||
margin-bottom: 1.6rem !important;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 1rem !important;
|
||||
margin-left: 1.6rem !important;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 1rem !important;
|
||||
margin-right: 1.6rem !important;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 2rem !important;
|
||||
margin-left: 3.2rem !important;
|
||||
}
|
||||
|
||||
.ml-8 {
|
||||
margin-left: 4rem !important;
|
||||
margin-left: 6.4rem !important;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 2rem !important;
|
||||
margin-right: 3.2rem !important;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin: 0 1rem !important;
|
||||
margin: 0 1.6rem !important;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin: 1rem 0 !important;
|
||||
margin: 1.6rem 0 !important;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 1rem !important;
|
||||
margin: 1.6rem !important;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 0.55rem !important;
|
||||
padding-top: 0.9rem !important;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 0.55rem !important;
|
||||
padding-bottom: 0.9rem !important;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 0.55rem !important;
|
||||
padding-left: 0.9rem !important;
|
||||
}
|
||||
|
||||
.pr-1 {
|
||||
padding-right: 0.55rem !important;
|
||||
padding-right: 0.9rem !important;
|
||||
}
|
||||
|
||||
.pr-4px {
|
||||
padding-right: 4px !important;
|
||||
padding-right: 0.4rem !important;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
|
|
@ -322,59 +336,59 @@ html, body {
|
|||
}
|
||||
|
||||
.px-1 {
|
||||
padding: 0 0.55rem !important;
|
||||
padding: 0 0.9rem !important;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding: 0.55rem 0 !important;
|
||||
padding: 0.9rem 0 !important;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.55rem !important;
|
||||
padding: 0.9rem !important;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: 1rem !important;
|
||||
padding-top: 1.6rem !important;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 1rem !important;
|
||||
padding-bottom: 1.6rem !important;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 1rem !important;
|
||||
padding-left: 1.6rem !important;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 2rem !important;
|
||||
padding-top: 3.2rem !important;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: 2rem !important;
|
||||
padding-left: 3.2rem !important;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: 1rem !important;
|
||||
padding-right: 1.6rem !important;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: 2.5rem !important;
|
||||
padding-right: 4rem !important;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding: 0 1rem !important;
|
||||
padding: 0 1.6rem !important;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding: 0 2rem !important;
|
||||
padding: 0 3.2rem !important;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding: 1rem 0 !important;
|
||||
padding: 1.6rem 0 !important;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 1rem !important;
|
||||
padding: 1.6rem !important;
|
||||
}
|
||||
|
||||
.m-1px {
|
||||
|
|
@ -394,7 +408,7 @@ html, body {
|
|||
}
|
||||
|
||||
.mat-footer-row, .mat-header-row, .mat-row {
|
||||
border-bottom-width: 0px;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.mat-cell, .mat-header-cell, .mat-footer-cell {
|
||||
|
|
@ -404,7 +418,7 @@ html, body {
|
|||
}
|
||||
|
||||
.flex-ellipsis {
|
||||
padding-right: 30px;
|
||||
padding-right: 3rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -416,28 +430,28 @@ html, body {
|
|||
|
||||
.inline-spinner {
|
||||
display: inline-flex !important;
|
||||
top: 5px !important;
|
||||
top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.top-minus-5px {
|
||||
position: relative;
|
||||
top:-5px;
|
||||
top:-0.5rem;
|
||||
}
|
||||
|
||||
.top-minus-15px {
|
||||
position: relative;
|
||||
top:-15px;
|
||||
top:-1.5rem;
|
||||
}
|
||||
|
||||
.top-minus-25px {
|
||||
position: relative;
|
||||
top:-25px;
|
||||
margin-bottom: -25px !important;
|
||||
top:-2.5rem;
|
||||
margin-bottom: -2.5rem !important;
|
||||
}
|
||||
|
||||
.top-minus-30px {
|
||||
position: relative;
|
||||
top:-30px;
|
||||
top:-3rem;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
|
|
@ -453,7 +467,7 @@ html, body {
|
|||
}
|
||||
|
||||
.font-60-percent {
|
||||
font-size: 60%;
|
||||
font-size: $font-size * 0.6;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
|
|
@ -469,18 +483,18 @@ html, body {
|
|||
position: fixed;
|
||||
width: $settings-nav-width;
|
||||
.container{
|
||||
padding: 6px 14px;
|
||||
padding: 0.6rem 1.4rem;
|
||||
h4{
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin: 12px 0 6px 0;
|
||||
margin: 1.2rem 0 0.6rem 0;
|
||||
}
|
||||
.skin{
|
||||
width:32px;
|
||||
height: 0px;
|
||||
width:3.2rem;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 16px solid;
|
||||
border: 1.6rem solid;
|
||||
&.light-purple{
|
||||
border-left-color: #ffffff;
|
||||
border-right-color: #ffffff;
|
||||
|
|
@ -541,7 +555,7 @@ html, body {
|
|||
}
|
||||
|
||||
.mat-slide-toggle{
|
||||
padding: 0px 14px;
|
||||
padding: 0px 1.4rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -558,8 +572,8 @@ html, body {
|
|||
position: fixed;
|
||||
top: 30%;
|
||||
right: 0;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 4.2rem;
|
||||
height: 4.2rem;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
z-index: 999999;
|
||||
|
|
@ -572,26 +586,39 @@ html, body {
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.fa-icon-small {
|
||||
min-width: $fa-icon-small-size;
|
||||
width: $fa-icon-small-size;
|
||||
max-width: $fa-icon-small-size;
|
||||
}
|
||||
|
||||
.fa-icon-regular {
|
||||
min-width: $fa-icon-regular-size;
|
||||
width: $fa-icon-regular-size;
|
||||
max-width: $fa-icon-regular-size;
|
||||
font-size: $font-size * 1.75;
|
||||
}
|
||||
|
||||
.icon-large {
|
||||
font-size: 70px;
|
||||
font-size: $font-size * 5;
|
||||
margin-left: -100%;
|
||||
}
|
||||
|
||||
.icon-small {
|
||||
height: 20px !important;
|
||||
width: 20px !important;
|
||||
font-size: 20px !important;
|
||||
height: 2rem !important;
|
||||
width: 2rem !important;
|
||||
font-size: $font-size * 1.5 !important;
|
||||
}
|
||||
|
||||
.icon-smaller {
|
||||
height: 10px !important;
|
||||
width: 10px !important;
|
||||
font-size: 10px !important;
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
font-size: $font-size * 0.75 !important;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.copy-icon-smaller {
|
||||
|
|
@ -601,7 +628,7 @@ html, body {
|
|||
|
||||
.top-5px {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.animate-settings {
|
||||
|
|
@ -619,21 +646,17 @@ html, body {
|
|||
100% {-webkit-transform: rotate(360deg)}
|
||||
}
|
||||
|
||||
.size-30 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.size-16 {
|
||||
font-size: 16px;
|
||||
.size-triple {
|
||||
font-size: $font-size * 3;
|
||||
}
|
||||
|
||||
.mt-minus-5 {
|
||||
position: relative;
|
||||
margin-top: -5px;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.custom-card {
|
||||
padding: 0px 0px 8px 0px !important;
|
||||
padding: 0px 0px 0.8rem 0px !important;
|
||||
}
|
||||
|
||||
.not-found-box {
|
||||
|
|
@ -662,8 +685,8 @@ a {
|
|||
}
|
||||
|
||||
.mat-tree-node, .mat-nested-tree-node-parent {
|
||||
min-height: 38px !important;
|
||||
padding: 0 12px 0 12px;
|
||||
height: 4.8rem;
|
||||
padding: 0 1.2rem 0 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -671,17 +694,13 @@ a {
|
|||
.mat-tree-node span:focus, .mat-tree-node span:active, .mat-nested-tree-node-parent span:focus, .mat-nested-tree-node-parent span:active,
|
||||
.mat-tree-node div:focus, .mat-tree-node div:active, .mat-nested-tree-node-parent div:focus, .mat-nested-tree-node-parent div:active,
|
||||
.mat-tree-node .mat-icon:focus, .mat-tree-node .mat-icon:active, .mat-nested-tree-node-parent .mat-icon:focus, .mat-nested-tree-node-parent .mat-icon:active {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lnd-info {
|
||||
height: $sidenav-info-height;
|
||||
}
|
||||
|
||||
.horizontal-button {
|
||||
height: $toolbar-height;
|
||||
}
|
||||
|
||||
.mat-icon-36 {
|
||||
width: $icon-size !important;
|
||||
height: $icon-size !important;
|
||||
|
|
@ -709,16 +728,11 @@ a {
|
|||
align-content: center;
|
||||
}
|
||||
|
||||
tr.mat-row:hover, .mat-tree-node:hover, .mat-nested-tree-node-parent:hover {
|
||||
tr.mat-row:hover {
|
||||
box-shadow: inset 0.1em 0.1em 0.1em 0 rgba(255,255,255,0.5), inset -0.1em -0.1em 0.1em 0 rgba(0,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mat-tree-node.active-link {
|
||||
box-shadow: inset 0.1em 0.1em 0.1em 0 rgba(0,0,0,0.5), inset -0.1em -0.1em 0.1em 0 rgba(255,255,255,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings.mat-sidenav .mat-drawer-inner-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
&.purple-white-dark-theme {
|
||||
@debug "PURPLE DARK THEME";
|
||||
@import "../skins/dark-purple";
|
||||
@include angular-material-theme($purple-white-dark-theme);
|
||||
@include change-theme($purple-white-dark-theme, $alternate-purple-white-dark-theme);
|
||||
@include angular-material-theme($purple-white-dark-small-theme);
|
||||
@include change-theme($purple-white-dark-small-theme, $alternate-purple-white-dark-theme);
|
||||
}
|
||||
&.light-blue{
|
||||
&.light-blue{
|
||||
@import "../skins/light-blue";
|
||||
@include angular-material-theme($blue-light-theme);
|
||||
@include change-theme($blue-light-theme, $alternate-blue-light-theme);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export interface RootState {
|
|||
nodeData: GetInfoRoot
|
||||
}
|
||||
|
||||
const initNodeSettings = { flgSidenavOpened: true, flgSidenavPinned: true, menu: 'Vertical', menuType: 'Regular', theme: 'dark-blue', satsToBTC: false, channelBackupPath: '' };
|
||||
const initNodeSettings = { flgSidenavOpened: true, flgSidenavPinned: true, menu: 'Vertical', menuType: 'Regular', fontSize: 'Regular', theme: 'dark-blue', satsToBTC: false, channelBackupPath: '' };
|
||||
const initNodeAuthentication = { nodeAuthType: 'CUSTOM', configPath: '', bitcoindConfigPath: '' };
|
||||
|
||||
const initRootState: RootState = {
|
||||
|
|
|
|||
254
src/assets/images/RTL-Helmet_Trans.svg
Normal file
254
src/assets/images/RTL-Helmet_Trans.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 114 KiB |
Loading…
Add table
Add a link
Reference in a new issue