Add form layout: flow

GoAdminGroup · Mar 1, 2020 · 9df4e14 · 9df4e14
1 parent dcdc1dc
commit 9df4e14
Show file tree

Hide file tree

Showing 38 changed files with 1,132 additions and 1,507 deletions.
diff --git a/adminlte/resource/adminlte/adminlte.css b/adminlte/resource/adminlte/adminlte.css
@@ -126,4 +126,13 @@
 
 .bootstrap-datetimepicker-widget.dropdown-menu, .select2-results__options {
     z-index: 10002;
+}
+
+form .select2-selection.select2-selection--single {
+    height: 34px !important;
+    line-height: 24px !important;
+}
+
+form .select2-selection__rendered {
+    line-height: 28px !important;
 }
diff --git a/adminlte/resource/assets.go b/adminlte/resource/assets.go
diff --git a/adminlte/resource/assets/dist/css/all.min.css b/adminlte/resource/assets/dist/css/all.min.css
diff --git a/adminlte/template.go b/adminlte/template.go
diff --git a/common/pages/components/form.tmpl b/common/pages/components/form.tmpl
@@ -8,6 +8,8 @@
                 {{ template "form_layout_tab" . }}
             {{else if ne (len .ContentList) 0}}
                 {{ template "form_layout_two_col" . }}
+            {{else if .Layout.Flow}}
+                {{ template "form_layout_flow" . }}
             {{else}}
                 {{ template "form_layout_default" . }}
             {{end}}

