From 59595fe59ef8d283ff12e862d480d2c14983a767 Mon Sep 17 00:00:00 2001 From: Reorx Date: Sun, 5 Feb 2023 14:52:27 +0800 Subject: [PATCH] fine-tune ui --- src/editor/_json-editor.scss | 4 ++-- src/editor/_vars.scss | 4 ++-- src/editor/index.html | 6 +++--- src/editor/main.js | 2 ++ src/editor/styles.scss | 41 ++++++++++++++++++++++++++++++++---- 5 files changed, 46 insertions(+), 11 deletions(-) diff --git a/src/editor/_json-editor.scss b/src/editor/_json-editor.scss index 628e230..3e81883 100644 --- a/src/editor/_json-editor.scss +++ b/src/editor/_json-editor.scss @@ -25,7 +25,7 @@ padding-left: calc(var(--gap) * 2); padding-bottom: var(--gap); margin-left: 0; - border-left: 1px solid #ddd; + border-left: 1px solid var(--grey-2); margin-bottom: var(--gap); } @@ -63,7 +63,7 @@ } .je-table { margin-bottom: 5px; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid var(--grep-2); } /* buttons */ diff --git a/src/editor/_vars.scss b/src/editor/_vars.scss index 767dd07..d93a39a 100644 --- a/src/editor/_vars.scss +++ b/src/editor/_vars.scss @@ -11,14 +11,14 @@ @mixin normal-button { @include button-base; - background-color: #eee; + background-color: var(--grey-0); border: 1px solid transparent; border-radius: 2px; padding: 0px 8px; line-height: 22px; &:hover { - background-color: #e1e1e1; + background-color: var(--grey-1); } &:active { border-color: #555; diff --git a/src/editor/index.html b/src/editor/index.html index 7f62f08..275ec52 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -10,9 +10,9 @@
-
-
JSONCV
-
Editor
+
diff --git a/src/editor/main.js b/src/editor/main.js index d9b4256..8f04791 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -50,6 +50,8 @@ propertiesInOrder.forEach((name, index) => { }) basicsPropertiesInOrder.forEach((name, index) => { jsoncvSchema.properties.basics.properties[name].propertyOrder = index + // only add location and profiles to basics toc + if (!['location', 'profiles'].includes(name)) return const li = createElement('li', {parent: basicsUl}) createElement('a', { text: name, diff --git a/src/editor/styles.scss b/src/editor/styles.scss index 0b8dbe6..a8a225b 100644 --- a/src/editor/styles.scss +++ b/src/editor/styles.scss @@ -12,14 +12,21 @@ --yellow-1: #FFEC99; --green-0: #D3F9D8; --green-1: #B2F2BB; + --grey-0: #eee; + --grey-1: #e1e1e1; + --grey-2: #ddd; --font-default: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace; } -html { +html, +body * { font-family: var(--font-default); } +button { + font-size: 13px; +} body { margin: 0; @@ -35,7 +42,7 @@ body { } .sidebar { - padding: var(--gap); + padding: 0 var(--gap2) 0 var(--gap); } .middle { padding-right: var(--gap2); @@ -45,17 +52,37 @@ body { background-color: #eee; } } - .editor-container { [data-schemapath]:target { animation: bgFade 1s forwards; } } +.logo { + padding: var(--gap2) 0; + margin-bottom: var(--gap2); + border-bottom: 1px solid var(--grey-2); + font-weight: 700; +} + .editor-toc { + padding-left: 5px; + padding-bottom: var(--gap2); + margin-bottom: var(--gap2); + border-bottom: 1px solid var(--grey-2); + font-size: 15px; + ul { margin: 0; - padding: 4px 0 4px 14px; + padding: 0 0 0 12px; + + li { + margin: 5px 0; + + ul { + margin-left: 5px; + } + } a { text-decoration: none; @@ -67,6 +94,12 @@ body { } } +.app-actions { + button { + margin-bottom: 8px; + } +} + .output-html { width: 100%; height: 100%;