${Octicon.mark_github}
diff --git a/src/app/components/Octicon.ts b/src/app/components/Octicon.ts
index c8728b9f..877a0c36 100644
--- a/src/app/components/Octicon.ts
+++ b/src/app/components/Octicon.ts
@@ -8,6 +8,8 @@ export const Octicon = {
code: '',
dash: '',
download: '',
+ eye: '',
+ eye_closed: '',
gear: '',
globe: '',
history: '',
diff --git a/src/app/components/panels/TreePanel.ts b/src/app/components/panels/TreePanel.ts
index 62124004..c8959949 100644
--- a/src/app/components/panels/TreePanel.ts
+++ b/src/app/components/panels/TreePanel.ts
@@ -84,6 +84,9 @@ export const TreePanel = (view: View, model: DataModel) => {
${Octicon.arrow_right}
+
diff --git a/src/app/hooks/renderHtml.ts b/src/app/hooks/renderHtml.ts
index 8995e710..85528071 100644
--- a/src/app/hooks/renderHtml.ts
+++ b/src/app/hooks/renderHtml.ts
@@ -4,6 +4,7 @@ import { Mounter } from '../views/View'
import { hexId, htmlEncode } from '../Utils'
import { suffixInjector } from './suffixInjector'
import { Octicon } from '../components/Octicon'
+import { App } from '../App'
/**
* Secondary model used to remember the keys of a map
@@ -167,8 +168,11 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
.filter(k => activeFields[k].enabled(path))
.map(k => {
const field = activeFields[k]
- if (field.hidden && field.hidden()) return ''
const childPath = getChildModelPath(path, k)
+ const context = childPath.getContext().join('.')
+ const fieldSettings = App.settings.fields.find(f => f?.path && context.endsWith(f.path))
+ if ((field.hidden && field.hidden()) || fieldSettings?.hidden) return ''
+
const category = field.category(childPath)
const [cPrefix, cSuffix, cBody] = field.hook(this, childPath, value[k], mounter)
return `
@@ -176,7 +180,7 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
${error(childPath, mounter)}
${help(childPath, mounter)}
${cPrefix}
-
+
${cSuffix}
${cBody ? `${cBody}
` : ''}
diff --git a/src/app/views/FieldSettings.ts b/src/app/views/FieldSettings.ts
new file mode 100644
index 00000000..60a8be75
--- /dev/null
+++ b/src/app/views/FieldSettings.ts
@@ -0,0 +1,59 @@
+import { App } from '../App'
+import { Header } from '../components/Header'
+import { Octicon } from '../components/Octicon'
+import { View } from './View'
+
+export const FieldSettings = (view: View): string => {
+ const fieldListId = view.register(fieldList => {
+ const getFields = () => {
+ const fields = App.settings.fields
+ return fields.map((f, i) => {
+ const pathInput = view.register(el => {
+ (el as HTMLInputElement).value = f.path ?? ''
+ el.addEventListener('change', () => {
+ fields[i] = {...f, path: (el as HTMLSelectElement).value}
+ App.settings.save()
+ view.mount(fieldList, getFields(), false)
+ })
+ })
+ const nameInput = view.register(el => {
+ (el as HTMLInputElement).value = f.name ?? ''
+ el.addEventListener('change', () => {
+ fields[i] = {...f, name: (el as HTMLSelectElement).value}
+ App.settings.save()
+ view.mount(fieldList, getFields(), false)
+ })
+ })
+ return `
+
+
+
+
+
+
+
+ ${f.hidden ? Octicon.eye_closed : Octicon.eye}
+ ${Octicon.trashcan}
+
+ `
+ }).join('')
+ }
+ view.mount(fieldList, getFields(), false)
+ })
+
+ return `${Header(view, 'Field Settings')}
+
+
+ Customize advanced field settings
+
+
+
`
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index 632446f8..f4798f99 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -4,6 +4,7 @@
"dimension-type": "Dimension Type",
"dimension": "Dimension",
"download": "Download",
+ "fields": "Fields",
"item-modifier": "Item Modifier",
"language": "Language",
"loot-table": "Loot Table",
diff --git a/src/styles/global.css b/src/styles/global.css
index 265fffa0..d2199739 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -57,7 +57,7 @@ header {
padding: 10px;
height: 56px;
border-bottom: 2px solid var(--border);
- transition: border-color var(--style-transition);
+ transition: border-color var(--style-transition), background-color var(--style-transition);
}
.header-title {
@@ -356,6 +356,11 @@ nav > .toggle span {
width: 100px;
}
+.btn a {
+ color: var(--btn-text);
+ text-decoration: none;
+}
+
.errors {
position: fixed;
display: flex;
@@ -437,6 +442,85 @@ nav > .toggle span {
margin-left: 10px;
}
+.settings {
+ padding: 20px;
+}
+
+.settings p {
+ color: var(--nav);
+ padding: 8px;
+ border-bottom: 2px solid var(--border);
+ transition: border-color var(--style-transition), color var(--style-transition);
+}
+
+.field-list {
+ width: 100%;
+ border-collapse: collapse;
+ list-style-type: none;
+}
+
+.field-list li {
+ display: flex;
+ justify-content: space-between;
+ padding: 4px 0;
+ border-bottom: 1px solid var(--border);
+ transition: border-color var(--style-transition);
+}
+
+.field-prop {
+ display: inline-flex;
+ align-items: center;
+ max-width: 100%;
+ margin: 4px;
+}
+
+.field-prop > label,
+.field-prop > input {
+ height: 34px;
+ color: var(--text);
+ margin-right: -1px;
+ border: 1px solid;
+ border-color: var(--nav-faded-hover);
+ transition: all var(--style-transition);
+}
+
+.field-prop label {
+ padding: 0 9px;
+ line-height: 1.94rem;
+ background-color: var(--node-background-label);
+ white-space: nowrap;
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+}
+
+.field-prop input {
+ width: 100%;
+ line-height: 1.6rem;
+ background-color: var(--node-background-input);
+ color: var(--text);
+ padding-left: 9px;
+ font-size: 18px;
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+
+.field-prop svg {
+ padding: 4px;
+ margin: 0 4px;
+ height: 28px;
+ width: 28px;
+ fill: var(--nav);
+ cursor: pointer;
+}
+
+.field-prop .hidden svg {
+ fill: #be4b2e;
+}
+
+.field-prop .dimmed svg {
+ fill: var(--nav-faded);
+}
+
.spinner {
margin: 40px auto 0;
width: 80px;
@@ -475,26 +559,37 @@ nav > .toggle span {
}
@media screen and (max-width: 580px) {
- body {
- overflow-y: hidden;
- }
-
header {
flex-direction: column;
height: 92px;
+ width: 100%;
+ background-color: var(--background);
+ z-index: 5;
+ position: fixed;
}
nav {
align-self: flex-end;
}
- .content,
- .source textarea {
- height: calc(100vh - 92px);
+ .home,
+ .settings,
+ .content {
+ padding-top: 92px;
+ }
+
+ .content {
+ height: unset;
+ /* min-height: calc(100vh - 92px); */
+ min-height: 100%;
+ }
+
+ textarea.source {
+ height: calc(100vh - 98px);
}
.tree {
- padding-top: 50px;
+ padding-top: 44px;
}
.tree-panel + .gutter {
@@ -506,6 +601,12 @@ nav > .toggle span {
width: 100% !important;
}
+ .tree-panel .panel-controls {
+ top: 97px;
+ right: 5px;
+ position: fixed;
+ }
+
nav > .toggle {
display: flex;
position: absolute;
@@ -521,9 +622,21 @@ nav > .toggle span {
}
.home {
- padding: 5px;
+ padding: 117px 5px 5px;
justify-content: center;
}
+
+ .field-list li {
+ flex-direction: column;
+ }
+
+ .field-prop {
+ width: 100%;
+ }
+
+ .field-prop input {
+ width: 100%;
+ }
}
@media screen and (max-width: 480px) {
diff --git a/webpack.config.js b/webpack.config.js
index 740e6d72..c6e16bc3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,6 +42,11 @@ module.exports = (env, argv) => ({
filename: 'index.html',
template: 'src/index.html'
}),
+ new HtmlWebpackPlugin({
+ title: 'Data Pack Generators Minecraft 1.16, 1.17',
+ filename: 'settings/fields/index.html',
+ template: 'src/index.html'
+ }),
new HtmlWebpackPlugin({
title: 'Data Pack Generators Minecraft 1.16, 1.17',
filename: '404.html',