mirror of
https://github.com/JannisX11/blockbench.git
synced 2024-11-21 01:13:37 +08:00
Add toast notification API
Use toast notification for background positioning, closes #674
This commit is contained in:
JannisX11
parent
59d9e78c6f
commit
8f6cae31f1
@ -228,25 +228,6 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#center_tip {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
min-width: 200px;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
width: max-content;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
#center_tip i {
|
||||
vertical-align: text-bottom;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.annotation {
|
||||
min-width: 40px;
|
||||
max-width: 100%;
|
||||
|
||||
@ -161,6 +161,39 @@
|
||||
opacity: 0.2;
|
||||
}*/
|
||||
|
||||
/* Toast Notification */
|
||||
#toast_notification_list {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 8;
|
||||
}
|
||||
.toast_notification {
|
||||
position: relative;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
min-height: 30px;
|
||||
margin: 2px;
|
||||
padding: 3px 28px 3px 10px;
|
||||
width: calc(100% - 4px);
|
||||
box-shadow: 0.4px 0.4px 4px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.toast_notification .icon {
|
||||
float: left;
|
||||
}
|
||||
.toast_close_button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toast_close_button:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
|
||||
/*Head Bars*/
|
||||
|
||||
@ -704,6 +704,8 @@
|
||||
|
||||
</div>
|
||||
<div id="center">
|
||||
<ul id="toast_notification_list">
|
||||
</ul>
|
||||
<div id="preview" class="center_window">
|
||||
</div>
|
||||
<div id="timeline" class="center_window">
|
||||
|
||||
68
js/api.js
68
js/api.js
@ -119,17 +119,63 @@ const Blockbench = {
|
||||
}, 1)
|
||||
}, time ? time : 1000)
|
||||
},
|
||||
showCenterTip(message, time) {
|
||||
$('#center_tip').remove()
|
||||
var center_tip = $(`<div id="center_tip"><i class="material-icons">info</i>${tl(message)}</div>`)
|
||||
$('#preview').append(center_tip)
|
||||
|
||||
setTimeout(function() {
|
||||
center_tip.fadeOut(0)
|
||||
setTimeout(function() {
|
||||
center_tip.remove()
|
||||
}, 1)
|
||||
}, time ? time : 7500)
|
||||
/**
|
||||
*
|
||||
* @param {object} options Options
|
||||
* @param {string} options.text Text Message
|
||||
* @param {string} [options.icon] Blockbench icon string
|
||||
* @param {number} [options.expire] Expire time in miliseconds
|
||||
* @param {string} [options.color] Background color, accepts any CSS color string
|
||||
* @param {function click(event)} [options.click] Method to run on click. Return `true` to close toast
|
||||
*
|
||||
*/
|
||||
showToastNotification(options) {
|
||||
let notification = document.createElement('li');
|
||||
notification.className = 'toast_notification';
|
||||
if (options.icon) {
|
||||
let icon = Blockbench.getIconNode(options.icon);
|
||||
notification.append(icon);
|
||||
}
|
||||
let text = document.createElement('span');
|
||||
text.innerText = tl(options.text);
|
||||
notification.append(text);
|
||||
|
||||
let close_button = document.createElement('div');
|
||||
close_button.innerHTML = '<i class="material-icons">clear</i>';
|
||||
close_button.className = 'toast_close_button';
|
||||
close_button.addEventListener('click', (event) => {
|
||||
notification.remove();
|
||||
})
|
||||
notification.append(close_button);
|
||||
|
||||
if (options.color) {
|
||||
notification.style.backgroundColor = options.color;
|
||||
}
|
||||
if (typeof options.click == 'function') {
|
||||
notification.addEventListener('click', (event) => {
|
||||
if (event.target == close_button || event.target.parentElement == close_button) return;
|
||||
let result = options.click(event);
|
||||
if (result == true) {
|
||||
notification.remove();
|
||||
}
|
||||
})
|
||||
notification.style.cursor = 'pointer';
|
||||
}
|
||||
|
||||
if (options.expire) {
|
||||
setTimeout(() => {
|
||||
notification.remove();
|
||||
}, options.expire);
|
||||
}
|
||||
|
||||
document.getElementById('toast_notification_list').append(notification);
|
||||
|
||||
function deletableToast(node) {
|
||||
this.delete = function() {
|
||||
node.remove();
|
||||
}
|
||||
}
|
||||
return new deletableToast(notification);
|
||||
},
|
||||
showStatusMessage(message, time) {
|
||||
Blockbench.setStatusBarText(tl(message))
|
||||
|
||||
@ -192,7 +192,6 @@ const Settings = {
|
||||
|
||||
//Dialogs
|
||||
new Setting('dialog_larger_cubes', {category: 'dialogs', value: true});
|
||||
new Setting('dialog_drag_background', {category: 'dialogs', value: true});
|
||||
new Setting('dialog_rotation_limit', {category: 'dialogs', value: true});
|
||||
|
||||
//Application
|
||||
|
||||
@ -785,8 +785,8 @@ class Preview {
|
||||
if (event.shiftKey) {
|
||||
this.background.size = limitNumber( this.background.before.size + (event.offsetY - this.selection.start_y), 0, 10e3)
|
||||
} else {
|
||||
this.background.x = this.background.before.x + (event.offsetX - this.selection.start_x)/this.camOrtho.zoom
|
||||
this.background.y = this.background.before.y + (event.offsetY - this.selection.start_y)/this.camOrtho.zoom
|
||||
this.background.x = this.background.before.x + (event.offsetX - this.selection.start_x);
|
||||
this.background.y = this.background.before.y + (event.offsetY - this.selection.start_y);
|
||||
}
|
||||
this.updateBackground()
|
||||
return;
|
||||
@ -954,20 +954,14 @@ class Preview {
|
||||
this.controls.enabled_before = this.controls.enabled
|
||||
this.controls.enabled = false
|
||||
|
||||
if (settings.dialog_drag_background.value) {
|
||||
Blockbench.showMessageBox({
|
||||
translateKey: 'drag_background',
|
||||
icon: 'open_with',
|
||||
buttons: ['dialog.ok', 'dialog.dontshowagain'],
|
||||
confirm: 0,
|
||||
cancel: 0,
|
||||
}, function(r) {
|
||||
if (r === 1) {
|
||||
settings.dialog_drag_background.value = false
|
||||
Settings.save()
|
||||
}
|
||||
})
|
||||
}
|
||||
Blockbench.showToastNotification({
|
||||
text: 'message.drag_background',
|
||||
icon: 'open_with',
|
||||
click: () => {
|
||||
this.stopMovingBackground();
|
||||
return true;
|
||||
}
|
||||
})
|
||||
}
|
||||
stopMovingBackground() {
|
||||
this.movingBackground = false;
|
||||
|
||||
@ -1508,7 +1508,10 @@
|
||||
if (scope.hasChanged && Blockbench.startup_count <= 1 && !Blockbench.hasFlag('size_modifier_message')) {
|
||||
Blockbench.addFlag('size_modifier_message');
|
||||
setTimeout(() => {
|
||||
Blockbench.showCenterTip('message.size_modifiers', 8000);
|
||||
Blockbench.showToastNotification({
|
||||
text: 'message.size_modifiers',
|
||||
expire: 10000
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -155,9 +155,7 @@
|
||||
"message.child_model_only.title": "Empty Child Model",
|
||||
"message.child_model_only.message": "This file is a child of %0 and does not contain a model.",
|
||||
|
||||
"message.drag_background.title": "Position Background",
|
||||
"message.drag_background.message": "Drag the background to move its position. Hold shift and drag up and down to change its size.",
|
||||
"message.set_background_position.title": "Background Position",
|
||||
"message.drag_background": "Drag the background to move its position. Hold shift and drag up and down to change its size. Click here to save the position.",
|
||||
|
||||
"message.unsaved_textures.title": "Unsaved Textures",
|
||||
"message.unsaved_textures.message": "Your model has unsaved textures. Make sure to save them and paste them into your resource pack in the correct folder.",
|
||||
@ -587,8 +585,6 @@
|
||||
|
||||
"settings.dialog_larger_cubes": "Model Too Large",
|
||||
"settings.dialog_larger_cubes.desc": "Show \"Model Too Large\" dialog",
|
||||
"settings.dialog_drag_background": "Position Background",
|
||||
"settings.dialog_drag_background.desc": "Show \"Position Background\" dialog",
|
||||
"settings.dialog_rotation_limit": "Rotation Limits",
|
||||
"settings.dialog_rotation_limit.desc": "Show \"Rotation Limits\" dialog",
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user