Skip to content

Commit

Permalink
feat(editor): change title field to editable label
Browse files Browse the repository at this point in the history
  • Loading branch information
Angi-Kinas authored and LHBruneton-C2C committed Apr 19, 2024
1 parent 6083baa commit dd322b5
Show file tree
Hide file tree
Showing 8 changed files with 54 additions and 37 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +0,0 @@
.icon-small {
font-size: 16px;
height: 16px;
width: 16px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
[extraClass]="getButtonExtraClass()"
(buttonClick)="togglePreview()"
>
<span class="material-symbols-outlined mr-1 icon-small">{{
<span class="material-symbols-outlined mr-1 gn-ui-icon-small">{{
preview ? 'visibility' : 'visibility_off'
}}</span>
{{ preview ? 'WYSIWYG' : 'Markdown' }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,30 @@
>cancel</mat-icon
>
</div>
<ng-container *ngIf="isTitle">
<div class="flex justify-between items-center gap-3">
<h2
#titleInput
class="grow text-3xl font-normal"
[gnUiEditableLabel]="true"
(editableLabelChanged)="formControl.setValue($event)"
>
{{ formControl.value }}
</h2>
<span
class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
(click)="focusTitleInput()"
>edit</span
>
<span
class="material-symbols-outlined gn-ui-icon-small m-2"
[matTooltip]="config.hintKey | translate"
matTooltipPosition="above"
>
help
</span>
</div>
</ng-container>
<ng-container *ngIf="isSimpleField">
<gn-ui-form-field-simple
[type]="simpleType"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import { CommonModule } from '@angular/common'
import {
ChangeDetectionStrategy,
Component,
ElementRef,
Input,
Output,
ViewChild,
} from '@angular/core'
import { FormControl, ReactiveFormsModule } from '@angular/forms'
import { MatIconModule } from '@angular/material/icon'
import { MatTooltipModule } from '@angular/material/tooltip'
import { EditableLabelDirective } from '@geonetwork-ui/ui/inputs'
import { TranslateModule } from '@ngx-translate/core'
import { Observable } from 'rxjs'
import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
Expand All @@ -16,7 +21,6 @@ import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.
import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-extent.component'
import { FormFieldConfig } from './form-field.model'
import { CommonModule } from '@angular/common'

@Component({
selector: 'gn-ui-form-field',
Expand All @@ -25,17 +29,19 @@ import { CommonModule } from '@angular/common'
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
EditableLabelDirective,
MatIconModule,
MatTooltipModule,
FormFieldSimpleComponent,
FormFieldRichComponent,
FormFieldObjectComponent,
FormFieldSpatialExtentComponent,
FormFieldTemporalExtentComponent,
FormFieldFileComponent,
FormFieldArrayComponent,
CommonModule,
ReactiveFormsModule,
TranslateModule,
MatIconModule,
],
})
export class FormFieldComponent {
Expand All @@ -48,12 +54,18 @@ export class FormFieldComponent {
}
@Output() valueChange: Observable<unknown>

@ViewChild('titleInput') titleInput: ElementRef

formControl = new FormControl()

constructor() {
this.valueChange = this.formControl.valueChanges
}

focusTitleInput() {
this.titleInput.nativeElement.children[0].focus()
}

get simpleType() {
return this.config.type as
| 'date'
Expand Down Expand Up @@ -100,6 +112,9 @@ export class FormFieldComponent {
return !this.config.locked && this.config.invalid
}

get isTitle() {
return this.model === 'title'
}
get isAbstract() {
return this.model === 'abstract'
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,15 @@ import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component } from '@angular/core'
import { EditorFacade } from '../../+state/editor.facade'
import { EditorFieldState, EditorFieldValue } from '../../models/fields.model'
import {
FormFieldArrayComponent,
FormFieldComponent,
FormFieldFileComponent,
FormFieldObjectComponent,
FormFieldRichComponent,
FormFieldSimpleComponent,
FormFieldSpatialExtentComponent,
FormFieldTemporalExtentComponent,
} from './form-field'
import { FormFieldComponent } from './form-field'

@Component({
selector: 'gn-ui-record-form',
templateUrl: './record-form.component.html',
styleUrls: ['./record-form.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
CommonModule,
FormFieldComponent,
FormFieldArrayComponent,
FormFieldFileComponent,
FormFieldObjectComponent,
FormFieldRichComponent,
FormFieldSimpleComponent,
FormFieldSpatialExtentComponent,
FormFieldTemporalExtentComponent,
],
imports: [CommonModule, FormFieldComponent],
})
export class RecordFormComponent {
fields$ = this.facade.recordFields$
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +0,0 @@
.icon-small {
font-size: 16px;
height: 16px;
width: 16px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="flex-1 flex justify-end items-center">
<ng-content select="[form-field-interaction]"></ng-content>
<span
class="material-symbols-outlined m-2 icon-small"
class="material-symbols-outlined m-2 gn-ui-icon-small"
[matTooltip]="hint"
matTooltipPosition="above"
>
Expand Down
7 changes: 7 additions & 0 deletions tailwind.base.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@
@apply shadow-xl hover:shadow-xl-hover transition-shadow;
}

/* ICON CLASSES */
.gn-ui-icon-small {
font-size: 16px;
width: 16px;
height: 16px;
}

/* LINK CLASSES */
.gn-ui-link {
@apply text-blue-600 hover:text-blue-700 hover:underline;
Expand Down

0 comments on commit dd322b5

Please sign in to comment.