From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 1 Dec 2021 11:06:19 +0000 (+0000)
Subject: Refactor forms
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=1b19941d1e8f268d4e45e21ef7e4a1de4de4b56f;p=people%2Fms%2Fwestferry.git

Refactor forms

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/Makefile.am b/Makefile.am
index 708bec7..a8fb217 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -150,9 +150,8 @@ dist_templates_modules_DATA =
 templates_modules_formsdir = $(templates_modulesdir)/forms
 
 dist_templates_modules_forms_DATA = \
-	src/templates/modules/forms/element.html \
+	src/templates/modules/forms/elements.html \
 	src/templates/modules/forms/fieldset.html \
-	src/templates/modules/forms/group.html \
 	src/templates/modules/forms/index.html
 
 templates_modules_forms_inputsdir = $(templates_modules_formsdir)/inputs
diff --git a/src/templates/modules/forms/element.html b/src/templates/modules/forms/element.html
deleted file mode 100644
index 34b1471..0000000
--- a/src/templates/modules/forms/element.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="form-group">
-	{% if e.label %}
-		<label class="col-sm-2 control-label">{{ e.label }}</label>
-	{% end %}
-
-	<div class="col-sm-10 {% if not e.label %}col-sm-offset-2{% end %}">
-		{% module FormInput(e) %}
-
-		{% if e.help %}
-			<span class="help-block">{{ e.help }}</span>
-		{% end %}
-	</div>
-</div>
diff --git a/src/templates/modules/forms/elements.html b/src/templates/modules/forms/elements.html
new file mode 100644
index 0000000..2fcf996
--- /dev/null
+++ b/src/templates/modules/forms/elements.html
@@ -0,0 +1,15 @@
+{% import westferry.backend.forms %}
+
+{% for element in elements %}
+	{% if isinstance(element, westferry.backend.forms.Fieldset) %}
+		{% module FormFieldset(element) %}
+	{% elif isinstance(element, westferry.backend.forms.MultilineTextInput) %}
+		{% module MultilineTextInput(element) %}
+	{% elif isinstance(element, westferry.backend.forms.PasswordInput) %}
+		{% module PasswordInput(element) %}	
+	{% elif isinstance(element, westferry.backend.forms.TextInput) %}
+		{% module TextInput(element) %}
+	{% elif isinstance(element, westferry.backend.forms.YesNoInput) %}
+		{% module YesNoInput(element) %}
+	{% end %}
+{% end %}
diff --git a/src/templates/modules/forms/fieldset.html b/src/templates/modules/forms/fieldset.html
index 18c76cb..8ef698d 100644
--- a/src/templates/modules/forms/fieldset.html
+++ b/src/templates/modules/forms/fieldset.html
@@ -1,25 +1,15 @@
 {% import westferry.backend.forms %}
 
-<fieldset {% if fs.disabled %}disabled{% end %}>
+<fieldset class="fieldset" {% if fs.disabled %}disabled{% end %}>
 	{% if fs.label %}
 		<legend>{{ fs.label }}</legend>
-	{% else %}
-		<hr>
 	{% end %}
 
 	{% if fs.help %}
-		<div class="row">
-			<div class="col-md-10 col-md-offset-2">
-				<span class="help-block">{{ fs.help }}</span>
-			</div>
-		</div>
+		<p>
+			{{ fs.help }}
+		</p>
 	{% end %}
 
-	{% for e in fs %}
-		{% if isinstance(e, westferry.backend.forms.Group) %}
-			{% module FormGroup(e) %}
-		{% else %}
-			{% module FormElement(e) %}
-		{% end %}
-	{% end %}
+	{% module FormElements(fs) %}
 </fieldset>
diff --git a/src/templates/modules/forms/group.html b/src/templates/modules/forms/group.html
deleted file mode 100644
index caacfb6..0000000
--- a/src/templates/modules/forms/group.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="form-inline">
-	{% for e in group %}
-		<div class="form-group">
-			{% if e.label %}
-				<label>{{ e.label }}</label>
-			{% end %}
-
-			{% module FormInput(e) %}
-		</div>
-	{% end %}
-</div>
diff --git a/src/templates/modules/forms/index.html b/src/templates/modules/forms/index.html
index 291721d..358f10b 100644
--- a/src/templates/modules/forms/index.html
+++ b/src/templates/modules/forms/index.html
@@ -1,21 +1,9 @@
 {% import westferry.backend.forms %}
 
-<form class="form-horizontal" method="{{ f.method }}" action="{{ f.action }}">
+<form method="{{ f.method }}" action="{{ f.action }}">
 	{% raw xsrf_form_html() %}
 
-	{% for e in f %}
-		{% if isinstance(e, westferry.backend.forms.Fieldset) %}
-			{% module FormFieldset(e) %}
-		{% elif isinstance(e, westferry.backend.forms.Group) %}
-			{% module FormGroup(e) %}
-		{% else %}
-			{% module FormElement(e) %}
-		{% end %}
-	{% end %}
+	{% module FormElements(f) %}
 
-	<div class="form-group">
-		<div class="col-sm-10 col-sm-offset-2">
-			<button type="submit" class="btn btn-primary">{{ f.submit_text or _("Submit") }}</button>
-		</div>
-	</div>
+	<button type="submit" class="primary button">{{ f.submit_text or _("Submit") }}</button>
 </form>
diff --git a/src/templates/modules/forms/inputs/base.html b/src/templates/modules/forms/inputs/base.html
index ed6b341..6f0c740 100644
--- a/src/templates/modules/forms/inputs/base.html
+++ b/src/templates/modules/forms/inputs/base.html
@@ -1,11 +1,9 @@
-{% import westferry.backend.forms %}
+<label>
+	{% if input.label %}{{ input.label }}{% end %}
 
