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

UI Fixes. Panels in wizard expand all the way up to page level (when selected from table of contents). Hide overflown text in table.

This commit is contained in:
Kristian Ntavidi 2021-03-18 10:52:18 +02:00
parent 72d40b0f33
commit 1389b3dbf5
10 changed files with 54 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
View File

@ -277,7 +277,7 @@
display: flex;
flex-direction: column;
height: calc(100vh - 246px);
max-width: 366px;
// max-width: 366px;
}
.stepper-options {
@ -317,8 +317,8 @@
.stepper-list {
.toc-pane-container {
padding-left: 0.2rem;
overflow-x: hidden;
// padding-left: 0.2rem;
// overflow-x: hidden;
span {
text-align: left;
font-weight: 400;

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

@ -75,7 +75,7 @@
<ng-container *ngSwitchCase="tocentriesType.FieldSet">
<!-- FIELDSET CASE -->
<div *ngFor="let fieldsetEntry of tocentry.subEntries; let i = index;" class="col-12" [id]="TOCENTRY_ID_PREFIX+fieldsetEntry.id" (click)="panelExpanded = true">
<div *ngFor="let fieldsetEntry of tocentry.subEntries; let i = index;" class="col-12" [id]="TOCENTRY_ID_PREFIX+fieldsetEntry.id" (click)="onAskedToScroll()">
<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->
<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(fieldsetEntry.form.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)">
@ -123,7 +123,9 @@
<div *ngIf="form.get('sections')" class="col-12"><!-- MAYBEE NOT NEEDED-->
<div *ngFor="let sectionEntry of tocentry.subEntries; let j = index;" class="row">
<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [form]="sectionEntry.form" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
[datasetProfileId]="datasetProfileId"></app-form-section>
[datasetProfileId]="datasetProfileId"
(askedToScroll)="onAskedToScroll()"
></app-form-section>
</div>
</div>
</ng-container>

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

@ -1,4 +1,4 @@
import { AfterViewInit, Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { AfterViewInit, Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormArray, AbstractControl } from '@angular/forms';
import { FormFocusService } from '../../form-focus/form-focus.service';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
@ -26,9 +26,12 @@ export class FormSectionComponent implements OnInit, OnChanges {
panelExpanded = true;
// sub = true;
subsectionLinkToScroll: LinkToScroll;
@Output() askedToScroll = new EventEmitter<void>();
tocentriesType = ToCEntryType;
@Input() TOCENTRY_ID_PREFIX="TOCENTRY_ID_PREFIX";
@Input() TOCENTRY_ID_PREFIX="";
constructor(
public visibilityRulesService: VisibilityRulesService,
@ -90,4 +93,11 @@ export class FormSectionComponent implements OnInit, OnChanges {
// next(compositeField: CompositeField) {
// this.formFocusService.focusNext(compositeField);
// }
onAskedToScroll(){
this.panelExpanded = true;
this.askedToScroll.emit();
}
}

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

@ -22,7 +22,7 @@
<mat-accordion [multi]="true">
<div *ngFor="let pageEntry of tocentries; let z = index;">
<mat-expansion-panel [expanded]="true">
<mat-expansion-panel [expanded]="true" #expansionPanel>
<mat-expansion-panel-header>
<mat-panel-title>
@ -38,7 +38,9 @@
<div class="row">
<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [path]="z+1"
[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
[linkToScroll]="linkToScroll"></app-form-section>
[linkToScroll]="linkToScroll"
(askedToScroll)="onAskedToScroll(expansionPanel)"
></app-form-section>
</div>
</div>
</mat-expansion-panel>

10
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
View File

@ -1,5 +1,6 @@
import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core';
import { AbstractControl, AbstractControlOptions, FormArray, FormGroup } from '@angular/forms';
import { MatExpansionPanel } from '@angular/material';
import { MatHorizontalStepper } from '@angular/material/stepper';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
import { DatasetProfileTableOfContentsInternalSection } from '@app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
@ -24,7 +25,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
tocentries: ToCEntry[];
@Input() form: FormGroup;
@Input() TOCENTRY_ID_PREFIX="TocEntRy";
@Input() TOCENTRY_ID_PREFIX="";
private _form: FormGroup;
@ -67,6 +68,13 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
onAskedToScroll(panel: MatExpansionPanel){
panel.open();
}
private _buildRecursively(form: FormGroup,whatAmI:ToCEntryType):ToCEntry{
if(!form) return null;

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

@ -10,7 +10,9 @@
[ngStyle]="calculateStyle(entry)"
[ngClass]="calculateClass(entry)"
>
{{entry.numbering}}. {{entry.label}}
<span>
{{entry.numbering}}. {{entry.label}}
</span>
<!-- <ng-container *ngIf="entry.subEntries && entry.subEntries.length && !expandChildren[idx]">
<small>
({{entry.subEntries.length}})

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

@ -1,21 +1,20 @@
.internal-table{
margin-left: 1.2em;
// width: inherit;
margin-left: 1em;
padding-left: 0.2rem;
}
// .table-entry-container{
// // overflow: hidden;
// // width: inherit;
// }
.table-entry{
cursor: pointer;
// display: block;
text-overflow: ellipsis;
white-space: nowrap;
// overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
padding-left: 0.2rem;
color: rgba(0, 0, 0, 0.54);
transition: color 100ms;
display: block;
span{
white-space: nowrap;
}
}
.table-entry:hover{

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

@ -23,7 +23,7 @@ export class TableOfContentsInternal implements OnInit {
expandChildren:boolean[];
tocEntryTypeEnum = ToCEntryType;
@Input() TOCENTRY_ID_PREFIX="TocEntRy";
@Input() TOCENTRY_ID_PREFIX="";
constructor(public visibilityRulesService: VisibilityRulesService){
@ -65,8 +65,7 @@ export class TableOfContentsInternal implements OnInit {
if(element){
element.scrollIntoView({behavior:'smooth'});
}
}, 200);
// event.stopPropagation();
}, 300);
}
}

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

@ -26,7 +26,7 @@
<div *ngIf="tocentries" class="docs-toc-container">
<div class="scroll-container col-12">
<div class="scroll-container col-12 internal-table">
<table-of-contents-internal [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [tocentries]="tocentries"
(entrySelected)="onToCentrySelected($event)"
[selected]="tocentrySelected"

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

@ -72,4 +72,9 @@ span {
// .internal-table-outer{
// padding-left: 1.1em;
// width: 100%;
// }
// }
.internal-table{
max-width: 320px;
min-width: 320px;
}