From a5061759b812fc8d99d35bcbc35584490ea6bb33 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Wed, 20 Apr 2022 18:25:55 +0300
Subject: [PATCH] #7665: Save and Previous buttons updated on the Dataset
 Template (Admin). 1. dmp-editor.component.html & dmp-clone.component.html &
 dataset-wizard.component.html: On next button, moved chevron_right icon to
 the right side of the text. 2. dataset-profile-editor.component.scss:    a.
 Removed margin-top from .dataset-profile-editor.    b. Updated position and
 styling of .scroll-on-top.    c. Added .floating-btn and
 .progress-min-height. 3. dataset-profile-editor.component.ts:    a. Set
 showScrollOnTopButton default value to true and comment intersection
 stepperNavigationObserver (because title is sticky now and always visible).  
  b. In method "onSubmit()" added parameter close:boolean=false, to check if
 the router will navigate to "/dataset-profiles" or not (button "save and
 continue" added). 4. dataset-profile-editor.component.html:    a. Renamed
 "Back" button to "Close" and use DATASET-WIZARD.ACTIONS.CLOSE.    b. Moved
 "Close", "Save"/"Update" and "Finalize" buttons aligned with title on the top
 right.    c. Made title with aligned buttons sticky to top with stepper.   
 d. Moved buttons "Previous"/"Next" on the down right of viewport (floating
 buttons).    e. Moved scroll button and update it.    f. Updated alignment of
 main content when there is no sidebar on the left. 5. i18n/: In language
 files added "DATASET-WIZARD.ACTIONS.CLOSE" and updated
 "USER-PROFILE.MERGING-EMAILS-DIALOG.TITLE" (#7662).

---
 .../dataset-profile-editor.component.html     | 273 +++++++++---------
 .../dataset-profile-editor.component.scss     |  28 +-
 .../dataset-profile-editor.component.ts       |  74 ++---
 .../dataset-wizard.component.html             |   4 +-
 .../app/ui/dmp/clone/dmp-clone.component.html |   2 +-
 .../ui/dmp/editor/dmp-editor.component.html   |   2 +-
 dmp-frontend/src/assets/i18n/de.json          |   3 +-
 dmp-frontend/src/assets/i18n/en.json          |   3 +-
 dmp-frontend/src/assets/i18n/es.json          |   3 +-
 dmp-frontend/src/assets/i18n/gr.json          |   3 +-
 dmp-frontend/src/assets/i18n/hr.json          |   3 +-
 dmp-frontend/src/assets/i18n/pt.json          |   3 +-
 dmp-frontend/src/assets/i18n/sk.json          |   3 +-
 dmp-frontend/src/assets/i18n/sr.json          |   3 +-
 dmp-frontend/src/assets/i18n/tr.json          |   3 +-
 15 files changed, 227 insertions(+), 183 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
index ce01fa401..fb1665453 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
@@ -7,122 +7,98 @@
 
 
 		<!-- Total steps: {{stepper.steps.length}} -->
+		<div id="header-outer-wrapper">
+			<div class="row">
+				<div class="col-12 d-flex" id="title-column">
 
-		<div class="row">
-			<div class="col-12 d-flex" id="title-column">
+					<div style="padding-left: 2em;">
+						<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
+						<h3 *ngIf="isNew && isClone">
+							<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
+							{{form.get('label').value}}
+						</h3>
+						<h3 *ngIf="isNew && isNewVersion">
+							<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
+							{{form.get('label').value}}
+						</h3>
 
-				<div style="padding-left: 2em;">
-					<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
-					<h3 *ngIf="isNew && isClone">
-						<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
-						{{form.get('label').value}}
-					</h3>
-					<h3 *ngIf="isNew && isNewVersion">
-						<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
-						{{form.get('label').value}}
-					</h3>
+						<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
+					</div>
+					<ng-container *ngTemplateOutlet="actions"></ng-container>
 
-					<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
+
+					<!-- <div class="d-flex justify-content-end" style="gap: 1em">
+						<button mat-raised-button *ngIf="form.get('status').value==1" class="template_action_btn" (click)="downloadXML();" type="button" [@action-btn]>{{
+							'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
+
+						<ng-container *ngIf="!viewOnly">
+							<button mat-raised-button class="template_action_btn" type="button"
+								*ngIf="stepper.selectedIndex !=2 && !newVersionId"
+								[@action-btn]
+								(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+								translate}}</button>
+							<button mat-raised-button class="template_action_btn" type="button" [@action-btn]
+								*ngIf="!newVersionId || (newVersionId && stepper.selectedIndex !=2)"
+								(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
+								translate}}</button>
+						</ng-container>
+						<ng-container *ngIf="showUpdateButton()">
+							<button mat-raised-button class="template_action_btn" type="button"
+								*ngIf="stepper.selectedIndex !=2 && !newVersionId"
+								[@action-btn]
+								(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
+								translate}}</button>
+						</ng-container>
+						<ng-container *ngIf="!isNew">
+							<button mat-raised-button class="template_action_btn" (click)="delete()" [@action-btn]>
+								<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
+							</button>
+						</ng-container>
+					</div> -->
 				</div>
-
-				<!-- <div class="d-flex justify-content-end" style="gap: 1em">
-					<button mat-raised-button *ngIf="form.get('status').value==1" class="template_action_btn" (click)="downloadXML();" type="button" [@action-btn]>{{
-						'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
-
-					<ng-container *ngIf="!viewOnly">
-						<button mat-raised-button class="template_action_btn" type="button"
-							*ngIf="stepper.selectedIndex !=2 && !newVersionId"
-							[@action-btn]
-							(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
-							translate}}</button>
-						<button mat-raised-button class="template_action_btn" type="button" [@action-btn]
-							*ngIf="!newVersionId || (newVersionId && stepper.selectedIndex !=2)"
-							(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
-							translate}}</button>
-					</ng-container>
-					<ng-container *ngIf="showUpdateButton()">
-						<button mat-raised-button class="template_action_btn" type="button"
-							*ngIf="stepper.selectedIndex !=2 && !newVersionId"
-							[@action-btn]
-							(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
-							translate}}</button>
-					</ng-container>
-					<ng-container *ngIf="!isNew">
-						<button mat-raised-button class="template_action_btn" (click)="delete()" [@action-btn]>
-							<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
-						</button>
-					</ng-container>
-				</div> -->
 			</div>
