Commit b90c3db9 authored by Rafael Monnerat's avatar Rafael Monnerat

slapos_jio: Split JSON Editor from the parameter form implementation

  This strips the form rendering from the parameter editor, and placing it as a stand alone editor (separated gadget).

   This allow us following the same API use other gadgets as parameter editors.
parent 4c58c4b9
.subfield span:not(.slapos-parameter) {
font-weight: normal;
font-style: italic;
padding-left: 7px;
color: rgb(94, 127, 141)
}
.subfield select { margin-bottom: 10px;}
.subfield textarea {width: 250px; height: 60px;}
.subfield .error {
color: #E82525;
font-weight: 700;
}
.input button {margin-left: 10px;}
.bt_close, .subfield .slapos-parameter-dict-key span.bt_close{
padding: 0 6px;
display: block;
float: right;
text-overflow:clip;
white-space:nowrap;
overflow: hidden;
font-size: 1.5em;
border-radius: 2px;
}
.bt_close:hover {
background: #c9c9c9;
color: #fff;
}
.display-none {
display: none;
}
.non-editable > div.input {border: 1px solid rgb(201, 201, 201); padding: 5px; background: white; font-weight: normal;
margin: 5px 0 10px; max-height: 250px; width: 80%;}
textarea.slapos-parameter {
width: 400px;
height: 100px;
}
label.slapos-parameter-dict-key::before {
content: "\25BC Parameter Entry: ";
}
label.slapos-parameter-dict-key-colapse::before {
content: "\25BA Parameter Entry: ";
}
div.slapos-parameter-dict-key {
margin-top: 10px;
margin-left: 6px;
background: rgb(245, 245, 245);
border: 1px solid rgb(230, 230, 230);
padding: 5px;
}
/* cleanup */
fieldset > .subfield > label:not(.slapos-parameter-dict-key) {
color: rgb(112, 125, 136);
}
fieldset > div.subfield {
padding-left: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.field input ~ span,
.subfield input ~ span {
position: relative;
top: -27px;
pointer-events: none;
cursor: text;
}
.field input:not(:placeholder-shown) ~ span:not(.error),
.subfield input:not(:placeholder-shown) ~ span:not(.error),
.field select:not(:placeholder-shown) ~ span:not(.error),
.subfield select:not(:placeholder-shown) ~ span:not(.error) {
visibility: hidden;
}
.field input ~ span:not(.error),
.subfield input ~ span:not(.error),
.field select ~ span:not(.error),
.subfield select ~ span:not(.error) {
opacity: .7;
}
.field input:focus ~ span,
.subfield input:focus ~ span,
.field select:focus ~ span,
.subfield select:focus ~ span {
visibility: hidden;
}
.subfield .input {
margin-bottom: -15px;
}
.subfield .error {
float: right;
margin-right: 30px;
}
.subfield .input textarea {
margin-bottom: 16px;
}
.slapos-parameter-dict-key {
cursor: pointer;
font-style: italic;
color: #000;
}
label.slapos-parameter-dict-key {
text-transform: capitalize;
}
label.slapos-parameter-dict-key ~ div.input label {
color: rgb(112, 125, 136);
}
.slapos-parameter-dict-key label {
color: rgb(112, 125, 136);
}
/* add button */
.slapos-parameter-dict-key ~ .subfield .input {
position: relative;
margin-bottom: 0;
}
.input .add-sub-form {
position: absolute;
right: 10px;
top: 0;
bottom: 0;
text-decoration: none;
cursor: pointer;
color: #000;
margin: 0;
}
.add-sub-form:before {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><path fill='#000' d='m6,17.16589l12.55862,0l0,-15.274l12.88276,0l0,15.274l12.55862,0l0,15.66822l-12.55862,0l0,15.274l-12.88276,0l0,-15.274l-12.55862,0l0,-15.66822z' fill-opacity='0.5'/></svg>");
background-size: contain;
content: "";
width: 16px;
height: 16px;
position: absolute;
background-repeat: no-repeat;
top: 8px;
left: 4px;
}
.subfield {
padding-top: 3px;
min-height: 5em;
}
.subfield select {
margin-bottom: 0;
}
.subfield .input select + span {
position: relative;
top: -1.9em;
opacity: .7;
}
select.readonly {
background: #EEE;
pointer-events: none;
touch-action: none;
}
div.slap_json_form {
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
padding-block-start: 0.35em;
padding-inline-start: 0.75em;
padding-inline-end: 0.75em;
padding-block-end: 0.625em;
min-inline-size: min-content;
border-width: 2px;
border-style: groove;
border-color: threedface;
border-image: initial;
}
\ No newline at end of file
<!DOCTYPE html>
<html manifest="gadget_erp5.appcache">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ERP5</title>
<link rel="shortcut icon" href="favicon.ico">
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="domsugar.js" type="text/javascript"></script>
<script src="gadget_erp5_page_slap_json_form.js" type="text/javascript"></script>
<link href="gadget_erp5_page_slap_json_form.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="json_form"></div>
<div class="json_form_load_schema"
data-gadget-url="gadget_erp5_page_slap_load_schema.html"
data-gadget-scope="json_form_load_schema" >
</div>
</body>
</html>
\ No newline at end of file
......@@ -4,46 +4,8 @@
padding-top: 10px;
}
.subfield span:not(.slapos-parameter) {
font-weight: normal;
font-style: italic;
padding-left: 7px;
color: rgb(94, 127, 141)
}
.subfield select { margin-bottom: 10px;}
.subfield textarea {width: 250px; height: 60px;}
.subfield .error {
color: #E82525;
font-weight: 700;
}
.input button {margin-left: 10px;}
.bt_close, .subfield .slapos-parameter-dict-key span.bt_close{
padding: 0 6px;
display: block;
float: right;
text-overflow:clip;
white-space:nowrap;
overflow: hidden;
font-size: 1.5em;
border-radius: 2px;
}
.bt_close:hover {
background: #c9c9c9;
color: #fff;
}
.hs-short-title{
margin-left:6px;
padding-bottom: 10px;
font-size:12px;
font-weight: normal;
display: inline-block;
}
.display-none {
display: none;
}
......@@ -58,134 +20,48 @@
.non-editable > div.input {border: 1px solid rgb(201, 201, 201); padding: 5px; background: white; font-weight: normal;
margin: 5px 0 10px; max-height: 250px; width: 80%;}
.subfield {
padding-left: 20px;
padding-top: 3px;
}
textarea.slapos-parameter {
width: 400px;
height: 100px;
}
label.slapos-parameter-dict-key::before {
content: "\25BC Parameter Entry: ";
}
label.slapos-parameter-dict-key-colapse::before {
content: "\25BA Parameter Entry: ";
}
div.slapos-parameter-dict-key {
margin-top: 10px;
margin-left: 6px;
background: rgb(245, 245, 245);
border: 1px solid rgb(230, 230, 230);
padding: 5px;
}
/* cleanup */
fieldset > .subfield > label:not(.slapos-parameter-dict-key) {
color: rgb(112, 125, 136);
}
fieldset > div.subfield {
padding-left: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.field input ~ span,
.subfield input ~ span {
.field input ~ span {
position: relative;
top: -27px;
pointer-events: none;
cursor: text;
}
.field input:not(:placeholder-shown) ~ span:not(.error),
.subfield input:not(:placeholder-shown) ~ span:not(.error),
.field select:not(:placeholder-shown) ~ span:not(.error),
.subfield select:not(:placeholder-shown) ~ span:not(.error) {
.field select:not(:placeholder-shown) ~ span:not(.error) {
visibility: hidden;
}
.field input ~ span:not(.error),
.subfield input ~ span:not(.error),
.field select ~ span:not(.error),
.subfield select ~ span:not(.error) {
.field select ~ span:not(.error) {
opacity: .7;
}
.field input:focus ~ span,
.subfield input:focus ~ span,
.field select:focus ~ span,
.subfield select:focus ~ span {
.field select:focus ~ span {
visibility: hidden;
}
.subfield .input {
margin-bottom: -15px;
}
.subfield .error {
float: right;
margin-right: 30px;
}
.subfield .input textarea {
margin-bottom: 16px;
}
.slapos-show-raw-parameter,
.slapos-parameter-dict-key,
.slapos-show-form {
cursor: pointer;
font-style: italic;
color: #000;
}
.slapos-show-form,
.slapos-show-raw-parameter {
margin: 4px auto;
padding-left: 24px; /* add an icon? */
}
label.slapos-parameter-dict-key {
text-transform: capitalize;
}
label.slapos-parameter-dict-key ~ div.input label {
color: rgb(112, 125, 136);
}
.slapos-parameter-dict-key label {
color: rgb(112, 125, 136);
}
/* add button */
.slapos-parameter-dict-key ~ .subfield .input {
position: relative;
margin-bottom: 0;
}
.input .add-sub-form {
position: absolute;
right: 10px;
top: 0;
bottom: 0;
text-decoration: none;
button.slapos-show-raw-parameter,
button.slapos-show-form {
cursor: pointer;
color: #000;
margin: 0;
color: #212529;
padding: 3pt;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
display: inline-block;
margin-right: 6pt;
}
.add-sub-form:before {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><path fill='#000' d='m6,17.16589l12.55862,0l0,-15.274l12.88276,0l0,15.274l12.55862,0l0,15.66822l-12.55862,0l0,15.274l-12.88276,0l0,-15.274l-12.55862,0l0,-15.66822z' fill-opacity='0.5'/></svg>");
background-size: contain;
content: "";
width: 16px;
height: 16px;
position: absolute;
background-repeat: no-repeat;
top: 8px;
left: 4px;
button.slapos-show-raw-parameter:before,
button.slapos-show-form:before {
padding-right: 0.2em;
}
.subfield {
min-height: 5em;
}
.subfield select {
margin-bottom: 0;
}
.subfield .input select + span {
position: relative;
top: -1.9em;
opacity: .7;
button.slapos-show-raw-parameter[disabled],
button.slapos-show-form[disabled] {
color: #999;
}
select.readonly {
......@@ -193,3 +69,7 @@ select.readonly {
pointer-events: none;
touch-action: none;
}
div.slapos-parameter-editor-button {
padding: 10px;
}
\ No newline at end of file
......@@ -71,7 +71,9 @@
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/css</string> </value>
<value>
<none/>
</value>
</item>
<item>
<key> <string>creators</string> </key>
......@@ -271,7 +273,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>1004.33923.4937.19370</string> </value>
<value> <string>1007.63569.60065.35225</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -291,7 +293,7 @@
</tuple>
<state>
<tuple>
<float>1669223474.78</float>
<float>1682452927.16</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -28,14 +28,19 @@
<input type=hidden name="serialisation_type" class="slapos-serialisation-type">
</div>
</div>
<div class="field" title="hide_show_button">
<div class="field slapos-parameter-editor-button" title="hide_show_button">
<div class="input">
<button type="button" class="slapos-show-form display-none"> Show Parameter Form </button>
<button type="button" class="slapos-show-raw-parameter"> Show Parameter XML</button>
<button type="button" class="slapos-show-form ui-btn-icon-left ui-icon-spinner"> Parameter Form </button>
<button type="button" class="slapos-show-raw-parameter ui-btn-icon-left ui-icon-code" disabled> Raw XML</button>
</div>
</div>
</fieldset>
<fieldset id="parameter-main"> </fieldset>
<fieldset id="parameter-main">
<div class="parameter_json_form"
data-gadget-url="gadget_erp5_page_slap_json_form.html"
data-gadget-scope="json_form"> </div>
<div class="failover-textarea"> </div>
</fieldset>
<fieldset id="parameter-optional"> </fieldset>
<fieldset id="parameter-xml">
<input type=hidden name="parameter_hash" class="parameter_hash_output">
......
......@@ -240,7 +240,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>1004.26625.54107.30429</string> </value>
<value> <string>1007.63568.41363.15786</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1669223665.45</float>
<float>1682453638.42</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -284,7 +284,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>1005.42112.63718.7782</string> </value>
<value> <string>1007.63580.6957.21418</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -304,7 +304,7 @@
</tuple>
<state>
<tuple>
<float>1676052985.24</float>
<float>1682453675.95</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -28,14 +28,19 @@
<input type=hidden name="serialisation_type" class="slapos-serialisation-type">
</div>
</div>
<div class="field" title="hide_show_button">
<div class="field slapos-parameter-editor-button" title="hide_show_button">
<div class="input">
<button type="button" class="slapos-show-form hidden-button"> 展开参数表格 </button>
<button type="button" class="slapos-show-raw-parameter"> 展开参数XML</button>
<button type="button" class="slapos-show-form ui-btn-icon-left ui-icon-spinner"> 展开参数表格 </button>
<button type="button" class="slapos-show-raw-parameterui-btn-icon-left ui-icon-code" disabled> 展开参数XML</button>
</div>
</div>
</fieldset>
<fieldset id="parameter-main"> </fieldset>
<fieldset id="parameter-main">
<div class="parameter_json_form"
data-gadget-url="gadget_erp5_page_slap_json_form.html"
data-gadget-scope="json_form"> </div>
<div class="failover-textarea"> </div>
</fieldset>
<fieldset id="parameter-optional"> </fieldset>
<fieldset id="parameter-xml">
<input type=hidden name="parameter_hash" class="parameter_hash_output">
......
image_module/gadget_slapos_panel_png
image_module/gadget_slapos_invoice_logo_png
image_module/gadget_slapos_panel_png
web_page_module/gadget_erp5_page_slap_cloud_contract_view_html
web_page_module/gadget_erp5_page_slap_cloud_contract_view_js
web_page_module/gadget_erp5_page_slap_request_contract_activation_html
web_page_module/gadget_erp5_page_slap_request_contract_activation_js
web_page_module/gadget_erp5_page_slap_reject_upgrade_decision_html
web_page_module/gadget_erp5_page_slap_reject_upgrade_decision_js
web_page_module/gadget_erp5_page_slap_request_contract_activation_html
web_page_module/gadget_erp5_page_slap_request_contract_activation_js
web_page_module/rjs_gadget_erp5_attention_point_css
web_page_module/rjs_gadget_erp5_attention_point_html
web_page_module/rjs_gadget_erp5_page_slap_language_view_html
web_page_module/rjs_gadget_erp5_page_slap_language_view_js
web_page_module/rjs_gadget_erp5_attention_point_js
web_page_module/rjs_gadget_slapos_annotated_helper_css
web_page_module/rjs_gadget_slapos_annotated_helper_html
web_page_module/rjs_gadget_slapos_annotated_helper_js
web_page_module/rjs_gadget_erp5_page_map_css
web_page_module/rjs_gadget_erp5_page_map_html
web_page_module/rjs_gadget_erp5_page_map_js
web_page_module/rjs_gadget_erp5_page_slap_accept_upgrade_decision_html
web_page_module/rjs_gadget_erp5_page_slap_accept_upgrade_decision_js
web_page_module/rjs_gadget_erp5_page_slap_access_denied_view_html
web_page_module/rjs_gadget_erp5_page_slap_access_denied_view_js
web_page_module/rjs_gadget_erp5_page_slap_add_compute_node_html
web_page_module/rjs_gadget_erp5_page_slap_add_compute_node_js
web_page_module/rjs_gadget_erp5_page_slap_add_instance_tree_html
......@@ -47,14 +44,14 @@ web_page_module/rjs_gadget_erp5_page_slap_compute_node_get_token_html
web_page_module/rjs_gadget_erp5_page_slap_compute_node_get_token_js
web_page_module/rjs_gadget_erp5_page_slap_compute_node_list_html
web_page_module/rjs_gadget_erp5_page_slap_compute_node_list_js
web_page_module/rjs_gadget_erp5_page_slap_computer_network_view_html
web_page_module/rjs_gadget_erp5_page_slap_computer_network_view_js
web_page_module/rjs_gadget_erp5_page_slap_compute_node_request_certificate_html
web_page_module/rjs_gadget_erp5_page_slap_compute_node_request_certificate_js
web_page_module/rjs_gadget_erp5_page_slap_compute_node_revoke_certificate_html
web_page_module/rjs_gadget_erp5_page_slap_compute_node_revoke_certificate_js
web_page_module/rjs_gadget_erp5_page_slap_compute_node_view_html
web_page_module/rjs_gadget_erp5_page_slap_compute_node_view_js
web_page_module/rjs_gadget_erp5_page_slap_computer_network_view_html
web_page_module/rjs_gadget_erp5_page_slap_computer_network_view_js
web_page_module/rjs_gadget_erp5_page_slap_controller_html
web_page_module/rjs_gadget_erp5_page_slap_controller_js
web_page_module/rjs_gadget_erp5_page_slap_delete_network_html
......@@ -75,14 +72,17 @@ web_page_module/rjs_gadget_erp5_page_slap_google_login_view_html
web_page_module/rjs_gadget_erp5_page_slap_google_login_view_js
web_page_module/rjs_gadget_erp5_page_slap_instance_tree_view_html
web_page_module/rjs_gadget_erp5_page_slap_instance_tree_view_js
web_page_module/rjs_gadget_erp5_page_slap_access_denied_view_html
web_page_module/rjs_gadget_erp5_page_slap_access_denied_view_js
web_page_module/rjs_gadget_erp5_page_slap_intent_html
web_page_module/rjs_gadget_erp5_page_slap_intent_js
web_page_module/rjs_gadget_erp5_page_slap_invalidate_login_html
web_page_module/rjs_gadget_erp5_page_slap_invalidate_login_js
web_page_module/rjs_gadget_erp5_page_slap_invoice_list_html
web_page_module/rjs_gadget_erp5_page_slap_invoice_list_js
web_page_module/rjs_gadget_erp5_page_slap_json_form_css
web_page_module/rjs_gadget_erp5_page_slap_json_form_html
web_page_module/rjs_gadget_erp5_page_slap_json_form_js
web_page_module/rjs_gadget_erp5_page_slap_language_view_html
web_page_module/rjs_gadget_erp5_page_slap_language_view_js
web_page_module/rjs_gadget_erp5_page_slap_load_schema_html
web_page_module/rjs_gadget_erp5_page_slap_load_schema_js
web_page_module/rjs_gadget_erp5_page_slap_network_list_html
......@@ -141,6 +141,10 @@ web_page_module/rjs_gadget_erp5_page_slap_start_instance_tree_js
web_page_module/rjs_gadget_erp5_page_slap_stop_instance_tree_html
web_page_module/rjs_gadget_erp5_page_slap_stop_instance_tree_js
web_page_module/rjs_gadget_erp5_page_slap_support_request_view_html
web_page_module/rjs_gadget_erp5_page_slap_test_parameter_form_html
web_page_module/rjs_gadget_erp5_page_slap_test_parameter_form_js
web_page_module/rjs_gadget_erp5_page_slap_test_readonly_parameter_form_html
web_page_module/rjs_gadget_erp5_page_slap_test_readonly_parameter_form_js
web_page_module/rjs_gadget_erp5_page_slap_ticket_list_html
web_page_module/rjs_gadget_erp5_page_slap_ticket_list_js
web_page_module/rjs_gadget_erp5_page_slap_ticket_view_js
......@@ -165,10 +169,12 @@ web_page_module/rjs_gadget_erp5_pt_form_slapos_index_js
web_page_module/rjs_gadget_slapos_alert_listbox_field_css
web_page_module/rjs_gadget_slapos_alert_listbox_field_html
web_page_module/rjs_gadget_slapos_alert_listbox_field_js
web_page_module/rjs_gadget_slapos_annotated_helper_css
web_page_module/rjs_gadget_slapos_annotated_helper_html
web_page_module/rjs_gadget_slapos_annotated_helper_js
web_page_module/rjs_gadget_slapos_appcache
web_page_module/rjs_gadget_slapos_compute_node_map_html
web_page_module/rjs_gadget_slapos_compute_node_map_js
web_page_module/rjs_gadget_slapos_status_css
web_page_module/rjs_gadget_slapos_event_discussion_entry_css
web_page_module/rjs_gadget_slapos_event_discussion_entry_html
web_page_module/rjs_gadget_slapos_event_discussion_entry_js
......@@ -180,9 +186,11 @@ web_page_module/rjs_gadget_slapos_invoice_state_html
web_page_module/rjs_gadget_slapos_invoice_state_js
web_page_module/rjs_gadget_slapos_label_listbox_field_html
web_page_module/rjs_gadget_slapos_label_listbox_field_js
web_page_module/rjs_gadget_slapos_login_page_css
web_page_module/rjs_gadget_slapos_panel_html
web_page_module/rjs_gadget_slapos_panel_js
web_page_module/rjs_gadget_slapos_payment_result_js**
web_page_module/rjs_gadget_slapos_status_css
web_page_module/rjs_gadget_slapos_status_html
web_page_module/rjs_gadget_slapos_status_js
web_page_module/rjs_gadget_slapos_translation_data_js
......@@ -194,11 +202,6 @@ web_page_module/rjs_slapos_load_meta_schema_json
web_page_module/rjs_slapos_load_meta_schema_xml_in_json_json
web_page_module/rjs_slapos_load_meta_schema_xml_json
web_page_module/rjs_slapos_load_software_schema_json
web_page_module/rjs_gadget_slapos_login_page_css
web_page_module/rjs_gadget_erp5_page_slap_test_parameter_form_js
web_page_module/rjs_gadget_erp5_page_slap_test_parameter_form_html
web_page_module/rjs_gadget_erp5_page_slap_test_readonly_parameter_form_html
web_page_module/rjs_gadget_erp5_page_slap_test_readonly_parameter_form_js
web_page_module/rjs_vkbeautify_js
web_page_module/slapos_admin_front_page
web_site_module/hostingjs
......
web_site_module/hateoas
web_site_module/hateoas/**
web_site_module/renderjs_runner
portal_types/ERP5 Form
portal_propery_sheets/SlapOSHateoasSystemPreference
portal_types/ERP5 Form
web_page_module/rjs_gadget_erp5_panel_shortcut_html
web_page_module/rjs_gadget_erp5_panel_shortcut_js
web_page_module/slapos_admin_front_page
web_site_module/hateoas
web_site_module/hateoas/**
web_site_module/renderjs_runner
\ No newline at end of file
......@@ -79,6 +79,9 @@ web_page_module/rjs_gadget_erp5_page_slap_invalidate_login_html
web_page_module/rjs_gadget_erp5_page_slap_invalidate_login_js
web_page_module/rjs_gadget_erp5_page_slap_invoice_list_html
web_page_module/rjs_gadget_erp5_page_slap_invoice_list_js
web_page_module/rjs_gadget_erp5_page_slap_json_form_css
web_page_module/rjs_gadget_erp5_page_slap_json_form_html
web_page_module/rjs_gadget_erp5_page_slap_json_form_js
web_page_module/rjs_gadget_erp5_page_slap_language_view_html
web_page_module/rjs_gadget_erp5_page_slap_language_view_js
web_page_module/rjs_gadget_erp5_page_slap_load_schema_html
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment