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

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

This commit is contained in:
apapachristou 2020-08-06 13:20:35 +03:00
parent 16390853d6 947ecc1874
commit 9708a0c82d
20 changed files with 119 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
dmp-frontend/src/app/library/guided-tour/guided-tour.component.html
View File

@ -1,12 +1,17 @@
<!-- custom add: isStepUnique -->
<div *ngIf="currentTourStep && !isOrbShowing">
<div class="guided-tour-user-input-mask" (click)="backdropClick($event)"></div>
<div class="guided-tour-spotlight-overlay" [style.top.px]="overlayTop" [style.left.px]="overlayLeft"
[style.height.px]="currentTourStep.isStepUnique ? overlayWidth : overlayHeight" [style.width.px]="overlayWidth">
<div class="guided-tour-spotlight-overlay"
[style.top.px]="overlayTop"
[style.left.px]="overlayLeft"
[style.height.px]="currentTourStep.isStepUnique ? overlayWidth : overlayHeight"
[style.width.px]="overlayWidth">
</div>
</div>
<div *ngIf="currentTourStep && !isOrbShowing">
<div #tourStep *ngIf="currentTourStep" class="tour-step tour-{{ currentTourStep.orientation }}" [ngClass]="{
'page-tour-step': !currentTourStep.selector }"
<div #tourStep *ngIf="currentTourStep"
class="tour-step tour-{{ currentTourStep.orientation }}"
[ngClass]="{ 'page-tour-step': !currentTourStep.selector }"
[style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"
[style.left.px]="(currentTourStep.selector && selectedElementRect ? leftPosition : null)"
[style.width.px]="(currentTourStep.selector && selectedElementRect ? calculatedTourStepWidth : null)"
@ -17,6 +22,9 @@
<h3 class="tour-title" *ngIf="currentTourStep.title && currentTourStep.selector">
{{currentTourStep.title}}
</h3>
<h2 class="tour-title" *ngIf="currentTourStep.title && !currentTourStep.selector">
{{ currentTourStep.title }}
</h2>
<div class="tour-buttons">
<button *ngIf="!guidedTourService.onResizeMessage" class="next-button"
(click)="guidedTourService.nextStep()">

55
dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss
View File

@ -14,7 +14,7 @@ ngx-guided-tour {
.guided-tour-spotlight-overlay {
position: fixed;
box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5);
border-radius: 44px;
border-radius: 44px; /*custom add*/
}
.tour-orb {
@ -56,7 +56,8 @@ ngx-guided-tour {
.tour-step {
position: fixed;
&.page-tour-step {
max-width: 1043px;
// max-width: 400px;
max-width: 1043px; /*custom add*/
width: 50%;
left: 50%;
top: 50%;
@ -85,14 +86,16 @@ ngx-guided-tour {
}
&.tour-bottom , &.tour-top {
margin-top: 20px;
margin-left: 10px;
.tour-arrow::before {
// transform: translateX(-50%);
// left: 50%;
transform: scale(2);
left: 494px;
/*custom add*/
transform: scale(2);
left: 494px;
}
/*custom add*/
margin-top: 20px;
margin-left: 10px;
}
&.tour-bottom-right, &.tour-top-right {
@ -121,29 +124,36 @@ ngx-guided-tour {
}
&.tour-right {
margin-left: 10px;
margin-left: 10px; /*custom add*/
.tour-arrow::before {
transform: scale(1.5);
transform: scale(1.5); /*custom add*/
position: absolute;
left: 0;
top: 5px;
}
.tour-block {
margin-top: -15px;
margin-top: -15px; /*custom add*/
margin-left: 10px;
}
}
.tour-block {
padding: 15px 25px;
// padding: 15px 25px;
/*custom add*/
padding: 15px 25px 15px 0px;
max-height: 348px;
border-radius: 5px;
}
.tour-title {
// font-weight: bold !important;
// padding-bottom: 20px;
/*custom add*/
font-weight: lighter !important;
font-size: 16px !important;
padding: 28px 45px 0px 65px;
padding: 28px 74px 0px 65px;
overflow: auto;
text-align: left;
color: #212121;
@ -161,7 +171,7 @@ ngx-guided-tour {
.tour-buttons {
overflow: hidden; // clearfix
padding: 10px 45px 30px 65px;
padding: 10px 70px 30px 65px; /*custom add*/
button.link-button {
padding-left: 0;
@ -182,8 +192,11 @@ ngx-guided-tour {
}
button.skip-button.link-button {
padding: 0;
// padding-left: 0;
border-left: 0;
/*custom add*/
padding: 0;
float: right;
width: 133px;
height: 40px;
@ -192,20 +205,23 @@ ngx-guided-tour {
color: #129D99;
}
.back-button {
float: right;
}
.next-button {
cursor: pointer;
float: left;
// border-radius: 1px;
// float: right;
border: none;
outline: none;
// padding-left: 10px;
// padding-right: 10px;
/*custom add*/
float: left;
padding: 10px 0px;;
width: 101px;
background: #129D99 0% 0% no-repeat padding-box;
}
/*custom add*/
button.skip-button.link-button, .next-button {
font-size: 14px;
font-weight: bold;
@ -216,13 +232,14 @@ ngx-guided-tour {
}
}
/*custom add*/
.argos-present-img {
background: url("../../../assets/splash/assets/img/argos\ present.png") no-repeat;
min-width: 176px;
height: 220px;
position: relative;
top: 110px;
left: -65px;
left: -85px;
border-top: none;
}
}

9
dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts
View File

@ -17,7 +17,6 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
@Input() public minimalTourStepWidth?= 500;
@Input() public skipText?= 'Leave Tour';
@Input() public nextText?= 'Got it!';
@Input() public progressIndicator?: TemplateRef<any> = undefined;
@ViewChild('tourStep', { static: false }) public tourStep: ElementRef;
public highlightPadding = 4;
public currentTourStep: TourStep = null;
@ -30,7 +29,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
constructor(
public guidedTourService: GuidedTourService,
private windowRef: WindowRefService,
private changeDetectorRef: ChangeDetectorRef,
private changeDetectorRef: ChangeDetectorRef, /*custom add*/
@Inject(DOCUMENT) private dom: any
) { }
@ -63,7 +62,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
if (step && step.selector) {
const selectedElement = this.dom.querySelector(step.selector);
if (selectedElement) {
this.handleOrb();
this.handleOrb(); /*custom add*/
this.scrollToAndSetElement();
} else {
this.selectedElementRect = null;
@ -86,6 +85,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
});
}
/*custom add*/
ngAfterContentChecked() {
this.changeDetectorRef.detectChanges();
}
@ -337,6 +337,9 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
public get overlayTop(): number {
if (this.selectedElementRect) {
// return this.selectedElementRect.top - this.getHighlightPadding();
/*custom add*/
let customTopOffset = 0;
if (this.currentTourStep.customTopOffset) {
customTopOffset = this.currentTourStep.customTopOffset;

5
dmp-frontend/src/app/library/guided-tour/guided-tour.constants.ts
View File

@ -20,9 +20,10 @@ export interface TourStep {
useHighlightPadding?: boolean;
/** Adds padding around tour highlighting in pixels, this overwrites the default for this step. Is not dependent on useHighlightPadding being true */
highlightPadding?: number;
/** True if the tour has no other step */
/** CUSTOM ADD: True if the tour has no other step */
isStepUnique?: boolean;
/** Adds offset in pixels to the calculated overlayTop */
/** CUSTOM ADD: Adds offset in pixels to the calculated overlayTop */
customTopOffset?: number;
}

54
dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts
View File

@ -77,33 +77,33 @@ export class GuidedTourService {
}
}
// public backStep(): void {
// if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
// this._currentTour.steps[this._currentTourStepIndex].closeAction();
// }
// if (this._currentTour.steps[this._currentTourStepIndex - 1]) {
// this._currentTourStepIndex--;
// this._setFirstAndLast();
// if (this._currentTour.steps[this._currentTourStepIndex].action) {
// this._currentTour.steps[this._currentTourStepIndex].action();
// setTimeout(() => {
// if (this._checkSelectorValidity()) {
// this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
// } else {
// this.backStep();
// }
// });
// } else {
// if (this._checkSelectorValidity()) {
// this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
// } else {
// this.backStep();
// }
// }
// } else {
// this.resetTour();
// }
// }
public backStep(): void {
if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
this._currentTour.steps[this._currentTourStepIndex].closeAction();
}
if (this._currentTour.steps[this._currentTourStepIndex - 1]) {
this._currentTourStepIndex--;
this._setFirstAndLast();
if (this._currentTour.steps[this._currentTourStepIndex].action) {
this._currentTour.steps[this._currentTourStepIndex].action();
setTimeout(() => {
if (this._checkSelectorValidity()) {
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} else {
this.backStep();
}
});
} else {
if (this._checkSelectorValidity()) {
this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
} else {
this.backStep();
}
}
} else {
this.resetTour();
}
}
public skipTour(): void {
if (this._currentTour.skipCallback) {

2
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html
View File

@ -54,7 +54,7 @@
<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
<mat-expansion-panel-header>
<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</mat-panel-title>
<div class="row">
<div class="row deleteBtn">
<!-- <span class="col">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</span> -->
<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteSectionInSection(i);" [disabled]="viewOnly">
<mat-icon>delete</mat-icon>

4
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.scss
View File

@ -4,5 +4,5 @@
}
}
.deleteBtn{
margin-right:0.7em;
}
margin-right:2em;
}

2
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
View File

@ -55,7 +55,7 @@
<mat-expansion-panel-header>
<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
</mat-panel-title>
<button mat-icon-button type="button" (click)="DeleteSection(i);" [disabled]="viewOnly">
<button mat-icon-button type="button" class="deleteBtn" (click)="DeleteSection(i);" [disabled]="viewOnly">
<mat-icon>delete</mat-icon>
</button>
</mat-expansion-panel-header>

4
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
View File

@ -3,3 +3,7 @@
width: 100%;
}
}
.deleteBtn{
margin-right:2em;
}

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

@ -26,7 +26,7 @@
<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
<div class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
</div>
<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{activity.label}}</div>
<div class="col-auto dataset-title">{{activity.label}}</div>
<div class="dataset-subtitle">
<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
<span>.</span>

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

@ -101,7 +101,7 @@
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{activity.publishedAt | date:"longDate"}}</div>
</div>
<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{activity.title}}</div>
<div class="col-auto dataset-title">{{activity.title}}</div>
<div class="dataset-subtitle">
<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
<span>.</span>

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

@ -28,7 +28,7 @@
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{activity.dmpPublishedAt | date:"longDate"}}</div>
</div>
<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{activity.label}}</div>
<div class="col-auto dataset-title">{{activity.label}}</div>
<div class="dataset-subtitle">
<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
<span>.</span>

2
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
View File

@ -5,7 +5,7 @@
<div *ngIf="!isPublic" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{dataset.modified | date:"longDate"}}</div>
<div *ngIf="isPublic" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{dataset.dmpPublishedAt | date:"longDate"}}</div>
</div>
<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{dataset.label}}</div>
<div class="col-auto dataset-title">{{dataset.label}}</div>
<div class="dataset-subtitle">
<span *ngIf="isUserDatasetRelated()" class="col-auto">{{ roleDisplay(dataset.users) }}</span>
<span *ngIf="isUserDatasetRelated()">.</span>

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

