From c53520ea00e9bfc466a4495af6cd9e255d80d256 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sun, 30 Jan 2022 12:35:23 +0100
Subject: [PATCH] style: improve settings layout

---
 src/app/settings/settings.component.html    | 349 +++++++++++---------
 src/app/settings/settings.component.scss    |  21 ++
 src/app/settings/settings.component.spec.ts |  40 +--
 3 files changed, 227 insertions(+), 183 deletions(-)

diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 019c843ef..267541b89 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -1,166 +1,187 @@
-<app-header
-    [title]="'SETTINGS.TITLE' | translate"
-    [subtitle]="'SETTINGS.SUBTITLE' | translate"
-></app-header>
-<form [formGroup]="settingsForm" (ngSubmit)="onSubmit()" novalidate>
-    <mat-card>
-        <mat-card-header class="card-header">
-            <div mat-card-subtitle>
-                {{ 'SETTINGS.DESCRIPTION' | translate }}
-            </div>
-        </mat-card-header>
-        <mat-card-content>
-            <mat-list>
-                <mat-list-item *ngIf="isElectron">
-                    <div matLine fxLayout="row">
-                        <p fxFlex>{{ 'SETTINGS.EPG_URL_LABEL' | translate }}</p>
-                        <p fxFlex fxLayoutAlign="start center">
-                            <mat-form-field class="full-width">
-                                <input
-                                    [placeholder]="
-                                        'SETTINGS.EPG_URL_PLACEHOLDER'
+<div class="main-container">
+    <app-header
+        [title]="'SETTINGS.TITLE' | translate"
+        [subtitle]="
+            ('SETTINGS.SUBTITLE' | translate) +
+            '. ' +
+            ('SETTINGS.DESCRIPTION' | translate)
+        "
+    ></app-header>
+
+    <div class="settings-container">
+        <form [formGroup]="settingsForm" (ngSubmit)="onSubmit()" novalidate>
+            <mat-card>
+                <mat-card-content>
+                    <mat-list>
+                        <mat-list-item *ngIf="isElectron">
+                            <div matLine fxLayout="row">
+                                <p fxFlex>
+                                    {{ 'SETTINGS.EPG_URL_LABEL' | translate }}
+                                </p>
+                                <p fxFlex fxLayoutAlign="start center">
+                                    <mat-form-field class="full-width">
+                                        <input
+                                            [placeholder]="
+                                                'SETTINGS.EPG_URL_PLACEHOLDER'
+                                                    | translate
+                                            "
+                                            matInput
+                                            type="url"
+                                            formControlName="epgUrl"
+                                        />
+                                    </mat-form-field>
+                                    <button
+                                        *ngIf="
+                                            (epgAvailable$ | async) &&
+                                            settingsForm.value.epgUrl
+                                        "
+                                        mat-icon-button
+                                        color="accent"
+                                        [matTooltip]="
+                                            'SETTINGS.REFRESH_EPG' | translate
+                                        "
+                                        type="button"
+                                        (click)="fetchEpg()"
+                                    >
+                                        <mat-icon>refresh</mat-icon>
+                                    </button>
+                                </p>
+                            </div>
+                            <p matLine></p>
+                        </mat-list-item>
+                        <mat-list-item>
+                            <div matLine fxLayout="row">
+                                <p fxFlex>
+                                    {{
+                                        'SETTINGS.VIDEO_PLAYER_LABEL'
                                             | translate
-                                    "
-                                    matInput
-                                    type="url"
-                                    formControlName="epgUrl"
-                                />
-                            </mat-form-field>
-                            <button
-                                *ngIf="
-                                    (epgAvailable$ | async) &&
-                                    settingsForm.value.epgUrl
-                                "
-                                mat-icon-button
-                                color="primary"
-                                [matTooltip]="
-                                    'SETTINGS.REFRESH_EPG' | translate
-                                "
-                                type="button"
-                                (click)="fetchEpg()"
-                            >
-                                <mat-icon>refresh</mat-icon>
-                            </button>
-                        </p>
-                    </div>
-                    <p matLine></p>
-                </mat-list-item>
-                <mat-list-item>
-                    <div matLine fxLayout="row">
-                        <p fxFlex>
-                            {{ 'SETTINGS.VIDEO_PLAYER_LABEL' | translate }}
-                        </p>
-                        <p fxFlex fxLayoutAlign="start center">
-                            <mat-form-field appearance="fill">
-                                <mat-label>{{
-                                    'SETTINGS.VIDEO_PLAYER_PLACEHOLDER'
-                                        | translate
-                                }}</mat-label>
-                                <mat-select formControlName="player">
-                                    <mat-option
-                                        *ngFor="let player of players"
-                                        [value]="player.id"
-                                        >{{ player.label }}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                        </p>
-                    </div>
-                </mat-list-item>
-                <mat-list-item>
-                    <div matLine fxLayout="row">
-                        <p fxFlex>
-                            {{ 'SETTINGS.LANGUAGE' | translate }}
-                        </p>
-                        <p fxFlex fxLayoutAlign="start center">
-                            <mat-form-field appearance="fill">
-                                <mat-label>{{
-                                    'SETTINGS.VIDEO_PLAYER_PLACEHOLDER'
-                                        | translate
-                                }}</mat-label>
-                                <mat-select formControlName="language">
-                                    <mat-option
-                                        *ngFor="
-                                            let language of languageEnum
-                                                | keyvalue
-                                        "
-                                        [value]="language.value"
-                                        >{{
-                                            'LANGUAGES.' + language.key
+                                    }}
+                                </p>
+                                <p fxFlex fxLayoutAlign="start center">
+                                    <mat-form-field appearance="fill">
+                                        <mat-label>{{
+                                            'SETTINGS.VIDEO_PLAYER_PLACEHOLDER'
                                                 | translate
-                                        }}</mat-option
-                                    >
-                                </mat-select>
-                            </mat-form-field>
-                        </p>
-                    </div>
-                </mat-list-item>
-                <mat-list-item>
-                    <div matLine fxLayout="row">
-                        <p fxFlex>{{ 'SETTINGS.THEME' | translate }}</p>
-                        <p fxFlex>
-                            <mat-form-field appearance="fill">
-                                <mat-label>{{
-                                    'SETTINGS.VIDEO_PLAYER_PLACEHOLDER'
-                                        | translate
-                                }}</mat-label>
-                                <mat-select formControlName="theme">
-                                    <mat-option
-                                        *ngFor="
-                                            let theme of themeEnum | keyvalue
-                                        "
-                                        [value]="theme.value"
-                                        >{{
-                                            'THEMES.' + theme.value | translate
-                                        }}</mat-option
-                                    >
-                                </mat-select>
-                            </mat-form-field>
-                        </p>
-                    </div>
-                </mat-list-item>
-                <mat-list-item>
-                    <div matLine fxLayout="row">
-                        <p fxFlex>{{ 'SETTINGS.SHOW_CAPTIONS' | translate }}</p>
-                        <p fxFlex>
-                            <mat-checkbox
-                                formControlName="showCaptions"
-                            ></mat-checkbox>
-                        </p>
-                    </div>
-                </mat-list-item>
-                <mat-list-item>
-                    <div matLine fxLayout="row">
-                        <p fxFlex>{{ 'SETTINGS.VERSION' | translate }}</p>
-                        <p fxFlex>
-                            {{ version }} <br />
-                            {{ updateMessage }}
-                        </p>
-                    </div>
-                </mat-list-item>
-                <mat-list-item *ngIf="!isElectron">EPG is available in electron-based version of IPTVnator. Check it&nbsp;<a href="https://github.com/4gray/iptvnator/releases">here</a></mat-list-item>
-            </mat-list>
-        </mat-card-content>
-        <mat-card-actions>
-            <button
-                mat-button
-                color="accent"
-                type="submit"
-                [disabled]="settingsForm.pristine"
-            >
-                <mat-icon>save</mat-icon>
-                {{ 'SETTINGS.SAVE_CHANGES' | translate }}
-            </button>
-            <div fxFlex></div>
-            <button
-                mat-button
-                color="accent"
-                type="reset"
-                (click)="backToHome()"
-            >
-                <mat-icon>chevron_left</mat-icon>
-                {{ 'SETTINGS.BACK_TO_HOME' | translate }}
-            </button>
-        </mat-card-actions>
-    </mat-card>
-</form>
+                                        }}</mat-label>
+                                        <mat-select formControlName="player">
+                                            <mat-option
+                                                *ngFor="let player of players"
+                                                [value]="player.id"
+                                                >{{ player.label }}
+                                            </mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                </p>
+                            </div>
+                        </mat-list-item>
+                        <mat-list-item>
+                            <div matLine fxLayout="row">
+                                <p fxFlex>
+                                    {{ 'SETTINGS.LANGUAGE' | translate }}
+                                </p>
+                                <p fxFlex fxLayoutAlign="start center">
+                                    <mat-form-field appearance="fill">
+                                        <mat-label>{{
+                                            'SETTINGS.VIDEO_PLAYER_PLACEHOLDER'
+                                                | translate
+                                        }}</mat-label>
+                                        <mat-select formControlName="language">
+                                            <mat-option
+                                                *ngFor="
+                                                    let language of languageEnum
+                                                        | keyvalue
+                                                "
+                                                [value]="language.value"
+                                                >{{
+                                                    'LANGUAGES.' + language.key
+                                                        | translate
+                                                }}</mat-option
+                                            >
+                                        </mat-select>
+                                    </mat-form-field>
+                                </p>
+                            </div>
+                        </mat-list-item>
+                        <mat-list-item>
+                            <div matLine fxLayout="row">
+                                <p fxFlex>{{ 'SETTINGS.THEME' | translate }}</p>
+                                <p fxFlex>
+                                    <mat-form-field appearance="fill">
+                                        <mat-label>{{
+                                            'SETTINGS.VIDEO_PLAYER_PLACEHOLDER'
+                                                | translate
+                                        }}</mat-label>
+                                        <mat-select formControlName="theme">
+                                            <mat-option
+                                                *ngFor="
+                                                    let theme of themeEnum
+                                                        | keyvalue
+                                                "
+                                                [value]="theme.value"
+                                                >{{
+                                                    'THEMES.' + theme.value
+                                                        | translate
+                                                }}</mat-option
+                                            >
+                                        </mat-select>
+                                    </mat-form-field>
+                                </p>
+                            </div>
+                        </mat-list-item>
+                        <mat-list-item>
+                            <div matLine fxLayout="row">
+                                <p fxFlex>
+                                    {{ 'SETTINGS.SHOW_CAPTIONS' | translate }}
+                                </p>
+                                <p fxFlex>
+                                    <mat-checkbox
+                                        formControlName="showCaptions"
+                                    ></mat-checkbox>
+                                </p>
+                            </div>
+                        </mat-list-item>
+                        <mat-list-item>
+                            <div matLine fxLayout="row">
+                                <p fxFlex>
+                                    {{ 'SETTINGS.VERSION' | translate }}
+                                </p>
+                                <p fxFlex>
+                                    {{ version }} <br />
+                                    {{ updateMessage }}
+                                </p>
+                            </div>
+                        </mat-list-item>
+                        <mat-list-item *ngIf="!isElectron"
+                            >EPG is available in electron-based version of
+                            IPTVnator. Check it&nbsp;<a
+                                href="https://github.com/4gray/iptvnator/releases"
+                                >here</a
+                            ></mat-list-item
+                        >
+                    </mat-list>
+                </mat-card-content>
+                <mat-divider></mat-divider>
+                <mat-card-actions align="end">
+                    <button
+                        mat-button
+                        color="accent"
+                        type="reset"
+                        (click)="backToHome()"
+                    >
+                        <mat-icon>chevron_left</mat-icon>
+                        {{ 'SETTINGS.BACK_TO_HOME' | translate }}
+                    </button>
+                    <button
+                        mat-button
+                        color="accent"
+                        type="submit"
+                        [disabled]="settingsForm.pristine"
+                    >
+                        <mat-icon>save</mat-icon>
+                        {{ 'SETTINGS.SAVE_CHANGES' | translate }}
+                    </button>
+                </mat-card-actions>
+            </mat-card>
+        </form>
+    </div>
+</div>
diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss
index d6effb1c2..2f8190d91 100644
--- a/src/app/settings/settings.component.scss
+++ b/src/app/settings/settings.component.scss
@@ -1,4 +1,5 @@
 .card-header {
+    margin-top: 15px;
     margin-bottom: 15px;
 }
 
