From 84c5fb775733cc37cf4670c57497020e870ad68d Mon Sep 17 00:00:00 2001
From: Daan Breur <git@daanbreur.systems>
Date: Mon, 22 Nov 2021 14:30:27 +0100
Subject: [PATCH] Added option to FormElements for inline label,input.

Signed-off-by: Daan Breur <git@daanbreur.systems>
---
 src/css/ingame_hud/dialogs.scss   | 12 +++++++++++-
 src/js/core/modal_dialog_forms.js | 22 ++++++++++++++++------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/css/ingame_hud/dialogs.scss b/src/css/ingame_hud/dialogs.scss
index 131147b6..3aaf4b71 100644
--- a/src/css/ingame_hud/dialogs.scss
+++ b/src/css/ingame_hud/dialogs.scss
@@ -215,7 +215,17 @@
                 }
             }
 
-            > .detailsFormElem {
+            .inline {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                > * {
+                    @include S(margin-right, 7.5px);
+                }
+            }
+
+            .detailsFormElem {
                 > .object {
                     pointer-events: all;
 
diff --git a/src/js/core/modal_dialog_forms.js b/src/js/core/modal_dialog_forms.js
index 864d13ab..3a0963fe 100644
--- a/src/js/core/modal_dialog_forms.js
+++ b/src/js/core/modal_dialog_forms.js
@@ -93,12 +93,21 @@ export class FormElementDetails extends FormElement {
 }
 
 export class FormElementInput extends FormElement {
-    constructor({ id, label = null, placeholder, defaultValue = "", inputType = "text", validator = null }) {
+    constructor({
+        id,
+        label = null,
+        placeholder,
+        defaultValue = "",
+        inputType = "text",
+        validator = null,
+        inline = false,
+    }) {
         super(id, label);
         this.placeholder = placeholder;
         this.defaultValue = defaultValue;
         this.inputType = inputType;
         this.validator = validator;
+        this.inline = inline;
 
         this.element = null;
     }
@@ -128,7 +137,7 @@ export class FormElementInput extends FormElement {
         }
 
         return `
-            <div class="formElement input">
+            <div class="formElement input ${this.inline ? "inline" : ""}">
                 ${this.label ? `<label>${this.label}</label>` : ""}
                 <input
                     type="${inputType}"
@@ -188,21 +197,22 @@ export class FormElementInput extends FormElement {
 }
 
 export class FormElementCheckbox extends FormElement {
-    constructor({ id, label, defaultValue = true }) {
+    constructor({ id, label, defaultValue = true, inline = false }) {
         super(id, label);
         this.defaultValue = defaultValue;
         this.value = this.defaultValue;
+        this.inline = inline;
 
         this.element = null;
     }
 
     getHtml() {
         return `
-            <div class="formElement checkBoxFormElem">
+            <div class="formElement checkBoxFormElem ${this.inline ? "inline" : ""}">
             ${this.label ? `<label>${this.label}</label>` : ""}
                 <div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'>
-                    <span class="knob"></span >
-                </div >
+                    <span class="knob"></span>
+                </div>
             </div>
         `;
     }