Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-12-16 19:51:50 +00:00
Code Issues Projects Releases Wiki Activity

Added option to FormElements for inline label,input.

Browse Source 
Signed-off-by: Daan Breur <git@daanbreur.systems>
This commit is contained in:
Daan Breur 2021-11-22 14:30:27 +01:00
parent d9d7292526
commit 84c5fb7757
No known key found for this signature in database
GPG Key ID: FAD44580052ECA57
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/css/ingame_hud/dialogs.scss
View File

@ -215,7 +215,17 @@
} }
} }
> .detailsFormElem { .inline {
display: flex;
flex-direction: row;
align-items: center;
> * {
@include S(margin-right, 7.5px);
}
}
.detailsFormElem {
> .object { > .object {
pointer-events: all; pointer-events: all;

22
src/js/core/modal_dialog_forms.js
View File

@ -93,12 +93,21 @@ export class FormElementDetails extends FormElement {
} }
export class FormElementInput 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); super(id, label);
this.placeholder = placeholder; this.placeholder = placeholder;
this.defaultValue = defaultValue; this.defaultValue = defaultValue;
this.inputType = inputType; this.inputType = inputType;
this.validator = validator; this.validator = validator;
this.inline = inline;
this.element = null; this.element = null;
} }
@ -128,7 +137,7 @@ export class FormElementInput extends FormElement {
} }
return ` return `
<div class="formElement input"> <div class="formElement input ${this.inline ? "inline" : ""}">
${this.label ? `<label>${this.label}</label>` : ""} ${this.label ? `<label>${this.label}</label>` : ""}
<input <input
type="${inputType}" type="${inputType}"
@ -188,21 +197,22 @@ export class FormElementInput extends FormElement {
} }
export class FormElementCheckbox extends FormElement { export class FormElementCheckbox extends FormElement {
constructor({ id, label, defaultValue = true }) { constructor({ id, label, defaultValue = true, inline = false }) {
super(id, label); super(id, label);
this.defaultValue = defaultValue; this.defaultValue = defaultValue;
this.value = this.defaultValue; this.value = this.defaultValue;
this.inline = inline;
this.element = null; this.element = null;
} }
getHtml() { getHtml() {
return ` return `
<div class="formElement checkBoxFormElem"> <div class="formElement checkBoxFormElem ${this.inline ? "inline" : ""}">
${this.label ? `<label>${this.label}</label>` : ""} ${this.label ? `<label>${this.label}</label>` : ""}
<div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'> <div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'>
<span class="knob"></span > <span class="knob"></span>
</div > </div>
</div> </div>
`; `;
} }