-		</div>
 
-		<div class="row stepper-navigation-outer-wrapper" >
+			<div class="row stepper-navigation-outer-wrapper" >
 
 
-			<!-- Steps Navigation -->
-			<div id="stepper-navigation-wrapper">
-			<div class="col-12 d-flex" *ngIf="steps" id="stepper-navigation">
-				<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
-					<div id="progress" [ngStyle]="progressStyle"></div>
-					<div class="row h-100">
-						<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
-							<span (click)="stepper.selectedIndex=idx"
-							class="stepper-title-label"
-							[ngClass]="{'stepper-title-label-locked': !isStepUnlocked(idx),'stepper-title-label-completed':idx < stepper.selectedIndex} ">
-								<ng-container *ngIf="(step.completed &&(idx!=steps.length-1)) else numberLabel">
-									<mat-icon style="font-size:0.7em; height: 0px;">done</mat-icon>
-								</ng-container>
-								<ng-template #numberLabel>
-									{{idx+1}}
-								</ng-template>
-								{{step.label}}
-							</span>
+				<!-- Steps Navigation -->
+				<div id="stepper-navigation-wrapper">
+					<div class="col-12 d-flex" *ngIf="steps" id="stepper-navigation">
+<!--						<button [@previous_btn] mat-button class="navigate-btn mr-3" (click)="stepper.previous()"-->
+<!--								[class.navigate-btn-disabled]="stepper.selectedIndex ==0">-->
+<!--							<mat-icon class="back-icon pointer">chevron_left</mat-icon>-->
+<!--							{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}-->
+<!--						</button>-->
+
+						<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
+							<div id="progress" [ngStyle]="progressStyle"></div>
+							<div class="row h-100 progress-min-height">
+								<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
+									<span (click)="stepper.selectedIndex=idx"
+									class="stepper-title-label"
+									[ngClass]="{'stepper-title-label-locked': !isStepUnlocked(idx),'stepper-title-label-completed':idx < stepper.selectedIndex} ">
+										<ng-container *ngIf="(step.completed &&(idx!=steps.length-1)) else numberLabel">
+											<mat-icon style="font-size:0.7em; height: 0px;">done</mat-icon>
+										</ng-container>
+										<ng-template #numberLabel>
+											{{idx+1}}
+										</ng-template>
+										{{step.label}}
+									</span>
+								</div>
+							</div>
 						</div>
