add bullet on lang selector

mocks/old-stuff/config/defaultConfigs.ts

@@ -23,10 +23,10 @@ const currentMonth = new Date().getMonth();
 const currentDay = new Date().getDate();
 
 export const basicSlicesOfDay: TimeSlices[] = [
-	{ literal: 'matin' },
+	{ literal: '' },
-	{ literal: 'midi' },
+	// { literal: 'midi' },
-	{ literal: 'après-midi' },
+	// { literal: 'après-midi' },
-	{ literal: 'soir' },
+	// { literal: 'soir' },
 ];
 export const otherSlicesOfDay: TimeSlices[] = [
 	{ literal: 'aux aurores' },

src/app/core/models/dateChoice.model.ts

@@ -11,10 +11,10 @@ export interface TimeSlices {
 
 export const timeSlicesProposals: TimeSlices[] = [
 	{ literal: 'matin' },
-	{ literal: 'midi' },
+	// { literal: 'midi' },
-	{ literal: 'après-midi' },
+	// { literal: 'après-midi' },
-	{ literal: 'soir' },
+	// { literal: 'soir' },
-	{ literal: 'aux aurores' },
+	// { literal: 'aux aurores' },
-	{ literal: 'au petit dej' },
+	// { literal: 'au petit dej' },
-	{ literal: 'au deuxième petit dej des hobbits' },
+	// { literal: 'au deuxième petit dej des hobbits' },
 ];

src/app/core/services/poll.service.ts

@@ -51,7 +51,7 @@ export class PollService implements Resolve<Poll> {
 	public allowSeveralHours = false;
 	public richTextMode = false;
 	public mode_calendar = true; // default input to select dates in creation step
-	public calendar: Date[] = [new Date()];
+	public calendar: Date[] = [];
 	public disabled_dates: Date[] = [];
 
 	constructor(
@@ -72,16 +72,15 @@ export class PollService implements Resolve<Poll> {
 	) {
 		this.createFormGroup();
 
-		// fill in the next 3 days of the calendar date picker
-		this.calendar = this.DateUtilitiesService.makeDefaultCalendarDateChoices();
-		this.dateChoiceList = this.DateUtilitiesService.makeDefaultDateChoices();
-
 		// disable days before today
 		for (let i = 1; i < 31; i++) {
 			this.disabled_dates.push(this.DateUtilitiesService.addDaysToDate(-i, new Date()));
 		}
 		if (environment.autofill_creation) {
 			this.setDemoValues();
+			// fill in the next 3 days of the calendar date picker
+			this.calendar = this.DateUtilitiesService.makeDefaultCalendarDateChoices();
+			this.dateChoiceList = this.DateUtilitiesService.makeDefaultDateChoices();
 		}
 		if (environment.autoSendNewPoll) {
 			this.createPoll();

src/app/features/administration/form/steps/step-one/step-one.component.html

@@ -2,7 +2,7 @@
 <div class="step step-container">
 	<form class="min-height" [formGroup]="pollService.form">
 		<section class="poll-title">
-			<h1 class="title is-2">
+			<h1 class="title is-1">
 				{{ 'creation.choose_title' | translate }}
 			</h1>
 			<div class="columns">

src/app/features/administration/form/steps/step-two/step-two.component.html

@@ -3,7 +3,7 @@
 	<form action="#" [formGroup]="pollService.form">
 		<div class="min-height">
 			<app-errors-list [form]="pollService.form"></app-errors-list>
-			<h1 class="title is-3">
+			<h1 class="title is-1">
 				{{ 'creation.want' | translate }}
 			</h1>
 			<div class=" ">

src/app/features/administration/nav-steps/nav-steps.component.scss

@@ -3,9 +3,5 @@
 .bottom-step-buttons {
 	.button-previous {
 		margin-left: 0;
-		&:hover {
-			background: $d-primary;
-			color: $white !important;
-		}
 	}
 }

src/app/features/administration/success/success.component.html

@@ -25,7 +25,7 @@
 							</svg>
 						</div>
 						<div class="column">
-							<h1 class="title is-2 poll-title success-creation-title is-success">
+							<h1 class="title is-1 poll-title success-creation-title is-success">
 								{{ 'success.title' | translate }}
 							</h1>
 							<span class="description">

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -80,12 +80,11 @@
 							[attr.for]="'#lang_' + language"
 							class="lang-element button is-action"
 							[ngClass]="{
-								'is-primary': language_to_apply === language.value,
+								'is-primary is-focused': language_to_apply === language.value,
 								'is-current': language.value === currentLang
 							}"
 						>
 							<input
-								class="pull-left"
 								type="radio"
 								value="{{ language.value }}"
 								name="lang_to_apply"

src/app/shared/components/selectors/language-selector/language-selector.component.scss

@@ -1,7 +1,15 @@
 @import './../../../../../styles/variables';
-
+.outlined {
+	&:focus {
+		outline: $outline-color;
+		outline-style: solid;
+		outline-offset: 0.15rem;
+	}
+	&:active {
+		outline: transparent;
+	}
+}
 .language-selector-container {
-	cursor: pointer;
 	color: $primary-color;
 
 	i {
@@ -22,6 +30,11 @@
 		background: transparent;
 		margin-right: 0.5rem;
 
+		&.is-primary {
+			outline: $outline-color;
+			outline-style: solid;
+			outline-offset: 0.15rem;
+		}
 		&:hover {
 			.fa {
 				color: $white;
@@ -29,6 +42,13 @@
 		}
 	}
 
+	.list-of-langs {
+		.is-focused {
+			outline: $outline-color !important;
+			outline-style: solid;
+			outline-offset: 0.15rem;
+		}
+	}
 	// some lang to select in the popup
 	.lang-element {
 		float: left;
@@ -36,9 +56,14 @@
 		min-height: auto;
 		margin-right: 2rem;
 		margin-bottom: 1rem;
-
+		border: 0 !important;
 		input {
-			display: none;
+			//display: none;
+			border: 0 !important;
+			width: 1em;
+			height: 1em;
+			float: left;
+			margin-right: 1ch;
 		}
 	}
 

src/assets/i18n/en.json

@@ -184,7 +184,7 @@
         "label": "Check your poll",
         "action": "See my poll",
 				"deleted_option": "Option removed",
-				"deleted_day": "Date removed",
+				"deleted_day": "The date was successfully removed",
         "admins": "Admin side",
         "users": "Respondent side",
         "links_mail": "Receive links by email",

src/assets/i18n/fr.json

@@ -191,7 +191,7 @@
         "go_back": "Revenir en arrière",
         "copy": "Copier",
         "deleted_option": "Option supprimée",
-        "deleted_day": "Date supprimée",
+        "deleted_day": "La date a bien été supprimée",
         "copy_message": "Texte copié :"
     },
     "visibility": {

src/styles/libraries/_overrides.scss

@@ -99,8 +99,23 @@ button .icon:first-child:last-child,
 .p-datepicker table td > span:focus,
 .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
 .p-datepicker .p-datepicker-header .p-datepicker-next:focus {
-	outline: 3px solid $outline-color !important;
+	//outline: 3px solid $outline-color !important;
+
+	@extend .outlined;
 }
+
+.p-datepicker-buttonbar {
 	.p-button.p-button-text {
 		color: $primary-color;
+		background: white;
+
+		&:hover {
+			color: $d-primary-intense;
+			background: #f6f5fb;
+			.p-button-label {
+				color: $d-primary-intense;
+				background: #f6f5fb;
+			}
+		}
+	}
 }

src/styles/partials/_buttons.scss

@@ -159,7 +159,11 @@ a {
 .is-danger {
 	background-color: #e08181;
 }
-
+.is-focused {
+	outline: $outline-color !important;
+	outline-style: solid;
+	outline-offset: 0.15rem;
+}
 .btn--danger {
 	@extend .is-danger;
 }

src/styles/partials/_typo.scss

@@ -16,7 +16,7 @@ body {
 			font-weight: 700;
 			font-size: 32px;
 			line-height: 37px;
-			margin-bottom: 1rem;
+			margin-bottom: 2rem;
 		}
 		&.is-2 {
 			color: $d-primary-intense;
@@ -39,7 +39,7 @@ body {
 		font-weight: 700;
 		font-size: 32px;
 		line-height: 37px;
-		margin-bottom: 1rem;
+		margin-bottom: 2rem;
 	}
 	.is-2 {
 		color: $d-primary-intense;