Smal changes for layer selector items (#590)

src/ui/atlasLayerSelector/atlasLayerSelector.style.css

@@ -2,8 +2,8 @@
     flex-shrink: 0;
     /*min-width: 100%;*/
     /*min-height: 100%;*/
-    width: 60px;
-    height: 60px;
+    width: 70px;
+    height: 70px;
     border-radius: 10px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
@@ -63,8 +63,8 @@
 
 
 .scale-down-bl {
-    -webkit-animation: scale-down-bl .4s cubic-bezier(.25, .46, .45, .94) both;
-    animation: scale-down-bl .4s cubic-bezier(.25, .46, .45, .94) both;
+    -webkit-animation: scale-down-bl .2s cubic-bezier(.25, .46, .45, .94) both;
+    animation: scale-down-bl .2s cubic-bezier(.25, .46, .45, .94) both;
 }
 
 @-webkit-keyframes scale-down-bl {
@@ -115,12 +115,18 @@
 
 .selector-container
 {
-    width: 18rem;
+    width: 21rem;
     bottom: 0;
     z-index: 5;
 }
 
 .single-column-tile
 {
-    width: calc((18rem - 32px)/3);
+    width: calc((28rem - 32px)/3);
+}
+
+.infoButton {
+    height: 15px;
+    width: 40px;
+    border-radius: 10px;
 }

src/ui/atlasLayerSelector/atlasLayerSelector.template.html

@@ -78,7 +78,7 @@
     let-menuTriggerData="menuTriggerData">
     <div *ngIf="menuTriggerFor; else noMatMenuTriggerTmpl"
         iav-stop="click"
-        class="d-flex flex-column justify-content-start w-100 mb-1 mt-1 overflow-hidden cursor-pointer singleLayerImageContainer"
+        class="d-flex flex-column justify-content-start w-100 h-100 mb-1 mt-1 overflow-hidden cursor-pointer singleLayerImageContainer"
         [matMenuTriggerFor]="menuTriggerFor"
         [matMenuTriggerData]="menuTriggerData">
 
@@ -87,7 +87,7 @@
     </div>
 
     <ng-template #noMatMenuTriggerTmpl>
-        <div class="d-flex flex-column justify-content-start w-100 mb-1 mt-1 overflow-hidden cursor-pointer singleLayerImageContainer">
+        <div class="d-flex flex-column justify-content-start w-100 h-100 mb-1 mt-1 overflow-hidden cursor-pointer singleLayerImageContainer">
             <ng-container *ngTemplateOutlet="tileContent">
             </ng-container>
         </div>
@@ -123,32 +123,38 @@
             </div>
             
             <!-- text container -->
-            <small class="iv-custom-comp text ml-1 mr-1 mt-2 text-truncate">{{ tileSrc.name }}</small>
+            <div class="d-flex justify-content-center">
+                <small class="iv-custom-comp text ml-1 mr-1 mt-2 text-break">{{ tileSrc.name }}</small>
+            </div>
         </div>
     </ng-template>
 </ng-template>
 
 <ng-template #infoBtn let-tileSrc="tileSrc">
-    <button *ngIf="tileSrc.originDatasets?.length > 0; else plainBtn"
+    <div *ngIf="tileSrc.originDatasets?.length > 0; else plainBtn"
         mat-icon-button
         iav-stop="click"
-        class="text iv-custom-comp"
+        class="iv-custom-comp mt-2 mr-2 d-flex justify-content-center infoButton"
+        [ngStyle]="{backgroundColor: tileSrc.darktheme ? 'white': 'black', color: tileSrc.darktheme ? 'black': 'white' }"
         iav-dataset-show-dataset-dialog
         [iav-dataset-show-dataset-dialog-kgid]="tileSrc.originDatasets[0].kgId"
         [iav-dataset-show-dataset-dialog-kgschema]="tileSrc.originDatasets[0].kgSchema">
-        <i class="fas fa-info-circle fa-2x"></i>
-    </button>
+        <small><i class="fas fa-info"></i></small>
+        <small class="ml-1">Info</small>
+    </div>
 
     <ng-template #plainBtn>
-        <button *ngIf="tileSrc.properties?.name || tileSrc.properties?.description"
+        <div *ngIf="tileSrc.properties?.name || tileSrc.properties?.description"
             mat-icon-button
             iav-stop="click"
-            class="text iv-custom-comp"
+            class="iv-custom-comp mt-2 mr-2 d-flex justify-content-center infoButton"
+            [ngStyle]="{backgroundColor: tileSrc.darktheme ? 'white': 'black', color: tileSrc.darktheme ? 'black': 'white' }"
             iav-dataset-show-dataset-dialog
             [iav-dataset-show-dataset-dialog-name]="tileSrc.properties.name"
             [iav-dataset-show-dataset-dialog-description]="tileSrc.properties.description">
-            <i class="fas fa-info-circle fa-2x"></i>
-        </button>
+            <small><i class="fas fa-info"></i></small>
+            <small class="ml-1">Info</small>
+        </div>
     </ng-template>
 </ng-template>