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

Redesign of landing page, sign in interface, sidebar, navbar, dashboard (still in progress)

This commit is contained in:
apapachristou 2020-06-26 12:08:51 +03:00
parent ddd0b60d37
commit 7cf5ddfebe
52 changed files with 3408 additions and 515 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dmp-frontend/src/app/app-routing.module.ts
View File

@ -154,6 +154,13 @@ const appRoutes: Routes = [
breadcrumb: true breadcrumb: true
} }
}, },
{
path: 'guest',
loadChildren: () => import('./ui/guest/guest.module').then(m => m.GuestModule),
data: {
breadcrumb: true
}
},
{ {
path: 'splash', path: 'splash',
loadChildren: () => import('./ui/splash/splash.module').then(m => m.SplashModule), loadChildren: () => import('./ui/splash/splash.module').then(m => m.SplashModule),

55
dmp-frontend/src/app/app.component.html
View File

@ -1,42 +1,17 @@
<div class="wrapper" *ngIf="!onlySplash"> <div class="wrapper" *ngIf="isAuthenticated()">
<div class="sidebar sidebar-shadow" data-color="danger" data-background-color="white" <app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar>
data-image="./assets/images/logan-troxell-9187-unsplash.jpg"> <mat-sidenav-container fullscreen class="main-container">
<app-sidebar></app-sidebar> <mat-sidenav #sidenav mode="side" opened class="sidenav" [fixedInViewport]="true" [fixedTopGap]="80">
<div class="sidebar-background" style="background-image: url(./assets/images/logan-troxell-9187-unsplash.jpg)"> <app-sidebar></app-sidebar>
</div> </mat-sidenav>
</div> <mat-sidenav-content>
<div class="main-panel"> <div>
<app-navbar></app-navbar> <router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
<div> </div>
<!-- <app-breadcrumb *ngIf="this.isAuthenticated() && (hasBreadCrumb | async)"></app-breadcrumb> --> </mat-sidenav-content>
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet> </mat-sidenav-container>
</div>
</div>
</div> </div>
<app-notification *ngIf="!onlySplash"></app-notification> <div class="wrapper" *ngIf="!isAuthenticated()">
<router-outlet *ngIf="onlySplash"></router-outlet> <router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
<!-- <app-navigation class="fixed"></app-navigation>
<div class="container-fluid main-container">
<div class="row" *ngIf="helpContentEnabled">
<app-help-content position="top"></app-help-content>
</div>
<div class="row">
<div class="col-md-2">
<app-help-content position="left" *ngIf="helpContentEnabled"></app-help-content>
</div>
<div class="col-md-8">
<app-breadcrumb *ngIf="this.isAuthenticated() && (hasBreadCrumb | async)"></app-breadcrumb>
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
</div>
<div class="col-md-2">
<app-help-content position="right" *ngIf="helpContentEnabled"></app-help-content>
</div>
</div>
<div class="row" *ngIf="helpContentEnabled">
<app-help-content position="bottom"></app-help-content>
</div>
</div> </div>
<app-notification></app-notification> --> <app-notification></app-notification>

21
dmp-frontend/src/app/app.component.scss
View File

@ -6,9 +6,26 @@
width: 100%; width: 100%;
} }
// .main-container {
// margin-top: 64px;
// padding-top: 10px;
// }
.main-container { .main-container {
margin-top: 64px; top: 80px;
padding-top: 10px; left: 0;
right: 0;
}
.sidenav {
display: flex;
align-items: center;
justify-content: center;
width: 260px;
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 16px 2px #00000029;
border-right-width: 0px;
opacity: 1;
} }
.sidebar-shadow { .sidebar-shadow {

24
dmp-frontend/src/app/app.component.ts
View File

@ -32,7 +32,6 @@ export class AppComponent implements OnInit {
sideNavOpen = false; sideNavOpen = false;
helpContentEnabled: boolean; helpContentEnabled: boolean;
private statusChangeSubscription: Subscription; private statusChangeSubscription: Subscription;
onlySplash = false;
constructor( constructor(
private router: Router, private router: Router,
@ -61,18 +60,17 @@ export class AppComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
if (this.location.path() === '') { if (this.location.path() === '' || this.location.path() === '/home') {
if (!this.configurationService.useSplash) { if (this.isAuthenticated()) {
this.onlySplash = false;
this.router.navigate(['/reload']).then(() => this.router.navigate(['/home'])); this.router.navigate(['/reload']).then(() => this.router.navigate(['/home']));
} else { } else if (!this.isAuthenticated()) {
this.onlySplash = true; this.router.navigate(['/reload']).then(() => this.router.navigate(['/guest']));
this.router.navigate(['/reload']).then(() => this.router.navigate(['/splash']));
} }
} else if (this.location.path() === '/splash') { // if (!this.configurationService.useSplash) {
this.onlySplash = true; // this.router.navigate(['/reload']).then(() => this.router.navigate(['/home']));
} else { // } else {
this.onlySplash = false; // this.router.navigate(['/reload']).then(() => this.router.navigate(['/splash']));
// }
} }
if (!this.cookieService.check("cookiesConsent")) { if (!this.cookieService.check("cookiesConsent")) {
this.cookieService.set("cookiesConsent", "false", 356); this.cookieService.set("cookiesConsent", "false", 356);
@ -171,5 +169,9 @@ export class AppComponent implements OnInit {
this.authentication.current() && this.authentication.current().culture ? this.cultureService.cultureSelected(this.authentication.current().culture) : this.cultureService.cultureSelected(this.configurationService.defaultCulture); this.authentication.current() && this.authentication.current().culture ? this.cultureService.cultureSelected(this.authentication.current().culture) : this.cultureService.cultureSelected(this.configurationService.defaultCulture);
this.authentication.current() && this.authentication.current().language ? this.language.changeLanguage(this.authentication.current().language) : this.language.changeLanguage('en'); this.authentication.current() && this.authentication.current().language ? this.language.changeLanguage(this.authentication.current().language) : this.language.changeLanguage('en');
} }
toggleNavbar(event) {
document.getElementById('hamburger').classList.toggle("change");
}
} }

2
dmp-frontend/src/app/app.module.ts
View File

@ -31,6 +31,7 @@ import { TranslateServerLoader } from './core/services/language/server.loader';
import { BaseHttpService } from './core/services/http/base-http.service'; import { BaseHttpService } from './core/services/http/base-http.service';
import { ConfigurationService } from './core/services/configuration/configuration.service'; import { ConfigurationService } from './core/services/configuration/configuration.service';
import { Oauth2DialogModule } from './ui/misc/oauth2-dialog/oauth2-dialog.module'; import { Oauth2DialogModule } from './ui/misc/oauth2-dialog/oauth2-dialog.module';
import { GuestModule } from './ui/guest/guest.module';
// AoT requires an exported function for factories // AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient, appConfig: ConfigurationService) { export function HttpLoaderFactory(http: HttpClient, appConfig: ConfigurationService) {
@ -98,6 +99,7 @@ const cookieConfig: NgcCookieConsentConfig = {
DatasetCreateWizardModule, DatasetCreateWizardModule,
NavbarModule, NavbarModule,
SidebarModule, SidebarModule,
GuestModule,
NgcCookieConsentModule.forRoot(cookieConfig), NgcCookieConsentModule.forRoot(cookieConfig),
Oauth2DialogModule Oauth2DialogModule
], ],

8
dmp-frontend/src/app/ui/auth/login/login.component.html
View File

@ -3,22 +3,22 @@
<div class="card login-card"> <div class="card login-card">
<div class="container card-header"> <div class="container card-header">
<div *ngIf="hasGoogleOauth()" class="row social-btns"> <div *ngIf="hasGoogleOauth()" class="row social-btns">
<div class="col"> <div class="col-auto">
<button mat-icon-button id="googleSignInButton" class="login-social-button"> <button mat-icon-button id="googleSignInButton" class="login-social-button">
<i class="fa fa-google"></i> <i class="fa fa-google"></i>
</button> </button>
</div> </div>
<div *ngIf="hasLinkedInOauth()" class="col"> <div *ngIf="hasLinkedInOauth()" class="col-auto">
<button mat-icon-button class="login-social-button"> <button mat-icon-button class="login-social-button">
<i class="fa fa-linkedin" (click)="linkedInLogin()"></i> <i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
</button> </button>
</div> </div>
<div *ngIf="hasFacebookOauth()" class="col"> <div *ngIf="hasFacebookOauth()" class="col-auto">
<button mat-icon-button (click)="facebookLogin()" class="login-social-button"> <button mat-icon-button (click)="facebookLogin()" class="login-social-button">
<i class="fa fa-facebook-square"></i> <i class="fa fa-facebook-square"></i>
</button> </button>
</div> </div>
<div *ngIf="hasTwitterOauth()" class="col"> <div *ngIf="hasTwitterOauth()" class="col-auto">
<button mat-icon-button (click)="twitterLogin()" class="login-social-button"> <button mat-icon-button (click)="twitterLogin()" class="login-social-button">
<i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i>
</button> </button>

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

@ -1,4 +1,104 @@
<div class="header-image"> <div class="main-content dashboard-main-container" [class.non-auth-main-container]="!this.isAuthenticated()">
<div *ngIf="this.isAuthenticated()" class="container-fluid">
<div *ngIf="dashboardStatisticsData?.totalDataManagementPlanCount === 0
&& dashboardStatisticsData?.totalDataSetCount === 0
&& dashboardStatisticsData?.totalGrantCount === 0
&& dashboardStatisticsData?.totalOrganisationCount === 0">
<div class="main-content">
<div class="col-md-8">
<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">What is a DMP in ARGOS</p>
<p class="card-content mb-0">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.</p>
<p class="card-content pt-3 mb-0">
New with DMPs? Visit <a><u>OpenAIRE’s Guide for Researchers</u></a> to learn more about how to create one!
</p>
<div class="d-flex">
<button type="button" class="col-auto align-self-center normal-btn">Start your first DMP</button>
<img class="col-auto ml-auto" src="../../assets/img/laptop.png" width="116" height="139">
</div>
</div>
</div>
<div class="col-md-4">
<div class="personal-usage">Personal usage</div>
<div class="counter-zero">0</div>
<a href="#" class="link">DMP's</a>
<div class="counter-zero">0</div>
<a href="#" class="link">Dataset Descriptions</a>
<div class="counter-zero">0</div>
<a href="#" class="link-disabled">Grants</a>
<div class="counter-zero">0</div>
<a href="#" class="link-disabled">Related organizations</a>
</div>
</div>
</div>
<div *ngIf="dashboardStatisticsData?.totalDataManagementPlanCount !== 0
|| dashboardStatisticsData?.totalDataSetCount !== 0
|| dashboardStatisticsData?.totalGrantCount !== 0
|| dashboardStatisticsData?.totalOrganisationCount !== 0">
<div class="main-content">
<div class="col">
<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-content mb-0 pt-0">A DMP in Argos consists of key information about research,
such as purpose,
objectives and researchers involved, but also about documentation of research datasets,
namely <b> Dataset
Descriptions</b>, that highlight the steps followed and the means used across data
management activities.</p>
<div class="d-flex pt-4 pb-4 mt-3 mb-3">
<button type="button" class="col-auto align-self-center yellow-btn">Add Dataset
Description</button>
</div>
</div>
<div class="latest-activity-title">Latest activity</div>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
<!-- +counter -->
<mat-tab label="All">
<div class="col-auto"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
<app-recent-edited-activity></app-recent-edited-activity>
</mat-tab>
<mat-tab label="Drafts"></mat-tab>
<mat-tab label="DMPs"></mat-tab>
<mat-tab label="Dataset Descriptions"></mat-tab>
</mat-tab-group>
<div class="d-flex justify-content-center">
<button type="button" class="btn-load-more">Load more</button>
</div>
</div>
<div class="col-auto">
<div class="personal-usage">Personal usage</div>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}">
{{dashboardStatisticsData?.totalDataManagementPlanCount}}</div>
<a [routerLink]="['/plans']" class="link">DMP's</a>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataSetCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataSetCount == 0}">
{{dashboardStatisticsData?.totalDataSetCount}}</div>
<a [routerLink]="['/datasets']" class="link">Dataset Descriptions</a>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalGrantCount != 0, 'counter-zero': dashboardStatisticsData?.totalGrantCount == 0}">
{{dashboardStatisticsData?.totalGrantCount}}</div>
<a href="#" class="link-disabled">Grants</a>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalOrganisationCount != 0, 'counter-zero': dashboardStatisticsData?.totalOrganisationCount == 0}">
{{dashboardStatisticsData?.totalOrganisationCount}}</div>
<a href="#" class="link-disabled">Related organizations</a>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="header-image">
<div class="header-text-container"> <div class="header-text-container">
<h3>{{ 'ABOUT.WELCOME' | translate }}</h3> <h3>{{ 'ABOUT.WELCOME' | translate }}</h3>
<h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4> <h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4>
@ -25,7 +125,6 @@
<app-info-counter [title]="'DASHBOARD.MY-DATASETS'" [subtitle]="dashboardStatisticsData?.totalDataSetCount" routerLink='/datasets' buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter> <app-info-counter [title]="'DASHBOARD.MY-DATASETS'" [subtitle]="dashboardStatisticsData?.totalDataSetCount" routerLink='/datasets' buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter>
</div> </div>
<div class="col-lg-3 col-md-6 col-sm-6"> <div class="col-lg-3 col-md-6 col-sm-6">
<!-- <app-info-counter [title]="'DASHBOARD.MY-GRANTS'" [subtitle]="dashboardStatisticsData?.totalGrantCount" routerLink='/grants' buttonRedirectLink="/grants/new" icon="work_outline"></app-info-counter> -->
<app-info-counter [title]="'DASHBOARD.MY-GRANTS'" [subtitle]="dashboardStatisticsData?.totalGrantCount" icon="work_outline"></app-info-counter> <app-info-counter [title]="'DASHBOARD.MY-GRANTS'" [subtitle]="dashboardStatisticsData?.totalGrantCount" icon="work_outline"></app-info-counter>
</div> </div>
<div class="col-lg-3 col-md-6 col-sm-6"> <div class="col-lg-3 col-md-6 col-sm-6">
@ -53,7 +152,6 @@
<app-info-counter [title]="'DASHBOARD.DATASETS'" [subtitle]="dashboardStatisticsData?.totalDataSetCount" routerLink='/explore' buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter> <app-info-counter [title]="'DASHBOARD.DATASETS'" [subtitle]="dashboardStatisticsData?.totalDataSetCount" routerLink='/explore' buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter>
</div> </div>
<div class="col-lg-3 col-md-6 col-sm-6"> <div class="col-lg-3 col-md-6 col-sm-6">
<!-- <app-info-counter [title]="'DASHBOARD.GRANTS'" [subtitle]="dashboardStatisticsData?.totalGrantCount" buttonRedirectLink="/grants/new" icon="work_outline"></app-info-counter> -->
<app-info-counter [title]="'DASHBOARD.GRANTS'" [subtitle]="dashboardStatisticsData?.totalGrantCount" icon="work_outline"></app-info-counter> <app-info-counter [title]="'DASHBOARD.GRANTS'" [subtitle]="dashboardStatisticsData?.totalGrantCount" icon="work_outline"></app-info-counter>
</div> </div>
<div class="col-lg-3 col-md-6 col-sm-6"> <div class="col-lg-3 col-md-6 col-sm-6">
@ -100,4 +198,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->

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

