diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css
index 05eb512..a8d0dd9 100755
--- a/app/assets/styles/app.css
+++ b/app/assets/styles/app.css
@@ -370,7 +370,7 @@ bz-select option{
bz-select option i{ margin-right:0.3em; }
bz-select option i.icon-atom1{ color:#FF4; }
bz-select option i.icon-bug{ color:#4DF; }
-
+bz-select > div.options-container.open { max-height: 20em; }
bz-toggler div.toggle-switch span.toggle-bar { background-color: #473; }
bz-toggler div.toggle-switch span.toggle-thumb { background-color:#9D8; }
diff --git a/app/controllers/editors/EditorsController.js b/app/controllers/editors/EditorsController.js
index f83a309..8f2a7b9 100644
--- a/app/controllers/editors/EditorsController.js
+++ b/app/controllers/editors/EditorsController.js
@@ -18,7 +18,7 @@ class EditorsController extends WindozController {
this.loadWindow(
'editors/KeyframeView',
{
- title: ' Keyframe edito 3D view',
+ title: ' Keyframe editor',
static: true,
expanded: false,
withSettings: true,
diff --git a/app/thirdparty/buildoz/buildoz.css b/app/thirdparty/buildoz/buildoz.css
index 8c7d205..9297fe6 100644
--- a/app/thirdparty/buildoz/buildoz.css
+++ b/app/thirdparty/buildoz/buildoz.css
@@ -30,12 +30,17 @@ bz-select > button::after {
color: #444;
}
bz-select > div.options-container{
+ pointer-events: none;
position: absolute;
- top: 100%;
+ top: 2em;
left: 0;
width: 100%;
z-index: 99;
+ max-height: 0;
+ overflow: auto;
+ transition: max-height 0.4s ease;
}
+bz-select > div.options-container.open{ pointer-events: auto; max-height: 10em;}
bz-select option{
background-color: #DDD;
border: 1px solid black;
diff --git a/app/thirdparty/buildoz/buildoz.js b/app/thirdparty/buildoz/buildoz.js
index 279806e..378eafc 100644
--- a/app/thirdparty/buildoz/buildoz.js
+++ b/app/thirdparty/buildoz/buildoz.js
@@ -47,6 +47,7 @@ class BZselect extends Buildoz {
this.value = null
this.open = false
this.value = null
+ this.generalClickEvent = null
this.defaultAttrs = {
label: 'Select...',
}
@@ -64,11 +65,13 @@ class BZselect extends Buildoz {
this.options = this.querySelectorAll('option')
if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
for(const opt of this.options){
+ this.optionscontainer.append(opt) // Will move is to the right parent
opt.addEventListener('click', this.onClick.bind(this))
if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
}
this.#fillFromMarkup = false
}
+
}
// static get observedAttributes(){ // Only if you want actions on attr change
@@ -97,13 +100,22 @@ class BZselect extends Buildoz {
toggle(){
for(const opt of this.options){
- if(this.open) opt.classList.remove('open')
- else opt.classList.add('open')
+ if(this.open) {
+ opt.classList.remove('open')
+ this.optionscontainer.classList.remove('open')
+ } else {
+ document.querySelectorAll('bz-select').forEach((sel) => {
+ if((sel!==this) && sel.open) sel.toggle()
+ })
+ opt.classList.add('open')
+ this.optionscontainer.classList.add('open')
+ }
}
this.open = !this.open
}
onClick(evt){
+ evt.stopPropagation()
const opt = evt.target.closest('option')
if(opt && opt.value) this.onOption(opt.value)
}
diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html
index aebf3d4..00566ab 100644
--- a/app/views/editors/KeyframeView.html
+++ b/app/views/editors/KeyframeView.html
@@ -11,7 +11,7 @@
.kf-editor > article, .kf-editor > article header{ border-color: #473; }
.kf-editor article.agent-preview header { padding:0; }
.kf-editor article.agent-preview canvas{ width:100%; aspect-ratio: 1 / 1;}
- .kf-editor article.agent-preview section{
+ .kf-editor article.agent-preview section, .kf-editor article.agent-properties section{
display: grid;
grid-template-rows: auto 2em;
height: 100%;
@@ -33,17 +33,8 @@
-
Something in the way
-
-
-
-
-
-
-
-
-
+
@@ -51,9 +42,15 @@
Arena
-
+
-
+