dspace-angular/src/app/shared/view-mode-switch/view-mode-switch.component.html at 5bdf0974fc3c3790808a2f38cc0b277bf166532b · DSpace/dspace-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div class="btn-group" data-toggle="buttons">
  @if (isToShow(viewModeEnum.ListElement)) {
    <button
      [attr.aria-current]="currentMode === viewModeEnum.ListElement"
      [attr.aria-label]="'search.view-switch.show-list' | translate"
      [title]="'search.view-switch.show-list' | translate"
      routerLink="."
      [queryParams]="{view: 'list'}"
      queryParamsHandling="merge"
      (click)="switchViewTo(viewModeEnum.ListElement)"
      [class.active]="currentMode === viewModeEnum.ListElement"
      class="btn btn-secondary"
      [attr.data-test]="'list-view' | dsBrowserOnly">
      <i class="fas fa-list"></i>
    </button>
  }
  @if (isToShow(viewModeEnum.GridElement)) {
    <button
      [attr.aria-current]="currentMode === viewModeEnum.GridElement"
      [attr.aria-label]="'search.view-switch.show-grid' | translate"
      [title]="'search.view-switch.show-grid' | translate"
      routerLink="."
      [queryParams]="{view: 'grid'}"
      queryParamsHandling="merge"
      (click)="switchViewTo(viewModeEnum.GridElement)"
      [class.active]="currentMode === viewModeEnum.GridElement"
      class="btn btn-secondary"
      [attr.data-test]="'grid-view' | dsBrowserOnly">
      <i class="fas fa-th-large"></i>
    </button>
  }
  @if (isToShow(viewModeEnum.DetailedListElement)) {
    <button
      [attr.aria-current]="currentMode === viewModeEnum.DetailedListElement"
      [attr.aria-label]="'search.view-switch.show-detail' | translate"
      [title]="'search.view-switch.show-detail' | translate"
      routerLink="."
      [queryParams]="{view: 'detailed'}"
      queryParamsHandling="merge"
      (click)="switchViewTo(viewModeEnum.DetailedListElement)"
      [class.active]="currentMode === viewModeEnum.DetailedListElement"
      class="btn btn-secondary"
      [attr.data-test]="'detail-view' | dsBrowserOnly">
      <i class="far fa-square"></i>
    </button>
  }
  @if (isToShow(viewModeEnum.GeospatialMap)) {
    <button
      [attr.aria-current]="currentMode === viewModeEnum.GeospatialMap"
      [attr.aria-label]="'search.view-switch.show-geospatialMap' | translate"
      [title]="'search.view-switch.show-geospatialMap' | translate"
       routerLink="."
       [queryParams]="{view: 'geospatialMap'}"
       queryParamsHandling="merge"
       (click)="switchViewTo(viewModeEnum.GeospatialMap)"
       routerLinkActive="active"
       [class.active]="currentMode === viewModeEnum.GeospatialMap"
       class="btn btn-secondary"
       [attr.data-test]="'geospatial-view' | dsBrowserOnly">
       <span class="fas fa-map"></span><span class="sr-only">{{'search.view-switch.show-geospatialMap' | translate}}</span>
    </button>
  }
</div>