Data-driven tab layout
This commit is contained in:
Joel Collins
parent
c0f9f34256
commit
c6458046ec
1 changed files with 109 additions and 138 deletions
|
|
@ -16,63 +16,27 @@
|
||||||
id="switcher-left"
|
id="switcher-left"
|
||||||
class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
|
class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
|
||||||
>
|
>
|
||||||
<tabIcon
|
<!-- For each top tab -->
|
||||||
id="view-tab-icon"
|
<template v-for="(item, index) in enabledTopTabs">
|
||||||
tab-i-d="view"
|
<!-- Render the tab icon -->
|
||||||
:require-connection="true"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
@set-tab="setTab"
|
|
||||||
>
|
|
||||||
<i class="material-icons">visibility</i>
|
|
||||||
</tabIcon>
|
|
||||||
|
|
||||||
<tabIcon
|
|
||||||
id="gallery-tab-icon"
|
|
||||||
tab-i-d="gallery"
|
|
||||||
:require-connection="true"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
@set-tab="setTab"
|
|
||||||
>
|
|
||||||
<i class="material-icons">photo_library</i>
|
|
||||||
</tabIcon>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<tabIcon
|
|
||||||
id="navigate-tab-icon"
|
|
||||||
tab-i-d="navigate"
|
|
||||||
:require-connection="true"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
@set-tab="setTab"
|
|
||||||
>
|
|
||||||
<i class="material-icons">gamepad</i>
|
|
||||||
</tabIcon>
|
|
||||||
<tabIcon
|
|
||||||
id="capture-tab-icon"
|
|
||||||
tab-i-d="capture"
|
|
||||||
:require-connection="true"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
@set-tab="setTab"
|
|
||||||
>
|
|
||||||
<i class="material-icons">camera_alt</i>
|
|
||||||
</tabIcon>
|
|
||||||
|
|
||||||
<template v-if="$store.state.globalSettings.IHIEnabled">
|
|
||||||
<hr id="extension-tab-divider" />
|
|
||||||
|
|
||||||
<tabIcon
|
<tabIcon
|
||||||
id="slidescan-tab-icon"
|
:id="item.id + '-tab-icon'"
|
||||||
tab-i-d="slidescan"
|
:key="item.id + '-tab-icon'"
|
||||||
|
:tab-i-d="item.id"
|
||||||
:require-connection="true"
|
:require-connection="true"
|
||||||
:current-tab="currentTab"
|
:current-tab="currentTab"
|
||||||
|
:class="item.class"
|
||||||
@set-tab="setTab"
|
@set-tab="setTab"
|
||||||
>
|
>
|
||||||
<i class="material-icons">settings_overscan</i>
|
<i class="material-icons">{{ item.icon }}</i>
|
||||||
</tabIcon>
|
</tabIcon>
|
||||||
|
<!-- Add a divider if item.divide is true -->
|
||||||
|
<hr v-if="item.divide" :key="'tab-divider-' + index" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<hr id="extension-tab-divider" />
|
<hr id="extension-tab-divider" />
|
||||||
|
|
||||||
|
<!-- For each plugin tab -->
|
||||||
<tabIcon
|
<tabIcon
|
||||||
v-for="plugin in pluginsGuiList"
|
v-for="plugin in pluginsGuiList"
|
||||||
:key="plugin.id"
|
:key="plugin.id"
|
||||||
|
|
@ -88,36 +52,23 @@
|
||||||
|
|
||||||
<hr id="extension-tab-divider" />
|
<hr id="extension-tab-divider" />
|
||||||
|
|
||||||
<tabIcon
|
<!-- For each bottom tab -->
|
||||||
id="settings-tab-icon"
|
<template v-for="(item, index) in bottomTabs">
|
||||||
class="uk-margin-auto-top"
|
<!-- Render the tab icon -->
|
||||||
tab-i-d="settings"
|
<tabIcon
|
||||||
:require-connection="false"
|
:id="item.id + '-tab-icon'"
|
||||||
:current-tab="currentTab"
|
:key="item.id + '-tab-icon'"
|
||||||
@set-tab="setTab"
|
:tab-i-d="item.id"
|
||||||
>
|
:require-connection="true"
|
||||||
<i class="material-icons">settings</i>
|
:current-tab="currentTab"
|
||||||
</tabIcon>
|
:class="item.class"
|
||||||
|
@set-tab="setTab"
|
||||||
<tabIcon
|
>
|
||||||
id="logging-tab-icon"
|
<i class="material-icons">{{ item.icon }}</i>
|
||||||
tab-i-d="logging"
|
</tabIcon>
|
||||||
:require-connection="false"
|
<!-- Add a divider if item.divide is true -->
|
||||||
:current-tab="currentTab"
|
<hr v-if="item.divide" :key="'tab-divider-' + index" />
|
||||||
@set-tab="setTab"
|
</template>
|
||||||
>
|
|
||||||
<i class="material-icons">assignment_late</i>
|
|
||||||
</tabIcon>
|
|
||||||
|
|
||||||
<tabIcon
|
|
||||||
id="about-tab-icon"
|
|
||||||
tab-i-d="about"
|
|
||||||
:require-connection="false"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
@set-tab="setTab"
|
|
||||||
>
|
|
||||||
<i class="material-icons">info</i>
|
|
||||||
</tabIcon>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -127,66 +78,14 @@
|
||||||
class="uk-padding-remove uk-height-1-1 uk-width-expand"
|
class="uk-padding-remove uk-height-1-1 uk-width-expand"
|
||||||
>
|
>
|
||||||
<tabContent
|
<tabContent
|
||||||
tab-i-d="view"
|
v-for="item in enabledTopTabs"
|
||||||
|
:id="item.id + '-tab-content'"
|
||||||
|
:key="item.id + '-tab-content'"
|
||||||
|
:tab-i-d="item.id"
|
||||||
:require-connection="true"
|
:require-connection="true"
|
||||||
:current-tab="currentTab"
|
:current-tab="currentTab"
|
||||||
>
|
>
|
||||||
<viewContent />
|
<component :is="item.component"></component>
|
||||||
</tabContent>
|
|
||||||
<tabContent
|
|
||||||
tab-i-d="gallery"
|
|
||||||
:require-connection="false"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
>
|
|
||||||
<galleryContent />
|
|
||||||
</tabContent>
|
|
||||||
<tabContent
|
|
||||||
tab-i-d="navigate"
|
|
||||||
:require-connection="true"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
>
|
|
||||||
<navigateContent />
|
|
||||||
</tabContent>
|
|
||||||
<tabContent
|
|
||||||
tab-i-d="capture"
|
|
||||||
:require-connection="true"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
>
|
|
||||||
<captureContent />
|
|
||||||
</tabContent>
|
|
||||||
|
|
||||||
<template v-if="$store.state.globalSettings.IHIEnabled">
|
|
||||||
<tabContent
|
|
||||||
tab-i-d="slidescan"
|
|
||||||
:require-connection="true"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
>
|
|
||||||
<slideScanContent />
|
|
||||||
</tabContent>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<tabContent
|
|
||||||
tab-i-d="settings"
|
|
||||||
:require-connection="false"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
>
|
|
||||||
<settingsContent class="section-content" />
|
|
||||||
</tabContent>
|
|
||||||
|
|
||||||
<tabContent
|
|
||||||
tab-i-d="logging"
|
|
||||||
:require-connection="false"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
>
|
|
||||||
<loggingContent />
|
|
||||||
</tabContent>
|
|
||||||
|
|
||||||
<tabContent
|
|
||||||
tab-i-d="about"
|
|
||||||
:require-connection="false"
|
|
||||||
:current-tab="currentTab"
|
|
||||||
>
|
|
||||||
<aboutContent class="section-content" />
|
|
||||||
</tabContent>
|
</tabContent>
|
||||||
|
|
||||||
<tabContent
|
<tabContent
|
||||||
|
|
@ -204,6 +103,17 @@
|
||||||
@reloadForms="updatePlugins()"
|
@reloadForms="updatePlugins()"
|
||||||
/>
|
/>
|
||||||
</tabContent>
|
</tabContent>
|
||||||
|
|
||||||
|
<tabContent
|
||||||
|
v-for="item in bottomTabs"
|
||||||
|
:id="item.id + '-tab-content'"
|
||||||
|
:key="item.id + '-tab-content'"
|
||||||
|
:tab-i-d="item.id"
|
||||||
|
:require-connection="true"
|
||||||
|
:current-tab="currentTab"
|
||||||
|
>
|
||||||
|
<component :is="item.component"></component>
|
||||||
|
</tabContent>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -252,14 +162,69 @@ export default {
|
||||||
return {
|
return {
|
||||||
plugins: [],
|
plugins: [],
|
||||||
currentTab: "view",
|
currentTab: "view",
|
||||||
unwatchStoreFunction: null
|
unwatchStoreFunction: null,
|
||||||
|
topTabs: [
|
||||||
|
{
|
||||||
|
id: "view",
|
||||||
|
icon: "visibility",
|
||||||
|
component: viewContent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "gallery",
|
||||||
|
icon: "photo_library",
|
||||||
|
component: galleryContent,
|
||||||
|
divide: true // Add a divider after this tab icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "navigate",
|
||||||
|
icon: "gamepad",
|
||||||
|
component: navigateContent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "capture",
|
||||||
|
icon: "camera_alt",
|
||||||
|
component: captureContent,
|
||||||
|
divide: true // Add a divider after this tab icon
|
||||||
|
}
|
||||||
|
],
|
||||||
|
bottomTabs: [
|
||||||
|
{
|
||||||
|
id: "settings",
|
||||||
|
icon: "settings",
|
||||||
|
component: settingsContent,
|
||||||
|
class: "uk-margin-auto-top"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "logging",
|
||||||
|
icon: "assignment_late",
|
||||||
|
component: loggingContent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "about",
|
||||||
|
icon: "info",
|
||||||
|
component: aboutContent
|
||||||
|
}
|
||||||
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
enabledTopTabs: function() {
|
||||||
|
var enabledTabs = this.topTabs;
|
||||||
|
if (this.$store.state.globalSettings.IHIEnabled) {
|
||||||
|
enabledTabs.push({
|
||||||
|
id: "slidescan",
|
||||||
|
icon: "settings_overscan",
|
||||||
|
component: slideScanContent
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return enabledTabs;
|
||||||
|
},
|
||||||
|
|
||||||
pluginsUri: function() {
|
pluginsUri: function() {
|
||||||
return `${this.$store.getters.baseUri}/api/v2/extensions`;
|
return `${this.$store.getters.baseUri}/api/v2/extensions`;
|
||||||
},
|
},
|
||||||
|
|
||||||
pluginsGuiList: function() {
|
pluginsGuiList: function() {
|
||||||
// List of plugin GUIs, obtained from this.plugins values
|
// List of plugin GUIs, obtained from this.plugins values
|
||||||
console.log("Recalculating plugins");
|
console.log("Recalculating plugins");
|
||||||
|
|
@ -271,15 +236,21 @@ export default {
|
||||||
}
|
}
|
||||||
return pluginGuis;
|
return pluginGuis;
|
||||||
},
|
},
|
||||||
|
|
||||||
tabOrder: function() {
|
tabOrder: function() {
|
||||||
// TODO: There must be a better way to do this, somehow reading the order of the HTML elements?
|
var ind = [];
|
||||||
var ind = ["view", "gallery", "navigate", "capture", "settings"];
|
for (const tab of this.enabledTopTabs) {
|
||||||
|
ind.push(tab.id);
|
||||||
|
}
|
||||||
for (const plugin of this.pluginsGuiList) {
|
for (const plugin of this.pluginsGuiList) {
|
||||||
ind.push(plugin.id);
|
ind.push(plugin.id);
|
||||||
}
|
}
|
||||||
ind.push("about");
|
for (const tab of this.bottomTabs) {
|
||||||
|
ind.push(tab.id);
|
||||||
|
}
|
||||||
return ind;
|
return ind;
|
||||||
},
|
},
|
||||||
|
|
||||||
currentTabIndex: function() {
|
currentTabIndex: function() {
|
||||||
return this.tabOrder.indexOf(this.currentTab);
|
return this.tabOrder.indexOf(this.currentTab);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue