From 72d72fae50785d1c88f52a5a144e0063ad95d452 Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Fri, 16 Apr 2021 14:05:29 +0200
Subject: [PATCH] annotation list style changes
---
.../editAnnotation/editAnnotation.component.ts | 8 +++++---
.../editAnnotation/editAnnotation.template.html | 10 ++++++----
.../userAnnotationsCmp.components.ts | 17 +++++++++++------
.../userAnnotationsCmp.style.css | 16 ----------------
.../userAnnotationsCmp.template.html | 2 +-
src/ui/topMenu/topMenuCmp/topMenu.template.html | 2 +-
6 files changed, 24 insertions(+), 31 deletions(-)
diff --git a/src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.component.ts b/src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.component.ts
index aefd5ef34..66ef2c4d5 100644
--- a/src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.component.ts
+++ b/src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.component.ts
@@ -248,9 +248,11 @@ export class EditAnnotationComponent implements OnInit, OnDestroy {
}
removeLoadingAnnotation() {
- const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations').layer
- const annotations = annotationLayer.localAnnotations.toJSON()
- annotationLayer.localAnnotations.restoreState(annotations.filter(a => a.id !== 'adding'))
+ const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations')?.layer
+ if (annotationLayer) {
+ const annotations = annotationLayer.localAnnotations.toJSON()
+ annotationLayer.localAnnotations.restoreState(annotations.filter(a => a.id !== 'adding'))
+ }
}
submitForm() {
diff --git a/src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.template.html b/src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.template.html
index e31169200..515ffb62c 100644
--- a/src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.template.html
+++ b/src/atlasComponents/userAnnotations/editAnnotation/editAnnotation.template.html
@@ -37,7 +37,8 @@
<div class="d-flex flex-column align-items-center w-100">
<mat-form-field class="w-100 annotation-editing-body"
[ngStyle]="{border: cursorOut && selecting === 'position1'? '2px solid' : null}">
- <mat-label>position {{selectedType.twoCoordinates && ' 1'}} in mm (curr. voxel)</mat-label>
+ <mat-label *ngIf="selectedType.name !== 'Ellipsoid'">position {{selectedType.twoCoordinates && ' 1'}}</mat-label>
+ <mat-label *ngIf="selectedType.name === 'Ellipsoid'">center (vox)</mat-label>
<div>
<input type="text" name="position1"
placeholder="0,0,0"
@@ -45,7 +46,7 @@
formControlName="position1" matInput
(focusin)="position1Selected = false; changeSelectingPoint('position1')"
(focusout)="position1CursorOut()">
- <i *ngIf="cursorOut && selecting === 'position1'" class="fas fa-edit" style="margin-left: -20px;"></i>
+ <i *ngIf="selecting === 'position1'" class="fas fa-crosshairs" style="margin-left: -20px;"></i>
<i *ngIf="position1Selected && !(cursorOut && selecting === 'position1')" class="fas fa-check-circle" style="margin-left: -20px;"></i>
</div>
</mat-form-field>
@@ -55,14 +56,15 @@
<div class="d-flex flex-column align-items-center w-100" *ngIf="selectedType.twoCoordinates">
<mat-form-field class="w-100 annotation-editing-body"
[ngStyle]="{border: cursorOut && selecting === 'position2'? '2px solid' : null}">
- <mat-label>position 2 in mm (curr. voxel)</mat-label>
+ <mat-label *ngIf="selectedType.name !== 'Ellipsoid'">position 2 (vox)</mat-label>
+ <mat-label *ngIf="selectedType.name === 'Ellipsoid'">radii</mat-label>
<input type="text" name="position2"
class="pr-4"
placeholder="0,0,0"
formControlName="position2" matInput
(focusin)="position2Selected = false; changeSelectingPoint('position2')"
(focusout)="position2CursorOut()">
- <i *ngIf="cursorOut && selecting === 'position2'" class="fas fa-edit" style="margin-left: -20px;"></i>
+ <i *ngIf="selecting === 'position2'" class="fas fa-crosshairs" style="margin-left: -20px;"></i>
<i *ngIf="position2Selected && !(cursorOut && selecting === 'position2')" class="fas fa-check-circle" style="margin-left: -20px;"></i>
</mat-form-field>
<small *ngIf="cursorOut && selecting === 'position2'" style="margin-top: -20px;">selecting</small>
diff --git a/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.components.ts b/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.components.ts
index 6e41f4ab1..9ac378ece 100644
--- a/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.components.ts
+++ b/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.components.ts
@@ -33,8 +33,11 @@ export class UserAnnotationsComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
- this.viewer?.layerManager.removeManagedLayer(
- this.viewer.layerManager.getLayerByName('user_annotations'))
+ const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations')
+ if (annotationLayer) {
+ this.viewer?.layerManager.removeManagedLayer(
+ this.viewer.layerManager.getLayerByName('user_annotations'))
+ }
}
ngOnInit(): void {
@@ -142,10 +145,12 @@ export class UserAnnotationsComponent implements OnInit, OnDestroy {
}
removeAnnotationFromViewer(id) {
- const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations').layer
- let annotations = annotationLayer.localAnnotations.toJSON()
- annotations = annotations.filter(a => a.id !== id)
- annotationLayer.localAnnotations.restoreState(annotations)
+ const annotationLayer = this.viewer.layerManager.getLayerByName('user_annotations')?.layer
+ if (annotationLayer) {
+ let annotations = annotationLayer.localAnnotations.toJSON()
+ annotations = annotations.filter(a => a.id !== id)
+ annotationLayer.localAnnotations.restoreState(annotations)
+ }
}
// navigate(coord) {
diff --git a/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.style.css b/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.style.css
index 8fcc6ad32..ed1848825 100644
--- a/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.style.css
+++ b/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.style.css
@@ -14,22 +14,6 @@
max-height: 400px;
}
-.anno-item {
- background: #424242;
- box-shadow: 5px 5px 10px #383838,
- -5px -5px 10px #4c4c4c;
-}
-.hovering-border {
- background: linear-gradient(145deg, #3b3b3b, #474747);
- box-shadow: 5px 5px 10px #383838,
- -5px -5px 10px #4c4c4c;
-}
-.selected-border {
- background: #424242;
- box-shadow: inset 5px 5px 10px #383838,
- inset -5px -5px 10px #4c4c4c;
-}
-
.minimize-icon {
position: absolute;
top: 10px;
diff --git a/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.template.html b/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.template.html
index f2dac52e6..8a79dfdd8 100644
--- a/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.template.html
+++ b/src/atlasComponents/userAnnotations/userAnnotationsCmp/userAnnotationsCmp.template.html
@@ -23,7 +23,7 @@
aria-label="user annotations list"
class="annotation-list d-flex flex-column overflow-auto mb-2">
<div *ngFor="let annotation of annotations; let i = index;"
- [ngClass]="expanded === i? 'selected-border' : hovering === i? 'hovering-border' : 'anno-item'"
+ [ngClass]="expanded === i? 'mat-elevation-z6' : hovering === i? 'mat-elevation-z8' : 'mat-elevation-z2'"
(mouseenter)="hovering = i"
(mouseleave)="hovering = -1"
class="p-2 pr-4 pl-4 m-2">
diff --git a/src/ui/topMenu/topMenuCmp/topMenu.template.html b/src/ui/topMenu/topMenuCmp/topMenu.template.html
index 63633128a..11894f5e2 100644
--- a/src/ui/topMenu/topMenuCmp/topMenu.template.html
+++ b/src/ui/topMenu/topMenuCmp/topMenu.template.html
@@ -133,7 +133,7 @@
<!-- User annotations btn -->
<ng-template #userAnnotationsBtnTmpl>
<div class="btnWrapper"
- (click)="bottomSheet.open(userAnnotations, {hasBackdrop: false})"
+ (click)="bottomSheet.open(userAnnotations, {hasBackdrop: false, disableClose: true})"
matTooltip="My annotations">
<iav-dynamic-mat-button
[attr.pinned-datasets-length]="(favDataEntries$ | async)?.length"
--
GitLab