+
+<!--						<button mat-button class="navigate-btn ml-3"-->
+<!--								[@next_btn]-->
+<!--								(click)="validateStep(stepper.selectedIndex);stepper.next();"-->
+<!--								[ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper.selectedIndex) || (stepper.selectedIndex === (steps.length-1))}">-->
+<!--							<span>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</span>-->
+<!--							<mat-icon class="back-icon pointer">chevron_right</mat-icon>-->
+<!--						</button>-->
 					</div>
 				</div>
-
-				<div class="col d-flex justify-content-end" style="padding-right: 0px;">
-					<button [@previous_btn] mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
-						<!-- <mat-icon>navigate_before</mat-icon>  -->
-						{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}
-					</button>
-					<button mat-button class="navigate-btn ml-3"
-						[@next_btn]
-						(click)="validateStep(stepper.selectedIndex);stepper.next();"
-						*ngIf="stepper.selectedIndex != (steps.length-1)"
-						[ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper.selectedIndex)}">
-
-						<mat-icon style="font-size: 1.66em;">navigate_next</mat-icon>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}
-					</button>
-
-
-					<ng-container *ngIf="steps.length-1 === stepper.selectedIndex">
-						<button [@finalize_btn] mat-button class="finalize-btn ml-3"
-							[disabled]="!form.valid"
-							(click)="updateAndFinalize()"
-							>
-
-							<ng-container *ngIf="form.get('status').value==1">
-								<ng-container *ngIf="newVersionId else updateText">
-									{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |translate}}
-								</ng-container>
-								<ng-template #updateText>
-									{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |translate}}
-								</ng-template>
-							</ng-container>
-							<ng-container *ngIf="form.get('status').value!=1">
-								{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |translate}}
-							</ng-container>
-						</button>
-					</ng-container>
-
-
-				</div>
-
 			</div>
-			</div>
-
-
 		</div>
 
 
@@ -134,12 +110,7 @@
 			<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate" [completed]="(!form.get('label').invalid && !form.get('description').invalid && !form.get('language').invalid)" >
 				<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
 				</ng-template> -->
-				<div class="row">
-					<div class="col-3 side-actions">
-						<ng-container *ngTemplateOutlet="actions">
-
-						</ng-container>
-					</div>
+				<div class="col-9">
 					<div class="col">
 						<div class="col-12">
 							<div class="heading">1.1 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME'| translate}} *</div>
@@ -267,10 +238,6 @@
 								(dataNeedsRefresh)="onDataNeedsRefresh($event)"
 								[colorizeInvalid]="colorizeInvalid">
 							</dataset-profile-table-of-contents>
-							<ng-container *ngIf="true then actions">
-
-							</ng-container>
-
 						</div>
 					</div>
 
@@ -281,7 +248,7 @@
 					<div class="row">
 
 						<div class="col">
-							<div class="row" *ngIf="selectedTocEntry">
+							<div class="col-12" *ngIf="selectedTocEntry">
 
 								<!-- PAGE INFO -->
 								<div class="col-12 content-displayer" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page" [@fade-in-fast]>
