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

Improve dialog buttons API

Browse Source
This commit is contained in:
JannisX11 2021-05-21 23:48:39 +02:00
parent 80ca0f2121
commit 2800c2fa48
8 changed files with 68 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/dialogs.css
View File

@ -110,6 +110,9 @@
margin-top: 16px;
margin: 16px 4px 0 4px;
}
.dialog_bar button.confirm_btn:not(:hover) {
background-color: var(--color-selected);
}
.dialog_bar input[type=checkbox] {
padding: 0 4px;
}

2
css/setup.css
View File

@ -306,7 +306,7 @@
--color-ui: #282c34;
--color-accent: #3e90ff;
--color-button: #3a3f4b;
--color-selected: #3c4456;
--color-selected: #474d5d;
--color-text: #cacad4;
--color-light: #f4f3ff;
--color-accent_text: #000006;

20
index.html
View File

@ -159,7 +159,7 @@
<button type="button" class="edit_session_active tl" onclick="EditSession.quit();">edit_session.quit</button>
<button type="button" class="cancel_btn tl" onclick="hideDialog();">dialog.cancel</button>
</div>
<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
<div class="dialog_close_button" onclick="hideDialog();"><i class="material-icons">clear</i></div>
</dialog>
<dialog class="dialog draggable paddinged" id="toolbar_edit">
@ -192,7 +192,7 @@
<div class="dialog_bar button_bar">
<button type="button" class="cancel_btn confirm_btn uc_btn tl" onclick="hideDialog();">dialog.close</button>
</div>
<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
<div class="dialog_close_button" onclick="hideDialog();"><i class="material-icons">clear</i></div>
</dialog>
<dialog class="dialog draggable paddinged" id="entity_import">
@ -215,7 +215,7 @@
<button type="button" class="tl confirm_btn" onclick="">dialog.import</button>
<button type="button" class="cancel_btn tl" onclick="hideDialog();BarItems.close_project.click()">dialog.cancel</button>
</div>
<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
<div class="dialog_close_button" onclick="hideDialog();BarItems.close_project.click()"><i class="material-icons">clear</i></div>
</dialog>
<dialog class="dialog draggable paddinged" id="image_extruder">
@ -246,7 +246,7 @@
<button type="button" class="confirm_btn tl" onclick="Extruder.startConversion()">Scan and Import</button>
<button type="button" class="cancel_btn tl" onclick="hideDialog()">dialog.cancel</button>
</div>
<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
</dialog>
<dialog class="dialog draggable paddinged" id="scaling">
@ -294,7 +294,7 @@
<button type="button" class="cancel_btn tl" onclick="cancelScaleAll()">dialog.cancel</button>
<button type="button" class="minor hidden tl" id="scale_overflow_btn" onclick="scaleAllSelectOverflow()">dialog.scale.select_overflow</button>
</div>
<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
<div class="dialog_close_button" onclick="cancelScaleAll()"><i class="material-icons">clear</i></div>
</dialog>
<dialog class="dialog draggable paddinged" id="create_preset">
@ -342,7 +342,7 @@
<button type="button" class="tl confirm_btn" onclick="DisplayMode.createPreset()">dialog.display_preset.create</button>
<button type="button" class="tl cancel_btn" onclick="hideDialog()">dialog.cancel</button>
</div>
<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
</dialog>
<dialog class="dialog draggable paddinged" id="settings">
@ -522,7 +522,7 @@
<div class="dialog_bar button_bar" hidden>
<button type="button" class="confirm_btn cancel_btn tl" onclick="Settings.save()">dialog.close</button>
</div>
<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
<div class="dialog_close_button" onclick="Settings.save()"><i class="material-icons">clear</i></div>
</dialog>
<dialog class="dialog draggable" id="uv_dialog">
@ -550,7 +550,7 @@
<button type="button" onclick="hideDialog()" class="confirm_btn cancel_btn hidden">dialog.close</button>
</div>
<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
</dialog>
<dialog class="dialog draggable paddinged" id="text_input">
@ -564,7 +564,7 @@
<button type="button" class="confirm_btn tl" onclick="hideDialog()">dialog.confirm</button>
<button type="button" class="cancel_btn tl" onclick="hideDialog()">dialog.cancel</button>
</div>
<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
</dialog>
<div id="dialog_wrapper"></div>
@ -589,7 +589,7 @@
<dialog id="action_selector"></dialog>
<div id="blackout" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"></div>
<div id="blackout"></div>
<div id="main_toolbar">
<div style="color: #fff; text-align: center; font-family: segoe ui, sans-serif;" id="no_css_message">

