diff --git a/src/atlasViewer/atlasViewer.style.css b/src/atlasViewer/atlasViewer.style.css index aca0ca06ef6f9579c7a615829f43f407a62e598d..50e6a73ebf30c69e2cc4c41359a4ad8742d6636b 100644 --- a/src/atlasViewer/atlasViewer.style.css +++ b/src/atlasViewer/atlasViewer.style.css @@ -68,4 +68,4 @@ mat-sidenav { .mobileMenuTabs { margin: 40px 0 0 5px; -} \ No newline at end of file +} diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html index ae363d57eafccbc0fe34f690811d6928309bade8..1c581a1c109529882a67ee73e36fbe51da88d62b 100644 --- a/src/atlasViewer/atlasViewer.template.html +++ b/src/atlasViewer/atlasViewer.template.html @@ -176,23 +176,23 @@ <!-- TODO Potentially implementing plugin contextual info --> </div> - - - - <panel-component class="shadow" fixedMouseContextualContainerDirective> - - - <div body class="pe-all"> - <mat-card *ngIf="(onhoverSegmentsForFixed$ | async)?.length > 0 && regionToolsMenuVisible" class="p-0 m-0 d-flex flex-column"> - + <panel-component class="shadow p-0 m-0" fixedMouseContextualContainerDirective> + + <div body class="pe-all" *ngIf="(onhoverSegmentsForFixed$ | async) as onHoverSegments"> + <mat-card *ngIf="onHoverSegments.length > 0 && regionToolsMenuVisible" class="d-flex flex-column p-0"> + <div *ngFor="let onHoverRegion of onHoverSegments" class="border rounded m-2"> + <div class="text-nowrap text-ellipsis mt-2 ml-2 overflow-hidden" [matTooltip]="onHoverRegion.name" matTooltipShowDelay="1000">{{onHoverRegion.name}}</div> + <div class="d-flex align-items-center justify-content-between"> + <button mat-button matTooltip="Select region" matTooltipShowDelay="1000" style="font-size: 10px" class="p-1"><i class="fas fa-hand-pointer"></i> Select</button> + <button mat-button matTooltip="Navigate to region" matTooltipShowDelay="1000" style="font-size: 10px" class="p-1"> <i class="fas fa-crosshairs"></i> Navigate </button> + <button mat-button matTooltip="Region Description" matTooltipShowDelay="1000" style="font-size: 10px" class="p-1"> <i class="fas fa-info-circle"></i> Description</button> + </div> + </div> </mat-card> </div> - </panel-component> - - </layout-floating-container> <!-- required for manufacturing plugin templates --> @@ -241,4 +241,4 @@ <!-- logo tmpl --> <ng-template #logoTmpl> <logo-container></logo-container> -</ng-template> \ No newline at end of file +</ng-template> diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css index 2781c6cad4bac7c850d42f3e07cecb7d374d9f66..64fd7bbc02db6d6bc75ca19244956c2c12ea96fc 100644 --- a/src/res/css/extra_styles.css +++ b/src/res/css/extra_styles.css @@ -679,4 +679,8 @@ body::after padding: 0!important; overflow: hidden; margin-top: 0.25rem; -} \ No newline at end of file +} + +.text-ellipsis { + text-overflow: ellipsis; +}