Add classes to improve theming

This commit is contained in:
JannisX11 2024-06-15 00:12:20 +02:00
parent 1167eb7544
commit 5963f624f2
4 changed files with 13 additions and 14 deletions

View File

@ -298,8 +298,7 @@
<div id="right_bar" class="sidebar"></div>
<div id="center">
<ul id="toast_notification_list">
</ul>
<ul id="toast_notification_list"></ul>
<div id="top_slot"></div>
<div id="preview">

View File

@ -732,7 +732,7 @@ ipcRenderer.on('update-available', (event, arg) => {
})
} else {
addStartScreenSection({
addStartScreenSection('update_notification', {
color: 'var(--color-back)',
graphic: {type: 'icon', icon: 'update'},
text: [

View File

@ -36,7 +36,7 @@ function addStartScreenSection(id, data) {
data = id;
id = '';
}
var obj = $(Interface.createElement('section', {id}))
var obj = $(Interface.createElement('section', {class: 'start_screen_section', section_id: id}))
if (typeof data.graphic === 'object') {
var left = $('<div class="start_screen_left graphic"></div>')
obj.append(left)
@ -140,9 +140,9 @@ function addStartScreenSection(id, data) {
if (data.last) {
$('#start_screen > content').append(obj);
} else if (data.insert_after) {
$('#start_screen > content').find(`#${data.insert_after}`).after(obj);
$('#start_screen > content').find(`.start_screen_section[section_id="${data.insert_after}"]`).after(obj);
} else if (data.insert_before) {
$('#start_screen > content').find(`#${data.insert_before}`).before(obj);
$('#start_screen > content').find(`.start_screen_section[section_id="${data.insert_before}"]`).before(obj);
} else {
$('#start_screen > content').prepend(obj);
}
@ -375,7 +375,7 @@ onVueSetup(async function() {
template: `
<div id="start_screen">
<content>
<section id="splash_screen" v-if="show_splash_screen">
<section id="splash_screen" v-if="show_splash_screen" section_id="splash_screen">
<div class="splash_art_slideshow_image" :style="{backgroundImage: getBackground(slideshow[slideshow_selected].source)}">
<p v-if="slideshow[slideshow_selected].description" class="start_screen_graphic_description" v-html="pureMarked(slideshow[slideshow_selected].description)"></p>
</div>
@ -387,7 +387,7 @@ onVueSetup(async function() {
<i class="material-icons start_screen_close_button" @click="show_splash_screen = false">clear</i>
</section>
<section id="start_files">
<section id="start_files" section_id="start_files">
<div class="start_screen_left" v-if="!(selected_format_id && mobile_layout)">
<h2>${tl('mode.start.new')}</h2>
@ -581,7 +581,7 @@ ModelLoader.loaders = {};
let twitter_ad;
if (Blockbench.startup_count < 20 && Blockbench.startup_count % 5 === 4) {
twitter_ad = true;
addStartScreenSection({
addStartScreenSection('twitter_link', {
color: '#1da1f2',
text_color: '#ffffff',
graphic: {type: 'icon', icon: 'fab.fa-twitter'},
@ -594,7 +594,7 @@ ModelLoader.loaders = {};
}
//Discord
if (Blockbench.startup_count < 6 && !twitter_ad) {
addStartScreenSection({
addStartScreenSection('discord_link', {
color: '#5865F2',
text_color: '#ffffff',
graphic: {type: 'icon', icon: 'fab.fa-discord'},
@ -666,7 +666,7 @@ ModelLoader.loaders = {};
}
},
template: `
<section id="quick_setup">
<section id="quick_setup" section_id="quick_setup" class="start_screen_section">
<i class="material-icons start_screen_close_button" @click="close()">clear</i>
<h2>${tl('mode.start.quick_setup')}</h2>

View File

@ -1267,8 +1267,8 @@ BARS.defineActions(function() {
<div :class="{open: tab == 'installed'}" @click="setTab('installed')">${tl('dialog.plugins.installed')}</div>
<div :class="{open: tab == 'available'}" @click="setTab('available')">${tl('dialog.plugins.available')}</div>
</div>
<ul class="list" id="plugin_list" ref="plugin_list">
<li v-for="plugin in viewed_plugins" :plugin="plugin.id" :class="{plugin: true, testing: plugin.fromFile, selected: plugin == selected_plugin, disabled_plugin: plugin.disabled, incompatible: plugin.isInstallable() !== true}" @click="selectPlugin(plugin)" @contextmenu="selectPlugin(plugin); plugin.showContextMenu($event)">
<ul class="list" :class="{paginated_list: pages.length > 1}" id="plugin_list" ref="plugin_list">
<li v-for="plugin in viewed_plugins" :plugin="plugin.id" :class="{plugin: true, testing: plugin.fromFile, selected: plugin == selected_plugin, disabled_plugin: plugin.disabled, installed_plugin: plugin.installed, incompatible: plugin.isInstallable() !== true}" @click="selectPlugin(plugin)" @contextmenu="selectPlugin(plugin); plugin.showContextMenu($event)">
<div>
<div class="plugin_icon_area">
<img v-if="plugin.hasImageIcon()" :src="plugin.getIcon()" width="48" height="48px" />
@ -1292,7 +1292,7 @@ BARS.defineActions(function() {
</ol>
</div>
<div id="plugin_browser_page" v-if="selected_plugin">
<div id="plugin_browser_page" v-if="selected_plugin" :class="{plugin_disabled: selected_plugin.disabled, plugin_installed: selected_plugin.installed}">
<div v-if="isMobile" @click="selectPlugin(null);" class="plugin_browser_back_button">
<i class="material-icons icon">arrow_back_ios</i>
${tl('generic.navigate_back')}</div>