8
js/boot_loader.js
View File

@ -54,6 +54,14 @@ Wintersky.global_options.scale = 16;
Wintersky.global_options.loop_mode = 'once';
Wintersky.global_options.parent_mode = 'entity';
document.getElementById('blackout').addEventListener('click', event => {
if (open_interface instanceof Dialog) {
open_interface.cancel(event);
} else if (typeof open_interface == 'string' && open_dialog) {
$('dialog#'+open_dialog).find('.cancel_btn:not([disabled])').trigger('click');
}
})
if (isApp) {
updateRecentProjects()
}

73
js/interface/dialog.js
View File

@ -302,10 +302,10 @@ window.Dialog = class Dialog {
this.padding = options.padding != false;
this.draggable = options.draggable
this.singleButton = options.singleButton
this.buttons = options.buttons
this.buttons = options.buttons instanceof Array ? options.buttons : (options.singleButton ? ['dialog.close'] : ['dialog.confirm', 'dialog.cancel'])
this.form_first = options.form_first;
this.confirmIndex = options.confirmIndex||0;
this.cancelIndex = options.cancelIndex !== undefined ? options.cancelIndex : 1;
this.cancelIndex = options.cancelIndex !== undefined ? options.cancelIndex : this.buttons.length-1;
this.confirmEnabled = options.confirmEnabled === false ? false : true
this.cancelEnabled = options.cancelEnabled === false ? false : true
@ -316,11 +316,11 @@ window.Dialog = class Dialog {
this.object;
}
confirm() {
$(this.object).find('.confirm_btn:not([disabled])').click()
confirm(event) {
this.close(this.confirmIndex, event);
}
cancel() {
$(this.object).find('.cancel_btn:not([disabled])').click()
cancel(event) {
this.close(this.cancelIndex, event);
}
updateFormValues(initial) {
let form_result = this.getFormResult();
@ -381,8 +381,23 @@ window.Dialog = class Dialog {
}
return result;
}
close(button, event) {
if (button == this.confirmIndex && typeof this.onConfirm == 'function') {
let formResult = this.getFormResult();
let result = this.onConfirm(formResult, event);
if (result === false) return;
}
if (button == this.cancelIndex && typeof this.onCancel == 'function') {
let result = this.onCancel();
if (result === false) return;
}
if (button == this.confirmIndex && typeof this.onButton == 'function') {
let result = this.onButton(button);
if (result === false) return;
}
this.hide();
}
build() {
let scope = this;
var jq_dialog = $(`<dialog class="dialog" id="${this.id}">
<div class="dialog_handle">${tl(this.title)}</div>
<content class="dialog_content"></content>
@ -401,51 +416,35 @@ window.Dialog = class Dialog {
if (this.max_label_width) {
document.styleSheets[0].insertRule('.dialog#'+this.id+' .dialog_bar label {width: '+(this.max_label_width+8)+'px}')
}
if (this.buttons) {
if (this.buttons.length) {
var buttons = []
this.buttons.forEach((b, i) => {
var btn = $('<button type="button">'+tl(b)+'</button> ')
buttons.push(btn)
if (typeof this.onButton == 'function') {
btn.click((event) => {
this.onButton(i);
})
}
btn.on('click', (event) => {
this.close(i, event);
})
})
buttons[this.confirmIndex] && buttons[this.confirmIndex].addClass('confirm_btn')
buttons[this.cancelIndex] && buttons[this.cancelIndex].addClass('cancel_btn')
let bar = $('<div class="dialog_bar button_bar"></div>');
jq_dialog.append(bar);
buttons.forEach((button, i) => {
if (i) bar.append('&nbsp;')
bar.append(button)
})
} else if (this.singleButton) {
jq_dialog.append('<div class="dialog_bar button_bar" hidden>' +
'<button type="button" class="cancel_btn confirm_btn"'+ (this.confirmEnabled ? '' : ' disabled') +'>'+tl('dialog.close')+'</button>' +
'</div>')
} else {
jq_dialog.append(`<div class="dialog_bar button_bar">
<button type="button" class="confirm_btn${this.confirmEnabled ? '' : ' disabled'}">${tl('dialog.confirm')}</button>&nbsp;
<button type="button" class="cancel_btn${this.cancelEnabled ? '' : ' disabled'}">${tl('dialog.cancel')}</button>
</div>`)
}
jq_dialog.append('<div class="dialog_close_button" onclick="$(\'.dialog#\'+open_dialog).find(\'.cancel_btn:not([disabled])\').click()"><i class="material-icons">clear</i></div>')
var confirmFn = function(e) {
let result = scope.getFormResult();
scope.onConfirm(result, e);
}
confirmFn.bind(this)
if (this.confirmEnabled) $(this.object).find('.confirm_btn').click(confirmFn)
if (this.cancelEnabled) $(this.object).find('.cancel_btn').click(() => {this.onCancel()})
let close_button = document.createElement('div');
close_button.classList.add('dialog_close_button');
close_button.innerHTML = '<i class="material-icons">clear</i>';
jq_dialog.append(close_button);
close_button.addEventListener('click', (e) => {
this.cancel();
})
//Draggable
if (this.draggable !== false) {
jq_dialog.addClass('draggable')
@ -488,6 +487,7 @@ window.Dialog = class Dialog {
open_dialog = this.id;
open_interface = this;
Dialog.open = this;
Prop.active_panel = 'dialog';
return this;
}
@ -496,6 +496,7 @@ window.Dialog = class Dialog {
$(this.object).hide();
open_dialog = false;
open_interface = false;
Dialog.open = null;
Prop.active_panel = undefined;
$(this.object).detach()
return this;

4
js/interface/keyboard.js
View File

@ -550,10 +550,10 @@ $(document).on('keydown mousedown', function(e) {
if (open_dialog) {
if ($('textarea:focus').length === 0) {
if (Keybinds.extra.confirm.keybind.isTriggered(e)) {
$('.dialog#'+open_dialog).find('.confirm_btn:not([disabled])').click()
open_interface.confirm(e);
used = true
} else if (Keybinds.extra.cancel.keybind.isTriggered(e)) {
$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()
open_interface.cancel(e);
used = true
}
}

7
js/interface/themes.js
View File

@ -11,7 +11,7 @@ const CustomTheme = {
back: '#21252b',
dark: '#17191d',
border: '#181a1f',
selected: '#3c4456',
selected: '#474d5d',
button: '#3a3f4b',
bright_ui: '#f4f3ff',
accent: '#3e90ff',
@ -175,6 +175,11 @@ const CustomTheme = {
CustomTheme.data.colors.checkerboard = CustomTheme.defaultColors.checkerboard;
}
})
Blockbench.onUpdateTo('3.9', () => {
if (CustomTheme.data.colors.selected == '#3c4456') {
CustomTheme.data.colors.selected = CustomTheme.defaultColors.selected;
}
})
},
import(file) {
var data = JSON.parse(file.content)

1
js/plugin_loader.js
View File

@ -468,6 +468,7 @@ BARS.defineActions(function() {
Plugins.dialog = new Dialog({
id: 'plugins',
title: 'dialog.plugins.title',
singleButton: true,
component: {
data: {
tab: 'installed',