diff --git a/css/dialogs.css b/css/dialogs.css
index 441cf79b..867bdba5 100644
--- a/css/dialogs.css
+++ b/css/dialogs.css
@@ -28,7 +28,9 @@
dialog {
width: 540px;
min-width: min(370px, 100%);
+ max-height: calc(100% - 40px);
height: auto;
+ flex-direction: column;
background-color: var(--color-ui);
color: inherit;
border: none;
@@ -38,6 +40,11 @@
bottom: unset;
display: none;
}
+ dialog > content {
+ display: block;
+ overflow-y: auto;
+ flex: 1 1 auto;
+ }
@media (max-device-width: 640px) {
dialog {
@@ -89,6 +96,7 @@
.dialog_bar.button_bar {
text-align: right;
margin-top: 12px;
+ flex: 0 0 auto;
}
.dialog_bar button.large {
margin-bottom: 0;
@@ -145,6 +153,7 @@
height: 30px;
margin-bottom: 20px;
font-size: 1.12em;
+ flex: 0 0 auto;
}
.dialog.paddinged .dialog_handle {
margin-top: -24px;
diff --git a/js/animations/animation.js b/js/animations/animation.js
index e8184d04..e303eccd 100644
--- a/js/animations/animation.js
+++ b/js/animations/animation.js
@@ -464,15 +464,11 @@ class Animation {
}
propertiesDialog() {
let vue;
- let vue_data = {
- anim_time_update: this.anim_time_update,
- blend_weight: this.blend_weight,
- }
let dialog = new Dialog({
id: 'animation_properties',
title: this.name,
width: 640,
- form_first: true,
+ part_order: ['form', 'component'],
form: {
name: {label: 'generic.name', value: this.name},
path: {
@@ -497,21 +493,26 @@ class Animation {
snapping: {label: 'menu.animation.snapping', type: 'number', value: this.snapping, step: 1, min: 10, max: 500},
line: '_',
},
- lines: [
- `
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
')
+ dialog_content.append('
')
} else {
var bar = $(``)
@@ -201,7 +201,7 @@ function buildForm(dialog) {
if (data.readonly) {
bar.find('input').attr('readonly', 'readonly').removeClass('focusable_input')
}
- jq_dialog.append(bar)
+ dialog_content.append(bar)
data.bar = bar;
}
}
@@ -235,19 +235,32 @@ function buildLines(dialog) {
}
})
}
+function buildComponent(dialog) {
+ let dialog_content = $(dialog.object).find('.dialog_content')
+ let mount = $(``).appendTo(dialog_content)
+ dialog.component.name = 'dialog-content'
+ dialog.content_vue = new Vue(dialog.component).$mount(mount.get(0));
+}
+
window.Dialog = class Dialog {
- constructor(options) {
+ constructor(id, options) {
+ if (typeof id == 'object') {
+ options = id;
+ id = options.id;
+ }
this.id = options.id
this.title = options.title
+
this.lines = options.lines
this.form = options.form
+ this.component = options.component
+ this.part_order = options.part_order || (options.form_first ? ['form', 'lines', 'component'] : ['lines', 'form', 'component'])
+
this.width = options.width
- this.fadeTime = options.fadeTime
this.draggable = options.draggable
this.singleButton = options.singleButton
this.buttons = options.buttons
- this.fadeTime = options.fadeTime||0;
this.form_first = options.form_first;
this.confirmIndex = options.confirmIndex||0;
this.cancelIndex = options.cancelIndex !== undefined ? options.cancelIndex : 1;
@@ -319,20 +332,21 @@ window.Dialog = class Dialog {
}
return result;
}
- show() {
+ build() {
let scope = this;
-
- var jq_dialog = $(``)
+ var jq_dialog = $(``)
this.object = jq_dialog.get(0)
this.max_label_width = 0;
- if (this.form_first) {
- if (this.form) buildForm(this);
- if (this.lines) buildLines(this);
- } else {
- if (this.lines) buildLines(this);
- if (this.form) buildForm(this);
- }
+
+ this.part_order.forEach(part => {
+ if (part == 'form' && this.form) buildForm(this);
+ if (part == 'lines' && this.lines) buildLines(this);
+ if (part == 'component' && this.component) buildComponent(this);
+ })
if (this.max_label_width) {
document.styleSheets[0].insertRule('.dialog#'+this.id+' .dialog_bar label {width: '+(this.max_label_width+8)+'px}')
@@ -393,32 +407,47 @@ window.Dialog = class Dialog {
jq_dialog.css('left', x+'px')
jq_dialog.css('position', 'absolute')
}
- $('#plugin_dialog_wrapper').append(jq_dialog)
- $('.dialog').hide(0)
- $('#blackout').fadeIn(scope.fadeTime)
- jq_dialog.fadeIn(scope.fadeTime)
- jq_dialog.css('top', limitNumber($(window).height()/2-jq_dialog.height()/2, 0, 100)+'px')
- if (this.width) {
- jq_dialog.css('width', this.width+'px')
+ return this;
+ }
+ show() {
+ if (!this.object) {
+ this.build();
}
- let first_focus = jq_dialog.find('.focusable_input').first()
- if (first_focus) first_focus.focus()
- open_dialog = scope.id
- open_interface = scope
- Prop.active_panel = 'dialog'
+ let jq_dialog = $(this.object);
+
+ $('#plugin_dialog_wrapper').append(jq_dialog);
+ $('.dialog').hide(0);
+ $('#blackout').fadeIn(0);
+ jq_dialog.show().css('display', 'flex');
+ jq_dialog.css('top', limitNumber($(window).height()/2-jq_dialog.height()/2, 0, 100)+'px');
+ if (this.width) {
+ jq_dialog.css('width', this.width+'px');
+ }
+ let first_focus = jq_dialog.find('.focusable_input').first();
+ if (first_focus) first_focus.focus();
+
+ open_dialog = this.id;
+ open_interface = this;
+ Prop.active_panel = 'dialog';
return this;
}
hide() {
- $('#blackout').fadeOut(this.fadeTime)
- $(this.object).fadeOut(this.fadeTime)
+ $('#blackout').fadeOut(0)
+ $(this.object).fadeOut(0)
.find('.tool').detach()
open_dialog = false;
open_interface = false;
Prop.active_panel = undefined
- setTimeout(() => {
- $(this.object).remove()
- }, this.fadeTime)
+ $(this.object).detach()
+ return this;
+ }
+ delete() {
+ $(this.object).remove()
+ if (this.content_vue) {
+ this.content_vue.$destroy();
+ delete this.content_vue;
+ }
}
getFormBar(form_id) {
var bar = $(this.object).find(`.form_bar_${form_id}`)
diff --git a/js/outliner/cube.js b/js/outliner/cube.js
index 35da3efa..1d5fe25a 100644
--- a/js/outliner/cube.js
+++ b/js/outliner/cube.js
@@ -816,8 +816,6 @@ class Cube extends NonGroup {
new Property(Cube, 'string', 'name', {default: 'cube'})
-
-
BARS.defineActions(function() {
new Action({
id: 'add_cube',