mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-23 22:46:54 +01:00
Code Issues Projects Releases Wiki Activity

Create shared toggle component to re-use

Browse source
This commit is contained in:
nymkappa 2022-07-27 10:48:27 +02:00
parent 1b3faa1203
commit 16db740986
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
7 changed files with 94 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/app/lightning/node/node.component.html
View file

@ -140,14 +140,7 @@
<div class="d-flex justify-content-between" *ngIf="!error">
<h2>Channels ({{ channelsListStatus === 'open' ? node.channel_active_count : node.channel_closed_count }})</h2>
<div class="d-flex align-items-center justify-content-end">
<span style="margin-bottom: 0.5rem">List</span>&nbsp;
<label class="switch">
<input type="checkbox" (change)="channelsListModeChange($event)">
<span class="slider round"></span>
</label>
&nbsp;<span style="margin-bottom: 0.5rem">Map</span>
</div>
<app-toggle [textLeft]="'List'" [textRight]="'Map'" (toggleStatusChanged)="channelsListModeChange($event)"></app-toggle>
</div>
<app-nodes-channels-map *ngIf="channelsListMode === 'map' && !error" [style]="'nodepage'" [publicKey]="node.public_key">

63
frontend/src/app/lightning/node/node.component.scss
View file

@ -57,66 +57,3 @@ app-fiat {
margin-left: 10px;
}
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}

4
frontend/src/app/lightning/node/node.component.ts
View file

@ -75,8 +75,8 @@ export class NodeComponent implements OnInit {
this.selectedSocketIndex = index;
}
channelsListModeChange(e) {
if (e.target.checked === true) {
channelsListModeChange(toggle) {
if (toggle === true) {
this.channelsListMode = 'map';
} else {
this.channelsListMode = 'list';

8
frontend/src/app/shared/components/toggle/toggle.component.html Normal file
View file

@ -0,0 +1,8 @@
<div class="d-flex align-items-center justify-content-end">
<span style="margin-bottom: 0.5rem">{{ textLeft }}</span>&nbsp;
<label class="switch">
<input type="checkbox" (change)="onToggleStatusChanged($event)">
<span class="slider round"></span>
</label>
&nbsp;<span style="margin-bottom: 0.5rem">{{ textRight }}</span>
</div>

62
frontend/src/app/shared/components/toggle/toggle.component.scss Normal file
View file

@ -0,0 +1,62 @@
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}

17
frontend/src/app/shared/components/toggle/toggle.component.ts Normal file
View file

@ -0,0 +1,17 @@
import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter } from '@angular/core';
@Component({
selector: 'app-toggle',
templateUrl: './toggle.component.html',
styleUrls: ['./toggle.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ToggleComponent {
@Output() toggleStatusChanged = new EventEmitter<boolean>();
@Input() textLeft: string;
@Input() textRight: string;
onToggleStatusChanged(e): void {
this.toggleStatusChanged.emit(e.target.checked);
}
}

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

@ -80,6 +80,7 @@ import { ChangeComponent } from '../components/change/change.component';
import { SatsComponent } from './components/sats/sats.component';
import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
import { TimestampComponent } from './components/timestamp/timestamp.component';
import { ToggleComponent } from './components/toggle/toggle.component';
@NgModule({
declarations: [
@ -154,6 +155,7 @@ import { TimestampComponent } from './components/timestamp/timestamp.component';
SatsComponent,
SearchResultsComponent,
TimestampComponent,
ToggleComponent,
],
imports: [
CommonModule,
@ -255,6 +257,7 @@ import { TimestampComponent } from './components/timestamp/timestamp.component';
SatsComponent,
SearchResultsComponent,
TimestampComponent,
ToggleComponent,
]
})
export class SharedModule {