valitydev/dashboard
14
0
Fork 0
mirror of https://github.com/valitydev/dashboard.git synced 2024-11-06 02:25:23 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FRONTEND-508. Hide side panel for mobile and tablet (#426)

Browse Source 
* hide side panel for mobile and tablet

* simplify components

* use breakpoint observer for hide side menu

* simplify code

* space between constructor and variable

* negate

* Small refactoring

Co-authored-by: Ildar Galeev <KeinAsylum@gmail.com>
This commit is contained in:
Denis Ezhov 2021-04-13 16:38:28 +03:00 committed by GitHub
parent fb97640c95
commit 765bc2ed99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 30 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/home/home.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="routerNavigationEnd$ | async">
<dsh-welcome-image *ngIf="hasBackground"></dsh-welcome-image>
<ng-container *ngTemplateOutlet="(isMobileScreen$ | async) ? mobile : laptop"> </ng-container>
<ng-container *ngTemplateOutlet="(isXSmallSmall$ | async) ? mobile : laptop"> </ng-container>
</div>
<ng-template #content>

19
src/app/home/home.component.ts
View File

@ -1,13 +1,12 @@
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router, RouterEvent } from '@angular/router';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { Observable } from 'rxjs';
import { filter, map, take } from 'rxjs/operators';
import { filter, map, pluck, take } from 'rxjs/operators';
import { ThemeManager } from '../theme-manager';
import { ROOT_ROUTE_PATH } from './navigation/consts';
import { ScreenSize } from './services/screen-size-control/interfaces/screen-size';
import { ScreenSizeControlService } from './services/screen-size-control/screen-size-control.service';
@UntilDestroy()
@Component({
@ -17,13 +16,13 @@ import { ScreenSizeControlService } from './services/screen-size-control/screen-
})
export class HomeComponent implements OnInit {
routerNavigationEnd$: Observable<boolean>;
isMobileScreen$: Observable<boolean>;
isXSmallSmall$: Observable<boolean>;
constructor(
private screenSizeController: ScreenSizeControlService,
private router: Router,
// need to create class when home component was init
private themeManager: ThemeManager
private themeManager: ThemeManager,
private breakpointObserver: BreakpointObserver
) {}
get hasBackground(): boolean {
@ -41,10 +40,8 @@ export class HomeComponent implements OnInit {
take(1),
untilDestroyed(this)
);
this.screenSizeController.init();
this.isMobileScreen$ = this.screenSizeController.screenSize$.pipe(
map((screenSize: ScreenSize) => screenSize === ScreenSize.MOBILE)
);
this.isXSmallSmall$ = this.breakpointObserver
.observe([Breakpoints.XSmall, Breakpoints.Small])
.pipe(pluck('matches'));
}
}

2
src/app/home/home.module.ts
View File

@ -9,7 +9,6 @@ import { HomeComponent } from './home.component';
import { LaptopGridModule } from './laptop-grid/laptop-grid.module';
import { MobileGridModule } from './mobile-grid/mobile-grid.module';
import { NavigationModule } from './navigation';
import { ScreenSizeControlModule } from './services/screen-size-control/screen-size-control.module';
import { ToolbarModule } from './toolbar';
import { WelcomeImageModule } from './welcome-image';
@ -21,7 +20,6 @@ import { WelcomeImageModule } from './welcome-image';
FlexLayoutModule,
MatIconModule,
WelcomeImageModule,
ScreenSizeControlModule,
MobileGridModule,
LaptopGridModule,
NavigationModule,

1
src/app/home/services/screen-size-control/consts.ts
View File

@ -1 +0,0 @@
export const MOBILE_BREAKPOINT = 530;

4
src/app/home/services/screen-size-control/interfaces/screen-size.ts
View File

@ -1,4 +0,0 @@
export enum ScreenSize {
MOBILE = 'mobile',
LAPTOP = 'laptop',
}

4
src/app/home/services/screen-size-control/interfaces/window-size.ts
View File

@ -1,4 +0,0 @@
export interface WindowSize {
height: number;
width: number;
}

8
src/app/home/services/screen-size-control/screen-size-control.module.ts
View File

