Format about pages on start screen
This commit is contained in:
JannisX11
parent
cb8b2e7fa7
commit
5764c3b0ba
BIN
assets/start_screen/generic.png
Normal file
BIN
assets/start_screen/generic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
<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 => {
|
||||
|
||||
@ -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,
|
||||
})
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
16
js/io/formats/generic.js
Normal 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,
|
||||
})
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user