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 {
font-weight: bold;
color: #3a3737;
max-width: 100%;
padding-top: 1em;
}
// font-weight: bold;
// color: #3a3737;
// max-width: 100%;
// 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 {
width: 100%
width: 100%;
}
.text-area {
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-header>
<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-expansion-panel-header>
<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>
<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">
<!-- <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 {
.expansion-panel {
// background-color: #eeeeee54;
background-color: white;
margin-bottom: 1em;
}
.addOneFieldButton {
margin-top: -15px;
margin-left: -11px;
}
.expansion-panel {
// background-color: #eeeeee54;
background-color: white;
margin-bottom: 1em;
}
.addOneFieldButton {
margin-top: -15px;
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 {
border: 0.2em solid lightgray;
border-radius: 0.5em;
margin-bottom: 0.5em;
border: 0.2em solid lightgray;
border-radius: 0.5em;
margin-bottom: 0.5em;
}
.mat-expansion-panel-header-description {
padding-bottom: 18px;
color: black;
padding-bottom: 18px;
color: black;
}
::ng-deep .mat-expansion-panel-header {
height: auto !important;
min-height: 48px;
height: auto !important;
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" -->
<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 *ngIf="link.show && link.type !== 'span'" 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 *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
</span>
<!-- </nav> -->
</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;
}
.docs-level-mat-expansion-panel {
margin-left: 12px;
}
// .docs-level-mat-expansion-panel {
// margin-left: 12px;
// }
.docs-level-h5 {
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) {
let name;
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/, '');
id = header.id;
page = header.id.split('_')[1];
@ -76,7 +76,8 @@ export class TableOfContents extends BaseComponent implements OnInit {
id = header.id;
page = header.id.split('.')[1];
section = header.id;
show = false;
if (header.id.split('.')[4]) { show = false; }
else { show = true; }
} else if (header.classList.contains('toc-copositeField-header')) {
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
id = header.id;
@ -122,25 +123,28 @@ export class TableOfContents extends BaseComponent implements OnInit {
}
toggle(headerLink: Link) {
const page = +headerLink.id.split("_", 2)[1];
const headerPage = +headerLink.name.split(" ",1);
let innerPage;
for (const link of this.links) {
link.selected = false;
console.log(link);
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') {
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;
}
}
headerLink.selected = true;
}
getIndex(link: Link): number {
return +link.id.split("_", 2)[1];
}
// getIndex(link: Link): number {
// return +link.id.split("_", 2)[1];
// }
}