@ -1,115 +1,456 @@
.header-image { .main-content {
background: url("/assets/images/new-dashboard-bg.png") no-repeat; background-color: #f5f5f5;
background-size: cover; padding-top: 3.68rem;
margin-top: 70px; padding-bottom: 10rem;
min-height: 20em; // padding-left: 3.31rem;
position: relative; padding-left: 1rem;
margin: 0;
display: flex;
flex-grow: 1;
} }
.header-text-container { .card {
background: rgba(255, 255, 255, 0.7); background: #ffffff 0% 0% no-repeat padding-box;
position: absolute; box-shadow: 0px 3px 6px #00000029;
bottom: 0px; border-radius: 4px;
padding-left: 5em; width: 712px;
padding-right: 10em; margin-bottom: 3.75rem;
padding-top: 2em; /* height: 407px; */
padding-bottom: 2em; opacity: 1;
} }
.dashboard-main-container { .card-title {
margin-top: 0px; text-align: left;
font: Bold 20px/30px Roboto;
letter-spacing: 0px;
color: #212121;
padding-left: 40px;
/* padding-top: 40px; */
padding-right: 55px;
opacity: 1;
} }
.non-auth-main-container { .card-content {
padding: 0; text-align: left;
font: Light 16px/26px Roboto;
letter-spacing: 0px;
color: #212121;
padding-left: 40px;
padding-top: 36px;
padding-right: 55px;
opacity: 1;
} }
.non-auth-stats { .clear-icon {
background-color: rgba(255, 255, 255, 0.5); cursor: pointer;
} }
.non-auth-title-container { .normal-btn {
margin-top: 3em; min-width: 162px;
max-width: 256px;
height: 40px;
cursor: pointer;
background: #129d99 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
border: none;
color: #ffffff;
opacity: 1;
line-height: 1;
font-size: 0.87rem;
padding: 0.62rem 1.87rem;
margin-left: 40px;
} }
.dashboard { .yellow-btn {
.card { min-width: 162px;
padding: 25px 20px 20px 20px; max-width: 256px;
display: flex; height: 40px;
flex-direction: column; cursor: pointer;
align-items: center; background: #f7dd72 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
border: none;
color: #000000;
opacity: 1;
line-height: 1;
font-size: 0.87rem;
padding: 0.62rem 1.87rem;
margin-left: 40px;
}
.personal-usage {
text-align: left;
font-weight: 300;
font-family: "Roboto", sans-serif;
font-size: 1.25rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.6;
}
.counter-zero {
text-align: left;
font: Bold 48px/30px Roboto;
letter-spacing: 0px;
color: #212121;
opacity: 0.36;
padding-top: 2rem;
padding-bottom: 0.5rem;
}
.counter {
text-align: left;
font: Bold 48px/30px Roboto;
letter-spacing: 0px;
color: #212121;
opacity: 0.85;
padding-top: 2rem;
padding-bottom: 0.5rem;
}
.link {
text-align: left;
text-decoration: underline;
font-weight: 300;
font-family: "Roboto", sans-serif;
font-size: 1rem;
letter-spacing: 0px;
color: #1eb5b4;
opacity: 1;
}
.link-disabled {
text-align: left;
font-weight: 300;
font-family: "Roboto", sans-serif;
font-size: 1rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.6;
}
.latest-activity-title {
text-align: left;
font-weight: 300;
font-family: "Roboto", sans-serif;
font-size: 1.25rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.6;
padding-bottom: 1.2rem;
}
.dmp-card,
.dataset-card {
min-width: 712px;
/* min-height: 308px; */
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #0000001a;
border-radius: 4px;
opacity: 1;
margin-top: 2.43rem;
margin-bottom: 1rem;
}
.remove-border-bottom ::ng-deep .mat-tab-header {
border-bottom: none;
}
input[type="text"] {
background: #fafafa 0% 0% no-repeat padding-box;
border: 1px solid #d1d1d1;
border-radius: 4px;
opacity: 1;
width: 347px;
height: 56px;
font-family: Arial, FontAwesome;
padding-left: 15px;
}
.edited-date {
text-align: left;
font-weight: 300;
font-family: "Roboto", sans-serif;
line-height: 2.4;
letter-spacing: 0px;
color: #212121;
opacity: 0.6;
}
.dmp-label {
background: #129d99 0% 0% no-repeat padding-box;
border-radius: 4px 0px;
opacity: 1;
width: 67px;
height: 37px;
color: #ffffff;
line-height: 2.4;
opacity: 0.75;
}
.dataset-label {
width: 158px;
height: 37px;
background: #f7dd72 0% 0% no-repeat padding-box;
border-radius: 4px 0px;
text-align: left;
line-height: 2.8;
font-size: 0.875rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.75;
}
.dmp-title,
.dataset-title {
text-align: left;
font-weight: 500;
font-family: "Roboto", sans-serif;
font-size: 1rem;
opacity: 0.81;
padding-top: 0.75rem;
padding-bottom: 0.55rem;
color: #212121;
}
.dataset-subtitle,
.dmp-subtitle {
display: flex;
flex-direction: row;
text-align: left;
font-weight: 400;
font-family: "Roboto", sans-serif;
font-size: 0.875rem;
opacity: 1;
align-items: center;
color: #848484;
}
.dmp-title-draft {
text-align: left;
font-weight: 500;
font-family: "Roboto", sans-serif;
font-size: 1rem;
opacity: 0.81;
padding-top: 0.75rem;
padding-bottom: 0.55rem;
color: #f16868;
}
.icon-align {
display: inline-flex;
vertical-align: middle;
padding-bottom: 0.4rem;
}
.dataset-card-actions,
.dmp-card-actions {
display: flex;
flex-direction: row;
border-top: 1px solid #dbdbdb;
line-height: 4;
color: #848484;
}
.dataset-card-actions a,
.dmp-card-actions a {
color: #848484 !important;
text-decoration: none !important;
}
.dataset-card-actions a:hover,
.dmp-card-actions a:hover {
color: #129d99 !important;
}
.dmp-dataset-descriptions-title {
color: #000000;
opacity: 0.6;
padding-top: 1.5rem;
padding-bottom: 0.8rem;
}
.dmp-dataset-descriptions-name {
color: #000000;
opacity: 0.6;
font-weight: 700;
}
.show-more {
color: black !important;
}
.show-more:hover {
color: #129d99 !important;
}
.btn-load-more {
border: 2px solid #212121;
border-radius: 30px;
opacity: 1;
width: 132px;
height: 40px;
margin-top: 4.125rem;
}
.btn-load-more:hover {
background-color: black;
color: white;
}
.draft {
color: #f16868;
}
::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
background: #129d99;
height: 5px;
}
::ng-deep .mat-tab-label {
min-width: auto !important;
background-color: transparent;
}
::ng-deep .mat-tab-label.mat-tab-label-active {
min-width: auto !important;
background-color: transparent;
font-weight: 700;
}
/* ::ng-deep .mat-tab-group {
height: 100%;
} }
.card h6, ::ng-deep .mat-tab-body-wrapper {
p { flex-grow: 1;
color: #999;
} }
.icon { ::ng-deep .mat-tab-body {
margin-top: 20px; display: flex !important;
width: 130px; flex-direction: column;
height: 130px;
border: 1px solid #e5e5e5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
} }
.icon i { ::ng-deep .mat-tab-body-content {
font-size: 55px; display: flex;
color: #e91e63; flex-direction: column;
} flex-grow: 1;
} */
.card-title { // .header-image {
margin-top: 30px; // background: url("/assets/images/new-dashboard-bg.png") no-repeat;
margin-bottom: 3px; // background-size: cover;
} // margin-top: 70px;
// min-height: 20em;
// position: relative;
// }
.card-description { // .header-text-container {
margin-bottom: 20px; // background: rgba(255, 255, 255, 0.7);
} // position: absolute;
// bottom: 0px;
// padding-left: 5em;
// padding-right: 10em;
// padding-top: 2em;
// padding-bottom: 2em;
// }
.card-dataset { // .dashboard-main-container {
display: flex; // margin-top: 0px;
flex-direction: column; // }
padding: 20px;
position: relative;
margin-top: 40px;
}
.card { // .non-auth-main-container {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); // padding: 0;
border-radius: 6px; // }
color: rgba(0, 0, 0, 0.87);
background: #fff;
}
.card-raised { // .non-auth-stats {
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), // background-color: rgba(255, 255, 255, 0.5);
0 8px 10px -5px rgba(0, 0, 0, 0.2); // }
}
.full-width { // .non-auth-title-container {
width: 100%; // margin-top: 3em;
} // }
}
.info { // .dashboard {
display: flex; // .card {
flex-wrap: nowrap; // padding: 25px 20px 20px 20px;
} // display: flex;
// flex-direction: column;
// align-items: center;
// }
.subtitle { // .card h6,
margin-bottom: 0px !important; // p {
} // color: #999;
// }
.view-all { // .icon {
margin-left: auto; // margin-top: 20px;
margin-bottom: 0px !important; // width: 130px;
color: #6aa4d9; // height: 130px;
} // border: 1px solid #e5e5e5;
// border-radius: 50%;
// display: flex;
// justify-content: center;
// align-items: center;
// }
.view-all:hover { // .icon i {
color: rgb(46, 117, 182) !important; // font-size: 55px;
} // color: #e91e63;
// }
// .card-title {
// margin-top: 30px;
// margin-bottom: 3px;
// }
// .card-description {
// margin-bottom: 20px;
// }
// .card-dataset {
// display: flex;
// flex-direction: column;
// padding: 20px;
// position: relative;
// margin-top: 40px;
// }
// .card {
// box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
// border-radius: 6px;
// color: rgba(0, 0, 0, 0.87);
// background: #fff;
// }
// .card-raised {
// box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12),
// 0 8px 10px -5px rgba(0, 0, 0, 0.2);
// }
// .full-width {
// width: 100%;
// }
// }
// .info {
// display: flex;
// flex-wrap: nowrap;
// }
// .subtitle {
// margin-bottom: 0px !important;
// }
// .view-all {
// margin-left: auto;
// margin-bottom: 0px !important;
// color: #6aa4d9;
// }
// .view-all:hover {
// color: rgb(46, 117, 182) !important;
// }

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

@ -38,6 +38,8 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
breadCrumbs: Observable<BreadcrumbItem[]>; breadCrumbs: Observable<BreadcrumbItem[]>;
public isVisible = true
public userInfo: any; public userInfo: any;
datasetActivities: any[]; datasetActivities: any[];
grantActivities: any[]; grantActivities: any[];
@ -181,6 +183,10 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
this.router.navigate(['/datasets/publicEdit/' + dataset.id]); this.router.navigate(['/datasets/publicEdit/' + dataset.id]);
} }
public closeCard(): void {
this.isVisible = false;
}
// viewAllPublicDmpsClicked() { // viewAllPublicDmpsClicked() {
// this.router.navigate(['/explore-plans']); // this.router.navigate(['/explore-plans']);
// } // }

2
dmp-frontend/src/app/ui/dashboard/dashboard.module.ts
View File

