JannisX11/blockbench
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Format about pages on start screen

Browse Source
This commit is contained in:
JannisX11 2022-05-18 23:44:00 +02:00
parent cb8b2e7fa7
commit 5764c3b0ba
15 changed files with 203 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/start_screen/generic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

92
css/window.css
View File

@ -659,11 +659,6 @@
#start_screen h3 {
margin: 0;
}
#start_screen #start-files h3 {
padding-bottom: 0;
height: auto;
font-size: 18px;
}
#start_screen .bar.next_to_title {
position: absolute;
right: 8px;
@ -751,7 +746,7 @@
color: var(--color-accent_text);
background-color: transparent;
}
#start-files ul.redact li.recent_project.thumbnail .thumbnail_image {
#start_files ul.redact li.recent_project.thumbnail .thumbnail_image {
background: transparent !important;
}
#start_screen .recent_project.thumbnail:hover .icon_wrapper {
@ -784,12 +779,12 @@
#start_screen > content > section.vertical {
flex-direction: column;
}
#start_screen section div.start_screen_left, #start_screen section div.start_screen_right {
div.start_screen_left, div.start_screen_right {
display: block;
padding: 24px;
max-height: 606px;
}
#start_screen section div.start_screen_right > ul {
div.start_screen_right > ul {
max-height: 470px;
padding-right: 5px;
overflow-y: auto;
@ -816,7 +811,7 @@
}
#start_screen div.start_screen_right {
flex-grow: 1;
width: 62%;
width: 70%;
}
#start_screen section.vertical div.start_screen_right {
width: auto;
@ -890,44 +885,89 @@
#start-files li:hover {
color: var(--color-light);
}
#start_screen section#start-files div.start_screen_left {
width: 38%;
padding: 20px 24px 0px 24px;
#start_files div.start_screen_left {
width: 30%;
padding: 20px 0 0px 0;
position: relative;
display: flex;
flex-direction: column;
background-color: var(--color-back);
}
#start-files div.start_screen_right {
border-left: 1px solid var(--color-border);
#start_files div.start_screen_right {
position: relative;
min-height: 550px;
}
#start_screen div.start_screen_left > ul {
#start_files div.start_screen_left h2 {
margin-left: 24px;
}
#start_files div.start_screen_left > ul {
margin-bottom: 16px;
overflow-y: auto;
}
#start_screen div.start_screen_right i {
#start_files div.start_screen_right i {
vertical-align: sub;
}
#start-files div.start_screen_left li {
#start_files li.format_category {
margin-top: 16px;
}
#start_files li.format_category > label {
color: var(--color-subtle_text);
font-size: 18px;
margin-left: 24px;
}
#start_files li.format_entry {
padding: 4px 0;
cursor: pointer;
font-size: 18px;
padding-left: 24px;
}
#start-files div.start_screen_left span.icon_wrapper {
#start_files li.format_entry span.icon_wrapper {
height: 22px;
width: 32px;
}
#start-files div.start_screen_left li p {
font-size: 0.94em;
line-height: normal;
color: var(--color-subtle_text);
#start_files li.format_entry > * {
cursor: inherit;
}
#start-files div.start_screen_left i {
#start_files li.format_entry:hover {
color: var(--color-light);
}
#start_files li.format_entry.selected {
background-color: var(--color-accent);
color: var(--color-accent_text);
}
#start_files li.format_entry.selected::after {
float: right;
content: "\f105";
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-right: 10px;
}
#start_files div.start_screen_left i {
font-size: 18pt;
height: 22px;
margin: 2px 8px 0px 0;
display: inline-block;
}
.format_target {
padding: 10px 0;
}
.format_target span {
padding: 2px 4px;
margin: 0 2px;
background-color: var(--color-button);
border-radius: 5px;
}
#start_files .button_bar {
text-align: right;
padding-right: 14px;
}
#start_files .format_setup_close_button {
margin-top: 9px;
margin-left: -2px;
cursor: pointer;
width: 28px;
}
section#keymap_preference {
display: block !important;

1
index.html
View File

@ -137,6 +137,7 @@
<script src="js/io/format.js"></script>
<script src="js/io/project.js"></script>
<script src="js/io/io.js"></script>
<script src="js/io/formats/generic.js"></script>
<script src="js/io/formats/bbmodel.js"></script>
<script src="js/io/formats/java_block.js"></script>
<script src="js/io/formats/bedrock.js"></script>

107
js/interface/start_screen.js
View File

