funky-framadate-front/src/app/features/administration/form/option-link/option-link.component.html

70 lines
2.2 KiB
HTML

<div class="options">
<h1 class="title is-1">
{{ 'choices.title' | translate }}
</h1>
<!--{{ 'choices.helper' |translate}}-->
<div class="rounded-block" *ngFor="let choice of StorageService.choicesText; index as ii">
<label [for]="'option_' + ii">{{ 'choices.element' | translate }} {{ ii + 1 }}</label>
<input type="text" [(ngModel)]="choice.name" class="input" />
<div class="image-preview" *ngIf="choice.url_display">
<img src="{{ choice.url_display }}" alt="image" class="icon is-rounded" />
</div>
<div class="href-preview" *ngIf="choice.url_href">
{{ choice.url_href }}
</div>
<button (click)="openLinkModal(choice)" class="has-no-outline">
<img class="icon" src="assets/icons/link.svg" />
<span *ngIf="!choice.url_href || !choice.url_display">
{{ 'choices.add_link' | translate }}
</span>
<span *ngIf="choice.url_href || choice.url_display">
{{ 'SENTENCES.Edit' | translate }}
</span>
</button>
<button class="button delete-date is-block" (click)="StorageService.choicesText.splice(ii, 1)">
<img class="icon" src="assets/icons/trash-2.svg" />
{{ 'choices.delete' | translate }}
</button>
</div>
</div>
<button class="is-primary button is-fullwidth" (click)="addLink()">
{{ 'choices.add' | translate }}
</button>
<!-- dialog search-->
<p-dialog
[modal]="true"
[(visible)]="display_option_dialog"
[breakpoints]="{ '960px': '75vw' }"
[style]="{ width: '454px' }"
[draggable]="false"
[showHeader]="false"
[resizable]="true"
>
<h1 class="title is-1">
{{ 'choices.modal.title' | translate }}
</h1>
<p class="description">
{{ 'choices.modal.description' | translate }}
</p>
<label for="modal_url">
{{ 'choices.modal.url_label' | translate }}
</label>
<input type="text" [(ngModel)]="url_href" id="modal_url" />
<label for="modal_url">
{{ 'choices.modal.img_label' | translate }}
</label>
<input type="text" [(ngModel)]="url_display" id="modal_img_url" />
<div class="bottom has-text-right">
<button class="button marged-right" (click)="closeModal()">
{{ 'SENTENCES.Cancel' | translate }}
</button>
<button class="is-primary" (click)="validateModal()">
{{ 'choices.modal.validate' | translate }}
</button>
</div>
</p-dialog>
<!--<app-wip-todo></app-wip-todo>-->