fix(theme): make links more readable (#444)

* fix(theme): make links more readable

fixes #119

* Revert "fix(theme): make links more readable"

This reverts commit 9638064.

* fix(theme): make filter more obvious

Author: DanielHabenicht

Phonebook.Frontend/src/app/modules/table/components/table/table.component.html

@@ -158,12 +158,13 @@
         {{ columnTranslate.getTranslation(columns.orgUnit.id) }}
       </mat-header-cell>
       <mat-cell *matCellDef="let person">
-        <app-add-filter [filterColumn]="columns.orgUnit" [filterValue]="person.Business.ShortOrgUnit[0]">
-        </app-add-filter>
-        <span *ngFor="let orgUnit of person.Business.ShortOrgUnit.slice(1)"
-          >,
-          <app-add-filter [filterColumn]="columns.orgUnit" [filterValue]="orgUnit"></app-add-filter>
-        </span>
+        <mat-chip-list>
+          <app-add-filter
+            *ngFor="let orgUnit of person.Business.ShortOrgUnit"
+            [filterColumn]="columns.orgUnit"
+            [filterValue]="orgUnit"
+          ></app-add-filter>
+        </mat-chip-list>
       </mat-cell>
     </ng-container>
 

Phonebook.Frontend/src/app/modules/table/table.module.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatChipsModule } from '@angular/material';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { ProfilePictureModule } from 'src/app/modules/profile-picture/profile-picture.module';
 import { TableComponent } from 'src/app/modules/table/components/table/table.component';
@@ -19,6 +20,7 @@ import { MaterialModule } from 'src/app/shared/material.module';
     ActionDrawerModule,
     ProfilePictureModule,
     InfiniteScrollModule,
+    MatChipsModule,
     UserModule
   ],
   declarations: [TableComponent, TableSettingsDialog],

Phonebook.Frontend/src/app/shared/components/add-filter/add-filter.component.html

@@ -1,26 +1,24 @@
-<a
+<mat-chip
   propagationStop
   (click)="addFilter()"
   (keyup.enter)="addFilter()"
-  class="pb-pointer"
+  class="pb-pointer pb-filter"
   tabindex="0"
   i18n-matTooltip="AddFilterComponent|Tooltip for adding a filter to the search@@AddFilterComponentTooltip"
   i18n-aria-label="AddFilterComponent|Aria Label for adding a filter to the search@@AddFilterComponentAriaLabel"
   matTooltip="Add this as a filter"
   aria-label="Refines the Search by adding this as a Filter."
   [matTooltipPosition]="'left'"
 >
-  <span class="pb-c-text">
-    <ng-container [ngSwitch]="filterColumn">
-      <ng-container *ngSwitchCase="column.room">
-        <ng-container *ngIf="displayText != null">
-          <ng-container i18n="@@ColumnTitleRoom">
-            Room
-          </ng-container>
-          {{ displayText }}
+  <ng-container [ngSwitch]="filterColumn">
+    <ng-container *ngSwitchCase="column.room">
+      <ng-container *ngIf="displayText != null">
+        <ng-container i18n="@@ColumnTitleRoom">
+          Room
         </ng-container>
+        {{ displayText }}
       </ng-container>
-      <ng-container *ngSwitchDefault>{{ displayText }}</ng-container>
     </ng-container>
-  </span>
-</a>
+    <ng-container *ngSwitchDefault>{{ displayText }}</ng-container>
+  </ng-container>
+</mat-chip>

Phonebook.Frontend/src/app/shared/components/add-filter/add-filter.component.scss

@@ -0,0 +1,9 @@
+.mat-standard-chip.pb-filter {
+  /* Workaround for https://github.com/angular/components/pull/13962
+   and https://github.com/angular/components/issues/14934
+  */
+  height: unset;
+  width: unset;
+  padding: 3px 9px;
+  min-height: 24px;
+}

Phonebook.Frontend/src/app/shared/components/add-filter/add-filter.component.theme.scss

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatChipsModule } from '@angular/material';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { PropagationStopModule } from 'ngx-propagation-stop';
 import { AddFilterComponent } from 'src/app/shared/components/add-filter/add-filter.component';
 
 @NgModule({
-  imports: [CommonModule, MatTooltipModule, PropagationStopModule],
+  imports: [CommonModule, MatTooltipModule, MatChipsModule, PropagationStopModule],
   declarations: [AddFilterComponent],
   exports: [AddFilterComponent]
 })

Phonebook.Frontend/src/app/shared/components/add-filter/add-filter.module.ts

@@ -233,15 +233,15 @@ <h4 mat-line>
               </a>
             </h4>
             <p mat-line>
-              <li *ngFor="let shortOrgUnit of person.Business.ShortOrgUnit; let index = index">
+              <mat-chip-list class="mat-chip-list-stacked">
                 <app-add-filter
+                  *ngFor="let shortOrgUnit of person.Business.ShortOrgUnit; let index = index"
                   [filterColumn]="columns.orgUnit"
                   [filterValue]="shortOrgUnit"
                   [displayText]="person.Business.OrgUnit[index] + ' (' + shortOrgUnit + ')'"
                   [resetSearchTerm]="true"
-                >
-                </app-add-filter>
-              </li>
+                ></app-add-filter>
+              </mat-chip-list>
             </p>
           </mat-list-item>
           <mat-list-item>

Phonebook.Frontend/src/app/shared/components/user/user-detail/user-detail.component.html

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatChipsModule } from '@angular/material';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -38,6 +39,7 @@ import { InteractiveAttributeFieldModule } from 'src/app/shared/interactive-attr
     MatCardModule,
     MatListModule,
     MatTabsModule,
+    MatChipsModule,
     MatIconModule,
     MatButtonModule,
     MatMenuModule,

Phonebook.Frontend/src/app/shared/components/user/user.module.ts

@@ -83,7 +83,7 @@ app-root {
 }
 
 .pb-pointer {
-  cursor: pointer;
+  cursor: pointer !important;
 }
 
 .pb-flex-row {

Phonebook.Frontend/src/styles.scss

@@ -1,5 +1,4 @@
 // Define themes as described in this guide: https://material.angular.io/guide/theming
-@import 'src/app/shared/components/add-filter/add-filter.component.theme';
 @import 'src/app/shared/components/search/search.component.theme';
 @import 'src/app/shared/components/navigation/navigation.component.theme';
 @import 'src/app/modules/table/components/table/table.component.theme';
@@ -35,7 +34,6 @@
 
 @mixin custom-components-theme($theme) {
   @include search-component-theme($theme);
-  @include add-filter-component-theme($theme);
   @include user-list-component-theme($theme);
   @include global-theme($theme);
   @include navigation-component-theme($theme);