Merge branch 'ui-redesign' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-redesign

dmp-frontend/src/app/app.component.ts

@@ -91,11 +91,13 @@ export class AppComponent implements OnInit {
 				filter(event => event instanceof NavigationEnd),
 				map(() => {
 					let child = this.route.firstChild;
-					while (child.firstChild) {
+					if (child != null) {
-						child = child.firstChild;
+						while (child.firstChild) {
-					}
+							child = child.firstChild;
-					if (child.snapshot.data['title']) {
+						}
-						return child.snapshot.data['title'];
+						if (child.snapshot.data['title']) {
+							return child.snapshot.data['title'];
+						}
 					}
 					return appTitle;
 				})

dmp-frontend/src/app/ui/about/about.component.scss

@@ -1,5 +1,6 @@
 h1 {
 	text-align: center;
+	margin: 2rem 0 1rem 0;
 }
 
 img {

dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.html

@@ -2,7 +2,7 @@
 	<div [ngClass]="{'container contact-component': !isDialog}">
 		<div *ngIf="!isDialog" class="row">
 			<div class="col-md-12">
-				<h1>{{ 'CONTACT.TITLE-DASHED' | translate}}</h1>
+				<h1>{{ 'CONTACT.SUPPORT.TITLE' | translate}}</h1>
 			</div>
 		</div>
 		<div [ngClass]="{'contact-container': !isDialog}" class="row">

dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.scss

@@ -1,5 +1,6 @@
 h1 {
   text-align: center;
+  margin: 2rem 0 1rem 0;
 }
 
 img {

dmp-frontend/src/app/ui/dmp/dmp.routing.ts

@@ -77,7 +77,7 @@ const routes: Routes = [
 		canActivate: [AuthGuard],
 		data: {
 			breadcrumbs: 'new',
-			title: 'GENERAL.TITLES.PLANS-NEW'
+			title: 'GENERAL.TITLES.DMP-NEW'
 		}
 	},
 	{

dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html

@@ -32,9 +32,8 @@
 						<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
 					</mat-form-field>
 				</div>
-				<div class="col pb-3 d-flex">
+				<div class="col pl-0 pt-2 pb-3 d-flex">
-					<span class="not-found">{{'DMP-EDITOR.DATASET-INFO.FIND' | translate}}</span>
+					<span class="not-found">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.FIELDS.HELP' | translate}}</span>
-					<span class="insert" (click)="addDataset(dmp.id)">{{'DMP-EDITOR.ACTIONS.CREATE-DATASET' | translate}}</span>
 				</div>
 			</div>
 		</div>

dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.scss

@@ -59,19 +59,10 @@
     color: #00b29f !important;
   }
 
-  .insert {
-	text-decoration: underline;
-	color: #00b29f;
-	cursor: pointer;
-	font-size: 1rem;
-	font-weight: 400;
-  }
-
   .not-found {
-	cursor: pointer;
+	  font-size: 0.875rem;
-	font-size: 1rem;
+	  font-weight: 400;
-	font-weight: 400;
+	  padding: 0rem 0.5rem 0rem 0rem;
-	padding: 0rem 0.5rem 0rem 0rem;
   }
 }
 
@@ -83,3 +74,11 @@
   font-size: 1rem;
   padding: 0.6em 0 1em 0 !important;
 }
+
+::ng-deep .profile-form .mat-form-field-wrapper {
+  padding-bottom: 0rem;
+}
+
+:host ::ng-deep .multiple-auto-complete .align-arrow-right {
+  bottom: 1rem !important;
+}

dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.ts

@@ -200,7 +200,4 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 			});
 	}
 
-	addDataset(id: String) {
-		this.router.navigate(['/datasets/new/' + id]);
-	}
 }

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss

@@ -28,37 +28,48 @@
     border-radius: 4px;
 }
 
