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,12 +91,14 @@ export class AppComponent implements OnInit {
 				filter(event => event instanceof NavigationEnd),
 				map(() => {
 					let child = this.route.firstChild;
+					if (child != null) {
 						while (child.firstChild) {
 							child = child.firstChild;
 						}
 						if (child.snapshot.data['title']) {
 							return child.snapshot.data['title'];
 						}
+					}
 					return appTitle;
 				})
 			).subscribe((ttl: string) => {

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,17 +59,8 @@
     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;
 	  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-infix {
+        border: none;
+        padding: 14px;
     }   
     .mat-form-field-underline {
         display: none;
     }
-        .mat-form-field-wrapper {
+    .mat-form-field-flex {
-            padding: 0em !important;
+        padding: 0em;
-        }
-        .mat-form-field-infix {
-            border: none;
     }
     .align-arrow-right {
         display: none;
     }
 }
-}
 
 .select-role {
-    ::ng-deep {
+    width: 20% !important;
+    font-size: 14px;
+    color: #848484;
+    height: min-content;
+    margin-right: 2.5rem;
+    border: none;
+    background-color: transparent;
+}
+
+::ng-deep .select-role {
     .mat-form-field-outline-start,
     .mat-form-field-outline-gap, 
     .mat-form-field-outline-end {
         border: none !important;
     }
-        .mat-form-field-wrapper {
+    .mat-select-arrow-wrapper {
-            padding: 0em !important;
+        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",

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;
+}