highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-05-31 10:10:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add theme selector to main dashboard

Browse Source
This commit is contained in:
Mononaut 2023-01-02 13:08:25 -06:00 committed by natsoni
parent 4c205eb09d
commit 1ca05a029a
No known key found for this signature in database
GPG Key ID: C65917583181743B
5 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/components/theme-selector/theme-selector.component.html Normal file
View File

@ -0,0 +1,6 @@
<div [formGroup]="themeForm" class="text-small text-center ml-2">
<select formControlName="theme" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 160px;" (change)="changeTheme()">
<option value="default" i18n="theme.mempool-theme">Mempool Theme</option>
<option value="contrast" i18n="theme.high-contrast">High Contrast</option>
</select>
</div>

0
frontend/src/app/components/theme-selector/theme-selector.component.scss Normal file
View File

31
frontend/src/app/components/theme-selector/theme-selector.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { ThemeService } from '../../services/theme.service';
@Component({
selector: 'app-theme-selector',
templateUrl: './theme-selector.component.html',
styleUrls: ['./theme-selector.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ThemeSelectorComponent implements OnInit {
themeForm: UntypedFormGroup;
themes = ['default', 'contrast'];
constructor(
private formBuilder: UntypedFormBuilder,
private themeService: ThemeService,
) { }
ngOnInit() {
this.themeForm = this.formBuilder.group({
theme: ['default']
});
this.themeForm.get('theme')?.setValue(this.themeService.theme);
}
changeTheme() {
const newTheme = this.themeForm.get('theme')?.value;
this.themeService.apply(newTheme);
}
}

3
frontend/src/app/shared/components/global-footer/global-footer.component.html
View File

@ -21,6 +21,9 @@
<div class="selector">
<app-rate-unit-selector></app-rate-unit-selector>
</div>
<div class="selector">
<app-theme-selector></app-theme-selector>
</div>
<a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]">
<span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
<span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span>

3
frontend/src/app/shared/shared.module.ts
View File

@ -34,6 +34,7 @@ import { ReactiveFormsModule } from '@angular/forms';
import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component';
import { RateUnitSelectorComponent } from '../components/rate-unit-selector/rate-unit-selector.component';
import { ThemeSelectorComponent } from '../components/theme-selector/theme-selector.component';
import { BrowserOnlyDirective } from './directives/browser-only.directive';
import { ServerOnlyDirective } from './directives/server-only.directive';
import { ColoredPriceDirective } from './directives/colored-price.directive';
@ -119,6 +120,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
TxFeeRatingComponent,
LanguageSelectorComponent,
FiatSelectorComponent,
ThemeSelectorComponent,
RateUnitSelectorComponent,
ScriptpubkeyTypePipe,
RelativeUrlPipe,
@ -257,6 +259,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
LanguageSelectorComponent,
FiatSelectorComponent,
RateUnitSelectorComponent,
ThemeSelectorComponent,
ScriptpubkeyTypePipe,
RelativeUrlPipe,
Hex2asciiPipe,