diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css index 4e2103a..05eb512 100755 --- a/app/assets/styles/app.css +++ b/app/assets/styles/app.css @@ -367,9 +367,9 @@ bz-select option{ background-color: #676; color: #EEE; } -bz-select option:hover{ - background-color: #493; -} +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-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/thirdparty/buildoz/buildoz.css b/app/thirdparty/buildoz/buildoz.css index d544e74..8c7d205 100644 --- a/app/thirdparty/buildoz/buildoz.css +++ b/app/thirdparty/buildoz/buildoz.css @@ -29,9 +29,16 @@ bz-select > button::after { font-size: 1.5em; color: #444; } - +bz-select > div.options-container{ + position: absolute; + top: 100%; + left: 0; + width: 100%; + z-index: 99; +} bz-select option{ background-color: #DDD; + border: 1px solid black; color: #000; padding: 0.2em .2em .3em .5em; margin: -1em 0 0 0; @@ -46,7 +53,7 @@ bz-select option{ opacity 0.3s ease; } bz-select option.open{ - margin: 2px 0 0 0; + margin: 0; opacity: 1; pointer-events: auto; } diff --git a/app/thirdparty/buildoz/buildoz.js b/app/thirdparty/buildoz/buildoz.js index a19bcf7..279806e 100644 --- a/app/thirdparty/buildoz/buildoz.js +++ b/app/thirdparty/buildoz/buildoz.js @@ -55,9 +55,12 @@ class BZselect extends Buildoz { connectedCallback() { super.connectedCallback() this.button = document.createElement('button') - this.button.textContent = this.getBZAttribute('label') + this.button.textContent = this.getBZAttribute('label') this.prepend(this.button) this.button.addEventListener('click', this.toggle.bind(this)) + if(!this.optionscontainer) this.optionscontainer = document.createElement('div') + this.optionscontainer.classList.add('options-container') + this.append(this.optionscontainer) 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){ @@ -112,18 +115,19 @@ class BZselect extends Buildoz { } addOption(value, markup){ - // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM + // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM const opt = document.createElement('option') opt.setAttribute('value', value) opt.innerHTML = markup opt.addEventListener('click',this.onClick.bind(this)) - this.append(opt) + if(!this.optionscontainer) this.optionscontainer = document.createElement('div') + this.optionscontainer.append(opt) this.options = this.querySelectorAll('option') this.#fillFromMarkup = false } fillOptions(opts, erase = true){ - // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM + // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM if(erase){ this.options = this.querySelectorAll('option') this.options.forEach(node => { node.remove() }) diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html index 7f4b711..aebf3d4 100644 --- a/app/views/editors/KeyframeView.html +++ b/app/views/editors/KeyframeView.html @@ -31,7 +31,15 @@
- +
+ +
Something in the way
+ + + + + +
@@ -40,7 +48,7 @@
- Arena + Arena
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js index 0a3f204..a2970db 100644 --- a/app/views/editors/KeyframeView.js +++ b/app/views/editors/KeyframeView.js @@ -32,7 +32,7 @@ class KeyframeView extends WindozDomContent { this.outputs.agentsSelector.fillOptions( this.agentTypes.map(item => { - return({ markup: `${item.atp_name}`, value: item.atp_id}) + return({ markup: `${item.atp_name}`, value: item.atp_id}) })) this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))