Removing Stickyness

Removing Stickyness

controllers/authenticate.js

@@ -62,7 +62,7 @@ exports.authenticateUser = (req, res, next) => {
     } else {
       fs.readFile(common.lnd_config_path, 'utf8', function (err, data) {
         if (err) {
-          logger.error('\r\nAuthenticate: 45: ' + JSON.stringify(Date.now()) + ': ERROR: RTL Config Reading Failed!');
+          logger.error('\r\nAuthenticate: 45: ' + JSON.stringify(Date.now()) + ': ERROR: LND Config Reading Failed!');
           res.status(500).json({
             message: "LND Config Reading Failed!",
             error: err

src/app/app.component.html

@@ -1,37 +1,35 @@
 <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">
+      #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">
-      <div class="top-bar">
-        <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" color="primary" class="padding-gap-x sticky top-toolbar">
-          <div fxLayoutAlign="center center">
-            <button *ngIf="settings.menu === 'Vertical'" mat-icon-button (click)="sideNavToggle(sideNavigation)">
-              <mat-icon>menu</mat-icon>
-            </button>
-          </div>
-          <div>
-            <h2>Ride The Lightning <span class="font-60-percent">(Beta)</span></h2>
-          </div>
-          <div>
-            <rtl-top-menu></rtl-top-menu>
-          </div>
-        </mat-toolbar>
-        <div fxLayout="row" fxLayoutAlign="center center" class="bg-primary pubkey-info-top sticky" 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>
-            <mat-icon [ngClass]="{'icon-smaller cursor-pointer copy-icon-smaller': smallScreen, 'icon-small cursor-pointer copy-icon': !smallScreen}">file_copy</mat-icon><span [hidden]="!flgCopied">Copied</span>
-          </div>
+      <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" color="primary" class="padding-gap-x">
+        <div fxLayoutAlign="center center">
+          <button *ngIf="settings.menu === 'Vertical'" mat-icon-button (click)="sideNavToggle(sideNavigation)">
+            <mat-icon>menu</mat-icon>
+          </button>
+        </div>
+        <div>
+          <h2>Ride The Lightning <span class="font-60-percent">(Beta)</span></h2>
+        </div>
+        <div>
+          <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>
+          <mat-icon [ngClass]="{'icon-smaller cursor-pointer copy-icon-smaller': smallScreen, 'icon-small cursor-pointer copy-icon': !smallScreen}">file_copy</mat-icon><span [hidden]="!flgCopied">Copied</span>
         </div>
-        <mat-toolbar color="primary" *ngIf="settings.menu === 'Horizontal'" class="padding-gap-x horizontal-nav sticky">
-          <div fxLayout="row" fxFlex="100" fxLayoutAlign="center center" class="h-100">
-            <rtl-horizontal-navigation></rtl-horizontal-navigation>
-          </div>
-        </mat-toolbar>
       </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>

src/app/app.component.ts

@@ -75,7 +75,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
       } else if (actionPayload.type === RTLActions.INIT_APP_DATA) {
         this.store.dispatch(new RTLActions.FetchInfo());
       } else if (actionPayload.type === RTLActions.SET_SETTINGS) {
-        if (this.settings.menu === 'Horizontal') {
+        if (this.settings.menu === 'Horizontal' || this.settings.menuType === 'Compact' || this.settings.menuType === 'Mini') {
           this.settingSidenav.toggle(); // To dynamically update the width to 100% after side nav is closed
           setTimeout(() => { this.settingSidenav.toggle(); }, 100);
         }

src/app/pages/channels/channel-closed/channel-closed.component.html

@@ -53,7 +53,7 @@
               <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Time Locked Balance </th>
               <td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center"> {{channel.time_locked_balance | number}} </span></td>
             </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onClosedChannelClick(row, $event)"></tr>
           </table>
         </div>

src/app/pages/channels/channel-closed/channel-closed.component.ts

@@ -22,6 +22,7 @@ export class ChannelClosedComponent implements OnInit, OnDestroy {
   public closedChannels: any;
   public flgLoading: Array<Boolean | 'error'> = [true];
   public selectedFilter = '';
+  public flgSticky = false;
   private unsub: Array<Subject<void>> = [new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>, private rtlEffects: RTLEffects) {
@@ -36,10 +37,12 @@ export class ChannelClosedComponent implements OnInit, OnDestroy {
         this.displayedColumns = ['close_type', 'channel_point', 'chan_id', 'capacity', 'close_height', 'settled_balance'];
         break;
       case (window.innerWidth > 1024 && window.innerWidth <= 1280):
+        this.flgSticky = true;
         this.displayedColumns = ['close_type', 'channel_point', 'chan_id', 'closing_tx_hash', 'remote_pubkey', 'capacity',
           'close_height', 'settled_balance', 'time_locked_balance'];
         break;
       default:
+        this.flgSticky = true;
         this.displayedColumns = ['close_type', 'channel_point', 'chan_id', 'closing_tx_hash', 'remote_pubkey', 'capacity',
           'close_height', 'settled_balance', 'time_locked_balance'];
         break;

src/app/pages/channels/channel-manage/channel-manage.component.ts

@@ -31,12 +31,12 @@ export class ChannelManageComponent implements OnInit, OnDestroy {
   public statusFilters = ['Active', 'Inactive'];
   public myChanPolicy: any = {};
   public selFilter = '';
-  public flgSticky = true;
   public transTypes = [{id: '0', name: 'Default Priority'}, {id: '1', name: 'Target Confirmation Blocks'}, {id: '2', name: 'Fee'}];
   public selTransType = '0';
   public transTypeValue = {blocks: '', fees: ''};
   public spendUnconfirmed = false;
   public moreOptions = false;
+  public flgSticky = false;
   private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>, private rtlEffects: RTLEffects, private actions$: Actions) {
@@ -51,10 +51,12 @@ export class ChannelManageComponent implements OnInit, OnDestroy {
         this.displayedColumns = ['close', 'update', 'active', 'chan_id', 'remote_alias', 'capacity', 'local_balance', 'remote_balance'];
         break;
       case (window.innerWidth > 1024 && window.innerWidth <= 1280):
+        this.flgSticky = true;
         this.displayedColumns = ['close', 'update', 'active', 'chan_id', 'remote_alias', 'capacity', 'local_balance', 'remote_balance', 'total_satoshis_sent',
           'total_satoshis_received', 'commit_fee'];
         break;
       default:
+        this.flgSticky = true;
         this.displayedColumns = ['close', 'update', 'active', 'chan_id', 'remote_pubkey', 'remote_alias', 'capacity', 'local_balance', 'remote_balance',
           'total_satoshis_sent', 'total_satoshis_received', 'commit_fee'];
         break;

src/app/pages/invoices/invoices.component.html

@@ -67,7 +67,7 @@
               <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount Paid ({{(settings?.satsToBTC) ? information?.currency_unit : information?.smaller_currency_unit}})</th>
               <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{(settings?.satsToBTC) ? (invoice?.btc_amt_paid_sat | number:'1.0-3') : (invoice?.amt_paid_sat | number)}} </span></td>
             </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.memo === newlyAddedInvoiceMemo && row.value === newlyAddedInvoiceValue && flgAnimate) ? 'added' : 'notAdded'" (click)="onInvoiceClick(row, $event)"></tr>
           </table>
         </div>

src/app/pages/invoices/invoices.component.ts

@@ -33,6 +33,7 @@ export class InvoicesComponent implements OnInit, OnDestroy {
   public invoices: any;
   public information: GetInfo = {};
   public flgLoading: Array<Boolean | 'error'> = [true];
+  public flgSticky = false;
   private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>, private actions$: Actions) {
@@ -47,9 +48,11 @@ export class InvoicesComponent implements OnInit, OnDestroy {
         this.displayedColumns = ['creation_date', 'settle_date', 'memo', 'value', 'settled', 'amt_paid_sat'];
         break;
       case (window.innerWidth > 1024 && window.innerWidth <= 1280):
+        this.flgSticky = true;
         this.displayedColumns = ['creation_date', 'settle_date', 'memo', 'value', 'settled', 'amt_paid_sat', 'expiry', 'cltv_expiry'];
         break;
       default:
+        this.flgSticky = true;
         this.displayedColumns = ['creation_date', 'settle_date', 'memo', 'value', 'settled', 'amt_paid_sat', 'expiry', 'cltv_expiry'];
         break;
     }

src/app/pages/payments/payments.component.html

@@ -71,7 +71,7 @@
               <th mat-header-cell *matHeaderCellDef mat-sort-header>Path</th>
               <td mat-cell *matCellDef="let payment">{{payment?.path?.length || 0}} Hops</td>
             </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.payment_hash === newlyAddedPayment  && flgAnimate) ? 'added' : 'notAdded'" (click)="onPaymentClick(row, $event)"></tr>
           </table>
         </div>

src/app/pages/payments/payments.component.ts

@@ -33,6 +33,7 @@ export class PaymentsComponent implements OnInit, OnDestroy {
   public displayedColumns = [];
   public paymentDecoded: PayRequest = {};
   public paymentRequest = '';
+  public flgSticky = false;
   private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>, private rtlEffects: RTLEffects) {
@@ -47,9 +48,11 @@ export class PaymentsComponent implements OnInit, OnDestroy {
         this.displayedColumns = ['creation_date', 'payment_hash', 'fee', 'value', 'payment_preimage', 'path'];
         break;
       case (window.innerWidth > 1024 && window.innerWidth <= 1280):
+        this.flgSticky = true;
         this.displayedColumns = ['creation_date', 'payment_hash', 'fee', 'value', 'payment_preimage', 'value_msat', 'value_sat', 'path'];
         break;
       default:
+        this.flgSticky = true;
         this.displayedColumns = ['creation_date', 'payment_hash', 'fee', 'value', 'payment_preimage', 'value_msat', 'value_sat', 'path'];
         break;
     }

src/app/pages/peers/peers.component.html

@@ -77,7 +77,7 @@
               <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Ping </th>
               <td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.ping_time | number}} </span></td>
             </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.pub_key === newlyAddedPeer && flgAnimate) ? 'added' : 'notAdded'" (click)="onPeerClick(row, $event)"></tr>
           </table>
         </div>

src/app/pages/peers/peers.component.ts

@@ -28,6 +28,7 @@ export class PeersComponent implements OnInit, OnDestroy {
   public peers: any;
   public information: GetInfo = {};
   public flgLoading: Array<Boolean | 'error'> = [true]; // 0: peers
+  public flgSticky = false;
   private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>, private rtlEffects: RTLEffects, private actions$: Actions) {
@@ -42,9 +43,11 @@ export class PeersComponent implements OnInit, OnDestroy {
         this.displayedColumns = ['detach', 'pub_key', 'alias', 'address', 'sat_sent', 'sat_recv', 'inbound'];
         break;
       case (window.innerWidth > 1024 && window.innerWidth <= 1280):
+        this.flgSticky = true;
         this.displayedColumns = ['detach', 'pub_key', 'alias', 'address', 'sat_sent', 'sat_recv', 'inbound', 'ping_time'];
         break;
       default:
+        this.flgSticky = true;
         this.displayedColumns = ['detach', 'pub_key', 'alias', 'address', 'bytes_sent', 'bytes_recv', 'sat_sent', 'sat_recv', 'inbound', 'ping_time'];
         break;
     }

src/app/pages/switch/forwarding-history.component.html

@@ -76,7 +76,7 @@
                 (Sats)</th>
               <td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent.fee | number}}</span></td>
             </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"
               (click)="onForwardingEventClick(row, $event)"></tr>
           </table>

src/app/pages/switch/forwarding-history.component.ts

@@ -26,6 +26,7 @@ export class ForwardingHistoryComponent implements OnInit, OnDestroy {
   public yesterday = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 1, this.today.getHours(), this.today.getMinutes(), this.today.getSeconds());
   public endDate = this.today;
   public startDate = this.yesterday;
+  public flgSticky = false;
   private unsub: Array<Subject<void>> = [new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>) {
@@ -40,9 +41,11 @@ export class ForwardingHistoryComponent implements OnInit, OnDestroy {
         this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'amt_out', 'amt_in', 'fee'];
         break;
       case (window.innerWidth > 1024 && window.innerWidth <= 1280):
+        this.flgSticky = true;
         this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'amt_out', 'amt_in', 'fee'];
         break;
       default:
+        this.flgSticky = true;
         this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'amt_out', 'amt_in', 'fee'];
         break;
     }

src/app/pages/transactions/list-transactions/list-transactions.component.html

@@ -47,7 +47,7 @@
               <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount </th>
               <td mat-cell *matCellDef="let trans"><span fxLayoutAlign="end center"> {{trans.amount | number}} </span></td>
             </ng-container>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onTransactionClick(row, $event)"></tr>
           </table>
         </div>

src/app/pages/transactions/list-transactions/list-transactions.component.ts

@@ -22,6 +22,7 @@ export class ListTransactionsComponent implements OnInit, OnDestroy {
   public displayedColumns = [];
   public listTransactions: any;
   public flgLoading: Array<Boolean | 'error'> = [true];
+  public flgSticky = false;
   private unsub: Array<Subject<void>> = [new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>, private rtlEffects: RTLEffects) {
@@ -36,9 +37,11 @@ export class ListTransactionsComponent implements OnInit, OnDestroy {
         this.displayedColumns = ['dest_addresses', 'time_stamp', 'num_confirmations', 'total_fees', 'tx_hash', 'amount'];
         break;
       case (window.innerWidth > 1024 && window.innerWidth <= 1280):
+        this.flgSticky = true;
         this.displayedColumns = ['dest_addresses', 'time_stamp', 'num_confirmations', 'total_fees', 'tx_hash', 'amount'];
         break;
       default:
+        this.flgSticky = true;
         this.displayedColumns = ['dest_addresses', 'time_stamp', 'num_confirmations', 'total_fees', 'block_hash', 'block_height', 'tx_hash', 'amount'];
         break;
     }

src/app/shared/theme/styles/change-theme.scss

@@ -36,11 +36,7 @@
   .lnd-info{
     border-bottom: 1px solid mat-color($foreground, divider);
   }
-  .horizontal-nav {
-    position: fixed;
-    top:74px;
-    z-index: 9999;
-  }
+
   a {
     color: mat-color($foreground, text);
   }

src/app/shared/theme/styles/root.scss

@@ -21,25 +21,12 @@ html, body {
     padding-top: 0;
     padding-bottom: 0;
   }
-  .top-toolbar, .pubkey-info-top {
-    left: $regular-sidenav-width;
-    width: calc(100% - #{$regular-sidenav-width}) !important;
-    z-index: 9999;
-  }
-  .mat-sidenav-content {
-    margin-left: $regular-sidenav-width !important;
-  }
   &.horizontal {
-    .top-toolbar, .pubkey-info-top {
-      left: 0;
-      width: 100% !important;
-      z-index: 9999;
+    .horizontal-nav {
+      margin-top: 1px;
     }
     .inner-sidenav-content {
-      top: calc(#{$toolbar-height}*2 + #{$gap} + #{$pubkey-info-height});  
-    }
-    .mat-sidenav-content {
-      margin-left: 0 !important;
+      top: $gap;
     }
   }    
   &.compact {
@@ -50,14 +37,6 @@ html, body {
       height: 76px;
       padding: 0;
     }
-    .top-toolbar, .pubkey-info-top {
-      left: $compact-sidenav-width;
-      width: calc(100% - #{$compact-sidenav-width}) !important;
-      z-index: 9999;
-    }    
-    .mat-sidenav-content {
-      margin-left: $compact-sidenav-width !important;
-    }
   }
   &.mini {
     .sidenav {
@@ -69,14 +48,6 @@ html, body {
         font-size: $icon-size;
       }
     }
-    .top-toolbar, .pubkey-info-top {
-      left: $mini-sidenav-width;
-      width: calc(100% - #{$mini-sidenav-width}) !important;
-      z-index: 9999;
-    }   
-    .mat-sidenav-content {
-      margin-left: $mini-sidenav-width !important;
-    }    
   }      
 }
 
@@ -85,23 +56,8 @@ html, body {
 }
 
 .sidenav{
-  width: $regular-sidenav-width;
   height: 100%;
-  overflow: hidden !important;
-  overflow-anchor: none;
-  -ms-overflow-style: none;
-  touch-action: auto;
-  -ms-touch-action: auto;
-}
-
-.top-bar {
-  position: relative;
-  top: 0;
-  bottom:0;
-  left:0;
-  right:0;  
-  height: 0;
-  z-index: 999999;
+  overflow: hidden;
 }
 
 .font-9px {
@@ -125,7 +81,7 @@ html, body {
 
 .inner-sidenav-content {
   position: relative;
-  top: calc(#{$toolbar-height} + #{$gap} + #{$pubkey-info-height});  
+  top:10px;
   bottom:0;
   left:0;
   right:0;  
@@ -780,9 +736,5 @@ a {
   min-height: $pubkey-info-height;
   cursor: pointer;
   display: flex;
-  left: $regular-sidenav-width;
-  width: calc(100% - #{$regular-sidenav-width}) !important;
   align-content: center;
-  z-index: 9998;
-  top: $toolbar-height;
-} 
+}