projects/web-mev/src/app/features/settings/settings/settings-container.component.ts
Settings Component
Display user's settings (theme, language, night-mode, animations) Currently it is hidden and unavailable for users
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | mev-settings |
| styleUrls | ./settings-container.component.scss |
| templateUrl | ./settings-container.component.html |
Properties |
Methods |
constructor(store: Store
|
||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onAutoNightModeToggle | |||
onAutoNightModeToggle(undefined)
|
|||
|
Parameters :
Returns :
void
|
| onElementsAnimationsToggle | |||
onElementsAnimationsToggle(undefined)
|
|||
|
Parameters :
Returns :
void
|
| onLanguageSelect | |||
onLanguageSelect(undefined)
|
|||
|
Parameters :
Returns :
void
|
| onPageAnimationsToggle | |||
onPageAnimationsToggle(undefined)
|
|||
|
Parameters :
Returns :
void
|
| onStickyHeaderToggle | |||
onStickyHeaderToggle(undefined)
|
|||
|
Parameters :
Returns :
void
|
| onThemeSelect | |||
onThemeSelect(undefined)
|
|||
|
Parameters :
Returns :
void
|
| routeAnimationsElements |
Default value : ROUTE_ANIMATIONS_ELEMENTS
|
| settings$ |
Type : Observable<SettingsState>
|
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { ROUTE_ANIMATIONS_ELEMENTS } from '../../../core/core.module';
import {
actionSettingsChangeAnimationsElements,
actionSettingsChangeAnimationsPage,
actionSettingsChangeAutoNightMode,
actionSettingsChangeLanguage,
actionSettingsChangeTheme,
actionSettingsChangeStickyHeader
} from '../../../core/settings/settings.actions';
import { SettingsState, State } from '../../../core/settings/settings.model';
import { selectSettings } from '../../../core/settings/settings.selectors';
/**
* Settings Component
*
* Display user's settings (theme, language, night-mode, animations)
* Currently it is hidden and unavailable for users
*/
@Component({
selector: 'mev-settings',
templateUrl: './settings-container.component.html',
styleUrls: ['./settings-container.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SettingsContainerComponent implements OnInit {
routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
settings$: Observable<SettingsState>;
themes = [
{ value: 'DEFAULT-THEME', label: 'blue' },
{ value: 'LIGHT-THEME', label: 'light' },
{ value: 'NATURE-THEME', label: 'nature' },
{ value: 'BLACK-THEME', label: 'dark' }
];
languages = [
{ value: 'en', label: 'en' },
{ value: 'de', label: 'de' },
{ value: 'sk', label: 'sk' },
{ value: 'fr', label: 'fr' },
{ value: 'es', label: 'es' },
{ value: 'pt-br', label: 'pt-br' },
{ value: 'zh-cn', label: 'zh-cn' },
{ value: 'he', label: 'he' }
];
constructor(private store: Store<State>) {}
ngOnInit() {
this.settings$ = this.store.pipe(select(selectSettings));
}
onLanguageSelect({ value: language }) {
this.store.dispatch(actionSettingsChangeLanguage({ language }));
}
onThemeSelect({ value: theme }) {
this.store.dispatch(actionSettingsChangeTheme({ theme }));
}
onAutoNightModeToggle({ checked: autoNightMode }) {
this.store.dispatch(actionSettingsChangeAutoNightMode({ autoNightMode }));
}
onStickyHeaderToggle({ checked: stickyHeader }) {
this.store.dispatch(actionSettingsChangeStickyHeader({ stickyHeader }));
}
onPageAnimationsToggle({ checked: pageAnimations }) {
this.store.dispatch(actionSettingsChangeAnimationsPage({ pageAnimations }));
}
onElementsAnimationsToggle({ checked: elementsAnimations }) {
this.store.dispatch(
actionSettingsChangeAnimationsElements({ elementsAnimations })
);
}
}
<div class="container">
<div class="row">
<div class="col-sm-12"><h1>{{ 'mev.settings.title' | translate }}</h1></div>
</div>
<br>
<ng-container *ngIf="settings$ | async as settings">
<div class="row">
<div class="col-md-6 group" [ngClass]="routeAnimationsElements">
<h2>{{ 'mev.settings.general.title' | translate }}</h2>
<div class="icon-form-field">
<mat-icon color="accent"><fa-icon icon="language" color="accent"></fa-icon></mat-icon>
<mat-form-field>
<mat-select [placeholder]="'mev.settings.general.placeholder' | translate"
[ngModel]="settings.language"
(selectionChange)="onLanguageSelect($event)"
name="language">
<mat-option *ngFor="let l of languages" [value]="l.value">
{{ 'mev.settings.general.language.' + l.label | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="icon-form-field">
<mat-icon color="accent"><fa-icon icon="bars" color="accent"></fa-icon></mat-icon>
<mat-placeholder>{{ 'mev.settings.themes.sticky-header' | translate }}
</mat-placeholder>
<mat-slide-toggle
[checked]="settings.stickyHeader"
(change)="onStickyHeaderToggle($event)">
</mat-slide-toggle>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 group" [ngClass]="routeAnimationsElements">
<h2>{{ 'mev.settings.themes.title' | translate }}</h2>
<div class="icon-form-field">
<mat-icon color="accent"><fa-icon icon="paint-brush" color="accent"></fa-icon></mat-icon>
<mat-form-field>
<mat-select [placeholder]="'mev.settings.themes.placeholder' | translate"
[ngModel]="settings.theme"
(selectionChange)="onThemeSelect($event)"
name="themes">
<mat-option *ngFor="let t of themes" [value]="t.value">
{{ 'mev.settings.themes.' + t.label | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="icon-form-field">
<mat-icon color="accent"><fa-icon icon="lightbulb" color="accent"></fa-icon></mat-icon>
<mat-placeholder>{{ 'mev.settings.themes.night-mode' | translate }}
</mat-placeholder>
<mat-slide-toggle
[checked]="settings.autoNightMode"
(change)="onAutoNightModeToggle($event)">
</mat-slide-toggle>
</div>
</div>
<div class="col-md-6 group" [ngClass]="routeAnimationsElements">
<h2>{{ 'mev.settings.animations.title' | translate }}</h2>
<div class="icon-form-field">
<mat-icon color="accent"><mat-icon color="accent"><fa-icon icon="window-maximize"></fa-icon></mat-icon></mat-icon>
<mat-placeholder>{{ 'mev.settings.animations.page' | translate }}
</mat-placeholder>
<mat-slide-toggle
matTooltip="Sorry, this feature is disabled in IE, EDGE and Safari"
matTooltipPosition="before"
*ngIf="settings.pageAnimationsDisabled"
disabled>
</mat-slide-toggle>
<mat-slide-toggle
*ngIf="!settings.pageAnimationsDisabled"
[checked]="settings.pageAnimations"
(change)="onPageAnimationsToggle($event)">
</mat-slide-toggle>
</div>
<div class="icon-form-field">
<mat-icon color="accent"><fa-icon icon="stream" color="accent"></fa-icon></mat-icon>
<mat-placeholder>{{ 'mev.settings.animations.elements' | translate }}
</mat-placeholder>
<mat-slide-toggle
[checked]="settings.elementsAnimations"
(change)="onElementsAnimationsToggle($event)">
</mat-slide-toggle>
</div>
</div>
</div>
</ng-container>
</div>
./settings-container.component.scss
.container {
margin-top: 20px;
}
h1 {
margin: 0 0 20px 0;
text-transform: uppercase;
}
h2 {
margin: 0 0 10px 0;
text-transform: uppercase;
}
.group {
margin: 0 0 40px 0;
}
.icon-form-field {
position: relative;
display: flex;
height: 65.5px;
align-items: center;
mat-placeholder {
flex: 2 1 auto;
}
}
mat-icon {
margin: 0 6px 6px 0;
font-size: 20px;
}
mat-form-field {
flex: 1 0 auto;
}