@ -90,9 +90,6 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
this.dataset = data;
this.researchers = this.dataset.dmp.researchers;
this.users = this.dataset.dmp.users;
// this.getDmpResearchers();
// this.getDmpUsers();
// this.getDatasetWizardModel(this.dataset.id);
this.checkLockStatus(this.dataset.id);
this.setIsUserOwner();
const breadCrumbs = [];
@ -118,10 +115,6 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
this.dataset = data;
this.researchers = this.dataset.dmp.researchers;
this.users = this.dataset.dmp.users;
// this.getDmpResearchers();
// this.getDmpUsers();
// this.getDatasetWizardModel(this.dataset.id);
// this.checkLockStatus(this.dataset.id);
const breadCrumbs = [];
breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.PUBLIC DATASETS'), url: "/explore" });
breadCrumbs.push({ parentComponentName: 'DatasetListingComponent', label: this.dataset.label, url: '/datasets/publicOverview/' + this.dataset.id });
@ -138,14 +131,6 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
});
}
getDatasetWizardModel(id: string) {
this.datasetWizardService.getSingle(id)
.pipe(takeUntil(this._destroyed))
.subscribe(data => {
this.datasetWizardModel = data;
});
}
checkLockStatus(id: string) {
this.lockService.checkLockStatus(id).pipe(takeUntil(this._destroyed))
.subscribe(lockStatus => this.lockStatus = lockStatus);
@ -170,20 +155,6 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
this.router.navigateByUrl('/reload', { skipLocationChange: true }).then(() => this.router.navigate([path]));
}
// getDmpResearchers() {
// this.dmpService.getSingle(this.dataset.dmp.id).pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// this.researchers = data.researchers;
// });
// }
// getDmpUsers() {
// this.dmpService.getSingle(this.dataset.dmp.id).pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// this.users = data.users;
// });
// }
setIsUserOwner() {
if (this.dataset) {
const principal: Principal = this.authentication.current();
@ -487,14 +458,18 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
this.getDatasetWizardModel(this.dataset.id);
this.datasetWizardModel.status = DatasetStatus.Finalized;
this.datasetWizardService.createDataset(this.datasetWizardModel)
this.datasetWizardService.getSingle(dataset.id)
.pipe(takeUntil(this._destroyed))
.subscribe(data => {
this.datasetWizardModel = data;
this.datasetWizardModel.status = DatasetStatus.Finalized;
this.datasetWizardService.createDataset(this.datasetWizardModel)
.pipe(takeUntil(this._destroyed))
.subscribe(
data => this.onUpdateCallbackSuccess(),
error => this.onUpdateCallbackError(error)
);
});
}
});
}
@ -515,14 +490,18 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
this.getDatasetWizardModel(this.dataset.id);
this.datasetWizardModel.status = DatasetStatus.Draft;
this.datasetWizardService.createDataset(this.datasetWizardModel)
this.datasetWizardService.getSingle(dataset.id)
.pipe(takeUntil(this._destroyed))
.subscribe(data => {
this.datasetWizardModel = data;
this.datasetWizardModel.status = DatasetStatus.Draft;
this.datasetWizardService.createDataset(this.datasetWizardModel)
.pipe(takeUntil(this._destroyed))
.subscribe(
data => this.onUpdateCallbackSuccess(),
error => this.onUpdateCallbackError(error)
);
});
}
});
}