+::ng-deep .mat-dialog-container {
+    border-radius: 8px;
+}
 
 .search {
-    ::ng-deep {
+    padding: 2px !important;
-        .mat-dialog-container {
+}
-            border-radius: 8px;
+
-        }
+::ng-deep .search {
-        .mat-form-field-underline {
+    .mat-form-field-infix {
-            display: none;
+        border: none;
-        }
+        padding: 14px;
-        .mat-form-field-wrapper {
+    }   
-            padding: 0em !important;
+    .mat-form-field-underline {
-        }
+        display: none;
-        .mat-form-field-infix {
+    }
-            border: none;
+    .mat-form-field-flex {
-        }
+        padding: 0em;
-        .align-arrow-right {
+    }
-            display: none;
+    .align-arrow-right {
-        }
+        display: none;
     }
 }
 
 .select-role {
-    ::ng-deep {
+    width: 20% !important;
-        .mat-form-field-outline-start, 
+    font-size: 14px;
-        .mat-form-field-outline-gap, 
+    color: #848484;
-        .mat-form-field-outline-end {
+    height: min-content;
-            border: none !important;
+    margin-right: 2.5rem;
-        }
+    border: none;
-        .mat-form-field-wrapper {
+    background-color: transparent;
-            padding: 0em !important;
+}
-        }
+
+::ng-deep .select-role {
+    .mat-form-field-outline-start,
+    .mat-form-field-outline-gap, 
+    .mat-form-field-outline-end {
+        border: none !important;
+    }
+    .mat-select-arrow-wrapper {
+        transform: none;
     }
 }
 
@@ -73,13 +84,3 @@
     color: #B5B5B5;
     margin-bottom: 0.25em;
 }
-
-.select-role {
-    width: 20% !important;
-    font-size: 14px;
-    color: #848484;
-    height: min-content;
-    margin-right: 2.5rem;
-    border: none;
-    background-color: transparent;
-}

dmp-frontend/src/app/ui/glossary/glossary-content/glossary-content.component.html

@@ -1,7 +1,7 @@
 <div [ngClass]="{'container glossary-component': !isDialog}">
 	<div *ngIf="!isDialog" class="row">
 		<div class="col-md-12">
-			<h1>{{ 'GLOSSARY.TITLE-DASHED' | translate}}</h1>
+			<h1>{{ 'GLOSSARY.TITLE' | translate}}</h1>
 		</div>
 	</div>
 	<div class="row">

dmp-frontend/src/app/ui/glossary/glossary-content/glossary-content.component.scss

@@ -1,5 +1,6 @@
 h1 {
 	text-align: center;
+	margin: 2rem 0 1rem 0;
 }
 
 img {

dmp-frontend/src/app/ui/misc/navigation/navigation.component.ts

@@ -109,7 +109,8 @@ export class NavigationComponent extends BaseComponent implements OnInit {
 			autoFocus: false,
 			closeOnNavigation: true,
 			disableClose: false,
-			position: { top: '64px', right: '1em' }
+			position: { top: '64px', right: '1em' },
+			panelClass: 'custom-userbox'
 		});
 	}
 

dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.scss

@@ -48,13 +48,6 @@ $mat-card-header-size: 40px !default;
 	background-color: #ddd;
 }
 
-::ng-deep .mat-dialog-container {
-  background-color: transparent;
-  padding: 0rem;
-  overflow: initial;
-  box-shadow: none;
-}
-
 .check-icon {
   color: #129D99;
   transform: scale(0.7);

dmp-frontend/src/app/ui/navbar/navbar.component.ts

@@ -224,7 +224,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 			autoFocus: false,
 			closeOnNavigation: true,
 			disableClose: false,
-			position: { top: '64px', right: '1em' }
+			position: { top: '64px', right: '1em' },
+			panelClass: 'custom-userbox'
 		});
 	}
 

dmp-frontend/src/app/ui/sidebar/sidebar-footer/cookies-policy/cookies-policy.component.scss

