mirror of
https://github.com/JannisX11/blockbench.git
synced 2024-11-21 01:13:37 +08:00
Add custom thumbnail CSS support for themes
This commit is contained in:
Ewan Howell
parent
044d952912
commit
c960bff03a
@ -686,7 +686,7 @@
|
||||
color: var(--color-light);
|
||||
}
|
||||
.keybind_line > div.keybindslot.conflict {
|
||||
border-left: 4px solid var(--color-close);
|
||||
border-left: 4px solid var(--color-close);
|
||||
}
|
||||
.keybindslot .punctuation {
|
||||
color: var(--color-subtle_text);
|
||||
@ -753,6 +753,14 @@
|
||||
#css_editor > .prism-editor-component {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#thumbnail_editor {
|
||||
height: calc(100vh - 345px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#thumbnail_editor > .prism-editor-component {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#theme_list {
|
||||
overflow-y: auto;
|
||||
@ -765,7 +773,7 @@
|
||||
padding: 6px;
|
||||
border: 2px solid transparent;
|
||||
background-color: var(--color-ui);
|
||||
color: var(--color-text);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
#theme_list .theme:hover {
|
||||
@ -789,7 +797,7 @@
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
|
||||
#theme_list .theme_preview {
|
||||
#theme_list .theme_preview, .custom_thumbnail_preview {
|
||||
position: relative;
|
||||
height: 108px;
|
||||
width: 100%;
|
||||
@ -797,6 +805,10 @@
|
||||
border: 2px solid var(--color-frame);
|
||||
border-top: none;
|
||||
}
|
||||
.custom_thumbnail_preview {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.theme_preview_header {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
@ -836,7 +848,7 @@
|
||||
border-radius: 2px;
|
||||
margin: 8px 4px;
|
||||
background-color: var(--color-text);
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.theme_preview_menu {
|
||||
@ -945,11 +957,11 @@
|
||||
}
|
||||
.special_thanks_mentions li {
|
||||
line-height: 18px;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/*Specific Dialogs*/
|
||||
dialog#model_stats .form_bar {
|
||||
dialog#model_stats .form_bar {
|
||||
margin: 0;
|
||||
}
|
||||
.dialog#texture_edit p.multiline_text {
|
||||
@ -1034,7 +1046,7 @@
|
||||
color: var(--color-accent);
|
||||
}
|
||||
/*Scale*/
|
||||
dialog#scale .form_bar_overflow_info {
|
||||
dialog#scale .form_bar_overflow_info {
|
||||
color: #ff5767;
|
||||
}
|
||||
dialog#scale .toggle_panel {
|
||||
@ -1064,7 +1076,7 @@
|
||||
|
||||
/*Import entity texture*/
|
||||
dialog#select_texture > ul {
|
||||
max-height: 420px;
|
||||
max-height: 420px;
|
||||
}
|
||||
|
||||
/*Selection Creator*/
|
||||
@ -1084,29 +1096,30 @@
|
||||
dialog#bedrock_model_select .search_bar {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
#model_select_list li {
|
||||
overflow: hidden;
|
||||
#model_select_list li {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
}
|
||||
#model_select_list li.selected {
|
||||
background-color: var(--color-selected);
|
||||
color: var(--color-light);
|
||||
}
|
||||
#model_select_list li:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
#model_select_list li > * {
|
||||
margin: 0;
|
||||
margin-left: 12px;
|
||||
cursor: inherit;
|
||||
}
|
||||
#model_select_list > li > label {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
#model_select_list > li.selected > label {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
#model_select_list li.selected {
|
||||
background-color: var(--color-selected);
|
||||
color: var(--color-light);
|
||||
}
|
||||
#model_select_list li:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
#model_select_list li > * {
|
||||
margin: 0;
|
||||
margin-left: 12px;
|
||||
cursor: inherit;
|
||||
}
|
||||
#model_select_list > li > label {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
#model_select_list > li.selected > label {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Screenshot */
|
||||
dialog#screenshot content {
|
||||
color: var(--color-subtle_text);
|
||||
@ -1114,7 +1127,7 @@
|
||||
dialog#screenshot content img {
|
||||
border: 1px solid var(--color-accent);
|
||||
max-width: 100%;
|
||||
max-height: 60vh;
|
||||
max-height: 60vh;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
@ -2259,7 +2272,7 @@
|
||||
}
|
||||
#predicate_override_list .predicate_list > li > input {
|
||||
width: 80px;
|
||||
flex-shrink: 1;
|
||||
flex-shrink: 1;
|
||||
text-align: center;
|
||||
}
|
||||
#predicate_override_list .predicate_list > li .tool {
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
<link rel="stylesheet" href="css/panels.css">
|
||||
<link rel="stylesheet" href="css/dialogs.css">
|
||||
<style type="text/css" id="theme_css"></style>
|
||||
<style type="text/css" id="theme_thumbnail_css"></style>
|
||||
</head>
|
||||
<body spellcheck="false" class="maximized">
|
||||
<script>
|
||||
|
||||
@ -9,6 +9,7 @@ const CustomTheme = {
|
||||
headline_font: '',
|
||||
code_font: '',
|
||||
css: '',
|
||||
thumbnail: '',
|
||||
colors: {},
|
||||
},
|
||||
themes: [
|
||||
@ -63,6 +64,8 @@ const CustomTheme = {
|
||||
})
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
CustomTheme.loadThumbnailStyles();
|
||||
}
|
||||
|
||||
CustomTheme.dialog = new Dialog({
|
||||
@ -82,6 +85,7 @@ const CustomTheme = {
|
||||
options: tl('layout.options'),
|
||||
color: tl('layout.color'),
|
||||
css: tl('layout.css'),
|
||||
thumbnail: tl('layout.thumbnail'),
|
||||
},
|
||||
page: 'select',
|
||||
actions: [
|
||||
@ -117,8 +121,6 @@ const CustomTheme = {
|
||||
}
|
||||
})
|
||||
}).catch(console.error)
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
component: {
|
||||
@ -152,6 +154,10 @@ const CustomTheme = {
|
||||
CustomTheme.updateSettings();
|
||||
saveChanges();
|
||||
},
|
||||
'data.thumbnail'() {
|
||||
CustomTheme.updateSettings();
|
||||
saveChanges();
|
||||
},
|
||||
'data.colors': {
|
||||
handler() {
|
||||
CustomTheme.updateColors();
|
||||
@ -221,7 +227,7 @@ const CustomTheme = {
|
||||
|
||||
<div id="theme_list">
|
||||
<div v-for="theme in listed_themes" :key="theme.id" class="theme" :class="{selected: theme.id == data.id}" @click="selectTheme(theme)" @contextmenu="openContextMenu(theme, $event)">
|
||||
<div class="theme_preview" :class="{borders: theme.borders}" :style="getThemeThumbnailStyle(theme)">
|
||||
<div class="theme_preview" :class="{ borders: theme.borders, ['custom_theme_thumbnail_' + theme.id]: true }" :style="getThemeThumbnailStyle(theme)">
|
||||
<div class="theme_preview_header">
|
||||
<span class="theme_preview_text" style="width: 20px;" />
|
||||
<div class="theme_preview_menu_header">
|
||||
@ -299,6 +305,33 @@ const CustomTheme = {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="open_category == 'thumbnail'">
|
||||
<h2 class="i_b">${tl('layout.thumbnail')}</h2>
|
||||
<div class="theme_preview custom_thumbnail_preview" :class="{ borders: data.borders, ['custom_theme_thumbnail_' + data.id]: true }" :style="getThemeThumbnailStyle(data)">
|
||||
<div class="theme_preview_header">
|
||||
<span class="theme_preview_text" style="width: 20px;" />
|
||||
<div class="theme_preview_menu_header">
|
||||
<span class="theme_preview_text" style="width: 34px;" />
|
||||
</div>
|
||||
<span class="theme_preview_text" style="width: 45px;" />
|
||||
</div>
|
||||
<div class="theme_preview_menu">
|
||||
<span class="theme_preview_text" style="width: 23px;" />
|
||||
<span class="theme_preview_text" style="width: 16px;" />
|
||||
<span class="theme_preview_text" style="width: 40px;" />
|
||||
</div>
|
||||
<div class="theme_preview_window">
|
||||
<div class="theme_preview_sidebar"></div>
|
||||
<div class="theme_preview_center"></div>
|
||||
<div class="theme_preview_sidebar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="thumbnail_editor">
|
||||
<vue-prism-editor v-model="data.thumbnail" @change="customizeTheme(1, $event)" language="css" :line-numbers="true" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>`
|
||||
},
|
||||
@ -398,8 +431,30 @@ const CustomTheme = {
|
||||
document.body.style.setProperty('--font-custom-code', CustomTheme.data.code_font);
|
||||
document.body.classList.toggle('theme_borders', !!CustomTheme.data.borders);
|
||||
$('style#theme_css').text(CustomTheme.data.css);
|
||||
CustomTheme.loadThumbnailStyles();
|
||||
CustomTheme.updateColors();
|
||||
},
|
||||
loadThumbnailStyles() {
|
||||
let thumbnailStyles = '\n';
|
||||
const style = document.createElement('style');
|
||||
document.head.appendChild(style);
|
||||
for (const theme of CustomTheme.themes) {
|
||||
style.textContent = theme.thumbnail;
|
||||
const sheet = style.sheet;
|
||||
for (const rule of sheet.cssRules) {
|
||||
thumbnailStyles += `.custom_theme_thumbnail_${theme.id} ${rule.selectorText} { ${rule.style.cssText} }\n`;
|
||||
}
|
||||
}
|
||||
if (CustomTheme.data.customized) {
|
||||
style.textContent = CustomTheme.data.thumbnail;
|
||||
const sheet = style.sheet;
|
||||
for (const rule of sheet.cssRules) {
|
||||
thumbnailStyles += `.custom_theme_thumbnail_${CustomTheme.data.id} ${rule.selectorText} { ${rule.style.cssText} }\n`;
|
||||
}
|
||||
}
|
||||
document.head.removeChild(style);
|
||||
$('style#theme_thumbnail_css').text(thumbnailStyles);
|
||||
},
|
||||
loadTheme(theme) {
|
||||
var app = CustomTheme.data;
|
||||
|
||||
@ -433,6 +488,8 @@ const CustomTheme = {
|
||||
}
|
||||
}
|
||||
Merge.string(app, theme, 'css');
|
||||
theme.thumbnail ??= '';
|
||||
Merge.string(app, theme, 'thumbnail');
|
||||
this.updateColors();
|
||||
this.updateSettings();
|
||||
},
|
||||
@ -517,6 +574,3 @@ BARS.defineActions(function() {
|
||||
BarItems.import_theme.toElement('#layout_title_bar')
|
||||
BarItems.export_theme.toElement('#layout_title_bar')
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
@ -783,6 +783,7 @@
|
||||
"layout.options": "Options",
|
||||
"layout.color": "Color Scheme",
|
||||
"layout.css": "Custom CSS",
|
||||
"layout.thumbnail": "Custom Thumbnail CSS",
|
||||
"layout.documentation": "Documentation",
|
||||
"layout.restore_backup": "Your customized theme \"%0\" was overwritten. Click here to restore it.",
|
||||
"layout.color.back": "Back",
|
||||
|
||||
14294
package-lock.json
generated
14294
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user