-{% if isinstance(input, westferry.backend.forms.MultilineTextInput) %}
-	{% module MultilineTextInput(input) %}
-{% elif isinstance(input, westferry.backend.forms.PasswordInput) %}
-	{% module PasswordInput(input) %}	
-{% elif isinstance(input, westferry.backend.forms.TextInput) %}
-	{% module TextInput(input) %}
-{% elif isinstance(input, westferry.backend.forms.YesNoInput) %}
-	{% module YesNoInput(input) %}
+	{% block element %}{% end block %}
+</label>
+
+{% if input.help %}
+	<p class="help-text" id="XXX TODO">{{ input.help }}</p>
 {% end %}
diff --git a/src/templates/modules/forms/inputs/checkbox.html b/src/templates/modules/forms/inputs/checkbox.html
index a4e56ab..23e21ad 100644
--- a/src/templates/modules/forms/inputs/checkbox.html
+++ b/src/templates/modules/forms/inputs/checkbox.html
@@ -1,6 +1,6 @@
-<div class="checkbox">
-	<label>
-		<input type="checkbox" name="{{ input.name }}" {% if input.value %}checked{% end %}>
-		{% if input.description %}{{ input.description }}{% end %}
-	</label>
-</div>
+<input id="checkbox1" type="checkbox"
+	name="{{ input.name }}" {% if input.value %}checked{% end %}>
+
+{% if input.description %}
+	<label for="checkbox1">{{ input.description }}</label>
+{% end %}
diff --git a/src/templates/modules/forms/inputs/text.html b/src/templates/modules/forms/inputs/text.html
index 6f3308c..0321ae2 100644
--- a/src/templates/modules/forms/inputs/text.html
+++ b/src/templates/modules/forms/inputs/text.html
@@ -1,18 +1,23 @@
-{% if input.prefix or input.suffix %}
-	<div class="input-group">
-		{% if input.prefix %}
-			<div class="input-group-addon">{{ input.prefix }}</div>
-		{% end%}
-{% end %}
+{% extends "base.html" %}
 
-<input type="{{ input.type }}" name="{{ input.name }}" class="form-control"
-	{% if input.placeholder %}placeholder="{{ input.placeholder }}"{% end %}
-	{% if input.disabled %}disabled{% end %}
-	{% if input.readonly %}readonly{% end %} />
+{% block element %}
+	{% if input.prefix or input.suffix %}
+		<div class="input-group">
+			{% if input.prefix %}
+				<span class="input-group-label">{{ input.prefix }}</span>
+			{% end %}
+	{% end %}
 
-{% if input.prefix or input.suffix %}
-		{% if input.suffix %}
-			<div class="input-group-addon">{{ input.suffix }}</div>
-		{% end %}
-	</div>
-{% end %}
+	<input type="{{ input.type }}" name="{{ input.name }}"
+		{% if input.prefix or input.suffix %}class="input-group-field"{% end %}
+		{% if input.placeholder %}placeholder="{{ input.placeholder }}"{% end %}
+		{% if input.disabled %}disabled{% end %}
+		{% if input.readonly %}readonly{% end %} />
+
+	{% if input.prefix or input.suffix %}
+			{% if input.suffix %}
+				<span class="input-group-label">{{ input.suffix }}</span>
+			{% end %}
+		</div>
+	{% end %}
+{% end block %}
diff --git a/src/templates/modules/forms/inputs/textarea.html b/src/templates/modules/forms/inputs/textarea.html
index 6e88343..f6f2e88 100644
--- a/src/templates/modules/forms/inputs/textarea.html
+++ b/src/templates/modules/forms/inputs/textarea.html
@@ -1,3 +1,7 @@
-<textarea class="form-control" name="{{ input.name }}" rows="{{ input.lines }}"
-	{% if input.placeholder %}placeholder="{{ input.placeholder }}"{% end %}
-	>{% if input.value %}{{ input.value }}{% end %}</textarea>
+{% extends "base.html" %}
+
+{% block element %}
+	<textarea class="form-control" name="{{ input.name }}" rows="{{ input.lines }}"
+		{% if input.placeholder %}placeholder="{{ input.placeholder }}"{% end %}
+		>{% if input.value %}{{ input.value }}{% end %}</textarea>
+{% end block %}
diff --git a/src/westferry/ui/forms.py b/src/westferry/ui/forms.py
index ddd3ec1..2764d92 100644
--- a/src/westferry/ui/forms.py
+++ b/src/westferry/ui/forms.py
@@ -28,11 +28,9 @@ class FormModule(base.BaseUIModule):
 			f=form, forms=forms)
 
 
-class FormElementModule(base.BaseUIModule):
-	def render(self, element):
-		assert isinstance(element, forms.Element)
-
-		return self.render_string("modules/forms/element.html", e=element)
+class FormElementsModule(base.BaseUIModule):
+	def render(self, elements):
+		return self.render_string("modules/forms/elements.html", elements=elements)
 
 
 class FormFieldsetModule(base.BaseUIModule):
@@ -40,20 +38,6 @@ class FormFieldsetModule(base.BaseUIModule):
 		return self.render_string("modules/forms/fieldset.html", fs=fieldset)
 
 
-class FormGroupModule(base.BaseUIModule):
-	def render(self, group):
-		return self.render_string("modules/forms/group.html", group=group)
-
-
-class FormInputModule(base.BaseUIModule):
-	"""
-		This is a proxy module that will pick the right
-		*InputModule.
-	"""
-	def render(self, input):
-		return self.render_string("modules/forms/inputs/base.html", input=input)
-
-
 class TextInputModule(base.BaseUIModule):
 	def render(self, input):
 		assert isinstance(input, forms.TextInput)