style participation page, button colors and placeholder icons bg, cancel modal content

src/app/features/consultation/consultation.module.ts

@@ -17,6 +17,7 @@ import { EditComponent } from './edit/edit.component';
 import { ResultsRoundedComponent } from './results-rounded/results-rounded.component';
 import { PollResultsDinumComponent } from './poll-results-dinum/poll-results-dinum.component';
 import { ChoiceTableComponent } from './choice-table/choice-table.component';
+import { DialogModule } from 'primeng/dialog';
 
 @NgModule({
 	declarations: [
@@ -39,6 +40,7 @@ import { ChoiceTableComponent } from './choice-table/choice-table.component';
 		SharedModule,
 		TranslateModule.forChild({ extend: true }),
 		AdministrationModule,
+		DialogModule,
 	],
 })
 export class ConsultationModule {}

src/app/features/consultation/edit/edit.component.html

@@ -21,7 +21,7 @@
 				<!--				{{"calendar_widget.dayNames.Thursday" | translate}}-->
 			</div>
 			<div class="choice-subset" *ngFor="let choice of group_choice.choices">
-				<div class="choice-label">
+				<div class="choice-label title is-5">
 					{{ choice.name }}
 				</div>
 
@@ -48,6 +48,9 @@
 				</div>
 			</div>
 		</div>
+		<button id="vote_button_popup" class="button is-secondary" (click)="display_vote_dialog = true">
+			{{ 'SENTENCES.Cancel' | translate }}
+		</button>
 	</div>
 </div>
 <div class="no-poll" *ngIf="!poll">
@@ -56,13 +59,13 @@
 <div class="bottom-step-buttons" *ngIf="poll">
 	<div class="contained-in-main-column">
 		<button
-			class="button is-default pull-left"
+			class="button is-secondary pull-left"
 			[routerLink]="['/poll/' + pollService._poll.getValue().custom_url + '/consultation']"
 		>
 			{{ 'SENTENCES.Back' | translate }}
 		</button>
 		<button
-			class="button-next is-primary pull-right"
+			class="button-next button is-primary pull-right"
 			[routerLink]="['/poll/' + poll.custom_url + '/consultation/vote/user-infos']"
 		>
 			<b>
@@ -71,3 +74,51 @@
 		</button>
 	</div>
 </div>
+<p-dialog
+	[modal]="true"
+	[(visible)]="display_vote_dialog"
+	[breakpoints]="['960px']"
+	[style]="{ width: '486px' }"
+	[draggable]="false"
+	[showHeader]="false"
+	[resizable]="true"
+	[attr.aria-labelledby]="'popup.languages.title' | translate"
+	role="dialog"
+	id="vote_quit_modale"
+>
+	<ng-template pTemplate="titlebar">
+		<div class="">
+			<div class="">
+				<div class="top">
+					<button
+						id="close_dialog_vote"
+						class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
+						(click)="closeModalAndFocusOnButtonToOpen()"
+					>
+						{{ 'SENTENCES.Close' | translate }}
+						<img class="icon" src="assets/icons/x_blue.svg" />
+					</button>
+				</div>
+			</div>
+		</div>
+		<h1 class="title is-1 has-text-left" id="lang_selector_modale_title">
+			{{ 'participation.modal.cancel_own.title' | translate }}
+		</h1>
+		<p>
+			{{ 'participation.modal.cancel_own.description' | translate }}
+		</p>
+	</ng-template>
+	<ng-template pTemplate="footer">
+		<div class="has-no-padding time-slice-list-of-a-day">
+			<button
+				class="button is-primary is-fullwidth pull-right has-text-white"
+				(click)="applyTimeSlicesToDateChoices()"
+			>
+				{{ 'hours.modal.validate' | translate }}
+			</button>
+			<button class="button is-secondary pull-right" (click)="closeModalAndFocusOnOpenModalButton()">
+				{{ 'SENTENCES.Cancel' | translate }}
+			</button>
+		</div>
+	</ng-template>
+</p-dialog>

src/app/features/consultation/edit/edit.component.scss

