Improved settings layout

This commit is contained in:
Joel Collins 2020-03-17 17:39:11 +00:00
parent a9506c4abc
commit d8626b7e13
3 changed files with 38 additions and 32 deletions

View file

@ -1,8 +1,6 @@
<template>
<div v-if="settings" id="microscopeSettings">
<form @submit.prevent="applyConfigRequest">
<h4>Stage</h4>
<label class="uk-form-label" for="form-stacked-text"
>Backlash compensation</label
>
@ -41,7 +39,7 @@
</div>
</div>
<h4>Microscope</h4>
<br />
<div>
<label class="uk-form-label" for="form-stacked-text"
@ -55,6 +53,8 @@
/>
</div>
<br />
<button
type="submit"
class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1"

View file

@ -7,24 +7,20 @@
>
</p>
<div class="uk-child-width-1-2" uk-grid>
<p>
<label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
><input
v-model="autoGpuPreview"
class="uk-checkbox"
type="checkbox"
/>
GPU preview</label
>
</p>
<p>
<label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
><input v-model="trackWindow" class="uk-checkbox" type="checkbox" />
Track window</label
>
</p>
</div>
<hr />
<p>
<label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
><input v-model="autoGpuPreview" class="uk-checkbox" type="checkbox" />
GPU preview</label
>
</p>
<p>
<label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
><input v-model="trackWindow" class="uk-checkbox" type="checkbox" />
Track window</label
>
</p>
</div>
</template>

View file

@ -1,19 +1,22 @@
<template>
<div id="settingsDisplay" class="uk-padding">
<div class="uk-child-width-expand@m" uk-grid>
<div>
<h3>System settings</h3>
<appSettings />
<streamSettings />
<div id="settingsDisplay" class="uk-padding uk-height-1-1">
<div class="uk-height-1-1 uk-child-width-expand@m" uk-grid>
<div class="uk-padding-remove">
<div class="settings-pane uk-padding-small">
<h3>System settings</h3>
<appSettings />
<hr />
<streamSettings />
</div>
</div>
<div>
<div v-if="$store.getters.ready">
<div class="uk-padding-remove">
<div v-if="$store.getters.ready" class="settings-pane uk-padding-small">
<h3>Camera settings</h3>
<cameraSettings />
</div>
</div>
<div>
<div v-if="$store.getters.ready">
<div class="uk-padding-remove">
<div v-if="$store.getters.ready" class="settings-pane uk-padding-small">
<h3>Microscope settings</h3>
<microscopeSettings />
</div>
@ -41,4 +44,11 @@ export default {
};
</script>
<style lang="less"></style>
<style lang="less">
.settings-pane {
border-width: 0 1px 0 0;
border-style: solid;
border-color: rgba(180, 180, 180, 0.25);
min-height: 100%;
}
</style>