This commit is contained in:
George Kalampokis 2020-11-06 16:29:50 +02:00
commit eae7f22f72
29 changed files with 263 additions and 88 deletions

View File

@ -35,7 +35,7 @@
<div class="main-content">
<div class="col">
<div class="card col-auto mt-0" [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>
<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<p class="card-content mb-0 pt-0">
{{'DASHBOARD.DMP-ABOUT-BEG' | translate}}
<b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b>
@ -104,7 +104,7 @@
<div class="row">
<div class="col d-flex flex-column">
<div class="card non-auth-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>
<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<div class="d-flex flex-column align-items-center non-auth-title-container">
<h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4>
<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>

View File

@ -49,6 +49,14 @@
.clear-icon {
cursor: pointer;
color: #212121;
padding: 0.4rem;
}
.clear-icon:hover {
background-color: #ececec !important;
border-radius: 50%;
padding: 0.4rem;
}
.normal-btn {
@ -252,9 +260,21 @@ input[type="text"] {
.icon-align {
display: inline-flex;
vertical-align: middle;
// line-height: .9em;
// padding-bottom: 0.4rem;
}
.dmp-subtitle,
.dataset-subtitle {
.icon-align {
display: inline-flex;
vertical-align: top;
margin-right: .2rem;
line-height: .95em;
}
}
.dataset-card-actions,
.dmp-card-actions {
display: flex;

View File

@ -109,6 +109,7 @@ input[type="text"] {
.icon-align {
display: inline-flex;
vertical-align: middle;
/* line-height: .9em; */
/* padding-bottom: 0.4rem; */
}

View File

@ -109,6 +109,7 @@ input[type="text"] {
.icon-align {
display: inline-flex;
vertical-align: middle;
/* line-height: .9em; */
/* padding-bottom: 0.4rem; */
}
@ -121,6 +122,15 @@ input[type="text"] {
color: #848484;
}
.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;

View File

@ -109,9 +109,21 @@ input[type="text"] {
.icon-align {
display: inline-flex;
vertical-align: middle;
// line-height: .9em;
// padding-bottom: 0.4rem;
}
.dmp-subtitle,
.dataset-subtitle {
.icon-align {
display: inline-flex;
vertical-align: top;
margin-right: .2rem;
line-height: .95em;
}
}
.dataset-card-actions,
.dmp-card-actions {
display: flex;

View File

@ -105,6 +105,7 @@ input[type="text"] {
.icon-align {
display: inline-flex;
vertical-align: middle;
/* line-height: .9em; */
/* padding-bottom: 0.4rem; */
}

View File

@ -48,13 +48,13 @@
<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
</div>
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options">
<div class="stepper-options" id="stepper-options">
<div class="col stepper-list">
<div (click)="changeStep(0)" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
<div (click)="changeStep(0)" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
<div class="row toc-pane-container" #boundary (click)="changeStep(1)">
<div #spacer></div>
<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (linksInit)="onLinksInit($event)"></table-of-contents>
<table-of-contents class="toc-pane-container" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)"></table-of-contents>
</div>
</div>
</div>

View File

@ -23,7 +23,7 @@ import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset
import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent';
import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
import { LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
import { Link, LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
import { BaseComponent } from '@common/base/base.component';
import { FormService } from '@common/forms/form-service';
import { FormValidationErrorsDialogComponent } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component';
@ -85,6 +85,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
datasetSavedLinks: any = null;
scrollTop: number;
tocScrollTop: number;
links: Link[] = [];
constructor(
private datasetWizardService: DatasetWizardService,
@ -548,6 +550,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
submit(saveType?: SaveType) {
this.scrollTop = document.getElementById('dataset-editor-form').scrollTop;
this.tocScrollTop = document.getElementById('stepper-options').scrollTop;
this.datasetWizardService.createDataset(this.formGroup.getRawValue())
.pipe(takeUntil(this._destroyed))
.subscribe(
@ -657,6 +660,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
setTimeout(() => {
document.getElementById('dataset-editor-form').scrollTop = this.scrollTop;
document.getElementById('stepper-options').scrollTop = this.tocScrollTop;
}, 500);
// this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', data.id]); });
@ -916,7 +920,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
return this.formGroup.get('label') && this.formGroup.get('label').valid && this.formGroup.get('profile') && this.formGroup.get('profile').valid;
}
onLinksInit(event) {
this.datasetSavedLinks = event;
getLinks(currentLinks: Link[]) {
this.links = currentLinks;
}
}

View File

@ -1,2 +1,2 @@
<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<app-dataset-criteria-component [isPublic]="data.isPublic" [status]="data.status" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)" class="col-auto"></app-dataset-criteria-component>

View File

@ -1,3 +1,15 @@
.clear-icon {
cursor: pointer;
color: #212121;
padding: 0.4rem;
}
.clear-icon:hover {
background-color: #ececec !important;
border-radius: 50%;
padding: 0.4rem;
}
::ng-deep .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;

View File

@ -86,7 +86,15 @@
}
.clear-icon {
cursor: pointer;
cursor: pointer;
color: #212121;
padding: 0.4rem;
}
.clear-icon:hover {
background-color: #ececec !important;
border-radius: 50%;
padding: 0.4rem;
}
.normal-btn {

View File

@ -177,9 +177,21 @@ input[type="text"] {
.icon-align {
display: inline-flex;
vertical-align: middle;
// line-height: .9em;
// padding-bottom: 0.4rem;
}
.dmp-subtitle,
.dataset-subtitle {
.icon-align {
display: inline-flex;
vertical-align: top;
margin-right: .2rem;
line-height: .95em;
}
}
.dataset-card-actions,
.dmp-card-actions {
display: flex;

View File

@ -22,12 +22,15 @@
.close-icon {
cursor: pointer;
margin-right: 20px;
padding: .4rem;
width: auto !important;
height: auto !important;
}
// .close-icon:hover {
// background-color: #ECECED !important;
// border-radius: 50%;
// }
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.cancel-btn {
width: 101px;

View File

@ -60,7 +60,7 @@
<div class="row editor-content">
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options">
<div class="stepper-options" id="stepper-options">
<ol class="stepper-list">
<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
<li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>

View File

@ -3,6 +3,15 @@
.close-icon {
cursor: pointer;
margin-right: 20px;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.title {

View File

@ -31,7 +31,7 @@
<div class="row editor-content">
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options">
<div class="stepper-options" id="stepper-options">
<ol class="stepper-list">
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>

View File

@ -6,6 +6,15 @@
.close-icon {
cursor: pointer;
// margin-right: 20px;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.title {

View File

@ -1,2 +1,2 @@
<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<app-dmp-criteria-component [showGrant]="data.showGrant" [isPublic]="data.isPublic" [criteriaFormGroup]="data.formGroup" (filtersChanged)="onFiltersChanged($event)" class="col-auto"></app-dmp-criteria-component>

View File

@ -0,0 +1,11 @@
.clear-icon {
cursor: pointer;
color: #212121;
padding: 0.4rem;
}
.clear-icon:hover {
background-color: #ececec !important;
border-radius: 50%;
padding: 0.4rem;
}

View File

@ -7,6 +7,7 @@ import { FormGroup } from '@angular/forms';
@Component({
selector: 'dmp-criteria-dialog-component',
templateUrl: './dmp-criteria-dialog.component.html',
styleUrls: ['./dmp-criteria-dialog.component.scss']
})
export class DmpCriteriaDialogComponent implements OnInit {

View File

@ -148,7 +148,15 @@
}
.clear-icon {
cursor: pointer;
cursor: pointer;
color: #212121;
padding: 0.4rem;
}
.clear-icon:hover {
background-color: #ececec !important;
border-radius: 50%;
padding: 0.4rem;
}
.normal-btn {

View File

@ -210,7 +210,17 @@ input[type="text"] {
.icon-align {
display: inline-flex;
vertical-align: middle;
// padding-bottom: 0.4rem;
}
.dmp-subtitle,
.dataset-subtitle {
.icon-align {
display: inline-flex;
vertical-align: top;
margin-right: .2rem;
line-height: .95em;
}
}
.dataset-card-actions,

View File

@ -14,6 +14,15 @@
.close-icon {
cursor: pointer;
// margin-right: 20px;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.content {

View File

@ -14,6 +14,15 @@
.close-icon {
cursor: pointer;
// margin-right: 20px;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.content {

View File

@ -6,7 +6,7 @@ import { distinctUntilChanged } from 'rxjs/operators';
import { type } from 'os';
import { SimpleChanges } from '@angular/core';
interface Link {
export interface Link {
/* id of the section*/
id: string;
/* header type h3/h4 */
@ -30,10 +30,11 @@ interface Link {
})
export class TableOfContents extends BaseComponent implements OnInit {
links: Link[] = [];
@Input() links: Link[];
container: string;
headerSelectors = '.toc-page-header, .toc-section-header, .toc-compositeField-header';
@Output() stepFound = new EventEmitter<LinkToScroll>();
@Output() currentLinks = new EventEmitter<Link[]>();
subscription: Subscription;
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
@ -54,72 +55,75 @@ export class TableOfContents extends BaseComponent implements OnInit {
this.linksSubject.next(headers);
});
this.linksSubject.asObservable()
.pipe(distinctUntilChanged((p: HTMLElement[], q: HTMLElement[]) => JSON.stringify(p) == JSON.stringify(q)))
.subscribe(headers => {
const links: Array<Link> = [];
if (!this.links || this.links.length === 0) {
this.linksSubject.asObservable()
.pipe(distinctUntilChanged((p: HTMLElement[], q: HTMLElement[]) => JSON.stringify(p) == JSON.stringify(q)))
.subscribe(headers => {
const links: Array<Link> = [];
if (headers.length) {
let page;
let section;
let show
for (const header of headers) {
let name;
let id;
if (header.classList.contains('toc-page-header')) { // deprecated after removing stepper
name = header.innerText.trim().replace(/^link/, '');
id = header.id;
page = header.id.split('_')[1];
section = undefined;
show = true;
} else if (header.classList.contains('toc-section-header')) {
name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
id = header.id;
page = header.id.split('.')[1];
section = header.id;
if (header.id.split('.')[4]) { show = false; }
else { show = true; }
} else if (header.classList.contains('toc-compositeField-header')) {
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
id = header.id;
// id = header.parentElement.parentElement.parentElement.id;
show = false;
if (headers.length) {
let page;
let section;
let show
for (const header of headers) {
let name;
let id;
if (header.classList.contains('toc-page-header')) { // deprecated after removing stepper
name = header.innerText.trim().replace(/^link/, '');
id = header.id;
page = header.id.split('_')[1];
section = undefined;
show = true;
} else if (header.classList.contains('toc-section-header')) {
name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
id = header.id;
page = header.id.split('.')[1];
section = header.id;
if (header.id.split('.')[4]) { show = false; }
else { show = true; }
} else if (header.classList.contains('toc-compositeField-header')) {
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
id = header.id;
// id = header.parentElement.parentElement.parentElement.id;
show = false;
}
const { top } = header.getBoundingClientRect();
links.push({
name,
id,
type: header.tagName.toLowerCase(),
top: top,
active: false,
page: page,
section: section,
show: show,
selected: false
});
}
const { top } = header.getBoundingClientRect();
links.push({
name,
id,
type: header.tagName.toLowerCase(),
top: top,
active: false,
page: page,
section: section,
show: show,
selected: false
});
}
}
this.links = links;
// Initialize selected for button next on dataset wizard component editor
this.links.length > 0 ? this.links[0].selected = true : null;
})
this.links = links;
// Initialize selected for button next on dataset wizard component editor
this.links.length > 0 ? this.links[0].selected = true : null;
})
}
}
ngOnChanges(changes: SimpleChanges) {
if (!this.isActive && this.links && this.links.length > 0) {
this.links.forEach(link => {
link.selected = false;
})
this.links[0].selected = true;
}
// if (!this.isActive && this.links && this.links.length > 0) {
// this.links.forEach(link => {
// link.selected = false;
// })
// this.links[0].selected = true;
// }
}
goToStep(link: Link) {
// this.selectedLinkId = link.id;
this.stepFound.emit({
page: link.page,
section: link.section
});
this.currentLinks.emit(this.links);
setTimeout(() => {
const target = document.getElementById(link.id);
@ -133,15 +137,15 @@ export class TableOfContents extends BaseComponent implements OnInit {
}
toggle(headerLink: Link) {
const headerPage = +headerLink.name.split(" ",1);
const headerPage = +headerLink.name.split(" ", 1);
let innerPage;
for (const link of this.links) {
link.selected = false;
if (link.type === 'mat-expansion-panel') {
innerPage = +link.name.split(".",1)[0];
if(isNaN(innerPage)) { innerPage = +link.name.split(" ",1) }
innerPage = +link.name.split(".", 1)[0];
if (isNaN(innerPage)) { innerPage = +link.name.split(" ", 1) }
} else if (link.type === 'h5') {
innerPage = +link.name.split(".",1)[0];
innerPage = +link.name.split(".", 1)[0];
}
if (headerPage === innerPage && (link.type !== 'mat-expansion-panel' || (link.type === 'mat-expansion-panel' && link.id.split(".")[4]))) {
link.show = !link.show;

View File

@ -8,9 +8,14 @@
<div class="icon-bar3"></div>
</div>
<a class="logo" [routerLink]="['home']"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
<div class="navbar-toggler ml-auto" *ngIf="isAuthenticated();else loginoption">
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" [matMenuTriggerFor]="toggleMenu" [matTooltip]="this.getPrincipalName()">
</div>
<!-- <button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
<mat-icon class="toggle-icon">view_headline</mat-icon>
</button>
</button> -->
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
@ -44,12 +49,13 @@
</div>
<mat-menu #toggleMenu="matMenu">
<div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()">
<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
<!-- <div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()"> -->
<ul class="list m-2">
<li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar">
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
<!-- <li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar"> -->
<!-- <img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()"> -->
<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
</li>
<!-- </li> -->
<ng-template #loginoption>
<li class="d-flex justify-content-center avatar">
<button mat-button [routerLink]=" ['/login'] " class="d-flex justify-content-center">
@ -59,7 +65,7 @@
</ng-template>
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
<a class="faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang">
<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang" (click)="$event.stopPropagation();">
<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
<mat-icon>arrow_drop_down</mat-icon>
</button>

View File

@ -37,7 +37,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
selectedLanguage = 'en';
private user: UserListingModel;
@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
@ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger;
@ViewChild(MatMenuTrigger, { static: false }) trigger: MatMenuTrigger;
constructor(location: Location,
private element: ElementRef,
@ -86,11 +86,11 @@ export class NavbarComponent extends BaseComponent implements OnInit {
openMyMenu() {
this.trigger.openMenu();
}
}
closeMyMenu() {
this.trigger.closeMenu();
}
}
sidebarOpen() {
const toggleButton = this.toggleButton;

View File

@ -147,11 +147,18 @@
.check-icon {
color: #129d99;
transform: scale(0.75);
padding: 0.4rem;
}
.clear-icon {
color: #f16868;
cursor: pointer;
color: #212121;
padding: 0.4rem;
}
.clear-icon:hover {
background-color: #ececec !important;
border-radius: 50%;
}
.add-new-btn {

View File

@ -10,6 +10,15 @@
.close-icon {
cursor: pointer;
// margin-right: 20px;
padding: .4rem;
width: auto !important;
height: auto !important;
}
.close-icon:hover {
background-color: #ECECED !important;
border-radius: 50%;
}
.content {