Skip to content

S
slapos.core
Commit cc41f3a9 authored by Rafael Monnerat's avatar Rafael Monnerat
Browse files
Options

slapos_jio: Improve JSON Form Rendering Style 

This was done by Sven Franck.
parent 034498e5
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 114 deletions
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_css.css
View file @ cc41f3a9
div.subfield {
margin-left: 15px;
}
fieldset > .subfield { padding-left: 0}
.subfield {
padding-left: 20px;
}
label.slapos-parameter-dict-key::before {
content: "\25BC Parameter Entry: ";
}
label.slapos-parameter-dict-key-colapse::before {
content: "\25BA Parameter Entry: ";
}
label.slapos-parameter-dict-key {
text-transform: capitalize;
/* display: block !important; */
width: 99%;
padding: 5px;
font-size: 110%;
line-height: 20px;
color: rgb(93, 128, 125) !important;
cursor: pointer;
}
div.slapos-parameter-dict-key {
margin-top: 10px;
background: rgb(239, 252, 249);
border: 1px solid rgb(233, 247, 253);
padding: 5px;
}
div.slapos-parameter-dict-key .subfield:last-child {
padding: 5px 5px 10px 20px;
}
#software-type {padding: 10px 0 0;}
#software-type .field[title='serialisation_type'] .input { padding-top: 0; }
.subfield, #software-type .input{
padding-top: 10px;
}
.subfield label, #software-type label {
display: inline-block;
margin-bottom: 1px;
color: rgb(124, 134, 149)
}
fieldset > .subfield > label {
font-size: 113%;
color: rgb(112, 125, 136);
}
.subfield span {
font-weight: normal;
font-style: italic;
......@@ -70,41 +22,11 @@ fieldset > .subfield > label {
font-weight: 700;
}
.subfield input {
font-size: 100%;
width: 240px;
}
.input button {margin-left: 10px;}
.add-sub-form {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
border: 1px solid #3498db;
color: #ffffff;
font-size: 15px;
font-weight: bold;
padding: 6px 20px;
text-decoration: none;
cursor: pointer;
}
.add-sub-form:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
.bt_close, .subfield .slapos-parameter-dict-key span.bt_close{
padding: 0 6px;
......@@ -146,15 +68,12 @@ margin: 5px 0 10px; max-height: 250px; width: 80%;}
.subfield {
padding-left: 20px;
}
}
label.slapos-parameter-dict-key::before {
content: "Parameter Entry: ";
}
label.slapos-parameter-dict-key {
font-color: "red";
}
div.slapos-parameter-dict-key {
margin-top: 10px;
......@@ -164,7 +83,6 @@ div.slapos-parameter-dict-key {
.subfield {
padding-top: 3px;
}
textarea.slapos-parameter {
width: 400px;
height: 100px;
......@@ -173,30 +91,107 @@ textarea.slapos-parameter {
button.hidden-button {
display: none;
}
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;
background: rgb(239, 252, 249);
border: 1px solid rgb(233, 247, 253);
padding: 5px;
}
.add-sub-form {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 5px 20px 5px 20px;
text-decoration: none;
/* cleanup */
fieldset > .subfield > label:not(.slapos-parameter-dict-key) {
font-size: 113%;
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: -30px;
pointer-events: none;
cursor: text;
}
.field input:not(:placeholder-shown) ~ span:not(.error),
.subfield input:not(:placeholder-shown) ~ span:not(.error) {
visibility: hidden;
}
.field input ~ span:not(.error),
.subfield input ~ span:not(.error) {
opacity: .7;
}
.field input:focus ~ span,
.subfield input:focus ~ span {
visibility: hidden;
}
.subfield .input {
margin-bottom: -20px;
}
.subfield .error {
float: right;
margin-right: 30px;
}
.subfield .input textarea {
margin-bottom: 16px;
}
.add-sub-form:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
.slapos-show-raw-parameter,
.slapos-parameter-dict-key,
.slapos-show-form {
cursor: pointer;
font-style: italic;
font-size: 14px;
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 {
font-size: 113%;
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: 0;
top: 0;
bottom: 0;
text-decoration: none;
}
\ No newline at end of file
cursor: pointer;
color: #fff;
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;
}
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_css.xml
View file @ cc41f3a9
......@@ -73,6 +73,14 @@
<key> <string>content_type</string> </key>
<value> <string>text/css</string> </value>
</item>
<item>
<key> <string>creators</string> </key>
<value>
<tuple>
<string>zope</string>
</tuple>
</value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_page_slap_parameter_form.css</string> </value>
......@@ -91,6 +99,25 @@
<key> <string>language</string> </key>
<value> <string>en</string> </value>
</item>
<item>
<key> <string>modification_date</string> </key>
<value>
<object>
<klass>
<global name="DateTime" module="DateTime.DateTime"/>
</klass>
<tuple>
<none/>
</tuple>
<state>
<tuple>
<float>1523884648.28</float>
<string>UTC</string>
</tuple>
</state>
</object>
</value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Web Style</string> </value>
......@@ -234,7 +261,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>964.4082.5546.20428</string> </value>
<value> <string>966.58781.43824.3635</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +279,7 @@
</tuple>
<state>
<tuple>
<float>1512997577.25</float>
<float>1526718311.48</float>
<string>UTC</string>
</tuple>
</state>
......
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_js.js
View file @ cc41f3a9
......@@ -268,6 +268,7 @@
input = render_field(json_field.properties[key], default_dict[key]);
input.name = path + "/" + key;
input.setAttribute("class", "slapos-parameter");
input.setAttribute("placeholder", " ");
div_input.appendChild(input);
}
default_used_list.push(key);
......@@ -297,6 +298,7 @@
input = render_field({"type": "string"}, default_dict[key]);
input.name = path + "/" + key;
input.setAttribute("class", "slapos-parameter");
input.setAttribute("placeholder", " ");
div_input.appendChild(input);
default_used_list.push(key);
......
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_js.xml
View file @ cc41f3a9
......@@ -274,7 +274,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>967.30809.39786.4795</string> </value>
<value> <string>967.31177.54920.32375</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -292,7 +292,7 @@
</tuple>
<state>
<tuple>
<float>1526066609.97</float>
<float>1526718410.04</float>
<string>UTC</string>
</tuple>
</state>
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7