diff --git a/common/pages/components/form/color.tmpl b/common/pages/components/form/color.tmpl
@@ -1,16 +1,8 @@
 {{define "form_color"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="input-group colorpicker-element">
-            <span class="input-group-addon"><i style="background-color: rgb(0, 0, 0);"></i></span>
-            <input {{if .Must}}required="1"{{end}} style="width: 140px" type="text" id="{{.Field}}" name="{{.Field}}"
-                   value="" class="form-control {{.Field}}" placeholder="{{.Value}}">
-        </div>
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
+    <div class="input-group colorpicker-element">
+        <span class="input-group-addon"><i style="background-color: rgb(0, 0, 0);"></i></span>
+        <input {{if .Must}}required="1"{{end}} style="width: 140px" type="text" id="{{.Field}}" name="{{.Field}}"
+               value="" class="form-control {{.Field}}" placeholder="{{.Value}}">
     </div>
     <script>
         $('.{{.Field}}').parent().colorpicker([]);

diff --git a/common/pages/components/form/currency.tmpl b/common/pages/components/form/currency.tmpl
@@ -1,17 +1,9 @@
 {{define "form_currency"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="input-group">
-            <span class="input-group-addon">$</span>
-            <input {{if .Must}}required="1"{{end}} style="width: 120px; text-align: right;" type="text" id="{{.Field}}"
-                   name="{{.Field}}"
-                   value="{{.Value}}" class="form-control {{.Field}}" placeholder="{{.Head}}">
-        </div>
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
+    <div class="input-group">
+        <span class="input-group-addon">$</span>
+        <input {{if .Must}}required="1"{{end}} style="width: 120px; text-align: right;" type="text" id="{{.Field}}"
+               name="{{.Field}}"
+               value="{{.Value}}" class="form-control {{.Field}}" placeholder="{{.Head}}">
     </div>
     <script>
         $(function () {

diff --git a/common/pages/components/form/custom.tmpl b/common/pages/components/form/custom.tmpl
@@ -1,14 +1,6 @@
 {{define "form_custom"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="input-group">
-            {{.CustomContent}}
-        </div>
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
+    <div class="input-group">
+        {{.CustomContent}}
     </div>
     {{if .CustomJs}}
         <script>

diff --git a/common/pages/components/form/datetime.tmpl b/common/pages/components/form/datetime.tmpl
@@ -1,35 +1,20 @@
 {{define "form_datetime"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
     {{if not .Editable}}
-        <div class="col-sm-8">
-            <div class="box box-solid box-default no-margin">
-                <div class="box-body" style="min-height: 40px;">
-                    {{.Value}}
-                </div>
+        <div class="box box-solid box-default no-margin">
+            <div class="box-body" style="min-height: 40px;">
+                {{.Value}}
             </div>
-            {{if ne .HelpMsg ""}}
-                <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-            {{end}}
         </div>
     {{else}}
-        <div class="col-sm-8">
-            <div class="input-group">
-                {{if ne .Label ""}}
-                    <span class="input-group-addon">{{.Label}}</span>
-                {{end}}
-                <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
-                <input {{if .Must}}required="1"{{end}} style="width: 160px" type="text" id="{{.Field}}"
-                       name="{{.Field}}"
-                       value="{{.Value}}"
-                       class="form-control {{.Field}}" placeholder="{{lang "Input"}} {{.Head}}">
-            </div>
-            {{if ne .HelpMsg ""}}
-                <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
+        <div class="input-group">
+            {{if ne .Label ""}}
+                <span class="input-group-addon">{{.Label}}</span>
             {{end}}
+            <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
+            <input {{if .Must}}required="1"{{end}} style="width: 160px" type="text" id="{{.Field}}"
+                   name="{{.Field}}"
+                   value="{{.Value}}"
+                   class="form-control {{.Field}}" placeholder="{{.Placeholder}}">
         </div>
         <script>
             $(function () {

diff --git a/common/pages/components/form/datetime_range.tmpl b/common/pages/components/form/datetime_range.tmpl
@@ -1,27 +1,23 @@
 {{define "form_datetime_range"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="input-group">
-            {{if ne .Label ""}}
-                <span class="input-group-addon">{{.Label}}</span>
-            {{end}}
-            <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
-            <input type="text" id="{{.Field}}_start__goadmin" name="{{.Field}}_start__goadmin" value="{{.Value}}"
-                   class="form-control {{.Field}}_start__goadmin" placeholder="{{lang "Input"}} {{.Head}}">
-            <span class="input-group-addon" style="border-left: 0; border-right: 0;">-</span>
-            <input type="text" id="{{.Field}}_end__goadmin" name="{{.Field}}_end__goadmin" value="{{.Value2}}"
-                   class="form-control {{.Field}}_end__goadmin" placeholder="{{lang "Input"}} {{.Head}}">
-        </div>
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
+    <div class="input-group">
+        {{if ne .Label ""}}
+            <span class="input-group-addon">{{.Label}}</span>
         {{end}}
+        <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
+        <input type="text" id="{{.Field}}_start__goadmin" name="{{.Field}}_start__goadmin" value="{{.Value}}"
+               class="form-control {{.Field}}_start__goadmin" placeholder="{{.Placeholder}}">
+        <span class="input-group-addon" style="border-left: 0; border-right: 0;">-</span>
+        <input type="text" id="{{.Field}}_end__goadmin" name="{{.Field}}_end__goadmin" value="{{.Value2}}"
+               class="form-control {{.Field}}_end__goadmin" placeholder="{{.Placeholder}}">
     </div>
     <script>
         $(function () {
-            $('.{{.Field}}_start__goadmin').datetimepicker({"format":"YYYY-MM-DD HH:mm:ss","locale":"zh-CN"});
-            $('.{{.Field}}_end__goadmin').datetimepicker({"format":"YYYY-MM-DD HH:mm:ss","locale":"zh-CN","useCurrent":false});
+            $('.{{.Field}}_start__goadmin').datetimepicker({"format": "YYYY-MM-DD HH:mm:ss", "locale": "zh-CN"});
+            $('.{{.Field}}_end__goadmin').datetimepicker({
+                "format": "YYYY-MM-DD HH:mm:ss",
+                "locale": "zh-CN",
+                "useCurrent": false
+            });
             $('.{{.Field}}_start__goadmin').on("dp.change", function (e) {
                 $('.{{.Field}}_end__goadmin').data("DateTimePicker").minDate(e.date);
             });

diff --git a/common/pages/components/form/default.tmpl b/common/pages/components/form/default.tmpl
@@ -1,15 +1,7 @@
 {{define "form_default"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="box box-solid box-default no-margin">
-            <div class="box-body" style="min-height: 40px;">
-                {{.Value}}
-            </div>
+    <div class="box box-solid box-default no-margin">
+        <div class="box-body" style="min-height: 40px;">
+            {{.Value}}
         </div>
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
     </div>
 {{end}}
diff --git a/common/pages/components/form/email.tmpl b/common/pages/components/form/email.tmpl
@@ -1,16 +1,8 @@
 {{define "form_email"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="input-group">
-            <span class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></span>
-            <input {{if .Must}}required="1"{{end}} type="email" id="{{.Field}}" name="{{.Field}}" value='{{.Value}}'
-                   class="form-control json"
-                   placeholder="{{lang "Input"}} {{.Head}}">
-        </div>
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
+    <div class="input-group">
+        <span class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></span>
+        <input {{if .Must}}required="1"{{end}} type="email" id="{{.Field}}" name="{{.Field}}" value='{{.Value}}'
+               class="form-control json"
+               placeholder="{{.Placeholder}}">
     </div>
 {{end}}
diff --git a/common/pages/components/form/file.tmpl b/common/pages/components/form/file.tmpl
@@ -1,15 +1,7 @@
 {{define "form_file"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <input type="file" class="{{.Field}}" name="{{.Field}}" data-initial-preview="{{.Value2}}"
-               data-initial-caption="{{.Value}}">
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
-        <input type="hidden" value="0" name="{{.Field}}__delete_flag" class="{{.Field}}__delete_flag">
-    </div>
+    <input type="file" class="{{.Field}}" name="{{.Field}}" data-initial-preview="{{.Value2}}"
+           data-initial-caption="{{.Value}}">
+    <input type="hidden" value="0" name="{{.Field}}__delete_flag" class="{{.Field}}__delete_flag">
     <script>
         $("input.{{.Field}}").fileinput({
             "overwriteInitial": true,

diff --git a/common/pages/components/form/help_block.tmpl b/common/pages/components/form/help_block.tmpl
@@ -0,0 +1,7 @@
+{{define "help_block"}}
+    {{if ne . ""}}
+        <span class="help-block">
+            <i class="fa fa-info-circle"></i>&nbsp;{{.}}
+        </span>
+    {{end}}
+{{end}}
diff --git a/common/pages/components/form/iconpicker.tmpl b/common/pages/components/form/iconpicker.tmpl
@@ -1,23 +1,15 @@
 {{define "form_iconpicker"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="input-group">
-            <span class="input-group-addon"><i class="fa"></i></span>
-            {{if eq .Value ""}}
-                <input style="width: 140px" type="text" id="icon" name="{{.Field}}" value="fa-bars"
-                       class="form-control icon iconpicker-element iconpicker-input"
-                       placeholder="{{lang "Input Icon"}}">
-            {{else}}
-                <input style="width: 140px" type="text" id="icon" name="{{.Field}}" value="{{.Value}}"
-                       class="form-control icon iconpicker-element iconpicker-input"
-                       placeholder="{{lang "Input Icon"}}">
-            {{end}}
-            {{if ne .HelpMsg ""}}
-                <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-            {{end}}
-        </div>
+    <div class="input-group">
+        <span class="input-group-addon"><i class="fa"></i></span>
+        {{if eq .Value ""}}
+            <input style="width: 140px" type="text" id="icon" name="{{.Field}}" value="fa-bars"
+                   class="form-control icon iconpicker-element iconpicker-input"
+                   placeholder="{{lang "Input Icon"}}">
+        {{else}}
+            <input style="width: 140px" type="text" id="icon" name="{{.Field}}" value="{{.Value}}"
+                   class="form-control icon iconpicker-element iconpicker-input"
+                   placeholder="{{lang "Input Icon"}}">
+        {{end}}
     </div>
     <script>
         $('.iconpicker-input').iconpicker({placement: 'bottomLeft'});

diff --git a/common/pages/components/form/ip.tmpl b/common/pages/components/form/ip.tmpl
@@ -1,16 +1,8 @@
 {{define "form_ip"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="input-group">
-            <span class="input-group-addon"><i class="fa fa-laptop fa-fw"></i></span>
-            <input {{if .Must}}required="1"{{end}} style="width: 130px" type="text" id="{{.Field}}" name="{{.Field}}"
-                   value='{{.Value}}' class="form-control json"
-                   placeholder="{{lang "Input"}} {{.Head}}">
-        </div>
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
+    <div class="input-group">
+        <span class="input-group-addon"><i class="fa fa-laptop fa-fw"></i></span>
+        <input {{if .Must}}required="1"{{end}} style="width: 130px" type="text" id="{{.Field}}" name="{{.Field}}"
+               value='{{.Value}}' class="form-control json"
+               placeholder="{{.Placeholder}}">
     </div>
 {{end}}
diff --git a/common/pages/components/form/number.tmpl b/common/pages/components/form/number.tmpl
@@ -1,17 +1,9 @@
 {{define "form_number"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="input-group">
-            <input {{if .Must}}required="1"{{end}} style="width: 100px; text-align: center;" type="text" id="{{.Field}}"
-                   name="{{.Field}}"
-                   value="{{.Value}}" class="form-control {{.Field}}"
-                   placeholder="{{.Head}}">
-        </div>
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
+    <div class="input-group">
+        <input {{if .Must}}required="1"{{end}} style="width: 100px; text-align: center;" type="text" id="{{.Field}}"
+               name="{{.Field}}"
+               value="{{.Value}}" class="form-control {{.Field}}"
+               placeholder="{{.Head}}">
     </div>
     <script>
         $(function () {

diff --git a/common/pages/components/form/number_range.tmpl b/common/pages/components/form/number_range.tmpl
@@ -1,21 +1,13 @@
 {{define "form_number_range"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        <div class="input-group number-range">
-            <input style="text-align: center;" type="text" id="{{.Field}}_start__goadmin"
-                   name="{{.Field}}_start__goadmin"
-                   value="{{.Value}}" class="form-control {{.Field}}_start__goadmin"
-                   placeholder="{{.Head}}">
-            <span class="input-group-addon" style="border-left: 0; border-right: 0;">-</span>
-            <input style="text-align: center;" type="text" id="{{.Field}}_end__goadmin" name="{{.Field}}_end__goadmin"
-                   value="{{.Value2}}" class="form-control {{.Field}}_end__goadmin"
-                   placeholder="{{.Head}}">
-        </div>
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
+    <div class="input-group number-range">
+        <input style="text-align: center;" type="text" id="{{.Field}}_start__goadmin"
+               name="{{.Field}}_start__goadmin"
+               value="{{.Value}}" class="form-control {{.Field}}_start__goadmin"
+               placeholder="{{.Head}}">
+        <span class="input-group-addon" style="border-left: 0; border-right: 0;">-</span>
+        <input style="text-align: center;" type="text" id="{{.Field}}_end__goadmin" name="{{.Field}}_end__goadmin"
+               value="{{.Value2}}" class="form-control {{.Field}}_end__goadmin"
+               placeholder="{{.Head}}">
     </div>
     <script>
         $(function () {

diff --git a/common/pages/components/form/password.tmpl b/common/pages/components/form/password.tmpl
@@ -1,22 +1,14 @@
 {{define "form_password"}}
-    <label for="{{.Field}}" class="col-sm-2 {{if .Must}}asterisk{{end}} control-label">{{.Head}}</label>
-    <div class="col-sm-8">
-        {{if .Editable}}
-            <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-eye-slash"></i></span>
-                <input {{if .Must}}required="1"{{end}} type="password" id="{{.Field}}" name="{{.Field}}"
-                       value="{{.Value}}"
-                       class="form-control password" placeholder="{{lang "Input"}} {{.Head}}">
-            </div>
-        {{else}}
-            <div class="box box-solid box-default no-margin">
-                <div class="box-body">********</div>
-            </div>
-        {{end}}
-        {{if ne .HelpMsg ""}}
-            <span class="help-block">
-                <i class="fa fa-info-circle"></i>&nbsp;{{.HelpMsg}}
-            </span>
-        {{end}}
-    </div>
+    {{if .Editable}}
+        <div class="input-group">
+            <span class="input-group-addon"><i class="fa fa-eye-slash"></i></span>
+            <input {{if .Must}}required="1"{{end}} type="password" id="{{.Field}}" name="{{.Field}}"
+                   value="{{.Value}}"
+                   class="form-control password" placeholder="{{.Placeholder}}">
+        </div>
+    {{else}}
+        <div class="box box-solid box-default no-margin">
+            <div class="box-body">********</div>
+        </div>
+    {{end}}
 {{end}}