MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Adds guided tour on dashboard for new user

This commit is contained in:
apapachristou 2020-11-24 19:09:10 +02:00
parent c796745c73
commit 208824f55b
10 changed files with 667 additions and 553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss
View File

@ -13,7 +13,7 @@ ngx-guided-tour {
.guided-tour-spotlight-overlay { .guided-tour-spotlight-overlay {
position: fixed; position: fixed;
box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 1.5rem rgba(0, 0, 0, 0.5);
border-radius: 44px; /*custom add*/ border-radius: 44px; /*custom add*/
} }
@ -33,7 +33,7 @@ ngx-guided-tour {
animation: pulse 2s linear infinite; animation: pulse 2s linear infinite;
&:after { &:after {
content: ''; content: "";
display: inline-block; display: inline-block;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -44,11 +44,11 @@ ngx-guided-tour {
@keyframes pulse { @keyframes pulse {
from { from {
transform: translate(-50%, -50%) scale(0.45); transform: translate(-50%, -50%) scale(0.45);
opacity: 1.0; opacity: 1;
} }
to { to {
transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
opacity: 0.0; opacity: 0;
} }
} }
} }
@ -62,9 +62,11 @@ ngx-guided-tour {
left: 50%; left: 50%;
top: 50%; top: 50%;
border-radius: 5px; border-radius: 5px;
transform: translate(-50%, -50%) transform: translate(-50%, -50%);
} }
&.tour-bottom, &.tour-bottom-right, &.tour-bottom-left { &.tour-bottom,
&.tour-bottom-right,
&.tour-bottom-left {
.tour-arrow::before { .tour-arrow::before {
position: absolute; position: absolute;
} }
@ -73,7 +75,9 @@ ngx-guided-tour {
} }
} }
&.tour-top, &.tour-top-right, &.tour-top-left { &.tour-top,
&.tour-top-right,
&.tour-top-left {
margin-bottom: 10px; margin-bottom: 10px;
.tour-arrow::before { .tour-arrow::before {
@ -85,7 +89,8 @@ ngx-guided-tour {
} }
} }
&.tour-bottom , &.tour-top { &.tour-bottom,
&.tour-top {
.tour-arrow::before { .tour-arrow::before {
// transform: translateX(-50%); // transform: translateX(-50%);
// left: 50%; // left: 50%;
@ -98,14 +103,16 @@ ngx-guided-tour {
margin-left: 10px; margin-left: 10px;
} }
&.tour-bottom-right, &.tour-top-right { &.tour-bottom-right,
&.tour-top-right {
.tour-arrow::before { .tour-arrow::before {
transform: translateX(-100%); transform: translateX(-100%);
left: calc(100% - 5px); left: calc(100% - 5px);
} }
} }
&.tour-bottom-left, &.tour-top-left { &.tour-bottom-left,
&.tour-top-left {
.tour-arrow::before { .tour-arrow::before {
left: 5px; left: 5px;
} }
@ -159,7 +166,7 @@ ngx-guided-tour {
color: #212121; color: #212121;
line-height: 26px; line-height: 26px;
white-space: pre-line; white-space: pre-line;
height: 210px; // height: 210px;
} }
h3.tour-title { h3.tour-title {
@ -200,9 +207,9 @@ ngx-guided-tour {
float: right; float: right;
width: 133px; width: 133px;
height: 40px; height: 40px;
border: 1px solid #129D99; border: 1px solid #129d99;
background: #FFFFFF 0% 0% no-repeat padding-box; background: #ffffff 0% 0% no-repeat padding-box;
color: #129D99; color: #129d99;
} }
.next-button { .next-button {
@ -216,18 +223,19 @@ ngx-guided-tour {
/*custom add*/ /*custom add*/
float: left; float: left;
padding: 10px 0px;; padding: 10px 0px;
width: 101px; width: 101px;
background: #129D99 0% 0% no-repeat padding-box; background: #129d99 0% 0% no-repeat padding-box;
} }
/*custom add*/ /*custom add*/
button.skip-button.link-button, .next-button { button.skip-button.link-button,
.next-button {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
letter-spacing: 0.35px; letter-spacing: 0.35px;
height: 40px; height: 40px;
box-shadow: 0px 3px 6px #1E202029; box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px; border-radius: 30px;
} }
} }

4
dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts
View File

@ -1,4 +1,4 @@
import { debounceTime } from 'rxjs/operators'; import { debounceTime, delay } from 'rxjs/operators';
import { ErrorHandler, Inject, Injectable } from '@angular/core'; import { ErrorHandler, Inject, Injectable } from '@angular/core';
import { Observable, Subject, fromEvent } from 'rxjs'; import { Observable, Subject, fromEvent } from 'rxjs';
import { GuidedTour, TourStep, Orientation, OrientationConfiguration } from './guided-tour.constants'; import { GuidedTour, TourStep, Orientation, OrientationConfiguration } from './guided-tour.constants';
@ -63,11 +63,13 @@ export class GuidedTourService {
} }
}); });
} else { } else {
setTimeout(() => {
if (this._checkSelectorValidity()) { if (this._checkSelectorValidity()) {
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} else { } else {
this.nextStep(); this.nextStep();
} }
}, 500);
} }
} else { } else {
if (this._currentTour.completeCallback) { if (this._currentTour.completeCallback) {

85
dmp-frontend/src/app/ui/dashboard/dashboard.component.html
View File

@ -1,50 +1,38 @@
<div class="main-content dashboard-main-container h-100" [class.non-auth-main-container]="!this.isAuthenticated()"> <div class="main-content dashboard-main-container h-100" [class.non-auth-main-container]="!this.isAuthenticated()">
<div *ngIf="this.isAuthenticated()" class="container-fluid"> <div *ngIf="this.isAuthenticated()" class="container-fluid">
<div *ngIf="this.dashboardStatisticsData"> <div *ngIf="this.dashboardStatisticsData">
<div *ngIf="!this.hasDmps()">
<div class="main-content">
<div class="col-auto">
<div class="card" [style.display]="isVisible ? 'block' : 'none'">
<!-- <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> -->
<p class="card-title mb-0 pt-4">{{'DASHBOARD.DMP-QUESTION' | translate}}</p>
<p class="card-content mb-0">{{'DASHBOARD.INFO-DMP-TEXT' | translate}}</p>
<p class="card-content pt-3 mb-0">
{{'DASHBOARD.NEW-QUESTION' | translate}} <a href="https://www.openaire.eu/how-to-create-a-data-management-plan" target="_blank"><u>{{'DASHBOARD.OPEN-AIR-GUIDE' | translate}}</u></a> {{'DASHBOARD.LEARN-MORE' | translate}}
</p>
<div class="d-flex">
<button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button>
<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139">
<!-- <img class="col-auto ml-auto laptop-img"> -->
</div>
</div>
</div>
<div class="col-auto ml-auto stats">
<div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div>
<div class="counter-zero">0</div>
<a [routerLink]="['/plans']" class="link">{{'DASHBOARD.DMPS' | translate}}</a>
<div class="counter-zero">0</div>
<a [routerLink]="['/datasets']" class="link">{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</a>
<div class="counter-zero">0</div>
<a class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
<div class="counter-zero">0</div>
<a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
</div>
</div>
</div>
<div *ngIf="this.hasDmps()">
<div class="main-content"> <div class="main-content">
<div class="col"> <div class="col">
<div class="card col-auto mt-0" [style.display]="isVisible ? 'block' : 'none'"> <div class="card col-auto mt-0" [style.display]="isVisible ? 'block' : 'none'">
<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a> <a *ngIf="this.hasDmps()" class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<p class="card-content mb-0 pt-0">
{{'DASHBOARD.DMP-ABOUT-BEG' | translate}} <p *ngIf="!this.hasDmps()" class="card-title mb-0 pt-4">{{'DASHBOARD.DMP-QUESTION' | translate}}</p>
<p *ngIf="!this.hasDmps()" class="card-content mb-0">{{'DASHBOARD.INFO-DMP-TEXT' | translate}}</p>
<p *ngIf="!this.hasDmps()" class="card-content pt-3 mb-0">
{{'DASHBOARD.NEW-QUESTION' | translate}} <a href="https://www.openaire.eu/how-to-create-a-data-management-plan" target="_blank"><u>{{'DASHBOARD.OPEN-AIR-GUIDE' | translate}}</u></a> {{'DASHBOARD.LEARN-MORE' | translate}}
</p>
<p *ngIf="this.hasDmps()" class="card-content mb-0 pt-0">{{'DASHBOARD.DMP-ABOUT-BEG' | translate}}
<b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b> <b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b>
{{'DASHBOARD.DMP-ABOUT-END' | translate}}</p> {{'DASHBOARD.DMP-ABOUT-END' | translate}}
<div class="d-flex"> </p>
<div class="row d-flex align-items-center">
<div *ngIf="!this.hasDmps()" class="col-auto add-dataset-btn d-flex">
<button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button>
<!-- <img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139"> -->
<!-- <img class="col-auto ml-auto laptop-img"> -->
</div>
<div *ngIf="this.hasDmps()" class="new-dataset-tour add-dataset-btn col-auto d-flex">
<button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" (click)="addNewDataset()">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button> <button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" (click)="addNewDataset()">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139"> </div>
<span class="col-auto ml-auto">
<img class="laptop-img\6" src="../../../assets/splash/assets/img/1_Main/Png/Who Benefits copy.png" width="116" height="139">
</span>
</div> </div>
</div> </div>
<div *ngIf="this.hasDmps()" class="col">
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div> <div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom"> <mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
<mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})"> <mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">
@ -70,7 +58,22 @@
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>
<div class="col-auto stats"> </div>
<!-- Right Sidebar -->
<div *ngIf="!this.hasDmps()" class="col-auto ml-auto stats">
<div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div>
<div class="counter-zero">0</div>
<a [routerLink]="['/plans']" class="link">{{'DASHBOARD.DMPS' | translate}}</a>
<div class="counter-zero">0</div>
<a [routerLink]="['/datasets']" class="link">{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</a>
<div class="counter-zero">0</div>
<a class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
<div class="counter-zero">0</div>
<a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
</div>
<div *ngIf="this.hasDmps()" class="col-auto stats">
<div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div> <div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}"> <div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}">
{{dashboardStatisticsData?.totalDataManagementPlanCount}}</div> {{dashboardStatisticsData?.totalDataManagementPlanCount}}</div>
@ -86,6 +89,12 @@
<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a> <a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
</div> </div>
</div> </div>
</div>
<div>
<div class="main-content">
</div> </div>
</div> </div>
</div> </div>

7
dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
View File

@ -90,7 +90,7 @@
line-height: 1; line-height: 1;
font-size: 0.87rem; font-size: 0.87rem;
padding: 0.62rem 1.87rem; padding: 0.62rem 1.87rem;
margin-left: 40px; // margin-left: 40px;
} }
.personal-usage { .personal-usage {
@ -394,6 +394,11 @@ input[type="text"] {
// top: 7px; // top: 7px;
} }
.add-dataset-btn {
height: 40px;
margin-left: 40px;
}
::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar { .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background: #129d99; background: #129d99;

89
dmp-frontend/src/app/ui/dashboard/dashboard.component.ts
View File

@ -30,9 +30,10 @@ import { StartNewDmpDialogComponent } from '../dmp/start-new-dmp-dialogue/start-
import { StartNewDatasetDialogComponent } from '../dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component'; import { StartNewDatasetDialogComponent } from '../dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component';
import { DatasetWizardEditorModel } from '../dataset/dataset-wizard/dataset-wizard-editor.model'; import { DatasetWizardEditorModel } from '../dataset/dataset-wizard/dataset-wizard-editor.model';
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service'; import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { DatasetWizardModel } from '@app/core/model/dataset/dataset-wizard'; import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
@Component({ @Component({
@ -66,6 +67,10 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
totalDraftDatasets: number; totalDraftDatasets: number;
totalRecents: number; totalRecents: number;
dmpText: string;
datasetText: string;
importFileText: string;
startWizardText: string;
constructor( constructor(
private router: Router, private router: Router,
@ -80,7 +85,8 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
private userService: UserService, private userService: UserService,
private dialog: MatDialog, private dialog: MatDialog,
private language: TranslateService, private language: TranslateService,
private uiNotificationService: UiNotificationService private uiNotificationService: UiNotificationService,
private guidedTourService: GuidedTourService
) { ) {
super(); super();
// this.dashboardStatisticsData.totalDataManagementPlanCount = 0; // this.dashboardStatisticsData.totalDataManagementPlanCount = 0;
@ -125,6 +131,10 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(results => { .subscribe(results => {
this.dashboardStatisticsData = results; this.dashboardStatisticsData = results;
if (this.dashboardStatisticsData && this.dashboardStatisticsData.totalDataManagementPlanCount === 0) {
this.openDashboardTour();
}
}); });
} }
@ -133,6 +143,12 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
})); }));
} }
// ngAfterContentChecked(): void {
// if (this.dashboardStatisticsData && this.dashboardStatisticsData.totalDataManagementPlanCount === 0) {
// this.openTour();
// }
// }
public isAuthenticated(): boolean { public isAuthenticated(): boolean {
return !(!this.authentication.current()); return !(!this.authentication.current());
} }
@ -271,6 +287,73 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
}); });
} }
public dashboardTour: GuidedTour = {
tourId: 'dashboard-tour',
useOrb: true,
steps: [
{
selector: '.new-dmp-dialog',
content: 'Step 1',
orientation: Orientation.BottomRight,
isStepUnique: false,
highlightPadding: 10,
closeAction: () => this.openNewDmpDialog()
},
{
selector: '.import-file',
content: 'Step 2',
orientation: Orientation.Bottom,
isStepUnique: false,
highlightPadding: 10
},
{
selector: '.start-wizard',
content: 'Step 3',
orientation: Orientation.Bottom,
isStepUnique: false,
highlightPadding: 10,
closeAction: () => this.dialog.closeAll()
},
{
selector: '.new-dataset-tour',
content: 'Step 4',
orientation: Orientation.BottomLeft,
isStepUnique: false,
highlightPadding: 10
}
]
};
public setDashboardTourDmpText(): void {
this.dmpText = this.language.instant('DASHBOARD.TOUR-GUIDE.DMP') + '\n\n' +
this.language.instant('DASHBOARD.TOUR-GUIDE.START-NEW');
this.dashboardTour.steps[0].title = this.dmpText;
}
public setDashboardImportFileText(): void {
this.importFileText = this.language.instant('DASHBOARD.TOUR-GUIDE.IMPORT-DMP');
this.dashboardTour.steps[1].title = this.importFileText;
}
public setDashboardStartWizardText(): void {
this.startWizardText = this.language.instant('DASHBOARD.TOUR-GUIDE.START-WIZARD');
this.dashboardTour.steps[2].title = this.startWizardText;
}
public setDatasetText(): void {
this.datasetText = this.language.instant('DASHBOARD.TOUR-GUIDE.DATASET') + '\n\n' +
this.language.instant('DASHBOARD.TOUR-GUIDE.NEW-DATASET');
this.dashboardTour.steps[3].title = this.datasetText;
}
openDashboardTour() {
this.setDashboardTourDmpText();
this.setDashboardImportFileText();
this.setDashboardStartWizardText();
this.setDatasetText();
this.guidedTourService.startTour(this.dashboardTour);
}
// onCallbackSuccess(datasetId: String): void { // onCallbackSuccess(datasetId: String): void {
// this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION'), SnackBarNotificationLevel.Success); // this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION'), SnackBarNotificationLevel.Success);
// this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', datasetId]); }); // this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', datasetId]); });

