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

Fix spacing in Terminal view

Browse Source
This commit is contained in:
Johannes Zellner
2025-02-26 14:58:05 +01:00
parent a220667f1b
commit d153a734cb
1 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
dashboard/src/components/Terminal.vue
View File

@@ -1,12 +1,12 @@
<script>
import { fetcher, Button, Dialog, FileUploader, InputDialog, MainLayout, TopBar } from 'pankow';
import { fetcher, Button, ButtonGroup, Dialog, FileUploader, InputDialog, MainLayout, TopBar } from 'pankow';
import '@xterm/xterm/css/xterm.css';
import { Terminal } from '@xterm/xterm';
import { AttachAddon } from '@xterm/addon-attach';
import { FitAddon } from '@xterm/addon-fit';
import { ISTATES, RSTATES, HSTATES } from '../constants.js';
import AppsModel from '../models/AppsModel.js';
import { createDirectoryModel } from '../models/DirectoryModel.js';
@@ -16,6 +16,7 @@ export default {
name: 'Terminal',
components: {
Button,
ButtonGroup,
Dialog,
FileUploader,
InputDialog,
@@ -37,6 +38,7 @@ export default {
schedulerMenuModel: [],
id: '',
name: '',
link: '',
socket: null,
terminal: null,
downloadFileDownloadUrl: ''
@@ -234,6 +236,7 @@ export default {
}
this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
this.link = (app.installationState !== ISTATES.INSTALLED || app.health !== HSTATES.HEALTHY || app.runState === RSTATES.STOPPED) ? '' : `https://${app.fqdn}`;
this.addons = app.manifest.addons;
this.manifestVersion = app.manifest.manifestVersion;
this.showFilemanager = !!app.manifest.addons.localstorage;
@@ -287,25 +290,31 @@ export default {
<template #header>
<TopBar class="navbar">
<template #left>
<span class="title">{{ name }}</span>
<a class="title" :href="link" target="_blank">{{ name }}</a>
</template>
<template #right>
<!-- Scheduler/cron tasks -->
<Button success :menu="schedulerMenuModel" v-show="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>
<ButtonGroup>
<!-- Scheduler/cron tasks -->
<Button success :menu="schedulerMenuModel" v-if="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>
<!-- addon actions -->
<Button success @click="terminalInject('mysql')" v-show="usesAddon('mysql')" :disabled="!connected">MySQL</Button>
<Button success @click="terminalInject('postgresql')" v-show="usesAddon('postgresql')" :disabled="!connected">Postgres</Button>
<Button success @click="terminalInject('mongodb')" v-show="usesAddon('mongodb')" :disabled="!connected">MongoDB</Button>
<Button success @click="terminalInject('redis')" v-show="usesAddon('redis')" :disabled="!connected">Redis</Button>
<!-- addon actions -->
<Button success @click="terminalInject('mysql')" v-if="usesAddon('mysql')" :disabled="!connected">MySQL</Button>
<Button success @click="terminalInject('postgresql')" v-if="usesAddon('postgresql')" :disabled="!connected">Postgres</Button>
<Button success @click="terminalInject('mongodb')" v-if="usesAddon('mongodb')" :disabled="!connected">MongoDB</Button>
<Button success @click="terminalInject('redis')" v-if="usesAddon('redis')" :disabled="!connected">Redis</Button>
</ButtonGroup>
<!-- upload/download actions -->
<Button style="margin-left: 20px;" :disabled="!connected" @click="onUpload" icon="fa-solid fa-upload">{{ $t('terminal.uploadTo', { path: '/app/data/' }) }}</Button>
<Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
<ButtonGroup>
<!-- upload/download actions -->
<Button style="margin-left: 20px;" :disabled="!connected" @click="onUpload" icon="fa-solid fa-upload">{{ $t('terminal.uploadTo', { path: '/app/data/' }) }}</Button>
<Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
</ButtonGroup>
<Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
<Button v-show="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
<Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
<ButtonGroup>
<Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
<Button v-if="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
<Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
</ButtonGroup>
</template>
</TopBar>
</template>
@@ -331,6 +340,7 @@ body {
.title {
font-size: 20px;
color: var(--pankow-color-text);
}
.pankow-top-bar {