@@ -1,5 +1,6 @@
 h1 {
 	text-align: center;
+	margin: 2rem 0 1rem 0;
 }
 
 img {

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css

@@ -13,6 +13,7 @@
 	cursor: pointer;
 	display: inline-flex;
 	font-size: small;
+	font-family: 'Roboto';
 }
 
 .sidebar-footer .option:hover {

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html

@@ -5,18 +5,22 @@
 				{{'FOOTER.ABOUT' | translate}}</p>
 		</div>
 		<div *ngIf="isAuthenticated()" class="col-auto">
-			<p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact-support'}">
+			<p class="option" [routerLink]="['/contact-support']" [routerLinkActive]="['option-active']">
 				{{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
+			<!-- <p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact-support'}">
+				{{'FOOTER.CONTACT-SUPPORT' | translate}}</p> -->
 		</div>
 	</div>
 
 	<div class="row ml-2">
 		<div class="col-auto">
-			<p class="option" (click)="openGlossaryDialog()" [ngClass]="{'option-active': this.router.url === '/glossary'}">
+			<p class="option" [routerLink]="['/glossary']" [routerLinkActive]="['option-active']">
 				{{'FOOTER.GLOSSARY' | translate}}</p>
+			<!-- <p class="option" (click)="openGlossaryDialog()" [ngClass]="{'option-active': this.router.url === '/glossary'}">
+				{{'FOOTER.GLOSSARY' | translate}}</p> -->
 		</div>
 		<div class="col-auto">
-			<p class="option" [routerLink]="['/terms-of-service']" [routerLinkActive]="['option-active']">
+			<p class="option" [routerLink]="['/terms-and-conditions']" [routerLinkActive]="['option-active']">
 				{{'FOOTER.TERMS-OF-SERVICE' | translate}}</p>
 		</div>
 		<!-- <div class="col-6 text-center">
@@ -26,8 +30,10 @@
 	</div>
 	<div class="row ml-2">
 		<div class="col-auto">
-			<p class="option" (click)="openUserGuideDialog()" [ngClass]="{'option-active': this.router.url === '/user-guide'}">
+			<p class="option" [routerLink]="['/user-guide']" [routerLinkActive]="['option-active']">
 				{{'FOOTER.GUIDE' | translate}}</p>
+			<!-- <p class="option" (click)="openUserGuideDialog()" [ngClass]="{'option-active': this.router.url === '/user-guide'}">
+				{{'FOOTER.GUIDE' | translate}}</p> -->
 		</div>
 		<!-- <div class="col-auto text-center">
 			<a class="option" [routerLink]="['/privacy-policy']" [routerLinkActive]="['option-active']">

dmp-frontend/src/app/ui/sidebar/sidebar.component.html

@@ -5,7 +5,7 @@
 			<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}">
-				<a class="nav-link nav-row" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans', 'dataset-tour' : groupMenuRoute.path == '/datasets'}">
+				<a class="nav-link nav-row" (click)="groupMenuRoute.path === '/feedback' ? sendFeedback(groupMenuRoute) : ''" [routerLink]="[groupMenuRoute.path]"  [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans', 'dataset-tour' : groupMenuRoute.path == '/datasets'}">
 					<i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
 					<i *ngIf="groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'" class="material-icons icon-mask">person</i>
 					<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'}">{{groupMenuRoute.title | translate}}</span>

dmp-frontend/src/app/ui/sidebar/sidebar.component.ts

@@ -13,6 +13,7 @@ declare interface RouteInfo {
 	path: string;
 	title: string;
 	icon: string;
+	url?: string;
 }
 declare interface GroupMenuItem {
 	title: string;
@@ -55,9 +56,9 @@ export const ADMIN_ROUTES: RouteInfo[] = [
 ];
 
 export const INFO_ROUTES: RouteInfo[] = [
-	{ path: '/about', title: 'SIDE-BAR.CO-BRANDING', icon: 'toll' },
+	{ path: '/splash/resources/co-branding.html', title: 'SIDE-BAR.CO-BRANDING', icon: 'toll' },
-	{ path: '/about', title: 'SIDE-BAR.SUPPORT', icon: 'help' },
+	{ path: '/contact-support', title: 'SIDE-BAR.SUPPORT', icon: 'help' },
-	{ path: '/about', title: 'SIDE-BAR.FEEDBACK', icon: 'feedback' }
+	{ path: '/feedback', title: 'SIDE-BAR.FEEDBACK', icon: 'feedback', url: 'https://docs.google.com/forms/d/1KNhgjQyGrA6lYjOOUUL5cqU2BVquS0qdfwzOGxokgAw/viewform?edit_requested=true' }
 ];
 
 // export const HISTORY_ROUTES: RouteInfo[] = [
@@ -230,7 +231,8 @@ export class SidebarComponent implements OnInit {
 			autoFocus: false,
 			closeOnNavigation: true,
 			disableClose: false,
-			position: { top: '64px', right: '1em' }
+			position: { top: '64px', right: '1em' },
+			panelClass: 'custom-userbox'
 		});
 	}
 
@@ -251,4 +253,8 @@ export class SidebarComponent implements OnInit {
 			});
 		}
 	}
