Commit 9ccb9cf0 authored by Joel Collins's avatar Joel Collins
Browse files

Added tabs to display panel, and general layout improvements

parent 473fff79

src/App.vue

+8 −12
Original line number Diff line number Diff line 
<template>

  <div id="app">

    <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>

      <div v-bind:class="responsivePanelLeft" class="toggle-hidden uk-first-column uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1">

        <panelLeft/>

      </div>

      <div class="uk-padding-remove uk-height-1-1 uk-width-expand">

        <div id="overlay-toggle">

          <a href="" class="uk-icon-button" uk-icon="menu" uk-toggle="target: .toggle-hidden; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>

        </div>

    <div uk-grid class="uk-height-1-1" margin=0>

      <div v-bind:class="responsivePanelLeft" class="toggle-hidden uk-card uk-card-default uk-card-body uk-padding-remove-top uk-padding-remove-right uk-width-auto uk-height-1-1">

        <div class="uk-card-header">

            <h3 class="uk-card-title"><b>OpenFlexure</b> Microscope</h3>

        </div>

        <panelLeft/>

      </div>

      <div class="uk-width-expand">

        <div class="uk-card uk-card-default uk-card-body uk-height-1-1">

        <panelDisplay/>

      </div>

    </div>

  </div>

  </div>

</template>



<script>
@@ -106,7 +101,8 @@ body, html { 
  height: 30px;

  position: fixed;

  right: 0;

  margin: 20px;

  margin-right: 20px;

  margin-top: 12px;

  z-index: 999

}

src/components/paneDisplayComponents/streamDisplay.vue

+15 −12
Original line number Diff line number Diff line 
<template>

	<div class="streamDisplay">

		<div class="streamContainer" v-if="$store.state.connected">

			<img v-bind:src="streamImgUri" alt="Stream">



		<img v-if="$store.state.connected" v-bind:src="streamImgUri" alt="Stream">



		<div v-else-if="$store.state.waiting" class="uk-position-center">

			<div uk-spinner="ratio: 4.5" ></div>

		</div>

	</div>

</template>
@@ -9,7 +12,7 @@ 
<script>

// Export main app

export default {

  name: 'streanmDisplay',

  name: 'streamDisplay',



  computed: {

    // a computed getter
@@ -23,13 +26,13 @@ export default { 
</script>



<style scoped lang="less">

	.streamContainer img {

.streamDisplay img {

	width: 100%;

	height: 100%;

	object-fit: contain

}



	.streamContainer, .streamDisplay {

.streamDisplay {

	width: 100%;

	height: 100%;

}

src/components/panelDisplay.vue

+9 −7
Original line number Diff line number Diff line 
<template>

  <div id="panelDisplay">

    <streamDisplay/>

  <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">

    <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom" uk-tab>

      <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="Live"></a></li>

      <li><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></a></li>

    </ul>

    <ul class="uk-switcher uk-flex uk-flex-1">

      <li class="uk-height-1-1 uk-width-1-1 "><streamDisplay/></li>

    </ul>

  </div>

</template>
@@ -19,9 +25,5 @@ export default { 
}

</script>



<style lang="less">

#panelDisplay {

	width: 100%;

	height: 100%;

}

<style scoped lang="less">

</style>

src/components/panelLeft.vue

+9 −5
Original line number Diff line number Diff line 
<template>

  <div id="panelLeft" class="uk-margin-remove uk-padding-remove">

    <ul class="uk-flex-center" uk-tab>

  <div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">

    <div class="uk-flex-none uk-card-header">

      <h3 class="uk-card-title uk-align-center"><b>OpenFlexure</b> Microscope</h3>

    </div>

    <ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">

      <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="Connect"></a></li>

      <li><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>

      <li><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li>

      <li><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>

      <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Configure"></a></li>

    </ul>

    <ul class="uk-switcher uk-padding-small panel-content">

      <li><paneConnect/></li>

    <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">

      <li class="uk-width-expand"><paneConnect/></li>

    </ul>

  </div>

</template>
@@ -28,12 +31,13 @@ export default { 


<style lang="less">

#panelLeft {

  height:100%;

  

}

.uk-tab {

    padding-left: 0;

}

.panel-content {

  width: 300px;

  overflow: auto;

}

</style>