@ -1,4 +1,6 @@
const StartScreen = {};
const StartScreen = {
loaders: {}
};
function addStartScreenSection(id, data) {
if (typeof id == 'object') {
@ -131,12 +133,15 @@ onVueSetup(function() {
el: '#start_screen',
data: {
formats: Formats,
loaders: StartScreen.loaders,
selected_format: '',
recent: isApp ? recent_projects : [],
list_type: StateMemory.start_screen_list_type || 'grid',
redact_names: settings.streamer_mode.value,
redacted: tl('generic.redacted'),
search_term: '',
isApp,
mobile_layout: Blockbench.isMobile,
getIconNode: Blockbench.getIconNode
},
methods: {
@ -172,6 +177,35 @@ onVueSetup(function() {
StateMemory.start_screen_list_type = type;
StateMemory.save('start_screen_list_type')
},
getFormatCategories() {
let categories = {};
function add(key, format) {
if (!categories[format.category]) {
categories[format.category] = {
name: tl('format_category.' + format.category),
entries: []
}
}
categories[format.category].entries.push(format);
}
for (let key in this.formats) {
add(key, this.formats[key])
}
for (let key in this.loaders) {
add(key, this.loaders[key])
}
return categories;
},
loadFormat(format_entry) {
this.selected_format = format_entry.id;
if (format_entry.onSetup) format_entry.onSetup();
},
confirmSetupScreen(format_entry) {
this.selected_format = '';
if (format_entry.onStart) format_entry.onStart();
if (typeof format_entry.new == 'function') format_entry.new();
},
tl
},
computed: {
@ -189,8 +223,9 @@ onVueSetup(function() {
template: `
<div id="start_screen">
<content>
<section id="start-files">
<div class="start_screen_left">
<section id="start_files">
<div class="start_screen_left" v-if="!(selected_format && mobile_layout)">
<h2>${tl('mode.start.new')}</h2>
<div class="bar next_to_title">
<div class="tool" onclick="Blockbench.openLink('https://blockbench.net/quickstart/')">
@ -199,14 +234,49 @@ onVueSetup(function() {
</div>
</div>
<ul>
<li v-for="format in formats" v-if="format.show_on_start_screen && (!redact_names || !format.confidential)" v-on:click="format.new()">
<span class="icon_wrapper f_left" v-html="getIconNode(format.icon).outerHTML"></span>
<h3>{{ format.name }}</h3>
<p>{{ format.description }}</p>
<li v-for="(category, key) in getFormatCategories()" class="format_category" :key="key">
<label>{{ category.name }}</label>
<ul>
<li
v-for="format_entry in category.entries" :key="format_entry.id"
class="format_entry" :class="{[format_entry instanceof ModelFormat ? 'format' : 'loader']: true, selected: format_entry.id == selected_format}"
:title="format_entry.description"
v-if="format_entry.show_on_start_screen && (!redact_names || !format_entry.confidential)"
@click="loadFormat(format_entry)"
@dblclick="confirmSetupScreen(format_entry)"
>
<span class="icon_wrapper f_left" v-html="getIconNode(format_entry.icon).outerHTML"></span>
<label>{{ format_entry.name }}</label>
</li>
</ul>
</li>
</ul>
</div>
<div class="start_screen_right">
<div class="start_screen_right start_screen_format_setup" v-if="viewed_format = (selected_format && (formats[selected_format] || loaders[selected_format]) )">
<div class="tool format_setup_close_button" @click="selected_format = ''"><i class="material-icons">arrow_back_ios</i></div>
<h2 style="margin-bottom: 12px;">{{ viewed_format.name }}</h2>
<p class="format_description" v-if="viewed_format.description">{{ viewed_format.description }}</p>
<div v-if="viewed_format.about" class="about format_about" v-html="marked(viewed_format.about.replace(/\\n/g, '\\n\\n'))"><button></button></div>
<img src="assets/start_screen/generic.png" height="225px" />
<p class="format_target" v-if="viewed_format.target">
<b>${tl('mode.start.target')}</b>:
<template v-if="viewed_format.target instanceof Array">
<span v-for="target in viewed_format.target">{{ target }}</span>
</template>
<span v-else>{{ viewed_format.target }}</span>
</p>
<div class="button_bar">
<button style="margin-top: 20px;" @click="confirmSetupScreen(viewed_format)">${tl('mode.start.start')}</button>
</div>
</div>
<div class="start_screen_right" v-else>
<h2 class="tl">${tl('mode.start.recent')}</h2>
<div id="start_screen_view_menu" v-if="isApp && !redact_names">
<search-bar :hide="true" v-model="search_term"></search-bar>
@ -233,8 +303,11 @@ onVueSetup(function() {
<span class="icon_wrapper" v-html="getIconNode(project.icon).outerHTML"></span>
</li>
</ul>
<button style="margin-top: 20px;" onclick="BarItems.open_model.trigger()">${tl('action.open_model')}</button>
<div class="button_bar">
<button style="margin-top: 20px;" onclick="BarItems.open_model.trigger()">${tl('action.open_model')}</button>
</div>
</div>
</section>
</content>
</div>
@ -242,6 +315,22 @@ onVueSetup(function() {
})
});
StartScreen.addLoader = function(id, options) {
let loader = {
id,
name: tl(options.name),
description: options.description ? tl(options.description) : '',
icon: options.icon || 'arrow_forward',
category: options.category || 'loaders',
target: options.category || 'loaders',
show_on_start_screen: true,
confidential: options.confidential || false,
condition: options.condition,
onSetup: options.onSetup,
onStart: options.onStart,
};
Vue.set(StartScreen.vue.loaders, id, loader);
};
(function() {
/*$.getJSON('./content/news.json').then(data => {

16
js/io/format.js
View File

@ -8,6 +8,8 @@ class ModelFormat {
this.id = data.id;
this.name = data.name || tl('format.'+this.id);
this.description = data.description || tl('format.'+this.id+'.desc');
this.category = data.category || 'other';
this.target = data.target;
this.show_on_start_screen = true;
this.confidential = false;
@ -221,17 +223,3 @@ new Property(ModelFormat, 'boolean', 'pose_mode');
new Property(ModelFormat, 'boolean', 'display_mode');
new Property(ModelFormat, 'boolean', 'animation_mode');
new Property(ModelFormat, 'boolean', 'texture_folder');
new ModelFormat({
id: 'free',
icon: 'icon-format_free',
meshes: true,
rotate_cubes: true,
bone_rig: true,
centered_grid: true,
optional_box_uv: true,
uv_rotation: true,
animation_mode: true,
animated_textures: true,
locators: true,
})

2
js/io/formats/bedrock.js
View File

@ -1059,6 +1059,8 @@ var format = new ModelFormat({
id: 'bedrock',
extension: 'json',
icon: 'icon-format_bedrock',
category: 'minecraft',
target: 'Minecraft: Bedrock Edition',
rotate_cubes: true,
box_uv: true,
optional_box_uv: true,

1
js/io/formats/bedrock_old.js
View File

@ -490,6 +490,7 @@ var format = new ModelFormat({
id: 'bedrock_old',
extension: 'json',
icon: 'icon-format_bedrock_legacy',
category: 'minecraft',
show_on_start_screen: false,
box_uv: true,
single_texture: true,

16
js/io/formats/generic.js Normal file
View File

@ -0,0 +1,16 @@
new ModelFormat({
id: 'free',
icon: 'icon-format_free',
category: 'low_poly',
target: ['Blender', 'Unity', 'Unreal Engine', 'Sketchfab'],
meshes: true,
rotate_cubes: true,
bone_rig: true,
centered_grid: true,
optional_box_uv: true,
uv_rotation: true,
animation_mode: true,
animated_textures: true,
locators: true,
})

2
js/io/formats/java_block.js
View File

@ -454,6 +454,8 @@ var format = new ModelFormat({
id: 'java_block',
extension: 'json',
icon: 'icon-format_block',
category: 'minecraft',
target: 'Minecraft: Java Edition',
rotate_cubes: true,
canvas_limit: true,
rotation_limit: true,

2
js/io/formats/modded_entity.js
View File

@ -876,6 +876,8 @@ Object.defineProperty(codec, 'remember', {
var format = new ModelFormat({
id: 'modded_entity',
icon: 'icon-format_java',
category: 'minecraft',
target: 'Minecraft: Java Edition',
codec,
box_uv: true,
single_texture: true,

2
js/io/formats/optifine_jem.js
View File

@ -288,6 +288,8 @@ var format = new ModelFormat({
id: 'optifine_entity',
extension: 'jem',
icon: 'icon-format_optifine',
category: 'minecraft',
target: 'Minecraft: Java Edition with OptiFine',
box_uv: true,
optional_box_uv: true,
single_texture: true,

1
js/io/formats/optifine_jpm.js
View File

@ -218,6 +218,7 @@ var part_format = new ModelFormat({
id: 'optifine_part',
extension: 'jpm',
icon: 'icon-format_optifine',
category: 'minecraft',
show_on_start_screen: false,
single_texture: true,
integer_size: true,

2
js/io/formats/skin.js
View File

@ -157,6 +157,8 @@ codec.export = null;
const format = new ModelFormat({
id: 'skin',
icon: 'icon-player',
category: 'minecraft',
target: ['Minecraft: Java Edition', 'Minecraft: Bedrock Edition'],
bone_rig: true,
box_uv: true,
centered_grid: true,

2
js/webpack/bundle.js
View File

File diff suppressed because one or more lines are too long

7
lang/en.json
View File

@ -85,6 +85,8 @@
"mode.start.new": "New",
"mode.start.recent": "Recent",
"mode.start.no_recents": "No recently opened models",
"mode.start.target": "Target",
"mode.start.start": "Start",
"mode.start.quick_setup": "Quick Setup",
"mode.start.keymap_preference.desc": "If you are new to Blockbench and you are coming from another 3D program, you can select a keymap to make your transition easier. You can change the keymap or individual keybindings later in the settings.",
"mode.start.keymap": "Keymap",
@ -110,6 +112,11 @@
"format.optifine_part": "OptiFine Part",
"format.optifine_part.desc": "JPM part for OptiFine entity models",
"format_category.low_poly": "Low-Poly",
"format_category.minecraft": "Minecraft",
"format_category.other": "Other",
"format_category.loaders": "Loaders",
"keys.mouse": "Mouse Button %0",
"keys.ctrl": "Ctrl",
"keys.shift": "Shift",