forked from platypush/platypush
[UI Nav] Moved Extensions
panel from the plugins list to the footer.
This commit is contained in:
parent
81e99a0e22
commit
3107df5eba
2 changed files with 19 additions and 7 deletions
|
@ -42,6 +42,15 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul class="footer">
|
<ul class="footer">
|
||||||
|
<li :class="{selected: selectedPanel === 'extensions'}" title="Extensions" @click="onItemClick('extensions')">
|
||||||
|
<a href="/#extensions">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-puzzle-piece" />
|
||||||
|
</span>
|
||||||
|
<span class="name" v-if="!collapsed">Extensions</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li :class="{selected: selectedPanel === 'settings'}" title="Settings" @click="onItemClick('settings')">
|
<li :class="{selected: selectedPanel === 'settings'}" title="Settings" @click="onItemClick('settings')">
|
||||||
<a href="/#settings">
|
<a href="/#settings">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
|
@ -102,7 +111,6 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
let panelNames = Object.keys(this.panels).sort()
|
let panelNames = Object.keys(this.panels).sort()
|
||||||
panelNames = prepend(panelNames, 'extensions')
|
|
||||||
panelNames = prepend(panelNames, 'execute')
|
panelNames = prepend(panelNames, 'execute')
|
||||||
panelNames = prepend(panelNames, 'entities')
|
panelNames = prepend(panelNames, 'entities')
|
||||||
return panelNames
|
return panelNames
|
||||||
|
@ -126,8 +134,6 @@ export default {
|
||||||
return 'Home'
|
return 'Home'
|
||||||
if (name === 'execute')
|
if (name === 'execute')
|
||||||
return 'Execute'
|
return 'Execute'
|
||||||
if (name === 'extensions')
|
|
||||||
return 'Extensions'
|
|
||||||
|
|
||||||
return name
|
return name
|
||||||
},
|
},
|
||||||
|
@ -151,8 +157,8 @@ export default {
|
||||||
<!--suppress SassScssResolvedByNameOnly -->
|
<!--suppress SassScssResolvedByNameOnly -->
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$toggler-height: 2em;
|
$toggler-height: 2em;
|
||||||
$footer-collapsed-height: 4em;
|
$footer-collapsed-height: 7.5em;
|
||||||
$footer-expanded-height: 7.1em;
|
$footer-expanded-height: 11em;
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
@media screen and (max-width: #{$tablet - 1px}) {
|
@media screen and (max-width: #{$tablet - 1px}) {
|
||||||
|
|
|
@ -16,6 +16,12 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="canvas" v-else-if="selectedPanel === 'extensions'">
|
||||||
|
<div class="panel">
|
||||||
|
<Extensions />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="canvas" v-else>
|
<div class="canvas" v-else>
|
||||||
<div class="panel" :class="{hidden: name !== selectedPanel}" v-for="(panel, name) in components" :key="name">
|
<div class="panel" :class="{hidden: name !== selectedPanel}" v-for="(panel, name) in components" :key="name">
|
||||||
<component :is="panel.component" :config="panel.config" :plugin-name="name" v-if="name === selectedPanel" />
|
<component :is="panel.component" :config="panel.config" :plugin-name="name" v-if="name === selectedPanel" />
|
||||||
|
@ -29,12 +35,13 @@ import { defineAsyncComponent, shallowRef } from "vue";
|
||||||
import Utils from '@/Utils'
|
import Utils from '@/Utils'
|
||||||
import Loading from "@/components/Loading";
|
import Loading from "@/components/Loading";
|
||||||
import Nav from "@/components/Nav";
|
import Nav from "@/components/Nav";
|
||||||
|
import Extensions from "@/components/panels/Extensions/Index";
|
||||||
import Settings from "@/components/panels/Settings/Index";
|
import Settings from "@/components/panels/Settings/Index";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Panel',
|
name: 'Panel',
|
||||||
mixins: [Utils],
|
mixins: [Utils],
|
||||||
components: {Settings, Nav, Loading},
|
components: {Extensions, Settings, Nav, Loading},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -95,7 +102,6 @@ export default {
|
||||||
initializeDefaultViews() {
|
initializeDefaultViews() {
|
||||||
this.plugins.entities = {}
|
this.plugins.entities = {}
|
||||||
this.plugins.execute = {}
|
this.plugins.execute = {}
|
||||||
this.plugins.extensions = {}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue