Convert timezone and language settings to SettingItems
This commit is contained in:
Johannes Zellner
@@ -57,7 +57,7 @@ onMounted(async () => {
|
||||
</FormGroup>
|
||||
|
||||
<div v-if="accessRestrictionOption === ACL_OPTIONS.RESTRICTED">
|
||||
<div style="margin-left: 20px; display: flex;">
|
||||
<div style="margin-left: 20px; display: flex; gap: 10px;">
|
||||
<div>
|
||||
{{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="username" />
|
||||
</div>
|
||||
|
||||
@@ -193,7 +193,7 @@ onMounted(async () => {
|
||||
<p>{{ $t('profile.appPasswords.description') }}</p>
|
||||
<br/>
|
||||
|
||||
<TableView :columns="columns" :model="passwords" :hover="false" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
|
||||
<TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
|
||||
<template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }}</template>
|
||||
<template #actions="slotProps">
|
||||
<div class="table-actions">
|
||||
|
||||
@@ -153,7 +153,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Section :title="$t('network.firewall.title')">
|
||||
<Section :title="$t('network.firewall.title')" :padding="false">
|
||||
<SettingsItem>
|
||||
<FormGroup>
|
||||
<label>{{ $t('network.firewall.blockedIpRanges') }}</label>
|
||||
|
||||
@@ -4,13 +4,17 @@ export default {
|
||||
name: 'Section',
|
||||
props: {
|
||||
title: String,
|
||||
padding: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="section">
|
||||
<div class="section" :class="{ 'section-extra-padding': padding }">
|
||||
<h2 class="section-header">
|
||||
<slot name="header-title">{{ title }}</slot>
|
||||
<div><slot name="header-buttons"></slot></div>
|
||||
@@ -60,4 +64,8 @@ export default {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.section-extra-padding .section-body {
|
||||
padding: 10px 25px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -150,7 +150,7 @@ onMounted(() => {
|
||||
<label for="previewIcon">{{ $t('app.display.icon') }}</label>
|
||||
<div id="previewIcon" class="app-custom-icon" @click="onShowIconSelector()">
|
||||
<img :src="iconUrl" onerror="this.src = '/img/appicon_fallback.png'"/>
|
||||
<i class="picture-edit-indicator fa fa-pencil-alt"></i>
|
||||
<i class="app-custom-icon-edit-indicator fa fa-pencil-alt"></i>
|
||||
</div>
|
||||
<div class="text-error" v-if="iconError">{{ iconError }}</div>
|
||||
<div class="actionable" @click="onResetIcon()">{{ $t('app.display.iconResetAction') }}</div>
|
||||
@@ -162,3 +162,43 @@ onMounted(() => {
|
||||
<Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.display.saveAction') }}</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.app-custom-icon {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 5px;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid gray;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.app-custom-icon > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-custom-icon-edit-indicator {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
border-radius: 20px;
|
||||
padding: 5px;
|
||||
color: var(--pankow-text-color);
|
||||
background-color: var(--pankow-input-background-color);
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
.app-custom-icon:hover > .app-custom-icon-edit-indicator {
|
||||
color: white;
|
||||
background: var(--pankow-color-primary);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -180,8 +180,9 @@ tr:hover .table-actions {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
gap: 5px;
|
||||
/* padding-right: 15px;*/
|
||||
}
|
||||
|
||||
.section-header > div {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
|
||||
import { ref, computed, useTemplateRef, onMounted } from 'vue';
|
||||
import { Button, ButtonGroup, TextInput } from 'pankow';
|
||||
import { Button, TextInput } from 'pankow';
|
||||
import AppstoreModel from '../models/AppstoreModel.js';
|
||||
import AppInstallDialog from '../components/AppInstallDialog.vue';
|
||||
import ApplinkDialog from '../components/ApplinkDialog.vue';
|
||||
@@ -85,10 +85,10 @@ onMounted(async () => {
|
||||
<div class="filter-bar">
|
||||
<div></div>
|
||||
<TextInput ref="searchInput" @keydown.esc="search = ''" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="max-width: 100%; width: 500px;"/>
|
||||
<ButtonGroup>
|
||||
<Button outline icon="fas fa-exchange-alt" @click="onInstall(proxyApp)">{{ $t('apps.addAppproxyAction') }}</Button>
|
||||
<Button outline icon="fas fa-link" @click="onApplinkDialogOpen()">{{ $t('apps.addApplinkAction') }}</Button>
|
||||
</ButtonGroup>
|
||||
<div>
|
||||
<Button secondary plain icon="fas fa-exchange-alt" @click="onInstall(proxyApp)">{{ $t('apps.addAppproxyAction') }}</Button>
|
||||
<Button secondary plain icon="fas fa-link" @click="onApplinkDialogOpen()">{{ $t('apps.addApplinkAction') }}</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TODO mark unstable apps -->
|
||||
|
||||
@@ -415,7 +415,7 @@ onMounted(async () => {
|
||||
</TableView>
|
||||
</Section>
|
||||
|
||||
<Section :title="$t('emails.settings.title')">
|
||||
<Section :title="$t('emails.settings.title')" :padding="false">
|
||||
<SettingsItem>
|
||||
<FormGroup style="flex-grow: 1;">
|
||||
<label>{{ $t('emails.settings.location') }}</label>
|
||||
|
||||
@@ -5,8 +5,9 @@ const i18n = useI18n();
|
||||
const t = i18n.t;
|
||||
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { Dropdown } from 'pankow';
|
||||
import { SingleSelect } from 'pankow';
|
||||
import moment from 'moment-timezone';
|
||||
import SettingsItem from '../components/SettingsItem.vue';
|
||||
import Section from '../components/Section.vue';
|
||||
import CloudronAccount from '../components/CloudronAccount.vue';
|
||||
import SystemUpdate from '../components/SystemUpdate.vue';
|
||||
@@ -20,12 +21,6 @@ const allTimezones = moment.tz.names().map(t => { return { id: t }; });
|
||||
const timeZone = ref('');
|
||||
const currentTimeZone = ref('');
|
||||
|
||||
function prettyTimeZone(timeZone) {
|
||||
const tz = window.timezones.find(function (t) { return t.id === timeZone; });
|
||||
if (!tz) return '';
|
||||
return tz.display;
|
||||
}
|
||||
|
||||
watch(timeZone, async (newTimeZone, oldTimeZone) => {
|
||||
if (!oldTimeZone) return;
|
||||
|
||||
@@ -87,21 +82,29 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<Section :title="$t('settings.title')" :padding="false">
|
||||
<SettingsItem>
|
||||
<FormGroup>
|
||||
<label>{{ $t('settings.timezone.title') }}</label>
|
||||
<div v-html="$t('settings.timezone.description', { timeZone })"></div>
|
||||
</FormGroup>
|
||||
<div style="display: flex; gap: 6px; align-items: center;">
|
||||
<SingleSelect style="min-width: 160px" v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
|
||||
</div>
|
||||
</SettingsItem>
|
||||
|
||||
<h1>{{ $t('settings.title') }}</h1>
|
||||
<SettingsItem>
|
||||
<FormGroup>
|
||||
<label>{{ $t('settings.language.title') }}</label>
|
||||
<div>{{ $t('settings.language.description') }}</div>
|
||||
</FormGroup>
|
||||
<div style="display: flex; gap: 6px; align-items: center;">
|
||||
<SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" />
|
||||
</div>
|
||||
</SettingsItem>
|
||||
</Section>
|
||||
|
||||
<CloudronAccount />
|
||||
|
||||
<Section :title="$t('settings.timezone.title')">
|
||||
<p v-html="$t('settings.timezone.description', { timeZone })"></p>
|
||||
<Dropdown v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
|
||||
</Section>
|
||||
|
||||
<Section :title="$t('settings.language.title')">
|
||||
<p>{{ $t('settings.language.description') }}</p>
|
||||
<Dropdown v-model="language" :options="allLanguages" option-key="id" option-label="display" />
|
||||
</Section>
|
||||
|
||||
<SystemUpdate />
|
||||
<PrivateRegistry />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user