Description boxes in admin forms replaced with rich text editor <angular-editor>.
1. dataset-profile-editor-composite-field.component.ts & dataset-profile-editor-section.component.ts & dataset-profile-editor.component.ts: Initialize AngularEditorConfig. 2. dataset-profile-editor-composite-field.component.html & dataset-profile-editor-section.component.html & dataset-profile-editor.component.html: Use <angular-editor> in description. 3. multiple-auto-complete.component.html & dataset-profile-listing.component.html & form-section.component.html: Show description as html. 4. dataset-profile.module.ts: Imported HttpClientModule, AngularEditorModule (needed for <angular-editor>). 5. available-profiles.component.html: Show description as html, under the Dataset Template title, not as tooltip (matTooltip does not receive html). 6. available-profiles.component.ts: Added styleUrls: ['available-profiles.component.scss']. 7. available-profiles.component.scss: [NEW] Added css for class "list-option" to cut description if too long. 8. form-composite-title.component.html: Show description and extendedDescription as html | Add view more/less functionality to show/hide extendedDescription. 9. form-composite-title.component.ts: Added "public showExtendedDescription: boolean = false;" field. 10. form-composite-title.component.scss: Added css for "more" class, to make "view more/less" seem like link. 11. assets/i18n/: In language files added DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE (-LESS). 12. assets/styles.css: Added css for <angular-editor>, to be similar to the other text areas and forms.
This commit is contained in:
parent
0e97e6c0a8
commit
198061aeaa
|
@ -19,6 +19,7 @@
|
||||||
"@angular/forms": "^12.2.7",
|
"@angular/forms": "^12.2.7",
|
||||||
"@angular/material-moment-adapter": "^12.2.7",
|
"@angular/material-moment-adapter": "^12.2.7",
|
||||||
"@angular/platform-browser": "^12.2.7",
|
"@angular/platform-browser": "^12.2.7",
|
||||||
|
"@kolkov/angular-editor": "^1.2.0",
|
||||||
"@ngx-translate/core": "^13.0.0",
|
"@ngx-translate/core": "^13.0.0",
|
||||||
"@ngx-translate/http-loader": "^6.0.0",
|
"@ngx-translate/http-loader": "^6.0.0",
|
||||||
"@swimlane/ngx-datatable": "^20.0.0",
|
"@swimlane/ngx-datatable": "^20.0.0",
|
||||||
|
|
|
@ -45,7 +45,7 @@
|
||||||
<div class="title-fn">
|
<div class="title-fn">
|
||||||
<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
|
<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
|
||||||
<br *ngIf="_subtitleFn(item)">
|
<br *ngIf="_subtitleFn(item)">
|
||||||
<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
|
<small *ngIf="_subtitleFn(item)" [innerHTML]="_subtitleFn(item)"></small>
|
||||||
</div>
|
</div>
|
||||||
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
|
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -51,6 +51,8 @@ import { DatasetProfileEditorSectionFieldSetComponent } from './editor/component
|
||||||
import { ParseStatus } from './listing/pipe/parse-status.pipe';
|
import { ParseStatus } from './listing/pipe/parse-status.pipe';
|
||||||
import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents';
|
import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents';
|
||||||
import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
|
import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
|
||||||
|
import {HttpClientModule} from "@angular/common/http";
|
||||||
|
import {AngularEditorModule} from "@kolkov/angular-editor";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -68,7 +70,8 @@ import { DatasetProfileTableOfContentsInternalSection } from './table-of-content
|
||||||
DragDropModule,
|
DragDropModule,
|
||||||
MatBadgeModule,
|
MatBadgeModule,
|
||||||
DragulaModule,
|
DragulaModule,
|
||||||
AutoCompleteModule
|
AutoCompleteModule,
|
||||||
|
HttpClientModule, AngularEditorModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
DatasetProfileListingComponent,
|
DatasetProfileListingComponent,
|
||||||
|
|
|
@ -77,17 +77,19 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
|
<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
|
||||||
<div class="row" *ngIf="showDescription">
|
<div *ngIf="showDescription" class="mb-4">
|
||||||
<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
|
<h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5>
|
||||||
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
|
<div class="editor-wrapper row">
|
||||||
[formControl]="this.form.get('description')">
|
<angular-editor class="full-width editor" id="editor1" [formControl]="form.get('description')" [config]="editorConfig"
|
||||||
</mat-form-field>
|
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"></angular-editor>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="showExtendedDescription" class="mb-4">
|
||||||
|
<h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</h5>
|
||||||
|
<div class="editor-wrapper row">
|
||||||
|
<angular-editor class="full-width editor" id="editor2" [formControl]="form.get('extendedDescription')" [config]="editorConfig"
|
||||||
|
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"></angular-editor>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" *ngIf="showExtendedDescription">
|
|
||||||
<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
|
|
||||||
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
|
|
||||||
[formControl]="this.form.get('extendedDescription')"/>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row" *ngIf="showAdditionalInfo">
|
<div class="row" *ngIf="showAdditionalInfo">
|
||||||
<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
|
<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
|
||||||
|
|
|
@ -24,6 +24,7 @@ import { Subject } from 'rxjs';
|
||||||
import { debounceTime, delay, map, takeUntil, tap } from 'rxjs/operators';
|
import { debounceTime, delay, map, takeUntil, tap } from 'rxjs/operators';
|
||||||
import { GENERAL_ANIMATIONS } from '../../animations/animations';
|
import { GENERAL_ANIMATIONS } from '../../animations/animations';
|
||||||
import { BaseComponent } from '@common/base/base.component';
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
|
import {AngularEditorConfig} from "@kolkov/angular-editor";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dataset-profile-editor-composite-field-component',
|
selector: 'app-dataset-profile-editor-composite-field-component',
|
||||||
|
@ -32,6 +33,39 @@ import { BaseComponent } from '@common/base/base.component';
|
||||||
animations:[GENERAL_ANIMATIONS]
|
animations:[GENERAL_ANIMATIONS]
|
||||||
})
|
})
|
||||||
export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent implements OnInit, OnChanges {
|
export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent implements OnInit, OnChanges {
|
||||||
|
editorConfig: AngularEditorConfig = {
|
||||||
|
editable: true,
|
||||||
|
spellcheck: true,
|
||||||
|
height: 'auto',
|
||||||
|
minHeight: '0',
|
||||||
|
maxHeight: 'auto',
|
||||||
|
width: '100%',
|
||||||
|
minWidth: '0',
|
||||||
|
translate: 'yes',
|
||||||
|
enableToolbar: true,
|
||||||
|
showToolbar: true,
|
||||||
|
placeholder: 'Enter text here...',
|
||||||
|
defaultParagraphSeparator: '',
|
||||||
|
defaultFontName: '',
|
||||||
|
defaultFontSize: '',
|
||||||
|
sanitize: true,
|
||||||
|
toolbarPosition: 'top',
|
||||||
|
toolbarHiddenButtons: [
|
||||||
|
[
|
||||||
|
'heading',
|
||||||
|
'fontName'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'fontSize',
|
||||||
|
'backgroundColor',
|
||||||
|
'customClasses',
|
||||||
|
'insertImage',
|
||||||
|
'insertVideo',
|
||||||
|
'removeFormat'//,
|
||||||
|
// 'toggleEditorMode'
|
||||||
|
]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
@Input() form: FormGroup;
|
@Input() form: FormGroup;
|
||||||
@Input() indexPath: string;
|
@Input() indexPath: string;
|
||||||
|
|
|
@ -29,13 +29,12 @@
|
||||||
</mat-form-field> -->
|
</mat-form-field> -->
|
||||||
<div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
|
<div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
|
||||||
<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
|
<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
|
||||||
<mat-form-field class="col-12">
|
<div class="col-12">
|
||||||
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"
|
<div class="editor-wrapper">
|
||||||
formControlName="description">
|
<angular-editor class="editor" id="editor" formControlName="description" [config]="editorConfig"
|
||||||
<!-- <mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
|
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"></angular-editor>
|
||||||
</mat-form-field>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="col-md-6">
|
<!-- <div class="col-md-6">
|
||||||
<label>Default Visibility</label>
|
<label>Default Visibility</label>
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { SectionEditorModel } from '@app/ui/admin/dataset-profile/admin/section-
|
||||||
import { BaseComponent } from '@common/base/base.component';
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
import { Guid } from '@common/types/guid';
|
import { Guid } from '@common/types/guid';
|
||||||
import { takeUntil } from 'rxjs/operators';
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
import {AngularEditorConfig} from "@kolkov/angular-editor";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dataset-profile-editor-section-component',
|
selector: 'app-dataset-profile-editor-section-component',
|
||||||
|
@ -14,6 +15,40 @@ import { takeUntil } from 'rxjs/operators';
|
||||||
})
|
})
|
||||||
|
|
||||||
export class DatasetProfileEditorSectionComponent extends BaseComponent implements OnInit {
|
export class DatasetProfileEditorSectionComponent extends BaseComponent implements OnInit {
|
||||||
|
editorConfig: AngularEditorConfig = {
|
||||||
|
editable: true,
|
||||||
|
spellcheck: true,
|
||||||
|
height: 'auto',
|
||||||
|
minHeight: '0',
|
||||||
|
maxHeight: 'auto',
|
||||||
|
width: '100%',
|
||||||
|
minWidth: '0',
|
||||||
|
translate: 'yes',
|
||||||
|
enableToolbar: true,
|
||||||
|
showToolbar: true,
|
||||||
|
placeholder: 'Enter text here...',
|
||||||
|
defaultParagraphSeparator: '',
|
||||||
|
defaultFontName: '',
|
||||||
|
defaultFontSize: '',
|
||||||
|
sanitize: true,
|
||||||
|
toolbarPosition: 'top',
|
||||||
|
toolbarHiddenButtons: [
|
||||||
|
[
|
||||||
|
'heading',
|
||||||
|
'fontName'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'fontSize',
|
||||||
|
'backgroundColor',
|
||||||
|
'customClasses',
|
||||||
|
'insertImage',
|
||||||
|
'insertVideo',
|
||||||
|
'removeFormat',
|
||||||
|
'toggleEditorMode'
|
||||||
|
]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
@Input() form: FormGroup;
|
@Input() form: FormGroup;
|
||||||
//@Input() dataModel: SectionEditorModel;
|
//@Input() dataModel: SectionEditorModel;
|
||||||
@Input() indexPath: string;
|
@Input() indexPath: string;
|
||||||
|
|
|
@ -156,14 +156,17 @@
|
||||||
<div class="heading">1.2 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION'| translate}} *</div>
|
<div class="heading">1.2 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION'| translate}} *</div>
|
||||||
<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
|
<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
|
||||||
<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
|
<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
|
||||||
<mat-form-field class="full-width basic-info-input">
|
<div class="full-width basic-info-input">
|
||||||
<textarea matInput [formControl]="form.get('description')" cdkTextareaAutosize cdkAutosizeMinRows="4" cdkAutosizeMaxRows="5"
|
<div class="editor-wrapper" [class]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'required' : ''">
|
||||||
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'| translate}}">
|
<angular-editor id="editor" class="editor" [formControl]="form.get('description')" [config]="editorConfig"
|
||||||
</textarea>
|
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER' | translate}}"></angular-editor>
|
||||||
<mat-error *ngIf="form.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED'
|
</div>
|
||||||
| translate}}
|
<div [class]="(form.get('description').dirty && form.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
|
||||||
|
<mat-error>
|
||||||
|
{{'GENERAL.VALIDATION.REQUIRED'| translate}}
|
||||||
</mat-error>
|
</mat-error>
|
||||||
</mat-form-field>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
|
|
@ -45,6 +45,7 @@ import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profil
|
||||||
import { UserService } from '@app/core/services/user/user.service';
|
import { UserService } from '@app/core/services/user/user.service';
|
||||||
import { MatInput } from '@angular/material/input';
|
import { MatInput } from '@angular/material/input';
|
||||||
import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component';
|
import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component';
|
||||||
|
import {AngularEditorConfig} from "@kolkov/angular-editor";
|
||||||
|
|
||||||
|
|
||||||
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
|
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
|
||||||
|
@ -57,6 +58,40 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.
|
||||||
providers:[VisibilityRulesService]
|
providers:[VisibilityRulesService]
|
||||||
})
|
})
|
||||||
export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent implements OnInit {
|
export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent implements OnInit {
|
||||||
|
editorConfig: AngularEditorConfig = {
|
||||||
|
editable: true,
|
||||||
|
spellcheck: true,
|
||||||
|
height: 'auto',
|
||||||
|
minHeight: '0',
|
||||||
|
maxHeight: 'auto',
|
||||||
|
width: '100%',
|
||||||
|
minWidth: '0',
|
||||||
|
translate: 'yes',
|
||||||
|
enableToolbar: true,
|
||||||
|
showToolbar: true,
|
||||||
|
placeholder: 'Enter text here...',
|
||||||
|
defaultParagraphSeparator: '',
|
||||||
|
defaultFontName: '',
|
||||||
|
defaultFontSize: '',
|
||||||
|
sanitize: true,
|
||||||
|
toolbarPosition: 'top',
|
||||||
|
toolbarHiddenButtons: [
|
||||||
|
[
|
||||||
|
'heading',
|
||||||
|
'fontName'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'fontSize',
|
||||||
|
'backgroundColor',
|
||||||
|
'customClasses',
|
||||||
|
'insertImage',
|
||||||
|
'insertVideo',
|
||||||
|
'removeFormat',
|
||||||
|
'toggleEditorMode'
|
||||||
|
]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
canDeactivate(): boolean {
|
canDeactivate(): boolean {
|
||||||
return !this.form.dirty;
|
return !this.form.dirty;
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
<ng-container cdkColumnDef="description">
|
<ng-container cdkColumnDef="description">
|
||||||
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}
|
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}
|
||||||
</mat-header-cell>
|
</mat-header-cell>
|
||||||
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
|
<mat-cell *matCellDef="let row"><span [innerHTML]="row.description"></span></mat-cell>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<!-- Column Definition: Created -->
|
<!-- Column Definition: Created -->
|
||||||
|
|
|
@ -1,8 +1,12 @@
|
||||||
<h4 mat-dialog-title>{{ 'DMP-EDITOR.DATASET-TEMPLATE-LIST.TITLE' | translate }}</h4>
|
<h4 mat-dialog-title>{{ 'DMP-EDITOR.DATASET-TEMPLATE-LIST.TITLE' | translate }}</h4>
|
||||||
<div mat-dialog-content>
|
<div mat-dialog-content>
|
||||||
<mat-selection-list #datasetsprofiles [ngModel]="selectedOptions" >
|
<mat-selection-list #datasetsprofiles [ngModel]="selectedOptions" >
|
||||||
<mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)' matTooltip="{{profile.description}}">
|
<mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)' class="mb-1">
|
||||||
|
<div class="list-option">
|
||||||
{{profile.label}}
|
{{profile.label}}
|
||||||
|
<br *ngIf="profile.description">
|
||||||
|
<small *ngIf="profile.description" [innerHTML]="profile.description"></small>
|
||||||
|
</div>
|
||||||
</mat-list-option>
|
</mat-list-option>
|
||||||
</mat-selection-list>
|
</mat-selection-list>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
.list-option {
|
||||||
|
flex-grow: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: calc(100% - 16px);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
|
@ -9,6 +9,7 @@ import { BaseComponent } from '@common/base/base.component';
|
||||||
import { takeUntil } from 'rxjs/operators';
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
styleUrls: ['available-profiles.component.scss'],
|
||||||
selector: 'app-available-profiles-component',
|
selector: 'app-available-profiles-component',
|
||||||
templateUrl: 'available-profiles.component.html',
|
templateUrl: 'available-profiles.component.html',
|
||||||
})
|
})
|
||||||
|
|
|
@ -12,7 +12,17 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h6 *ngIf="form.get('description').value && !isChild" class="col-12">{{form.get('description').value}}</h6>
|
<h6 *ngIf="form.get('description').value && !isChild" class="col-12" [innerHTML]="form.get('description').value"></h6>
|
||||||
<h6 *ngIf="form.get('extendedDescription').value && !isChild" class="col-12">
|
|
||||||
<i>{{form.get('extendedDescription').value}}</i>
|
<div class="col-12 mt-3 mb-3">
|
||||||
|
<div *ngIf="!showExtendedDescription" (click)="showExtendedDescription = !showExtendedDescription">
|
||||||
|
<span class="more d-flex justify-content-center">{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE' | translate}}</span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="showExtendedDescription">
|
||||||
|
<h6 *ngIf="form.get('extendedDescription').value && !isChild" [innerHTML]="form.get('extendedDescription').value">
|
||||||
</h6>
|
</h6>
|
||||||
|
<span class="more d-flex justify-content-center" (click)="showExtendedDescription = !showExtendedDescription">
|
||||||
|
{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-LESS' | translate}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -21,3 +21,11 @@ h6 {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.more {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #F7DD72;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
|
@ -13,6 +13,8 @@ export class FormCompositeTitleComponent implements OnInit {
|
||||||
@Input() isChild: Boolean = false;
|
@Input() isChild: Boolean = false;
|
||||||
@Input() tocentry:ToCEntry;
|
@Input() tocentry:ToCEntry;
|
||||||
|
|
||||||
|
public showExtendedDescription: boolean = false;
|
||||||
|
|
||||||
constructor() { }
|
constructor() { }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
</mat-panel-title>
|
</mat-panel-title>
|
||||||
</mat-expansion-panel-header>
|
</mat-expansion-panel-header>
|
||||||
<mat-panel-description class="col-12">
|
<mat-panel-description class="col-12">
|
||||||
<h6 class='panel-desc' *ngIf="form.get('description').value">{{form.get('description').value}}</h6>
|
<h6 class='panel-desc' *ngIf="form.get('description').value" [innerHTML]="form.get('description').value"></h6>
|
||||||
</mat-panel-description>
|
</mat-panel-description>
|
||||||
<ng-container *ngIf="!tocentry else tocentryCase">
|
<ng-container *ngIf="!tocentry else tocentryCase">
|
||||||
<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">
|
<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">
|
||||||
|
|
|
@ -1246,6 +1246,12 @@
|
||||||
"ERRORS":{
|
"ERRORS":{
|
||||||
"ERROR-OCCURED": "An error occured.",
|
"ERROR-OCCURED": "An error occured.",
|
||||||
"MESSAGE": "Message: "
|
"MESSAGE": "Message: "
|
||||||
|
},
|
||||||
|
"QUESTION": {
|
||||||
|
"EXTENDED-DESCRIPTION": {
|
||||||
|
"VIEW-MORE": "View more",
|
||||||
|
"VIEW-LESS": "View less"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"DATASET-CREATE-WIZARD": {
|
"DATASET-CREATE-WIZARD": {
|
||||||
|
|
|
@ -1246,6 +1246,12 @@
|
||||||
"ERRORS":{
|
"ERRORS":{
|
||||||
"ERROR-OCCURED": "An error occured.",
|
"ERROR-OCCURED": "An error occured.",
|
||||||
"MESSAGE": "Message: "
|
"MESSAGE": "Message: "
|
||||||
|
},
|
||||||
|
"QUESTION": {
|
||||||
|
"EXTENDED-DESCRIPTION": {
|
||||||
|
"VIEW-MORE": "View more",
|
||||||
|
"VIEW-LESS": "View less"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"DATASET-CREATE-WIZARD": {
|
"DATASET-CREATE-WIZARD": {
|
||||||
|
|
|
@ -1246,6 +1246,12 @@
|
||||||
"ERRORS":{
|
"ERRORS":{
|
||||||
"ERROR-OCCURED": "An error occured.",
|
"ERROR-OCCURED": "An error occured.",
|
||||||
"MESSAGE": "Message: "
|
"MESSAGE": "Message: "
|
||||||
|
},
|
||||||
|
"QUESTION": {
|
||||||
|
"EXTENDED-DESCRIPTION": {
|
||||||
|
"VIEW-MORE": "View more",
|
||||||
|
"VIEW-LESS": "View less"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"DATASET-CREATE-WIZARD": {
|
"DATASET-CREATE-WIZARD": {
|
||||||
|
|
|
@ -1246,6 +1246,12 @@
|
||||||
"ERRORS":{
|
"ERRORS":{
|
||||||
"ERROR-OCCURED": "Προέκυψε κάποιο σφάλμα.",
|
"ERROR-OCCURED": "Προέκυψε κάποιο σφάλμα.",
|
||||||
"MESSAGE": "Μήνυμα: "
|
"MESSAGE": "Μήνυμα: "
|
||||||
|
},
|
||||||
|
"QUESTION": {
|
||||||
|
"EXTENDED-DESCRIPTION": {
|
||||||
|
"VIEW-MORE": "Δείτε περισσότερα",
|
||||||
|
"VIEW-LESS": "Δείτε λιγότερα"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"DATASET-CREATE-WIZARD": {
|
"DATASET-CREATE-WIZARD": {
|
||||||
|
|
|
@ -1246,6 +1246,12 @@
|
||||||
"ERRORS":{
|
"ERRORS":{
|
||||||
"ERROR-OCCURED": "Um erro ocorreu.",
|
"ERROR-OCCURED": "Um erro ocorreu.",
|
||||||
"MESSAGE": "Mensangem: "
|
"MESSAGE": "Mensangem: "
|
||||||
|
},
|
||||||
|
"QUESTION": {
|
||||||
|
"EXTENDED-DESCRIPTION": {
|
||||||
|
"VIEW-MORE": "View more",
|
||||||
|
"VIEW-LESS": "View less"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"DATASET-CREATE-WIZARD": {
|
"DATASET-CREATE-WIZARD": {
|
||||||
|
|
|
@ -1246,6 +1246,12 @@
|
||||||
"ERRORS":{
|
"ERRORS":{
|
||||||
"ERROR-OCCURED": "An error occured.",
|
"ERROR-OCCURED": "An error occured.",
|
||||||
"MESSAGE": "Message: "
|
"MESSAGE": "Message: "
|
||||||
|
},
|
||||||
|
"QUESTION": {
|
||||||
|
"EXTENDED-DESCRIPTION": {
|
||||||
|
"VIEW-MORE": "View more",
|
||||||
|
"VIEW-LESS": "View less"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"DATASET-CREATE-WIZARD": {
|
"DATASET-CREATE-WIZARD": {
|
||||||
|
|
|
@ -1246,6 +1246,12 @@
|
||||||
"ERRORS":{
|
"ERRORS":{
|
||||||
"ERROR-OCCURED": "An error occured.",
|
"ERROR-OCCURED": "An error occured.",
|
||||||
"MESSAGE": "Message: "
|
"MESSAGE": "Message: "
|
||||||
|
},
|
||||||
|
"QUESTION": {
|
||||||
|
"EXTENDED-DESCRIPTION": {
|
||||||
|
"VIEW-MORE": "View more",
|
||||||
|
"VIEW-LESS": "View less"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"DATASET-CREATE-WIZARD": {
|
"DATASET-CREATE-WIZARD": {
|
||||||
|
|
|
@ -1246,6 +1246,12 @@
|
||||||
"ERRORS":{
|
"ERRORS":{
|
||||||
"ERROR-OCCURED": "An error occured.",
|
"ERROR-OCCURED": "An error occured.",
|
||||||
"MESSAGE": "Message: "
|
"MESSAGE": "Message: "
|
||||||
|
},
|
||||||
|
"QUESTION": {
|
||||||
|
"EXTENDED-DESCRIPTION": {
|
||||||
|
"VIEW-MORE": "View more",
|
||||||
|
"VIEW-LESS": "View less"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"DATASET-CREATE-WIZARD": {
|
"DATASET-CREATE-WIZARD": {
|
||||||
|
|
|
@ -252,3 +252,47 @@
|
||||||
.translateY-3{
|
.translateY-3{
|
||||||
transform:translateY(3px);
|
transform:translateY(3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// CSS for <angular-editor> (@kolkov/angular-editor)
|
||||||
|
.angular-editor-textarea {
|
||||||
|
min-height: 150px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field-subscript-wrapper {
|
||||||
|
font-size: 75%;
|
||||||
|
padding-left: 12px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-wrapper {
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.angular-editor-toolbar {
|
||||||
|
margin-left: 1px;
|
||||||
|
margin-right: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.angular-editor-textarea, .angular-editor-toolbar {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.angular-editor {
|
||||||
|
border: 1px solid #ddd !important;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-wrapper:hover, .angular-editor:hover {
|
||||||
|
border: 1px solid #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-wrapper:focus-within, .angular-editor:focus-within {
|
||||||
|
border: 1px solid #034459 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required.editor-wrapper, .required .editor .angular-editor {
|
||||||
|
border: 1px solid #f44336 !important;
|
||||||
|
}
|
||||||
|
// end of CSS for <angular-editor> (@kolkov/angular-editor)
|
||||||
|
|
Loading…
Reference in New Issue