mirror/blockbench
2
0
Fork 0
mirror of https://github.com/JannisX11/blockbench.git synced 2025-01-30 15:42:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve numeric inputs

Browse Source 
Update preview size when resizing window with background rendering off
Improve search bar mobile input
This commit is contained in:
JannisX11 2023-02-18 10:18:50 +01:00
parent c6b88fd102
commit 236a26158f
4 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/interface/action_control.js
View File

@ -394,7 +394,7 @@ BARS.defineActions(function() {
<div class="tool" ref="search_type_menu" @click="openTypeMenu($event)">
<div class="icon_wrapper normal" v-html="getIconNode(search_types[search_type] ? search_types[search_type].icon : 'fullscreen').outerHTML"></div>
</div>
<input type="text" v-model="search_input" @input="e => search_input = e.target.value" autocomplete="off" autosave="off" autocorrect="off" spellcheck="false" autocapitalize="off">
<input type="text" v-model="search_input" inputmode="search" @input="e => search_input = e.target.value" autocomplete="off" autosave="off" autocorrect="off" spellcheck="false" autocapitalize="off">
<i class="material-icons" id="action_search_bar_icon" @click="search_input = ''">{{ search_input ? 'clear' : 'search' }}</i>
<div v-if="search_type" class="action_selector_type_overlay">{{ search_type }}:</div>
<div id="action_selector_list">

11
js/interface/interface.js
View File

@ -516,6 +516,9 @@ function resizeWindow(event) {
Preview.all.forEach(function(prev) {
if (prev.canvas.isConnected) {
prev.resize()
if (!settings.background_rendering.value && !document.hasFocus() && !document.querySelector('#preview:hover')) {
prev.render();
}
}
})
Outliner.elements.forEach(element => {
@ -685,7 +688,7 @@ Interface.CustomElements.SelectInput = function(id, data) {
this.set = setKey;
}
Interface.CustomElements.NumericInput = function(id, data) {
let input = Interface.createElement('input', {id, class: 'dark_bordered focusable_input', value: data.value || 0, inputmode: 'numeric'});
let input = Interface.createElement('input', {id, class: 'dark_bordered focusable_input', value: data.value || 0, inputmode: 'decimal'});
let slider = Interface.createElement('div', {class: 'tool numeric_input_slider'}, Blockbench.getIconNode('code'));
this.node = Interface.createElement('div', {class: 'numeric_input'}, [
input, slider
@ -696,7 +699,7 @@ Interface.CustomElements.NumericInput = function(id, data) {
let move = e2 => {
let difference = Math.trunc((e2.clientX - e1.clientX) / 10) * (data.step || 1);
if (difference != last_difference) {
input.value = (parseFloat(input.value) || 0) + (difference - last_difference);
input.value = Math.clamp((parseFloat(input.value) || 0) + (difference - last_difference), data.min, data.max);
if (data.onChange) data.onChange(NumSlider.MolangParser.parse(input.value), event);
last_difference = difference;
}
@ -710,10 +713,10 @@ Interface.CustomElements.NumericInput = function(id, data) {
})
addEventListeners(input, 'focusout dblclick', () => {
input.value = NumSlider.MolangParser.parse(input.value);
input.value = Math.clamp(NumSlider.MolangParser.parse(input.value), data.min, data.max);
})
input.addEventListener('input', (event) => {
if (data.onChange) data.onChange(NumSlider.MolangParser.parse(input.value), event);
if (data.onChange) data.onChange(Math.clamp(NumSlider.MolangParser.parse(input.value), data.min, data.max), event);
})
}

2
js/interface/menu.js
View File

@ -200,7 +200,7 @@ class Menu {
function populateList(list, menu_node, searchable) {
if (searchable) {
let input = Interface.createElement('input', {type: 'text', placeholder: tl('generic.search')});
let input = Interface.createElement('input', {type: 'text', placeholder: tl('generic.search'), inputmode: 'search'});
let search_button = Interface.createElement('div', {}, Blockbench.getIconNode('search'));
let search_bar = Interface.createElement('li', {class: 'menu_search_bar'}, [input, search_button]);
menu_node.append(search_bar);

2
js/interface/vue_components.js
View File

@ -22,7 +22,7 @@ Vue.component('search-bar', {
},
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)">
<input type="text" inputmode="search" 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>`
})