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

Added guided tour on first start

Browse source
This commit is contained in:
Joel Collins 2020-04-06 12:20:08 +01:00
parent 50b70a3ea3
commit 72c30f7186
8 changed files with 210 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/appContent.vue
View file

@ -1,6 +1,6 @@
<template>
<div
id="panel-left"
id="app-content"
class="uk-margin-remove uk-padding-remove uk-height-1-1"
uk-grid
>
@ -11,7 +11,8 @@
>
<tabIcon
v-show="!liteMode"
id="connect"
id="connect-tab-icon"
tab-i-d="connect"
:require-connection="false"
:current-tab="currentTab"
@set-tab="setTab"
@ -19,7 +20,8 @@
<i class="material-icons">bug_report</i>
</tabIcon>
<tabIcon
id="gallery"
id="gallery-tab-icon"
tab-i-d="gallery"
:require-connection="true"
:current-tab="currentTab"
@set-tab="setTab"
@ -30,7 +32,8 @@
<hr />
<tabIcon
id="navigate"
id="navigate-tab-icon"
tab-i-d="navigate"
:require-connection="true"
:current-tab="currentTab"
@set-tab="setTab"
@ -38,7 +41,8 @@
<i class="material-icons">gamepad</i>
</tabIcon>
<tabIcon
id="capture"
id="capture-tab-icon"
tab-i-d="capture"
:require-connection="true"
:current-tab="currentTab"
@set-tab="setTab"
@ -46,7 +50,8 @@
<i class="material-icons">camera_alt</i>
</tabIcon>
<tabIcon
id="settings"
id="settings-tab-icon"
tab-i-d="settings"
:require-connection="false"
:current-tab="currentTab"
@set-tab="setTab"
@ -54,12 +59,12 @@
<i class="material-icons">settings</i>
</tabIcon>
<hr />
<hr id="extension-tab-divider" />
<tabIcon
v-for="plugin in pluginsGuiList"
:id="plugin.id"
:key="plugin.id"
:tab-i-d="plugin.id"
:title="plugin.title"
:require-connection="plugin.requiresConnection"
:current-tab="currentTab"
@ -76,35 +81,35 @@
class="uk-padding-remove uk-height-1-1 uk-width-expand"
>
<tabContent
id="connect"
tab-i-d="connect"
:require-connection="false"
:current-tab="currentTab"
>
<connectContent />
</tabContent>
<tabContent
id="gallery"
tab-i-d="gallery"
:require-connection="false"
:current-tab="currentTab"
>
<galleryContent />
</tabContent>
<tabContent
id="navigate"
tab-i-d="navigate"
:require-connection="true"
:current-tab="currentTab"
>
<navigateContent />
</tabContent>
<tabContent
id="capture"
tab-i-d="capture"
:require-connection="true"
:current-tab="currentTab"
>
<captureContent />
</tabContent>
<tabContent
id="settings"
tab-i-d="settings"
:require-connection="false"
:current-tab="currentTab"
>
@ -113,8 +118,8 @@
<tabContent
v-for="plugin in pluginsGuiList"
:id="plugin.id"
:key="plugin.id"
:tab-i-d="plugin.id"
:require-connection="plugin.requiresConnection"
:current-tab="currentTab"
>
@ -204,6 +209,8 @@ export default {
);
},
mounted: function() {},
beforeDestroy() {
// Then we call that function here to unwatch
if (this.unwatchStoreFunction) {

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

@ -1,7 +1,7 @@
<template>
<div
v-if="!(requireConnection && !$store.getters.ready)"
:hidden="currentTab != id"
:hidden="currentTab != tabID"
class="uk-width-expand uk-height-1-1"
>
<div class="section-content"><slot></slot></div>
@ -13,7 +13,7 @@ export default {
name: "TabContent",
props: {
id: {
tabID: {
type: String,
required: true
},

8
src/components/genericComponents/tabIcon.vue
View file

@ -18,7 +18,7 @@ export default {
name: "TabIcon",
props: {
id: {
tabID: {
type: String,
required: true
},
@ -45,7 +45,7 @@ export default {
return this.title;
} else {
// Get the last section of a fully qualified name
var topName = this.id.split(".").pop();
var topName = this.tabID.split(".").pop();
// Make first character uppercase, then add the rest of the string
return topName.charAt(0).toUpperCase() + topName.slice(1);
}
@ -57,7 +57,7 @@ export default {
classObject: function() {
return {
"tabicon-active": this.currentTab == this.id,
"tabicon-active": this.currentTab == this.tabID,
"uk-disabled": this.requireConnection && !this.$store.getters.ready
};
}
@ -65,7 +65,7 @@ export default {
methods: {
setThisTab(event) {
this.$emit("set-tab", event, this.id);
this.$emit("set-tab", event, this.tabID);
if (this.clickCallback) {
this.clickCallback();
}

13
src/components/viewComponents/connectDisplay.vue
View file

@ -7,6 +7,7 @@
>
<div class="uk-width-auto">
<div
id="new-connection-card"
class="uk-card uk-card-default uk-padding-remove uk-width-medium connect-card-align-top"
>
<div class="uk-card-body uk-padding-small">
@ -97,7 +98,11 @@
<li class="uk-open">
<a class="uk-accordion-title" href="#">Saved devices</a>
<div class="uk-accordion-content">
<div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
<div
id="saved-connections-grid"
class="uk-grid-medium uk-grid-match uk-margin-top"
uk-grid
>
<div v-for="host in savedHosts" :key="host.name">
<hostCard
:name="host.name"
@ -114,7 +119,11 @@
<li class="uk-open">
<a class="uk-accordion-title" href="#">Nearby devices</a>
<div class="uk-accordion-content">
<div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
<div
id="nearby-connections-grid"
class="uk-grid-medium uk-grid-match uk-margin-top"
uk-grid
>
<div v-for="host in foundHostArray" :key="host.name">
<hostCard
:name="host.name"