Fix custom theme dialog

css/dialogs.css

@@ -66,7 +66,7 @@
 		bottom: unset;
 		display: none;
 	}
-	dialog > content {
+	dialog > content, dialog .dialog_wrapper > content {
 		display: block;
 		overflow-y: auto;
 		flex: 1 1 auto;
@@ -258,6 +258,7 @@
 	.dialog_content {
 		display: block;
 		grid-area: content;
+		max-height: calc(100vh - 180px);
 	}
 	dialog .dialog_content,
 	dialog .dialog_bar.button_bar {
@@ -309,6 +310,7 @@
 		margin-top: 1px; 
 		margin-right: 4px;
 		margin-left: -28px;
+		flex-shrink: 0;
 		pointer-events: none;
 	}
 	.dialog_sidebar .dialog_sidebar_actions li img {
@@ -341,27 +343,9 @@
 		margin-top: -10px;
 		font-size: 1.8em;
 	}
-	#settings h3 > i {
-		margin-top: 5px;
-		float: left;
-	}
-	#settings h3 > i.settings_expand_icon {
-		opacity: 0.7;
-	}
-	#settings h3:hover {
-		color: var(--color-light);
-	}
-	#settings .bar.next_to_title {
-		margin-top: -60px;
-	}
 
 
 	/*Settings*/
-	#settings li h3 {
-		margin: 0;
-		padding: 0;
-		padding-top: 6px;
-	}
 	#settingslist {
 		width: 100%;
 		max-height: 600px;
@@ -497,7 +481,7 @@
 
 	/*Colors*/
 	dialog#theme .dialog_wrapper {
-		min-height: 560px;
+		min-height: 480px;
 	}
 	div#color_wrapper {
 		columns: 2;
@@ -740,9 +724,10 @@
 	}
 	.dialog.draggable .bar.next_to_title {
 		width: max-content;
-		margin-top: -51px;
+		margin-top: -30px;
 		margin-left: 111px;
 		float: left;
+		z-index: inherit;
 	}
 	.dialog#plugins {
 		width: 100%;

js/interface/dialog.js

@@ -331,10 +331,24 @@ class DialogSidebar {
 				if (typeof action == 'string') {
 					action = BarItems[action];
 				}
-				let copy = action.menu_node.cloneNode(true);
+				let copy;
+				if (action instanceof Action) {
+					copy = action.menu_node.cloneNode(true);
 					copy.addEventListener('click', event => {
 						action.trigger(event);
 					})
+				} else {
+					copy = document.createElement('li');
+					copy.title = action.description ? tl(action.description) : '';
+					let icon = Blockbench.getIconNode(action.icon, action.color);
+					let span = document.createElement('span');
+					span.textContent = tl(action.name);
+					copy.append(icon);
+					copy.append(span);
+					copy.addEventListener('click', event => {
+						Blockbench.openLink('https://www.blockbench.net/wiki/blockbench/themes');
+					})
+				}
 				action_list.append(copy);
 			})
 		}

js/interface/themes.js

