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

Refactor app configure view for mobile

Browse Source
This commit is contained in:
Johannes Zellner
2025-05-27 14:57:33 +02:00
parent 83aaa9e8f0
commit 4bfaf1728d
3 changed files with 253 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, onBeforeUnmount, computed, useTemplateRef } from 'vue';
import { Button, ButtonGroup } from 'pankow';
import { Button, ButtonGroup, SingleSelect } from 'pankow';
import PostInstallDialog from '../components/PostInstallDialog.vue';
import SftpInfoDialog from '../components/SftpInfoDialog.vue';
import Access from '../components/app/Access.vue';
@@ -36,7 +36,7 @@ const installationStateLabel = AppsModel.installationStateLabel;
const busy = ref(true);
const id = ref('');
const app = ref(null);
const view = ref('');
const currentView = ref('');
const link = ref('');
const infoMenu = ref([]);
const hasLocalStorage = ref(false);
@@ -51,7 +51,7 @@ const isAppStopped = computed(() => {
});
function onSetView(newView) {
view.value = newView;
currentView.value = newView;
window.location.hash = `/app/${id.value}/${newView}`;
}
@@ -147,6 +147,8 @@ async function onStopAppTask() {
busyStopTask.value = false;
}
const views = ref([]);
onMounted(async () => {
const tmp = window.location.hash.slice('#/app/'.length);
if (!tmp) return;
@@ -159,6 +161,24 @@ onMounted(async () => {
await refresh();
if (!app.value) return;
views.value.push({ id: 'info', display: t('app.infoTabTitle'), });
views.value.push({ id: 'display', display: t('app.displayTabTitle'), });
if (app.value.accessLevel === 'admin') views.value.push({ id: 'location', display: t('app.locationTabTitle'), });
if (app.value.type === APP_TYPES.PROXIED) views.value.push({ id: 'proxy', display: 'Proxy', });
if (app.value.accessLevel === 'admin') views.value.push({ id: 'access', display: t('app.accessControlTabTitle'), });
if (app.value.type !== APP_TYPES.PROXIED) views.value.push({ id: 'resources', display: t('app.resourcesTabTitle'), });
if (app.value.type !== APP_TYPES.PROXIED) views.value.push({ id: 'services', display: t('app.servicesTabTitle'), });
if (app.value.accessLevel === 'admin' && app.value.type !== APP_TYPES.PROXIED) views.value.push({ id: 'storage', display: t('app.storageTabTitle'), });
if (app.value.type !== APP_TYPES.PROXIED) views.value.push({ id: 'graphs', display: t('app.graphsTabTitle'), });
views.value.push({ id: 'security', display: t('app.securityTabTitle'), });
if (app.value.accessLevel === 'admin' && hasEmail && app.value.type !== APP_TYPES.PROXIED) views.value.push({ id: 'email', display: t('app.emailTabTitle'), });
if (app.value.type !== APP_TYPES.PROXIED) views.value.push({ id: 'cron', display: t('app.cronTabTitle'), });
views.value.push({ id: 'updates', display: t('app.updatesTabTitle'), });
if (app.value.type !== APP_TYPES.PROXIED) views.value.push({ id: 'backups', display: t('app.backupsTabTitle'), });
views.value.push({ id: 'repair', display: t('app.repairTabTitle'), });
views.value.push({ id: 'eventlog', display: t('app.eventlogTabTitle'), });
if (app.value.accessLevel === 'admin') views.value.push({ id: 'uninstall', display: t('app.uninstallTabTitle'), });
onSetView(parts[1] || 'info');
busy.value = false;
@@ -187,22 +207,25 @@ onBeforeUnmount(() => {
</h2>
</div>
<div style="display: flex; gap: 10px; align-items: center;">
<Button v-if="app.taskId" danger tool plain icon="fa-solid fa-xmark" v-tooltip="'Cancel Task'" :loading="busyStopTask" :disabled="busyStopTask" @click="onStopAppTask()"/>
<Button secondary tool
@click="onToggleRunState()"
:disabled="toggleRunStateBusy || app.taskId || app.error || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
v-tooltip="$t(isAppStopped ? 'app.uninstall.startStop.startAction' : 'app.uninstall.startStop.stopAction')"
:loading="toggleRunStateBusy || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
:icon="isAppStopped ? 'fa-solid fa-play' : 'fa-solid fa-power-off'"
/>
<ButtonGroup>
<Button secondary tool :href="`/logs.html?appId=${app.id}`" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fa-solid fa-align-left" />
<Button secondary tool v-if="app.type !== APP_TYPES.PROXIED" :href="`/terminal.html?id=${app.id}`" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal" />
<Button secondary tool v-if="hasLocalStorage" :href="`/filemanager.html#/home/app/${app.id}`" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder" />
</ButtonGroup>
<div class="titlebar-toolbar">
<SingleSelect class="pankow-no-desktop" v-model="view" :options="views" optionKey="id" optionLabel="display" @select="onSetView"/>
<div style="display: flex; gap: 10px">
<Button v-if="app.taskId" danger tool plain icon="fa-solid fa-xmark" v-tooltip="'Cancel Task'" :loading="busyStopTask" :disabled="busyStopTask" @click="onStopAppTask()"/>
<Button secondary tool
@click="onToggleRunState()"
:disabled="toggleRunStateBusy || app.taskId || app.error || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
v-tooltip="$t(isAppStopped ? 'app.uninstall.startStop.startAction' : 'app.uninstall.startStop.stopAction')"
:loading="toggleRunStateBusy || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
:icon="isAppStopped ? 'fa-solid fa-play' : 'fa-solid fa-power-off'"
/>
<ButtonGroup>
<Button secondary tool :href="`/logs.html?appId=${app.id}`" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fa-solid fa-align-left" />
<Button secondary tool v-if="app.type !== APP_TYPES.PROXIED" :href="`/terminal.html?id=${app.id}`" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal" />
<Button secondary tool v-if="hasLocalStorage" :href="`/filemanager.html#/home/app/${app.id}`" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder" />
</ButtonGroup>
<Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
<Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
</div>
</div>
</div>
@@ -211,44 +234,28 @@ onBeforeUnmount(() => {
</div>
<div class="configure-body">
<div class="configure-menu">
<div class="configure-menu-item" @click="onSetView('info')" :active="view === 'info' ? true : null">{{ $t('app.infoTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('display')" :active="view === 'display' ? true : null">{{ $t('app.displayTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('location')" :active="view === 'location' ? true : null" v-if="app.accessLevel === 'admin'">{{ $t('app.locationTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('proxy')" :active="view === 'proxy' ? true : null" v-if="app.type === APP_TYPES.PROXIED">Proxy</div>
<div class="configure-menu-item" @click="onSetView('access')" :active="view === 'access' ? true : null" v-if="app.accessLevel === 'admin'">{{ $t('app.accessControlTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('resources')" :active="view === 'resources' ? true : null" v-if="app.type !== APP_TYPES.PROXIED">{{ $t('app.resourcesTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('services')" :active="view === 'services' ? true : null" v-if="app.type !== APP_TYPES.PROXIED && hasOptionalServices">{{ $t('app.servicesTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('storage')" :active="view === 'storage' ? true : null" v-if="app.accessLevel === 'admin' && app.type !== APP_TYPES.PROXIED">{{ $t('app.storageTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('graphs')" :active="view === 'graphs' ? true : null" v-if="app.type !== APP_TYPES.PROXIED">{{ $t('app.graphsTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('security')" :active="view === 'security' ? true : null">{{ $t('app.securityTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('email')" :active="view === 'email' ? true : null" v-if="app.accessLevel === 'admin' && hasEmail && app.type !== APP_TYPES.PROXIED">{{ $t('app.emailTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('cron')" :active="view === 'cron' ? true : null" v-if="app.type !== APP_TYPES.PROXIED">{{ $t('app.cronTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('updates')" :active="view === 'updates' ? true : null">{{ $t('app.updatesTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('backups')" :active="view === 'backups' ? true : null" v-if="app.type !== APP_TYPES.PROXIED">{{ $t('app.backupsTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('repair')" :active="view === 'repair' ? true : null">{{ $t('app.repairTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('eventlog')" :active="view === 'eventlog' ? true : null">{{ $t('app.eventlogTabTitle') }}</div>
<div class="configure-menu-item" @click="onSetView('uninstall')" :active="view === 'uninstall' ? true : null" v-if="app.accessLevel === 'admin'">{{ $t('app.uninstallTabTitle') }}</div>
<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">{{ view.display }}</div>
</div>
<div class="configure-content">
<Transition name="slide-fade" mode="out-in">
<Info v-if="view === 'info'" :app="app"/>
<Display v-else-if="view === 'display'" :app="app"/>
<Location v-else-if="view === 'location'" :app="app"/>
<Proxy v-else-if="view === 'proxy'" :app="app"/>
<Access v-else-if="view === 'access'" :app="app"/>
<Resources v-else-if="view === 'resources'" :app="app"/>
<Services v-else-if="view === 'services'" :app="app"/>
<Storage v-else-if="view === 'storage'" :app="app"/>
<Graphs v-else-if="view === 'graphs'" :app="app"/>
<Security v-else-if="view === 'security'" :app="app"/>
<Email v-else-if="view === 'email'" :app="app"/>
<Cron v-else-if="view === 'cron'" :app="app"/>
<Updates v-else-if="view === 'updates'" :app="app"/>
<Backups v-else-if="view === 'backups'" :app="app"/>
<Repair v-else-if="view === 'repair'" :app="app"/>
<Eventlog v-else-if="view === 'eventlog'" :app="app"/>
<Uninstall v-else-if="view === 'uninstall'" :app="app"/>
<Info v-if="currentView === 'info'" :app="app"/>
<Display v-else-if="currentView === 'display'" :app="app"/>
<Location v-else-if="currentView === 'location'" :app="app"/>
<Proxy v-else-if="currentView === 'proxy'" :app="app"/>
<Access v-else-if="currentView === 'access'" :app="app"/>
<Resources v-else-if="currentView === 'resources'" :app="app"/>
<Services v-else-if="currentView === 'services'" :app="app"/>
<Storage v-else-if="currentView === 'storage'" :app="app"/>
<Graphs v-else-if="currentView === 'graphs'" :app="app"/>
<Security v-else-if="currentView === 'security'" :app="app"/>
<Email v-else-if="currentView === 'email'" :app="app"/>
<Cron v-else-if="currentView === 'cron'" :app="app"/>
<Updates v-else-if="currentView === 'updates'" :app="app"/>
<Backups v-else-if="currentView === 'backups'" :app="app"/>
<Repair v-else-if="currentView === 'repair'" :app="app"/>
<Eventlog v-else-if="currentView === 'eventlog'" :app="app"/>
<Uninstall v-else-if="currentView === 'uninstall'" :app="app"/>
</Transition>
</div>
</div>
@@ -264,6 +271,13 @@ onBeforeUnmount(() => {
color: var(--pankow-text-color);
}
.titlebar {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
}
.titlebar h2 {
flex-grow: 1;
padding: 0;
@@ -273,6 +287,19 @@ onBeforeUnmount(() => {
justify-content: center;
}
.titlebar-toolbar {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
}
@media (max-width: 576px) {
.titlebar-toolbar {
flex-grow: 1;
}
}
.statelabel {
font-size: 12px;
margin-top: 6px;
@@ -295,11 +322,6 @@ onBeforeUnmount(() => {
padding-right: 15px;
}
.titlebar {
display: flex;
justify-content: space-between;
}
.apptask-progress {
position: relative;
width: 100%;