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

Use custom bb-select elements in interface

Browse Source 
Add onBuild hook to dialogs
Enable animated textures in generic format
This commit is contained in:
JannisX11 2022-05-14 20:37:35 +02:00
parent 7c39a65efa
commit d6a4d4e238
9 changed files with 148 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/panels.css
View File

@ -1384,6 +1384,22 @@
color: var(--color-light);
cursor: pointer;
}
#uv_scale_handle {
width: 20px;
height: 20px;
position: absolute;
text-align: center;
cursor: nw-resize;
z-index: 1;
background-color: var(--color-back);
}
#uv_scale_handle:hover {
color: var(--color-light);
}
#uv_scale_handle i {
transform: scaleY(-1);
font-size: 18px;
}
.cube_box_uv {
position: absolute;

2
css/window.css
View File

@ -983,7 +983,7 @@
min-width: 120px;
display: inline-block;
}
section#quick_setup > div select {
section#quick_setup > div bb-select {
flex-grow: 1;
}
section#quick_setup > div > p {

1
index.html
View File

@ -87,6 +87,7 @@
<script src="js/modes.js"></script>
<script src="js/api.js"></script>
<script src="js/file_system.js"></script>
<script src="js/interface/vue_components.js"></script>
<script src="js/interface/panels.js"></script>
<script src="js/interface/interface.js"></script>
<script src="js/interface/start_screen.js"></script>

80
js/interface/dialog.js
View File

