diff --git a/src/atlasComponents/regionalFeatures/bsFeatures/kgDataset/showDataset/showDataset.directive.ts b/src/atlasComponents/regionalFeatures/bsFeatures/kgDataset/showDataset/showDataset.directive.ts
index f8c2aa3df8cc42b0e2af1bee890a93de6bb0fb69..4e48f9951ed980e3b36d024d25591daf70e7600b 100644
--- a/src/atlasComponents/regionalFeatures/bsFeatures/kgDataset/showDataset/showDataset.directive.ts
+++ b/src/atlasComponents/regionalFeatures/bsFeatures/kgDataset/showDataset/showDataset.directive.ts
@@ -59,7 +59,7 @@ export class ShowDatasetDialogDirective{
}
if (this.name || this.description) {
const { name, description, urls } = this
- return { name, description, urls }
+ return { name, description, urls, useClassicUi: true }
}
})()
@@ -72,10 +72,11 @@ export class ShowDatasetDialogDirective{
}
if (!this.dialogCmp) throw new Error(`IAV_DATASET_SHOW_DATASET_DIALOG_CMP not provided!`)
+ const { useClassicUi } = data
this.matDialog.open(this.dialogCmp, {
...ShowDatasetDialogDirective.defaultDialogConfig,
- panelClass: ['no-padding-dialog'],
- data
+ data,
+ ...(useClassicUi ? {} : { panelClass: ['no-padding-dialog'] })
})
}
}
diff --git a/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.component.ts b/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.component.ts
index f59ba7947db158e35b5c57dacb34e7bdf248054a..ff3f6f1a675cf4466bd1f2f2c62889c6f92fcd16 100644
--- a/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.component.ts
+++ b/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.component.ts
@@ -37,6 +37,7 @@ export class KgRegDetailCmp extends BsRegionInputBase implements OnChanges {
public isGdprProtected = false
public descriptionFallback = `[This dataset cannot be fetched right now]`
+ public useClassicUi = false
public description: string
public name: string
@@ -51,10 +52,11 @@ export class KgRegDetailCmp extends BsRegionInputBase implements OnChanges {
){
super(svc)
if (data) {
- const { description, name, urls } = data
+ const { description, name, urls, useClassicUi } = data
this.description = description
this.name = name
this.urls = urls
+ this.useClassicUi = useClassicUi
}
}
diff --git a/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.template.html b/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.template.html
index bcde6503f0e15b016d4f19b77040394f184f96d8..e743a14cdb6d9471639387a5b667db8067f0e24e 100644
--- a/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.template.html
+++ b/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/kgRegDetail/kgRegDetail.template.html
@@ -1,49 +1,113 @@
-<!-- header -->
-<mat-card class="mat-elevation-z4">
-
- <div class="sidenav-cover-header-container bg-50-grey-20">
- <mat-card-title>
- <ng-content select="[region-of-interest]"></ng-content>
- <div *ngIf="!loadingFlag; else isLoadingTmpl">
- {{ name || nameFallback }}
- </div>
- </mat-card-title>
-
- <mat-card-subtitle class="d-inline-flex align-items-center">
- <mat-icon fontSet="fas" fontIcon="fa-database"></mat-icon>
- <span>
- ebrains regional dataset
- </span>
-
- <button *ngIf="isGdprProtected"
- [matTooltip]="CONST.GDPR_TEXT"
- mat-icon-button color="warn">
- <i class="fas fa-exclamation-triangle"></i>
- </button>
-
- <mat-divider [vertical]="true" class="ml-2 h-2rem"></mat-divider>
-
- <!-- explore btn -->
+
+<!-- classic UI -->
+<ng-template [ngIf]="useClassicUi" [ngIfElse]="modernUi">
+ <mat-card-subtitle>
+ <ng-container *ngTemplateOutlet="nameTmpl">
+ </ng-container>
+ </mat-card-subtitle>
+
+
+ <!-- desc -->
+ <small>
+ <ng-container *ngTemplateOutlet="descTmpl"></ng-container>
+ </small>
+
+
+ <!-- footer -->
+ <mat-card-actions iav-media-query #iavMediaQuery="iavMediaQuery">
+ <ng-container *ngTemplateOutlet="actionBtnsTmpl; context: {
+ $implicit: (iavMediaQuery.mediaBreakPoint$ | async) > 1
+ }" >
+ </ng-container>
+ </mat-card-actions>
+
+ <ng-template #actionBtnsTmpl let-useSmallIcon>
+ <!-- explore -->
+ <ng-container>
+
<a *ngFor="let kgRef of (urls || [])"
[href]="kgRef.doi | doiParserPipe"
class="color-inherit"
mat-icon-button
[matTooltip]="ARIA_LABELS.EXPLORE_DATASET_IN_KG"
target="_blank">
- <i class="fas fa-external-link-alt"></i>
+ <iav-dynamic-mat-button
+ [iav-dynamic-mat-button-style]="useSmallIcon ? 'mat-icon-button' : 'mat-raised-button'"
+ iav-dynamic-mat-button-color="primary">
+
+ <span *ngIf="!useSmallIcon">
+ Explore
+ </span>
+ <i class="fas fa-external-link-alt"></i>
+ </iav-dynamic-mat-button>
</a>
-
- </mat-card-subtitle>
- </div>
+ </ng-container>
+ </ng-template>
+</ng-template>
+
+<!-- modern UI -->
+<ng-template #modernUi>
+ <!-- header -->
+ <mat-card class="mat-elevation-z4">
-</mat-card>
+ <div class="sidenav-cover-header-container bg-50-grey-20">
+ <mat-card-title>
+ <ng-content select="[region-of-interest]"></ng-content>
+ <ng-container *ngTemplateOutlet="nameTmpl">
+ </ng-container>
+ </mat-card-title>
-<!-- description -->
+ <mat-card-subtitle class="d-inline-flex align-items-center">
+ <mat-icon fontSet="fas" fontIcon="fa-database"></mat-icon>
+ <span>
+ ebrains regional dataset
+ </span>
-<markdown-dom class="text-muted d-block mat-body m-4" *ngIf="!loadingFlag"
- [markdown]="description || descriptionFallback">
-</markdown-dom>
+ <button *ngIf="isGdprProtected"
+ [matTooltip]="CONST.GDPR_TEXT"
+ mat-icon-button color="warn">
+ <i class="fas fa-exclamation-triangle"></i>
+ </button>
+
+ <mat-divider [vertical]="true" class="ml-2 h-2rem"></mat-divider>
+
+ <!-- explore btn -->
+ <a *ngFor="let kgRef of (urls || [])"
+ [href]="kgRef.doi | doiParserPipe"
+ class="color-inherit"
+ mat-icon-button
+ [matTooltip]="ARIA_LABELS.EXPLORE_DATASET_IN_KG"
+ target="_blank">
+ <i class="fas fa-external-link-alt"></i>
+ </a>
+
+ </mat-card-subtitle>
+ </div>
+
+ </mat-card>
+
+ <!-- description -->
+ <div class="text-muted d-block mat-body m-4"
+ *ngIf="!loadingFlag">
+ <ng-container *ngTemplateOutlet="descTmpl">
+ </ng-container>
+ </div>
+</ng-template>
+
+<ng-template #nameTmpl>
+ <span *ngIf="!loadingFlag; else isLoadingTmpl">
+ {{ name || nameFallback }}
+ </span>
+</ng-template>
+
+<!-- desc -->
+<ng-template #descTmpl>
+ <markdown-dom
+ [markdown]="description || descriptionFallback">
+ </markdown-dom>
+</ng-template>
+<!-- is loading tmpl -->
<ng-template #isLoadingTmpl>
<spinner-cmp></spinner-cmp>
</ng-template>
diff --git a/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/module.ts b/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/module.ts
index 7dee5bf5ade472d5f5ab604cd5737bb1f2e2bcb8..8af82e8e0ec929bd0b3ea8ee9c0e452e1eda17e4 100644
--- a/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/module.ts
+++ b/src/atlasComponents/regionalFeatures/bsFeatures/kgRegionalFeature/module.ts
@@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common";
-import { Component, NgModule } from "@angular/core";
+import { Component, Inject, NgModule, Optional } from "@angular/core";
import { AngularMaterialModule } from "src/ui/sharedModules/angularMaterial.module";
import { KgRegSummaryCmp } from "./kgRegSummary/kgRegSummary.component";
import { KgRegionalFeaturesList } from "./kgRegList/kgRegList.component";
@@ -10,23 +10,39 @@ import { IAV_DATASET_SHOW_DATASET_DIALOG_CMP } from "../kgDataset/showDataset/sh
import { UtilModule } from "src/util";
import { ComponentsModule } from "src/components";
import { BsFeatureService } from "../service";
+import { MAT_DIALOG_DATA } from "@angular/material/dialog";
@Component({
- selector: 'blabla',
+ selector: 'show-ds-dialog-cmp',
template: `
-<mat-dialog-content class="m-0 p-0">
+<ng-template [ngIf]="useClassicUi" [ngIfElse]="modernUiTmpl">
<kg-regional-feature-detail></kg-regional-feature-detail>
-</mat-dialog-content>
+</ng-template>
-<mat-dialog-actions align="center">
- <button mat-button mat-dialog-close>
- Close
- </button>
-</mat-dialog-actions>
+<ng-template #modernUiTmpl>
+
+ <mat-dialog-content class="m-0 p-0">
+ <kg-regional-feature-detail></kg-regional-feature-detail>
+ </mat-dialog-content>
+
+ <mat-dialog-actions align="center">
+ <button mat-button mat-dialog-close>
+ Close
+ </button>
+ </mat-dialog-actions>
+
+</ng-template>
`
})
-export class ShowDsDialogCmp{}
+export class ShowDsDialogCmp{
+ public useClassicUi = false
+ constructor(
+ @Optional() @Inject(MAT_DIALOG_DATA) data: any
+ ){
+ this.useClassicUi = data.useClassicUi
+ }
+}
@NgModule({
imports: [
diff --git a/src/util/siibraApiConstants/types.ts b/src/util/siibraApiConstants/types.ts
index 0efa98b92f1e0c683a262c94b367446ab23dc4a7..da56c848a3e80b39b6f709373096be1e27e297be 100644
--- a/src/util/siibraApiConstants/types.ts
+++ b/src/util/siibraApiConstants/types.ts
@@ -84,6 +84,7 @@ export type TDatainfos = {
cite: string
doi: string
}[]
+ useClassicUi: boolean
}
export type TSpaceFull = {