Skip to content
Permalink
Browse files
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
  • Loading branch information
mdelez committed Aug 9, 2022
1 parent d39ed14 commit d9570b96e4230fb6b114c040260253e6fc812758
Show file tree
Hide file tree
Showing 13 changed files with 339 additions and 132 deletions.
@@ -80,7 +80,8 @@ describe('StatusComponent', () => {
declarations: [
StatusComponent,
NoContentTestHostComponent,
TeapotTestHostComponent
TeapotTestHostComponent,
MockPipe
],
imports: [
BrowserAnimationsModule,
@@ -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>
@@ -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;
}
}
}
}
}
@@ -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';
}
}

}
@@ -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>
@@ -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)
@@ -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,

0 comments on commit d9570b9

Please sign in to comment.