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

Rewritten responsive layout in main.Vue

Browse source
This commit is contained in:
Joel Collins 2019-06-09 09:33:05 +01:00
parent fc2f84743c
commit c1641f6bf9
3 changed files with 108 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/panelDisplay.vue
View file

@ -1,57 +0,0 @@
<template>
<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="pos: bottom; title: Live"></a></li>
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
</ul>
<ul class="uk-switcher uk-flex uk-flex-1">
<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'
// Export main app
export default {
name: 'panelDisplay',
components: {
streamDisplay,
galleryDisplay
},
mounted() {
// Attach methods to UIkit events for tab switching
var context = this;
// Gallery tab
UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
console.log("Gallery tab entered")
if (context.$store.state.globalSettings.trackWindow == true) {
context.$root.$emit('globalTogglePreview', false)
}
context.$root.$emit('globalUpdateCaptureList');
});
// Stream tab
UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
console.log("Stream tab entered")
UIkit.update()
if (context.$store.state.globalSettings.trackWindow == true) {
context.$root.$emit('globalTogglePreview', true)
}
});
}
}
</script>
<style scoped lang="less">
</style>

59
src/components/panelLeft.vue
View file

@ -1,59 +0,0 @@
<template>
<div id="panelLeft" 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-top uk-margin-remove-bottom" uk-tab="swiping: false">
<li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
</ul>
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
<li class="uk-width-expand"><paneConnect/></li>
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
<li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
<li class="uk-width-expand"><paneSettings/></li>
</ul>
</div>
</template>
<script>
// Import components
import paneConnect from './paneConnect.vue'
import paneNavigate from './paneNavigate.vue'
import paneCapture from './paneCapture.vue'
import panePlugins from './panePlugins.vue'
import paneSettings from './paneSettings.vue'
// Export main app
export default {
name: 'panelLeft',
components: {
paneConnect,
paneNavigate,
paneCapture,
panePlugins,
paneSettings
},
computed: {
disableIfDisconnected: function () {
return {
'uk-disabled': !this.$store.getters.ready
}
}
}
}
</script>
<style lang="less">
.uk-tab {
padding-left: 0;
}
.panel-content {
width: 300px;
overflow: auto;
}
</style>