@@ -1,8 +1,8 @@
 .app-choice-button-dinum {
-	button {
+	//button {
-		margin-right: 1rem;
+	//	margin-right: 1rem;
-		display: inline-block;
+	//	display: inline-block;
-	}
+	//}
 	.groupe-label {
 		color: #383838;
 		font-weight: bold;

src/app/features/consultation/edit/edit.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ToastService } from '../../../core/services/toast.service';
 import { StorageService } from '../../../core/services/storage.service';
@@ -7,6 +7,7 @@ import { Poll } from '../../../core/models/poll.model';
 import { PollUtilitiesService } from '../../../core/services/poll.utilities.service';
 import { ApiService } from '../../../core/services/api.service';
 import { DateService } from '../../../core/services/date.service';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
 	selector: 'app-edit',
@@ -18,6 +19,7 @@ export class EditComponent implements OnInit {
 	public fetching = true;
 	private pollSlug: string;
 	private pass_hash: string;
+	display_vote_dialog: boolean = false;
 
 	constructor(
 		private router: Router,
@@ -27,6 +29,8 @@ export class EditComponent implements OnInit {
 		public api: ApiService,
 		public pollService: PollService,
 		public dateService: DateService,
+		private cd: ChangeDetectorRef,
+		@Inject(DOCUMENT) private document: any,
 		public toastService: ToastService
 	) {
 		this.pollService.poll.subscribe((newpoll: Poll) => {
@@ -80,4 +84,13 @@ export class EditComponent implements OnInit {
 			})
 		);
 	}
+
+	closeModalAndFocusOnButtonToOpen() {
+		this.display_vote_dialog = false;
+		this.cd.detectChanges();
+		let elem = this.document.querySelector('#vote_button_popup');
+		if (elem) {
+			elem.focus();
+		}
+	}
 }

src/app/features/participation/add-answer/add-answer.component.html

@@ -1,4 +1,4 @@
-<div class="box">
+<div class="rounded-block block-rounded add-answer-box">
 	<div class="columns is-vcentered">
 		<div class="column">
 			<label class="label">{{ choice.name }}</label>
@@ -23,11 +23,11 @@
 		</div>
 		<div class="column is-narrow">
 			<div class="buttons has-addons is-right" (click)="openModal(choice)">
-				<button class="button is-white">
+				<button class="button is-secondary">
 					{{ choice.counts.get(answerEnum.YES) }}
 					<img class="image is-24x24" src="../../../assets/img/icon_voter_YES.svg" />
 				</button>
-				<button class="button is-white" *ngIf="poll.isMaybeAnswerAvailable">
+				<button class="button is-primary" *ngIf="poll.isMaybeAnswerAvailable">
 					{{ choice.counts.get(answerEnum.MAYBE) }}
 					<img class="image is-24x24" src="../../../assets/img/icon_voter_MAYBE.svg" />
 				</button>

src/app/features/participation/add-answer/add-answer.component.scss

@@ -0,0 +1,8 @@
+.add-answer-box {
+	.label {
+		font-weight: 700;
+		font-size: 16px;
+		line-height: 20px;
+		color: #383838;
+	}
+}

src/app/features/shared/components/choice-button-dinum/choice-button-dinum.component.html

@@ -1,8 +1,13 @@
-<button
+<div
-	class="choice-button has-text-centered  {{ 'is-answer-' + answerKind }}"
+	class="choice-button-zone has-text-centered {{ 'is-answer-' + answerKind }} clickable"
 	[ngClass]="{ 'is-active': storageService.choiceHasAnswerOfValue(choice.id, answerEnum[answerKind]) }"
 	(click)="storageService.toggleAnswer(choice.id, answerEnum[answerKind])"
 	*ngIf="poll.allowed_answers.indexOf(answerEnum[answerKind]) !== -1"
 >
+	<button
+		class="icon-deco choice-button has-background-answer-{{ answerKind }} is-filtered-icon-{{ answerKind }}"
+	></button>
+	<p class="button-description">
 		{{ 'participation.' + answerEnum[answerKind] | translate }}
-</button>
+	</p>
+</div>

src/app/features/shared/components/choice-button-dinum/choice-button-dinum.component.scss

@@ -1,14 +1,62 @@
-.choice-button {
+@import '../../../../../../src/styles/variables.scss';
-	margin-right: 1em;
+.choice-button-zone {
-	&.is-active {
+	margin-right: 15px;
+	border-radius: 8px;
+	background: #fff;
+	display: inline-block;
+	text-align: center;
+	min-width: 107px;
+	min-height: 83px;
+	padding: 8px 0 16px;
+	.button-description {
+		margin-top: 8px;
+		font-weight: 700;
+		font-size: 14px;
+		line-height: 16px;
+	}
+	button {
+		margin: 0 auto;
+	}
+	&:focus {
+		outline: $outline-color;
+		outline-style: solid;
+		outline-offset: 0.15rem;
+	}
+	&:active {
+		outline: transparent;
+	}
+
+	&:hover {
 		&.is-answer-YES {
-			background: green;
+			background: $d-success;
+			color: $d-success-text;
 		}
 		&.is-answer-MAYBE {
-			background: orange;
+			background: $d-warning;
+			color: $d-warning-text;
 		}
 		&.is-answer-NO {
-			background: red;
+			background: $d-error;
+			color: $d-error-text;
 		}
 	}
+	&.is-active {
+		&.is-answer-YES {
+			background: $d-success;
+			color: $d-success-text;
+		}
+		&.is-answer-MAYBE {
+			background: $d-warning;
+			color: $d-warning-text;
+		}
+		&.is-answer-NO {
+			background: $d-error;
+			color: $d-error-text;
+		}
+	}
+	.icon-deco {
+		padding: 20px;
+		border: solid 1px grey;
+		background-position: center;
+	}
 }

src/styles/dev-utilities/_helpers.scss

@@ -85,10 +85,20 @@
 .has-no-padding {
 	padding: 0;
 }
+// filters made with https://codepen.io/sosuke/pen/Pjoqqp
 
 .is-filtered-icon-primary {
 	filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
 }
+.is-filtered-icon-yes {
+	filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
+}
+.is-filtered-icon-maybe {
+	filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
+}
+.is-filtered-icon-no {
+	filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
+}
 .is-large-button {
 	width: 100%;
 	display: block;
@@ -104,6 +114,17 @@
 .has-background-transparent {
 	background-color: transparent;
 }
+
+.has-background-answer-YES {
+	background: url('/assets/icons/plus-circle.svg') no-repeat 28px center;
+}
+.has-background-answer-MAYBE {
+	background: url('/assets/icons/help-circle.svg') no-repeat 28px center;
+}
+.has-background-answer-NO {
+	background: url('/assets/icons/x.svg') no-repeat 28px center;
+}
+
 .has-background-plus {
 	background: url('/assets/icons/plus-circle.svg') no-repeat 16px center;
 }

src/styles/partials/_buttons.scss

@@ -179,7 +179,6 @@ a {
 
 	&:hover {
 		color: $white !important;
-		//background-color: $primary_color;
 		button {
 			color: $white !important;
 		}

src/styles/partials/_typo.scss

@@ -43,8 +43,8 @@ body {
 	}
 	.is-2 {
 		color: $d-primary-intense;
-		font-size: 20px;
+		font-size: 28px;
-		line-height: 23px;
+		line-height: 32px;
 		margin-bottom: 1rem;
 	}
 	.is-3 {
@@ -56,7 +56,33 @@ body {
 		line-height: 28px;
 		margin-bottom: 1rem;
 	}
-
+	.is-4 {
+		color: $d-primary-intense;
+		font-family: $title_font;
+		font-weight: 700;
+		font-style: normal;
+		font-size: 24px;
+		line-height: 28px;
+		margin-bottom: 1rem;
+	}
+	.is-5 {
+		color: #383838;
+		font-family: $title_font;
+		font-weight: 700;
+		font-style: normal;
+		font-size: 20px;
+		line-height: 23px;
+		margin-bottom: 1rem;
+	}
+	.is-6 {
+		color: #383838;
+		font-family: $title_font;
+		font-weight: 700;
+		font-style: normal;
+		font-size: 16px;
+		line-height: 20px;
+		margin-bottom: 1rem;
+	}
 	.nobold {
 		font-weight: normal;
 	}