48 lines
1.9 KiB
HTML
48 lines
1.9 KiB
HTML
<app-popup (closeRequest)="close()" [position]="position()">
|
|
<div header-left class="profile-section">
|
|
<img ngSrc="/guest_profile.png" alt="profile" class="avatar" width="24" height="24">
|
|
<span>{{ settingsService.userName() }}</span>
|
|
</div>
|
|
|
|
<div class="settings-content">
|
|
<section class="settings-category">
|
|
<label class="category-header">{{ translation.settings.language }}</label>
|
|
|
|
<div class="settings-container">
|
|
<dropdown [options]="languages"
|
|
[value]="settingsService.language()"
|
|
(selectionChange)="onLanguageChange($event)"
|
|
icon="language"></dropdown>
|
|
</div>
|
|
|
|
<div class="settings-container">
|
|
<div class="settings-name">
|
|
<span class="material-symbols-outlined icon-24 settings-icon">match_case</span>
|
|
<span>{{ translation.settings.romanisation }}</span>
|
|
</div>
|
|
<switch [isActive]="settingsService.romanisation()" (toggle)="onRomanisationChange($event)"></switch>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-category">
|
|
<label class="category-header">{{ translation.settings.appearance }}</label>
|
|
<div class="settings-container">
|
|
<div class="settings-name">
|
|
<span class="material-symbols-outlined icon-24 settings-icon">dark_mode</span>
|
|
<span>{{ translation.settings.darkMode }}</span>
|
|
</div>
|
|
<switch [isActive]="settingsService.darkMode()" (toggle)="onDarkModeChange($event)"></switch>
|
|
</div>
|
|
|
|
<div class="settings-container">
|
|
<div class="settings-name">
|
|
<span class="material-symbols-outlined icon-24 settings-icon">motion_photos_paused</span>
|
|
<span>{{ translation.settings.reduceAnimation }}</span>
|
|
</div>
|
|
<switch [isActive]="settingsService.reduceAnimation()" (toggle)="onReduceAnimationChange($event)"></switch>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
</app-popup>
|