design changes, remove gadget_erp5_page_slap_parameter_form.css dependence

gadget_erp5_nojqm.css

@@ -1717,6 +1717,36 @@ div[data-gadget-scope='maximize'] button:active {
   height: 100%;
 }
 /**********************************************
+* JSONForm
+**********************************************/
+fieldset > .jsonformfield {
+  padding-left: 0
+}
+.jsonformfield {
+  display: flex;
+  /*padding-left: 20px;*/
+  padding-top: 3px;
+  /*margin-left: 15px;*/
+}
+.jsonformfield button {
+  display: block;
+  vertical-align: top;
+}
+.jsonformfield .ui-btn-icon-top::before {
+  vertical-align: top;
+}
+.jsonformfield label {
+  word-break: keep-all;
+  hyphens: none;
+}
+.jsonformfield span {
+  color: rgb(94, 127, 141)
+}
+.jsonformfield .error {
+  color: #E82525;
+  font-weight: 600;
+}
+/**********************************************
 * Icons
 **********************************************/
 .ui-btn-icon-top::before,

gadget_json_generated_form.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>ERP5</title>
     <link rel="stylesheet" href="gadget_erp5_nojqm.css">
-    <link href="gadget_erp5_page_slap_parameter_form.css" rel="stylesheet" type="text/css"/>
     <script src="rsvp.js" type="text/javascript"></script>
     <script src="tv4.js" type="text/javascript"></script>
     <script src="renderjs.js" type="text/javascript"></script>

gadget_json_generated_form.js

@@ -539,6 +539,7 @@
             schema: schema,
             schema_path: "",
             document: options.value,
+            required: true,
             top: true
           });
         })

gadget_json_generated_form_child.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>ERP5</title>
     <link rel="stylesheet" href="gadget_erp5_nojqm.css">
-    <link href="gadget_erp5_page_slap_parameter_form.css" rel="stylesheet" type="text/css"/>
     <script src="rsvp.js" type="text/javascript"></script>
     <script src="tv4.js" type="text/javascript"></script>
     <script src="renderjs.js" type="text/javascript"></script>

gadget_json_generated_form_child.js

@@ -450,7 +450,7 @@
       input,
       minItems = schema.minItems || 0;
     div = document.createElement("div");
-    div.setAttribute("class", "subfield");
+    div.setAttribute("class", "jsonformfield");
     div.title = schema.description;
 
     div_input = document.createElement("div");
@@ -536,6 +536,7 @@
   function render_field(gadget, key, path, json_field, default_value, root, schema_path, options) {
     var type,
       div,
+      delete_button,
       label,
       div_input,
       span_info,
@@ -582,9 +583,23 @@
     }
 
     div = document.createElement("div");
-    div.setAttribute("class", "subfield");
+    div.setAttribute("class", "jsonformfield ui-field-contain");
     div.title = json_field.description;
     // if (key && !first_path) {
+    if (options.required !== true) {
+      delete_button = document.createElement("span");
+      delete_button.setAttribute("class",
+        "ui-shadow-inset ui-btn ui-btn-inline ui-corner-all" +
+        " ui-btn-icon-top ui-icon-btn ui-icon-trash-o");
+      gadget.props.delete_button = delete_button;
+      div.appendChild(delete_button);
+    } else if (options.top !== true) {
+      delete_button = document.createElement("span");
+      delete_button.setAttribute("class",
+        "ui-shadow-inset ui-btn ui-btn-inline ui-corner-all" +
+        " ui-btn-icon-top ui-icon-btn ui-icon-exclamation-circle");
+      div.appendChild(delete_button);
+    }
     if (false) {
       // XXX;
       label = document.createElement("input");
@@ -594,9 +609,13 @@
       label = document.createElement("label");
       label.textContent = [key, json_field.title]
         .filter(function (v) { return v; })
-        .join(" ");
+        .join(" ")
+        // use non-breaking hyphen
+        .replace("-","‑");
+    }
+    if (label.textContent) {
+      div.appendChild(label);
     }
-    div.appendChild(label);
     div_input = document.createElement("div");
     div_input.setAttribute("id", gadget.element.getAttribute("data-gadget-scope") + first_path + '/');
     div_input.setAttribute("class", "input");
@@ -703,7 +722,7 @@
       input;
 
     div = document.createElement("div");
-    div.setAttribute("class", "subfield");
+    div.setAttribute("class", "jsonformfield");
     // div.title = json_field.description;
 
     div_input = document.createElement("div");
@@ -1240,18 +1259,13 @@
       while (root.firstChild) {
         root.removeChild(root.firstChild);
       }
-      if (!options.top) {
-        delete_button = document.createElement("button");
-        delete_button.setAttribute("class",
-          "ui-shadow-inset ui-btn ui-btn-inline ui-corner-all" +
-          " ui-btn-icon-notext ui-icon-btn ui-icon-trash-o ui-input-btn");
-        delete_button.type = "button";
-        delete_button.name = options.path;
-        g.props.delete_button = delete_button;
-        root.appendChild(delete_button);
-      }
       return render_field(g, property_name, "", schema,
-        options.document, root, options.schema_path, {type: options.type})
+        options.document, root, options.schema_path,
+        {
+          type: options.type,
+          required: options.required,
+          top: options.top
+        })
         .push(function () {
           g.listenEvents();
           return g.element;