text choice place of buttons, and modal unification

This commit is contained in:
Tykayn 2022-03-14 16:18:48 +01:00 committed by tykayn
parent a620566563
commit 6e1a3c57f4
8 changed files with 81 additions and 45 deletions

View File

@ -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]],

View File

@ -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>-->

View File

@ -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;
}
} }
} }

View File

@ -37,4 +37,6 @@ export class OptionLinkComponent implements OnInit {
closeModal() { closeModal() {
this.display_option_dialog = false; this.display_option_dialog = false;
} }
closeModalAndFocusOnOpenModalButton() {}
} }

View File

@ -93,4 +93,8 @@ export class EditComponent implements OnInit {
elem.focus(); elem.focus();
} }
} }
applyTimeSlicesToDateChoices() {}
closeModalAndFocusOnOpenModalButton() {}
} }

View File

@ -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>

View File

@ -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;
} }

View File

@ -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;