2
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
View File

@ -39,7 +39,7 @@
<div class="col-auto dataset-part-of">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}
<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
</div>
<div class="col-auto dmp-title">{{'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate}}: {{ formGroup.get('label').value }}</div>
<div class="col-auto dmp-title">{{ formGroup.get('label').value }}</div>
<div class="col d-flex align-items-center">
<a [routerLink]="['/overview/' + formGroup.get('id').value]" target="_blank" class="pointer"><span class="material-icons">open_in_new</span></a>
</div>

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

@ -7,7 +7,7 @@
<div class="icon-bar2"></div>
<div class="icon-bar3"></div>
</div>
<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
<mat-icon class="toggle-icon">view_headline</mat-icon>
</button>

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

@ -30,8 +30,8 @@ $mat-card-header-size: 40px !default;
}
.logo {
width: 98px;
height: 37px;
// width: 98px;
// height: 37px;
margin-top: 15px;
margin-left: 5px;
}

8
dmp-frontend/src/assets/splash/about/contributors.html
View File

@ -84,14 +84,14 @@
<div class="col-8 card-body pl-0" class="flex-column align-items-center">
<p class="card-text-1">Turkish Higher Education Council Research Data and Open Data working group</p>
</div>
</div>
</div>
<div class="card flex-row">
<img class="col-4 flag" alt="Flag of Austria" src="../assets/img/flag-of-germany.png">
<img class="col-4 flag" alt="Flag of Austria" src="../assets/img/flag-of-austria.png">
<div class="col-8 card-body pl-0" class="flex-column align-items-center">
<p class="card-text-1">UNIVERSITY OF VIENNA</p>
<p class="card-text-2">Gerda McNeill, Raman Ganguly, Mihaela Hubert</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
@ -144,4 +144,4 @@
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
</html>

1
dmp-frontend/src/assets/splash/assets/img/argos-logo-2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
dmp-frontend/src/assets/splash/assets/img/flag-of-austria.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB