Renamed isMobileView() into isXsOrSm()

2025-10-14 21:43:04 +00:00 · 2018-05-23 18:55:20 +02:00
parent e0efa5f8e5
commit b427b4846a
9 changed files with 32 additions and 32 deletions
--- a/src/app/+search-page/search-page.component.html
+++ b/src/app/+search-page/search-page.component.html
@@ -1,8 +1,8 @@
 <div class="container">
  <div class="search-page row">
-        <ds-search-sidebar *ngIf="!(isMobileView$ | async)" class="col-3 sidebar-md-sticky"
-                         id="search-sidebar"
-                         [resultCount]="(resultsRD$ | async)?.pageInfo?.totalElements"></ds-search-sidebar>
+        <ds-search-sidebar *ngIf="!(isXsOrSm$ | async)" class="col-3 sidebar-md-sticky"
+                           id="search-sidebar"
+                           [resultCount]="(resultsRD$ | async)?.pageInfo?.totalElements"></ds-search-sidebar>
        <div class="col-12 col-md-9">
        <ds-search-form id="search-form"
                        [query]="(searchOptions$ | async)?.query"
@@ -14,7 +14,7 @@
        <div id="search-body"
             class="row-offcanvas row-offcanvas-left"
             [@pushInOut]="(isSidebarCollapsed() | async) ? 'collapsed' : 'expanded'">
-          <ds-search-sidebar *ngIf="(isMobileView$ | async)" class="col-12"
+          <ds-search-sidebar *ngIf="(isXsOrSm$ | async)" class="col-12"
                             id="search-sidebar-sm"
                             [resultCount]="(resultsRD$ | async)?.pageInfo?.totalElements"
                             (toggleSidebar)="closeSidebar()"
--- a/src/app/+search-page/search-page.component.spec.ts
+++ b/src/app/+search-page/search-page.component.spec.ts
@@ -6,6 +6,7 @@ import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { cold, hot } from 'jasmine-marbles';
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
 import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 import { CommunityDataService } from '../core/data/community-data.service';
 import { HostWindowService } from '../shared/host-window.service';