3
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
View File

@ -29,9 +29,6 @@ import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order
import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service'; import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants'; import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
import { NgDialogAnimationService } from "ng-dialog-animation"; import { NgDialogAnimationService } from "ng-dialog-animation";
import { StartNewDatasetDialogComponent } from '../start-new-dataset-dialogue/start-new-dataset-dialog.component';
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
import { StartNewDmpDialogComponent } from '../start-new-dmp-dialogue/start-new-dmp-dialog.component';
@Component({ @Component({
selector: 'app-dmp-listing-component', selector: 'app-dmp-listing-component',

4
dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html
View File

@ -9,17 +9,21 @@
<h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1> <h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p> <p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
<div class="actions"> <div class="actions">
<div class="import-file col-auto">
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)"> <button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
<mat-icon class="pr-2">file_upload</mat-icon> <mat-icon class="pr-2">file_upload</mat-icon>
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }} {{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
</button> </button>
</div>
<p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p> <p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
<div class="start-wizard col-auto">
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()"> <button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
<mat-icon>chevron_right</mat-icon> <mat-icon>chevron_right</mat-icon>
{{ 'NAV-BAR.START-WIZARD' | translate }} {{ 'NAV-BAR.START-WIZARD' | translate }}
</button> </button>
</div> </div>
</div> </div>
</div>
<div class="row pt-4"> <div class="row pt-4">
<mat-icon class="col-auto material-icons-outlined warn">info</mat-icon> <mat-icon class="col-auto material-icons-outlined warn">info</mat-icon>
<span class="col"> <span class="col">

6
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -18,8 +18,10 @@
<div class="collapse navbar-collapse justify-content-end" id="navigation"> <div class="collapse navbar-collapse justify-content-end" id="navigation">
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())"> <div class="new-dmp-dialog col-md-auto ml-auto">
<button type="button" class="normal-btn ml-auto" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> <button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
</div>
<div class="col-md-auto pl-0" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<!-- <button type="button" class="normal-btn ml-auto" [routerLink]="['/quick-wizard']">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> --> <!-- <button type="button" class="normal-btn ml-auto" [routerLink]="['/quick-wizard']">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> -->
<a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a> <a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
<!-- <button mat-icon-button class="lang" [matMenuTriggerFor]="languageMenu"></button> --> <!-- <button mat-icon-button class="lang" [matMenuTriggerFor]="languageMenu"></button> -->

4
dmp-frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -134,3 +134,7 @@ $mat-card-header-size: 40px !default;
background-color: #ececec; background-color: #ececec;
border-radius: 6px; border-radius: 6px;
} }
.new-dmp-dialog {
padding: 0em .5em 0em 0em;
}

2
dmp-frontend/src/app/ui/sidebar/sidebar.component.html
View File

@ -4,7 +4,7 @@
<div *ngIf="showItem(groupMenuItem);"> <div *ngIf="showItem(groupMenuItem);">
<hr *ngIf="!firstGroup"> <hr *ngIf="!firstGroup">
<mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}"> <mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}">
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/datasets'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}"> <a class="new-dmp nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/datasets'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}">
<i class="material-icons icon">{{ groupMenuRoute.icon }}</i> <i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
<i *ngIf="groupMenuRoute.path == '/plans'" class="material-icons icon-mask">person</i> <i *ngIf="groupMenuRoute.path == '/plans'" class="material-icons icon-mask">person</i>
<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}">{{groupMenuRoute.title | translate}}</span> <span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}">{{groupMenuRoute.title | translate}}</span>