@@ -370,17 +337,13 @@
 				<!-- {{'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate}} -->
 				<!-- <button (click)="generatePreviewForm()">foo</button> -->
 				<ng-container *ngIf="formGroup">
-					<div class="row">
-						<div class="col-3 sticky-top" style="display: flex; height: 40vh;">
-
-							<ng-container *ngTemplateOutlet="actions">
-
-							</ng-container>
-						</div>
+					<div class="col-9">
 						<div class="col">
+							<div class="col-12">
 							<app-final-preview-component [formGroup]="formGroup" [visibilityRules]="visibilityRules">
 
 							</app-final-preview-component>
+							</div>
 						</div>
 					</div>
 
@@ -441,13 +404,37 @@
 
 		</ng-container> -->
 
-		<div class="scroll-on-top">
-			<button mat-fab (click)="scrollOnTop()" *ngIf="showScrollOnTopButton" [@scroll-on-top-btn] [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.BACK-TO-TOP'| translate">
-				<mat-icon>
-					keyboard_arrow_up
-				</mat-icon>
-			</button>
-		</div>
+<!--		<div class="scroll-on-top">-->
+<!--			<button mat-fab (click)="scrollOnTop()" *ngIf="showScrollOnTopButton" [@scroll-on-top-btn] [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.BACK-TO-TOP'| translate">-->
+<!--				<mat-icon>-->
+<!--					keyboard_arrow_up-->
+<!--				</mat-icon>-->
+<!--			</button>-->
+<!--		</div>-->
+
+		<a class="scroll-on-top d-flex flex-column align-items-center" (click)="scrollOnTop()" *ngIf="showScrollOnTopButton" [@scroll-on-top-btn] [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.BACK-TO-TOP'| translate">
+			<mat-icon>
+				arrow_upward
+			</mat-icon>
+			<div>SCROLL</div>
+		</a>
+
+		<ng-container *ngIf="steps && stepper">
+			<div class="floating-btn">
+				<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button
+						class="navigate-btn" (click)="stepper?.previous()">
+					<mat-icon class="back-icon pointer">chevron_left</mat-icon>
+					{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}
+				</button>
+				<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button
+						class="navigate-btn ml-3" [@next_btn]
+						(click)="validateStep(stepper?.selectedIndex);stepper?.next();"
+						[ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper?.selectedIndex)}">
+					<span>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</span>
+					<mat-icon class="back-icon pointer">chevron_right</mat-icon>
+				</button>
+			</div>
+		</ng-container>
 
 		<!-- <div class="row">
 			<button (click)="printForm()">
@@ -479,9 +466,29 @@
 
 
 <ng-template #actions>
-	<div class="actions-template">
-		<button mat-raised-button class="template_action_btn" (click)="discardChanges()">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
-		<button *ngIf="!viewOnly" mat-raised-button class="template_action_btn save-btn" (click)="onSubmit()" [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |translate}}</button>
-		<button *ngIf="viewOnly" [@finalize_btn] mat-raised-button class="template_action_btn save-btn" (click)="updateAndFinalize()">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |translate}}</button>
+	<div>
+		<button mat-raised-button class="template_action_btn mr-3" (click)="discardChanges()">{{'DATASET-WIZARD.ACTIONS.CLOSE' | translate}}</button>
+		<button *ngIf="!viewOnly" mat-raised-button class="template_action_btn save-btn" (click)="onSubmit()" [disabled]="!form.valid">
+			{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |translate}}
+			<mat-icon (click)="$event.stopPropagation();" style="width: 14px;" [matMenuTriggerFor]="menuSave">expand_more</mat-icon>
+		</button>
+		<mat-menu #menuSave="matMenu">
+			<button [disabled]="!form.valid" mat-menu-item (click)="onSubmit(true)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
+			<button [disabled]="!form.valid" mat-menu-item (click)="onSubmit()" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
+		</mat-menu>
+
+		<button *ngIf="viewOnly" [@finalize_btn] mat-raised-button class="template_action_btn save-btn" [disabled]="!form.valid" (click)="updateAndFinalize()">
+			{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |translate}}
+		</button>
+
+		<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex"
+				[@finalize_btn] mat-button class="finalize-btn ml-3"
+				[disabled]="!form.valid"
+				[class.invisible]="steps?.length-1 !== stepper?.selectedIndex"
+				(click)="updateAndFinalize()">
+			<ng-container *ngIf="form.get('status').value!=1">
+				{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |translate}}
+			</ng-container>
+		</button>
 	</div>
 </ng-template>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
