RTL/src/app/shared/components/node-config/node-settings/node-settings.component.html

<div [perfectScrollbar] fxLayout="column" fxFlex="100">
  <form fxLayout="column" fxLayoutAlign="start stretch" class="settings-container page-sub-title-container mt-1" #form="ngForm">
    <mat-accordion displayMode="flat" multi="false">
      <mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <fa-icon [icon]="faEyeSlash" class="page-title-img mr-1"></fa-icon>
            <span class="page-title">Open Unannounced Channels</span>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div fxLayout="column" fxLayoutAlign="start stretch">
          <div fxLayout="row" fxFlex="100" class="alert alert-info mb-1">
            <fa-icon [icon]="faInfoCircle" class="mr-1 alert-icon"></fa-icon>
            <span>Use this control to toggle setting which defaults to opening Unannounced Channels.</span>
          </div>
          <div fxLayout="row wrap" fxLayoutAlign="start center">
            <mat-slide-toggle tabindex="1" color="primary" [(ngModel)]="selNode.settings.unannouncedChannels" (change)="selNode.settings.unannouncedChannels = !$event.checked ? null : selNode.settings.unannouncedChannels" name="unannouncedChannels">Open Unannounced Channels</mat-slide-toggle>
          </div>
        </div>
      </mat-expansion-panel>
      <mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <fa-icon [icon]="faMoneyBillAlt" class="page-title-img mr-1"></fa-icon>
            <span class="page-title">Balance Display</span>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div fxLayout="column" fxLayoutAlign="start stretch">
          <div fxFlex="100" class="alert alert-warn">
            <fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
            <span>Fiat conversion calls <strong><a href="https://www.blockchain.com/api/exchange_rates_api" target="blank">Blockchain.com</a></strong> API to get conversion rates.</span>
          </div>
          <div fxLayout="row wrap" fxLayoutAlign="start center">
            <mat-slide-toggle tabindex="2" color="primary" [(ngModel)]="selNode.settings.fiatConversion" (change)="selNode.settings.currencyUnit = !$event.checked ? null : selNode.settings.currencyUnit" name="fiatConversion">Enable Fiat Conversion</mat-slide-toggle>
            <mat-form-field>
              <mat-select autoFocus [(ngModel)]="selNode.settings.currencyUnit" (selectionChange)="onCurrencyChange($event)" placeholder="Fiat Currency" [disabled]="!selNode.settings.fiatConversion" tabindex="3" [required]="selNode.settings.fiatConversion" name="currencyUnit" #currencyUnit="ngModel">
                <mat-option *ngFor="let currencyUnit of currencyUnits" [value]="currencyUnit.id">
                  {{currencyUnit.id}}
                </mat-option>
              </mat-select>
              <mat-error *ngIf="selNode.settings.fiatConversion && !selNode.settings.currencyUnit">Currency unit is required.</mat-error>
            </mat-form-field>
          </div>
        </div>
      </mat-expansion-panel>
      <mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <fa-icon [icon]="faPaintBrush" class="page-title-img mr-1"></fa-icon>
            <span class="page-title">Customization</span>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div fxLayout="column" fxLayoutAlign="start stretch">
          <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100">
            <div fxLayout="row" fxFlex="100" class="alert alert-info mb-0">
              <fa-icon [icon]="faInfoCircle" class="mr-1 alert-icon"></fa-icon>
              <span>Dashboard layout will be tailored based on the role selected to better serve its needs.</span>
            </div>
            <div fxLayout="column" fxLayoutAlign="start start" fxFlex="100">
              <h4>Dashboard Layout</h4>
              <mat-radio-group color="primary" [(ngModel)]="selNode.settings.userPersona" tabindex="1" name="userPersona">
                <mat-radio-button *ngFor="let userPersona of userPersonas" [value]="userPersona" [checked]="selNode.settings.userPersona === userPersona" class="mr-4">
                  {{userPersona | titlecase}}
                </mat-radio-button>
              </mat-radio-group>
            </div>
          </div>
          <mat-divider [inset]="true" class="mt-1"></mat-divider>
          <div fxLayout="column" fxLayout.gt-xs="row" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-xs="start stretch">
            <div fxFlex.gt-xs="20" fxFlex.gt-md="15" fxLayout="column" fxLayoutAlign="space-between stretch">
              <h4>Mode</h4>
              <mat-radio-group color="primary" [(ngModel)]="selectedThemeMode" (change)="chooseThemeMode()" name="themeMode">
                <mat-radio-button tabindex="5" *ngFor="let themeMode of themeModes" [value]="themeMode" [ngClass]="{'mr-4': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">{{themeMode.name}}
                </mat-radio-button>
              </mat-radio-group>
            </div>
          </div>
          <mat-divider [inset]="true" class="mt-1"></mat-divider>
          <div fxLayout="column" fxLayout.gt-xs="row" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-xs="start stretch">
            <div fxLayout="column" fxFlex.gt-xs="50" fxFlex.gt-md="40" fxLayoutAlign="space-between stretch">
              <h4>Themes</h4>
              <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
                <span *ngFor="let themeColor of themeColors" fxLayout="row" class="theme-name">
                  <div tabindex="9" [class]="themeColor.id | lowercase" [ngClass]="{'skin': true, 'selected-color': selectedThemeColor === themeColor.id}" (click)="changeThemeColor(themeColor.id)"></div>
                  {{themeColor.name}}
                </span>
              </div>
            </div>
          </div>
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </form>
  <div fxLayout="row" class="mt-1">
    <button class="mr-1" mat-stroked-button color="primary" (click)="onResetSettings()" tabindex="10">Reset</button>
    <button mat-flat-button color="primary" (click)="onUpdateSettings()" tabindex="11">Update</button>
  </div>
</div>