[UI Nav] Moved Extensions panel from the plugins list to the footer.

This commit is contained in:
Fabio Manganiello 2023-10-17 21:39:48 +02:00
parent 81e99a0e22
commit 3107df5eba
Signed by: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 19 additions and 7 deletions

View file

@ -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}) {

View file

@ -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 = {}
}, },
}, },