From b08657523578c23278d620a3942cf0de8239f2e7 Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Tue, 14 Mar 2023 16:27:05 +0100
Subject: [PATCH 1/2] scss: add option to display icons in forms buttons
 (#74954)

---
 help/fr/misc-scss.page      |  6 ++++++
 static/includes/_forms.scss | 41 +++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index d014883d..76403cb0 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -665,6 +665,12 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   </td>
   <td><p><var>null</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$buttons-with-icons</code></p></td>
+  <td><p>Ajoute des icônes aux boutons des formulaires des demandes.</p>
+  </td>
+  <td><p><var>false</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$timetable-cell-background</code></p></td>
   <td><p>Couleur de fond des créneaux horaires.</p>
diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index 583fa97b..ab9e0448 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -45,7 +45,11 @@ $form-style: classic !default;
 // 	optionnal (grow) option to move next button to right (ex: cancel (grow), previous, submit);
 $buttons-order: null !default;
 $buttons-alignment: null !default; // any flexbox justify-content value;
+$buttons-with-icons: false !default;
 
+$submit-button-icon: '\f105' !default; /* angle right */
+$previous-button-icon: '\f104' !default; /* angle left */
+$cancel-button-icon: '\f00d' !default; /* remove icon */
 
 %custom-radio-checkbox-widget {
 	label {
@@ -652,6 +656,43 @@ div.select2-search {
 	}
 }
 
+// Buttons with icons
+
+.submit-button-with-icon {
+	&::after {
+		font-family: FontAwesome;
+		content: $submit-button-icon;
+		margin-left: 0.5em;
+	}
+}
+
+.previous-button-with-icon {
+	&::before {
+		font-family: FontAwesome;
+		content: $previous-button-icon;
+		margin-right: 0.5em;
+	}
+}
+
+.cancel-button-with-icon {
+	&::before {
+		font-family: FontAwesome;
+		content: $cancel-button-icon;
+		margin-right: 0.5em;
+	}
+}
+
+
+@if $buttons-with-icons {
+	.quixote:not(#wf-actions) div.buttons {
+		@each $btn in (submit, previous, cancel) {
+			.#{$btn}-button button {
+				@extend .#{$btn}-button-with-icon;
+			}
+		}
+	}
+}
+
 // Buttons order & alignment configuration
 @if $buttons-order or $buttons-alignment {
 	.quixote:not(#wf-actions) div.buttons {
-- 
2.39.2


From a83e13fde0f93fb00ba3e19a5c869613231a47d7 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 30 Mar 2023 17:57:54 +0200
Subject: [PATCH 2/2] scss: put buttons icons code inside @mixin (#74954)

---
 static/includes/_forms.scss | 52 +++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index ab9e0448..78d23f8a 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -656,34 +656,40 @@ div.select2-search {
 	}
 }
 
-// Buttons with icons
-
-.submit-button-with-icon {
-	&::after {
+// Button with FontAwesome icon
+// $position: left || right
+// $character : UTF value
+@mixin button-with-icon($position: right, $character: '\f105') {
+	&::before, &::after {
 		font-family: FontAwesome;
-		content: $submit-button-icon;
-		margin-left: 0.5em;
+	}
+	@if ($position == left) {
+		&::before {
+			content: $character;
+			margin-right: 0.5em;
+		}
+	}
+	@if ($position == right) {
+		&::after {
+			content: $character;
+			margin-left: 0.5em;
+		}
 	}
 }
 
-.previous-button-with-icon {
-	&::before {
-		font-family: FontAwesome;
-		content: $previous-button-icon;
-		margin-right: 0.5em;
-	}
-}
-
-.cancel-button-with-icon {
-	&::before {
-		font-family: FontAwesome;
-		content: $cancel-button-icon;
-		margin-right: 0.5em;
-	}
-}
-
-
 @if $buttons-with-icons {
+	.submit-button-with-icon {
+		@include button-with-icon(right, $submit-button-icon);
+	}
+
+	.previous-button-with-icon {
+		@include button-with-icon(left, $previous-button-icon);
+	}
+
+	.cancel-button-with-icon {
+		@include button-with-icon(left, $cancel-button-icon);
+	}
+
 	.quixote:not(#wf-actions) div.buttons {
 		@each $btn in (submit, previous, cancel) {
 			.#{$btn}-button button {
-- 
2.39.2