+
+	sendFeedback(groupMenuRoute: RouteInfo) {
+		window.open(groupMenuRoute.url, '_blank');
+	}
 }

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss

@@ -5,3 +5,7 @@
 :host :hover ::ng-deep .href  {
 	cursor: pointer !important;
 }
+
+#userguide {
+	margin: 100px;
+}

dmp-frontend/src/assets/i18n/de.json

@@ -95,6 +95,7 @@
 			"EXPLORE-PLANS": "Veröffentlichte DMPs",
 			"QUICK-WIZARD": "Neuer DMP (Assistent)",
 			"PLANS-NEW": "Neuer DMP (Experte)",
+			"DMP-NEW": "Neuer DMP",
 			"DATASETS": "Meine Datensatzbeschreibungen",
 			"EXPLORE": "Veröffentlichte Datensatzbeschreibungen",
 			"DATASETCREATEWIZARD": "Datensatzbeschreibung hinzufügen (Assistent)",
@@ -1023,7 +1024,8 @@
 		}
 	},
 	"ABOUT": {
-		"TITLE": "-Über-",
+		"TITLE-DASHED": "-Über-",
+		"TITLE": "Über",
 		"MAIN-CONTENT": "Unser Ziel ist es, Ihre Forschungsdaten FAIR zu machen, d.h. auffindbar, zugänglich, interoperabel und wiederverwendbar. Diese Prinzipien gehen der Wahl der Implementierungsart voraus und schlagen nicht zwangsläufig eine spezifische Technologie, Standard oder Implementierungslösung vor.",
 		"CONTRIBUTORS": "Mitwirkende",
 		"WELCOME": "Willkommen bei ARGOS",

dmp-frontend/src/assets/i18n/en.json

@@ -99,6 +99,7 @@
 			"EXPLORE-PLANS": "Published DMPs",
 			"QUICK-WIZARD": "New DMP (Wizard)",
 			"PLANS-NEW": "New DMP (Expert)",
+			"DMP-NEW": "New DMP",
 			"DATASETS": "My Dataset Descriptions",
 			"EXPLORE": "Published Dataset Descriptions",
 			"DATASETCREATEWIZARD": "Add Dataset Description (Wizard)",
@@ -1185,7 +1186,8 @@
 		}
 	},
 	"ABOUT": {
-		"TITLE": "-About-",
+		"TITLE-DASHED": "-About-",
+		"TITLE": "About",
 		"MAIN-CONTENT": "Our goal is to make your research data FAIR, that is findable, accessible,interoperable and re-usable. These principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation solution.",
 		"CONTRIBUTORS": "Contributors",
 		"WELCOME": "Welcome to ARGOS",
@@ -1257,7 +1259,7 @@
 		"TITLE": "What is ARGOS?",
 		"DMP-QUESTION": "What is a DMP in ARGOS?",
 		"INFO-TEXT": "ARGOS is an open extensible service that simplifies the management, validation, monitoring and maintenance and of Data Management Plans. It allows actors (researchers, managers, supervisors etc) to create actionable DMPs that may be freely exchanged among infrastructures for carrying out specific aspects of the Data management process in accordance with the intentions and commitment of Data owners.",
-		"INFO-DMP-TEXT": "A Data Management Plan (DMP) is a living document describing the datasets that are generated and/ or re-used during and after a research lifetime. DMPs aim to provide researchers with essential information to re-produce,re-distribute and re-purpose research results thus assuring for their validity and exploitation.",
+		"INFO-DMP-TEXT": "A Data Management Plan (DMP) is a living document describing the datasets that are generated and/ or re-used during and after a research lifetime. DMPs aim to provide researchers with essential information to re-produce, re-distribute and re-purpose research results thus assuring for their validity and exploitation.",
 		"NEW-QUESTION": "New with DMPs? Visit",
 		"START-YOUR-FIRST-DMP": "Start your first DMP",
 		"OPEN-AIR-GUIDE": "OpenAIRE’s Guide for Researchers",

dmp-frontend/src/assets/i18n/es.json

@@ -99,6 +99,7 @@
 			"EXPLORE-PLANS": "PGDs Publicados",
 			"QUICK-WIZARD": "(Asistente) Nuevo PGD",
 			"PLANS-NEW": "Nuevo PGD (Experto)",
+			"DMP-NEW": "Nuevo PGD",
 			"DATASETS": "Mis descripciones del dataset",
 			"EXPLORE": "Descripciones del dataset publicadas",
 			"DATASETCREATEWIZARD": "Añadir una descripción del dataset (Asistente)",
@@ -1175,7 +1176,8 @@
 		}
 	},
 	"ABOUT": {
-		"TITLE": "-Acerca de-",
+		"TITLE-DASHED": "-Acerca de-",
+		"TITLE": "Acerca de",
 		"MAIN-CONTENT": "Nuestro objetivo es hacer tu datos de investigación FAIR, esto es encontrables, accesible, interoperables y reutilizables. Estos principios son previos a las opciones de implementación y no recomienda necesariamente una tecnología específica, estándares o soluciones de implementación.",
 		"CONTRIBUTORS": "Colaboradores",
 		"WELCOME": "Bienvenido a ARGOS",

dmp-frontend/src/assets/i18n/gr.json

@@ -98,6 +98,7 @@
 			"EXPLORE-PLANS": "Δημοσιευμένα Σχέδια Διαχείρισης Δεδομένων",
 			"QUICK-WIZARD": "Νέο Σχέδιο Διαχείρισης Δεδομένων (Wizard)",
 			"PLANS-NEW": "Νέο Σχέδιο Διαχείρισης Δεδομένων (Expert)",
+			"DMP-NEW": "Νέο Σχέδιο Διαχείρισης Δεδομένων",
 			"DATASETS": "Οι Περιγραφές Συνόλων Δεδομένων Μου",
 			"EXPLORE": "Δημοσιευμένες Περιγραφές Συνόλων Δεδομένων",
 			"DATASETCREATEWIZARD": "Προσθήκη Περιγραφής Συνόλου Δεδομένων (Wizard)",
@@ -1166,7 +1167,8 @@
 		}
 	},
 	"ABOUT": {
-		"TITLE": "-Σχετικά-",
+		"TITLE-DASHED": "-Σχετικά-",
+		"TITLE": "Σχετικά",
 		"MAIN-CONTENT": "Στόχος μας είναι να κάνουμε τα ερευνητικά σας δεδομένα FAIR, που σημαίνει να είναι ανιχνεύσιμα, προσβάσιμα, διαλειτουργικά και επαναχρησιποιήσιμα. Αυτές οι αρχές προηγούνται της εφαρμογής και δεν υποδηλώνουν απαραίτητα κάποια συγκεκριμένη τεχνολογία, πρότυπο ή λύση εφαρμογής.",
 		"CONTRIBUTORS": "Συνεργάτες",
 		"WELCOME": "Καλωσήρθατε στο ARGOS",

dmp-frontend/src/assets/i18n/tr.json

@@ -97,6 +97,7 @@
 			"EXPLORE-PLANS": "Yayınlanmış VYP'ları",
 			"QUICK-WIZARD": "Yeni VYP (Sihirbaz)",
 			"PLANS-NEW": "Yeni VYP (Uzman)",
+			"DMP-NEW": "Yeni VYP",
 			"DATASETS": "Veri Seti Tanımlamalarım",
 			"EXPLORE": "Yayınlanmış Veri Seti Tanımları",
 			"DATASETCREATEWIZARD": "Veri Seti Tanımı Ekle (Sihirbaz)",
@@ -1148,7 +1149,8 @@
 			}
 		},
 		"ABOUT": {
-			"TITLE": "-Hakkında-",
+			"TITLE-DASHED": "-Hakkında-",
+			"TITLE": "Hakkında",
 			"MAIN-CONTENT": "Amacımız, araştırma verilerinizi FAIR (Bulunabilir, Erişilebilir, Birlikte çalışabilir ve Tekrar kullanılabilir) duruma getirmektir. Bu ilkeler uygulama seçeneklerinden önce gelir ve belirli bir teknoloji, standart veya uygulama çözümü önermez.",
 			"CONTRIBUTORS": "Katılımcılar",
 			"WELCOME": "ARGOS'a Hoş geldiniz",

dmp-frontend/src/styles.scss

@@ -182,3 +182,10 @@
 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
 	padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
+
+.custom-userbox > mat-dialog-container {
+	background-color: transparent;
+	padding: 0rem;
+	overflow: initial;
+	box-shadow: none;
+}