diff options
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 { |