ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-07 11:30:28 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Overlay Improvement #2517

Browse Source
This commit is contained in:
Nikhil Mandlik 2019-10-10 15:45:07 -07:00
parent 6b2f2b758d
commit 2dd7307fce
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/api/overlays/components/OverlayComponent.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="c-overlay" ref="overlay" tabindex="0"> <div class="c-overlay">
<div class="c-overlay__blocker" <div class="c-overlay__blocker"
@click="destroy"> @click="destroy">
</div> </div>
@ -8,14 +8,15 @@
v-if="dismissable" v-if="dismissable"
@click="destroy"> @click="destroy">
</button> </button>
<div class="c-overlay__contents" ref="element"></div> <div class="c-overlay__contents" ref="element" tabindex="0"></div>
<div class="c-overlay__button-bar" v-if="buttons"> <div class="c-overlay__button-bar" v-if="buttons">
<button class="c-button" <button class="c-button"
tabindex="0" tabindex="0"
ref="buttons" ref="buttons"
v-for="(button, index) in buttons" v-for="(button, index) in buttons"
:key="index" :key="index"
:class="{'c-button--major': button.emphasis}" @focus="focusIndex=index"
:class="{'c-button--major': focusIndex===index}"
@click="buttonClickHandler(button.callback)"> @click="buttonClickHandler(button.callback)">
{{button.label}} {{button.label}}
</button> </button>
@ -71,6 +72,7 @@
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
outline: none;
overflow: hidden; overflow: hidden;
} }
@ -173,11 +175,16 @@
<script> <script>
export default { export default {
data: function () {
return {
focusIndex: -1
};
},
inject: ['dismiss', 'element', 'buttons', 'dismissable'], inject: ['dismiss', 'element', 'buttons', 'dismissable'],
mounted() { mounted() {
this.$refs.element.appendChild(this.element); this.$refs.element.appendChild(this.element);
setTimeout(() => { setTimeout(() => {
this.getFocusElement().focus(); this.getElementForFocus().focus();
}, 0); }, 0);
}, },
methods: { methods: {
@ -190,16 +197,24 @@
method(); method();
this.$emit('destroy'); this.$emit('destroy');
}, },
getFocusElement: function () { getElementForFocus: function () {
const defaultElement = this.$refs.element;;
if (!this.$refs.buttons) { if (!this.$refs.buttons) {
return this.$refs.overlay; return defaultElement;
} }
const focusButton = this.$refs.buttons.filter((button, index) => { const focusButton = this.$refs.buttons.filter((button, index) => {
if (this.buttons[index].emphasis) {
this.focusIndex = index;
}
return this.buttons[index].emphasis; return this.buttons[index].emphasis;
}); });
return focusButton[0] || this.$refs.buttons[0]; if (!focusButton.length) {
return defaultElement;
}
return focusButton[0];
} }
} }
} }