feat(projects): changes to nav bar (DEV-1101) (#790)

* feat(projects): changes to nav bar

* feat(projects): more changes to navbar

* feat(projects): even more changes to navbar

* feat(project): only show tooltips if the text is cut off

* test(collaboartion): attempt to fix constantly "failing" test

* test(permission): attempt to fix constantly "failing" test

* test(collaboration): attempt to fix constantly "failing" test

* remove fdescribe

* feat(project): allow click on entire accordion header to open the accordion. Only for signed out users for now until the onto editor is moved to the settings

* feat(project, ontology-class-item): rename method

src/app/main/status/status.component.spec.ts

@@ -80,7 +80,8 @@ describe('StatusComponent', () => {
             declarations: [
                 StatusComponent,
                 NoContentTestHostComponent,
-                TeapotTestHostComponent
+                TeapotTestHostComponent,
+                MockPipe
             ],
             imports: [
                 BrowserAnimationsModule,

src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html

@@ -1,16 +1,24 @@
-<span class="link" [routerLink]="link">
-    <h2 matLine class="label mat-subheading-1">{{resClass.label}}</h2>
-    <span matLine class="instances">
-        {{results | i18nPlural: itemPluralMapping['resource']}}
-    </span>
-</span>
-
-<span class="overlay-buttons hover-only" *ngIf="projectMember">
-    <!-- with the following button, it should be possible to edit the resource class in a quick way; but maybe we don't need it
-    <button mat-icon-button class="conf" [routerLink]="link + '/conf'">
-        <mat-icon>tune</mat-icon>
-    </button> -->
-    <button mat-icon-button class="add" [routerLink]="link + '/add'">
-        <mat-icon>add</mat-icon>
-    </button>
-</span>
+<div class="class-item-container">
+    <div class="content" [routerLinkActive]="['is-active']">
+        <div class="top link" [routerLink]="link">
+            <div class="file-icon">
+                <div class="icon-wrapper">
+                    <mat-icon>{{icon}}</mat-icon>
+                </div>
+            </div>
+            <div class="info">
+                <p class="label" #classLabel matTooltip="{{resClass.label}}" matTooltipShowDelay="750"
+                    [matTooltipDisabled]="compareElementHeights(classLabel)"> {{resClass.label}}</p>
+                <p class="entries">{{results | i18nPlural: itemPluralMapping['entry']}}</p>
+            </div>
+        </div>
+        <div class="bottom link" *ngIf="projectMember" [routerLink]="link + '/add'">
+            <div class="add-icon">
+                <mat-icon>add_circle_outline</mat-icon>
+            </div>
+            <div class="add-new">
+                <p class="add-new-label">Add a new resource</p>
+            </div>
+        </div>
+    </div>
+</div>

src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.scss

@@ -1,33 +1,81 @@
 @import "../../../../../assets/style/config";
-:host {
+
+.class-item-container {
   width: 100%;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  padding: 10px 0px;
 
-  &:hover {
-    .hover-only {
-        display: block;
+  .content {
+    width: 90%;
+    border-radius: 5px;
+    box-shadow: 0px 1px 3px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 6%);
+    border-bottom: 2px solid #F9FAFB;
+    &.is-active{
+      border-bottom: 2px solid #1F2937;
     }
-  }
-}
 
-.mat-line {
-  width: 100%;
+    .top {
+      display: inline-flex;
+      align-items: center;
+      padding: 20px 0px;
+      width: 100%;
 
-  &.label {
-    display: flex;
-    flex-direction: row;
+      .file-icon {
 
-  }
-  &.instances {
-    color: $primary_500;
-  }
-}
+        .icon-wrapper {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 48px;
+          height: 48px;
+          background: #1F2937;
+          border-radius: 6px;
+          margin: 0px 20px;
 
-.overlay-buttons {
-  position: absolute;
-  right: 0;
-  bottom: 12px;
-}
+          mat-icon {
+            color: white;
+          }
+        }
+      }
 
-.hover-only {
-  display: none;
+      .info {
+
+        .label {
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;  
+          overflow: hidden;
+          padding-right: 16px;
+          color: #6B7280;
+          margin: 0px;
+        }
+
+        .entries {
+          color: #111827;
+          font-size: 24px;
+          margin: 0px;
+          padding-top: 5px;
+        }
+
+      }
+    }
+
+    .bottom {
+      display: flex;
+      align-items: center;
+      background: #F9FAFB;
+
+      .add-icon {
+        margin: 0px 10px;
+
+        mat-icon {
+          font-size: 32px;
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+  }
 }

src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ClassDefinition, KnoraApiConnection, CountQueryResponse, ApiResponseError } from '@dasch-swiss/dsp-js';
+import { ClassDefinition, KnoraApiConnection, CountQueryResponse, ApiResponseError, Constants } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { ErrorHandlerService } from 'src/app/main/services/error-handler.service';
 import { OntologyService } from 'src/app/project/ontology/ontology.service';
@@ -22,11 +22,13 @@ export class OntologyClassItemComponent implements OnInit {
 
     link: string;
 
+    icon: string;
+
     // i18n setup
     itemPluralMapping = {
-        resource: {
-            '=1': '1 resource',
-            other: '# resources'
+        entry: {
+            '=1': '1 Entry',
+            other: '# Entries'
         }
     };
 
@@ -58,12 +60,24 @@ export class OntologyClassItemComponent implements OnInit {
                 this._errorHandler.showMessage(error);
             }
         );
+
+        this.icon = this._getIcon();
     }
 
     open(route: string) {
         this._router.navigateByUrl(route);
     }
 
+    /**
+     * given an Html element, compare the scrollHeight and the clientHeight
+     *
+     * @param elem the element which has the line-clamp css
+     * @returns inverse of comparison between the scrollHeight and the clientHeight of elem
+     */
+    compareElementHeights(elem: HTMLElement): boolean {
+        return !(elem.scrollHeight > elem.clientHeight);
+    }
+
     private _setGravsearch(iri: string): string {
         return `
         PREFIX knora-api: <http://api.knora.org/ontology/knora-api/v2#>
@@ -82,4 +96,29 @@ export class OntologyClassItemComponent implements OnInit {
         OFFSET 0`;
     }
 
+    /**
+     * return the correct mat-icon depending on the subclass of the resource
+     *
+     * @returns mat-icon name as string
+     */
+    private _getIcon(): string {
+
+        switch (this.resClass.subClassOf[0]) {
+            case Constants.AudioRepresentation:
+                return 'audio_file';
+            case Constants.ArchiveRepresentation:
+                return 'folder_zip';
+            case Constants.DocumentRepresentation:
+                return 'description';
+            case Constants.MovingImageRepresentation:
+                return 'video_file';
+            case Constants.StillImageRepresentation:
+                return 'image';
+            case Constants.TextRepresentation:
+                return 'text_snippet';
+            default: // resource does not have a file representation
+                return 'insert_drive_file';
+        }
+    }
+
 }

src/app/project/beta/ontology-classes/ontology-classes.component.html

@@ -1,5 +1,5 @@
-<mat-list-item *ngFor="let class of classesToDisplay">
+<div *ngFor="let class of classesToDisplay">
     <app-ontology-class-item [resClass]="class" [projectMember]="projectMember">
 
     </app-ontology-class-item>
-</mat-list-item>
+</div>

src/app/project/collaboration/collaboration.component.spec.ts

@@ -32,7 +32,7 @@ describe('CollaborationComponent', () => {
 
     beforeEach(waitForAsync(() => {
 
-        const cacheServiceSpy = jasmine.createSpyObj('CacheService', ['get', 'set']);
+        const cacheServiceSpy = jasmine.createSpyObj('CacheService', ['get', 'set', 'del']);
 
         TestBed.configureTestingModule({
             declarations: [
@@ -141,6 +141,10 @@ describe('CollaborationComponent', () => {
         fixture.detectChanges();
     });
 
+    afterEach(() => {
+        fixture.destroy();
+    });
+
     it('should create', () => {
         expect<any>(localStorage.getItem('session')).toBe(
             JSON.stringify(TestConfig.CurrentSession)

src/app/project/permission/permission.component.spec.ts

@@ -1,4 +1,5 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { Pipe, PipeTransform } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
@@ -18,6 +19,18 @@ import { TestConfig } from 'test.config';
 import { AddGroupComponent } from './add-group/add-group.component';
 import { PermissionComponent } from './permission.component';
 
+
+/**
+ * mocked linkify pipe from main/pipes.
+ */
+@Pipe({ name: 'appLinkify' })
+class MockPipe implements PipeTransform {
+    transform(value: string): string {
+        // do stuff here, if you want
+        return value;
+    }
+}
+
 describe('PermissionComponent', () => {
     let component: PermissionComponent;
     let fixture: ComponentFixture<PermissionComponent>;
@@ -32,7 +45,8 @@ describe('PermissionComponent', () => {
                 AddGroupComponent,
                 GroupsListComponent,
                 DialogComponent,
-                StatusComponent
+                StatusComponent,
+                MockPipe
             ],
             imports: [
                 BrowserAnimationsModule,