mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
text choice place of buttons, and modal unification
This commit is contained in:
parent
a620566563
commit
6e1a3c57f4
@ -183,7 +183,7 @@ export class PollService implements Resolve<Poll> {
|
|||||||
choices: new FormArray([]),
|
choices: new FormArray([]),
|
||||||
whoModifiesAnswers: ['self', [Validators.required]],
|
whoModifiesAnswers: ['self', [Validators.required]],
|
||||||
whoCanChangeAnswers: ['self', [Validators.required]],
|
whoCanChangeAnswers: ['self', [Validators.required]],
|
||||||
isAboutDate: [true, [Validators.required]],
|
isAboutDate: [false, [Validators.required]],
|
||||||
expiresDaysDelay: [environment.expiresDaysDelay, []],
|
expiresDaysDelay: [environment.expiresDaysDelay, []],
|
||||||
expiracy_date: [this.DateUtilitiesService.addDaysToDate(environment.expiresDaysDelay, new Date()), []],
|
expiracy_date: [this.DateUtilitiesService.addDaysToDate(environment.expiresDaysDelay, new Date()), []],
|
||||||
isZeroKnoledge: [false, [Validators.required]],
|
isZeroKnoledge: [false, [Validators.required]],
|
||||||
|
@ -2,33 +2,51 @@
|
|||||||
<h1 class="title is-1">
|
<h1 class="title is-1">
|
||||||
{{ 'choices.title' | translate }}
|
{{ 'choices.title' | translate }}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<!--{{ 'choices.helper' |translate}}-->
|
<!--{{ 'choices.helper' |translate}}-->
|
||||||
<div class="rounded-block" *ngFor="let choice of StorageService.choicesText; index as ii">
|
<div class="rounded-block" *ngFor="let choice of StorageService.choicesText; index as ii">
|
||||||
<label [for]="'option_' + ii">{{ 'choices.element' | translate }} {{ ii + 1 }}</label>
|
<label [for]="'option_' + ii">{{ 'choices.element' | translate }} {{ ii + 1 }}</label>
|
||||||
<input type="text" [(ngModel)]="choice.name" class="input" />
|
<input type="text" [(ngModel)]="choice.name" class="input" />
|
||||||
|
|
||||||
<div class="image-preview" *ngIf="choice.url_display">
|
<div class="image-preview" *ngIf="choice.url_display">
|
||||||
<img src="{{ choice.url_display }}" alt="image" class="icon is-rounded" />
|
<img src="{{ choice.url_display }}" alt="image" class="icon is-rounded" />
|
||||||
</div>
|
</div>
|
||||||
<div class="href-preview" *ngIf="choice.url_href">
|
<div class="href-preview" *ngIf="choice.url_href">
|
||||||
{{ choice.url_href }}
|
{{ choice.url_href }}
|
||||||
</div>
|
</div>
|
||||||
<button (click)="openLinkModal(choice)" class="has-no-outline">
|
<div class="link-land">
|
||||||
<img class="icon" src="assets/icons/link.svg" />
|
<button
|
||||||
<span *ngIf="!choice.url_href || !choice.url_display">
|
(click)="openLinkModal(choice)"
|
||||||
|
class="link-button has-no-background has-background-link-icon has-background-icon-left is-filtered-icon-primary"
|
||||||
|
*ngIf="!choice.url_href || !choice.url_display"
|
||||||
|
>
|
||||||
{{ 'choices.add_link' | translate }}
|
{{ 'choices.add_link' | translate }}
|
||||||
</span>
|
|
||||||
<span *ngIf="choice.url_href || choice.url_display">
|
|
||||||
{{ 'SENTENCES.Edit' | translate }}
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
<button class="button delete-date is-block" (click)="StorageService.choicesText.splice(ii, 1)">
|
<!-- <button (click)="openLinkModal(choice)"-->
|
||||||
<img class="icon" src="assets/icons/trash-2.svg" />
|
<!-- class="button is-secondary has-background-link has-background-icon-left is-filtered-icon-primary"-->
|
||||||
|
<!-- *ngIf="choice.url_href || choice.url_display">-->
|
||||||
|
<!-- {{ 'SENTENCES.Edit' | translate }}-->
|
||||||
|
<!-- </button>-->
|
||||||
|
</div>
|
||||||
|
<!-- <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>-->
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<div class="down-line-button-container">
|
||||||
|
<button
|
||||||
|
[attr.aria-label]="'choices.delete' | translate"
|
||||||
|
class="has-background-trash has-background-icon-left is-filtered-icon-primary"
|
||||||
|
(click)="StorageService.choicesText.splice(ii, 1)"
|
||||||
|
>
|
||||||
{{ 'choices.delete' | translate }}
|
{{ 'choices.delete' | translate }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="is-primary button is-fullwidth" (click)="addLink()">
|
<button class="is-primary button is-fullwidth is-thin" (click)="addLink()">
|
||||||
{{ 'choices.add' | translate }}
|
{{ 'choices.add' | translate }}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@ -42,6 +60,15 @@
|
|||||||
[showHeader]="false"
|
[showHeader]="false"
|
||||||
[resizable]="true"
|
[resizable]="true"
|
||||||
>
|
>
|
||||||
|
<ng-template pTemplate="titlebar">
|
||||||
|
<button
|
||||||
|
id="close_dialog"
|
||||||
|
class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
|
||||||
|
(click)="closeModalAndFocusOnOpenModalButton()"
|
||||||
|
>
|
||||||
|
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
|
||||||
|
</button>
|
||||||
|
|
||||||
<h1 class="title is-1">
|
<h1 class="title is-1">
|
||||||
{{ 'choices.modal.title' | translate }}
|
{{ 'choices.modal.title' | translate }}
|
||||||
</h1>
|
</h1>
|
||||||
@ -56,14 +83,17 @@
|
|||||||
{{ 'choices.modal.img_label' | translate }}
|
{{ 'choices.modal.img_label' | translate }}
|
||||||
</label>
|
</label>
|
||||||
<input type="text" [(ngModel)]="url_display" id="modal_img_url" />
|
<input type="text" [(ngModel)]="url_display" id="modal_img_url" />
|
||||||
|
</ng-template>
|
||||||
|
<ng-template pTemplate="footer">
|
||||||
<div class="bottom has-text-right">
|
<div class="bottom has-text-right">
|
||||||
<button class="button marged-right" (click)="closeModal()">
|
<button class="button is-secondary marged-right" (click)="closeModal()">
|
||||||
{{ 'SENTENCES.Cancel' | translate }}
|
{{ 'SENTENCES.Cancel' | translate }}
|
||||||
</button>
|
</button>
|
||||||
<button class="is-primary" (click)="validateModal()">
|
<button class="button is-primary" (click)="validateModal()">
|
||||||
{{ 'choices.modal.validate' | translate }}
|
{{ 'choices.modal.validate' | translate }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</ng-template>
|
||||||
</p-dialog>
|
</p-dialog>
|
||||||
|
|
||||||
<!--<app-wip-todo></app-wip-todo>-->
|
<!--<app-wip-todo></app-wip-todo>-->
|
||||||
|
@ -1,10 +1,6 @@
|
|||||||
.options {
|
.options {
|
||||||
button {
|
.down-line-button-container,
|
||||||
border: 0;
|
.link-land {
|
||||||
background: transparent;
|
margin-left: -1rem;
|
||||||
padding-left: 0.75rem;
|
|
||||||
img {
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -37,4 +37,6 @@ export class OptionLinkComponent implements OnInit {
|
|||||||
closeModal() {
|
closeModal() {
|
||||||
this.display_option_dialog = false;
|
this.display_option_dialog = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
closeModalAndFocusOnOpenModalButton() {}
|
||||||
}
|
}
|
||||||
|
@ -93,4 +93,8 @@ export class EditComponent implements OnInit {
|
|||||||
elem.focus();
|
elem.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
applyTimeSlicesToDateChoices() {}
|
||||||
|
|
||||||
|
closeModalAndFocusOnOpenModalButton() {}
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div class="rounded-block block-rounded add-answer-box">
|
<div class="rounded-block add-answer-box">
|
||||||
<div class="columns is-vcentered">
|
<div class="columns is-vcentered">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<label class="label">{{ choice.name }}</label>
|
<label class="label">{{ choice.name }}</label>
|
||||||
|
@ -76,7 +76,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.has-no-background {
|
.has-no-background {
|
||||||
background: none;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.has-no-outline,
|
.has-no-outline,
|
||||||
.has-no-border {
|
.has-no-border {
|
||||||
@ -125,6 +125,9 @@
|
|||||||
background: url('/assets/icons/x.svg') no-repeat 28px center;
|
background: url('/assets/icons/x.svg') no-repeat 28px center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.has-background-link-icon {
|
||||||
|
background: url('/assets/icons/link.svg') no-repeat 16px center;
|
||||||
|
}
|
||||||
.has-background-plus {
|
.has-background-plus {
|
||||||
background: url('/assets/icons/plus-circle.svg') no-repeat 16px center;
|
background: url('/assets/icons/plus-circle.svg') no-repeat 16px center;
|
||||||
}
|
}
|
||||||
|
@ -168,7 +168,8 @@ a {
|
|||||||
@extend .is-danger;
|
@extend .is-danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete-date {
|
.delete-date,
|
||||||
|
.down-line-button-container {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
|
Loading…
Reference in New Issue
Block a user