CompositeField Set scss To Title For Render

This commit is contained in:
Diamantis Tziotzios 2019-03-07 12:47:31 +02:00
parent c8bea58d89
commit 583db09764
4 changed files with 22 additions and 12 deletions

View File

@ -1,7 +1,7 @@
<div class="row">
<h4 *ngIf="isComposite" style="font-weight: bold" class="col-auto" >{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.TITLE'
<h4 *ngIf="isComposite" class="col-auto titleStile" >{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.TITLE'
| translate}}</h4>
<h4 *ngIf="!isComposite" style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SIMPLE-FIELD-TITLE'
<h4 *ngIf="!isComposite" class="col-auto titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SIMPLE-FIELD-TITLE'
| translate}}</h4>
<mat-checkbox class="col-auto" [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX'
| translate}}</mat-checkbox>
@ -51,19 +51,19 @@
[formControl]="this.form.get('extendedDescription')"></textarea>
</mat-form-field>
<mat-form-field class="col-md-6">
<textarea matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
<textarea matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.' | translate}}"
[formControl]="this.form.get('additionalInformation')"></textarea>
</mat-form-field>
<app-dataset-profile-editor-field-component class="col-12" *ngIf="!isComposite" [form]="form.get('fields').get(''+0)"
[showOrdinal]="false" [indexPath]="indexPath + 'f' + 0" [viewOnly]="viewOnly"></app-dataset-profile-editor-field-component>
</div>
<div *ngIf="isComposite" class="row">
<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' |
<h4 class="col-12 titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' |
translate}}</h4>
<div class="col-12">
<mat-expansion-panel *ngFor="let field of form.get('fields')['controls'] let i=index;" #panel>
<mat-expansion-panel-header>
<mat-panel-title>{{i + 1}}. {{getFieldTile(field, i)}}</mat-panel-title>
<mat-panel-title class="cardTitle">{{i + 1}}. {{getFieldTile(field, i)}}</mat-panel-title>
<div class="row">
<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteField(i);" [disabled]="viewOnly">
<mat-icon>delete</mat-icon>

View File

@ -4,4 +4,8 @@
.deleteBtn{
margin-right:0.7em;
}
.titleStile{
font-weight: bold;
}

View File

@ -4,16 +4,17 @@
<div *ngIf="form.get('fields').length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)"
class="col-12">
<div class="row">
<h5 *ngIf="form.get('title').value && !isChild" style="font-weight:bold; color: #3a3737;" class="col-auto">
<h5 *ngIf="form.get('title').value && !isChild" class="col-auto copositeField">
{{form.get('numbering').value}}
{{form.get('title').value}}
<!-- <a *ngIf="this.markForConsiderationService.exists(compositeField)" (click)="markForConsideration()" style="cursor: pointer">
Mark For Consideration
</a> -->
Mark For Consideration
</a> -->
</h5>
<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
<div cals="col"></div>
<h6 *ngIf="form.get('description').value && !isChild" class="col-12">{{form.get('description').value}}</h6>
<h6 *ngIf="form.get('extendedDescription').value && !isChild" class="col-12">
<i>{{form.get('extendedDescription').value}}</i>
@ -30,12 +31,12 @@
</div>
<div *ngIf="form.get('fields').length > 1" class="col-12">
<div class="row">
<h5 *ngIf="form.get('title').value && !isChild" style="font-weight:bold; color: #3a3737;" class="col-auto">
<h5 *ngIf="form.get('title').value && !isChild" class="col-auto copositeField">
{{form.get('numbering').value}}
{{form.get('title').value}}</h5>
<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
<div cals="col"></div>
<h5 *ngIf="form.get('description').value && !isChild" class="col-12">{{form.get('description').value}}</h5>
<h5 *ngIf="form.get('extendedDescription').value && !isChild" class="col-12">
<i>{{form.get('extendedDescription').value}}</i></h5>

View File

@ -0,0 +1,5 @@
.copositeField{
font-weight:bold;
color: #3a3737;
max-width:100%;
}