[UI] Use extension icons also for menu entries.

This commit is contained in:
Fabio Manganiello 2024-02-26 21:09:36 +01:00
parent e7c1e2f44e
commit 6de9f741f0
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -35,9 +35,8 @@
:title="name" @click="onItemClick(name)"> :title="name" @click="onItemClick(name)">
<a :href="`/#${name}`"> <a :href="`/#${name}`">
<span class="icon"> <span class="icon">
<i :class="icons[name].class" v-if="icons[name]?.class" /> <i :class="icons[name].class" v-if="specialPlugins.includes(name)" />
<img :src="icons[name].imgUrl" v-else-if="icons[name]?.imgUrl" alt="name"/> <ExtensionIcon :name="name" size="1.5em" v-else />
<i class="fas fa-puzzle-piece" v-else />
</span> </span>
<span class="name" v-if="!collapsed" v-text="displayName(name)" /> <span class="name" v-if="!collapsed" v-text="displayName(name)" />
</a> </a>
@ -77,6 +76,7 @@
<script> <script>
import icons from '@/assets/icons.json' import icons from '@/assets/icons.json'
import ExtensionIcon from "@/components/elements/ExtensionIcon"
import Utils from "@/Utils"; import Utils from "@/Utils";
import configSections from '@/components/panels/Settings/sections.json'; import configSections from '@/components/panels/Settings/sections.json';
import { bus } from "@/bus"; import { bus } from "@/bus";
@ -85,6 +85,10 @@ export default {
name: "Nav", name: "Nav",
emits: ['select', 'select-config'], emits: ['select', 'select-config'],
mixins: [Utils], mixins: [Utils],
components: {
ExtensionIcon,
},
props: { props: {
panels: { panels: {
type: Object, type: Object,
@ -105,6 +109,10 @@ export default {
}, },
computed: { computed: {
specialPlugins() {
return ['execute', 'entities']
},
panelNames() { panelNames() {
const prepend = (names, name) => { const prepend = (names, name) => {
const idx = panelNames.indexOf(name) const idx = panelNames.indexOf(name)
@ -297,6 +305,15 @@ nav {
.plugins { .plugins {
height: calc(100% - #{$toggler-height} - #{$footer-expanded-height} - 1.5em); height: calc(100% - #{$toggler-height} - #{$footer-expanded-height} - 1.5em);
overflow: auto; overflow: auto;
:deep(.icon) {
display: inline-flex;
.extension-icon {
margin-left: 0;
display: inline-flex;
}
}
} }
.footer { .footer {