From 6e1a3c57f45648e58b179d115656fc489c56053a Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 14 Mar 2022 16:18:48 +0100
Subject: [PATCH] text choice place of buttons, and modal unification

---
 src/app/core/services/poll.service.ts         |  2 +-
 .../option-link/option-link.component.html    | 98 ++++++++++++-------
 .../option-link/option-link.component.scss    | 10 +-
 .../form/option-link/option-link.component.ts |  2 +
 .../consultation/edit/edit.component.ts       |  4 +
 .../add-answer/add-answer.component.html      |  2 +-
 src/styles/dev-utilities/_helpers.scss        |  5 +-
 src/styles/partials/_buttons.scss             |  3 +-
 8 files changed, 81 insertions(+), 45 deletions(-)

diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts
index c55ecb9a..128a03ec 100644
--- a/src/app/core/services/poll.service.ts
+++ b/src/app/core/services/poll.service.ts
@@ -183,7 +183,7 @@ export class PollService implements Resolve<Poll> {
 			choices: new FormArray([]),
 			whoModifiesAnswers: ['self', [Validators.required]],
 			whoCanChangeAnswers: ['self', [Validators.required]],
-			isAboutDate: [true, [Validators.required]],
+			isAboutDate: [false, [Validators.required]],
 			expiresDaysDelay: [environment.expiresDaysDelay, []],
 			expiracy_date: [this.DateUtilitiesService.addDaysToDate(environment.expiresDaysDelay, new Date()), []],
 			isZeroKnoledge: [false, [Validators.required]],
diff --git a/src/app/features/administration/form/option-link/option-link.component.html b/src/app/features/administration/form/option-link/option-link.component.html
index 7af1eed3..691f7fe7 100644
--- a/src/app/features/administration/form/option-link/option-link.component.html
+++ b/src/app/features/administration/form/option-link/option-link.component.html
@@ -2,33 +2,51 @@
 	<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">
+		<div class="link-land">
+			<button
+				(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 }}
-			</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>
+			</button>
+			<!--			<button (click)="openLinkModal(choice)"-->
+			<!--							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 }}
+			</button>
+		</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 }}
 </button>
 
@@ -42,28 +60,40 @@
 	[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 }}
+	<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>
-		<button class="is-primary" (click)="validateModal()">
-			{{ 'choices.modal.validate' | translate }}
-		</button>
-	</div>
+
+		<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" />
+	</ng-template>
+	<ng-template pTemplate="footer">
+		<div class="bottom has-text-right">
+			<button class="button is-secondary marged-right" (click)="closeModal()">
+				{{ 'SENTENCES.Cancel' | translate }}
+			</button>
+			<button class="button is-primary" (click)="validateModal()">
+				{{ 'choices.modal.validate' | translate }}
+			</button>
+		</div>
+	</ng-template>
 </p-dialog>
 
 <!--<app-wip-todo></app-wip-todo>-->
diff --git a/src/app/features/administration/form/option-link/option-link.component.scss b/src/app/features/administration/form/option-link/option-link.component.scss
index 89ff22ea..d1251662 100644
--- a/src/app/features/administration/form/option-link/option-link.component.scss
+++ b/src/app/features/administration/form/option-link/option-link.component.scss
@@ -1,10 +1,6 @@
 .options {
-	button {
-		border: 0;
-		background: transparent;
-		padding-left: 0.75rem;
-		img {
-			margin-right: 1em;
-		}
+	.down-line-button-container,
+	.link-land {
+		margin-left: -1rem;
 	}
 }
diff --git a/src/app/features/administration/form/option-link/option-link.component.ts b/src/app/features/administration/form/option-link/option-link.component.ts
index bf0c80ff..b755b016 100644
--- a/src/app/features/administration/form/option-link/option-link.component.ts
+++ b/src/app/features/administration/form/option-link/option-link.component.ts
@@ -37,4 +37,6 @@ export class OptionLinkComponent implements OnInit {
 	closeModal() {
 		this.display_option_dialog = false;
 	}
+
+	closeModalAndFocusOnOpenModalButton() {}
 }
diff --git a/src/app/features/consultation/edit/edit.component.ts b/src/app/features/consultation/edit/edit.component.ts
index ec9e7326..4ab0f389 100644
--- a/src/app/features/consultation/edit/edit.component.ts
+++ b/src/app/features/consultation/edit/edit.component.ts
@@ -93,4 +93,8 @@ export class EditComponent implements OnInit {
 			elem.focus();
 		}
 	}
+
+	applyTimeSlicesToDateChoices() {}
+
+	closeModalAndFocusOnOpenModalButton() {}
 }
diff --git a/src/app/features/participation/add-answer/add-answer.component.html b/src/app/features/participation/add-answer/add-answer.component.html
index 196f47a5..f1ac767e 100644
--- a/src/app/features/participation/add-answer/add-answer.component.html
+++ b/src/app/features/participation/add-answer/add-answer.component.html
@@ -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="column">
 			<label class="label">{{ choice.name }}</label>
diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss
index c6fc056c..c3ff654f 100644
--- a/src/styles/dev-utilities/_helpers.scss
+++ b/src/styles/dev-utilities/_helpers.scss
@@ -76,7 +76,7 @@
 }
 
 .has-no-background {
-	background: none;
+	background-color: transparent;
 }
 .has-no-outline,
 .has-no-border {
@@ -125,6 +125,9 @@
 	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 {
 	background: url('/assets/icons/plus-circle.svg') no-repeat 16px center;
 }
diff --git a/src/styles/partials/_buttons.scss b/src/styles/partials/_buttons.scss
index 54997795..0108e858 100644
--- a/src/styles/partials/_buttons.scss
+++ b/src/styles/partials/_buttons.scss
@@ -168,7 +168,8 @@ a {
 	@extend .is-danger;
 }
 
-.delete-date {
+.delete-date,
+.down-line-button-container {
 	border: 0;
 	border-radius: 0.25rem;
 	border-top-left-radius: 0;