Rewritten responsive layout in main.Vue
This commit is contained in:
Joel Collins
parent
fc2f84743c
commit
c1641f6bf9
3 changed files with 108 additions and 130 deletions
122
src/App.vue
122
src/App.vue
|
|
@ -1,18 +1,56 @@
|
|||
<template>
|
||||
<div id="app" v-bind:class="handleTheme">
|
||||
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
|
||||
<div id="sidebar-container" v-bind:class="{ 'overlay-panel': this.window.width<850 }" class="uk-padding-remove uk-first-column uk-inline uk-height-1-1">
|
||||
<div id="overlay-toggle">
|
||||
<a href="" class="uk-icon-button uk-box-shadow-small uk-box-shadow-hover-medium action-btn-outline" uk-icon="menu" uk-toggle="target: #left-panel-container; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
|
||||
</div>
|
||||
<div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
|
||||
<panelLeft/>
|
||||
</div>
|
||||
|
||||
<div v-if="this.onMobile" uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
|
||||
<div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-auto uk-height-1-1">
|
||||
<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="pos: bottom; title: Connect"></a></li>
|
||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
|
||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
|
||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
|
||||
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
|
||||
<li class="uk-width-expand"><paneConnect/></li>
|
||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
|
||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
|
||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
|
||||
<li class="uk-width-expand"><paneSettings/></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main-panel-container" class="uk-padding-remove uk-height-1-1 uk-width-expand">
|
||||
<panelDisplay/>
|
||||
<div id="panelDisplay" 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" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
|
||||
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-flex uk-flex-1">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="uk-height-1-1 uk-width-1-1 uk-margin-remove uk-padding-remove" margin=0>
|
||||
<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="pos: bottom; title: Connect"></a></li>
|
||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
|
||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
|
||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
|
||||
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
|
||||
<li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
|
||||
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
|
||||
<li class="uk-width-expand"><paneConnect/></li>
|
||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
|
||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
|
||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
|
||||
<li class="uk-width-expand"><paneSettings/></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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -23,16 +61,27 @@ import axios from 'axios'
|
|||
import UIkit from 'uikit';
|
||||
|
||||
// Import components
|
||||
import panelLeft from './components/panelLeft.vue'
|
||||
import panelDisplay from './components/panelDisplay.vue'
|
||||
import paneConnect from './components/paneConnect.vue'
|
||||
import paneNavigate from './components/paneNavigate.vue'
|
||||
import paneCapture from './components/paneCapture.vue'
|
||||
import panePlugins from './components/panePlugins.vue'
|
||||
import paneSettings from './components/paneSettings.vue'
|
||||
// Import components
|
||||
import streamDisplay from './components/paneDisplayComponents/streamDisplay.vue'
|
||||
import galleryDisplay from './components/paneDisplayComponents/galleryDisplay.vue'
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'app',
|
||||
|
||||
components: {
|
||||
panelLeft,
|
||||
panelDisplay
|
||||
streamDisplay,
|
||||
galleryDisplay,
|
||||
paneConnect,
|
||||
paneNavigate,
|
||||
paneCapture,
|
||||
panePlugins,
|
||||
paneSettings
|
||||
},
|
||||
|
||||
data: function () {
|
||||
|
|
@ -67,6 +116,29 @@ export default {
|
|||
window.addEventListener('beforeunload', this.handleExit)
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// Attach methods to UIkit events for tab switching
|
||||
var context = this;
|
||||
// Gallery tab
|
||||
UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
|
||||
console.log("Gallery tab entered")
|
||||
if (context.$store.state.globalSettings.trackWindow == true) {
|
||||
context.$root.$emit('globalTogglePreview', false)
|
||||
}
|
||||
context.$root.$emit('globalUpdateCaptureList');
|
||||
});
|
||||
|
||||
// Stream tab
|
||||
UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
|
||||
console.log("Stream tab entered")
|
||||
UIkit.update()
|
||||
if (context.$store.state.globalSettings.trackWindow == true) {
|
||||
context.$root.$emit('globalTogglePreview', true)
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
beforeDestroy: function () {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
|
|
@ -89,6 +161,14 @@ export default {
|
|||
'uk-light': this.$store.state.globalSettings.darkMode,
|
||||
'uk-background-secondary': this.$store.state.globalSettings.darkMode
|
||||
}
|
||||
},
|
||||
disableIfDisconnected: function () {
|
||||
return {
|
||||
'uk-disabled': !this.$store.getters.ready
|
||||
}
|
||||
},
|
||||
onMobile: function () {
|
||||
return (this.window.width >= 800) ? true : false
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,4 +228,18 @@ body, html {
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.uk-tab {
|
||||
padding-left: 0;
|
||||
}
|
||||
.panel-content {
|
||||
width: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#panelLeft {
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: rgba(180, 180, 180, 0.25)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<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-text-center" uk-tab="swiping: false">
|
||||
<li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
|
||||
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-flex uk-flex-1">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UIkit from 'uikit';
|
||||
|
||||
// Import components
|
||||
import streamDisplay from './paneDisplayComponents/streamDisplay.vue'
|
||||
import galleryDisplay from './paneDisplayComponents/galleryDisplay.vue'
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'panelDisplay',
|
||||
|
||||
components: {
|
||||
streamDisplay,
|
||||
galleryDisplay
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// Attach methods to UIkit events for tab switching
|
||||
var context = this;
|
||||
// Gallery tab
|
||||
UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
|
||||
console.log("Gallery tab entered")
|
||||
if (context.$store.state.globalSettings.trackWindow == true) {
|
||||
context.$root.$emit('globalTogglePreview', false)
|
||||
}
|
||||
context.$root.$emit('globalUpdateCaptureList');
|
||||
});
|
||||
|
||||
// Stream tab
|
||||
UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
|
||||
console.log("Stream tab entered")
|
||||
UIkit.update()
|
||||
if (context.$store.state.globalSettings.trackWindow == true) {
|
||||
context.$root.$emit('globalTogglePreview', true)
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
</style>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<template>
|
||||
<div id="panelLeft" 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-top uk-margin-remove-bottom" uk-tab="swiping: false">
|
||||
<li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
|
||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
|
||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
|
||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
|
||||
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
|
||||
<li class="uk-width-expand"><paneConnect/></li>
|
||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
|
||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
|
||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
|
||||
<li class="uk-width-expand"><paneSettings/></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Import components
|
||||
import paneConnect from './paneConnect.vue'
|
||||
import paneNavigate from './paneNavigate.vue'
|
||||
import paneCapture from './paneCapture.vue'
|
||||
import panePlugins from './panePlugins.vue'
|
||||
import paneSettings from './paneSettings.vue'
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'panelLeft',
|
||||
|
||||
components: {
|
||||
paneConnect,
|
||||
paneNavigate,
|
||||
paneCapture,
|
||||
panePlugins,
|
||||
paneSettings
|
||||
},
|
||||
|
||||
computed: {
|
||||
disableIfDisconnected: function () {
|
||||
return {
|
||||
'uk-disabled': !this.$store.getters.ready
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.uk-tab {
|
||||
padding-left: 0;
|
||||
}
|
||||
.panel-content {
|
||||
width: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue