Condense view horizontally and fix settings item spacings

This commit is contained in:
Johannes Zellner
2025-09-19 18:43:41 +02:00
parent 9bdbd49de0
commit 1d49af144c
20 changed files with 60 additions and 36 deletions
+1 -1
View File
@@ -259,7 +259,7 @@ onUnmounted(() => {
</script>
<template>
<div class="content">
<div class="content-large">
<Menu ref="actionMenuElement" :model="actionMenuModel" />
<ApplinkDialog ref="applinkDialog" @success="refreshApps"/>
<PostInstallDialog ref="postInstallDialog"/>
+1 -1
View File
@@ -182,7 +182,7 @@ onUnmounted(() => {
</script>
<template>
<div class="content" style="width: 100%; height: 100%;">
<div class="content-large" style="width: 100%; height: 100%;">
<InputDialog ref="inputDialog"/>
<AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
+2 -1
View File
@@ -102,7 +102,8 @@ onUnmounted(() => {
<div v-if="!busy">
<div v-if="hasSubscription">
<p>{{ $t('settings.appstoreAccount.description') }}</p>
<div>{{ $t('settings.appstoreAccount.description') }}</div>
<br/>
<div class="info-row" v-if="email">
<div class="info-label">{{ $t('settings.appstoreAccount.email') }}</div>
+3 -1
View File
@@ -140,7 +140,9 @@ onMounted(async () => {
<Button @click="onAdd()" icon="fa-solid fa-plus"> {{ $t('domains.addDomain') }}</Button>
</template>
<p>{{ $t('domains.domainDialog.addDescription') }}</p>
<div>{{ $t('domains.domainDialog.addDescription') }}</div>
<br/>
<TableView :model="filteredDomains" :columns="columns" :busy="busy" style="max-height: 200px;">
<template #provider="domain">
+2 -2
View File
@@ -157,7 +157,7 @@ onUnmounted(() => {
</script>
<template>
<div class="content" style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
<div class="content-large" style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
<!-- cant use Section component as we need control over vertical scrolling -->
<div class="section" style="overflow: hidden; display: flex; flex-direction: column;">
<h1 class="section-header">
@@ -168,7 +168,7 @@ onUnmounted(() => {
<Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
</div>
</h1>
<div class="section-body" style="overflow: auto; padding-top: 0" @scroll="onScroll">
<div class="section-body" style="overflow: auto; padding-top: 10px" @scroll="onScroll">
<table class="eventlog-table">
<thead>
<tr>
+1 -1
View File
@@ -134,7 +134,7 @@ onMounted(async () => {
</script>
<template>
<div class="content">
<div class="content-large">
<Menu ref="actionMenuElement" :model="actionMenuModel" />
<InputDialog ref="inputDialog" />
<GroupDialog ref="groupDialog" @success="refreshGroups()"/>
+1 -1
View File
@@ -47,7 +47,7 @@ onMounted(async () => {
<Section :title="$t('network.dyndns.title')" :padding="false">
<SettingsItem>
<p>{{ $t('network.dyndns.description') }}</p>
<div>{{ $t('network.dyndns.description') }}</div>
<Switch v-model="dynDnsIsEnabled" @change="onToggleDynDns" :busy="busy"/>
</SettingsItem>
</Section>
+2 -1
View File
@@ -235,7 +235,8 @@ onMounted(async () => {
<Button @click="refreshAll()" :loading="refreshBusy" :disabled="refreshBusy">{{ $t('services.refresh') }}</Button>
</template>
<p>{{ $t('services.description') }}</p>
<div>{{ $t('services.description') }}</div>
<br/>
<TableView :columns="columns" :model="servicesArray">
<template #status="service">
@@ -78,7 +78,8 @@ onMounted(async () => {
<template>
<div class="content">
<Section :title="$t('users.exposedLdap.title')">
<p>{{ $t('users.exposedLdap.description') }}</p>
<div>{{ $t('users.exposedLdap.description') }}</div>
<br/>
<form @submit.prevent="onSubmit()" autocomplete="off">
<fieldset :disabled="busy">
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { ref, nextTick, onMounted, useTemplateRef, computed } from 'vue';
import { Button, ClipboardButton, Menu, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
import Section from '../components/Section.vue';
import DashboardModel from '../models/DashboardModel.js';
@@ -48,6 +48,8 @@ const submitBusy = ref(false);
const submitError = ref('');
const clientId = ref('');
const clientSecret = ref('');
const newClientId = ref('');
const newClientSecret = ref('');
const clientName = ref('');
const clientLoginRedirectUri = ref('');
const clientTokenSignatureAlgorithm = ref('RS256');
@@ -106,8 +108,8 @@ async function onSubmit() {
// reopen to show the new client credentials
if (client) {
clientId.value = client.id;
clientSecret.value = client.secret;
newClientId.value = client.id;
newClientSecret.value = client.secret;
newSetDialog.value.open();
}
}
@@ -158,16 +160,16 @@ onMounted(async () => {
<FormGroup>
<label for="clientIdInput">{{ $t('oidc.client.id') }}</label>
<InputGroup>
<TextInput id="clientIdInput" v-model="clientId" readonly style="flex-grow: 1;"/>
<ClipboardButton :value="clientId" />
<TextInput id="clientIdInput" v-model="newClientId" readonly style="flex-grow: 1;"/>
<ClipboardButton :value="newClientId" />
</InputGroup>
</FormGroup>
<FormGroup>
<label for="clientSecretInput">{{ $t('oidc.client.secret') }}</label>
<InputGroup>
<TextInput id="clientSecretInput" v-model="clientSecret" readonly style="flex-grow: 1;"/>
<ClipboardButton :value="clientSecret" />
<TextInput id="clientSecretInput" v-model="newClientSecret" readonly style="flex-grow: 1;"/>
<ClipboardButton :value="newClientSecret" />
</InputGroup>
</FormGroup>
</div>
@@ -224,7 +226,8 @@ onMounted(async () => {
</Dialog>
<Section :title="$t('oidc.title')">
<p>{{ $t('oidc.description') }}</p>
<div>{{ $t('oidc.description') }}</div>
<br/>
<FormGroup>
<label for="discoverUrlInput">{{ $t('oidc.env.discoveryUrl') }} <sup><a href="https://docs.cloudron.io/user-directory/#endpoints" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+1 -1
View File
@@ -218,7 +218,7 @@ onMounted(async () => {
</script>
<template>
<div class="content">
<div class="content-large">
<Menu ref="actionMenuElement" :model="actionMenuModel" />
<InputDialog ref="inputDialog" />
<UserDialog ref="userDialog" @success="refreshUsers()"/>