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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: calc(100vh - 246px);
|
height: calc(100vh - 246px);
|
||||||
max-width: 366px;
|
// max-width: 366px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stepper-options {
|
.stepper-options {
|
||||||
|
@ -317,8 +317,8 @@
|
||||||
|
|
||||||
.stepper-list {
|
.stepper-list {
|
||||||
.toc-pane-container {
|
.toc-pane-container {
|
||||||
padding-left: 0.2rem;
|
// padding-left: 0.2rem;
|
||||||
overflow-x: hidden;
|
// overflow-x: hidden;
|
||||||
span {
|
span {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
|
@ -75,7 +75,7 @@
|
||||||
<ng-container *ngSwitchCase="tocentriesType.FieldSet">
|
<ng-container *ngSwitchCase="tocentriesType.FieldSet">
|
||||||
|
|
||||||
<!-- FIELDSET CASE -->
|
<!-- 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"> -->
|
<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->
|
||||||
<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
|
<!-- *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)">
|
<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 *ngIf="form.get('sections')" class="col-12"><!-- MAYBEE NOT NEEDED-->
|
||||||
<div *ngFor="let sectionEntry of tocentry.subEntries; let j = index;" class="row">
|
<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"
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</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 { FormGroup, FormArray, AbstractControl } from '@angular/forms';
|
||||||
import { FormFocusService } from '../../form-focus/form-focus.service';
|
import { FormFocusService } from '../../form-focus/form-focus.service';
|
||||||
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
|
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
|
||||||
|
@ -27,8 +27,11 @@ export class FormSectionComponent implements OnInit, OnChanges {
|
||||||
// sub = true;
|
// sub = true;
|
||||||
subsectionLinkToScroll: LinkToScroll;
|
subsectionLinkToScroll: LinkToScroll;
|
||||||
|
|
||||||
|
|
||||||
|
@Output() askedToScroll = new EventEmitter<void>();
|
||||||
|
|
||||||
tocentriesType = ToCEntryType;
|
tocentriesType = ToCEntryType;
|
||||||
@Input() TOCENTRY_ID_PREFIX="TOCENTRY_ID_PREFIX";
|
@Input() TOCENTRY_ID_PREFIX="";
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
public visibilityRulesService: VisibilityRulesService,
|
public visibilityRulesService: VisibilityRulesService,
|
||||||
|
@ -90,4 +93,11 @@ export class FormSectionComponent implements OnInit, OnChanges {
|
||||||
// next(compositeField: CompositeField) {
|
// next(compositeField: CompositeField) {
|
||||||
// this.formFocusService.focusNext(compositeField);
|
// this.formFocusService.focusNext(compositeField);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onAskedToScroll(){
|
||||||
|
this.panelExpanded = true;
|
||||||
|
this.askedToScroll.emit();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
<mat-accordion [multi]="true">
|
<mat-accordion [multi]="true">
|
||||||
|
|
||||||
<div *ngFor="let pageEntry of tocentries; let z = index;">
|
<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-expansion-panel-header>
|
||||||
<mat-panel-title>
|
<mat-panel-title>
|
||||||
|
@ -38,7 +38,9 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [path]="z+1"
|
<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [path]="z+1"
|
||||||
[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
|
[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
|
||||||
[linkToScroll]="linkToScroll"></app-form-section>
|
[linkToScroll]="linkToScroll"
|
||||||
|
(askedToScroll)="onAskedToScroll(expansionPanel)"
|
||||||
|
></app-form-section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mat-expansion-panel>
|
</mat-expansion-panel>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core';
|
import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core';
|
||||||
import { AbstractControl, AbstractControlOptions, FormArray, FormGroup } from '@angular/forms';
|
import { AbstractControl, AbstractControlOptions, FormArray, FormGroup } from '@angular/forms';
|
||||||
|
import { MatExpansionPanel } from '@angular/material';
|
||||||
import { MatHorizontalStepper } from '@angular/material/stepper';
|
import { MatHorizontalStepper } from '@angular/material/stepper';
|
||||||
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
|
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';
|
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[];
|
tocentries: ToCEntry[];
|
||||||
@Input() form: FormGroup;
|
@Input() form: FormGroup;
|
||||||
|
|
||||||
@Input() TOCENTRY_ID_PREFIX="TocEntRy";
|
@Input() TOCENTRY_ID_PREFIX="";
|
||||||
|
|
||||||
|
|
||||||
private _form: FormGroup;
|
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{
|
private _buildRecursively(form: FormGroup,whatAmI:ToCEntryType):ToCEntry{
|
||||||
if(!form) return null;
|
if(!form) return null;
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,9 @@
|
||||||
[ngStyle]="calculateStyle(entry)"
|
[ngStyle]="calculateStyle(entry)"
|
||||||
[ngClass]="calculateClass(entry)"
|
[ngClass]="calculateClass(entry)"
|
||||||
>
|
>
|
||||||
{{entry.numbering}}. {{entry.label}}
|
<span>
|
||||||
|
{{entry.numbering}}. {{entry.label}}
|
||||||
|
</span>
|
||||||
<!-- <ng-container *ngIf="entry.subEntries && entry.subEntries.length && !expandChildren[idx]">
|
<!-- <ng-container *ngIf="entry.subEntries && entry.subEntries.length && !expandChildren[idx]">
|
||||||
<small>
|
<small>
|
||||||
({{entry.subEntries.length}})
|
({{entry.subEntries.length}})
|
||||||
|
|
|
@ -1,21 +1,20 @@
|
||||||
|
|
||||||
.internal-table{
|
.internal-table{
|
||||||
margin-left: 1.2em;
|
margin-left: 1em;
|
||||||
// width: inherit;
|
padding-left: 0.2rem;
|
||||||
}
|
}
|
||||||
// .table-entry-container{
|
|
||||||
// // overflow: hidden;
|
|
||||||
// // width: inherit;
|
|
||||||
// }
|
|
||||||
.table-entry{
|
.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);
|
color: rgba(0, 0, 0, 0.54);
|
||||||
transition: color 100ms;
|
transition: color 100ms;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
span{
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-entry:hover{
|
.table-entry:hover{
|
||||||
|
|
|
@ -23,7 +23,7 @@ export class TableOfContentsInternal implements OnInit {
|
||||||
|
|
||||||
expandChildren:boolean[];
|
expandChildren:boolean[];
|
||||||
tocEntryTypeEnum = ToCEntryType;
|
tocEntryTypeEnum = ToCEntryType;
|
||||||
@Input() TOCENTRY_ID_PREFIX="TocEntRy";
|
@Input() TOCENTRY_ID_PREFIX="";
|
||||||
|
|
||||||
|
|
||||||
constructor(public visibilityRulesService: VisibilityRulesService){
|
constructor(public visibilityRulesService: VisibilityRulesService){
|
||||||
|
@ -65,8 +65,7 @@ export class TableOfContentsInternal implements OnInit {
|
||||||
if(element){
|
if(element){
|
||||||
element.scrollIntoView({behavior:'smooth'});
|
element.scrollIntoView({behavior:'smooth'});
|
||||||
}
|
}
|
||||||
}, 200);
|
}, 300);
|
||||||
// event.stopPropagation();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
|
|
||||||
<div *ngIf="tocentries" class="docs-toc-container">
|
<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"
|
<table-of-contents-internal [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [tocentries]="tocentries"
|
||||||
(entrySelected)="onToCentrySelected($event)"
|
(entrySelected)="onToCentrySelected($event)"
|
||||||
[selected]="tocentrySelected"
|
[selected]="tocentrySelected"
|
||||||
|
|
|
@ -73,3 +73,8 @@ span {
|
||||||
// padding-left: 1.1em;
|
// padding-left: 1.1em;
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
.internal-table{
|
||||||
|
max-width: 320px;
|
||||||
|
min-width: 320px;
|
||||||
|
}
|
Loading…
Reference in New Issue