machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3631 from mempool/simon/improved-warning-message

Browse Source 
Redesigned testnet alert
This commit is contained in:
wiz 2023-04-03 22:09:52 +09:00 committed by GitHub
commit bdbb1dcf8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 66 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
View File

@ -90,6 +90,8 @@
</nav>
</header>
<app-testnet-alert *ngIf="network.val === 'liquidtestnet'"></app-testnet-alert>
<br />
<router-outlet></router-outlet>

15
frontend/src/app/components/master-page/master-page.component.html
View File

@ -62,20 +62,7 @@
</nav>
</header>
<div *ngIf="network.val === 'testnet' || network.val === 'signet' || network.val === 'liquidtestnet'">
<div class="container p-lg-0 pb-0" style="max-width: 100%; margin-top: 7px" *ngIf="storageService.getValue('hideWarning') !== 'hidden'">
<div class="alert alert-danger mb-0 text-center">
<div class="d-flex justify-content-center align-items-center">
<fa-icon class="between-arrow mr-1" [icon]="['fas', 'exclamation-triangle']" [fixedWidth]="true"></fa-icon>
<span i18n="warning-testnet">This is a test network. Coins have no value</span>
<fa-icon class="between-arrow ml-1" [icon]="['fas', 'exclamation-triangle']" [fixedWidth]="true"></fa-icon>
</div>
<button type="button" class="close" (click)="dismissWarning()">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
</div>
<app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
<br />

15
frontend/src/app/components/master-page/master-page.component.scss
View File

@ -193,18 +193,3 @@ nav {
font-size: 7px;
}
}
.close {
position: absolute;
color: black;
right: 10px;
top: 17px;
@media (max-width: 620px) {
right: 10px;
top: 0px;
};
@media (min-width: 992px) {
right: 10px;
top: 13px;
};
}

8
frontend/src/app/components/master-page/master-page.component.ts
View File

@ -1,10 +1,9 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Env, StateService } from '../../services/state.service';
import { Observable, merge, of } from 'rxjs';
import { LanguageService } from '../../services/language.service';
import { EnterpriseService } from '../../services/enterprise.service';
import { NavigationService } from '../../services/navigation.service';
import { StorageService } from '../../services/storage.service';
@Component({
selector: 'app-master-page',
@ -27,7 +26,6 @@ export class MasterPageComponent implements OnInit {
private languageService: LanguageService,
private enterpriseService: EnterpriseService,
private navigationService: NavigationService,
public storageService: StorageService
) { }
ngOnInit() {
@ -48,8 +46,4 @@ export class MasterPageComponent implements OnInit {
onResize(event: any) {
this.isMobile = window.innerWidth <= 767.98;
}
dismissWarning() {
this.storageService.setValue('hideWarning', 'hidden');
}
}

8
frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html Normal file
View File

@ -0,0 +1,8 @@
<div class="container p-lg-0 pb-0" style="max-width: 100%; margin-top: 7px" *ngIf="storageService.getValue('hideWarning') !== 'hidden'">
<div class="alert alert-danger mb-0 text-center">
<div class="message-container" i18n="warning-testnet">This is a test network. Coins have no value.</div>
<button type="button" class="close" (click)="dismissWarning()">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>

31
frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss Normal file
View File

@ -0,0 +1,31 @@
.alert-danger {
color: #fff;
background-color: #b71c1c;
border-color: #b71c1c;
padding: 0.5rem 1.25rem;
margin: 0px 10px 0px 10px;
display: flex;
justify-content: center;
}
.message-container {
display: flex;
margin-left: auto;
}
.close {
display: flex;
color: #fff;
align-items: center;
}
button {
display: flex;
margin-left: auto;
}
span {
position: relative;
top: -2px;
}

20
frontend/src/app/shared/components/testnet-alert/testnet-alert.component.ts Normal file
View File

@ -0,0 +1,20 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { StorageService } from '../../../services/storage.service';
@Component({
selector: 'app-testnet-alert',
templateUrl: './testnet-alert.component.html',
styleUrls: ['./testnet-alert.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TestnetAlertComponent {
constructor(
public storageService: StorageService,
) { }
dismissWarning(): void {
this.storageService.setValue('hideWarning', 'hidden');
}
}

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

@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft } from '@fortawesome/free-solid-svg-icons';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MasterPageComponent } from '../components/master-page/master-page.component';
import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@ -84,6 +84,7 @@ import { SearchResultsComponent } from '../components/search-form/search-results
import { TimestampComponent } from './components/timestamp/timestamp.component';
import { ToggleComponent } from './components/toggle/toggle.component';
import { GeolocationComponent } from '../shared/components/geolocation/geolocation.component';
import { TestnetAlertComponent } from './components/testnet-alert/testnet-alert.component';
@NgModule({
declarations: [
@ -162,6 +163,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
TimestampComponent,
ToggleComponent,
GeolocationComponent,
TestnetAlertComponent,
],
imports: [
CommonModule,
@ -309,6 +311,5 @@ export class SharedModule {
library.addIcons(faQrcode);
library.addIcons(faArrowRightArrowLeft);
library.addIcons(faExchangeAlt);
library.addIcons(faExclamationTriangle);
}
}