@@ -4,7 +4,7 @@ const CustomTheme = {
 		headline_font: '',
 		code_font: '',
 		css: '',
-		colors: {}
+		colors: {},
 	},
 	defaultColors: {
 		ui: '#282c34',
@@ -34,30 +34,69 @@ const CustomTheme = {
 			localStorage.setItem('theme', JSON.stringify(CustomTheme.data));
 		}
 
-		CustomTheme.vue = new Vue({
+		CustomTheme.dialog = new Dialog({
-			el: '#theme_editor',
+			id: 'theme',
+			title: 'dialog.settings.theme',
+			singleButton: true,
+			width: 920,
+			title_menu: new Menu([
+				'settings_window',
+				'keybindings_window',
+				'theme_window',
+				'about_window',
+			]),
+			sidebar: {
+				pages: {
+					//discover: tl('layout.discover'),
+					color: tl('layout.color'),
+					fonts: tl('layout.fonts'),
+					css: tl('layout.css'),
+				},
+				page: 'color',
+				actions: [
+					{
+						name: 'layout.documentation',
+						icon: 'fa-book',
+						click() {
+
+						}
+					},
+					'import_theme',
+					'export_theme',
+				],
+				onPageSwitch(page) {
+					CustomTheme.dialog.content_vue.open_category = page;
+					if (page == 'color' && !CustomTheme.dialog_is_setup) {
+						CustomTheme.setupDialog()
+					}
+				}
+			},
+			component: {
+				data: {
 					data: CustomTheme.data,
+					open_category: 'color'
+				},
 				components: {
 					VuePrismEditor
 				},
 				watch: {
-				main_font() {
+					'data.main_font'() {
 						document.body.style.setProperty('--font-custom-main', CustomTheme.data.main_font);
 						saveChanges();
 					},
-				headline_font() {
+					'data.headline_font'() {
 						document.body.style.setProperty('--font-custom-headline', CustomTheme.data.headline_font);
 						saveChanges();
 					},
-				code_font() {
+					'data.code_font'() {
 						document.body.style.setProperty('--font-custom-code', CustomTheme.data.code_font);
 						saveChanges();
 					},
-				css() {
+					'data.css'() {
 						$('style#theme_css').text(CustomTheme.data.css);
 						saveChanges();
 					},
-				colors: {
+					'data.colors': {
 						handler() {
 							for (var key in CustomTheme.data.colors) {
 								var hex = CustomTheme.data.colors[key];
@@ -91,8 +130,57 @@ const CustomTheme = {
 						deep: true
 					},
 	
+				},
+				template: `
+					<div id="theme_editor">
+						<div v-if="open_category == 'discover'">
+							<h2 class="i_b">${tl('layout.discover')}</h2>
+						</div>
+						<div v-show="open_category == 'color'">
+							<h2 class="i_b">${tl('layout.color')}</h2>
+							<div id="color_wrapper">
+								<div class="color_field" v-for="(color, key) in data.colors" :id="'color_field_' + key">
+									<div class="layout_color_preview color_input" :style="{'background-color': color}"></div>
+									<div class="desc">
+										<h4>{{ tl('layout.color.'+key) }}</h4>
+										<p>{{ tl('layout.color.'+key+'.desc') }}</p>
+									</div>
+								</div>
+							</div>
+						</div>
+	
+						<div v-if="open_category == 'fonts'">
+							<h2 class="i_b">${tl('layout.fonts')}</h2>
+							<div class="dialog_bar">
+								<label class="name_space_left" for="layout_font_main">${tl('layout.font.main')}</label>
+								<input style="font-family: var(--font-main)" type="text" class="half dark_bordered" id="layout_font_main" v-model="data.main_font">
+							</div>
+	
+							<div class="dialog_bar">
+								<label class="name_space_left" for="layout_font_headline">${tl('layout.font.headline')}</label>
+								<input style="font-family: var(--font-headline)" type="text" class="half dark_bordered" id="layout_font_headline" v-model="data.headline_font">
+							</div>
+							<div class="dialog_bar">
+								<label class="name_space_left" for="layout_font_cpde">${tl('layout.font.code')}</label>
+								<input style="font-family: var(--font-code)" type="text" class="half dark_bordered" id="layout_font_cpde" v-model="data.code_font">
+							</div>
+						</div>
+						
+						<div v-if="open_category == 'css'">
+							<h2 class="i_b">${tl('layout.css')}</h2>
+							<div id="css_editor">
+								<vue-prism-editor v-model="data.css" language="css" :line-numbers="true" />
+							</div>
+	
+						</div>
+	
+					</div>`
+			},
+			onButton() {
+				Settings.save();
 			}
 		})
+
 		Vue.nextTick(function() {
 			CustomTheme.fetchFromStorage();
 		})
@@ -219,7 +307,6 @@ BARS.defineActions(function() {
 		icon: 'style',
 		category: 'blockbench',
 		click: function () {
-			if (!CustomTheme.dialog_is_setup) CustomTheme.setupDialog()
 			CustomTheme.dialog.show();
 		}
 	})
@@ -283,125 +370,4 @@ BARS.defineActions(function() {
 })
 
 
-onVueSetup(function() {
-
-	CustomTheme.dialog = new Dialog({
-		id: 'theme',
-		title: 'dialog.settings.theme',
-		singleButton: true,
-		width: 920,
-		title_menu: new Menu([
-			'settings_window',
-			'keybindings_window',
-			'theme_window',
-			'about_window',
-		]),
-		sidebar: {
-			pages: {
-				discover: 'Discover',
-				color: 'Color Scheme',
-				fonts: 'Fonts',
-				css: 'Custom CSS'
-			},
-			page: 'discover',
-			actions: [
-				'import_theme',
-				'export_theme',
-				'reset_layout',
-			],
-			onPageSwitch(page) {
-				CustomTheme.dialog.content_vue.open_category = page;
-				CustomTheme.dialog.content_vue.search_term = '';
-			}
-		},
-		component: {
-			data() {return {
-				open_category: 'discover',
-				search_term: '',
-			}},
-			methods: {
-				saveSettings() {
-					Settings.saveLocalStorages();
-				}
-			},
-			computed: {
-				list() {
-					if (this.search_term) {
-						var keywords = this.search_term.replace(/_/g, ' ').split(' ');
-						var items = {};
-						for (var key in settings) {
-							var setting = settings[key];
-							if (Condition(setting.condition)) {
-								var name = setting.name.toLowerCase();
-								var desc = setting.description.toLowerCase();
-								var missmatch = false;
-								for (var word of keywords) {
-									if (
-										!key.includes(word) &&
-										!name.includes(word) &&
-										!desc.includes(word)
-									) {
-										missmatch = true;
-									}
-								}
-								if (!missmatch) {
-									items[key] = setting;
-								}
-							}
-						}
-						return items;
-					} else {
-						return this.structure[this.open_category].items;
-					}
-				},
-				title() {
-					if (this.search_term) {
-						return tl('dialog.settings.search_results');
-					} else {
-						return this.structure[this.open_category].name;
-					}
-				}
-			},
-			template: `
-				<div>
-					<h2 class="i_b">${tl('dialog.settings.theme')}</h2>
-					<div class="bar next_to_title" id="layout_title_bar"></div>
-					<div class="y_scrollable" id="theme_editor">
-						<div id="color_wrapper">
-							<div class="color_field" v-for="(color, key) in colors" :id="'color_field_' + key">
-								<div class="layout_color_preview" :style="{'background-color': color}" class="color_input"></div>
-								<div class="desc">
-									<h4>{{ tl('layout.color.'+key) }}</h4>
-									<p>{{ tl('layout.color.'+key+'.desc') }}</p>
-								</div>
-							</div>
-						</div>
-
-						<div class="dialog_bar">
-							<label class="name_space_left" for="layout_font_main">${tl('layout.font.main')}</label>
-							<input style="font-family: var(--font-main)" type="text" class="half dark_bordered" id="layout_font_main" v-model="main_font">
-						</div>
-
-						<div class="dialog_bar">
-							<label class="name_space_left" for="layout_font_headline">${tl('layout.font.headline')}</label>
-							<input style="font-family: var(--font-headline)" type="text" class="half dark_bordered" id="layout_font_headline" v-model="headline_font">
-						</div>
-						<div class="dialog_bar">
-							<label class="name_space_left" for="layout_font_cpde">${tl('layout.font.code')}</label>
-							<input style="font-family: var(--font-code)" type="text" class="half dark_bordered" id="layout_font_cpde" v-model="code_font">
-						</div>
-						<h4 class="i_b">${tl('layout.css')}</h4>
-						<div id="css_editor">
-							<vue-prism-editor v-model="css" language="css" :line-numbers="true" />
-						</div>
-
-					</div>
-
-				</div>`
-		},
-		onButton() {
-			Settings.save();
-		}
-	})
-})
 

lang/en.json

@@ -442,6 +442,11 @@
 	"keybindings.recording": "Recording Keybinding",
 	"keybindings.press": "Press a key or key combination or click anywhere on the screen to record your keybinding.",
 
+	"layout.discover": "Discover",
+	"layout.color": "Color Scheme",
+	"layout.fonts": "Fonts",
+	"layout.css": "Custom CSS",
+	"layout.documentation": "Documentation",
 	"layout.color.back": "Back",
 	"layout.color.back.desc": "Backgrounds and input fields",
 	"layout.color.dark": "Dark",
@@ -477,7 +482,6 @@
 	"layout.font.main": "Main Font",
 	"layout.font.headline": "Headline Font",
 	"layout.font.code": "Code Font",
-	"layout.css": "Custom CSS",
 
 	"about.version": "Version:",
 	"about.version.up_to_date": "Up to date",