@@ -14,3 +15,23 @@ button {
 .mat-list-item {
     height: 70px !important;
 }
+
+.main-container {
+    display: grid;
+    grid-template-rows: 105px auto;
+    height: calc(100vh - 105px);
+}
+
+.settings-container {
+    overflow: auto;
+    height: calc(100vh - 140px);
+
+    .mat-card {
+        box-shadow: none;
+        background: none;
+    }
+}
+
+.mat-form-field {
+    width: 100%;
+}
diff --git a/src/app/settings/settings.component.spec.ts b/src/app/settings/settings.component.spec.ts
index f23f30ba0..798578996 100644
--- a/src/app/settings/settings.component.spec.ts
+++ b/src/app/settings/settings.component.spec.ts
@@ -1,29 +1,30 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 import { StorageMap } from '@ngx-pwa/local-storage';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { MockComponent, MockModule, MockPipe } from 'ng-mocks';
+import { of } from 'rxjs';
+import { EPG_FETCH } from '../../../shared/ipc-commands';
 /* eslint-disable @typescript-eslint/unbound-method */
 import { DataService } from '../services/data.service';
 import { ElectronServiceStub } from '../services/electron.service.stub';
-import { MatSelectModule } from '@angular/material/select';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatListModule } from '@angular/material/list';
-import { MatCardModule } from '@angular/material/card';
-import { HeaderComponent } from './../shared/components/header/header.component';
 import { TranslateServiceStub } from './../../testing/translate.stub';
-import { RouterTestingModule } from '@angular/router/testing';
-import { SettingsComponent } from './settings.component';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MockModule, MockPipe, MockComponent } from 'ng-mocks';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { EPG_FETCH } from '../../../shared/ipc-commands';
-import { Router } from '@angular/router';
-import { of } from 'rxjs';
-import { VideoPlayer } from './settings.interface';
+import { HeaderComponent } from './../shared/components/header/header.component';
 import { Language } from './language.enum';
+import { SettingsComponent } from './settings.component';
+import { VideoPlayer } from './settings.interface';
 import { Theme } from './theme.enum';
 
 class MatSnackBarStub {
@@ -86,6 +87,7 @@ describe('SettingsComponent', () => {
                     MockModule(MatListModule),
                     MockModule(MatFormFieldModule),
                     MockModule(MatCheckboxModule),
+                    MockModule(MatDividerModule),
                 ],
             }).compileComponents();
         })