diff --git a/datagraph b/datagraph
index 722460a..8e0afb0 100755
Binary files a/datagraph and b/datagraph differ
diff --git a/static/css/json_editor.css b/static/css/json_editor.css
new file mode 100644
index 0000000..c48679b
--- /dev/null
+++ b/static/css/json_editor.css
@@ -0,0 +1,106 @@
+.je-indented-panel {
+ background-color: #f8f9fa;
+ border: 1px solid rgba(0, 0, 0, 0.125);
+ border-radius: var(--border-radius);
+ padding: 16px;
+ margin-left: 0px;
+ margin-top: 16px;
+ margin-bottom: 16px;
+ width: min-content;
+}
+.je-indented-panel .row {
+ margin-top: 16px;
+}
+.je-indented-panel .row:first-child {
+ margin-top: 0px;
+}
+.je-header {
+ color: var(--je-color);
+ font-weight: bold;
+}
+.je-object__controls > .je-modal {
+ width: 50%;
+}
+.je-object__controls > .je-modal .je-textarea {
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.85em;
+ height: 500px;
+}
+.je-object__controls > .je-modal button {
+ margin: 8px 0px 8px 8px;
+}
+.form-control > label {
+ display: block;
+ color: var(--je-color);
+ margin-bottom: 4px;
+}
+[data-schematype="array"] button {
+ margin-right: 8px;
+}
+table {
+ margin-bottom: 8px;
+}
+table th {
+ text-align: left;
+ font-size: var(--textsize);
+}
+table td * {
+ white-space: nowrap;
+}
+input,
+textarea {
+ color: #495057;
+ padding: 8px 8px;
+ background-color: #fff;
+ border-radius: var(--border-radius);
+ border: 1px solid #ced4da;
+ font-family: "Roboto", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+ font-size: var(--textsize);
+}
+textarea {
+ min-width: 400px;
+}
+.json-editor-btntype-delete {
+ border: none;
+ background-color: inherit;
+ cursor: pointer;
+ margin-top: 4px;
+ padding: 0px;
+}
+.json-editor-btntype-delete > span {
+ display: none;
+}
+.json-editor-btntype-delete::after {
+ display: block;
+ content: "";
+ width: 24px;
+ height: 24px;
+}
+.json-editor-btntype-delete::after {
+ background: url(/images/v0/node_modules/@mdi/svg/svg/trash-can.svg);
+}
+.json-editor-btntype-move {
+ border: none;
+ background-color: inherit;
+ cursor: pointer;
+ margin-top: 4px;
+ padding: 0px;
+}
+.json-editor-btntype-move > span {
+ display: none;
+}
+.json-editor-btntype-move::after {
+ display: block;
+ content: "";
+ width: 24px;
+ height: 24px;
+}
+.json-editor-btntype-move.moveup::after {
+ background: url(/images/v0/node_modules/@mdi/svg/svg/arrow-up-bold.svg);
+}
+.json-editor-btntype-move.movedown::after {
+ background: url(/images/v0/node_modules/@mdi/svg/svg/arrow-down-bold.svg);
+}
diff --git a/static/css/main.css b/static/css/main.css
index 6127c2a..81c2862 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,9 +1,17 @@
+:root {
+ --textsize: 12pt;
+ --je-color: #73a44d;
+ --border-radius: 5px;
+}
html {
box-sizing: border-box;
- font-family: sans-serif;
- font-size: 14pt;
margin: 0px;
padding: 0px;
+ font-family: "Roboto", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+ font-size: var(--textsize);
}
body {
margin: 0px;
diff --git a/static/js/editor.mjs b/static/js/editor.mjs
index 8bdf396..7a757e9 100644
--- a/static/js/editor.mjs
+++ b/static/js/editor.mjs
@@ -6,8 +6,9 @@ export class Editor {
render(data) {
const options = {
- theme: 'spectre',
- iconlib: 'spectre',
+ //theme: 'spectre',
+ //iconlib: 'spectre',
+ theme: 'barebones',
disable_collapse: true,
disable_properties: true,
schema: this.schema,
@@ -22,7 +23,6 @@ export class Editor {
const div = document.createElement('div')
this.editor = new JSONEditor(div, options);
-
// this.editor.on('ready', ()=>{
// })
div.addEventListener('keydown', event=>this.keyHandler(event))
diff --git a/static/less/json_editor.less b/static/less/json_editor.less
new file mode 100644
index 0000000..18ffc8f
--- /dev/null
+++ b/static/less/json_editor.less
@@ -0,0 +1,128 @@
+.je-indented-panel {
+ background-color: #f8f9fa;
+ border: 1px solid rgba(0,0,0,.125);
+ border-radius: var(--border-radius);
+ padding: 16px;
+ margin-left: 0px;
+ margin-top: 16px;
+ margin-bottom: 16px;
+ width: min-content;
+
+ .row {
+ margin-top: 16px;
+ &:first-child {
+ margin-top: 0px;
+ }
+ }
+}
+
+.je-header {
+ color: var(--je-color);
+ font-weight: bold;
+}
+
+.je-object__controls {
+ & > .je-modal {
+ width: 50%;
+
+ .je-textarea {
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.85em;
+ height: 500px;
+ }
+
+ button {
+ margin: 8px 0px 8px 8px;
+ }
+ }
+}
+
+.form-control {
+ & > label {
+ display: block;
+ color: var(--je-color);
+ margin-bottom: 4px;
+ }
+}
+
+[data-schematype="array"] {
+ button {
+ margin-right: 8px;
+ }
+}
+
+table {
+ margin-bottom: 8px;
+
+ th {
+ text-align: left;
+ font-size: var(--textsize);
+ }
+
+ td {
+ * {
+ white-space: nowrap;
+ }
+ }
+}
+
+input, textarea {
+ color: #495057;
+ padding: 8px 8px;
+ background-color: #fff;
+ border-radius: var(--border-radius);
+ border: 1px solid #ced4da;
+
+ font-family: "Roboto", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+ font-size: var(--textsize);
+}
+
+textarea {
+ min-width: 400px;
+}
+
+.datagraph-button() {
+ border: none;
+ background-color: inherit;
+ cursor: pointer;
+ margin-top: 4px;
+ padding: 0px;
+
+ & > span {
+ display: none;
+ }
+
+ &::after {
+ display: block;
+ content: "";
+ width: 24px;
+ height: 24px;
+ }
+}
+
+// json-editor-btn-delete
+// delete
+.json-editor-btntype-delete {
+ .datagraph-button();
+
+ &::after {
+ background: url(/images/v0/node_modules/@mdi/svg/svg/trash-can.svg);
+ }
+}
+
+// json-editor-btn-movedown
+// movedown
+.json-editor-btntype-move {
+ .datagraph-button();
+
+ &.moveup::after {
+ background: url(/images/v0/node_modules/@mdi/svg/svg/arrow-up-bold.svg);
+ }
+
+ &.movedown::after {
+ background: url(/images/v0/node_modules/@mdi/svg/svg/arrow-down-bold.svg);
+ }
+}
diff --git a/static/less/main.less b/static/less/main.less
index c92a258..8f0b7e8 100644
--- a/static/less/main.less
+++ b/static/less/main.less
@@ -1,9 +1,20 @@
+:root {
+ --textsize: 12pt;
+ --je-color: #73a44d;
+ --border-radius: 5px;
+}
+
html {
box-sizing: border-box;
- font-family: sans-serif;
- font-size: 14pt;
margin: 0px;
padding: 0px;
+
+
+ font-family: "Roboto", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+ font-size: var(--textsize);
}
body {
diff --git a/views/layouts/main.gotmpl b/views/layouts/main.gotmpl
index b45884f..4940508 100644
--- a/views/layouts/main.gotmpl
+++ b/views/layouts/main.gotmpl
@@ -3,6 +3,11 @@
+
+
+
+
+
-
-
+
+