index eb455bc3a..6caaaed3b 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
@@ -1,5 +1,5 @@
 .dataset-profile-editor {
-	margin-top: 1.3rem;
+	//margin-top: 1.3rem;
 
 	.full-width {
 		width: 100%;
@@ -146,7 +146,7 @@ $blue-color-light: #5cf7f2;
 		padding-right: 2em;
 		box-shadow: 0px 3px 6px #1E202029;
 		color: #212121;
-	
+
 		transition-property: background-color, color;
 		transition-duration: 200ms;
 		transition-delay: 50ms;
@@ -317,11 +317,25 @@ $blue-color-light: #5cf7f2;
 	text-align: center;
 }
 .scroll-on-top{
+	position: fixed;
+	bottom: 20em;
+	right: 2em;
+	color: #129D99 !important;
+	cursor: pointer;
+	font-size: 1rem;
+	font-weight: 400;
+}
+
+.floating-btn {
 	position: fixed;
 	bottom: 2em;
 	right: 2em;
 }
 
+.progress-min-height {
+	min-height: 35px;
+}
+
 
 #stepper-navigation-wrapper{
 	z-index: 99;
@@ -343,6 +357,14 @@ $blue-color-light: #5cf7f2;
 .stepper-navigation-outer-wrapper{
 	padding: 2em;
 	margin-bottom: 1em;
+	//background: #f4f4f4;
+	//position: sticky;
+	//top: 0.01em;
+	//z-index: 9999;
+}
+
+#header-outer-wrapper {
+	padding-top: 1.3rem;
 	background: #f4f4f4;
 	position: sticky;
 	top: 0.01em;
@@ -359,4 +381,4 @@ $blue-color-light: #5cf7f2;
 	height: 40vh;
 	position: sticky;
 	top: 2em;
-}
\ No newline at end of file
+}
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
index c6e848ea6..0990e4d3f 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
@@ -85,7 +85,7 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
 	inputUserState: 'untriggered'| 'triggered' = 'untriggered';
 	private _inputUserField$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 	private _inputUserButton$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-	showScrollOnTopButton:boolean = false;
+	showScrollOnTopButton:boolean = true;
 
 	private stepperNavigationObserver: IntersectionObserver;
 
@@ -246,34 +246,34 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
 		if(tocentries && tocentries.length){
 			this.selectedTocEntry = tocentries[0];
 		}
-		setTimeout(() => {
-			// const stepperNavigation = document.getElementById('stepper-navigation');
-			const titleColumn = document.getElementById('title-column');
-			// const stepperNavigationWrapper = document.getElementById('stepper-navigation-wrapper');
-
-			if(titleColumn){
-				if(this.stepperNavigationObserver){
-					this.stepperNavigationObserver.disconnect();
-					this.stepperNavigationObserver = null;
-				}
-				this.stepperNavigationObserver = new IntersectionObserver((e)=>{
-					e.forEach(_=>{
-						if(_.isIntersecting){
-							this.showScrollOnTopButton = false;
-							// stepperNavigation.classList.remove('fixed-navigation');
-							// stepperNavigationWrapper.classList.remove('fixed-navigation');
-						}else{
-							this.showScrollOnTopButton = true;
-							// stepperNavigation.classList.add('fixed-navigation');
-							// stepperNavigationWrapper.classList.add('fixed-navigation');
-						}
-					})
-				}, {root:null,  rootMargin:'0px', threshold:0});
-				this.stepperNavigationObserver.observe(titleColumn);
-			}else{
-				console.log('Could not load scroll On Top Observer')
-			}
-		}, 400);
+		// setTimeout(() => {
+		// 	// const stepperNavigation = document.getElementById('stepper-navigation');
+		// 	// const titleColumn = document.getElementById('title-column');
+		// 	// const stepperNavigationWrapper = document.getElementById('stepper-navigation-wrapper');
+		//
+		// 	if(titleColumn){
+		// 		if(this.stepperNavigationObserver){
+		// 			this.stepperNavigationObserver.disconnect();
+		// 			this.stepperNavigationObserver = null;
+		// 		}
+		// 		this.stepperNavigationObserver = new IntersectionObserver((e)=>{
+		// 			e.forEach(_=>{
+		// 				if(_.isIntersecting){
+		// 					this.showScrollOnTopButton = false;
+		// 					// stepperNavigation.classList.remove('fixed-navigation');
+		// 					// stepperNavigationWrapper.classList.remove('fixed-navigation');
+		// 				}else{
+		// 					this.showScrollOnTopButton = true;
+		// 					// stepperNavigation.classList.add('fixed-navigation');
+		// 					// stepperNavigationWrapper.classList.add('fixed-navigation');
+		// 				}
+		// 			})
+		// 		}, {root:null,  rootMargin:'0px', threshold:0});
+		// 		this.stepperNavigationObserver.observe(titleColumn);
+		// 	}else{
+		// 		console.log('Could not load scroll On Top Observer')
+		// 	}
+		// }, 400);
 		// this._initializeFormValidity(tocentries);
 
 		//Checking invalid visibilty RULES
