ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-19 11:17:04 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Merge pull request #2518 from nasa/modal-improvement

Browse Source 
WIP: Modal improvement
This commit is contained in:
Charles Hacskaylo 2019-11-20 11:45:21 -08:00 committed by GitHub
commit 6e2497461a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,12 +8,15 @@
v-if="dismissable"
@click="destroy">
</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">
<button class="c-button"
tabindex="0"
ref="buttons"
v-for="(button, index) in buttons"
:key="index"
:class="{'c-button--major': button.emphasis}"
@focus="focusIndex=index"
:class="{'c-button--major': focusIndex===index}"
@click="buttonClickHandler(button.callback)">
{{button.label}}
</button>
@ -69,6 +72,7 @@
flex: 1 1 auto;
display: flex;
flex-direction: column;
outline: none;
overflow: hidden;
}
@ -171,9 +175,17 @@
<script>
export default {
data: function () {
return {
focusIndex: -1
};
},
inject: ['dismiss', 'element', 'buttons', 'dismissable'],
mounted() {
this.$refs.element.appendChild(this.element);
setTimeout(() => {
this.getElementForFocus().focus();
}, 0);
},
methods: {
destroy: function () {
@ -184,6 +196,25 @@
buttonClickHandler: function (method) {
method();
this.$emit('destroy');
},
getElementForFocus: function () {
const defaultElement = this.$refs.element;;
if (!this.$refs.buttons) {
return defaultElement;
}
const focusButton = this.$refs.buttons.filter((button, index) => {
if (this.buttons[index].emphasis) {
this.focusIndex = index;
}
return this.buttons[index].emphasis;
});
if (!focusButton.length) {
return defaultElement;
}
return focusButton[0];
}
}
}