rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tab switcher now controls on-change events

Browse source
This commit is contained in:
Joel Collins 2019-02-25 17:15:34 +00:00
parent c03361952f
commit df77c8ea17
2 changed files with 28 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/paneDisplayComponents/galleryDisplay.vue
View file

@ -24,7 +24,7 @@
</div>
</nav>
<div class="uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link">
<div v-if="$store.getters.ready" class="uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link">
<div class="uk-grid-medium uk-padding uk-padding-remove-right uk-grid-match" uk-grid>
<captureCard
@ -83,10 +83,6 @@ export default {
}
},
created: function () {
this.updateCaptureList()
},
computed: {
captureApiUri: function () {
return this.$store.getters.uri + "/camera/capture"

34
src/components/panelDisplay.vue
View file

@ -2,16 +2,18 @@
<div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
<ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
<li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="Live"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" v-on:click="updateCaptureList()" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></a></li>
</ul>
<ul class="uk-switcher uk-flex uk-flex-1">
<li class="uk-height-1-1 uk-width-1-1 "><streamDisplay/></li>
<li v-if="$store.getters.ready" class="uk-height-1-1 uk-width-1-1 uk-overflow-auto "><galleryDisplay/></li>
<li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
<li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
</ul>
</div>
</template>
<script>
import UIkit from 'uikit';
// Import components
import streamDisplay from './paneDisplayComponents/streamDisplay.vue'
import galleryDisplay from './paneDisplayComponents/galleryDisplay.vue'
@ -25,12 +27,30 @@ export default {
galleryDisplay
},
methods: {
updateCaptureList: function () {
this.$root.$emit('globalUpdateCaptureList')
},
mounted() {
// Attach methods to UIkit events for tab switching
var self=this;
// Gallery tab
UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
console.log("Gallery tab entered")
if (self.$store.state.settings.trackWindow == true) {
self.$root.$emit('globalTogglePreview', false)
}
self.$root.$emit('globalUpdateCaptureList');
});
// Stream tab
UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
console.log("Stream tab entered")
UIkit.update()
if (self.$store.state.settings.trackWindow == true) {
self.$root.$emit('globalTogglePreview', true)
}
});
},
computed: {
disableIfDisconnected: function () {
return {