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

dmp overview_re-design_update

This commit is contained in:
gpapavgeri 2020-06-30 18:33:01 +03:00
parent 235096a982
commit ee61bf4ffb
6 changed files with 300 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
View File

@ -1,28 +1,44 @@
<div class="main-content pl-5 pr-5"> <div class="main-content pl-5 pr-5">
<div class="container-fluid ml-5 mr-5"> <div class="container-fluid pl-0 pr-0">
<div *ngIf="dmp"> <div *ngIf="dmp">
<div class="row mb-2"> <a class="row mb-2" (click)="goBack()" role="button">
<mat-icon class="chevron-icon">chevron_left</mat-icon> <mat-icon class="back-icon">chevron_left</mat-icon>
<p class="label-text">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p> <p class="label-txt">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p>
</div> </a>
<div class="row"> <div class="row">
<div class="col-md-8 col-lg-8"> <div class="col-md-8 col-lg-8">
<div class="row"> <div class="row">
<a mat-raised-button primary class="dmp-btn"> <button mat-raised-button primary class="dmp-btn">
<span class="dmp-btn-text">{{ 'DATASET-LISTING.COLUMNS.DMP' | translate }}</span> <span class="dmp-btn-label">{{ 'DATASET-LISTING.COLUMNS.DMP' | translate }}</span>
</a> </button>
<p class="dmp-label ml-2 mb-0">{{ dmp.label }}</p> <p class="dmp-label ml-2 mb-0">{{ dmp.label }}</p>
</div> </div>
<div class="row d-flex align-items-center mt-3 mb-4 label-text"> <div class="row d-flex align-items-center mt-3 mb-4 label-txt">
<div *ngIf="isUserDMPRelated()" class="d-flex"> <div *ngIf="isUserDMPRelated()" class="d-flex">
<p class="ml-0 mr-3 mb-0 label-text" <p class="ml-0 mr-3 mb-0 label2-txt">
matTooltip="{{'DMP-OVERVIEW.TOOLTIP.LEVEL-OF-ACCESS' | translate}}"
matTooltipPosition="above">
{{ roleDisplayFromList(dmp.users) }}</p> {{ roleDisplayFromList(dmp.users) }}</p>
</div> </div>
<div class="d-flex mr-4">Public: {{ dmp.isPublic}}</div> <div class="d-flex mr-4">
<div class="d-flex mr-4">Locked: {{ dmp.status}}</div> <div *ngIf="dmp.isPublic" class="d-flex flex-row">
<button class="d-flex mr-4 version-btn label-text"> <mat-icon class="status-icon">public</mat-icon>
{{'DMP-OVERVIEW.PUBLIC' | translate}}
</div>
<div *ngIf="!dmp.isPublic" class="d-flex flex-row">
<mat-icon class="status-icon">public_off</mat-icon>
{{'DMP-OVERVIEW.PRIVATE' | translate}}
</div>
</div>
<div class="d-flex mr-4">
<div *ngIf="dmp.status" class="d-flex flex-row">
<mat-icon class="status-icon">lock_outline</mat-icon>
{{'DMP-OVERVIEW.LOCKED' | translate}}
</div>
<div *ngIf="!dmp.status" class="d-flex flex-row">
<mat-icon class="status-icon">lock_open</mat-icon>
{{'DMP-OVERVIEW.UNLOCKED' | translate}}
</div>
</div>
<button class="d-flex mr-4 version-btn label2-txt">
{{'DMP-LISTING.COLUMNS.VERSION' | translate}} {{'DMP-LISTING.COLUMNS.VERSION' | translate}}
<mat-select> <mat-select>
<mat-option *ngFor="let version of dmp.version" [value]="version"> <mat-option *ngFor="let version of dmp.version" [value]="version">
@ -31,47 +47,54 @@
</mat-select> </mat-select>
</button> </button>
<div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} : <div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} :
{{dmp.modifiedTime | date:"longDate"}}</div> {{dmp.modifiedTime | date:"longDate"}}
</div>
<div class="d-flex mr-4">
<div *ngIf="dmp.status" class="d-flex flex-row finalized">
<mat-icon class="status-icon">check</mat-icon>
{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}}
</div>
</div>
</div> </div>
<div class="row"> <div class="row">
<button *ngIf="isAuthenticated()" (click)="cloneClicked(dmp)" mat-mini-fab <button *ngIf="isAuthenticated()" (click)="cloneClicked(dmp)" mat-mini-fab
class="mr-3 d-flex justify-content-center align-items-center" class="mr-3 d-flex justify-content-center align-items-center"
matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above"> matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-icon-1">content_copy</mat-icon> <mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button> </button>
<button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="editClicked(dmp)" mat-mini-fab <button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="editClicked(dmp)" mat-mini-fab
class="mr-3 d-flex justify-content-center align-items-center" class="mr-3 d-flex justify-content-center align-items-center"
matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-icon-1">create</mat-icon> <mat-icon class="mat-mini-fab-icon">create</mat-icon>
</button> </button>
<button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="deleteClicked()" mat-mini-fab <button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="deleteClicked()" mat-mini-fab
class="mr-3 d-flex justify-content-center align-items-center" class="mr-3 d-flex justify-content-center align-items-center"
matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above"> matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-icon-1">delete</mat-icon> <mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button> </button>
<button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="finalize(dmp)" mat-mini-fab <button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="finalize(dmp)" mat-mini-fab
class="mr-3 d-flex justify-content-center align-items-center" class="mr-3 d-flex justify-content-center align-items-center"
matTooltip="{{'DMP-LISTING.ACTIONS.FINALIZE' | translate}}" matTooltipPosition="above"> matTooltip="{{'DMP-LISTING.ACTIONS.FINALIZE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-icon-1">lock_outline</mat-icon> <mat-icon class="mat-mini-fab-icon">lock_outline</mat-icon>
</button> </button>
</div> </div>
<div class="row title">{{'DMP-OVERVIEW.GRANT' | translate}}</div> <div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
<div class="row dmp-label">{{ dmp.grant.label }}</div> <div class="row dmp-label">{{ dmp.grant.label }}</div>
<div class="row title">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div> <div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
<div class="row"> <div class="row">
<div *ngFor="let researcher of dmp.researchers" class="d-flex flex-row align-items-center"> <div *ngFor="let researcher of dmp.researchers" class="d-flex flex-row align-items-center">
<div class="id-btn">&nbsp;</div> <div class="id-btn">&nbsp;</div>
<div class="avatar">{{ researcher.name }},</div> <div class="researcher">{{ researcher.name }}</div>
</div> </div>
</div> </div>
<div class="row title">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div> <div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row desc-text" *ngIf="dmp.grant.description"> <div class="row" *ngIf="dmp.description">
<p>{{ dmp.grant.description }}</p> <p class="desc-txt">{{ dmp.description }}</p>
</div> </div>
<div class="row title">{{'DMP-OVERVIEW.DATASETS-USED' | translate}}</div> <div class="row header">{{'DMP-OVERVIEW.DATASETS-USED' | translate}}</div>
<div class="row"> <div class="row d-flex flex-column">
<div *ngFor="let dataset of dmp.datasets; let i=index"> <div *ngFor="let dataset of dmp.datasets; let i=index">
<div *ngIf="i < 9" (click)="datasetClicked(dataset.id)"> <div *ngIf="i < 3" (click)="datasetClicked(dataset.id)">
<!-- <mat-icon *ngIf="isDraftDataset(dataset)" class="draft-bookmark">bookmark</mat-icon> <!-- <mat-icon *ngIf="isDraftDataset(dataset)" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!isDraftDataset(dataset)" class="finalized-bookmark">bookmark</mat-icon> <mat-icon *ngIf="!isDraftDataset(dataset)" class="finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="isDraftDataset(dataset)"> <h4 *ngIf="isDraftDataset(dataset)">
@ -88,65 +111,73 @@
</button> </button>
</div> </div>
</div> </div>
<div *ngIf="dmp.datasets.length > 3" class="show-more-btn">
<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more-txt">
<mat-icon class="mr-2">expand_more</mat-icon>
{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
</button>
</div>
</div> </div>
<div *ngIf="dmp.datasets.length > 9" class="d-flex justify-content-center"> <div class="row mt-2 add-dataset-txt">
<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more"> <button class="add-dataset-btn" *ngIf="isDraftDmp(dmp) && isUserOwner"
<mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
</button>
</div>
<div class="row mt-2 d-flex align-items-center">
<button class="add-dataset d-flex align-items-center" *ngIf="isDraftDmp(dmp) && isUserOwner"
(click)="addDataset(dmp.id)"> (click)="addDataset(dmp.id)">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
</button> </button>
<span class="add-dataset">{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</span>
</div> </div>
</div> </div>
<div class="col-md-4 col-lg-4"> <div class="col-md-4 col-lg-4 p-0">
<div class="row d-flex flex-column m-1"> <div class="row d-flex flex-column ml-0 mr-0 mb-3">
<p class="doi-label">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}</p> <p class="doi-label">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}</p>
<div class="doi-panel"> <div class="doi-panel">
<p class="doi-text mb-0 ml-2">{{ dmp.modifiedTime }}</p> <p *ngIf="!hasDoi(dmp)" class="mb-0 ml-2">
<a [href]="createDoiLink(dmp.doi)" class="doi-txt">{{ dmp.doi }}</a></p>
<p *ngIf="hasDoi(dmp)" class="mb-0 ml-2">&nbsp;</p>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<button *ngIf="isAuthenticated()" (click)="cloneClicked(dmp)" mat-mini-fab <button *ngIf="isAuthenticated()" (click)="cloneClicked(dmp)" mat-mini-fab
class="mr-2 d-flex justify-content-center align-items-center" class="mr-2 d-flex justify-content-center align-items-center"
matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above"> matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon> <mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button> </button>
<button mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" <button *ngIf="!hasDoi(dmp)" mat-mini-fab
matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> class="mr-2 d-flex justify-content-center align-items-center"
<mat-icon class="mat-mini-fab-icon">launch</mat-icon> matTooltip="{{'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate}}"
matTooltipPosition="above">
<a [href]="createDoiLink(dmp.doi)" class="doi-link" target="_blank">
<mat-icon class="mat-mini-fab-icon">launch</mat-icon>
</a>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="frame m-1"> <div class="frame mb-3">
<div class="row ml-2 pl-4 pt-4 pb-3 d-flex align-items-center"> <div class="row ml-0 mr-0 pl-4 pt-4 mb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">archive</mat-icon> <mat-icon class="mat-mini-fab-icon">archive</mat-icon>
</button> </button>
<p class="mb-0 pl-2 actions-text">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p> <p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p>
</div> </div>
<div class="row ml-2 pl-4 pb-3 d-flex align-items-center"> <div class="row ml-0 mr-0 pl-4 mb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu"> <button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon> <mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
</button> </button>
<p class="mb-0 pl-2 actions-text" [matMenuTriggerFor]="exportMenu"> <p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}</p> {{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}</p>
</div> </div>
<div class="row ml-2 pl-4 pb-3 d-flex align-items-center" *ngIf="isUserOwner" <div class="row ml-0 mr-0 pl-4 mb-3 d-flex align-items-center" *ngIf="isUserOwner"
(click)="newVersion(dmp.id, dmp.label)"> (click)="newVersion(dmp.id, dmp.label)">
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon> <mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
</button> </button>
<p class="mb-0 pl-2 actions-text">{{ 'DMP-LISTING.ACTIONS.START-NEW-VERSION' | translate }} <p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.START-NEW-VERSION' | translate }}
</p> </p>
</div> </div>
<div class="row ml-2 pl-4 pb-3 d-flex align-items-center"> <div *ngIf="!dmp.isPublic && showPublishButton(dmp) && isUserOwner"
class="row ml-0 mr-0 pl-4 mb-3 d-flex align-items-center" (click)="publish(dmp.id)">
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">public</mat-icon> <mat-icon class="mat-mini-fab-icon">public</mat-icon>
</button> </button>
<p class="mb-0 pl-2 actions-text">{{ 'DMP-LISTING.ACTIONS.MAKE-PUBLIC' | translate }}</p> <p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.MAKE-PUBLIC' | translate }}</p>
</div> </div>
<mat-menu #exportMenu="matMenu" xPosition="before"> <mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(dmp.id)"> <button mat-menu-item (click)="downloadPDF(dmp.id)">
@ -167,25 +198,24 @@
</button> </button>
</mat-menu> </mat-menu>
</div> </div>
<div class="frame m-1"> <div class="frame mb-3">
<div class="row ml-2 pl-4 pt-4 pb-3"> <div class="row ml-0 mr-0 pl-4 pt-4 mb-3">
<p class="title">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p> <p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
</div> </div>
<div class="row ml-0 mr-0 pl-3 mb-3 d-flex align-items-center" *ngIf="!isPublicView">
<div class="row ml-2 pl-4 pb-3 d-flex align-items-center" *ngIf="!isPublicView"> <button class="account_btn mr-4 pl-0">
<button class="account_circle mr-3 pl-0"> <mat-icon class="account-icon">account_circle</mat-icon>
<mat-icon class="mat-icon-2">account_circle</mat-icon>
</button> </button>
<div class="row"> <div class="row">
<div *ngFor="let user of dmp.users"> <div *ngFor="let user of dmp.users">
<p class="mb-0 pl-2 actions-text">{{ user.name }}</p> <p class="mb-0 pl-2 authors-label">{{ user.name }}</p>
<p class="mb-0 pl-2 actions-text">{{ roleDisplay(user) }}</p> <p class="mb-0 pl-2 authors-role">{{ roleDisplay(user) }}</p>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="isUserOwner" (click)="openShareDialog(dmp.id,dmp.label)" <div *ngIf="isUserOwner" (click)="openShareDialog(dmp.id,dmp.label)"
class="row ml-2 pl-4 pb-3 d-flex align-items-center"> class="row mt-4 mb-3 d-flex align-items-center justify-content-center">
<button mat-raised-button class="frame-button invite-button"> <button mat-raised-button class="invite-btn">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}} {{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}
</button> </button>

316
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
View File

@ -1,158 +1,73 @@
.container-fluid { .container-fluid {
padding: 30px; margin: 2em 4em;
padding: 2em;
} }
.chevron-icon { // ********ICONS********
height: 12px;
.back-icon {
opacity: 0.4; opacity: 0.4;
} }
.label-text { .mat-mini-fab {
font-size: 14px; width: 2.5em;
color: #848484; height: 2.5em;
background-color: #129D99;
} }
.mat-mini-fab-icon, .status-icon {
font-size: 1.2em;
}
.status-icon {
color: #A7A7A7;
}
.account-icon {
font-size: 2.5em;
}
// ********BUTTONS********
.dmp-btn { .dmp-btn {
width: 4.8em;
height: 2.6em;
background: #129D99; background: #129D99;
border-radius: 4px; border-radius: 4px;
} }
.dmp-btn-text {
width: 30px;
font-size: 14px;
color: #FFFFFF;
opacity: 0.8;
}
.dmp-label {
font-size: 20px;
font-weight: bold;
color: #212121;
display: flex;
align-items: center;
}
.version-btn { .version-btn {
width: 94px; width: 6.7em;
height: 25px; height: 1.8em;
border: 1px solid #707070; border: 1px solid #707070;
border-radius: 4px; border-radius: 4px;
} }
.mat-mini-fab {
width: 35px;
height: 35px;
}
.mat-icon-1 {
font-size: 1.25em;
}
.mat-icon-2 {
font-size: 2.5em;
}
.mat-icon-1 .mat-icon-2{
display: flex;
justify-content: center;
align-items: center;
}
.id-btn { .id-btn {
background: url('../../../../assets/images/NoPath.png') no-repeat center; background: url('../../../../assets/images/NoPath.png') no-repeat center;
width: 16px; width: 1em;
margin-right: 5px; margin-right: 0.3em;
align-self: center; align-self: center;
} }
.avatar {
font-size: 14px;
color: #008887;
padding-right: 0.5em;
align-self: center;
}
.title {
font-size: 20px;
color: #212121;
opacity: 0.6;
margin-top: 20px;
margin-bottom: 5px;
}
.desc-text {
font-size: 16px;
color: #212121;
margin-bottom: 30px;
}
.dataset-btn { .dataset-btn {
width: 506px; width: 36.1em;
padding: 0 16px; padding: 0 1.1em;
background-color: #F7DD72; background-color: #F7DD72;
border-radius: 4px; border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
color: #212121; color: #212121;
opacity: 0.8; opacity: 0.8;
} }
.dataset-btn-label { .show-more-btn {
margin-right: 16px; width: 31.6em;
overflow: hidden; padding: 0 1em;
} }
.add-dataset { .add-dataset-btn {
border: none; border: none;
font: Bold 14px/19px Open Sans;
color: #444444;
}
.show-more {
background-color: #ffffff00;
color: #00b29f;
font-weight: 700;
justify-self: center;
}
.doi-label {
font-size: 16px;
color: #212121;
opacity: 0.6;
margin-bottom: 5px;
}
.doi-text {
font-size: 16px;
letter-spacing: 0.15px;
color: #7D7D7D;
}
.doi-panel {
height: 56px;
background: #FAFAFA;
border: 1px solid #D1D1D1;
border-radius: 4px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.frame {
height: 234px;
background: #FFFFFF;
box-shadow: 0px 1px 5px #00000026;
border-radius: 4px;
}
.actions-text {
font: Bold 12px/17px Open Sans;
letter-spacing: 0px;
color: #000000;
text-transform: uppercase;
cursor: pointer;
} }
.frame-btn { .frame-btn {
@ -160,20 +75,165 @@
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 2px 6px #00000029; box-shadow: 0px 2px 6px #00000029;
color: black; color: black;
}
.invite-btn{
width: 9.4em;
height: 2.9em;
background: #FFFFFF;
box-shadow: 0px 3px 6px #1E202029;
border: 2px solid #212121;
border-radius: 30px;
}
.account_btn {
background: white;
color: #D5D5D5;
border: none;
height: 2.9em;
}
// ********TEXT********
.label-txt {
font-size: 0.875em;
}
.label2-txt {
font-size: 1em;
}
.label-txt, .label2-txt {
color: #848484;
}
.dmp-btn-label {
font-size: 1em;
color: #FFFFFF;
opacity: 0.8;
}
.dmp-label {
font-weight: bold;
}
.finalized {
text-transform: uppercase;
}
.researcher {
font-size: 0.875em;
color: #008887;
padding-right: 0.5em;
align-self: center;
}
.header {
opacity: 0.6;
margin-top: 1em;
margin-bottom: 0.25em;
}
.dmp-label, .header {
font-size: 1.25em;
color: #212121;
}
.desc-txt {
width: 48.25em;
font-size: 1em;
color: #212121;
margin-bottom: 1.875em;
}
.dataset-btn-label {
margin-right: 1em;
overflow: hidden;
}
.show-more-txt {
background-color: #ffffff00;
color: #129D99;
font-weight: 700;
}
.add-dataset-txt {
font: Bold 0.875em Open Sans;
color: #444444;
}
.doi-label {
font-size: 1em;
color: #212121;
opacity: 0.6;
margin-bottom: 0.3em;
}
.doi-txt {
font-size: 0.8em;
letter-spacing: 0.009em;
color: #7D7D7D;
}
.doi-panel {
height: 3.5em;
background: #FAFAFA;
border: 1px solid #D1D1D1;
border-radius: 4px;
flex-direction: row;
justify-content: space-between;
}
.doi-link {
color: white;
}
.frame {
height: 14.6em;
background: #FFFFFF;
box-shadow: 0px 1px 5px #00000026;
border-radius: 4px;
}
.frame-txt {
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0px;
color: #000000;
text-transform: uppercase;
cursor: pointer;
}
.authors-label {
font-size: 0.875em;
color: #212121;
height: 1.4em;
}
.authors-role {
font-size: 0.875em;
color: #A8A8A8;
height: 1.4em;
}
// ********CENTER ELEMENTS********
.mat-mini-fab, .mat-mini-fab-icon,
.status-icon, .frame-btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.account_circle { .dmp-label, .dataset-btn, .add-dataset-btn,
background: white; .add-dataset-txt, .doi-panel {
color: #D5D5D5; display: flex;
border: none; align-items: center;
} }
.show-more-btn {
.invite-button{ display: flex;
border-radius: 30px; justify-content: center;
} }

8
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
View File

@ -29,6 +29,7 @@ import { Oauth2DialogComponent } from '@app/ui/misc/oauth2-dialog/oauth2-dialog.
import { Oauth2DialogService } from '@app/ui/misc/oauth2-dialog/service/oauth2-dialog.service'; import { Oauth2DialogService } from '@app/ui/misc/oauth2-dialog/service/oauth2-dialog.service';
import { isNullOrUndefined } from 'util'; import { isNullOrUndefined } from 'util';
import { UserService } from '@app/core/services/user/user.service'; import { UserService } from '@app/core/services/user/user.service';
import { Location } from '@angular/common';
@Component({ @Component({
selector: 'app-dmp-overview', selector: 'app-dmp-overview',
@ -58,7 +59,8 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
private uiNotificationService: UiNotificationService, private uiNotificationService: UiNotificationService,
private configurationService: ConfigurationService, private configurationService: ConfigurationService,
private oauth2DialogService: Oauth2DialogService, private oauth2DialogService: Oauth2DialogService,
private userService: UserService private userService: UserService,
private location: Location
) { ) {
super(); super();
} }
@ -539,6 +541,10 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
);; );;
} }
goBack(): void {
this.location.back();
}
// advancedClicked() { // advancedClicked() {
// const dialogRef = this.dialog.open(ExportMethodDialogComponent, { // const dialogRef = this.dialog.open(ExportMethodDialogComponent, {
// maxWidth: '500px', // maxWidth: '500px',

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

@ -537,6 +537,10 @@
"RESEARCHERS": "Researchers", "RESEARCHERS": "Researchers",
"DATASETS-USED": "Datasets used", "DATASETS-USED": "Datasets used",
"COLLABORATORS": "Collaborators", "COLLABORATORS": "Collaborators",
"PUBLIC": "Public",
"PRIVATE": "Private",
"LOCKED": "Locked",
"UNLOCKED": "Unlocked",
"TOOLTIP": { "TOOLTIP": {
"LEVEL-OF-ACCESS": "Level of Access", "LEVEL-OF-ACCESS": "Level of Access",
"INVOLVED-DATASETS": "Involved Dataset Descriptions", "INVOLVED-DATASETS": "Involved Dataset Descriptions",

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

@ -537,6 +537,10 @@
"RESEARCHERS": "Investigadores", "RESEARCHERS": "Investigadores",
"DATASETS-USED": "Descripciones del Dataset Utilizadas", "DATASETS-USED": "Descripciones del Dataset Utilizadas",
"COLLABORATORS": "Colaboradores", "COLLABORATORS": "Colaboradores",
"PUBLIC": "Público",
"PRIVATE": "Privado",
"LOCKED": "Bloqueado",
"UNLOCKED": "Desbloqueado",
"TOOLTIP": { "TOOLTIP": {
"LEVEL-OF-ACCESS": "Nivel de acceso", "LEVEL-OF-ACCESS": "Nivel de acceso",
"INVOLVED-DATASETS": "Descripciones del Dataset implicadas", "INVOLVED-DATASETS": "Descripciones del Dataset implicadas",

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

@ -537,6 +537,10 @@
"RESEARCHERS": "Ερευνητές", "RESEARCHERS": "Ερευνητές",
"DATASETS-USED": "Περιγραφές Συνόλων Δεδομένων Που Χρησιμοποιήθηκαν", "DATASETS-USED": "Περιγραφές Συνόλων Δεδομένων Που Χρησιμοποιήθηκαν",
"COLLABORATORS": "Συνεργάτες", "COLLABORATORS": "Συνεργάτες",
"PUBLIC": "Δημόσιο",
"PRIVATE": "Ιδιωτικό",
"LOCKED": "Κλειδωμένο",
"UNLOCKED": "Ακλείδωτο",
"TOOLTIP": { "TOOLTIP": {
"LEVEL-OF-ACCESS": "Επίπεδο Πρόσβασης", "LEVEL-OF-ACCESS": "Επίπεδο Πρόσβασης",
"INVOLVED-DATASETS": "Εμπλεκόμενες Περιγραφές Συνόλου Δεδομένων", "INVOLVED-DATASETS": "Εμπλεκόμενες Περιγραφές Συνόλου Δεδομένων",