@ -1,8 +0,0 @@
import { NgModule } from '@angular/core';
import { ScreenSizeControlService } from './screen-size-control.service';
@NgModule({
providers: [ScreenSizeControlService],
})
export class ScreenSizeControlModule {}

18
src/app/home/services/screen-size-control/screen-size-control.service.spec.ts
View File

@ -1,18 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { ScreenSizeControlService } from './screen-size-control.service';
describe('ScreenSizeControlService', () => {
let service: ScreenSizeControlService;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ScreenSizeControlService],
});
service = TestBed.inject(ScreenSizeControlService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

45
src/app/home/services/screen-size-control/screen-size-control.service.ts
View File

@ -1,45 +0,0 @@
import { Injectable, NgZone } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { fromEvent, Observable, Subject } from 'rxjs';
import { distinctUntilChanged, map, shareReplay, startWith } from 'rxjs/operators';
import { MOBILE_BREAKPOINT } from './consts';
import { ScreenSize } from './interfaces/screen-size';
import { WindowSize } from './interfaces/window-size';
@UntilDestroy()
@Injectable()
export class ScreenSizeControlService {
screenSize$: Observable<ScreenSize>;
private screenWidth$ = new Subject<number>();
constructor(private zone: NgZone) {}
init(): void {
this.screenSize$ = this.screenWidth$.pipe(
startWith(window.innerWidth),
map((size: number) => (size > MOBILE_BREAKPOINT ? ScreenSize.LAPTOP : ScreenSize.MOBILE)),
distinctUntilChanged(),
shareReplay(1)
);
this.zone.runOutsideAngular(() => {
const windowSizes$ = fromEvent(window, 'resize').pipe(
map(({ target }: Event) => target as Window),
map(({ innerHeight: height, innerWidth: width }: Window) => {
return {
height,
width,
};
})
);
windowSizes$.pipe(untilDestroyed(this)).subscribe(({ width }: WindowSize) => {
this.zone.run(() => {
this.screenWidth$.next(width);
});
});
});
}
}

2
src/app/sections/payment-section/payment-section.component.html
View File

@ -1,5 +1,5 @@
<div class="dsh-section-container" fxLayout fxLayoutGap="24px">
<div class="dsh-side-section" fxLayout="column" fxLayoutGap="32px">
<div *ngIf="isNotXSmallSmall$ | async" class="dsh-side-section" fxLayout="column" fxLayoutGap="32px">
<dsh-nav></dsh-nav>
<dsh-balances></dsh-balances>
</div>

10
src/app/sections/payment-section/payment-section.component.ts
View File

@ -1,4 +1,6 @@
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component } from '@angular/core';
import { map, pluck } from 'rxjs/operators';
import { PaymentSectionService } from './payment-section.service';
@ -9,7 +11,13 @@ import { PaymentSectionService } from './payment-section.service';
})
export class PaymentSectionComponent {
isTestEnvBannerVisible$ = this.paymentSectionService.isTestEnvBannerVisible$;
constructor(private paymentSectionService: PaymentSectionService) {}
isNotXSmallSmall$ = this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(
pluck('matches'),
map((matches) => !matches)
);
constructor(private paymentSectionService: PaymentSectionService, private breakpointObserver: BreakpointObserver) {}
close() {
this.paymentSectionService.close();

2
src/app/sections/wallet-section/wallet-section.component.html
View File

@ -1,5 +1,5 @@
<div class="dsh-section-container" fxLayout="row" fxLayoutGap="24px">
<dsh-nav class="dsh-side-section"></dsh-nav>
<dsh-nav *ngIf="isNotXSmallSmall$ | async" class="dsh-side-section"></dsh-nav>
<div fxFlex>
<router-outlet></router-outlet>
</div>

11
src/app/sections/wallet-section/wallet-section.component.ts
View File

@ -1,8 +1,17 @@
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { map, pluck } from 'rxjs/operators';
@Component({
templateUrl: 'wallet-section.component.html',
styleUrls: ['../main-sections.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WalletSectionComponent {}
export class WalletSectionComponent {
isNotXSmallSmall$ = this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(
pluck('matches'),
map((matches) => !matches)
);
constructor(private breakpointObserver: BreakpointObserver) {}
}