ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 15:43:48 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[Menu API] All our drop down menus should use the new menu api #3607 (#3620)

Browse Source 
* [Menu API] All our drop down menu's now use the new menu api #3607

Co-authored-by: charlesh88 <charles.f.hacskaylo@nasa.gov>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
Nikhil
2021-03-29 10:49:49 -07:00
committed by GitHub
parent cf3566742b
commit f9bd31deee
13 changed files with 561 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/plugins/timeConductor/ConductorTimeSystem.vue
View File

@ -20,40 +20,22 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
<template>
<div
v-if="selectedTimeSystem.name"
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
<div v-if="selectedTimeSystem.name"
ref="timeSystemButton"
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
>
<button
class="c-button--menu c-time-system-button"
:class="selectedTimeSystem.cssClass"
@click.prevent="toggle"
@click.prevent.stop="showTimeSystemMenu"
>
<span class="c-button__label">{{ selectedTimeSystem.name }}</span>
</button>
<div
v-if="open"
class="c-menu"
>
<ul>
<li
v-for="timeSystem in timeSystems"
:key="timeSystem.key"
:class="timeSystem.cssClass"
@click="setTimeSystemFromView(timeSystem)"
>
{{ timeSystem.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import toggleMixin from '../../ui/mixins/toggle-mixin';
export default {
mixins: [toggleMixin],
inject: ['openmct', 'configuration'],
data: function () {
let activeClock = this.openmct.time.clock();
@ -72,10 +54,26 @@ export default {
this.openmct.time.on('clock', this.setViewFromClock);
},
methods: {
showTimeSystemMenu() {
const elementBoundingClientRect = this.$refs.timeSystemButton.getBoundingClientRect();
const x = elementBoundingClientRect.x;
const y = elementBoundingClientRect.y;
const menuOptions = {
placement: this.openmct.menus.menuPlacement.TOP_RIGHT
};
this.openmct.menus.showMenu(x, y, this.timeSystems, menuOptions);
},
getValidTimesystemsForClock(clock) {
return this.configuration.menuOptions
.filter(menuOption => menuOption.clock === (clock && clock.key))
.map(menuOption => JSON.parse(JSON.stringify(this.openmct.time.timeSystems.get(menuOption.timeSystem))));
.map(menuOption => {
const timeSystem = JSON.parse(JSON.stringify(this.openmct.time.timeSystems.get(menuOption.timeSystem)));
timeSystem.callBack = () => this.setTimeSystemFromView(timeSystem);
return timeSystem;
});
},
setTimeSystemFromView(timeSystem) {
if (timeSystem.key !== this.selectedTimeSystem.key) {