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

Removes stepper from dataset description

This commit is contained in:
apapachristou 2020-09-23 10:19:05 +03:00
parent b75d7606cf
commit 57defab591
7 changed files with 68 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss
View File

@ -1,6 +1,14 @@
.copositeField { .copositeField {
font-weight: bold; // font-weight: bold;
color: #3a3737; // color: #3a3737;
max-width: 100%; // max-width: 100%;
padding-top: 1em; // padding-top: 1em;
} text-align: left;
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-top: 1.625rem;
margin-bottom: 0.625rem;
}

11
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.scss
View File

@ -4,10 +4,19 @@
} }
.full-width { .full-width {
width: 100% width: 100%;
} }
.text-area { .text-area {
box-sizing: content-box; box-sizing: content-box;
} }
} }
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem;
padding: 0.6em 0 1em 0 !important;
}

4
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
View File

@ -3,11 +3,11 @@
<mat-expansion-panel class="row expansion-panel toc-section-header" [id]="pathName" [(expanded)]="panelExpanded"> <mat-expansion-panel class="row expansion-panel toc-section-header" [id]="pathName" [(expanded)]="panelExpanded">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
<h6>{{form.get('numbering').value}} {{form.get('title').value}}</h6> <h6 class='panel-title'>{{form.get('numbering').value}} {{form.get('title').value}}</h6>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-panel-description class="col-12"> <mat-panel-description class="col-12">
<h6 *ngIf="form.get('description').value">{{form.get('description').value}}</h6> <h6 class='panel-desc' *ngIf="form.get('description').value">{{form.get('description').value}}</h6>
</mat-panel-description> </mat-panel-description>
<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12"> <div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">
<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> --> <!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->

43
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss
View File

@ -1,25 +1,36 @@
.dynamic-form-section { .dynamic-form-section {
.expansion-panel { .expansion-panel {
// background-color: #eeeeee54; // background-color: #eeeeee54;
background-color: white; background-color: white;
margin-bottom: 1em; margin-bottom: 1em;
} }
.addOneFieldButton { .addOneFieldButton {
margin-top: -15px; margin-top: -15px;
margin-left: -11px; margin-left: -11px;
} }
.panel-title,
.panel-desc {
text-align: left;
font-weight: 700;
font-size: 16px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-top: 1.625rem;
margin-bottom: 0.625rem;
}
} }
.styleBorder { .styleBorder {
border: 0.2em solid lightgray; border: 0.2em solid lightgray;
border-radius: 0.5em; border-radius: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.mat-expansion-panel-header-description { .mat-expansion-panel-header-description {
padding-bottom: 18px; padding-bottom: 18px;
color: black; color: black;
} }
::ng-deep .mat-expansion-panel-header { ::ng-deep .mat-expansion-panel-header {
height: auto !important; height: auto !important;
min-height: 48px; min-height: 48px;
} }

4
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.html
View File

@ -4,9 +4,7 @@
<!-- <a [href]="_rootUrl + '#' + link.id" --> <!-- <a [href]="_rootUrl + '#' + link.id" -->
<div class="scroll-container"> <div class="scroll-container">
<span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-level-{{link.type}} docs-link mt-0" [class.docs-active]="link.active"> <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-level-{{link.type}} docs-link mt-0" [class.docs-active]="link.active">
<span *ngIf="link.show && link.type !== 'span'" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span> <span *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
<span *ngIf="link.show && link.type === 'span'" class="link-name"><span [class.selected]="(link.selected && isActive)">{{this.getIndex(link) + 1}}. {{link.name}}</span></span>
<!-- {{link.name}} -->
</span> </span>
<!-- </nav> --> <!-- </nav> -->
</div> </div>

6
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.scss
View File

@ -61,9 +61,9 @@ span {
opacity: 1 !important; opacity: 1 !important;
} }
.docs-level-mat-expansion-panel { // .docs-level-mat-expansion-panel {
margin-left: 12px; // margin-left: 12px;
} // }
.docs-level-h5 { .docs-level-h5 {
margin-left: 24px; margin-left: 24px;

20
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts
View File

@ -65,7 +65,7 @@ export class TableOfContents extends BaseComponent implements OnInit {
for (const header of headers) { for (const header of headers) {
let name; let name;
let id; let id;
if (header.classList.contains('toc-page-header')) { if (header.classList.contains('toc-page-header')) { // deprecated after removing stepper
name = header.innerText.trim().replace(/^link/, ''); name = header.innerText.trim().replace(/^link/, '');
id = header.id; id = header.id;
page = header.id.split('_')[1]; page = header.id.split('_')[1];
@ -76,7 +76,8 @@ export class TableOfContents extends BaseComponent implements OnInit {
id = header.id; id = header.id;
page = header.id.split('.')[1]; page = header.id.split('.')[1];
section = header.id; section = header.id;
show = false; if (header.id.split('.')[4]) { show = false; }
else { show = true; }
} else if (header.classList.contains('toc-copositeField-header')) { } else if (header.classList.contains('toc-copositeField-header')) {
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, ''); name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
id = header.id; id = header.id;
@ -122,25 +123,28 @@ export class TableOfContents extends BaseComponent implements OnInit {
} }
toggle(headerLink: Link) { toggle(headerLink: Link) {
const page = +headerLink.id.split("_", 2)[1]; const headerPage = +headerLink.name.split(" ",1);
let innerPage; let innerPage;
for (const link of this.links) { for (const link of this.links) {
link.selected = false; link.selected = false;
console.log(link);
if (link.type === 'mat-expansion-panel') { if (link.type === 'mat-expansion-panel') {
innerPage = +link.name.split(" ",1)[0]; innerPage = +link.name.split(".",1)[0];
if(isNaN(innerPage)) { innerPage = +link.name.split(" ",1) }
} else if (link.type === 'h5') { } else if (link.type === 'h5') {
innerPage = +link.name.split(".",1)[0]; innerPage = +link.name.split(".",1)[0];
} }
if (page + 1 === innerPage && link.type !== 'span') { console.log('innerPage ', innerPage)
if (headerPage === innerPage && (link.type !== 'mat-expansion-panel' || (link.type === 'mat-expansion-panel' && link.id.split(".")[4]))) {
link.show = !link.show; link.show = !link.show;
} }
} }
headerLink.selected = true; headerLink.selected = true;
} }
getIndex(link: Link): number { // getIndex(link: Link): number {
return +link.id.split("_", 2)[1]; // return +link.id.split("_", 2)[1];
} // }
} }