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

Moved tabicons into a component

Browse source
This commit is contained in:
Joel Collins 2019-06-10 11:28:11 +01:00
parent d302a77d6e
commit 0014d61f89
3 changed files with 114 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/App.vue
View file

@ -4,22 +4,49 @@
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
<div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
<div class="uk-padding-remove uk-height-1-1 uk-width-auto@m">
<div id="component-switcher-left" class="uk-flex uk-flex-column uk-height-1-1">
<a href="#" class="uk-link" @click="setTab('connect')" uk-icon="server" uk-tooltip="pos: right; title: Connect"></a>
<a href="#" @click="setTab('navigate')" v-bind:class="{'uk-disabled': !this.$store.getters.ready}" uk-icon="location" uk-tooltip="pos: right; title: Navigate"></a>
<a href="#" @click="setTab('capture')" v-bind:class="{'uk-disabled': !this.$store.getters.ready}" uk-icon="camera" uk-tooltip="pos: right; title: Capture"></a>
<a href="#" @click="setTab('settings')" uk-icon="cog" uk-tooltip="pos: right; title: Settings"></a>
<div class="uk-padding-remove uk-height-1-1 uk-width-auto">
<div id="switcher-left" class="uk-flex uk-flex-column uk-height-1-1">
<tabIcon
id="connect"
name="Connect"
uk-icon="server"
:requireConnection="false"
:currentTab="currentTab"
@set-tab="setTab"
/>
<tabIcon
id="navigate"
name="Navigate"
uk-icon="location"
:requireConnection="true"
:currentTab="currentTab"
@set-tab="setTab"
/>
<tabIcon
id="capture"
name="Capture"
uk-icon="camera"
:requireConnection="true"
:currentTab="currentTab"
@set-tab="setTab"
/>
<tabIcon
id="settings"
name="Settings"
uk-icon="cog"
:requireConnection="false"
:currentTab="currentTab"
@set-tab="setTab"
/>
</div>
</div>
<div v-if="showControlBar" class="uk-padding-remove uk-height-1-1 uk-width-expand@m">
<div id="component-tab-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
<div v-if="currentTab=='connect'" class="uk-width-expand"><paneConnect/></div>
<div v-if="currentTab=='navigate'" class="uk-width-expand"><paneNavigate/></div>
<div v-if="currentTab=='capture'" class="uk-width-expand"><paneCapture/></div>
<div v-if="currentTab=='settings'" class="uk-width-expand"><paneSettings/></div>
<div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
<div id="component-left" class="uk-padding-small uk-flex uk-flex-1 panel-content">
<div v-bind:hidden="currentTab!='connect'" class="uk-width-expand"><paneConnect/></div>
<div v-bind:hidden="currentTab!='navigate'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneNavigate/></div>
<div v-bind:hidden="currentTab!='capture'" v-if="this.$store.getters.ready" class="uk-width-expand"><paneCapture/></div>
<div v-bind:hidden="currentTab!='settings'" class="uk-width-expand"><paneSettings/></div>
</div>
</div>
@ -47,6 +74,9 @@ import axios from 'axios'
// Import basic UIkit
import UIkit from 'uikit';
// Import components
import tabIcon from './components/tabIcon.vue'
// Import components
import paneConnect from './components/paneConnect.vue'
import paneNavigate from './components/paneNavigate.vue'
@ -62,6 +92,7 @@ export default {
name: 'app',
components: {
tabIcon,
streamDisplay,
galleryDisplay,
paneConnect,
@ -119,13 +150,16 @@ export default {
},
methods: {
setTab: function(tabName) {
if (this.currentTab == tabName) {
setTab: function(event, tab) {
console.log(event)
console.log(tab)
if (this.currentTab == tab) {
this.showControlBar = !this.showControlBar
this.currentTab = 'none'
}
else {
this.showControlBar = true
this.currentTab = tabName
this.currentTab = tab
}
},
@ -187,22 +221,25 @@ body, html {
.uk-tab {
padding-left: 0;
}
.panel-content {
#component-left {
width: 300px;
overflow: auto;
}
#panelLeft {
#container-left {
overflow: hidden auto;
}
#container-left, #switcher-left {
border-width: 0 1px 0 0;
border-style: solid;
border-color: rgba(180, 180, 180, 0.25)
}
#component-switcher-left a{
#switcher-left a{
padding: 12px 20px;
}
#component-switcher-left{
#switcher-left{
background-color: rgba(180, 180, 180, 0.1);
}

8
src/assets/less/theme.less
View file

@ -307,13 +307,13 @@ body { overflow: hidden; }
/*
* Button and link
*/
.uk-link:hover, a:hover {
.uk-link:hover, a:hover {
color: @global-button-background;
}
}
.uk-button {
.uk-button {
border-radius: 2px;
}
}
.tm-button-default,
.tm-button-primary { border-radius: 500px; }

52
src/components/tabIcon.vue Normal file
View file

@ -0,0 +1,52 @@
<template>
<a
href="#"
:class="classObject"
:uk-tooltip="tooltipOptions"
@click="setThisTab">
</a>
</template>
<script>
export default {
name: 'tabIcon',
props: {
id: String,
currentTab: String,
requireConnection: Boolean,
name: String
},
methods: {
setThisTab(event, value) {
this.$emit('set-tab', event, this.id);
}
},
computed: {
tooltipOptions: function () {
return `pos: right; title: ${this.name}`
},
classObject: function () {
return {
'tabicon-active': this.currentTab == this.id,
'uk-disabled': (this.requireConnection && !this.$store.getters.ready)
}
}
}
}
</script>
<style lang="less" scoped>
// Custom UIkit CSS modifications
@import "../assets/less/theme.less";
.tabicon-active {
color: @global-button-background !important;
}
</style>