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

redesign_update

This commit is contained in:
gpapavgeri 2020-06-29 18:30:36 +03:00
parent 3bf6c2d927
commit 235096a982
3 changed files with 207 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,16 +11,17 @@
<a mat-raised-button primary class="dmp-btn"> <a mat-raised-button primary class="dmp-btn">
<span class="dmp-btn-text">{{ 'DATASET-LISTING.COLUMNS.DMP' | translate }}</span> <span class="dmp-btn-text">{{ 'DATASET-LISTING.COLUMNS.DMP' | translate }}</span>
</a> </a>
<p class="dmp-label ml-2">{{ 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-text">
<div *ngIf="isUserDMPRelated()" class="d-flex"> <div *ngIf="isUserDMPRelated()" class="d-flex">
<p class="ml-0 mr-3 mb-0" <p class="ml-0 mr-3 mb-0 label-text"
matTooltip="{{'DMP-OVERVIEW.TOOLTIP.LEVEL-OF-ACCESS' | translate}}"> 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</div> <div class="d-flex mr-4">Public: {{ dmp.isPublic}}</div>
<div class="d-flex mr-4">Locked</div> <div class="d-flex mr-4">Locked: {{ dmp.status}}</div>
<button class="d-flex mr-4 version-btn label-text"> <button class="d-flex mr-4 version-btn label-text">
{{'DMP-LISTING.COLUMNS.VERSION' | translate}} {{'DMP-LISTING.COLUMNS.VERSION' | translate}}
<mat-select> <mat-select>
@ -29,32 +30,38 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</button> </button>
<div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} : {{dmp.modifiedTime | date:"longDate"}}</div> <div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} :
{{dmp.modifiedTime | date:"longDate"}}</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-4" matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}"> class="mr-3 d-flex justify-content-center align-items-center"
<mat-icon class="actions-icon">content_copy</mat-icon> matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-icon-1">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-4" matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}"> class="mr-3 d-flex justify-content-center align-items-center"
<mat-icon class="actions-icon">create</mat-icon> matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-icon-1">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-4" matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}"> class="mr-3 d-flex justify-content-center align-items-center"
<mat-icon class="actions-icon">delete</mat-icon> matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-icon-1">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-4"> class="mr-3 d-flex justify-content-center align-items-center"
<mat-icon class="actions-icon">lock_outline</mat-icon> matTooltip="{{'DMP-LISTING.ACTIONS.FINALIZE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-icon-1">lock_outline</mat-icon>
</button> </button>
</div> </div>
<div class="row title">{{'DMP-OVERVIEW.GRANT' | translate}}</div> <div class="row title">{{'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 title">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
<div class="row"> <div class="row">
<div *ngFor="let researcher of dmp.researchers"> <div *ngFor="let researcher of dmp.researchers" class="d-flex flex-row align-items-center">
<div matTooltip="{{ researcher.name }}" class="avatar">{{ researcher.name }}</div> <div class="id-btn">&nbsp;</div>
<div class="avatar">{{ researcher.name }},</div>
</div> </div>
</div> </div>
<div class="row title">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div> <div class="row title">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
@ -65,67 +72,119 @@
<div class="row"> <div class="row">
<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 < 9" (click)="datasetClicked(dataset.id)">
<!-- <p *ngIf="isDraftDataset(dataset)"> <!-- <mat-icon *ngIf="isDraftDataset(dataset)" class="draft-bookmark">bookmark</mat-icon>
<mat-icon class="draft-bookmark">bookmark</mat-icon> <mat-icon *ngIf="!isDraftDataset(dataset)" class="finalized-bookmark">bookmark</mat-icon>
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> <h4 *ngIf="isDraftDataset(dataset)">
</p> <span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
<p *ngIf="!isDraftDataset(dataset)"> <h4 *ngIf="!isDraftDataset(dataset)">{{ dataset.label }}</h4>
<mat-icon class="finalized-bookmark">bookmark</mat-icon> <div matTooltip="{{ dataset.datasetTemplate.label }}" class="chip">
</p> --> {{ dataset.datasetTemplate.label }}</div> -->
<button mat-raised-button class="dataset-btn mb-2"> <button mat-raised-button class="mb-2 mr-2 pl-0 pr-0">
<div matTooltip="{{ dataset.datasetTemplate.label }}" class="dataset-btn-label"> <div matTooltip="{{ dataset.datasetTemplate.label }}" class="dataset-btn">
{{ dataset.label }}: {{ dataset.datasetTemplate.label }} <div class="dataset-btn-label">{{ dataset.label }}:
{{ dataset.datasetTemplate.label }}</div>
<mat-icon>launch</mat-icon> <mat-icon>launch</mat-icon>
</div> </div>
</button> </button>
</div> </div>
<!-- <div *ngIf="dmp.datasets.length > 9" class="gray-container d-flex justify-content-center"> </div>
</div>
<div *ngIf="dmp.datasets.length > 9" class="d-flex justify-content-center">
<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more"> <button mat-button (click)="datasetsClicked(dmp.id)" class="show-more">
<mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }} <mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
</button> </button>
</div> -->
</div>
</div> </div>
<div class="row mt-2 d-flex align-items-center"> <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)"> <button class="add-dataset d-flex align-items-center" *ngIf="isDraftDmp(dmp) && isUserOwner"
(click)="addDataset(dmp.id)">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
<span class="add-dataset">{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</span> <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">
<div class="frame"> <div class="row d-flex flex-column m-1">
<div class="row ml-1"> <p class="doi-label">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}</p>
<button mat-icon-button class="frame-button"> <div class="doi-panel">
<mat-icon>archive</mat-icon> <p class="doi-text mb-0 ml-2">{{ dmp.modifiedTime }}</p>
<div class="d-flex justify-content-end">
<button *ngIf="isAuthenticated()" (click)="cloneClicked(dmp)" mat-mini-fab
class="mr-2 d-flex justify-content-center align-items-center"
matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button> </button>
{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }} <button mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center"
</div> matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<div class="row ml-1"> <mat-icon class="mat-mini-fab-icon">launch</mat-icon>
<button mat-icon-button class="frame-button">
<mat-icon>redo</mat-icon>
</button> </button>
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
</div> </div>
<div class="row ml-1"> </div>
<button mat-icon-button class="frame-button"> </div>
<mat-icon>add_to_photos</mat-icon> <div class="frame m-1">
<div class="row ml-2 pl-4 pt-4 pb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">archive</mat-icon>
</button> </button>
{{ 'DMP-LISTING.ACTIONS.START-NEW-VERSION' | translate }} <p class="mb-0 pl-2 actions-text">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p>
</div> </div>
<div class="row ml-1"> <div class="row ml-2 pl-4 pb-3 d-flex align-items-center">
<button mat-icon-button class="frame-button"> <button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
<mat-icon>public</mat-icon> <mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
</button> </button>
{{ 'DMP-LISTING.ACTIONS.MAKE-PUBLIC' | translate }} <p class="mb-0 pl-2 actions-text" [matMenuTriggerFor]="exportMenu">
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}</p>
</div> </div>
<div class="row ml-2 pl-4 pb-3 d-flex align-items-center" *ngIf="isUserOwner"
(click)="newVersion(dmp.id, dmp.label)">
<button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
</button>
<p class="mb-0 pl-2 actions-text">{{ 'DMP-LISTING.ACTIONS.START-NEW-VERSION' | translate }}
</p>
</div>
<div class="row ml-2 pl-4 pb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">public</mat-icon>
</button>
<p class="mb-0 pl-2 actions-text">{{ 'DMP-LISTING.ACTIONS.MAKE-PUBLIC' | translate }}</p>
</div>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(dmp.id)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDocx(dmp.id)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXml(dmp.id)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadJson(dmp.id)">
<i class="fa fa-file-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
</button>
</mat-menu>
</div>
<div class="frame m-1">
<div class="row ml-2 pl-4 pt-4 pb-3">
<p class="title">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
</div> </div>
<div class="frame"> <div class="row ml-2 pl-4 pb-3 d-flex align-items-center" *ngIf="!isPublicView">
<div class="row ml-1"> <button class="account_circle mr-3 pl-0">
<h3>{{'DMP-OVERVIEW.DMP-AUTHORS' | translate}}</h3> <mat-icon class="mat-icon-2">account_circle</mat-icon>
</button>
<div class="row">
<div *ngFor="let user of dmp.users">
<p class="mb-0 pl-2 actions-text">{{ user.name }}</p>
<p class="mb-0 pl-2 actions-text">{{ roleDisplay(user) }}</p>
</div> </div>
<div class="row ml-1"> </div>
</div>
<div *ngIf="isUserOwner" (click)="openShareDialog(dmp.id,dmp.label)"
class="row ml-2 pl-4 pb-3 d-flex align-items-center">
<button mat-raised-button class="frame-button invite-button"> <button mat-raised-button class="frame-button invite-button">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}} {{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}

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

@ -40,16 +40,36 @@
border-radius: 4px; border-radius: 4px;
} }
.actions-btn { .mat-mini-fab {
background-color: #23BCBA; width: 35px;
margin-right: 23px; height: 35px;
// width: 35px;
// height: 35px;
// box-shadow: 0px 2px 6px #00000029;
} }
.actions-icon { .mat-icon-1 {
color: white; 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 {
background: url('../../../../assets/images/NoPath.png') no-repeat center;
width: 16px;
margin-right: 5px;
align-self: center;
}
.avatar {
font-size: 14px;
color: #008887;
padding-right: 0.5em;
align-self: center;
} }
.title { .title {
@ -68,12 +88,9 @@
.dataset-btn { .dataset-btn {
width: 506px; width: 506px;
height: 37px; padding: 0 16px;
background-color: #F7DD72; background-color: #F7DD72;
border-radius: 4px; border-radius: 4px;
}
.dataset-btn-label {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -81,28 +98,80 @@
opacity: 0.8; opacity: 0.8;
} }
.dataset-btn-label {
margin-right: 16px;
overflow: hidden;
}
.add-dataset { .add-dataset {
border: none; border: none;
font: Bold 14px/19px Open Sans; font: Bold 14px/19px Open Sans;
color: #444444; 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 { .frame {
width: 370px;
height: 234px; height: 234px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 1px 5px #00000026; box-shadow: 0px 1px 5px #00000026;
border-radius: 4px; border-radius: 4px;
opacity: 1;
margin-bottom: 20px;
} }
.frame-button { .actions-text {
border: 1px solid #212121; font: Bold 12px/17px Open Sans;
background: #FFFFFF 0% 0% no-repeat padding-box; letter-spacing: 0px;
color: #000000;
text-transform: uppercase;
cursor: pointer;
} }
.frame-btn {
border: 1px solid #212121;
background: #FFFFFF;
box-shadow: 0px 2px 6px #00000029;
color: black;
display: flex;
justify-content: center;
align-items: center;
}
.account_circle {
background: white;
color: #D5D5D5;
border: none;
}
.invite-button{ .invite-button{
border-radius: 30px; border-radius: 30px;
} }

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 B