Commit cceaa645 authored by Joel Collins's avatar Joel Collins
Browse files

Moved connect into a display panel tab

parent 29827200

src/assets/less/theme.less

+1 −0
Original line number Diff line number Diff line
@@ -168,6 +168,7 @@ 


.uk-card {

    border-radius: @paper-border-radius;

    border: 1px solid  rgba(180, 180, 180, 0.25);

}



.uk-card-media-top img {

src/components/controlComponents/paneStatus.vue

0 → 100644
+44 −0
Original line number Diff line number Diff line 
<template>

<div class="host-input">



  <div v-if="$store.getters.ready">

    <p><b>Host:</b> {{ $store.state.host }}</p>

    <p><b>Base URI:</b> {{ $store.getters.uri }}</p>

    <p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>

  </div>

  <div v-else-if="$store.state.waiting"><div uk-spinner></div></div>

  <div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>

  <div v-else>No active connection</div>



</div>

</template>



<script>



export default {

  name: 'paneStatus',



  data: function () {

    return {

    }  

  },



  mounted() {

  },



  // When savedHosts changes, serialise to JSON and save to localStorage

  watch: {

  },



  methods: {

  },



  computed: {

  }



}

</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="less">

</style>

src/components/panelLeft.vue

+6 −6
Original line number Diff line number Diff line
@@ -3,7 +3,7 @@ 


    <!-- Vertical tab bar -->

    <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">

      <tabIcon id="connect" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">

      <tabIcon id="status" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">

        <i class="material-icons">settings_ethernet</i>

      </tabIcon>

      <tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
@@ -31,8 +31,8 @@ 
    <!-- Corresponding vertical tab content -->

    <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-remove uk-flex uk-flex-1 panel-content">

        <tabContent id="connect" :requireConnection="false" :currentTab="currentTab">

          <paneConnect/>

        <tabContent id="status" :requireConnection="false" :currentTab="currentTab">

          <paneStatus/>

        </tabContent>

        <tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">

          <paneNavigate/>
@@ -79,7 +79,7 @@ import tabIcon from './genericComponents/tabIcon' 
import tabContent from './genericComponents/tabContent'



// Import pane components

import paneConnect from './controlComponents/paneConnect'

import paneStatus from './controlComponents/paneStatus'

import paneNavigate from './controlComponents/paneNavigate'

import paneCapture from './controlComponents/paneCapture'

import paneSettings from './controlComponents/paneSettings'
@@ -94,7 +94,7 @@ export default { 
  components: {

    tabIcon,

    tabContent,

    paneConnect,

    paneStatus,

    paneNavigate,

    paneCapture,

    paneSettings,
@@ -103,7 +103,7 @@ export default { 


  data: function () {

    return {

      currentTab: 'connect',

      currentTab: 'status',

      showControlBar: true

    }  

  },

src/components/panelRight.vue

+5 −1
Original line number Diff line number Diff line
@@ -2,10 +2,12 @@ 
  <!-- Tabbed panel for gallery and live views -->

  <div id="panel-right" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">

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

        <li><a href="#" uk-switcher-item="preview">Live</a></li>

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

        <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="preview">Live</a></li>

        <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>

    </ul>

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

        <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="connectDisplayTab"><connectDisplay/></li>

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

        <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>

    </ul>
@@ -19,6 +21,7 @@ import axios from 'axios' 
import UIkit from 'uikit';



// Import components

import connectDisplay from './viewComponents/connectDisplay.vue'

import streamDisplay from './viewComponents/streamDisplay.vue'

import galleryDisplay from './viewComponents/galleryDisplay.vue'
@@ -27,6 +30,7 @@ export default { 
  name: 'panelRight',



  components: {

    connectDisplay,

    streamDisplay,

    galleryDisplay,

  },

src/components/viewComponents/connectComponents/hostCard.vue

0 → 100644
+68 −0
Original line number Diff line number Diff line 
<template>

	<div class="hostCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">



    <div class="uk-card-body uk-padding-small uk-height-small">



      <div class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">

        <div class="uk-width-expand host-description"><b>{{ name }}</b> ({{ hostname }}:{{ port }})</div>

        <a href="#" v-on:click="$emit('delete')" class="uk-icon uk-width-auto host-delete"><i class="material-icons">delete</i></a> 

      </div>



    </div>



    <div class="uk-card-footer uk-padding-small">

      <button 

        class="uk-button uk-button-default uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"

        v-on:click="$emit('connect')"

        >Connect</button>

    </div>



	</div>

</template>



<script>

import UIkit from 'uikit';

import axios from 'axios'



// Export main app

export default {

  name: 'hostCard',



  props: {

    name: {

      type: String,

      required: true

    },

    hostname: {

      type: String,

      required: true

    },

    port: {

      type: Number,

      required: true

    }

  },



  data: function () {

    return {

    }  

  },



  methods: {

  },



  created: function () {

  },



  computed: {

  }



}

</script>



<style>

.host-description {

  text-overflow: ellipsis;

  overflow: hidden;

}

</style>
 
 No newline at end of file