Rewritten responsive layout in main.Vue (c1641f6b) · Commits · OpenFlexure / openflexure-microscope-server

src/App.vue

+108 −14

Original line number	Diff line number	Diff line
		<template>
		<div id="app" v-bind:class="handleTheme">
		<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
		<div id="sidebar-container" v-bind:class="{ 'overlay-panel': this.window.width<850 }" class="uk-padding-remove uk-first-column uk-inline uk-height-1-1">
		<div id="overlay-toggle">
		<a href="" class="uk-icon-button uk-box-shadow-small uk-box-shadow-hover-medium action-btn-outline" uk-icon="menu" uk-toggle="target: #left-panel-container; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
		</div>
		<div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
		<panelLeft/>

		<div v-if="this.onMobile" uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
		<div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-auto 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>
		<div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand 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>
		<div id="main-panel-container" class="uk-padding-remove uk-height-1-1 uk-width-expand">
		<panelDisplay/>
		</div>

		<div v-else class="uk-height-1-1 uk-width-1-1 uk-margin-remove uk-padding-remove" margin=0>
		<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>
		<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-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>
		<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>

		</div>
		</template>

		@@ -23,16 +61,27 @@ import axios from 'axios'
		import UIkit from 'uikit';

		// Import components
		import panelLeft from './components/panelLeft.vue'
		import panelDisplay from './components/panelDisplay.vue'
		import paneConnect from './components/paneConnect.vue'
		import paneNavigate from './components/paneNavigate.vue'
		import paneCapture from './components/paneCapture.vue'
		import panePlugins from './components/panePlugins.vue'
		import paneSettings from './components/paneSettings.vue'
		// Import components
		import streamDisplay from './components/paneDisplayComponents/streamDisplay.vue'
		import galleryDisplay from './components/paneDisplayComponents/galleryDisplay.vue'

		// Export main app
		export default {
		name: 'app',

		components: {
		panelLeft,
		panelDisplay
		streamDisplay,
		galleryDisplay,
		paneConnect,
		paneNavigate,
		paneCapture,
		panePlugins,
		paneSettings
		},

		data: function () {
		@@ -67,6 +116,29 @@ export default {
		window.addEventListener('beforeunload', this.handleExit)
		},

		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)
		}
		});

		},

		beforeDestroy: function () {
		window.removeEventListener('resize', this.handleResize)
		},
		@@ -89,6 +161,14 @@ export default {
		'uk-light': this.$store.state.globalSettings.darkMode,
		'uk-background-secondary': this.$store.state.globalSettings.darkMode
		}
		},
		disableIfDisconnected: function () {
		return {
		'uk-disabled': !this.$store.getters.ready
		}
		},
		onMobile: function () {
		return (this.window.width >= 800) ? true : false
		}
		}

		@@ -148,4 +228,18 @@ body, html {
		opacity: 0.5;
		}

		.uk-tab {
		padding-left: 0;
		}
		.panel-content {
		width: 300px;
		overflow: auto;
		}

		#panelLeft {
		border-width: 0 1px 0 0;
		border-style: solid;
		border-color: rgba(180, 180, 180, 0.25)
		}

		</style>

src/components/panelDisplay.vue

deleted100644 → 0

+0 −57

Original line number	Diff line number	Diff line
		<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>

src/components/panelLeft.vue

deleted100644 → 0

+0 −59

Original line number	Diff line number	Diff line
		<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>