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

Added tabs to display panel, and general layout improvements

Browse source
This commit is contained in:
Joel Collins 2019-02-08 13:04:56 +00:00
parent 473fff799d
commit 9ccb9cf0c9
4 changed files with 41 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/App.vue
View file

@ -1,19 +1,14 @@
<template> <template>
<div id="app"> <div id="app">
<div id="overlay-toggle"> <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
<a href="" class="uk-icon-button" uk-icon="menu" uk-toggle="target: .toggle-hidden; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a> <div v-bind:class="responsivePanelLeft" class="toggle-hidden uk-first-column uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1">
</div>
<div uk-grid class="uk-height-1-1" margin=0>
<div v-bind:class="responsivePanelLeft" class="toggle-hidden uk-card uk-card-default uk-card-body uk-padding-remove-top uk-padding-remove-right uk-width-auto uk-height-1-1">
<div class="uk-card-header">
<h3 class="uk-card-title"><b>OpenFlexure</b> Microscope</h3>
</div>
<panelLeft/> <panelLeft/>
</div> </div>
<div class="uk-width-expand"> <div class="uk-padding-remove uk-height-1-1 uk-width-expand">
<div class="uk-card uk-card-default uk-card-body uk-height-1-1"> <div id="overlay-toggle">
<panelDisplay/> <a href="" class="uk-icon-button" uk-icon="menu" uk-toggle="target: .toggle-hidden; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
</div> </div>
<panelDisplay/>
</div> </div>
</div> </div>
</div> </div>
@ -106,7 +101,8 @@ body, html {
height: 30px; height: 30px;
position: fixed; position: fixed;
right: 0; right: 0;
margin: 20px; margin-right: 20px;
margin-top: 12px;
z-index: 999 z-index: 999
} }

27
src/components/paneDisplayComponents/streamDisplay.vue
View file

@ -1,7 +1,10 @@
<template> <template>
<div class="streamDisplay"> <div class="streamDisplay">
<div class="streamContainer" v-if="$store.state.connected">
<img v-bind:src="streamImgUri" alt="Stream"> <img v-if="$store.state.connected" v-bind:src="streamImgUri" alt="Stream">
<div v-else-if="$store.state.waiting" class="uk-position-center">
<div uk-spinner="ratio: 4.5" ></div>
</div> </div>
</div> </div>
</template> </template>
@ -9,7 +12,7 @@
<script> <script>
// Export main app // Export main app
export default { export default {
name: 'streanmDisplay', name: 'streamDisplay',
computed: { computed: {
// a computed getter // a computed getter
@ -23,14 +26,14 @@ export default {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.streamContainer img { .streamDisplay img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain object-fit: contain
} }
.streamContainer, .streamDisplay { .streamDisplay {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>

16
src/components/panelDisplay.vue
View file

@ -1,6 +1,12 @@
<template> <template>
<div id="panelDisplay"> <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
<streamDisplay/> <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom" uk-tab>
<li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="Live"></a></li>
<li><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>
</ul>
</div> </div>
</template> </template>
@ -19,9 +25,5 @@ export default {
} }
</script> </script>
<style lang="less"> <style scoped lang="less">
#panelDisplay {
width: 100%;
height: 100%;
}
</style> </style>

14
src/components/panelLeft.vue
View file

@ -1,14 +1,17 @@
<template> <template>
<div id="panelLeft" class="uk-margin-remove uk-padding-remove"> <div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
<ul class="uk-flex-center" uk-tab> <div class="uk-flex-none uk-card-header">
<h3 class="uk-card-title uk-align-center"><b>OpenFlexure</b> Microscope</h3>
</div>
<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="Connect"></a></li> <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="Connect"></a></li>
<li><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li> <li><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>
<li><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li> <li><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li>
<li><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li> <li><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Configure"></a></li> <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Configure"></a></li>
</ul> </ul>
<ul class="uk-switcher uk-padding-small panel-content"> <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
<li><paneConnect/></li> <li class="uk-width-expand"><paneConnect/></li>
</ul> </ul>
</div> </div>
</template> </template>
@ -28,12 +31,13 @@ export default {
<style lang="less"> <style lang="less">
#panelLeft { #panelLeft {
height:100%;
} }
.uk-tab { .uk-tab {
padding-left: 0; padding-left: 0;
} }
.panel-content { .panel-content {
width: 300px; width: 300px;
overflow: auto;
} }
</style> </style>