@@ -77,7 +78,8 @@ describe('SearchPageComponent', () => {
          provide: HostWindowService, useValue: jasmine.createSpyObj('hostWindowService',
          {
            isXs: Observable.of(true),
-            isSm: Observable.of(false)
+            isSm: Observable.of(false),
+            isXsOrSm: Observable.of(true)
          })
        },
        {
--- a/src/app/+search-page/search-page.component.ts
+++ b/src/app/+search-page/search-page.component.ts
@@ -34,7 +34,7 @@ export class SearchPageComponent implements OnInit {
  searchOptions$: Observable<PaginatedSearchOptions>;
  sortConfig: SortOptions;
  scopeListRD$: Observable<RemoteData<PaginatedList<Community>>>;
-  isMobileView$: Observable<boolean>;
+  isXsOrSm$: Observable<boolean>;
  pageSize;
  pageSizeOptions;
  defaults = {
@@ -52,11 +52,7 @@ export class SearchPageComponent implements OnInit {
              private sidebarService: SearchSidebarService,
              private windowService: HostWindowService,
              private filterService: SearchFilterService) {
-    this.isMobileView$ = Observable.combineLatest(
-      this.windowService.isXs(),
-      this.windowService.isSm(),
-      ((isXs, isSm) => isXs || isSm)
-    );
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
    this.scopeListRD$ = communityService.findAll();
  }

--- a/src/app/+search-page/search-sidebar/search-sidebar.service.spec.ts
+++ b/src/app/+search-page/search-sidebar/search-sidebar.service.spec.ts
@@ -3,6 +3,7 @@ import { SearchSidebarService } from './search-sidebar.service';
 import { AppState } from '../../app.reducer';
 import { async, inject, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
 import { SearchSidebarCollapseAction, SearchSidebarExpandAction } from './search-sidebar.actions';
 import { HostWindowService } from '../../shared/host-window.service';

@@ -17,7 +18,8 @@ describe('SearchSidebarService', () => {
  const windowService = jasmine.createSpyObj('hostWindowService',
    {
      isXs: Observable.of(true),
-      isSm: Observable.of(false)
+      isSm: Observable.of(false),
+      isXsOrSm: Observable.of(true)
    });
  beforeEach(async(() => {
    TestBed.configureTestingModule({
--- a/src/app/+search-page/search-sidebar/search-sidebar.service.ts
+++ b/src/app/+search-page/search-sidebar/search-sidebar.service.ts
@@ -11,22 +11,17 @@ const sidebarCollapsedSelector = createSelector(sidebarStateSelector, (sidebar:

@Injectable()
 export class SearchSidebarService {
-  private isMobileView: Observable<boolean>;
+  private isXsOrSm$: Observable<boolean>;
  private isCollapsdeInStored: Observable<boolean>;

  constructor(private store: Store<AppState>, private windowService: HostWindowService) {
-    this.isMobileView =
-      Observable.combineLatest(
-        this.windowService.isXs(),
-        this.windowService.isSm(),
-        ((isXs, isSm) => isXs || isSm)
-      );
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
    this.isCollapsdeInStored = this.store.select(sidebarCollapsedSelector);
  }

  get isCollapsed(): Observable<boolean> {
    return Observable.combineLatest(
-      this.isMobileView,
+      this.isXsOrSm$,
      this.isCollapsdeInStored,
      (mobile, store) => mobile ? store : true);
  }
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -1,5 +1,5 @@
-<ul class="navbar-nav" [ngClass]="{'mr-auto': (windowService.isMobileView() | async)}">
-  <li *ngIf="!(isAuthenticated | async) && !(windowService.isMobileView() | async) && (showAuth | async)" class="nav-item dropdown" (click)="$event.stopPropagation();">
+<ul class="navbar-nav" [ngClass]="{'mr-auto': (isXsOrSm$ | async)}">
+  <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item dropdown" (click)="$event.stopPropagation();">
    <div ngbDropdown placement="bottom-right" class="d-inline-block float-right" @fadeInOut>
      <a href="#" id="dropdownLogin" class="nav-link" (click)="$event.preventDefault()" ngbDropdownToggle><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> {{ 'nav.login' | translate }}<span class="caret"></span></a>
      <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu aria-labelledby="dropdownLogin">
@@ -7,18 +7,18 @@
      </div>
    </div>
  </li>
-  <li *ngIf="!(isAuthenticated | async) && (windowService.isMobileView() | async)" class="nav-item">
+  <li *ngIf="!(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
    <a id="loginLink" class="nav-link" routerLink="/login" routerLinkActive="active"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> {{ 'nav.login' | translate }}<span class="sr-only">(current)</span></a>
  </li>
-  <li *ngIf="(isAuthenticated | async) && !(windowService.isMobileView() | async) && (showAuth | async)" class="nav-item">
-    <div ngbDropdown placement="bottom-right" class="d-inline-block" [ngClass]="{'float-right': !(windowService.isMobileView() | async)}" @fadeInOut>
+  <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
+    <div ngbDropdown placement="bottom-right" class="d-inline-block" [ngClass]="{'float-right': !(isXsOrSm$ | async)}" @fadeInOut>
      <a href="#" id="dropdownUser" class="nav-link" (click)="$event.preventDefault()" ngbDropdownToggle><i class="fa fa-user fa-fw" aria-hidden="true"></i>Hello {{(user | async).name}}<span class="caret"></span></a>
      <div id="logoutDropdownMenu" ngbDropdownMenu aria-labelledby="dropdownUser">
        <ds-log-out></ds-log-out>
      </div>
    </div>
  </li>
-  <li *ngIf="(isAuthenticated | async) && (windowService.isMobileView() | async)" class="nav-item">
+  <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
    <a id="logoutLink" class="nav-link" routerLink="/logout" routerLinkActive="active"><i class="fa fa-sign-out fa-fw" aria-hidden="true"></i> {{ 'nav.logout' | translate }}<span class="sr-only">(current)</span></a>
  </li>
 </ul>
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
@@ -30,12 +30,15 @@ export class AuthNavMenuComponent implements OnInit {
   */
  public loading: Observable<boolean>;

+  public isXsOrSm$: Observable<boolean>;
+
  public showAuth = Observable.of(false);

  public user: Observable<Eperson>;

  constructor(private store: Store<AppState>,
-              public windowService: HostWindowService) {
+              private windowService: HostWindowService) {
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
  }

  ngOnInit(): void {
--- a/src/app/shared/host-window.service.ts
+++ b/src/app/shared/host-window.service.ts
@@ -93,9 +93,11 @@ export class HostWindowService {
    );
  }

-  isMobileView(): Observable<boolean> {
-    return this.getWidthObs()
-      .map((width) => width < GridBreakpoint.MD_MIN)
-      .distinctUntilChanged();
+  isXsOrSm(): Observable<boolean> {
+    return Observable.combineLatest(
+        this.isXs(),
+        this.isSm(),
+        ((isXs, isSm) => isXs || isSm)
+      ).distinctUntilChanged();
  }
 }
--- a/src/app/shared/testing/host-window-service-stub.ts
+++ b/src/app/shared/testing/host-window-service-stub.ts
@@ -17,7 +17,7 @@ export class HostWindowServiceStub {
    return Observable.of(this.width < 576);
  }

-  isMobileView(): Observable<boolean> {
+  isXsOrSm(): Observable<boolean> {
    return this.isXs();
  }
 }