diff --git a/src/ui/atlasLayerSelector/atlasLayerSelector.style.css b/src/ui/atlasLayerSelector/atlasLayerSelector.style.css index d45e0ae4ab45aa520c302588ea113bdc5e7d43b1..f7e396460f285c47618733a48f4dee818b7ad333 100644 --- a/src/ui/atlasLayerSelector/atlasLayerSelector.style.css +++ b/src/ui/atlasLayerSelector/atlasLayerSelector.style.css @@ -116,7 +116,7 @@ .selector-container { width: 21rem; - bottom: 0; + bottom: 4rem; z-index: 5; } diff --git a/src/ui/atlasLayerSelector/atlasLayerSelector.template.html b/src/ui/atlasLayerSelector/atlasLayerSelector.template.html index 38d62308306440aeb27e9123d6616edfe99cec82..2f68eaf0264e16aa0dbe3da1d812074c701a1241 100644 --- a/src/ui/atlasLayerSelector/atlasLayerSelector.template.html +++ b/src/ui/atlasLayerSelector/atlasLayerSelector.template.html @@ -1,11 +1,4 @@ -<div class="position-relative"> - - <!-- place holder when not expanded --> - <div [ngClass]="{ 'scale-up-bl muted-7 pe-all': !selectorExpanded, 'scale-down-bl pe-none': selectorExpanded }" - class="position-relative m-2 selectedLayerBorder cursor-pointer selectedTemplateDefaultContainer" - (click)="selectorExpanded = true"> - <img [src]="selectedTemplatePreviewUrl" draggable="false"/> - </div> +<div class="position-relative d-flex flex-column justify-content-start"> <!-- selector panel when expanded --> @@ -65,6 +58,18 @@ </mat-grid-list> </mat-card-content> </mat-card> + + <!-- place holder when not expanded --> + <div class="position-relative m-2 cursor-pointer scale-up-bl pe-all"> + <button color="primary" + matTooltip="Select layer" + mat-mini-fab + aria-label="Layer selector expand button" + (click)="selectorExpanded = !selectorExpanded"> + <i class="fas fa-layer-group"></i> + </button> + </div> + </div> <!-- image tile tmpl -->