@@ -424,7 +424,7 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
 	// 	(<FormArray>this.form.get('sections')).removeAt(index);
 	// }
 
-	onSubmit() {
+	onSubmit(close: boolean = false) {
 		let data = this.form.value;
 
 		if (this.datasetProfileId) {
@@ -432,7 +432,9 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(() => {
 					this.form.markAsPristine();//deactivate guard
-					this.router.navigate(['/dataset-profiles']);
+					if(close) {
+						this.router.navigate(['/dataset-profiles']);
+					}
 					this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-PROFILE-EDITOR.FEEDBACK-MESSAGES.SAVE-SUCCESS'), SnackBarNotificationLevel.Success);
 				},error=> this.onCallbackError(error));
 		} else if (this.newVersionId) {
@@ -442,8 +444,10 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(() => {
 					this.form.markAsPristine();//deactivate guard
-					this.router.navigate(['/dataset-profiles']);
-					this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-PROFILE-EDITOR.FEEDBACK-MESSAGES.SAVE-SUCCESS'), SnackBarNotificationLevel.Success);
+						if(close) {
+							this.router.navigate(['/dataset-profiles']);
+						}
+						this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-PROFILE-EDITOR.FEEDBACK-MESSAGES.SAVE-SUCCESS'), SnackBarNotificationLevel.Success);
 				},
 					error => this.onCallbackErrorNewVersion(error)
 				);
@@ -456,7 +460,9 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(() => {
 					this.form.markAsPristine();//deactivate guard
-					this.router.navigate(['/dataset-profiles']);
+					if(close) {
+						this.router.navigate(['/dataset-profiles']);
+					}
 					this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-PROFILE-EDITOR.FEEDBACK-MESSAGES.SAVE-SUCCESS'), SnackBarNotificationLevel.Success);
 				}, error=> this.onCallbackError(error));
 		}
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
index 3a12076f3..157843b2b 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
@@ -82,12 +82,12 @@
 							<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
 						</div>
 						<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" (click)="nextStep()">
-							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
+							<span class="material-icons">chevron_right</span>
 						</div>
 						<div *ngIf="!formGroup.get('profile').value" mat-raised-button type="button" class="col-auto stepper-btn dataset-next next-disabled ml-auto">
-							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
+							<span class="material-icons">chevron_right</span>
 						</div>
 						<button [disabled]="saving" (click)="save(saveAnd.addNew)" *ngIf="(step === maxStep) && !lockStatus && formGroup.get('profile').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto">
 							{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}
diff --git a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
index c87df1925..a949bb2d6 100644
--- a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
+++ b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
@@ -90,8 +90,8 @@
 							<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
 						</div>
 						<div *ngIf="this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
-							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
+							<span class="material-icons">chevron_right</span>
 						</div>
 						<div *ngIf="this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank">
 							<mat-icon>add</mat-icon>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
index 98aef9b79..4ff6b5729 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
@@ -69,8 +69,8 @@
 							<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
 						</div>
 						<div *ngIf="this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
-							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
+							<span class="material-icons">chevron_right</span>
 						</div>
 						<!-- <div *ngIf="this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank"> -->
 						<button [disabled]="saving" *ngIf="this.step >= 3 && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank">
diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json
index 5ce2a46a5..e2967d859 100644
--- a/dmp-frontend/src/assets/i18n/de.json
+++ b/dmp-frontend/src/assets/i18n/de.json
@@ -716,6 +716,7 @@
 		"ACTIONS": {
 			"NEXT": "Weiter",
 			"BACK": "Zurück",
+			"CLOSE": "Schließen",
 			"BACK-TO": "Back to",
 			"DELETE": "Löschen",
 			"GO-TO-GRANT": "Gehe zu Datansatzbeschreibung Förderung",
@@ -1658,7 +1659,7 @@
 	},
 	"USER-PROFILE": {
 		"MERGING-EMAILS-DIALOG": {
-			"TITLE": "Link new account",
+			"TITLE": "Verify linked account",
 			"MESSAGE": "An email to verify this action has been sent to you. Once accepted, you will be able to see your accounts merged. The last email account that you merge will be the one containing all of your DMP records and activity in Argos."
 		},
 		"SETTINGS": {
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 5dec63222..75a060cd2 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -716,6 +716,7 @@
 		"ACTIONS": {
 			"NEXT": "Next",
 			"BACK": "Back",
+			"CLOSE": "Close",
 			"BACK-TO": "Back to",
 			"DELETE": "Delete",
 			"GO-TO-GRANT": "Go to Dataset's Grant",
@@ -1658,7 +1659,7 @@
 	},
 	"USER-PROFILE": {
 		"MERGING-EMAILS-DIALOG": {
-			"TITLE": "Link new account",
+			"TITLE": "Verify linked account",
 			"MESSAGE": "An email to verify this action has been sent to you. Once accepted, you will be able to see your accounts merged. The last email account that you merge will be the one containing all of your DMP records and activity in Argos."
 		},
 		"SETTINGS": {
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index 506b57f3f..3660bd8f0 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -716,6 +716,7 @@
 		"ACTIONS": {
 			"NEXT": "Siguiente",
 			"BACK": "Volver",
+			"CLOSE": "Cerrar",
 			"BACK-TO": "Back to",
 			"DELETE": "Borrar",
 			"GO-TO-GRANT": "Ir a la subvención de la descripción del dataset",
@@ -1658,7 +1659,7 @@
 	},
 	"USER-PROFILE": {
 		"MERGING-EMAILS-DIALOG": {
-			"TITLE": "Link new account",
+			"TITLE": "Verify linked account",
 			"MESSAGE": "An email to verify this action has been sent to you. Once accepted, you will be able to see your accounts merged. The last email account that you merge will be the one containing all of your DMP records and activity in Argos."
 		},
 		"SETTINGS": {
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index cea3fa195..fc89ec303 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -716,6 +716,7 @@
 		"ACTIONS": {
 			"NEXT": "Επόμενο",
 			"BACK": "Πίσω",
+			"CLOSE": "Κλείσιμο",
 			"BACK-TO": "Back to",
 			"DELETE": "Διαγραφή",
 			"GO-TO-GRANT": "Μετάβαση σε Περιγραφή Συνόλου Δεδομένων της Επιχορήγησης",
@@ -1658,7 +1659,7 @@
 	},
 	"USER-PROFILE": {
 		"MERGING-EMAILS-DIALOG": {
-			"TITLE": "Link new account",
+			"TITLE": "Verify linked account",
 			"MESSAGE": "An email to verify this action has been sent to you. Once accepted, you will be able to see your accounts merged. The last email account that you merge will be the one containing all of your DMP records and activity in Argos."
 		},
 		"SETTINGS": {
diff --git a/dmp-frontend/src/assets/i18n/hr.json b/dmp-frontend/src/assets/i18n/hr.json
index 950ca495d..8864d7938 100644
--- a/dmp-frontend/src/assets/i18n/hr.json
+++ b/dmp-frontend/src/assets/i18n/hr.json
@@ -716,6 +716,7 @@
 		"ACTIONS": {
 			"NEXT": "Sljedeće",
 			"BACK": "Prethodno",
+			"CLOSE": "Ζatvori",
 			"BACK-TO": "Natrag na",
 			"DELETE": "Obriši",
 			"GO-TO-GRANT": "Idi na potporu za skupove podataka",
@@ -1658,7 +1659,7 @@
 	},
 	"USER-PROFILE": {
 		"MERGING-EMAILS-DIALOG": {
-			"TITLE": "Link new account",
+			"TITLE": "Verify linked account",
 			"MESSAGE": "An email to verify this action has been sent to you. Once accepted, you will be able to see your accounts merged. The last email account that you merge will be the one containing all of your DMP records and activity in Argos."
 		},
 		"SETTINGS": {
diff --git a/dmp-frontend/src/assets/i18n/pt.json b/dmp-frontend/src/assets/i18n/pt.json
index 2c7268bf2..bac9b444c 100644
--- a/dmp-frontend/src/assets/i18n/pt.json
+++ b/dmp-frontend/src/assets/i18n/pt.json
@@ -716,6 +716,7 @@
 		"ACTIONS": {
 			"NEXT": "Seguinte",
 			"BACK": "Voltar",
+			"CLOSE": "Fechar",
 			"BACK-TO": "Voltar para",
 			"DELETE": "Eliminar",
 			"GO-TO-GRANT": "Ir para o Grant do Dataset",
@@ -1658,7 +1659,7 @@
 	},
 	"USER-PROFILE": {
 		"MERGING-EMAILS-DIALOG": {
-			"TITLE": "Link new account",
+			"TITLE": "Verify linked account",
 			"MESSAGE": "An email to verify this action has been sent to you. Once accepted, you will be able to see your accounts merged. The last email account that you merge will be the one containing all of your DMP records and activity in Argos."
 		},
 		"SETTINGS": {
diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json
index a3fe681c8..22f731a36 100644
--- a/dmp-frontend/src/assets/i18n/sk.json
+++ b/dmp-frontend/src/assets/i18n/sk.json
@@ -716,6 +716,7 @@
 		"ACTIONS": {
 			"NEXT": "Ďalej",
 			"BACK": "Späť",
+			"CLOSE": "Ζavrieť",
 			"BACK-TO": "Späť na",
 			"DELETE": "Vymazať",
 			"GO-TO-GRANT": "Prejsť na Grant súboru dát",
@@ -1658,7 +1659,7 @@
 	},
 	"USER-PROFILE": {
 		"MERGING-EMAILS-DIALOG": {
-			"TITLE": "Link new account",
+			"TITLE": "Verify linked account",
 			"MESSAGE": "An email to verify this action has been sent to you. Once accepted, you will be able to see your accounts merged. The last email account that you merge will be the one containing all of your DMP records and activity in Argos."
 		},
 		"SETTINGS": {
diff --git a/dmp-frontend/src/assets/i18n/sr.json b/dmp-frontend/src/assets/i18n/sr.json
index d2debf362..d8db6535f 100644
--- a/dmp-frontend/src/assets/i18n/sr.json
+++ b/dmp-frontend/src/assets/i18n/sr.json
@@ -716,6 +716,7 @@
 		"ACTIONS": {
 			"NEXT": "Sledeći",
 			"BACK": "Nazad",
+			"CLOSE": "Zatvorite",
 			"BACK-TO": "Nazad na",
 			"DELETE": "Obrišite",
 			"GO-TO-GRANT": "Pređite na grant za skupove podataka",
@@ -1658,7 +1659,7 @@
 	},
 	"USER-PROFILE": {
 		"MERGING-EMAILS-DIALOG": {
-			"TITLE": "Link new account",
+			"TITLE": "Verify linked account",
 			"MESSAGE": "An email to verify this action has been sent to you. Once accepted, you will be able to see your accounts merged. The last email account that you merge will be the one containing all of your DMP records and activity in Argos."
 		},
 		"SETTINGS": {
diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json
index f15de3cac..79648a072 100644
--- a/dmp-frontend/src/assets/i18n/tr.json
+++ b/dmp-frontend/src/assets/i18n/tr.json
@@ -716,6 +716,7 @@
 		"ACTIONS": {
 			"NEXT": "Sonraki",
 			"BACK": "Geri",
+			"CLOSE": "Kapat",
 			"BACK-TO": "Geriye",
 			"DELETE": "Sil",
 			"GO-TO-GRANT": "Veri Seti Hibesine Git",
@@ -1658,7 +1659,7 @@
 	},
 	"USER-PROFILE": {
 		"MERGING-EMAILS-DIALOG": {
-			"TITLE": "Link new account",
+			"TITLE": "Verify linked account",
 			"MESSAGE": "An email to verify this action has been sent to you. Once accepted, you will be able to see your accounts merged. The last email account that you merge will be the one containing all of your DMP records and activity in Argos."
 		},
 		"SETTINGS": {