@ -14,6 +14,8 @@ import { RecentVisitedActivityComponent } from '@app/ui/dashboard/recent-visited
import { WizardComponent } from '@app/ui/dashboard/wizard/wizard.component'; import { WizardComponent } from '@app/ui/dashboard/wizard/wizard.component';
import { CommonUiModule } from '@common/ui/common-ui.module'; import { CommonUiModule } from '@common/ui/common-ui.module';
import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module'; import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
import { GuestModule } from '../guest/guest.module';
import { GuestComponent } from '../guest/guest.component';
@NgModule({ @NgModule({
imports: [ imports: [

180
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
View File

@ -1,4 +1,178 @@
th { .latest-activity-title {
text-align: left;
font-weight: 300;
font-family: "Roboto", sans-serif;
font-size: 1.25rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.6;
padding-bottom: 1.2rem;
}
.dmp-card,
.dataset-card {
min-width: 712px;
/* min-height: 308px; */
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #0000001a;
border-radius: 4px;
opacity: 1;
margin-top: 2.43rem;
margin-bottom: 1rem;
}
.remove-border-bottom ::ng-deep .mat-tab-header {
border-bottom: none;
}
input[type="text"] {
background: #fafafa 0% 0% no-repeat padding-box;
border: 1px solid #d1d1d1;
border-radius: 4px;
opacity: 1;
width: 347px;
height: 56px;
font-family: Arial, FontAwesome;
padding-left: 15px;
}
.edited-date {
text-align: left;
font-weight: 300;
font-family: "Roboto", sans-serif;
line-height: 2.4;
letter-spacing: 0px;
color: #212121;
opacity: 0.6;
}
.dmp-label {
background: #129d99 0% 0% no-repeat padding-box;
border-radius: 4px 0px;
opacity: 1;
width: 67px;
height: 37px;
color: #ffffff;
line-height: 2.4;
opacity: 0.75;
}
.dataset-label {
width: 158px;
height: 37px;
background: #f7dd72 0% 0% no-repeat padding-box;
border-radius: 4px 0px;
text-align: left;
line-height: 2.8;
font-size: 0.875rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.75;
}
.dmp-title,
.dataset-title {
text-align: left;
font-weight: 500;
font-family: "Roboto", sans-serif;
font-size: 1rem;
opacity: 0.81;
padding-top: 0.75rem;
padding-bottom: 0.55rem;
color: #212121;
}
.dataset-subtitle,
.dmp-subtitle {
display: flex;
flex-direction: row;
text-align: left;
font-weight: 400;
font-family: "Roboto", sans-serif;
font-size: 0.875rem;
opacity: 1;
align-items: center;
color: #848484;
}
.dmp-title-draft {
text-align: left;
font-weight: 500;
font-family: "Roboto", sans-serif;
font-size: 1rem;
opacity: 0.81;
padding-top: 0.75rem;
padding-bottom: 0.55rem;
color: #f16868;
}
.icon-align {
display: inline-flex;
vertical-align: middle;
padding-bottom: 0.4rem;
}
.dataset-card-actions,
.dmp-card-actions {
display: flex;
flex-direction: row;
border-top: 1px solid #dbdbdb;
line-height: 4;
color: #848484;
}
.dataset-card-actions a,
.dmp-card-actions a {
color: #848484 !important;
text-decoration: none !important;
}
.dataset-card-actions a:hover,
.dmp-card-actions a:hover {
color: #129d99 !important;
}
.dmp-dataset-descriptions-title {
color: #000000;
opacity: 0.6;
padding-top: 1.5rem;
padding-bottom: 0.8rem;
}
.dmp-dataset-descriptions-name {
color: #000000;
opacity: 0.6;
font-weight: 700;
}
.show-more {
color: black !important;
}
.show-more:hover {
color: #129d99 !important;
}
.btn-load-more {
border: 2px solid #212121;
border-radius: 30px;
opacity: 1;
width: 132px;
height: 40px;
margin-top: 4.125rem;
}
.btn-load-more:hover {
background-color: black;
color: white;
}
.draft {
color: #f16868;
}
/* th {
text-transform: uppercase; text-transform: uppercase;
} }
@ -41,8 +215,6 @@ a {
margin-right: 2.5em; margin-right: 2.5em;
border-radius: 10em; border-radius: 10em;
background-color: #0d7489; background-color: #0d7489;
/* background-color: rgba(0, 112, 192, 1); */
/* background-color: #007bff; */
color: #fff; color: #fff;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
@ -65,4 +237,4 @@ a {
.view-all:hover { .view-all:hover {
color: rgb(46, 117, 182) !important; color: rgb(46, 117, 182) !important;
} } */

89
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
View File

@ -1,12 +1,90 @@
<div class="card"> <div *ngIf="dmpActivities != null">
<div *ngFor="let activity of dmpActivities">
<!-- if dmp -->
<div *ngIf="true" class="dmp-card">
<div class="d-flex flex-direction-row">
<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
<div class="col-auto ml-auto edited-date">Edited: 9 May 2020</div>
</div>
<div class="col-auto" [ngClass]="{'dmp-title': !isDraft, 'dmp-title-draft': isDraft}">
DMP for: Horizon 2020 for Grant DMP of the NEANIAS DMP plan</div>
<div class="dmp-subtitle">
<span class="col-auto">Owner</span>
<span>.</span>
<span class="col-auto"><span
class="material-icons icon-align">public</span>Published</span>
<!-- <span class="draft"><span class="material-icons">create</span>Draft</span> -->
<span>.</span>
<span class="col-auto">Version 1</span>
<span>.</span>
<span class="col-auto">Grant: NEANIAS Project</span>
</div>
<div class="col-auto dmp-dataset-descriptions-title">Contained Dataset Descriptions (5)
</div>
<!-- <div *ngFor="; let i = index" > -->
<!-- <div *ngIf="i < 3"></div> -->
<div class="col-auto dmp-dataset-descriptions-name">Dataset description: Horizon 2020
for Grant DMP of Dataset description</div>
<!-- </div> -->
<a href="#" class="d-flex justify-content-center pt-3 pb-3 show-more"><u>Show
more</u></a>
<div class="dmp-card-actions">
<a href="#" class="col-auto border-right"><span
class="material-icons icon-align pr-2">open_in_new</span>Export</a>
<a href="#" class="col-auto border-right"><span
class="material-icons icon-align">add</span>Add dataset description</a>
<a href="#" class="col-auto border-right"><span
class="material-icons icon-align pr-2">group_add</span>Invite
collaborators</a>
<a href="#" class="col-auto border-right"><span
class="material-icons icon-align pr-2">filter_none</span>Clone</a>
<a href="#" class="col-auto"><span
class="material-icons icon-align pl-2">more_horiz</span></a>
</div>
</div>
</div>
</div>
<!-- if dataset -->
<div *ngIf="true" class="dataset-card">
<div class="d-flex flex-direction-row">
<div class="col-auto dataset-label">Dataset Description</div>
<div class="col-auto ml-auto edited-date">Edited: 9 May 2020</div>
</div>
<div class="col-auto dataset-title">Dataset description: Horizon 2020 for Grant DMP of
Dataset description</div>
<div class="dataset-subtitle">
<span class="col-auto">Owner</span>
<span>.</span>
<span class="col-auto"><span
class="material-icons icon-align">done</span>Finalized</span>
<!-- <span><span class="material-icons">create</span>Draft</span> -->
<span>.</span>
<span class="col-auto">Grant: NEANIAS Project</span>
</div>
<div class="d-flex flex-direction-row pt-3 pb-3">
<div class="col-auto dataset-subtitle">Part of</div>
<div class="col-auto dmp-label">DMP</div>
<div class="col-auto dmp-title">DMP for: Horizon 2020 for Grant DMP of the NEANIAS
DMP plan</div>
</div>
<div class="dataset-card-actions">
<a href="#" class="col-auto border-right"><span
class="material-icons icon-align pr-2">open_in_new</span>Export</a>
<a href="#" class="col-auto border-right"><span
class="material-icons icon-align pr-2">group_add</span>Invite
collaborators</a>
<a href="#" class="col-auto"><span
class="material-icons icon-align pl-2">more_horiz</span></a>
</div>
</div>
<!-- <div class="card">
<div class="card-header card-header-plain"> <div class="card-header card-header-plain">
<div class="card-desc"> <div class="card-desc">
<h4 class="card-title"> <h4 class="card-title">
{{ 'RECENT-ACTIVITY.LAST-EDITED-DMP' | translate}} {{ 'RECENT-ACTIVITY.LAST-EDITED-DMP' | translate}}
</h4> </h4>
<!-- <p class="card-category">
{{ 'RECENT-ACTIVITY.LICENSE' | translate}}
</p> -->
</div> </div>
<a class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="['/plans/']"> <a class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="['/plans/']">
{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a> {{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
@ -25,7 +103,6 @@
</thead> </thead>
<tbody *ngIf="dmpActivities != null"> <tbody *ngIf="dmpActivities != null">
<a *ngFor="let activity of dmpActivities" class="table-row" [routerLink]="['../plans/overview/' + activity.id]"> <a *ngFor="let activity of dmpActivities" class="table-row" [routerLink]="['../plans/overview/' + activity.id]">
<!-- <tr (click)="redirect(activity.id, recentActivityTypeEnum.Dmp)" *ngFor="let activity of dmpActivities" style="cursor: pointer;"> -->
<td>{{ activity.label }}</td> <td>{{ activity.label }}</td>
<td> <td>
<div *ngIf="activity.profile" matTooltip="{{ activity.profile }}" class="template-name"> <div *ngIf="activity.profile" matTooltip="{{ activity.profile }}" class="template-name">
@ -103,4 +180,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div> -->

1
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
View File

@ -24,6 +24,7 @@ import { takeUntil } from 'rxjs/operators';
export class RecentEditedActivityComponent extends BaseComponent implements OnInit { export class RecentEditedActivityComponent extends BaseComponent implements OnInit {
dmpActivities: DmpListingModel[]; dmpActivities: DmpListingModel[];
recentActivityTypeEnum = RecentActivityType; recentActivityTypeEnum = RecentActivityType;
isDraft: boolean;
constructor( constructor(
private router: Router, private router: Router,

344
dmp-frontend/src/app/ui/guest/guest.component.html Normal file
View File

@ -0,0 +1,344 @@
<div id="page-top" class="bootstrap-overrides">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg" id="nav">
<div class="container">
<a class="navbar-brand" href="#page-top"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars ml-1"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="my-nav-item">
<a class="my-nav-link dropbtn" href="#about">ABOUT</a>
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="about/how-it-works.html">How it works</a>
<a href="https://trello.com/b/x49lylnK/argos" target="_blank">Roadmap</a>
<a href="about/faqs.html">faqs</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="my-nav-link dropbtn" href="#resources">RESOURCES</a>
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="resources/media-kit.html">Media kit</a>
<a href="resources/user-guide.html">User Guide</a>
<a href="resources/co-branding.html">Co-branding</a>
</div>
</div>
</li>
<li class="my-nav-item"><a class="my-nav-link" href="contact.html">CONTACT</a></li>
<li class="my-nav-item"><a class="my-nav-link" (click)="openSignInDialog()">SIGN IN</a></li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="head">
<div class="container">
<div class="row">
<div class="col-auto margin-right-6">
<h1>Plan and follow your data</h1>
<div class="head-subtitles">
<div class="d-flex flex-direction-row">
<h4>Create</h4>&nbsp;<h6>machine actionable DMPs.</h6>
</div>
<div class="d-flex flex-direction-row">
<h4>Configure</h4>&nbsp;<h6>to best fit your dicsipline.</h6>
</div>
<div class="d-flex flex-direction-row">
<h4>Link</h4>&nbsp;<h6>to EOSC components out of the box.</h6>
</div>
<div class="d-flex flex-direction-row">
<h4>Share</h4>&nbsp;<h6>easily in your repository.</h6>
</div>
</div>
<div class="head-subtitle">
<p class="body-text">Bring your Data Management Plans closer to where data are generated, analysed and stored.</p>
</div>
<div class="head-start-dmp">
<button type="button" class="normal-btn">Start your DMP</button>
</div>
</div>
<div class="col-auto ml-auto">
<img src="../../../assets/splash/assets/img/1.png" width="363" height="330">
</div>
</div>
</div>
</header>
<!-- Start -->
<section class="page-section start" id="start">
<div class="container">
<div class="row template-img">
<div class="col-auto margin-right-6">
<p class="title-1 mb-0">Start your</p>
<div class="d-flex flex-direction-row">
<p class="title-2 text-uppercase">Argos</p>&nbsp;<p class="title-2">experience</p>
</div>
<div class="options">
<div class="selected d-flex flex-direction-row option-row" id="id1"
onclick="document.getElementById('template-preview').src='../../../assets/splash/assets/img/template-preview-1.svg'; toggleClass(['id1','id2','id3'], 'id1')">
<p class="option-number">1</p>&nbsp;<p class="option-text">Select Templates</p>
</div>
<div class="not-selected d-flex flex-direction-row option-row" id="id2"
onclick="document.getElementById('template-preview').src='../../../assets/splash/assets/img/template-preview-2.svg'; toggleClass(['id1','id2','id3'], 'id2')">
<p class="option-number">2</p>&nbsp;<p class="option-text">Fill the information</p>
</div>
<div class="not-selected d-flex flex-direction-row option-row" id="id3"
onclick="document.getElementById('template-preview').src='../../../assets/splash/assets/img/template-preview-3.svg'; toggleClass(['id1','id2','id3'], 'id3')">
<p class="option-number">3</p>&nbsp;<p class="option-text">Share DMP</p>
</div>
</div>
</div>
<div class="col-auto ml-auto template-img">
<img id="template-preview" src="../../../assets/splash/assets/img/template-preview-1.svg" width="472" height="519">
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="page-section features" id="features">
<div class="container">
<div class="row features-title">Features</div>
<div class="row features-layout">
<div class="col">
<div class="row feature-img">
<div class="col-auto"><img src="../../../assets/splash/assets/img/Asset 15.svg" width="84" height="107"></div>
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Produce DMP outputs</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Close the data management planning lifecycle by publishing your DMPs in a FAIR manner. Assign licenses, PIDs and publish DMPs in a repository of your choice.
</div>
</div>
</div>
<div class="col">
<div class="row feature-img">
<img src="../../../assets/splash/assets/img/Asset 14.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Update DMPs</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Treat DMPs as living documents. Secure their provenance and continue work in new versions (new DOIs assigned).
</div>
</div>
</div>
</div>
<div class="row features-layout">
<div class="col">
<div class="row feature-img">
<img src="../../../assets/splash/assets/img/Asset 12.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Re-use datasets & templates</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Identify datasets to be re-used in your DMP. Copy or clone dataset descriptions to other DMPs.
</div>
</div>
</div>
<div class="col">
<div class="row feature-img">
<img src="../../../assets/splash/assets/img/Asset 10.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Import and Export DMPs</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Import a .json file of your DMP and continue work in ARGOS. Export DMPs in machine readable (.xml) and machine-actionable (.json) formats.
</div>
</div>
</div>
</div>
<div class="row features-layout">
<div class="col">
<div class="row feature-img">
<img src="../../../assets/splash/assets/img/Asset 11.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Customise dataset descriptions</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Differentiate DMPs from dataset descriptions. Describe your datasets with more than one template and tailor its content to your specific needs.
</div>
</div>
</div>
<div class="col">
<div class="row feature-img">
<img src="../../../assets/splash/assets/img/Asset 13.svg" width="84" height="107">
</div>
<div class="row justify-content-center">
<div class="feature-subtitle">Connect with OpenAIRE & EOSC</div>
</div>
<div class="row justify-content-center">
<div class="feature-desc">
Use OpenAIRE and EOSC underlying services, sources and semantics to ease completion of DMPs and trace the quality of your research.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Benefits -->
<section class="page-section benefits" id="benefits">
<div class="container">
<div class="row justify-content-around">
<div class="col"></div>
<div class="col d-flex align-items-center justify-content-center flex-direction-row">
<span class="section-title-1">Who</span>&nbsp;<span class="section-title-2">Benefits</span>
</div>
<div class="col">
<div class="row justify-content-center"><div class="col-auto">
<img src="../../../assets/splash/assets/img/2 - Copy.png" width="116" height="139">
</div>
</div>
</div>
</div>
<div class="row justify-content-around">
<div class="col-auto">
<div class="benefit-card">
<div class="row justify-content-center">
<span class="benefit-card-title">Funders</span>
</div>
<div class="row justify-content-center">
<span class="benefit-desc caption">Include DMPs in data management policies.</span>
</div>
<hr>
<div class="row benefit-ic">
<img src="../../../assets/splash/assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Add, update and modify DMP templates</span>
</div>
<div class="row benefit-ic">
<img src="../../../assets/splash/assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Enrich your organisations’ research graph</span>
</div>
<div class="row benefit-ic">
<img src="../../../assets/splash/assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Link argos to your</span>&nbsp;
<span class="benefit-card-sub-color">Monitoring Dashboard</span>
</div>
</div>
</div>
<div class="col-auto">
<div class="benefit-card">
<div class="row justify-content-center">
<span class="benefit-card-title">Researchers</span>
</div>
<div class="row justify-content-center">
<span class="benefit-desc-1 caption">Become Research Data Management literate and lead Open Science cultural change/ practices.</span>
</div>
<hr>
<div class="row benefit-ic">
<img src="../../../assets/splash/assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Comply with DMP requirements</span>
</div>
<div class="row benefit-ic">
<img src="../../../assets/splash/assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Learn and apply best practices for DMPs</span>
</div>
<div class="row benefit-ic">
<img src="../../../assets/splash/assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Co-edit DMPs and manage workload</span>
</div>
</div>
</div>
<div class="col-auto">
<div class="benefit-card">
<div class="row justify-content-center">
<span class="benefit-card-title">Institutions</span>
</div>
<div class="row justify-content-center">
<span class="benefit-desc caption">Support Open and FAIR Data Management Planning.</span>
</div>
<hr>
<div class="row benefit-ic">
<img src="../../../assets/splash/assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Add, update and modify DMP templates</span>
</div>
<div class="row benefit-ic">
<img src="../../../assets/splash/assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Connect your organisations’ services</span>
</div>
<div class="row benefit-ic">
<img src="../../../assets/splash/assets/img/ic_check_circle_24px.svg" width="20" height="20">
<span class="benefit-card-subtitle">Ensure research integrity and excellence</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Co-branding -->
<section class="page-section co-branding" id="co-branding">
<div class="container">
<div class="row justify-content-around">
<div class="col-auto">
<img class="mirror" src="../../../assets/splash/assets/img/3.png" width="311" height="309">
</div>
<div class="col-auto">
<div class="row">
<div class="col-auto branding-logo pl-0">
<img src="../../../assets/splash/assets/img/argos-logo - Copy.svg" width="91" height="35">
</div>
<span class="title-3">co-branding</span>
</div>
<div class="row">
<span class="co-branding-text">
ARGOS is based on OpenDMP, an open source software that can be deployed by third parties. ARGOS development team welcomes contributions by the international community to strengthen functionalities and further align with global fora.
</span>
</div>
<div class="row">
<div class="head-start-dmp">
<button type="button" class="normal-btn">Learn more</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer">
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<img src="../../../assets/splash/assets/img/argos-logo - Copy.svg" width="98" height="37">
</div>
<div class="col-auto">
<div class="footer-text">ARGOS receives funding from the European Union's Horizon 2020 Research and Innovation programme under grant agreement No. 731011.</div>
</div>
<div class="col-auto">
<img src="../../../assets/splash/assets/img/Logo_Horizontal_white_small.png" width="126" height="30">
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col d-flex justify-content-end">
<a class="btn rounded-circle btn-social mx-1" href="#!"><i class="fab fa-xs fa-facebook-f"></i></a>
<a class="btn rounded-circle btn-social twitter mx-1" href="#!"><i class="fab fa-xs fa-twitter"></i></a>
<a class="btn rounded-circle btn-social linkedin mx-1" href="#!"><i class="fab fa-xs fa-linkedin-in"></i></a>
<a class="btn rounded-circle btn-social youtube mx-1" href="#!"><i class="fab fa-xs fa-youtube"></i></a>
</div>
<div class="col">
<a class="btn mx-1" href="#!"><span class="newsletter">Newsletter</span><i class="fas fa-lg fa-wifi wifi-rotate"></i></a>
</div>
</div>
<div class="row justify-content-center pt-5">
<a class="col d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
<a class="col conditions-policy" href="#!">Cookies policy</a>
</div>
<div class="row justify-content-center pt-5">
<div class="col-auto"><img src="../../../assets/splash/assets/img/Cc.logo.circle.png" width="24" height="24"></div>
<div class="col-auto pl-0"><img src="../../../assets/splash/assets/img/univ-access.png" width="24" height="24"></div>
<div class="licence">Unless otherwise indicated, all materials created by OpenAIRE are licenced under</div>&nbsp;
<div class="licence"><u>ATTRIBUTION 4.0 INTERNATIONAL LICENSE.</u></div>
</div>
</div>
</footer>
</div>

724
dmp-frontend/src/app/ui/guest/guest.component.scss Normal file
View File

@ -0,0 +1,724 @@
// Contact
.main-contact {
padding: 3rem 16.5rem;
}
.required {
color: #E54242;
font-weight: 400;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
}
.form {
padding-top: 3.5rem;
}
.form-title {
text-align: left;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 1.12rem;
color: #212121;
}
// Footer
.footer {
background: #F3F3F3 0% 0% no-repeat padding-box;
opacity: 1;
}
.footer-text {
text-align: left;
font-size: 0.75rem;
font-weight: 300;
font-family: 'Roboto', sans-serif;
color: #000000;
opacity: 1;
max-width: 460px;
margin: 0rem 2.5rem;
}
.btn-social {
border: 1px solid black !important;
color: black;
font-size: 28px;
opacity: 0.8;
padding: 0.2rem 1.2rem;
}
// .twitter, .youtube, .linkedin {
// padding: .375rem .575rem !important;
// }
.newsletter {
text-align: left;
font-weight: 500;
font-size: 1.18rem;
color: #000000;
opacity: 1;
}
.wifi-rotate {
color: black;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.conditions-policy {
text-align: left;
text-decoration: underline;
font-weight: 400;
font-family: 'Roboto',sans-serif;
font-size: 1rem;
color: #000000;
opacity: 1;
}
.licence {
text-align: left;
font-weight: 300;
font-family: 'Roboto',sans-serif;
font-size: 0.75rem;
line-height: 2.4;
color: #000000;
opacity: 1;
}
// Header
header.head {
text-align: center;
color: #fff;
background-image: url("../../../assets/splash/assets/img/gradinet-background.svg");
background-repeat: no-repeat;
background-size: cover;
}
.head-subtitles {
margin-top: 1.93rem;
}
.head-subtitle {
margin-top: 1.65rem;
width: 23.4rem;
}
.head-start-dmp {
display: flex;
margin-top: 2.6rem;
}
@media (min-width: 768px) {
header.head {
padding-top: 3.8rem;
/* padding-bottom: calc(100% - 3.8rem); */
padding-bottom: 5.4rem;
}
}
// Navbar
.bootstrap-overrides .navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3.18rem;
padding-left: 0;
padding-right: 0;
background-color: white;
margin-bottom: 0px !important;
}
.bootstrap-overrides .navbar .container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.bootstrap-overrides .navbar-brand {
display: inline-block;
width: 135px;
height: 51px;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.bootstrap-overrides .navbar-nav {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
margin-left: auto;
list-style: none;
}
.bootstrap-overrides .navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
}
.bootstrap-overrides .navbar-nav .dropdown-menu {
position: static;
float: none;
}
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
padding-top: 0.5rem;
}
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.navbar-toggler:hover, .navbar-toggler:focus {
text-decoration: none;
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.my-nav-link {
display: block;
padding: 0.5rem 1rem;
margin-left: 1rem;
cursor: pointer;
text-align: left;
font: Bold 14px/17px Roboto;
letter-spacing: 0px;
color: #000000;
opacity: 1;
}
.my-nav-link:hover, .my-nav-link:focus {
text-decoration: none;
}
.my-nav-link.disabled {
color: #6c757d;
pointer-events: none;
cursor: default;
}
.active-nav-link {
border-bottom: 4px solid #23BCBA !important;
border-left: 0 !important;
border-right: 0 !important;
border-radius: 0px !important;
}
.my-nav-item {
margin-bottom: -1px;
position: relative;
display: inline-block;
}
.my-nav-link {
width: fit-content;
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
/* .my-nav-link:hover {
border-bottom: 4px solid #23BCBA !important;
border-left: 0 !important;
border-right: 0 !important;
border-radius: 0px !important;
} */
.my-nav-link.disabled {
color: #6c757d;
background-color: transparent;
border-color: transparent;
}
.my-nav-link.active, .my-nav-item.show .my-nav-link {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
.my-nav-link {
border-radius: 0.25rem;
}
.my-nav-link.active, .show>.my-nav-link {
color: #000000;
background-color: #23BCBA;
}
.nav-fill .my-nav-item {
flex: 1 1 auto;
text-align: center;
}
.nav-justified .my-nav-item {
flex-basis: 0;
flex-grow: 1;
text-align: center;
}
.navbar-expand {
flex-flow: row nowrap;
justify-content: flex-start;
}
.navbar-expand>.container, .navbar-expand>.container-fluid, .navbar-expand>.container-sm, .navbar-expand>.container-md, .navbar-expand>.container-lg, .navbar-expand>.container-xl {
padding-right: 0;
padding-left: 0;
}
.navbar-expand .navbar-nav {
flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand .navbar-nav .my-nav-link {
padding-right: 1rem;
padding-left: 1rem;
}
.navbar-expand>.container, .navbar-expand>.container-fluid, .navbar-expand>.container-sm, .navbar-expand>.container-md, .navbar-expand>.container-lg, .navbar-expand>.container-xl {
flex-wrap: nowrap;
}
.navbar-expand .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
.navbar-expand .navbar-toggler {
display: none;
}
.dropdown-top {
width: 0px;
border-bottom: 10px solid #23BCBA;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: 0 20%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 2;
}
.dropdown-options {
background-color: #23BCBA;
border-radius: 5px;
min-width: 160px;
width: 214px;
overflow: auto;
padding: 20px 0px;
}
.dropdown-content a {
text-align: left;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 0.87rem;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;
padding: 8px 28px;
text-decoration: none;
display: block;
}
.dropdown-options a:hover {
background-color: rgba(255, 255, 255, 0.609) !important;
}
.dropdown-options a:hover {
background-color: #ddd;
}
.my-nav-item:hover .dropdown-content {
display: block;
}
.show {
display: block;
}
@media (max-width: 991.98px) {
.navbar-expand-lg>.container {
padding-right: 0;
padding-left: 0;
}
#nav.navbar-shrink {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: #212529 !important;
}
#nav.navbar-shrink .navbar-brand {
font-size: 1.25em;
}
#nav.navbar-shrink .navbar-brand svg {
height: 1.5rem;
}
#nav.navbar-shrink .my-nav-link, #nav.navbar-shrink button {
color: white;
}
#nav.navbar-shrink .my-nav-link:hover {
color: #23BCBA;
}
}
@media (min-width: 992px) {
.navbar-expand-lg {
flex-flow: row nowrap;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-nav {
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-lg .navbar-nav .my-nav-link {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.navbar-expand-lg>.container {
flex-wrap: nowrap;
}
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
}
@media (min-width: 992px) {
#nav {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
border: none;
background-color: transparent;
transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
}
#nav .navbar-brand {
font-size: 1.5em;
transition: font-size 0.3s ease-in-out;
}
#nav .navbar-brand img {
/* height: 2rem; */
transition: height 0.3s ease-in-out;
}
#nav.navbar-shrink {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: #212529 !important;
}
#nav.navbar-shrink .navbar-brand {
font-size: 1.25em;
}
#nav.navbar-shrink .navbar-brand svg, #mainNav.navbar-shrink .navbar-brand img {
height: 1.5rem;
}
#nav.navbar-shrink .my-nav-link, #nav.navbar-shrink button {
color: white;
}
#nav.navbar-shrink .my-nav-link:hover {
color: #23BCBA;
}
#nav .navbar-nav .my-nav-item {
margin-right: 1rem;
}
#nav .navbar-nav .my-nav-item:last-child {
margin-right: 0;
}
}
// Section
section.start {
text-align: center;
color: #fff;
background: #23BCBA 0% 0% no-repeat padding-box;
}
.template-img {
margin-right: 6.8rem;
}
.options {
padding-top: 4rem;
}
.option-row {
cursor: pointer;
}
.option-number {
text-align: left;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 3.25rem;
line-height: 1;
letter-spacing: 0px;
color: #0E6978;
opacity: 1;
padding: 0rem 1rem;
}
.option-text {
display: flex;
align-items: center;
text-align: left;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 1.56rem;
line-height: 1.68rem;
letter-spacing: 0px;
color: #FFFFFF;
}
.selected {
opacity: 1;
}
.not-selected {
opacity: 0.6;
}
.features-layout {
display: flex;
justify-content: space-around;
padding-bottom: 4rem;
}
.features-title {
display: flex;
justify-content: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
padding-bottom: 3rem;
color: #212121;
opacity: 1;
}
.feature-subtitle {
text-align: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 1.87rem;
padding: 1.5rem 0rem;
color: #000000;
opacity: 0.8;
}
.feature-img {
display: flex;
justify-content: center;
}
.feature-desc {
text-align: center;
font-size: 1rem;
color: #292747;
opacity: 1;
max-width: 429px;
}
section.benefits {
background: #F3F3F3 0% 0% no-repeat padding-box;
opacity: 1;
}
.section-title-1 {
text-align: center;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
color: #212121;
}
.section-title-2 {
text-align: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
color: #212121;
}
.section-title-3 {
text-align: left;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
color: #212121;
}
.benefit-card {
width: 370px;
height: 378px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 6px 15px #0000001A;
border-radius: 36px;
opacity: 1;
}
.benefit-card-title {
text-align: center;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 1.68rem;
color: #292747;
opacity: 1;
padding: 2.81rem 0rem 1.5rem 0rem;
}
.benefit-desc {
text-align: center;
color: #292747;
max-width: 226px;
}
.benefit-desc-1 {
text-align: center;
color: #292747;
max-width: 250px;
}
.benefit-card hr {
width: 286px;
border: 1px solid #DBDBDB;
opacity: 1;
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.benefit-card-subtitle {
text-align: left;
font-weight: 400;
font-family: 'Roboto', sans-serif;
font-size: 0.87rem;
color: #292747;
padding-left: 10px;
}
.benefit-card-sub-color {
text-align: left;
font-weight: 400;
font-family: 'Roboto', sans-serif;
font-size: 0.87rem;
color: #008887;
}
.benefit-ic {
margin-left: 40px !important;
margin-bottom: .8rem;
}
.branding-logo {
display: flex;
align-items: flex-end;
}
.co-branding-text {
text-align: left;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1rem;
color: #212121;
opacity: 0.81;
max-width: 357px;
padding-top: 1.5rem;
}
.media-kit-logo-title, .moo-card-logo-title {
text-align: left;
font-weight: 300;
font-family: 'Roboto',sans-serif;
font-size: 1.25rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
}
.co-branding p, .user-guide p, .media-kit p {
text-align: left;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 0.87rem;
line-height: 1.6rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.8;
padding: 2rem 0rem;
}
section.media-kit-logo {
background: #F3F3F3;
opacity: 1;
}
@media (min-width: 768px) {
section.start, section.features, section.co-branding, section.user-guide, section.media-kit .footer {
padding-top: 6rem;
padding-bottom: 5.4rem;
}
section.benefits {
padding-top: 3.8rem;
padding-bottom: 5.4rem;
}
section.contact {
padding-top: 2.8rem;
padding-bottom: 0.5rem;
}
section.how-it-works {
padding-top: 2.8rem;
padding-bottom: 3.8rem;
}
section.media-kit-logo, section.moo-cards {
padding-top: 4rem;
padding-bottom: 5rem;
}
.footer {
padding-top: 4.8rem;
padding-bottom: 2rem;
}
}

62
dmp-frontend/src/app/ui/guest/guest.component.ts Normal file
View File

@ -0,0 +1,62 @@
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { SignInDialogComponent } from '@common/modules/sign-in-dialog/sign-in-dialog.component';
@Component({
selector: 'app-guest-component',
templateUrl: './guest.component.html',
styleUrls: ['./guest.component.scss']
})
export class GuestComponent implements OnInit {
constructor(public dialog: MatDialog) {
}
ngOnInit() {
this.navbarCollapse();
window.addEventListener('scroll', this.scroll, true);
}
ngOnDestroy() {
window.removeEventListener('scroll', this.scroll, true);
}
public toggleClass(ids, option) {
ids.forEach(id => {
var element = document.getElementById(id);
var className = element.getAttribute("class").replace(/ .*/, '');
console.log(className);
if (id === option) {
element.classList.replace(className, "selected");
} else {
element.classList.replace(className, "not-selected");
}
})
}
public navbarCollapse() {
var element = document.getElementById('nav');
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
element.classList.add("navbar-shrink");
element.classList.add("fixed-top");
} else {
element.classList.remove("navbar-shrink");
element.classList.remove("fixed-top");
}
};
scroll = (event): void => {
this.navbarCollapse();
};
public openSignInDialog(): void {
const dialogRef = this.dialog.open(SignInDialogComponent);
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
}

17
dmp-frontend/src/app/ui/guest/guest.module.ts Normal file
View File

@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { GuestComponent } from './guest.component';
import { GuestRoutingModule } from './guest.routing';
import { SignInDialogModule } from '@common/modules/sign-in-dialog/sign-in-dialog.module';
@NgModule({
imports: [
CommonUiModule,
GuestRoutingModule,
SignInDialogModule
],
declarations: [
GuestComponent
]
})
export class GuestModule { }

16
dmp-frontend/src/app/ui/guest/guest.routing.ts Normal file
View File

@ -0,0 +1,16 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GuestComponent } from './guest.component';
const routes: Routes = [
{
path: '',
component: GuestComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class GuestRoutingModule { }

3
dmp-frontend/src/app/ui/misc/search/search.component.css
View File

@ -1,5 +1,6 @@
.input-search { .input-search {
width: 300px; width: 150px;
/* width: 300px; */
border: 1px solid rgb(218, 218, 218); border: 1px solid rgb(218, 218, 218);
border-radius: 6px; border-radius: 6px;
padding-left: 10px; padding-left: 10px;

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

@ -1,95 +1,52 @@
<nav class="navbar navbar-expand-lg fixed-navbar"> <ng-container>
<div class="container-fluid"> <nav class="navbar navbar-expand-lg fixed-navbar">
<div class="navbar-wrapper"> <div class="container-fluid">
<app-breadcrumb></app-breadcrumb>
<!-- <a routerLink="/home">
<i class="material-icons">dashboard</i>
</a>
<a class="navbar-brand" routerLink="/home">{{ 'NAV-BAR.BREADCRUMB-ROOT' | translate }}</a> -->
</div>
<button class="navbar-toggler" type="button" (click)="sidebarToggle()">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<!-- <form class="navbar-form"> <div class="hamburger change" id="hamburger" (click)="sidebarToggleOutput($event)">
<div class="input-group input-search"> <div class="icon-bar1"></div>
<input type="text" value="" class="form-control" placeholder="SEARCH..."> <div class="icon-bar2"></div>
<button type="submit" class="btn btn-link"><i class="material-icons">search</i></button> <div class="icon-bar3"></div>
</div>
</form> -->
<!-- Language
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="languageMenu">
<mat-icon>language</mat-icon>
</button>
<mat-menu #languageMenu="matMenu">
<button mat-menu-item
(click)="onLanguageSelected(languageTypes.English)">{{'NAVIGATION.ENGLISH-LANGUAGE' | translate}}</button>
<button mat-menu-item
(click)="onLanguageSelected(languageTypes.Greek)">{{'NAVIGATION.GREEK-LANGUAGE' | translate}}</button>
</mat-menu>
</div> -->
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button mat-icon-button [matMenuTriggerFor]="languageMenu" [matTooltip]="this.getCurrentLanguage().label | translate">
<mat-icon>language</mat-icon>
</button>
<mat-menu #languageMenu="matMenu" class="lang-parent">
<app-language></app-language>
</mat-menu>
</div> </div>
<a href="#" class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<app-search></app-search> <div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button type="button" class="normal-btn ml-auto" [routerLink]="['/quick-wizard']">Start new DMP</button>
<a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>FAQ</b></a>
<!-- <button mat-icon-button class="lang" [matMenuTriggerFor]="languageMenu"></button> -->
<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang"><mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span><mat-icon>arrow_drop_down</mat-icon></button>
<mat-menu #languageMenu="matMenu" class="lang-parent">
<app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu>
</div>
<ul class="navbar-nav"> <app-search></app-search>
<!-- Notifications -->
<!-- <li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons md-32">notifications</i>
<span class="notification">3</span>
<p>
<span class="d-lg-none d-md-block">Some Actions</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li> -->
<!-- Admin --> <ul class="navbar-nav">
<!-- <a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" <!-- Login -->
routerLink="/users">{{'NAV-BAR.USERS' | translate}}</a> <li class="nav-item" *ngIf="isAuthenticated();else loginoption">
<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dmp-profiles">{{'NAV-BAR.DMP-PROFILES' | <img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
translate}}</a> <!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dataset-profiles">{{'NAV-BAR.DATASETS-ADMIN' </li>
| translate}}</a> --> <ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
<!-- Login --> </button>
<li class="nav-item" *ngIf="isAuthenticated();else loginoption"> </ng-template>
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()"> </ul>
<!-- <img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> --> </div>
</li>
<ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button>
</ng-template>
</ul>
</div> </div>
</nav>
<div *ngIf="progressIndication" class="progress-bar">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
</div> </div>
</nav> </ng-container>
<div *ngIf="progressIndication" class="progress-bar">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
</div> <!-- Admin -->
<!-- <a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button"
routerLink="/users">{{'NAV-BAR.USERS' | translate}}</a>
<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dmp-profiles">{{'NAV-BAR.DMP-PROFILES' |
translate}}</a>
<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dataset-profiles">{{'NAV-BAR.DATASETS-ADMIN'
| translate}}</a> -->

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

@ -18,7 +18,69 @@ $mat-card-header-size: 40px !default;
.fixed-navbar { .fixed-navbar {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
height: 70px; height: 80px;
display: flex;
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 6px #00000029;
opacity: 1;
top: 0;
left: 0;
right: 0;
}
.logo {
width: 98px;
height: 37px;
margin-top: 15px;
margin-left: 5px;
}
.faq-title {
text-align: left;
font: Bold 15px/18px "Roboto";
letter-spacing: 0px;
color: #000000;
opacity: 1;
cursor: pointer;
}
.faq-title:hover {
color: #23bcba;
}
.lang {
opacity: 0.8;
}
.hamburger {
display: inline-block;
cursor: pointer;
padding: 0.4rem 1.5rem 0rem;
}
.icon-bar1,
.icon-bar2,
.icon-bar3 {
width: 18px;
height: 2px;
background-color: #333;
margin: 3px 0;
transition: 0.4s;
}
.change .icon-bar1 {
-webkit-transform: rotate(-45deg) translate(-3px, 3px);
transform: rotate(-45deg) translate(-3px, 3px);
}
.change .icon-bar2 {
opacity: 0;
}
.change .icon-bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -4px);
} }
::ng-deep.lang-parent { ::ng-deep.lang-parent {

54
dmp-frontend/src/app/ui/navbar/navbar.component.ts
View File

@ -1,5 +1,5 @@
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { Component, ElementRef, OnInit } from '@angular/core'; import { Component, ElementRef, EventEmitter, OnInit, Output } from '@angular/core';
import { MatDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { AppRole } from '@app/core/common/enum/app-role'; import { AppRole } from '@app/core/common/enum/app-role';
@ -11,6 +11,7 @@ import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.
import { DATASETS_ROUTES, DMP_ROUTES, GENERAL_ROUTES } from '../sidebar/sidebar.component'; import { DATASETS_ROUTES, DMP_ROUTES, GENERAL_ROUTES } from '../sidebar/sidebar.component';
import { LanguageService } from '@app/core/services/language/language.service'; import { LanguageService } from '@app/core/services/language/language.service';
import { UserService } from '@app/core/services/user/user.service'; import { UserService } from '@app/core/services/user/user.service';
import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
const availableLanguages: any[] = require('../../../assets/resources/language.json'); const availableLanguages: any[] = require('../../../assets/resources/language.json');
@ -29,7 +30,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
languages = availableLanguages; languages = availableLanguages;
language = this.languages[0]; language = this.languages[0];
currentRoute: string; currentRoute: string;
selectedLanguage = 'en';
@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
constructor(location: Location, constructor(location: Location,
private element: ElementRef, private element: ElementRef,
@ -50,17 +52,17 @@ export class NavbarComponent extends BaseComponent implements OnInit {
this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle)); this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle));
// this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle)); // this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle));
this.listTitles.push(DATASETS_ROUTES.filter(listTitle => listTitle)); this.listTitles.push(DATASETS_ROUTES.filter(listTitle => listTitle));
const navbar: HTMLElement = this.element.nativeElement; // const navbar: HTMLElement = this.element.nativeElement;
this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0]; // this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
this.router.events.subscribe((event) => { // this.router.events.subscribe((event) => {
this.sidebarClose(); // this.sidebarClose();
var $layer: any = document.getElementsByClassName('close-layer')[0]; // var $layer: any = document.getElementsByClassName('close-layer')[0];
this.currentRoute = this.router.url; // this.currentRoute = this.router.url;
if ($layer) { // if ($layer) {
$layer.remove(); // $layer.remove();
this.mobile_menu_visible = 0; // this.mobile_menu_visible = 0;
} // }
}); // });
this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => { this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
setTimeout(() => { this.progressIndication = x; }); setTimeout(() => { this.progressIndication = x; });
@ -210,4 +212,30 @@ export class NavbarComponent extends BaseComponent implements OnInit {
position: { top: '64px', right: '1em' } position: { top: '64px', right: '1em' }
}); });
} }
openFaqDialog() {
if (this.dialog.openDialogs.length > 0) {
this.dialog.closeAll();
}
else {
const dialogRef = this.dialog.open(FaqDialogComponent, {
disableClose: true,
data: {
isDialog: true
}
});
}
}
getLanguage(selectedLanguage: string) {
this.selectedLanguage = selectedLanguage;
}
toggleNavbar(event) {
document.getElementById('hamburger').classList.toggle("change");
}
sidebarToggleOutput(event) {
this.sidebarToggled.emit(event);
}
} }

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

