Add labels/fields horizontal ratio option for FormPanel component.

6 files changed, 55 insertions, 27 deletions

diff --git a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt
index 450d4466..ac0e9836 100644
--- a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt
+++ b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt
@@ -25,6 +25,7 @@ import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.FieldLabel
+import pl.treksoft.kvision.form.FormHorizontalRatio
 import pl.treksoft.kvision.form.InvalidFeedback
 import pl.treksoft.kvision.form.NumberFormControl
 import pl.treksoft.kvision.html.ButtonStyle
@@ -243,13 +244,13 @@ open class Spinner(
         input.blur()
     }
 
-    override fun styleForHorizontalFormPanel() {
+    override fun styleForHorizontalFormPanel(horizontalRatio: FormHorizontalRatio) {
         addCssClass("row")
-        flabel.addCssClass("col-sm-2")
+        flabel.addCssClass("col-sm-${horizontalRatio.labels}")
         flabel.addCssClass("col-form-label")
-        input.addSurroundingCssClass("col-sm-10")
-        invalidFeedback.addCssClass("offset-sm-2")
-        invalidFeedback.addCssClass("col-sm-10")
+        input.addSurroundingCssClass("col-sm-${horizontalRatio.fields}")
+        invalidFeedback.addCssClass("offset-sm-${horizontalRatio.labels}")
+        invalidFeedback.addCssClass("col-sm-${horizontalRatio.fields}")
     }
 
     companion object {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt
index ece72189..9c9aba80 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt
@@ -186,13 +186,13 @@ interface FormControl : Component {
     /**
      * Style form control element for horizontal form panel.
      */
-    fun styleForHorizontalFormPanel() {
+    fun styleForHorizontalFormPanel(horizontalRatio: FormHorizontalRatio) {
         addCssClass("row")
-        flabel.addCssClass("col-sm-2")
+        flabel.addCssClass("col-sm-${horizontalRatio.labels}")
         flabel.addCssClass("col-form-label")
-        input.addCssClass("col-sm-10")
-        invalidFeedback.addCssClass("offset-sm-2")
-        invalidFeedback.addCssClass("col-sm-10")
+        input.addCssClass("col-sm-${horizontalRatio.fields}")
+        invalidFeedback.addCssClass("offset-sm-${horizontalRatio.labels}")
+        invalidFeedback.addCssClass("col-sm-${horizontalRatio.fields}")
     }
 
     /**
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
index 894ea4bc..0decc5e9 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
@@ -45,6 +45,21 @@ enum class FormType(internal val formType: String) {
 }
 
 /**
+ * Proportions for horizontal form layout.
+ */
+enum class FormHorizontalRatio(val labels: Int, val fields: Int) {
+    RATIO_2(2, 10),
+    RATIO_3(3, 9),
+    RATIO_4(4, 8),
+    RATIO_5(5, 7),
+    RATIO_6(6, 6),
+    RATIO_7(7, 5),
+    RATIO_8(8, 4),
+    RATIO_9(9, 3),
+    RATIO_10(10, 2)
+}
+
+/**
  * Form methods.
  */
 enum class FormMethod(internal val method: String) {
@@ -81,13 +96,15 @@ enum class FormTarget(internal val target: String) {
  * @param enctype form encoding type
  * @param type form layout
  * @param condensed  determines if the form is condensed.
+ * @param horizRatio  horizontal form layout ratio
  * @param classes set of CSS class names
  * @param serializer a serializer for model type
  */
 @Suppress("TooManyFunctions")
 open class FormPanel<K : Any>(
     method: FormMethod? = null, action: String? = null, enctype: FormEnctype? = null,
-    private val type: FormType? = null, condensed: Boolean = false, classes: Set<String> = setOf(),
+    private val type: FormType? = null, condensed: Boolean = false,
+    horizRatio: FormHorizontalRatio = FormHorizontalRatio.RATIO_2, classes: Set<String> = setOf(),
     serializer: KSerializer<K>
 ) : SimplePanel(classes) {
 
@@ -123,6 +140,10 @@ open class FormPanel<K : Any>(
      * Determines if the form is condensed.
      */
     var condensed by refreshOnUpdate(condensed)
+    /**
+     * Horizontal form layout ratio.
+     */
+    var horizRatio by refreshOnUpdate(horizRatio)
 
     /**
      * Function returning validation message.
@@ -215,7 +236,7 @@ open class FormPanel<K : Any>(
     ): FormPanel<K> {
         when (type) {
             FormType.INLINE -> control.styleForInlineFormPanel()
-            FormType.HORIZONTAL -> control.styleForHorizontalFormPanel()
+            FormType.HORIZONTAL -> control.styleForHorizontalFormPanel(horizRatio)
             else -> control.styleForVerticalFormPanel()
         }
         super.add(control)
@@ -395,10 +416,12 @@ open class FormPanel<K : Any>(
         @UseExperimental(ImplicitReflectionSerializer::class)
         inline fun <reified K : Any> create(
             method: FormMethod? = null, action: String? = null, enctype: FormEnctype? = null,
-            type: FormType? = null, condensed: Boolean = false, classes: Set<String> = setOf(),
+            type: FormType? = null, condensed: Boolean = false,
+            horizRatio: FormHorizontalRatio = FormHorizontalRatio.RATIO_2, classes: Set<String> = setOf(),
             noinline init: (FormPanel<K>.() -> Unit)? = null
         ): FormPanel<K> {
-            val formPanel = FormPanel(method, action, enctype, type, condensed, classes, K::class.serializer())
+            val formPanel =
+                FormPanel(method, action, enctype, type, condensed, horizRatio, classes, K::class.serializer())
             init?.invoke(formPanel)
             return formPanel
         }
@@ -413,10 +436,11 @@ open class FormPanel<K : Any>(
  */
 inline fun <reified K : Any> Container.formPanel(
     method: FormMethod? = null, action: String? = null, enctype: FormEnctype? = null,
-    type: FormType? = null, condensed: Boolean = false, classes: Set<String> = setOf(),
+    type: FormType? = null, condensed: Boolean = false,
+    horizRatio: FormHorizontalRatio = FormHorizontalRatio.RATIO_2, classes: Set<String> = setOf(),
     noinline init: (FormPanel<K>.() -> Unit)? = null
 ): FormPanel<K> {
-    val formPanel = create<K>(method, action, enctype, type, condensed, classes)
+    val formPanel = create<K>(method, action, enctype, type, condensed, horizRatio, classes)
     init?.invoke(formPanel)
     this.add(formPanel)
     return formPanel
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
index ac25b30d..4fa30d7b 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.BoolFormControl
 import pl.treksoft.kvision.form.FieldLabel
+import pl.treksoft.kvision.form.FormHorizontalRatio
 import pl.treksoft.kvision.form.InvalidFeedback
 import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.utils.SnOn
@@ -174,11 +175,11 @@ open class CheckBox(
         input.blur()
     }
 
-    override fun styleForHorizontalFormPanel() {
+    override fun styleForHorizontalFormPanel(horizontalRatio: FormHorizontalRatio) {
         addCssClass("form-group")
         addSurroundingCssClass("row")
-        addCssClass("offset-sm-2")
-        addCssClass("col-sm-10")
+        addCssClass("offset-sm-${horizontalRatio.labels}")
+        addCssClass("col-sm-${horizontalRatio.fields}")
     }
 
     override fun styleForInlineFormPanel() {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
index bb73da60..d2c58c87 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.BoolFormControl
 import pl.treksoft.kvision.form.FieldLabel
+import pl.treksoft.kvision.form.FormHorizontalRatio
 import pl.treksoft.kvision.form.InvalidFeedback
 import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.utils.SnOn
@@ -189,11 +190,11 @@ open class Radio(
         input.blur()
     }
 
-    override fun styleForHorizontalFormPanel() {
+    override fun styleForHorizontalFormPanel(horizontalRatio: FormHorizontalRatio) {
         addCssClass("form-group")
         addSurroundingCssClass("row")
-        addCssClass("offset-sm-2")
-        addCssClass("col-sm-10")
+        addCssClass("offset-sm-${horizontalRatio.labels}")
+        addCssClass("col-sm-${horizontalRatio.fields}")
     }
 
     override fun styleForInlineFormPanel() {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
index bee57db4..b162abc8 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
@@ -25,6 +25,7 @@ import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.form.FieldLabel
+import pl.treksoft.kvision.form.FormHorizontalRatio
 import pl.treksoft.kvision.form.InputSize
 import pl.treksoft.kvision.form.InvalidFeedback
 import pl.treksoft.kvision.form.StringFormControl
@@ -216,13 +217,13 @@ open class RadioGroup(
         container.getChildren().filterIsInstance<Radio>().firstOrNull()?.blur()
     }
 
-    override fun styleForHorizontalFormPanel() {
+    override fun styleForHorizontalFormPanel(horizontalRatio: FormHorizontalRatio) {
         addCssClass("row")
-        flabel.addCssClass("col-sm-2")
+        flabel.addCssClass("col-sm-${horizontalRatio.labels}")
         flabel.addCssClass("col-form-label")
-        container.addCssClass("col-sm-10")
-        invalidFeedback.addCssClass("offset-sm-2")
-        invalidFeedback.addCssClass("col-sm-10")
+        container.addCssClass("col-sm-${horizontalRatio.fields}")
+        invalidFeedback.addCssClass("offset-sm-${horizontalRatio.labels}")
+        invalidFeedback.addCssClass("col-sm-${horizontalRatio.fields}")
     }
 
     companion object {