@ -1,34 +1,5 @@
(function() {
Vue.component('search-bar', {
props: {
value: String,
hide: Boolean
},
data() {return {
hidden: this.hide
}},
methods: {
change(text) {
this.$emit('input', text)
},
clickIcon() {
if (this.hide && !this.value) {
this.hidden = false;
this.$refs.input.focus();
} else {
this.value = '';
this.$emit('input', '');
}
}
},
template: `
<div class="search_bar" :class="{folded: (!value && hidden)}">
<input type="text" ref="input" class="dark_bordered" :value="value" @focusout="hidden = hide;" @input="change($event.target.value)">
<i class="material-icons" :class="{light_on_hover: !!value}" @click="clickIcon()">{{ value ? 'clear' : 'search' }}</i>
</div>`
})
function buildForm(dialog) {
let dialog_content = $(dialog.object).find('.dialog_content')
for (var form_id in dialog.form) {
@ -104,16 +75,43 @@ function buildForm(dialog) {
case 'select':
var el = $(`<div class="bar_select half"><select class="focusable_input" id="${form_id}"></select></div>`)
input_element = el.find('select')
for (var key in data.options) {
var name = tl(data.options[key])
input_element.append(`<option id="${key}" ${(data.value === key || (data.default || data.value) === key) ? 'selected' : ''}>${name}</option>`)
function getNameFor(key) {
let val = data.options[key];
if (val) {
return tl(val.name || val);
} else {
return '';
}
}
bar.append(el)
input_element.on('change', () => {
dialog.updateFormValues()
let value = data.value || data.default || Object.keys(data.options)[0];
let select = Interface.createElement('bb-select', {id: form_id, class: 'half', value: value}, getNameFor(value));
function setKey(key) {
value = key;
select.setAttribute('value', key);
select.textContent = getNameFor(key);
dialog.updateFormValues();
}
select.addEventListener('click', function(event) {
if (Menu.closed_in_this_click == form_id) return this;
let items = [];
for (let key in data.options) {
let val = data.options[key];
if (val) {
items.push({
name: getNameFor(key),
icon: val.icon || ((value == key) ? 'far.fa-dot-circle' : 'far.fa-circle'),
condition: val.condition,
click: (e) => {
setKey(key);
}
})
}
}
let menu = new Menu(form_id, items);
menu.node.style['min-width'] = select.clientWidth+'px';
menu.open(select);
})
bar.append(select)
break;
@ -446,6 +444,7 @@ window.Dialog = class Dialog {
this.onButton = options.onButton;
this.onFormChange = options.onFormChange;
this.onOpen = options.onOpen;
this.onBuild = options.onBuild;
this.object;
}
@ -530,7 +529,7 @@ window.Dialog = class Dialog {
result[form_id] = data.bar.find('textarea#'+form_id).val()
break;
case 'select':
result[form_id] = data.bar.find('select#'+form_id+' > option:selected').attr('id')
result[form_id] = data.bar.find('bb-select#'+form_id).attr('value');
break;
case 'radio':
result[form_id] = data.bar.find('.form_part_radio#'+form_id+' input:checked').attr('id')
@ -677,6 +676,11 @@ window.Dialog = class Dialog {
})
jq_dialog.css('position', 'absolute')
}
if (typeof this.onBuild == 'function') {
this.onBuild(this.object);
}
return this;
}
show() {

4
js/interface/settings.js
View File

@ -631,9 +631,7 @@ onVueSetup(function() {
<template v-else-if="setting.type === 'select'">
<div class="bar_select">
<select v-model="setting.value">
<option v-for="(text, id) in setting.options" v-bind:value="id">{{ text }}</option>
</select>
<select-input v-model="setting.value" :options="setting.options" />
</div>
</template>
</li>

19
js/interface/start_screen.js
View File

@ -334,6 +334,13 @@ onVueSetup(function() {
keymap: 'default',
keymap_changed: false,
theme: 'dark',
keymap_options: {
default: tl('action.load_keymap.default'),
mouse: tl('action.load_keymap.mouse'),
blender: 'Blender',
cinema4d: 'Cinema 4D',
maya: 'Maya',
},
}},
methods: {
tl,
@ -379,20 +386,12 @@ onVueSetup(function() {
<div>
<label>${tl('mode.start.keymap')}:</label>
<select v-model="keymap">
<option value="default">${tl('action.load_keymap.default')}</option>
<option value="mouse">${tl('action.load_keymap.mouse')}</option>
<option value="blender">Blender</option>
<option value="cinema4d">Cinema 4D</option>
<option value="maya">Maya</option>
</select>
<select-input v-model="keymap" :options="keymap_options" />
<p v-if="keymap_changed">{{ tl('action.load_keymap.' + keymap + '.desc') }}</p>
</div>
<div>
<label>${tl('settings.language')}:</label>
<select v-model="language">
<option v-for="(text, id) in languages" v-bind:value="id">{{ text }}</option>
</select>
<select-input v-model="language" :options="languages" />
<div class="tool" @click="reload()" v-if="language != language_original" :title="tl('action.reload')">
<i class="material-icons">refresh</i>
</div>

77
js/interface/vue_components.js Normal file
View File

@ -0,0 +1,77 @@
Vue.component('search-bar', {
props: {
value: String,
hide: Boolean
},
data() {return {
hidden: this.hide
}},
methods: {
change(text) {
this.$emit('input', text)
},
clickIcon() {
if (this.hide && !this.value) {
this.hidden = false;
this.$refs.input.focus();
} else {
this.value = '';
this.$emit('input', '');
}
}
},
template: `
<div class="search_bar" :class="{folded: (!value && hidden)}">
<input type="text" ref="input" class="dark_bordered" :value="value" @focusout="hidden = hide;" @input="change($event.target.value)">
<i class="material-icons" :class="{light_on_hover: !!value}" @click="clickIcon()">{{ value ? 'clear' : 'search' }}</i>
</div>`
})
Vue.component('select-input', {
props: {
value: String,
options: Object
},
data() {return {
id: bbuid(8)
}},
methods: {
set(value) {
this.value = value;
this.$emit('input', value);
},
getNameFor(key) {
let val = this.options[key];
if (val) {
return tl(val.name || val);
} else {
return '';
}
},
open(event) {
if (Menu.closed_in_this_click == this.id) return this;
let items = [];
for (let key in this.options) {
let val = this.options[key];
if (val) {
items.push({
name: this.getNameFor(key),
icon: val.icon || ((this.value == key) ? 'far.fa-dot-circle' : 'far.fa-circle'),
condition: val.condition,
click: (e) => {
this.set(key);
}
})
}
}
let menu = new Menu(this.id, items);
menu.node.style['min-width'] = this.$el.clientWidth+'px';
menu.open(event.target, this);
}
},
template: `
<bb-select @click="open($event)">
{{ getNameFor(value) }}
</bb-select>
`
})

1
js/io/format.js
View File

@ -232,5 +232,6 @@ new ModelFormat({
optional_box_uv: true,
uv_rotation: true,
animation_mode: true,
animated_textures: true,
locators: true,
})

1
js/io/project.js
View File

@ -861,7 +861,6 @@ BARS.defineActions(function() {
format: {
label: 'data.format',
type: 'select',
default: Format.id,
options,
},
},