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

Replaced navigation with a single universal tab bar

Browse source
This commit is contained in:
Joel Collins 2020-03-16 13:46:14 +00:00
parent be4362ff21
commit 3679a0f9cd
18 changed files with 286 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/App.vue
View file

@ -1,28 +1,22 @@
<template>
<div id="app" :class="handleTheme">
<!-- Grid managing whole app -->
<div
uk-grid
class="uk-height-1-1 uk-margin-remove uk-padding-remove"
margin="0"
>
<panelLeft />
<panelRight />
</div>
<div
id="app"
class="uk-height-1-1 uk-margin-remove uk-padding-remove"
:class="handleTheme"
>
<panelLeft />
</div>
</template>
<script>
// Import components
import panelLeft from "./components/panelLeft.vue";
import panelRight from "./components/panelRight.vue";
// Export main app
export default {
name: "App",
components: {
panelRight,
panelLeft
},
@ -131,4 +125,23 @@ html {
pointer-events: none;
opacity: 0.4;
}
.control-component {
overflow-y: auto;
overflow-x: hidden;
width: 300px;
height: 100%;
padding: 0;
background-color: rgba(180, 180, 180, 0.055);
border-width: 0 1px 0 0;
border-style: solid;
border-color: rgba(180, 180, 180, 0.25);
}
.view-component {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
padding: 0;
}
</style>

2
src/components/controlComponents/paneCapture.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="paneCapture">
<div id="paneCapture" class="uk-padding-small">
<div>
<label class="uk-form-label" for="form-stacked-text">Filename</label>
<input

2
src/components/controlComponents/paneNavigate.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="paneNavigate">
<div id="paneNavigate" class="uk-padding-small">
<div v-if="setPosition">
<ul uk-accordion="multiple: true; animation: false">
<li>

43
src/components/controlComponents/paneSettings.vue
View file

@ -1,43 +0,0 @@
<template>
<div id="paneSettings">
<appSettings />
<ul uk-accordion="multiple: true; animation: false">
<li>
<a class="uk-accordion-title" href="#">Stream settings</a>
<div class="uk-accordion-content"><streamSettings /></div>
</li>
<li v-if="$store.getters.ready">
<a class="uk-accordion-title" href="#">Camera settings</a>
<div class="uk-accordion-content"><cameraSettings /></div>
</li>
<li v-if="$store.getters.ready">
<a class="uk-accordion-title" href="#">Microscope settings</a>
<div class="uk-accordion-content"><microscopeSettings /></div>
</li>
</ul>
</div>
</template>
<script>
import streamSettings from "./settingsComponents/streamSettings.vue";
import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
import cameraSettings from "./settingsComponents/cameraSettings.vue";
import appSettings from "./settingsComponents/appSettings.vue";
// Export main app
export default {
name: "PaneSettings",
components: {
streamSettings,
cameraSettings,
microscopeSettings,
appSettings
}
};
</script>
<style lang="less"></style>

2
src/components/controlComponents/paneStatus.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="host-input">
<div class="host-input uk-padding-small">
<div v-if="configuration && $store.getters.ready">
<div>
<div class="uk-margin-small-bottom">

9
src/components/genericComponents/tabContent.vue
View file

@ -2,9 +2,8 @@
<div
v-if="!(requireConnection && !$store.getters.ready)"
:hidden="currentTab != id"
class="uk-width-expand"
class="uk-width-expand uk-height-1-1"
>
<div class="section-heading">{{ id }}</div>
<div class="section-content"><slot></slot></div>
</div>
</template>
@ -39,8 +38,8 @@ export default {
cursor: default;
}
.section-content,
.section-heading {
padding: 9px 10px;
.section-content {
padding: 0;
height: 100%;
}
</style>

159
src/components/panelLeft.vue
View file

@ -10,13 +10,24 @@
class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
>
<tabIcon
id="status"
id="connect"
:require-connection="false"
:current-tab="currentTab"
@set-tab="setTab"
>
<i class="material-icons">bug_report</i>
</tabIcon>
<tabIcon
id="gallery"
:require-connection="true"
:current-tab="currentTab"
@set-tab="setTab"
>
<i class="material-icons">photo_library</i>
</tabIcon>
<hr />
<tabIcon
id="navigate"
:require-connection="true"
@ -63,66 +74,66 @@
id="container-left"
class="uk-padding-remove uk-height-1-1 uk-width-expand"
>
<div
id="component-left"
class="uk-padding-remove uk-flex uk-flex-1 panel-content"
<tabContent
id="connect"
:require-connection="false"
:current-tab="currentTab"
>
<tabContent
id="status"
:require-connection="false"
:current-tab="currentTab"
>
<paneStatus />
</tabContent>
<tabContent
id="navigate"
:require-connection="true"
:current-tab="currentTab"
>
<paneNavigate />
</tabContent>
<tabContent
id="capture"
:require-connection="true"
:current-tab="currentTab"
>
<paneCapture />
</tabContent>
<tabContent
id="settings"
:require-connection="false"
:current-tab="currentTab"
>
<paneSettings />
</tabContent>
<connectContent />
</tabContent>
<tabContent
id="gallery"
:require-connection="false"
:current-tab="currentTab"
>
<galleryContent />
</tabContent>
<tabContent
id="navigate"
:require-connection="true"
:current-tab="currentTab"
>
<navigateContent />
</tabContent>
<tabContent
id="capture"
:require-connection="true"
:current-tab="currentTab"
>
<captureContent />
</tabContent>
<tabContent
id="settings"
:require-connection="false"
:current-tab="currentTab"
>
<settingsContent />
</tabContent>
<tabContent
v-for="plugin in pluginsGuiList"
:id="plugin.id"
:key="plugin.id"
:require-connection="plugin.requiresConnection"
:current-tab="currentTab"
<tabContent
v-for="plugin in pluginsGuiList"
:id="plugin.id"
:key="plugin.id"
:require-connection="plugin.requiresConnection"
:current-tab="currentTab"
>
<div
v-for="form in plugin.forms"
:key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
class="uk-flex uk-flex-column"
>
<div
v-for="form in plugin.forms"
:key="
`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()
"
class="uk-flex uk-flex-column"
>
<JsonForm
:name="form.name"
:route="form.route"
:is-task="form.isTask"
:submit-label="form.submitLabel"
:schema="form.schema"
:emit-on-response="form.emitOnResponse"
@reloadForms="updatePlugins()"
/>
<hr />
</div>
</tabContent>
</div>
<JsonForm
:name="form.name"
:route="form.route"
:is-task="form.isTask"
:submit-label="form.submitLabel"
:schema="form.schema"
:emit-on-response="form.emitOnResponse"
@reloadForms="updatePlugins()"
/>
<hr />
</div>
</tabContent>
</div>
</div>
</template>
@ -135,16 +146,15 @@ import tabIcon from "./genericComponents/tabIcon";
import tabContent from "./genericComponents/tabContent";
// Import control components
import paneStatus from "./controlComponents/paneStatus";
import paneNavigate from "./controlComponents/paneNavigate";
import paneCapture from "./controlComponents/paneCapture";
import paneSettings from "./controlComponents/paneSettings";
// Import view components
import connectDisplay from "./viewComponents/connectDisplay.vue";
import connectDisplayLite from "./viewComponents/connectDisplayLite.vue";
import streamDisplay from "./viewComponents/streamDisplay.vue";
import galleryDisplay from "./viewComponents/galleryDisplay.vue";
// Import new content components
import connectContent from "./tabContentComponents/connectContent.vue";
import navigateContent from "./tabContentComponents/navigateContent.vue";
import captureContent from "./tabContentComponents/captureContent.vue";
import settingsContent from "./tabContentComponents/settingsContent.vue";
import galleryContent from "./tabContentComponents/galleryContent.vue";
// Import plugin components
import JsonForm from "./pluginComponents/JsonForm";
@ -156,17 +166,20 @@ export default {
components: {
tabIcon,
tabContent,
paneStatus,
paneNavigate,
paneCapture,
paneSettings,
JsonForm
JsonForm,
connectContent,
navigateContent,
captureContent,
settingsContent,
galleryContent
},
data: function() {
return {
plugins: [],
currentTab: "status",
currentTab: "connect",
unwatchStoreFunction: null
};
},
@ -201,7 +214,7 @@ export default {
console.log("Left panel now ready");
} else {
console.log("Right panel now disabled");
this.currentTab = "status";
this.currentTab = "connect";
}
}
);
@ -240,14 +253,16 @@ export default {
<style scoped lang="less">
#component-left {
width: 100%;
height: 100%;
}
#container-left {
overflow: hidden auto;
overflow: hidden;
background-color: rgba(180, 180, 180, 0.025);
width: 100%;
height: 100%;
}
#container-left,
#switcher-left {
border-width: 0 1px 0 0;
border-style: solid;

25
src/components/tabContentComponents/captureContent.vue Normal file
View file

@ -0,0 +1,25 @@
<template>
<!-- Grid managing tab content -->
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
<div class="control-component">
<paneCapture />
</div>
<div class="view-component uk-width-expand">
<streamDisplay />
</div>
</div>
</template>
<script>
import paneCapture from "../controlComponents/paneCapture";
import streamDisplay from "../viewComponents/streamDisplay.vue";
export default {
name: "NavigateContent",
components: {
paneCapture,
streamDisplay
}
};
</script>

20
src/components/tabContentComponents/connectContent.vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<!-- Grid managing tab content -->
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
<div class="view-component uk-width-expand">
<connectDisplay />
</div>
</div>
</template>
<script>
import connectDisplay from "../viewComponents/connectDisplay.vue";
export default {
name: "ConnectContent",
components: {
connectDisplay
}
};
</script>

19
src/components/tabContentComponents/galleryContent.vue Normal file
View file

@ -0,0 +1,19 @@
<template>
<!-- Grid managing tab content -->
<div class="view-component uk-height-1-1 uk-width-expand">
<galleryDisplay />
</div>
</template>
<script>
import galleryDisplay from "../viewComponents/galleryDisplay.vue";
export default {
name: "NavigateContent",
components: {
galleryDisplay
}
};
</script>

25
src/components/tabContentComponents/navigateContent.vue Normal file
View file

@ -0,0 +1,25 @@
<template>
<!-- Grid managing tab content -->
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
<div class="control-component">
<paneNavigate />
</div>
<div class="view-component uk-width-expand">
<streamDisplay />
</div>
</div>
</template>
<script>
import paneNavigate from "../controlComponents/paneNavigate";
import streamDisplay from "../viewComponents/streamDisplay.vue";
export default {
name: "NavigateContent",
components: {
paneNavigate,
streamDisplay
}
};
</script>

25
src/components/tabContentComponents/settingsContent.vue Normal file
View file

@ -0,0 +1,25 @@
<template>
<!-- Grid managing tab content -->
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
<div class="control-component">
<paneStatus />
</div>
<div class="view-component uk-width-expand uk-padding-small">
<settingsDisplay />
</div>
</div>
</template>
<script>
import paneStatus from "../controlComponents/paneStatus";
import settingsDisplay from "../viewComponents/settingsDisplay.vue";
export default {
name: "NavigateContent",
components: {
paneStatus,
settingsDisplay
}
};
</script>

15
src/components/viewComponents/galleryComponents/zipDownloader.vue
View file

@ -63,8 +63,19 @@ export default {
}
},
mounted() {
this.updateZipperUri();
created: function() {
// Watch for host 'ready', then update status
this.unwatchStoreFunction = this.$store.watch(
(state, getters) => {
return getters.ready;
},
ready => {
if (ready) {
// If the connection is now ready, update zipper URL
this.updateZipperUri();
}
}
);
},
methods: {

0
src/components/controlComponents/settingsComponents/appSettings.vue → src/components/viewComponents/settingsComponents/appSettings.vue
View file

0
src/components/controlComponents/settingsComponents/cameraSettings.vue → src/components/viewComponents/settingsComponents/cameraSettings.vue
View file

0
src/components/controlComponents/settingsComponents/microscopeSettings.vue → src/components/viewComponents/settingsComponents/microscopeSettings.vue
View file

0
src/components/controlComponents/settingsComponents/streamSettings.vue → src/components/viewComponents/settingsComponents/streamSettings.vue
View file

40
src/components/viewComponents/settingsDisplay.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<div id="settingsDisplay" class="uk-padding">
<div class="uk-child-width-expand@m" uk-grid>
<div>
<h3>System settings</h3>
<appSettings />
<streamSettings />
</div>
<div v-if="$store.getters.ready">
<h3>Camera settings</h3>
<cameraSettings />
</div>
<div v-if="$store.getters.ready">
<h3>Microscope settings</h3>
<microscopeSettings />
</div>
</div>
</div>
</template>
<script>
import streamSettings from "./settingsComponents/streamSettings.vue";
import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
import cameraSettings from "./settingsComponents/cameraSettings.vue";
import appSettings from "./settingsComponents/appSettings.vue";
// Export main app
export default {
name: "SettingsDisplay",
components: {
streamSettings,
cameraSettings,
microscopeSettings,
appSettings
}
};
</script>
<style lang="less"></style>