@ -1,9 +1,8 @@
.sidebar-footer { .sidebar-footer {
padding: white; padding: white;
color: rgb(117, 117, 117); font-weight: 700;
background-color: #3333333d; font-size: 0.75rem;
/* background-color: #ffffff; */
/* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
} }
.sidebar-footer .option { .sidebar-footer .option {
@ -11,13 +10,12 @@
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
border-radius: 0px; border-radius: 0px;
color: white;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
font-size: small; font-size: small;
} }
.sidebar-footer :hover { .sidebar-footer .option:hover {
color: #00b29f; color: #00b29f;
} }

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

@ -1,41 +1,33 @@
<div class="sidebar-footer col-12"> <div class="sidebar-footer col-12">
<!-- <div class="sidebar-footer d-flex justify-content-around"> <div class="row ml-2">
<a class="option vl" href="#"> <div class="col-auto">
<i class="material-icons style-icon">mode_comment</i> <p class="option" (click)="navigate()" [ngClass]="{'option-active': this.router.url === '/about'}">
Glossary {{'FOOTER.ABOUT' | translate}}</p>
</a>
<a class="option vl" href="#"><i class="fa fa-book style-icon"></i>Guide</a>
<a class="option" href="#"><i class="fa fa-life-ring style-icon"></i>Help</a>
</div> -->
<div class="row d-flex flex-reverse">
<div class="col-12 text-center">
<p class="option" (click)="openUserGuideDialog()" [ngClass]="{'option-active': this.router.url === '/user-guide'}">
<!-- <i class="fa fa-question-circle pr-2 pt-1"></i> -->
{{'FOOTER.GUIDE' | translate}}</p>
</div> </div>
</div> <div *ngIf="isAuthenticated()" class="col-auto">
<div class="row d-flex flex-reverse">
<div class="col-6 text-center">
<p class="option" (click)="openGlossaryDialog()" [ngClass]="{'option-active': this.router.url === '/glossary'}">
<!-- <i class="fa fa-book pr-2 pt-1"></i> -->
{{'FOOTER.GLOSSARY' | translate}}</p>
</div>
<div class="col-6 text-center">
<p class="option" (click)="openFaqDialog()" [ngClass]="{'option-active': this.router.url === '/faq'}">
<!-- <i class="fa fa-question-circle pr-2 pt-1"></i> -->
{{'FOOTER.FAQ' | translate}}</p>
</div>
</div>
<div class="row d-flex flex-reverse">
<div *ngIf="isAuthenticated()" class="col-6 text-center">
<p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact-support'}"> <p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact-support'}">
<!-- <i class="fa fa-envelope-open pr-2 pt-1"></i> -->
{{'FOOTER.CONTACT-SUPPORT' | translate}}</p> {{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
</div> </div>
<div class="col-6 text-center"> </div>
<a class="option" [routerLink]="['/terms-of-service']" [routerLinkActive]="['option-active']">
<!-- <i class="fa fa-balance-scale pr-2 pt-1"></i> --> <div class="row ml-2">
{{'FOOTER.TERMS-OF-SERVICE' | translate}}</a> <div class="col-auto">
<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']">
{{'FOOTER.TERMS-OF-SERVICE' | translate}}</p>
</div>
<!-- <div class="col-6 text-center">
<p class="option" (click)="openFaqDialog()" [ngClass]="{'option-active': this.router.url === '/faq'}">
{{'FOOTER.FAQ' | translate}}</p>
</div> -->
</div>
<div class="row ml-2">
<div class="col-auto">
<p class="option" (click)="openUserGuideDialog()" [ngClass]="{'option-active': this.router.url === '/user-guide'}">
{{'FOOTER.GUIDE' | translate}}</p>
</div> </div>
<!-- <div class="col-auto text-center"> <!-- <div class="col-auto text-center">
<a class="option" [routerLink]="['/privacy-policy']" [routerLinkActive]="['option-active']"> <a class="option" [routerLink]="['/privacy-policy']" [routerLinkActive]="['option-active']">

4
dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts
View File

@ -131,4 +131,8 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
public isAuthenticated(): boolean { public isAuthenticated(): boolean {
return !(!this.authentication.current()); return !(!this.authentication.current());
} }
public navigate(): any {
this.router.navigateByUrl('/about');
}
} }

43
dmp-frontend/src/app/ui/sidebar/sidebar.component.css
View File

@ -17,11 +17,8 @@
} }
.nav hr { .nav hr {
width: 230px;
border-top: 1px solid #fff; border-top: 1px solid #fff;
border-bottom: 2px solid #d4d4d4; border-bottom: 1px solid #E1E1E1;
margin-top: 0.5rem;
margin-bottom: 0.8rem;
} }
.sidebar-footer { .sidebar-footer {
@ -32,3 +29,41 @@
background: white; background: white;
height: 70px; height: 70px;
} }
.nav-row {
display: flex;
flex-direction: row;
width: 100%;
padding: 10px 20px;
text-align: left;
letter-spacing: 0px;
color: #000000;
opacity: 1;
font-size: 0.93rem;
font-family: 'Roboto',sans-serif;
}
.nav-row:hover {
background-color: #ececec;
border-radius: 6px;
}
.icon {
width: 24px;
height: 24px;
vertical-align: middle;
color: #6B6B6B;
}
.nav-row span {
padding-left: 1.5rem;
}
.mat-list {
padding-top: 0px !important;
display: flex !important;
}
.mat-list div {
width: 100%;
}

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

@ -1,86 +1,22 @@
<div class="logo sidebar-nav">
<a [routerLink]=" ['/home']">
<div class="logo-img">
<img src="/assets/images/OpenDMP.png" />
</div>
</a>
</div>
<div class="sidebar-wrapper"> <div class="sidebar-wrapper">
<!-- MOBILE MENU --> <mat-list class="nav mat-list" *ngFor="let groupMenuItem of groupMenuItems; let firstGroup = first; let i = index" [class.nav-list-item]="showItem(groupMenuItem)" [ngClass]="{'flex-grow-1': i == groupMenuItems.length - 2}">
<!-- <div *ngIf="isMobileMenu()"> -->
<div>
<!-- Search -->
<!-- <form class="navbar-form">
<span class="bmd-form-group">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</span>
</form> -->
<!-- Login -->
<ul class="nav navbar-nav nav-mobile-menu">
<li class="nav-item">
<a class="nav-link" *ngIf="isAuthenticated();else loginoption">
<p style="display: flex; align-items: center;" [routerLink]=" ['/profile']">
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="applyFallbackAvatar($event)">
<!-- <img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()"> -->
<span class="d-lg-none d-md-block">{{ 'SIDE-BAR.ACCOUNT' | translate }}</span>
</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" *ngIf="isAuthenticated()" (click)="logout()">
<i class="material-icons">exit_to_app</i>
<p class="login-label">{{ 'USER-DIALOG.LOG-OUT' | translate }}</p>
</a>
</li>
<ng-template #loginoption>
<a class="nav-link login" *ngIf="!isLoginRouteActivated()" [routerLink]=" ['/login'] ">
<i class="material-icons">vpn_key</i>
<p class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</p>
</a>
</ng-template>
<li class="nav-item" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<a class="nav-link" [routerLink]=" this.router.url " (click)="openLanguageDialog($event)">
<i class="material-icons">language</i>
<p class="login-label">{{ 'GENERAL.TITLES.LANGUAGE' | translate }}</p>
</a>
</li>
</ul>
</div>
<!-- END OF MOBILE MENU -->
<!-- Sidebar Menu -->
<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst;"
[class.nav-list-item]="showItem(groupMenuItem)">
<div *ngIf="showItem(groupMenuItem);"> <div *ngIf="showItem(groupMenuItem);">
<hr *ngIf="!isFirst"> <hr *ngIf="!firstGroup">
<div *ngIf="isFirst" class="sidebarSubtitle firstSubtitle"> <mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item"
<p>{{groupMenuItem.title | translate}}</p> [ngClass]="{'mt-4': first && firstGroup}">
</div> <a class="nav-link nav-row" [routerLink]="[groupMenuRoute.path]">
<div *ngIf="!isFirst" class="sidebarSubtitle"> <i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
<p>{{groupMenuItem.title | translate}}</p> <i *ngIf="groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'" class="material-icons icon-mask">person</i>
</div> <span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'}">{{groupMenuRoute.title | translate}}</span>
<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes"
class="nav-item">
<a class="nav-link" [routerLink]="[groupMenuRoute.path]">
<i *ngIf="isFirst" class="material-icons">{{ groupMenuRoute.icon }}</i>
<i *ngIf="!isFirst" class="material-icons-outlined">{{ groupMenuRoute.icon }}</i>
<p>{{groupMenuRoute.title | translate}}</p>
</a> </a>
</li> </mat-list-item>
</div> </div>
</ul> </mat-list>
<!-- Sidebar Footer --> <!-- Sidebar Footer -->
<div class="sidebar-footer"> <div class="sidebar-footer pb-2">
<hr>
<app-sidebar-footer></app-sidebar-footer> <app-sidebar-footer></app-sidebar-footer>
</div> </div>
</div> </div>

13
dmp-frontend/src/app/ui/sidebar/sidebar.component.scss
View File

@ -23,3 +23,16 @@ $mat-card-header-size: 30px !default;
.firstSubtitle { .firstSubtitle {
margin-top: 20px; margin-top: 20px;
} }
.icon-mask {
color: #6b6b6b;
transform: translate(-8px, 8px);
}
.active a{
font-weight: 700;
}
.active a i{
color: #23BCBA;
}

38
dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
View File

@ -23,24 +23,23 @@ declare interface GroupMenuItem {
} }
export const GENERAL_ROUTES: RouteInfo[] = [ export const GENERAL_ROUTES: RouteInfo[] = [
{ path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'dashboard' }, { path: '/home', title: 'SIDE-BAR.DASHBOARD', icon: 'home' }
{ path: '/about', title: 'SIDE-BAR.ABOUT', icon: 'info_outline' }
]; ];
export const DMP_ROUTES: RouteInfo[] = [ export const DMP_ROUTES: RouteInfo[] = [
{ path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'view_agenda' }, { path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'library_books' },
{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public' }, { path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'dns' },
{ path: '/quick-wizard', title: 'SIDE-BAR.QUICK-WIZARD', icon: 'play_circle_outline' }, // { path: '/quick-wizard', title: 'SIDE-BAR.QUICK-WIZARD', icon: 'play_circle_outline' },
{ path: '/plans/new', title: 'SIDE-BAR.ADD-EXPERT', icon: 'playlist_add' } // { path: '/plans/new', title: 'SIDE-BAR.ADD-EXPERT', icon: 'playlist_add' }
]; ];
export const DATASETS_ROUTES: RouteInfo[] = [ export const DATASETS_ROUTES: RouteInfo[] = [
{ path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'library_books' }, { path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'library_books' },
{ path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'public' }, { path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'dns' },
{ path: '/datasetcreatewizard', title: 'SIDE-BAR.QUICK-WIZARD-DATASET', icon: "play_circle_outline" }, // { path: '/datasetcreatewizard', title: 'SIDE-BAR.QUICK-WIZARD-DATASET', icon: "play_circle_outline" },
]; ];
export const PUBLIC_ROUTES: RouteInfo[] = [ export const PUBLIC_ROUTES: RouteInfo[] = [
{ path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'public' }, { path: '/explore-plans', title: 'SIDE-BAR.PUBLIC-DMPS', icon: 'library_books' },
{ path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'public' } { path: '/explore', title: 'SIDE-BAR.PUBLIC-DESC', icon: 'dns' }
]; ];
// export const GRANTS_ROUTES: RouteInfo[] = [ // export const GRANTS_ROUTES: RouteInfo[] = [
@ -54,6 +53,13 @@ export const ADMIN_ROUTES: RouteInfo[] = [
{ path: '/language-editor', title: 'SIDE-BAR.LANGUAGE-EDITOR', icon: 'language' }, { path: '/language-editor', title: 'SIDE-BAR.LANGUAGE-EDITOR', icon: 'language' },
{ path: '/user-guide-editor', title: 'SIDE-BAR.GUIDE-EDITOR', icon: 'import_contacts' } { path: '/user-guide-editor', title: 'SIDE-BAR.GUIDE-EDITOR', icon: 'import_contacts' }
]; ];
export const INFO_ROUTES: RouteInfo[] = [
{ path: '/about', title: 'SIDE-BAR.CO-BRANDING', icon: 'toll' },
{ path: '/about', title: 'SIDE-BAR.SUPPORT', icon: 'help' },
{ path: '/about', title: 'SIDE-BAR.FEEDBACK', icon: 'feedback' }
];
// export const HISTORY_ROUTES: RouteInfo[] = [ // export const HISTORY_ROUTES: RouteInfo[] = [
// { path: '/typography', title: 'SIDE-BAR.HISTORY-VISITED', icon: 'visibility'}, // { path: '/typography', title: 'SIDE-BAR.HISTORY-VISITED', icon: 'visibility'},
// { path: '/icons', title: 'SIDE-BAR.HISTORY-EDITED', icon: 'edit'} // { path: '/icons', title: 'SIDE-BAR.HISTORY-EDITED', icon: 'edit'}
@ -72,6 +78,7 @@ export class SidebarComponent implements OnInit {
datasetItems: GroupMenuItem; datasetItems: GroupMenuItem;
grantItems: GroupMenuItem; grantItems: GroupMenuItem;
publicItems: GroupMenuItem; publicItems: GroupMenuItem;
infoItems: GroupMenuItem;
groupMenuItems: GroupMenuItem[] = []; groupMenuItems: GroupMenuItem[] = [];
private toggleButton: any; private toggleButton: any;
currentRoute: string; currentRoute: string;
@ -142,6 +149,15 @@ export class SidebarComponent implements OnInit {
} }
this.groupMenuItems.push(this.publicItems); this.groupMenuItems.push(this.publicItems);
this.infoItems = {
title: "",
routes: INFO_ROUTES,
requiresAuthentication: false,
requiresAdmin: false,
isGeneral: false
}
this.groupMenuItems.push(this.infoItems);
this.router.events.subscribe((event) => this.currentRoute = this.router.url); this.router.events.subscribe((event) => this.currentRoute = this.router.url);
// this.historyItems = { // this.historyItems = {

325
dmp-frontend/src/assets/css/demo.css
View File

@ -47,7 +47,7 @@ h6 {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: block; display: block;
top: 0; top: 80px;
left: 0; left: 0;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
@ -340,6 +340,7 @@ table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .
height: 100%; height: 100%;
content: ""; content: "";
display: block; display: block;
top: 80px;
background: rgba(0, 0, 0, 0.55); background: rgba(0, 0, 0, 0.55);
opacity: .93; opacity: .93;
} }
@ -354,3 +355,325 @@ table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .
.attach-file :hover { .attach-file :hover {
color: #00b29f color: #00b29f
} }
.normal-btn {
min-width: 162px;
max-width: 256px;
height: 40px;
cursor: pointer;
background: #129d99 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
border: none;
color: #ffffff;
opacity: 1;
line-height: 1;
font-size: 0.87rem;
padding: 0.62rem 1.87rem;
}
button:focus {
outline: none !important;
}
/* input[type=text], select {
width: 100%;
height: 56px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
} */
input[type=email], select {
width: 100%;
height: 56px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
}
textarea {
width: 100%;
height: 142px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
}
p {
text-align: left;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.25rem;
letter-spacing: 0px;
color: #212121;
}
p a {
color: #23BCBA;
}
.bootstrap-overrides a {
text-decoration: none;
background-color: transparent;
}
.bootstrap-overrides a:hover {
color: #23BCBA;
text-decoration: none;
}
.bootstrap-overrides h1, .bootstrap-overrides h2, .bootstrap-overrides h3, .bootstrap-overrides h4, .bootstrap-overrides h5, .bootstrap-overrides h6, .caption, .placeholder, .body-text, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Roboto', sans-serif;
color: #212121;
text-align: left;
}
.bootstrap-overrides h1, .h1 {
font-size: 3.3125rem;
line-height: 4rem;
font-weight: 300;
}
.bootstrap-overrides h2, .h2 {
font-size: 3.16rem;
line-height: 3.66rem;
font-weight: 300;
}
.bootstrap-overrides h3, .h3 {
font-size: 2.5rem;
line-height: 2.83rem;
font-weight: 700;
}
.bootstrap-overrides h4, .h4 {
font-size: 1.66rem;
line-height: 1.2;
font-weight: 700;
}
.bootstrap-overrides h5, .h5 {
font-size: 1.33rem;
line-height: 2.16rem;
font-weight: 300;
}
.bootstrap-overrides h6, .h6 {
font-size: 1.66rem;
line-height: 1.2;
font-weight: 300;
}
.caption {
font-size: 1rem;
line-height: 1.66rem;
font-weight: 300;
}
.placeholder {
font-size: 1.33rem;
line-height: 1.83rem;
font-weight: 300;
}
.title-1 {
text-align: left;
font-size: 2.37rem;
line-height: 2.75rem;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #FFFFFF;
}
.title-2 {
text-align: left;
font-size: 2.37rem;
line-height: 2.75rem;
font-family: 'Roboto', sans-serif;
font-weight: 700;
color: #FFFFFF;
}
.title-3 {
text-align: left;
font-size: 2.37rem;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #212121;
opacity: 0.95;
}
.page-title {
text-align: center;
font-weight: 700;
font-size: 2.375rem;
font-family: 'Roboto', sans-serif;
letter-spacing: -0.95px;
color: #212121;
opacity: 1;
}
.page-subtitle {
text-align: left;
font-weight: 300;
font-size: 2.375rem;
font-family: 'Roboto', sans-serif;
letter-spacing: 0px;
color: #212121;
opacity: 1;
}
.body-text {
font-size: 1rem;
line-height: 1.6;
font-weight: 400;
opacity: 0.8;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.fixed-top {
position: fixed !important;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.container, .container-small {
width: 100%;
padding-right: 0.75rem;
padding-left: 0.75rem;
margin-right: auto;
margin-left: auto;
z-index: 1;
}
.normal-btn {
min-width: 162px;
max-width: 256px;
height: 40px;
cursor: pointer;
background: #129D99 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1E202029;
border-radius: 30px;
border: none;
color: #FFFFFF;
opacity: 1;
font-size: 0.87rem;
padding: 0.62rem 1.87rem;
}
.mirror {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.text-box {
width: 894px;
height: 221px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #23BCBA;
border-radius: 37px;
opacity: 1;
margin: 3.75rem 0rem;
padding: 3.37rem 4.37rem;
}
.collapse-box {
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
padding: 1.45rem 1.5rem;
margin: 1rem 0rem;
}
.collapse-title a {
text-align: left;
font-size: 1.25rem;
font-weight: 700;
font-family: 'Roboto', sans-serif;
letter-spacing: 0px;
color: #212121;
opacity: 0.76;
}
.collapse-title a:after {
content: '\f077';
font-family: "Font Awesome 5 Free" !important;
float: right;
font-size: 1rem;
font-weight: 900;
color: black;
}
.collapse-title a.collapsed:after {
content: '\f078';
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: black;
}
.collapse:not(.show) {
display: none;
}
.faq-content {
text-align: left;
font-weight: 400;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
letter-spacing: 0px;
color: #212121;
opacity: 0.8;
padding-top: 1.5rem;
}
.fa-download {
color: #212121;
opacity: 0.8;
padding-right: .5rem;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
.margin-right-6 {
margin-left: 5.8rem;
}
}
@media (min-width: 1244px) {
.container {
max-width: 1204px !important;
}
.container-small {
max-width: 900px;
}
}

15
dmp-frontend/src/assets/i18n/en.json
View File

@ -205,21 +205,24 @@
"QUICK-WIZARD": "New DMP (Wizard)", "QUICK-WIZARD": "New DMP (Wizard)",
"QUICK-WIZARD-DATASET": "Add Dataset Description (Wizard)", "QUICK-WIZARD-DATASET": "Add Dataset Description (Wizard)",
"ADD-EXPERT": "New DMP (Expert)", "ADD-EXPERT": "New DMP (Expert)",
"MY-DATASET-DESC": "My Dataset Descriptions", "MY-DATASET-DESC": "My Dataset Desc.",
"MY-GRANTS": "My Grants", "MY-GRANTS": "My Grants",
"HISTORY": "HISTORY", "HISTORY": "HISTORY",
"HISTORY-VISITED": "LAST VISITED", "HISTORY-VISITED": "LAST VISITED",
"HISTORY-EDITED": "LAST EDITED", "HISTORY-EDITED": "LAST EDITED",
"PUBLIC": "PUBLISHED", "PUBLIC": "PUBLISHED",
"PUBLIC-DMPS": "Published DMPs", "PUBLIC-DMPS": "Public DMPs",
"PUBLIC-DESC": "Published Dataset Descriptions", "PUBLIC-DESC": "Public Dataset Desc.",
"ACCOUNT": "ACCOUNT", "ACCOUNT": "ACCOUNT",
"ADMIN": "ADMIN", "ADMIN": "ADMIN",
"DATASET-TEMPLATES": "Dataset Description Templates", "DATASET-TEMPLATES": "Dataset Description Templates",
"DMP-TEMPLATES": "DMP Templates", "DMP-TEMPLATES": "DMP Templates",
"USERS": "Users", "USERS": "Users",
"LANGUAGE-EDITOR": "Language Editor", "LANGUAGE-EDITOR": "Language Editor",
"GUIDE-EDITOR": "User Guide Editor" "GUIDE-EDITOR": "User Guide Editor",
"CO-BRANDING": "Co-Branding",
"SUPPORT": "Support",
"FEEDBACK": "Send feedback"
}, },
"DATASET-PROFILE-EDITOR": { "DATASET-PROFILE-EDITOR": {
"TITLE": { "TITLE": {
@ -381,6 +384,7 @@
} }
}, },
"DMP-LISTING": { "DMP-LISTING": {
"DMP": "DMP",
"TITLE": "Data Management Plans", "TITLE": "Data Management Plans",
"OWNER": "Owner", "OWNER": "Owner",
"MEMBER": "Member", "MEMBER": "Member",
@ -1040,7 +1044,8 @@
"GUIDE": "User Guide", "GUIDE": "User Guide",
"GLOSSARY": "Glossary", "GLOSSARY": "Glossary",
"TERMS-OF-SERVICE": "Terms Of Service", "TERMS-OF-SERVICE": "Terms Of Service",
"PRIVACY-POLICY": "Privacy Policy" "PRIVACY-POLICY": "Privacy Policy",
"ABOUT": "About"
}, },
"GLOSSARY": { "GLOSSARY": {
"TITLE": "Glossary", "TITLE": "Glossary",

9
dmp-frontend/src/assets/i18n/es.json
View File

@ -219,7 +219,10 @@
"DMP-TEMPLATES": "Plantillas del PGD", "DMP-TEMPLATES": "Plantillas del PGD",
"USERS": "Usuarios", "USERS": "Usuarios",
"LANGUAGE-EDITOR":"Language Editor", "LANGUAGE-EDITOR":"Language Editor",
"GUIDE-EDITOR": "User Guide Editor" "GUIDE-EDITOR": "User Guide Editor",
"CO-BRANDING": "Marca Compartida",
"SUPPORT": "Apoyo",
"FEEDBACK": "Enviar comentarios"
}, },
"DATASET-PROFILE-EDITOR": { "DATASET-PROFILE-EDITOR": {
"TITLE": { "TITLE": {
@ -381,6 +384,7 @@
} }
}, },
"DMP-LISTING": { "DMP-LISTING": {
"DMP": "DMP",
"TITLE": "Planes de Gestión de Datos", "TITLE": "Planes de Gestión de Datos",
"OWNER": "Propietario", "OWNER": "Propietario",
"MEMBER": "Miembro", "MEMBER": "Miembro",
@ -1031,7 +1035,8 @@
"GUIDE": "User Guide", "GUIDE": "User Guide",
"GLOSSARY": "Glosario", "GLOSSARY": "Glosario",
"TERMS-OF-SERVICE": "Términos del servicio", "TERMS-OF-SERVICE": "Términos del servicio",
"PRIVACY-POLICY": "Política de privacidad" "PRIVACY-POLICY": "Política de privacidad",
"ABOUT": "Acerca de"
}, },
"GLOSSARY": { "GLOSSARY": {
"TITLE": "Glosario", "TITLE": "Glosario",

9
dmp-frontend/src/assets/i18n/gr.json
View File

@ -219,7 +219,10 @@
"DMP-TEMPLATES": "Templates Σχεδίων Διαχείρισης Δεδομένων", "DMP-TEMPLATES": "Templates Σχεδίων Διαχείρισης Δεδομένων",
"USERS": "Users", "USERS": "Users",
"LANGUAGE-EDITOR": "Επεξεργαστής Γλώσσας", "LANGUAGE-EDITOR": "Επεξεργαστής Γλώσσας",
"GUIDE-EDITOR": "Οδηγός Χρήστη" "GUIDE-EDITOR": "Οδηγός Χρήστη",
"CO-BRANDING": "Co-Branding",
"SUPPORT": "Υποστήριξη",
"FEEDBACK": "Στείλετε τα σχόλιά σας"
}, },
"DATASET-PROFILE-EDITOR": { "DATASET-PROFILE-EDITOR": {
"TITLE": { "TITLE": {
@ -381,6 +384,7 @@
} }
}, },
"DMP-LISTING": { "DMP-LISTING": {
"DMP": "DMP",
"TITLE": "Σχέδια Διαχείρισης Δεδομένων", "TITLE": "Σχέδια Διαχείρισης Δεδομένων",
"OWNER": "Κάτοχος", "OWNER": "Κάτοχος",
"MEMBER": "Μέλος", "MEMBER": "Μέλος",
@ -1018,7 +1022,8 @@
"GUIDE": "Οδηγός Χρήστη", "GUIDE": "Οδηγός Χρήστη",
"GLOSSARY": "Γλωσσάριο", "GLOSSARY": "Γλωσσάριο",
"TERMS-OF-SERVICE": "Όροι Χρήσης", "TERMS-OF-SERVICE": "Όροι Χρήσης",
"PRIVACY-POLICY": "Πολιτική Απορρήτου" "PRIVACY-POLICY": "Πολιτική Απορρήτου",
"ABOUT": "Σχετικά με το Argos"
}, },
"GLOSSARY": { "GLOSSARY": {
"TITLE": "Γλωσσάριο", "TITLE": "Γλωσσάριο",

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (2)@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (4).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (4)@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (5).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (5)@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (6).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (6)@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (7).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy (7)@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
dmp-frontend/src/assets/images/argos-login/NoPath - Copy@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

9
dmp-frontend/src/assets/scss/core/_responsive.scss
View File

@ -412,7 +412,8 @@
box-shadow: none; box-shadow: none;
.sidebar-wrapper{ .sidebar-wrapper{
// padding-bottom: 60px; // padding-bottom: 60px;
top: 80px;
} }
.nav-mobile-menu{ .nav-mobile-menu{
@ -821,9 +822,9 @@
display: none; display: none;
} }
} }
.navbar { // .navbar {
width: calc(100% - 260px); // width: calc(100% - 260px);
} // }
} }
.nav-mobile-menu, .nav-mobile-menu,

