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:
parent
72d40b0f33
commit
1389b3dbf5
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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';
|
||||
|
@ -27,8 +27,11 @@ export class FormSectionComponent implements OnInit, OnChanges {
|
|||
// 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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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}})
|
||||
|
|
|
@ -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{
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -73,3 +73,8 @@ span {
|
|||
// padding-left: 1.1em;
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
.internal-table{
|
||||
max-width: 320px;
|
||||
min-width: 320px;
|
||||
}
|
Loading…
Reference in New Issue