Fix custom theme dialog
This commit is contained in:
JannisX11
parent
ef5aec9985
commit
547997c139
@ -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%;
|
||||
|
||||
@ -331,10 +331,24 @@ class DialogSidebar {
|
||||
if (typeof action == 'string') {
|
||||
action = BarItems[action];
|
||||
}
|
||||
let copy = action.menu_node.cloneNode(true);
|
||||
copy.addEventListener('click', event => {
|
||||
action.trigger(event);
|
||||
})
|
||||
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);
|
||||
})
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ const CustomTheme = {
|
||||
headline_font: '',
|
||||
code_font: '',
|
||||
css: '',
|
||||
colors: {}
|
||||
colors: {},
|
||||
},
|
||||
defaultColors: {
|
||||
ui: '#282c34',
|
||||
@ -34,65 +34,153 @@ const CustomTheme = {
|
||||
localStorage.setItem('theme', JSON.stringify(CustomTheme.data));
|
||||
}
|
||||
|
||||
CustomTheme.vue = new Vue({
|
||||
el: '#theme_editor',
|
||||
data: CustomTheme.data,
|
||||
components: {
|
||||
VuePrismEditor
|
||||
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: 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()
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
main_font() {
|
||||
document.body.style.setProperty('--font-custom-main', CustomTheme.data.main_font);
|
||||
saveChanges();
|
||||
component: {
|
||||
data: {
|
||||
data: CustomTheme.data,
|
||||
open_category: 'color'
|
||||
},
|
||||
headline_font() {
|
||||
document.body.style.setProperty('--font-custom-headline', CustomTheme.data.headline_font);
|
||||
saveChanges();
|
||||
components: {
|
||||
VuePrismEditor
|
||||
},
|
||||
code_font() {
|
||||
document.body.style.setProperty('--font-custom-code', CustomTheme.data.code_font);
|
||||
saveChanges();
|
||||
},
|
||||
css() {
|
||||
$('style#theme_css').text(CustomTheme.data.css);
|
||||
saveChanges();
|
||||
},
|
||||
colors: {
|
||||
handler() {
|
||||
for (var key in CustomTheme.data.colors) {
|
||||
var hex = CustomTheme.data.colors[key];
|
||||
document.body.style.setProperty('--color-'+key, hex);
|
||||
}
|
||||
$('meta[name=theme-color]').attr('content', CustomTheme.data.colors.frame);
|
||||
|
||||
var c_outline = parseInt('0x'+CustomTheme.data.colors.accent.replace('#', ''))
|
||||
if (c_outline !== gizmo_colors.outline.getHex()) {
|
||||
gizmo_colors.outline.set(c_outline)
|
||||
Canvas.outlineMaterial.color = gizmo_colors.outline
|
||||
}
|
||||
var c_wire = parseInt('0x'+CustomTheme.data.colors.wireframe.replace('#', ''))
|
||||
if (c_wire !== gizmo_colors.wire.getHex()) {
|
||||
gizmo_colors.wire.set(c_wire);
|
||||
Canvas.wireframeMaterial.color = gizmo_colors.wire;
|
||||
}
|
||||
|
||||
var c_grid = parseInt('0x'+CustomTheme.data.colors.grid.replace('#', ''))
|
||||
if (c_grid !== gizmo_colors.grid.getHex()) {
|
||||
gizmo_colors.grid.set(c_grid);
|
||||
three_grid.children.forEach(c => {
|
||||
if (c.name === 'grid' && c.material) {
|
||||
c.material.color = gizmo_colors.grid;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch: {
|
||||
'data.main_font'() {
|
||||
document.body.style.setProperty('--font-custom-main', CustomTheme.data.main_font);
|
||||
saveChanges();
|
||||
},
|
||||
deep: true
|
||||
'data.headline_font'() {
|
||||
document.body.style.setProperty('--font-custom-headline', CustomTheme.data.headline_font);
|
||||
saveChanges();
|
||||
},
|
||||
'data.code_font'() {
|
||||
document.body.style.setProperty('--font-custom-code', CustomTheme.data.code_font);
|
||||
saveChanges();
|
||||
},
|
||||
'data.css'() {
|
||||
$('style#theme_css').text(CustomTheme.data.css);
|
||||
saveChanges();
|
||||
},
|
||||
'data.colors': {
|
||||
handler() {
|
||||
for (var key in CustomTheme.data.colors) {
|
||||
var hex = CustomTheme.data.colors[key];
|
||||
document.body.style.setProperty('--color-'+key, hex);
|
||||
}
|
||||
$('meta[name=theme-color]').attr('content', CustomTheme.data.colors.frame);
|
||||
|
||||
var c_outline = parseInt('0x'+CustomTheme.data.colors.accent.replace('#', ''))
|
||||
if (c_outline !== gizmo_colors.outline.getHex()) {
|
||||
gizmo_colors.outline.set(c_outline)
|
||||
Canvas.outlineMaterial.color = gizmo_colors.outline
|
||||
}
|
||||
var c_wire = parseInt('0x'+CustomTheme.data.colors.wireframe.replace('#', ''))
|
||||
if (c_wire !== gizmo_colors.wire.getHex()) {
|
||||
gizmo_colors.wire.set(c_wire);
|
||||
Canvas.wireframeMaterial.color = gizmo_colors.wire;
|
||||
}
|
||||
|
||||
var c_grid = parseInt('0x'+CustomTheme.data.colors.grid.replace('#', ''))
|
||||
if (c_grid !== gizmo_colors.grid.getHex()) {
|
||||
gizmo_colors.grid.set(c_grid);
|
||||
three_grid.children.forEach(c => {
|
||||
if (c.name === 'grid' && c.material) {
|
||||
c.material.color = gizmo_colors.grid;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
saveChanges();
|
||||
},
|
||||
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();
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user