10
dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
View File

@ -51,7 +51,8 @@
z-index: 4; z-index: 4;
// padding-bottom: 10px; // padding-bottom: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
top: 80px;
.dropdown .dropdown-backdrop { .dropdown .dropdown-backdrop {
display: none !important; display: none !important;
@ -421,6 +422,10 @@
-webkit-transition-timing-function: linear, linear, ease; -webkit-transition-timing-function: linear, linear, ease;
transition-timing-function: linear, linear, ease; transition-timing-function: linear, linear, ease;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
height: 100%;
display: flex;
flex-direction: column;
} }
.visible-on-sidebar-regular { .visible-on-sidebar-regular {
@ -441,7 +446,8 @@
.sidebar, .sidebar,
.sidebar .sidebar-wrapper { .sidebar .sidebar-wrapper {
width: 80px; width: 80px;
top: 80px;
} }
.main-panel { .main-panel {

63
dmp-frontend/src/common/modules/sign-in-dialog/sign-in-dialog.component.html Normal file
View File

@ -0,0 +1,63 @@
<div class="d-flex justify-content-center">
<img src="../../../assets/splash/assets/img/argos-logo.svg" width="135" height="51">
</div>
<span class="row justify-content-center">Login with</span>
<div class="login-card">
<div *ngIf="hasGoogleOauth()" class="row social-btns">
<div class="col-auto p-0">
<button mat-icon-button id="googleSignInButton" class="login-social-button">
<i class="fa fa-google" (click)="close()"></i>
</button>
<!-- <div id="googleSignInButton">
<img src="../../../assets/images/argos-login/NoPath - Copy (2).png" width="47" height="47">
</div> -->
</div>
<div *ngIf="hasLinkedInOauth()" class="col-auto p-0">
<button mat-icon-button class="login-social-button">
<i class="fa fa-linkedin" (click)="linkedInLogin(); close()"></i>
</button>
</div>
<div *ngIf="hasFacebookOauth()" class="col-auto p-0">
<button mat-icon-button (click)="facebookLogin(); close()" class="login-social-button">
<i class="fa fa-facebook-square"></i>
</button>
</div>
<div *ngIf="hasTwitterOauth()" class="col-auto p-0">
<button mat-icon-button (click)="twitterLogin(); close()" class="login-social-button">
<i class="fa fa-twitter"></i>
</button>
</div>
</div>
<div class="w-100"></div>
<div class="row pt-2 mb-4 accesss-methods">
<div *ngIf="hasB2AccessOauth()" class="col-auto logo">
<button class="b2access-button" mat-icon-button (click)="b2AccessLogin(); close()" class="login-social-button">
<span class="iconmedium"></span>
</button>
</div>
<div *ngIf="hasOrcidOauth()" class="col-auto orcid-logo">
<button class="orcid-button" mat-icon-button (click)="orcidLogin(); close()" class="login-social-button">
<span class="orcidIconMedium"></span>
</button>
</div>
<div *ngIf="hasOpenAireOauth()" class="col-auto openaire-logo">
<button class="openaire-button" mat-icon-button (click)="openaireLogin(); close()" class="login-social-button">
<span class="openaireIcon"></span>
</button>
</div>
</div>
<div *ngIf="hasConfigurableProviders()" class="row pt-2 mb-4 accesss-methods">
<div *ngFor="let provider of this.configurableProviderService.providers" class="col-auto configurable-logo">
<button mat-icon-button class="configurable-button" (click)="configurableLogin(provider)"
class="login-social-button">
<span class="configurableIcon">{{provider.name}}</span>
</button>
</div>
</div>
<div *ngIf="hasZenodoOauth()" class="col-auto zenodo-logo">
<button class="zenodo-button" mat-icon-button (click)="zenodoLogin(); close()" class="login-social-button">
<span class="zenodoIcon"></span>
</button>
</div>
</div>

331
dmp-frontend/src/common/modules/sign-in-dialog/sign-in-dialog.component.scss Normal file
View File

@ -0,0 +1,331 @@
.login-screen {
margin-top: 70px;
min-height: calc(100vh - 10px);
}
.login-card {
width: auto;
margin-top: 0;
}
.container {
padding: 15px 30px;
}
.card {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 6px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
}
.card-raised {
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.page-title {
margin-top: 40px;
}
.container {
height: 100%;
position: relative;
z-index: 1;
}
@-webkit-keyframes card {
from {
top: -40px;
}
to {
top: 0;
}
}
@keyframes card {
from {
top: -40px;
}
to {
top: 0;
}
}
.card {
position: relative;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
top: -50px;
-webkit-animation-name: card;
-moz-animation-name: card;
-o-animation-name: card;
animation-name: card;
-webkit-animation-duration: 600ms;
-moz-animation-duration: 600ms;
-o-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.card-header {
position: relative;
overflow: hidden;
top: -50px;
width: 100%;
min-height: 200px;
padding: 25px;
border-radius: 3px;
background: #0c7489;
// background: rgb(0, 112, 192);
display: flex;
flex-direction: column;
align-items: center;
}
.card-header h4 {
font-weight: 400;
color: #fff;
margin-bottom: 25px;
margin-top: 5px;
}
.social-btns {
justify-content: center;
}
.social-btns i {
font-size: 2.5em;
padding: 0.7em;
color: #767676;
}
.social-btns .col {
flex-grow: 0;
}
.social-btns i:hover {
background-color: #f5f5f51c;
border-radius: 60%;
}
.accesss-methods {
height: 5em;
justify-content: center;
}
.accesss-methods .col-auto:hover {
background-color: #f5f5f51c;
border-radius: 100%;
}
.accesss-methods .logo {
flex-grow: 0;
padding-top: 21px;
padding-bottom: 21px;
}
.accesss-methods .openaire-logo {
flex-grow: 0;
padding-top: 21px;
padding-bottom: 21px;
margin-top: 5px;
height: 90px;
}
.accesss-methods .orcid-logo {
height: 75px;
padding-top: 8px;
margin-top: 13px;
}
.accesss-methods .configurable-logo {
flex-grow: 0;
padding-top: 21px;
padding-bottom: 21px;
margin-top: 5px;
height: 90px;
}
.accesss-methods .zenodo-logo {
height: 75px;
padding-top: 8px;
margin-top: 13px;
}
.tip {
margin-top: -20px;
}
.form-row,
.card-form,
.mat-form-field {
width: 100%;
}
.card-form {
padding: 5px;
}
.form-row {
position: relative;
display: flex;
align-items: center;
margin-top: 13px;
}
.form-row i {
position: relative;
top: -5px;
margin-right: 15px;
color: #555;
}
.card-footer {
padding: 0;
border-radius: 0;
align-items: start;
flex-direction: column;
}
.card-footer button {
color: #e91e63;
}
.btn span.icon {
background: url(../../../app/ui/auth/login/img/b2access_small.png) no-repeat;
float: left;
width: 45px;
height: 25px;
}
span.iconmedium {
background: url(../../../app/ui/auth/login/img/b2access_medium.png) no-repeat;
float: left;
width: 100px;
height: 56px;
}
span.orcidIconMedium {
background: url(../../../app/ui/auth/login/img/ORCIDiD_medium.png) no-repeat;
background-position: center;
float: right;
width: 56px;
height: 56px;
}
span.openaireIcon {
background: url(../../../app/ui/auth/login/img/openaire_small.png) no-repeat;
background-position: center;
float: right;
width: 80px;
height: 56px;
}
span.configurableIcon {
float: right;
width: 80px;
height: 56px;
}
span.zenodoIcon {
background: url(../../../app/ui/auth/login/img/zenodo-white-200.png) no-repeat 100px 56px;
background-position: center;
float: right;
width: 150px;
height: 56px;
}
.b2access-button {
margin-top: 10px;
width: fit-content;
}
.orcid-button {
margin-top: 10px;
width: fit-content;
}
.openaire-button {
margin-top: 10px;
width: fit-content;
}
.configurable-button {
margin-top: 10px;
width: fit-content;
}
.zenodo-button {
margin-top: 10px;
width: fit-content;
}
.login-logo {
background: url(../../../app/ui/auth/login/img/open-dmp.png) no-repeat;
width: 273px;
height: 300px;
background-size: cover;
}
.login-bg {
background: url(../../../app/ui/auth/login/img/login_bg.png) no-repeat;
background-size: cover;
}
.login-social-button {
width: auto;
height: auto;
color: rgba(0, 0, 0, 0.14);
}
.login-sub {
color: #B8B8B8;
}
@media (min-width: 1200px) {
.container {
width: 100%;
}
}
@media (min-width: 992px) {
.container {
width: 100%;
}
}
@media (min-width: 768px) {
.container {
width: 100%;
}
}
@media (min-width: 401px) and (max-width: 560px) {
.social-btns i {
padding: 0.4em !important;
}
.accesss-methods {
padding-top: 1em;
}
}
@media (min-width: 0px) and (max-width: 400px) {
.social-btns i {
padding: 0.4em !important;
}
.card-header {
height: 350px !important;
}
.accesss-methods {
padding-top: 1em;
}
}

224
dmp-frontend/src/common/modules/sign-in-dialog/sign-in-dialog.component.ts Normal file
View File

@ -0,0 +1,224 @@
import { Component, Inject, AfterViewInit, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { ConfigurableProvidersService } from '@app/ui/auth/login/utilities/configurableProviders.service';
import { LoginService } from '@app/ui/auth/login/utilities/login.service';
import { AuthService } from '@app/core/services/auth/auth.service';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { BaseComponent } from '@common/base/base.component';
import { AuthProvider } from '@app/core/common/enum/auth-provider';
import { ConfigurableProvider } from '@app/core/model/configurable-provider/configurableProvider';
import { takeUntil } from 'rxjs/operators';
/// <reference types="gapi" />
/// <reference types="facebook-js-sdk" />
declare const gapi: any;
declare const FB: any;
@Component({
selector: 'app-sign-in-dialog',
templateUrl: './sign-in-dialog.component.html',
styleUrls: ['./sign-in-dialog.component.scss']
})
export class SignInDialogComponent extends BaseComponent implements OnInit, AfterViewInit {
agreePrivacyPolicyNames = false;
public auth2: any;
private returnUrl: string;
//public cofigurableProviders: ConfigurableProvider[];
constructor(
public dialogRef: MatDialogRef<SignInDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private router: Router,
private route: ActivatedRoute,
private loginService: LoginService,
private authService: AuthService,
public configurableProviderService: ConfigurableProvidersService,
private configurationService: ConfigurationService
) {
super();
}
close() {
this.dialogRef.close(false);
}
// cancel() {
// this.dialogRef.close(false);
// }
// confirm() {
// this.dialogRef.close(true);
// }
ngOnInit(): void {
this.route.queryParams
.pipe(takeUntil(this._destroyed))
.subscribe((params: Params) => {
const returnUrl = params['returnUrl'];
if (returnUrl) { this.returnUrl = returnUrl; }
});
this.authService.getConfigurableProviders()
.pipe(takeUntil(this._destroyed))
.subscribe((data: any) => {
this.configurableProviderService.providers = data;
})
}
ngAfterViewInit() {
this.initProviders();
}
public linkedInLogin() {
this.router.navigate(['/login/linkedin']);
}
public twitterLogin() {
this.router.navigate(['/login/twitter']);
}
public b2AccessLogin() {
this.router.navigate(['/login/external/b2access']);
}
public orcidLogin() {
this.router.navigate(['/login/external/orcid']);
}
public openaireLogin() {
this.router.navigate(['/login/openaire']);
}
public configurableLogin(provider: ConfigurableProvider) {
this.router.navigate(['/login/configurable/' + provider.configurableLoginId])
}
public zenodoLogin() {
this.router.navigate(['/login/external/zenodo']);
}
public hasFacebookOauth(): boolean {
return this.hasProvider(AuthProvider.Facebook);
}
public hasLinkedInOauth(): boolean {
return this.hasProvider(AuthProvider.LinkedIn);
}
public hasTwitterOauth(): boolean {
return this.hasProvider(AuthProvider.Twitter);
}
public hasGoogleOauth(): boolean {
return this.hasProvider(AuthProvider.Google);
}
public hasB2AccessOauth(): boolean {
return this.hasProvider(AuthProvider.B2Access);
}
public hasOrcidOauth(): boolean {
return this.hasProvider(AuthProvider.ORCID);
}
public hasOpenAireOauth(): boolean {
return this.hasProvider(AuthProvider.OpenAire);
}
public hasZenodoOauth(): boolean {
return this.hasProvider(AuthProvider.Zenodo);
}
public initProviders() {
if (this.hasProvider(AuthProvider.Google)) { this.initializeGoogleOauth(); }
if (this.hasProvider(AuthProvider.Facebook)) { this.initializeFacebookOauth(); }
}
public hasProvider(provider: AuthProvider) {
for (let i = 0; i < this.configurationService.loginProviders.enabled.length; i++) {
if (provider === this.configurationService.loginProviders.enabled[i]) { return this.isProviderProperlyConfigured(provider); }
}
return false;
}
private isProviderProperlyConfigured(provider: AuthProvider) {
switch (provider) {
case AuthProvider.Facebook: return this.hasAllRequiredFieldsConfigured(this.configurationService.loginProviders.facebookConfiguration);
case AuthProvider.Google: return this.hasAllRequiredFieldsConfigured(this.configurationService.loginProviders.googleConfiguration);
case AuthProvider.LinkedIn: return this.hasAllRequiredFieldsConfigured(this.configurationService.loginProviders.linkedInConfiguration);
case AuthProvider.Twitter: return this.hasAllRequiredFieldsConfigured(this.configurationService.loginProviders.twitterConfiguration);
case AuthProvider.B2Access: return this.hasAllRequiredFieldsConfigured(this.configurationService.loginProviders.b2accessConfiguration);
case AuthProvider.ORCID: return this.hasAllRequiredFieldsConfigured(this.configurationService.loginProviders.orcidConfiguration);
case AuthProvider.OpenAire: return this.hasAllRequiredFieldsConfigured(this.configurationService.loginProviders.openAireConfiguration);
case AuthProvider.Zenodo: return this.hasAllRequiredFieldsConfigured(this.configurationService.loginProviders.zenodoConfiguration);
default: throw new Error('Unsupported Provider Type');
}
}
private hasAllRequiredFieldsConfigured(configuration: any) {
if (configuration != null && configuration.clientId != null) { return true; }
return false;
}
/*
* GOOGLE SIGN IN
*/
private initializeGoogleOauth(): void {
gapi.load('auth2', () => {
this.auth2 = gapi.auth2.init({
client_id: this.configurationService.loginProviders.googleConfiguration.clientId,
scope: 'profile email'
});
this.attachGoogleSignΙn(document.getElementById('googleSignInButton'));
});
}
public attachGoogleSignΙn(element) {
if (!element) { return; }
this.auth2.attachClickHandler(element, {},
(googleUser) => {
const id_token = googleUser.getAuthResponse().id_token;
if (id_token) {
this.authService.login({ ticket: id_token, provider: AuthProvider.Google })
.pipe(takeUntil(this._destroyed))
.subscribe(
res => this.loginService.onLogInSuccess(res, this.returnUrl),
error => this.loginService.onLogInError(error)
);
}
}, (error) => {
});
}
/*
* FACEBOOK SIGN IN
*/
private initializeFacebookOauth(): void {
FB.init({
appId: this.configurationService.loginProviders.facebookConfiguration.clientId,
cookie: false,
xfbml: true,
version: 'v2.8'
});
}
public facebookLogin() {
FB.login((response: any) => {
if (response.status === 'connected' || 'not_authorized') {
this.authService.login({ ticket: response.authResponse.accessToken, provider: AuthProvider.Facebook })
.pipe(takeUntil(this._destroyed))
.subscribe(
res => this.loginService.onLogInSuccess(res, this.returnUrl),
error => this.loginService.onLogInError(error)
);
}
}, { scope: 'email' });
}
public hasConfigurableProviders(): boolean {
return !(this.configurableProviderService.providers == undefined) && this.configurableProviderService.providers.length > 0
}
}

14
dmp-frontend/src/common/modules/sign-in-dialog/sign-in-dialog.module.ts Normal file
View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { SignInDialogComponent } from './sign-in-dialog.component';
@NgModule({
imports: [CommonUiModule, FormsModule],
declarations: [SignInDialogComponent],
exports: [SignInDialogComponent],
entryComponents: [SignInDialogComponent]
})
export class SignInDialogModule {
constructor() { }
}

225
dmp-frontend/src/styles.scss
View File

@ -18,144 +18,155 @@
// @include covalent-theme($theme); // @include covalent-theme($theme);
.snackbar-warning { .snackbar-warning {
background-color: #f39010; background-color: #f39010;
color: #f3efef; color: #f3efef;
} }
.snackbar-success { .snackbar-success {
background-color: #109204; background-color: #109204;
color: #f3efef; color: #f3efef;
} }
.snackbar-error { .snackbar-error {
background-color: #cf1407; background-color: #cf1407;
color: #111010; color: #111010;
} }
.lightblue-btn { .lightblue-btn {
background-color: rgb(0, 178, 159) !important; background-color: rgb(0, 178, 159) !important;
color: white !important; color: white !important;
// background-color: rgba(0, 112, 192, 1) !important; // background-color: rgba(0, 112, 192, 1) !important;
} }
.listing-item { .listing-item {
margin-top: 0.5em; margin-top: 0.5em;
padding: 0.5em; padding: 0.5em;
cursor: pointer; cursor: pointer;
border: 3px solid #f2f2f2; border: 3px solid #f2f2f2;
.title { .title {
color: black; color: black;
} }
.grant-title { .grant-title {
color: rgb(93, 125, 173); color: rgb(93, 125, 173);
} }
.gray-icon { .gray-icon {
color: rgb(191, 191, 191); color: rgb(191, 191, 191);
} }
.chip { .chip {
padding: 0.1em 1em; padding: 0.1em 1em;
border-radius: 10em; border-radius: 10em;
background-color: #0d7489; background-color: #0d7489;
// background-color: rgba(0, 112, 192, 1); // background-color: rgba(0, 112, 192, 1);
color: #fff; color: #fff;
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
max-width: 160px; max-width: 160px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.bordered-chip { .bordered-chip {
padding: 0.1em 1em; padding: 0.1em 1em;
border: 0.1em solid rgb(218, 227, 243); border: 0.1em solid rgb(218, 227, 243);
border-radius: 10em; border-radius: 10em;
background-color: rgb(236, 241, 249); background-color: rgb(236, 241, 249);
color: rgb(0, 178, 159); color: rgb(0, 178, 159);
// color: rgba(0, 112, 192, 1); // color: rgba(0, 112, 192, 1);
// color: rgb(68, 114, 196); // color: rgb(68, 114, 196);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
max-width: 160px; max-width: 160px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.squared-chip { .squared-chip {
padding: 0.1em 1em; padding: 0.1em 1em;
border: 0.1em solid rgb(236, 241, 249); border: 0.1em solid rgb(236, 241, 249);
border-radius: 0.5em; border-radius: 0.5em;
background-color: rgb(246, 246, 246); background-color: rgb(246, 246, 246);
color: rgb(127, 127, 127); color: rgb(127, 127, 127);
max-width: 160px; max-width: 160px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
mat-icon { mat-icon {
width: auto; width: auto;
height: auto; height: auto;
} }
.mr-5 { .mr-5 {
margin-right: 2rem !important; margin-right: 2rem !important;
} }
.info { .info {
background-color: #f6f6f6; background-color: #f6f6f6;
padding: 8px 15px; padding: 8px 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.info p { .info p {
margin-bottom: 0px; margin-bottom: 0px;
color: rgb(37, 35, 140); color: rgb(37, 35, 140);
font-weight: 600; font-weight: 600;
} }
.chip p { .chip p {
margin-bottom: 0px; margin-bottom: 0px;
} }
// .draft-bookmark { // .draft-bookmark {
// color: #e7e6e6; // color: #e7e6e6;
// display: inline; // display: inline;
// position: absolute; // position: absolute;
// padding-top: 3px; // padding-top: 3px;
// } // }
// .finalized-bookmark { // .finalized-bookmark {
// color: #08bd63; // color: #08bd63;
// // color: #92d050; // // color: #92d050;
// display: inline; // display: inline;
// position: absolute; // position: absolute;
// padding-top: 3px; // padding-top: 3px;
// } // }
h4 span { h4 span {
color: #089dbb; color: #089dbb;
font-weight: 600; font-weight: 600;
} }
} }
.listing { .listing {
.mat-card { .mat-card {
margin: 1em 0; margin: 1em 0;
} }
.col-9 { .col-9 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
.gray-container { .gray-container {
background: linear-gradient(180deg, #f6f6f6, #fff); background: linear-gradient(180deg, #f6f6f6, #fff);
margin: 5px 0px; margin: 5px 0px;
}
.main-content {
background-color: #f5f5f5;
padding-top: 3.68rem;
padding-bottom: 10rem;
// padding-left: 3.31rem;
padding-left: 1rem;
margin: 0;
display: flex;
flex-grow: 1;
} }