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

Fixed tab bar scrolling

Browse source
This commit is contained in:
Joel Collins 2020-10-28 17:29:23 +00:00
parent ce57d37dc9
commit 279cc03193
1 changed files with 125 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

57
openflexure_microscope/api/static/src/components/appContent.vue
View file

@ -11,6 +11,7 @@
@onClose="enterApp()" @onClose="enterApp()"
></calibrationModal> ></calibrationModal>
<!-- Vertical tab bar --> <!-- Vertical tab bar -->
<div id="switcher-left-container">
<div <div
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"
@ -96,6 +97,16 @@
<i class="material-icons">settings</i> <i class="material-icons">settings</i>
</tabIcon> </tabIcon>
<tabIcon
id="logging-tab-icon"
tab-i-d="logging"
:require-connection="false"
:current-tab="currentTab"
@set-tab="setTab"
>
<i class="material-icons">assignment_late</i>
</tabIcon>
<tabIcon <tabIcon
id="about-tab-icon" id="about-tab-icon"
tab-i-d="about" tab-i-d="about"
@ -106,6 +117,7 @@
<i class="material-icons">info</i> <i class="material-icons">info</i>
</tabIcon> </tabIcon>
</div> </div>
</div>
<!-- Corresponding vertical tab content --> <!-- Corresponding vertical tab content -->
<div <div
@ -159,6 +171,22 @@
<settingsContent class="section-content" /> <settingsContent class="section-content" />
</tabContent> </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
v-for="plugin in pluginsGuiList" v-for="plugin in pluginsGuiList"
:key="plugin.id" :key="plugin.id"
@ -174,14 +202,6 @@
@reloadForms="updatePlugins()" @reloadForms="updatePlugins()"
/> />
</tabContent> </tabContent>
<tabContent
tab-i-d="about"
:require-connection="false"
:current-tab="currentTab"
>
<aboutContent class="section-content" />
</tabContent>
</div> </div>
</div> </div>
</template> </template>
@ -202,6 +222,7 @@ import settingsContent from "./tabContentComponents/settingsContent.vue";
import galleryContent from "./tabContentComponents/galleryContent.vue"; import galleryContent from "./tabContentComponents/galleryContent.vue";
import extensionContent from "./tabContentComponents/extensionContent.vue"; import extensionContent from "./tabContentComponents/extensionContent.vue";
import aboutContent from "./tabContentComponents/aboutContent.vue"; import aboutContent from "./tabContentComponents/aboutContent.vue";
import loggingContent from "./tabContentComponents/loggingContent.vue";
// Import modal components for device initialisation // Import modal components for device initialisation
import calibrationModal from "./modalComponents/calibrationModal.vue"; import calibrationModal from "./modalComponents/calibrationModal.vue";
@ -221,7 +242,8 @@ export default {
galleryContent, galleryContent,
extensionContent, extensionContent,
calibrationModal, calibrationModal,
aboutContent aboutContent,
loggingContent
}, },
data: function() { data: function() {
@ -359,15 +381,20 @@ export default {
border-width: 0 1px 0 0; border-width: 0 1px 0 0;
border-style: solid; border-style: solid;
border-color: rgba(180, 180, 180, 0.25); border-color: rgba(180, 180, 180, 0.25);
width: 75px;
background-color: rgba(180, 180, 180, 0.1);
padding-top: 2px !important;
}
#switcher-left-container {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
} }
#switcher-left a { #switcher-left a {
padding: 10px 8px; padding: 10px 8px;
} }
#switcher-left {
width: 75px;
background-color: rgba(180, 180, 180, 0.1);
padding-top: 2px !important;
}
</style> </style>