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

Updated tab switcher to better match panelLeft

Browse source
This commit is contained in:
Joel Collins 2019-11-27 11:32:12 +00:00
parent 39d45bc749
commit 508875e52e
1 changed files with 19 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/panelRight.vue
View file

@ -10,8 +10,8 @@
uk-tab="swiping: false" uk-tab="swiping: false"
> >
<!-- Connect tab button --> <!-- Connect tab button -->
<li :class="[{ 'uk-active': selectedTab == 0 }]"> <li :class="[{ 'uk-active': currentTab == 'connect' }]">
<a href="#" uk-switcher-item="connect" @click="selectedTab = 0" <a href="#" uk-switcher-item="connect" @click="currentTab = 'connect'"
>Connect</a >Connect</a
> >
</li> </li>
@ -19,19 +19,21 @@
<li <li
:class="[ :class="[
{ 'uk-disabled': !$store.getters.ready }, { 'uk-disabled': !$store.getters.ready },
{ 'uk-active': selectedTab == 1 } { 'uk-active': currentTab == 'preview' }
]" ]"
> >
<a href="#" uk-switcher-item="preview" @click="selectedTab = 1">Live</a> <a href="#" uk-switcher-item="preview" @click="currentTab = 'preview'"
>Live</a
>
</li> </li>
<!-- Gallery tab button --> <!-- Gallery tab button -->
<li <li
:class="[ :class="[
{ 'uk-disabled': !$store.getters.ready }, { 'uk-disabled': !$store.getters.ready },
{ 'uk-active': selectedTab == 2 } { 'uk-active': currentTab == 'gallery' }
]" ]"
> >
<a href="#" uk-switcher-item="gallery" @click="selectedTab = 2" <a href="#" uk-switcher-item="gallery" @click="currentTab = 'gallery'"
>Gallery</a >Gallery</a
> >
</li> </li>
@ -39,7 +41,7 @@
<ul class="uk-flex uk-flex-1 uk-overflow-auto uk-margin-remove"> <ul class="uk-flex uk-flex-1 uk-overflow-auto uk-margin-remove">
<!-- Connect tab --> <!-- Connect tab -->
<div <div
v-show="selectedTab == 0" v-show="currentTab == 'connect'"
id="connectDisplayTab" id="connectDisplayTab"
class="uk-height-1-1 uk-width-1-1" class="uk-height-1-1 uk-width-1-1"
> >
@ -48,7 +50,7 @@
<!-- Preview tab --> <!-- Preview tab -->
<div <div
v-if="$store.getters.ready" v-if="$store.getters.ready"
v-show="selectedTab == 1" v-show="currentTab == 'preview'"
id="streamDisplayTab" id="streamDisplayTab"
class="uk-height-1-1 uk-width-1-1" class="uk-height-1-1 uk-width-1-1"
> >
@ -57,7 +59,7 @@
<!-- Gallery tab --> <!-- Gallery tab -->
<div <div
v-if="$store.getters.ready" v-if="$store.getters.ready"
v-show="selectedTab == 2" v-show="currentTab == 'gallery'"
id="galleryDisplayTab" id="galleryDisplayTab"
class="uk-height-1-1 uk-width-1-1" class="uk-height-1-1 uk-width-1-1"
> >
@ -88,26 +90,26 @@ export default {
data: function() { data: function() {
return { return {
selectedTab: 0, currentTab: "connect",
unwatchStoreFunction: null unwatchStoreFunction: null
}; };
}, },
watch: { watch: {
selectedTab: function(index) { currentTab: function(index) {
// If entering the gallery // If entering the gallery
if (index == 2) { if (index == "gallery") {
console.log("Gallery tab entered"); console.log("Gallery tab entered");
this.$root.$emit("globalUpdateCaptureList"); this.$root.$emit("globalUpdateCaptureList");
} }
// If entering the stream // If entering the stream
if (index == 1) { if (index == "preview") {
console.log("Stream tab entered"); console.log("Preview tab entered");
this.$root.$emit("globalTogglePreview", true); this.$root.$emit("globalTogglePreview", true);
} }
// If leaving the stream // If leaving the stream
else { else {
console.log("Stream tab hidden"); console.log("Preview tab hidden");
this.$root.$emit("globalTogglePreview", false); this.$root.$emit("globalTogglePreview", false);
} }
} }
@ -122,10 +124,10 @@ export default {
ready => { ready => {
if (ready) { if (ready) {
console.log("Right panel now ready"); console.log("Right panel now ready");
this.selectedTab = 1; this.currentTab = "preview";
} else { } else {
console.log("Right panel now disabled"); console.log("Right panel now disabled");
this.selectedTab = 0; this.currentTab = "connect";
} }
} }
); );