Merge pull request #403 from HumanBrainProject/chore/uiTweaks

Chore/ui tweaks

src/atlasViewer/atlasViewer.template.html

@@ -7,9 +7,11 @@
 <!-- kg tos -->
 <ng-template #kgToS>
   <h2 mat-dialog-title>Knowledge Graph ToS</h2>
-  <mat-dialog-content class="w-50vw">
-    <kgtos-component>
-    </kgtos-component>
+  <mat-dialog-content>
+    <small>
+      <kgtos-component>
+      </kgtos-component>
+    </small>
   </mat-dialog-content>
 
   <mat-dialog-actions class="justify-content-end">
@@ -22,9 +24,11 @@
 <!-- cookie -->
 <ng-template #cookieAgreementComponent>
   <h2 mat-dialog-title>Cookie Disclaimer</h2>
-  <mat-dialog-content class="w-50vw">
-    <cookie-agreement>
-    </cookie-agreement>
+  <mat-dialog-content>
+    <small>
+      <cookie-agreement>
+      </cookie-agreement>
+    </small>
   </mat-dialog-content>
 
   <mat-dialog-actions class="justify-content-end">
@@ -149,7 +153,11 @@
 
       <div floatingMouseContextualContainerDirective>
 
-        <div class="d-inline-block" iav-mouse-hover #iavMouseHoverConetxtualBlock="iavMouseHover" contextualBlock>
+        <div *ngIf="!ismobile"
+          class="d-inline-block"
+          iav-mouse-hover
+          #iavMouseHoverConetxtualBlock="iavMouseHover"
+          contextualBlock>
 
           <ng-container
             *ngFor="let labelText of iavMouseHoverConetxtualBlock.currentOnHoverObs$ | async | mouseOverTextPipe : selectedParcellation">

src/components/flatTree/flatTree.style.css

@@ -54,9 +54,14 @@ span[renderText]
   border-left:rgba(128,128,128,0.6) 1px dashed;
 }
 
+.render-node-text
+{
+  opacity: 0.8;
+}
+
 .render-node-text:hover
 {
-  color:rgba(219, 181, 86,1);
+  opacity: 1.0;
 }
 
 .render-node-level-1

src/res/css/extra_styles.css

@@ -147,7 +147,7 @@ label.perspective-panel-show-slice-views:before
 
 span.regionSelected
 {
-  color : #dbb556
+  color : rgba(219, 181, 86,1);
 }
 
 span.regionNotSelected,
@@ -158,7 +158,7 @@ span.regionSelected
 
 .cursor-default
 {
-  cursor: default;
+  cursor: default!important;
 }
 
 markdown-dom pre code

src/theme.scss

@@ -19,3 +19,29 @@ $iv-dark-theme:   mat-dark-theme($iv-dark-theme-primary, $iv-dark-theme-accent,
 {
   @include angular-material-theme($iv-dark-theme);
 }
+
+.iav-dialog-class
+{
+
+  @media (min-width: 576px) { 
+    
+  }
+
+  // Medium devices (tablets, 768px and up)
+  @media (min-width: 768px) { 
+    
+    max-width: 50vw!important;
+  }
+  
+  // Large devices (desktops, 992px and up)
+  @media (min-width: 992px) { 
+    
+    max-width: 50vw!important;
+  }
+  
+  // Extra large devices (large desktops, 1200px and up)
+  @media (min-width: 1200px) { 
+    
+    max-width: 50vw!important;
+  }
+}

src/ui/nehubaContainer/nehubaContainer.template.html

 <ng-template #container>
 </ng-template>
 
-<ui-splashscreen iav-stop="mousedown mouseup touchstart touchmove touchend" (contextmenu)="$event.stopPropagation();" *ngIf="!viewerLoaded">
+<ui-splashscreen iav-stop="mousedown mouseup touchstart touchmove touchend" *ngIf="!viewerLoaded">
 </ui-splashscreen>
 
 <!-- spatial landmarks overlay -->

src/ui/nehubaContainer/splashScreen/splashScreen.template.html

@@ -29,8 +29,8 @@
           Parcellations available
         </mat-card-subtitle>
         <button
-          (mousedown)="$event.stopPropagation()"
-          (click)="$event.stopPropagation(); selectTemplateParcellation(template, parcellation)"
+          iav-stop="mousedown touchstart click"
+          (click)="selectTemplateParcellation(template, parcellation)"
           *ngFor="let parcellation of template.parcellations"
           mat-button
           color="primary">

src/ui/sharedModules/angularMaterial.module.ts

@@ -21,14 +21,18 @@ import {
   MatExpansionModule,
   MatGridListModule,
   MatIconModule,
-  MatMenuModule
-
+  MatMenuModule,
+  MAT_DIALOG_DEFAULT_OPTIONS,
+  MatDialogConfig
 } from '@angular/material';
 import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling'
 
 import { NgModule } from '@angular/core';
 import {DragDropModule} from "@angular/cdk/drag-drop";
 
+
+const defaultDialogOption: MatDialogConfig = new MatDialogConfig()
+
 @NgModule({
   imports: [
     MatButtonModule,
@@ -84,5 +88,12 @@ import {DragDropModule} from "@angular/cdk/drag-drop";
     MatMenuModule,
     ExperimentalScrollingModule
   ],
+  providers: [{
+    provide: MAT_DIALOG_DEFAULT_OPTIONS,
+    useValue: {
+      ...defaultDialogOption,
+      panelClass: 'iav-dialog-class'
+    }
+  }]
 })
 export class AngularMaterialModule { }