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

Moved control tab content into components

Browse source
This commit is contained in:
Joel Collins 2019-06-10 11:54:35 +01:00
parent 0014d61f89
commit cd82f00af3
3 changed files with 55 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/App.vue
View file

@ -4,49 +4,28 @@
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
<div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
<div class="uk-padding-remove uk-height-1-1 uk-width-auto">
<div id="switcher-left" class="uk-flex uk-flex-column uk-height-1-1">
<tabIcon
id="connect"
name="Connect"
uk-icon="server"
:requireConnection="false"
:currentTab="currentTab"
@set-tab="setTab"
/>
<tabIcon
id="navigate"
name="Navigate"
uk-icon="location"
:requireConnection="true"
:currentTab="currentTab"
@set-tab="setTab"
/>
<tabIcon
id="capture"
name="Capture"
uk-icon="camera"
:requireConnection="true"
:currentTab="currentTab"
@set-tab="setTab"
/>
<tabIcon
id="settings"
name="Settings"
uk-icon="cog"
:requireConnection="false"
:currentTab="currentTab"
@set-tab="setTab"
/>
</div>
<div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
<tabIcon id="connect" name="Connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
<tabIcon id="navigate" name="Navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
<tabIcon id="capture" name="Capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
<tabIcon id="settings" name="Settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
</div>
<div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
<div id="component-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
<div v-bind:hidden="currentTab!='connect'" class="uk-width-expand"><paneConnect/></div>
<div v-bind:hidden="currentTab!='navigate'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneNavigate/></div>
<div v-bind:hidden="currentTab!='capture'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneCapture/></div>
<div v-bind:hidden="currentTab!='settings'" class="uk-width-expand"><paneSettings/></div>
<tabContent id="connect" :requireConnection="false" :currentTab="currentTab">
<paneConnect/>
</tabContent>
<tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
<paneNavigate/>
</tabContent>
<tabContent id="capture" :requireConnection="true" :currentTab="currentTab">
<paneCapture/>
</tabContent>
<tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
<paneSettings/>
</tabContent>
</div>
</div>
@ -76,6 +55,7 @@ import UIkit from 'uikit';
// Import components
import tabIcon from './components/tabIcon.vue'
import tabContent from './components/tabContent.vue'
// Import components
import paneConnect from './components/paneConnect.vue'
@ -93,6 +73,7 @@ export default {
components: {
tabIcon,
tabContent,
streamDisplay,
galleryDisplay,
paneConnect,
@ -214,12 +195,12 @@ body, html {
}
.uk-disabled {
pointer-events: none;
opacity: 0.5;
pointer-events: none;
opacity: 0.4;
}
.uk-tab {
padding-left: 0;
padding-left: 0;
}
#component-left {
width: 300px;

31
src/components/tabContent.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div
v-if="!(this.requireConnection && !this.$store.getters.ready)"
v-bind:hidden="currentTab!=id"
class="uk-width-expand"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'tabContent',
props: {
id: String,
currentTab: String,
requireConnection: Boolean,
},
methods: {},
computed: {}
}
</script>
<style lang="less" scoped>
</style>

1
src/components/tabIcon.vue
View file

@ -12,6 +12,7 @@
export default {
name: 'tabIcon',
props: {
id: String,
currentTab: String,