⚡ advanced display, hide WIP

src/app/features/administration/form/advanced-config/advanced-config.component.html

@@ -1,64 +1,24 @@
 <form [formGroup]="form" class="form-advanced-config">
-	<div class="box-well" *ngIf="environment.propose_expire_input">
+	<div class="rounded-block max_count_of_answers">
 		<h3 class="title is-3">
-			Saisissez la date de fin de votre sondage
+			{{ 'advanced.limit_title' | translate }}
 		</h3>
-		<p>
+		<div *ngIf="form.value.hasMaxCountOfAnswers">
-			Par défaut votre sondage prendra fin {{ environment.expiresDaysDelay }} jours après le dernier jour
-			sélectionné dans vos propositions
-		</p>
-		<div class="date-expiracy">
-			<div class="columns">
-				<div class="column">
-					<label for="expiracy">Date</label>
-				</div>
-				<div class="column">
-					<span class="date-helper">JJ/MM/AAAA</span>
-				</div>
-			</div>
-			<div class="columns">
-				<div class="column">
-					<input formControlName="expiracy_date" type="text" id="expiracy" />
-				</div>
-				<div class="column is-narrow">
-					<img class="icon" src="assets/icons/calendar.svg" alt="icone calendrier" />
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="columns">
-		<div class="column is-narrow">
-			<input type="checkbox" formControlName="hasMaxCountOfAnswers" id="hasMaxCountOfAnswers" />
-			<img class="icon" src="assets/icons/users.svg" alt="icone utilisateurs" />
-		</div>
-		<div class="column">
 			<label for="maxCountOfAnswers">
-				<h4 class="title is-4">
+				{{ 'advanced.limit_label' | translate }}
-					Limiter le nombre de votants par proposition
-				</h4>
-				<p>
-					Vous pouvez pour l'ensemble de vos options limiter le nombre de votants
-				</p>
 			</label>
-			<div *ngIf="form.value.hasMaxCountOfAnswers">
+			<input
-				<label for="maxCountOfAnswers">
+				#maxCountOfAnswers
-					Préciser le nombre maximum de participations
+				id="maxCountOfAnswers"
-				</label>
+				matInput
-				<input
+				type="number"
-					#maxCountOfAnswers
+				formControlName="maxCountOfAnswers"
-					id="maxCountOfAnswers"
+				required
-					matInput
+			/>
-					type="number"
-					formControlName="maxCountOfAnswers"
-					required
-				/>
-			</div>
 		</div>
 	</div>
 	<hr />
-	<fieldset>
+	<div class="rounded-block">
-		<br />
-
 		<label for="custom_url">
 			Url personnalisée pour les participants
 		</label>
@@ -85,18 +45,21 @@
 				required
 			/>
 		</div>
-		<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
+		<div class="rounded-box">
-			Les participants pourront consulter les résultats
+			<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
-		</mat-checkbox>
+				Les participants pourront consulter les résultats
-		<h3 class="title is-3">
+			</mat-checkbox>
-			<i class="fa fa-lock"></i>
+		</div>
-			Accès sécurisé
+		<div class="rounded-box">
-		</h3>
+			<h3 class="title is-3">
+				{{ 'advanced.password_title' | translate }}
+			</h3>
+
+			<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
+				{{ 'advanced.password_label' | translate }}
+			</mat-checkbox>
+		</div>
 
-		<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
-			Le sondage sera protégé par un mot de passe
-		</mat-checkbox>
-		<br />
 		<div class="password-box" *ngIf="form.value.isProtectedByPassword">
 			<input
 				#password
@@ -166,9 +129,10 @@
 		<p>
 			Utile pour réserver des places à un évènement.
 		</p>
-	</fieldset>
+	</div>
 
-	<fieldset class="work-in-progress">
+	<!--	hidden configs, work in progress-->
+	<fieldset class="work-in-progress" *ngIf="environment.display_wip">
 		<h2 class="title is-2">
 			<i class="fa fa-wikidata"></i>
 			Fonctionnalités pas encore disponibles:
@@ -204,5 +168,33 @@
 			Les informations du sondage seront chiffrées en base de données
 		</p>
 	</fieldset>
+	<div class="rounded-block propose_expire_input" *ngIf="environment.propose_expire_input">
+		<h3 class="title is-3">
+			Saisissez la date de fin de votre sondage
+		</h3>
+		<p>
+			Par défaut votre sondage prendra fin {{ environment.expiresDaysDelay }} jours après le dernier jour
+			sélectionné dans vos propositions
+		</p>
+		<div class="date-expiracy" *ngIf="environment.display_date_end_of_poll">
+			<div class="columns">
+				<div class="column">
+					<label for="expiracy">Date</label>
+				</div>
+				<div class="column">
+					<span class="date-helper">JJ/MM/AAAA</span>
+				</div>
+			</div>
+			<div class="columns">
+				<div class="column">
+					<input formControlName="expiracy_date" type="text" id="expiracy" />
+				</div>
+				<div class="column is-narrow">
+					<img class="icon" src="assets/icons/calendar.svg" alt="icone calendrier" />
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<app-errors-list [form]="form"></app-errors-list>
 </form>

src/app/features/administration/form/advanced-config/advanced-config.component.scss

@@ -1,16 +1,10 @@
 @import '../../../../../styles/variables';
 
-.title {
-	margin-top: 2em;
-}
 .mat-checkbox {
 	img {
 		margin-left: 1em;
 	}
 }
-.button .fa {
-	margin: 1em;
-}
 input,
 textarea {
 	margin-top: 0.5em;

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

@@ -4,7 +4,7 @@
 		<section class="supplement">
 			<app-errors-list [form]="pollService.form"></app-errors-list>
 			<div class="advanced-config">
-				<h2 class="title is-2">
+				<h2 class="title is-3">
 					{{ 'advanced.title' | translate }}
 				</h2>
 				<p class="decription">

src/environments/environment.prod.ts

@@ -91,4 +91,6 @@ export const environment = {
 	defaultLanguage: 'FR',
 	display_count_timelist: false,
 	display_time_actions_more: false,
+	display_date_end_of_poll: false,
+	display_wip: false,
 };

src/environments/environment.ts

@@ -51,6 +51,8 @@ export const environment = {
 	defaultLanguage: 'FR',
 	display_count_timelist: false,
 	display_time_actions_more: false,
+	display_date_end_of_poll: false,
+	display_wip: false,
 };
 
 // Included with Angular CLI.

src/styles/dev-utilities/_helpers.scss

@@ -55,7 +55,7 @@
 
 .rounded-block {
 	border-radius: 0.25em;
-	background: $bg-grey;
+	background: $d-blue30;
 	padding: 1em;
 	margin-bottom: 0.5em;