jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Use a tags for app configure views to allow middleclick

Browse Source
This commit is contained in:
Johannes Zellner
2025-09-17 11:14:20 +02:00
parent 8a6016376c
commit 3429060a7b
1 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
dashboard/src/views/AppConfigureView.vue
View File

@@ -179,6 +179,16 @@ async function onStopAppTask() {
const views = ref([]);
function hashChange() {
const tmp = window.location.hash.slice('#/app/'.length);
if (!tmp) return;
const parts = tmp.split('/');
if (parts.length !== 2) return;
onSetView(parts[1] || 'info');
}
onMounted(async () => {
const tmp = window.location.hash.slice('#/app/'.length);
if (!tmp) return;
@@ -213,13 +223,15 @@ onMounted(async () => {
views.value.push({ enabled: true, id: 'eventlog', display: t('app.eventlogTabTitle'), });
if (app.value.accessLevel === 'admin') views.value.push({ enabled: true, id: 'uninstall', display: t('app.uninstallTabTitle'), });
onSetView(parts[1] || 'info');
hashChange();
window.addEventListener('hashchange', hashChange);
busy.value = false;
});
onBeforeUnmount(() => {
if (refreshTimer) clearTimeout(refreshTimer);
window.removeEventListener('hashchange', hashChange);
});
</script>
@@ -260,7 +272,10 @@ onBeforeUnmount(() => {
<div class="configure-body">
<div class="configure-menu pankow-no-mobile">
<div class="configure-menu-item" v-for="view in views" :key="view.id" @click="onSetView(view.id)" :active="currentView === view.id ? true : null" :disabled="isViewEnabled(view.id, app.error?.details.installationState) ? null : true">{{ view.display }}</div>
<div v-for="view in views" :key="view.id" class="configure-menu-item" :active="currentView === view.id ? true : null" :disabled="isViewEnabled(view.id, app.error?.details.installationState) ? null : true">
<a v-if="isViewEnabled(view.id, app.error?.details.installationState)" :href="`/#/app/${app.id}/${view.id}`">{{ view.display }}</a>
<span v-else>{{ view.display }}</span>
</div>
</div>
<div class="configure-content">
<Transition name="slide-fade" mode="out-in">
@@ -390,21 +405,31 @@ onBeforeUnmount(() => {
}
.configure-menu-item {
display: block;
white-space: nowrap;
cursor: pointer;
padding: 4px 60px 4px 4px;
}
.configure-menu-item[active] {
.configure-menu-item > a,
.configure-menu-item > span {
display: block;
color: var(--pankow-text-color);
}
.configure-menu-item[active] > a,
.configure-menu-item[active] > span {
color: var(--pankow-color-primary-active);
font-weight: bold;
}
.configure-menu-item:hover {
.configure-menu-item:hover > a,
.configure-menu-item:hover > span {
color: var(--pankow-color-primary-hover);
}
.configure-menu-item[disabled] {
.configure-menu-item[disabled] > a,
.configure-menu-item[disabled] > span {
color: gray;
cursor: not-allowed;
}