Ensembia/nextcloud-side_menu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate admin settings

Browse Source
This commit is contained in:
Simon Vieille
2025-04-10 19:54:03 +02:00
parent 8c5c43dafa
commit f9c3f96919
25 changed files with 1024 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/admin.js
+1 -1
View File
@@ -27,6 +27,6 @@ waitContainer('#side-menu-admin-settings').then((selector) => {
const pinia = createPinia()
const app = createApp(AdminSettings)
app.use(pinia)
app.mixin({ methods: { t, n }})
app.mixin({ methods: { t, n } })
app.mount(selector)
})
src/components/settings/MenuDisplay.vue
+3 -5
View File
@@ -1,6 +1,4 @@
<template>
</template>
<template></template>
<script setup>
// import AlwaysDisplayImg from '../../img/admin/layout-always-displayed.svg'
@@ -17,7 +15,7 @@ const choices = [
const carouselConfig = {
itemsToShow: 1.3,
wrapAround: true
wrapAround: true,
}
const { mode, alwaysDisplayed } = defineProps({
@@ -28,6 +26,6 @@ const { mode, alwaysDisplayed } = defineProps({
alwaysDisplayed: {
type: Boolean,
required: true,
}
},
})
</script>
src/components/settings/SectionTitle.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<h2>{{ t('side_menu', label) }}</h2>
</template>
<style scoped>
h2 {
font-size: 1.3em;
margin: 0 0 12px 0;
}
</style>
<script setup>
const { label } = defineProps({
label: {
type: String,
required: true,
},
})
</script>
src/components/settings/TableLabel.vue
+18 -5
View File
@@ -1,10 +1,18 @@
<template>
<div class="side-menu-setting-label" :class="{
'side-menu-setting-label-short': short,
'side-menu-setting-label--top': top,
'side-menu-setting-label--middle': middle,
}">
<div
class="side-menu-setting-label"
:class="{
'side-menu-setting-label-short': short,
'side-menu-setting-label--top': top,
'side-menu-setting-label--middle': middle,
}"
>
{{ t('side_menu', label) }}
<template v-if="help">
<br />
<em>{{ help }}</em>
</template>
</div>
</template>
@@ -29,5 +37,10 @@ const { short, label } = defineProps({
required: false,
default: true,
},
help: {
type: [String, null],
required: false,
default: false,
},
})
</script>
src/components/settings/TableValue.vue
+4 -1
View File
@@ -1,5 +1,8 @@
<template>
<div class="side-menu-setting-form" :class="{'side-menu-setting-form-long': long}">
<div
class="side-menu-setting-form"
:class="{ 'side-menu-setting-form-long': long }"
>
<slot></slot>
</div>
</template>
src/components/settings/form/FormAppPicker.vue
+82
View File
@@ -0,0 +1,82 @@
<template>
<NcButton
aria-label="t('side_menu', 'Select apps')"
@click="openModal"
variant="primary"
>
{{ t('side_menu', 'Select apps') }} ({{ model.length }})
</NcButton>
<NcModal
v-if="modal"
@close="closeModal"
>
<div class="modal__content">
<NcCheckboxRadioSwitch
v-for="(item, key) in apps"
v-model="model"
name="value"
:value="item.id"
:key="key"
>
<img
:src="item.icon"
:alt="item.name"
/>
{{ item.name }}
</NcCheckboxRadioSwitch>
<div class="modal__footer">
<NcButton
@click="closeModal"
variant="primary"
>
{{ t('side_menu', 'Close') }}
</NcButton>
</div>
</div>
</NcModal>
</template>
<style scoped>
.modal__content {
padding: 20px;
}
.modal__footer {
margin-top: 20px;
text-align: right;
}
.modal__footer button {
display: inline-block;
}
img {
width: 15px;
height: 15px;
}
</style>
<script setup>
import { NcButton, NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
import { useNavStore } from '../../../store/nav.js'
import { ref, onMounted } from 'vue'
const model = defineModel()
const navStore = useNavStore()
const modal = ref(false)
const apps = ref([])
const openModal = () => {
modal.value = true
}
const closeModal = () => {
modal.value = false
}
onMounted(async () => {
apps.value = await navStore.getApps()
})
</script>
src/components/settings/form/FormColorPicker.vue
+17
View File
@@ -0,0 +1,17 @@
<template>
<NcColorPicker
v-model="model"
class="side-menu-setting-color-picker"
>
<div
:style="{ 'background-color': model }"
class="side-menu-setting-color-picker-value"
/>
</NcColorPicker>
</template>
<script setup>
import { NcColorPicker } from '@nextcloud/vue'
const model = defineModel()
</script>
src/components/settings/form/FormOpener.vue
+20
View File
@@ -0,0 +1,20 @@
<template>
<FormSelect
v-model="model"
:options="options"
/>
</template>
<script setup>
import FormSelect from './FormSelect'
const model = defineModel()
const options = [
{ id: 'side-menu-opener', label: 'Default' },
{ id: 'side-menu-opener-dark', label: 'Default (dark)' },
{ id: 'side-menu-opener-hamburger', label: 'Hamburger' },
{ id: 'side-menu-opener-hamburger-dark', label: 'Hamburger (dark)' },
{ id: 'side-menu-opener-hamburger-2', label: 'Hamburger 2' },
{ id: 'side-menu-opener-hamburger-2-dark', label: 'Hamburger 2 (dark)' },
]
</script>
src/components/settings/form/FormRange.vue
+56
View File
@@ -0,0 +1,56 @@
<template>
<div>
<em v-if="prepend">{{ t('side_menu', prepend) }}</em>
<input
type="range"
:min="min"
:max="max"
v-model="model"
/>
<em v-if="append">{{ t('side_menu', append) }}</em>
</div>
</template>
<style scoped>
input {
min-height: auto;
}
div * {
vertical-align: middle;
}
em + input,
input + em {
margin-left: 10px;
}
</style>
<script setup>
const model = defineModel()
const { prefix, suffix } = defineProps({
prepend: {
type: [String, null],
required: false,
default: null,
},
append: {
type: [String, null],
required: false,
default: null,
},
min: {
type: Number,
required: false,
default: 0,
},
max: {
type: Number,
required: false,
default: 100,
},
})
</script>
src/components/settings/form/FormSelect.vue
+48
View File
@@ -0,0 +1,48 @@
<template>
<div>
<template v-if="!expanded">
<select v-model="model" v-if="!expanded" :multiple="multiple">
<option
v-for="option in options"
:value="option.id"
>
{{ t('side_menu', option.label) }}
</option>
</select>
</template>
<template v-else>
<NcCheckboxRadioSwitch
v-for="option in options"
v-model="model"
:value="option.id"
:key="option.id"
:type="multiple ? 'checkbox' : 'radio'"
name="value"
>
{{ option.label }}
</NcCheckboxRadioSwitch>
</template>
</div>
</template>
<script setup>
import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
const model = defineModel()
const { options, expanded } = defineProps({
options: {
type: Array,
required: true,
},
expanded: {
type: Boolean,
required: false,
default: false,
},
multiple: {
type: Boolean,
required: false,
default: false,
},
})
</script>
src/components/settings/form/FormSize.vue
+18
View File
@@ -0,0 +1,18 @@
<template>
<FormSelect
v-model="model"
:options="options"
/>
</template>
<script setup>
import FormSelect from './FormSelect'
const model = defineModel()
const options = [
{ id: 'hidden', label: 'Hidden' },
{ id: 'small', label: 'Small' },
{ id: 'normal', label: 'Normal' },
{ id: 'big', label: 'Big' },
]
</script>
src/components/settings/form/FormYesNo.vue
+12
View File
@@ -0,0 +1,12 @@
<template>
<NcCheckboxRadioSwitch
v-model="model"
type="switch"
/>
</template>
<script setup>
import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
const model = defineModel()
</script>
src/lib/menu.js
+1 -2
View File
@@ -1,7 +1,6 @@
const focusActiveApp = (menu) => {
window.setTimeout(() => {
const a = menu.querySelector('.side-menu-app.active a')
|| menu.querySelector('.side-menu-app a')
const a = menu.querySelector('.side-menu-app.active a') || menu.querySelector('.side-menu-app a')
if (a) {
a.focus()
src/menus/SideMenuWithCategories.vue
+8 -5
View File
@@ -109,11 +109,14 @@ const openerHover = ref(false)
const menu = useTemplateRef('menu')
const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
watch(() => open, (val) => {
if (val) {
focusActiveApp(menu.value)
}
})
watch(
() => open,
(val) => {
if (val) {
focusActiveApp(menu.value)
}
},
)
onMounted(async () => {
const config = await configStore.getConfig()
src/menus/SimpleSideMenu.vue
+13 -10
View File
@@ -30,7 +30,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:label="settings.name"
:avatar="settings.avatar"
/>
<AppSearch v-model="search" v-if="open" />
<AppSearch
v-model="search"
v-if="open"
/>
<OpenerButton
v-if="!openerHover || isTouchDevice"
@click="$emit('toggle')"
@@ -108,11 +111,14 @@ watch(apps, (val) => {
document.querySelector('html').classList.toggle('side-menu-always-displayed', alwaysDisplayed.value && val.length)
})
watch(() => open, (val) => {
if (val) {
focusActiveApp(menu.value)
}
})
watch(
() => open,
(val) => {
if (val) {
focusActiveApp(menu.value)
}
},
)
function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
const data = []
@@ -148,10 +154,7 @@ onMounted(async () => {
avatar.value = config['avatar']
logo.value = config['logo']
useAvatarAsLogo.value = config['use-avatar']
displayLogo.value = config['display-logo'] && !alwaysDisplayed.value && (
(!useAvatarAsLogo.value && logo.value) ||
(useAvatarAsLogo.value && avatar.value)
)
displayLogo.value = config['display-logo'] && !alwaysDisplayed.value && ((!useAvatarAsLogo.value && logo.value) || (useAvatarAsLogo.value && avatar.value))
logoLink.value = config['logo-link']
settings.value = config['settings']
src/menus/TopWideMenu.vue
+8 -5
View File
@@ -114,11 +114,14 @@ const openerHover = ref(false)
const menu = useTemplateRef('menu')
const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
watch(() => open, (val) => {
if (val) {
focusActiveApp(menu.value)
}
})
watch(
() => open,
(val) => {
if (val) {
focusActiveApp(menu.value)
}
},
)
onMounted(async () => {
const config = await configStore.getConfig()
src/pages/AdminSettings.vue
+501 -62
View File
@@ -1,92 +1,505 @@
<template>
<NcContent app-name="side_menu">
<NcAppContent>
<div class="side-menu-setting">
<NcButton
v-for="item in menu"
@click="setSection(item.section)"
:variant="item.section === section ? 'primary' : 'secondary'"
>{{ trans(item.label) }}</NcButton>
</div>
<NcContent
app-name="side_menu"
v-if="config"
>
<NcAppContent>
<div class="side-menu-setting">
<NcButton
v-for="item in menu"
@click="setSection(item.section)"
:variant="item.section === section ? 'primary' : 'secondary'"
>{{ trans(item.label) }}</NcButton
>
</div>
<TableContainer :class="sectionClass('panel')">
</TableContainer>
<TableContainer :class="sectionClass('panel')">
<TableRow>
<TableLabel
label="Display the logo"
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['display-logo']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Use the avatar instead of the logo"
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['use-avatar']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="The logo is a link to the default app"
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['add-logo-link']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Show the link to settings"
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['show-settings']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Icons"
:middle="true"
/>
<TableValue>
<FormSize v-model="config['size-icon']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Texts"
:middle="true"
/>
<TableValue>
<FormSize v-model="config['size-text']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Loader enabled"
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['loader-enabled']" />
</TableValue>
</TableRow>
</TableContainer>
<TableContainer :class="sectionClass('color')">
<TableRow>
<TableLabel label="Background color" :short="true" :middle="true"></TableLabel>
<TableValue>
<NcColorPicker v-model="color" class="side-menu-setting-color-picker">
<div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
</NcColorPicker>
<NcColorPicker v-model="color" class="side-menu-setting-color-picker">
<div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
</NcColorPicker>
</TableValue>
</TableRow>
<TableContainer :class="sectionClass('topMenu')">
<TableRow>
<TableLabel
label="Applications kept in the top menu"
:middle="true"
/>
<TableValue>
<FormAppPicker v-model="config['top-menu-apps']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel label="Background color of current app" :short="true" :middle="true"></TableLabel>
<TableValue>
<NcColorPicker v-model="color" class="side-menu-setting-color-picker">
<div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
</NcColorPicker>
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Applications kept in the top menu but also shown in side menu"
help="These applications must be selected in the previous option."
:middle="true"
/>
<TableValue>
<FormAppPicker v-model="config['top-side-menu-apps']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel label="Text color" :short="true" :middle="true"></TableLabel>
<TableValue>
<NcColorPicker v-model="color" class="side-menu-setting-color-picker">
<div :style="{'background-color': color}" class="side-menu-setting-color-picker-value" />
</NcColorPicker>
</TableValue>
</TableRow>
</TableContainer>
</NcAppContent>
</NcContent>
<TableRow>
<TableLabel
label="Hide labels on mouse over"
:top="true"
/>
<TableValue>
<FormSelect
v-model="config['top-menu-mouse-over-hidden-label']"
:expanded="true"
:options="[
{id: 1, label: 'Yes'},
{id: 0, label: 'No'},
{id: 2, label: 'Except the hovered app'},
]" />
</TableValue>
</TableRow>
</TableContainer>
<TableContainer :class="sectionClass('apps')">
<TableRow>
<TableLabel
label="Apps that should not be displayed in the menu"
:middle="true"
/>
<TableValue>
<FormAppPicker v-model="config['big-menu-hidden-apps']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Open apps in new tab"
:middle="true"
/>
<TableValue>
<FormAppPicker v-model="config['target-blank-apps']" />
</TableValue>
</TableRow>
</TableContainer>
<TableContainer :class="sectionClass('opener')">
<TableRow>
<TableLabel
label="Opener"
:middle="true"
/>
<TableValue>
<FormOpener v-model="config['opener']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Dark mode opener"
:middle="true"
/>
<TableValue>
<FormOpener v-model="config['dark-mode-opener']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Position"
:middle="true"
/>
<TableValue>
<FormSelect
v-model="config['opener-position']"
:options="[
{ id: 'before', label: 'Before the logo' },
{ id: 'after', label: 'After the logo' },
]"
/>
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Show only the opener (hidden logo)"
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['opener-only']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
help="This is the automatic behavior when the menu is always displayed."
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['opener-hover']" />
</TableValue>
</TableRow>
</TableContainer>
<TableContainer :class="sectionClass('colors')">
<SectionTitle label="Colors" />
<TableRow>
<TableLabel
label="Background color"
:middle="true"
/>
<TableValue>
<FormColorPicker v-model="config['background-color']" />
<FormColorPicker v-model="config['background-color-to']" />
<FormRange
v-model="config['background-color-opacity']"
prepend="Transparent"
append="Opaque"
/>
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Background color of current app"
:middle="true"
/>
<TableValue>
<FormColorPicker v-model="config['current-app-background-color']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Text color"
:middle="true"
/>
<TableValue>
<FormColorPicker v-model="config['text-color']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Loader"
:middle="true"
/>
<TableValue>
<FormColorPicker v-model="config['loader-color']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Icon"
:middle="true"
/>
<TableValue>
<FormRange
v-model="config['icon-invert-filter']"
prepend="Same color"
append="Opposite color"
/>
<FormRange
v-model="config['icon-opacity']"
prepend="Transparent"
append="Opaque"
/>
</TableValue>
</TableRow>
<SectionTitle label="Dark mode colors" />
<TableRow>
<TableLabel
label="Background color"
:middle="true"
/>
<TableValue>
<FormColorPicker v-model="config['dark-mode-background-color']" />
<FormColorPicker v-model="config['dark-mode-background-color-to']" />
<FormRange
v-model="config['dark-mode-background-color-opacity']"
prepend="Transparent"
append="Opaque"
/>
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Background color of current app"
:middle="true"
/>
<TableValue>
<FormColorPicker v-model="config['dark-mode-current-app-background-color']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Text color"
:middle="true"
/>
<TableValue>
<FormColorPicker v-model="config['dark-mode-text-color']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Loader"
:middle="true"
/>
<TableValue>
<FormColorPicker v-model="config['dark-mode-loader-color']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Icon"
:middle="true"
/>
<TableValue>
<FormRange
v-model="config['dark-mode-icon-invert-filter']"
prepend="Same color"
append="Opposite color"
/>
<FormRange
v-model="config['dark-mode-icon-opacity']"
prepend="Transparent"
append="Opaque"
/>
</TableValue>
</TableRow>
</TableContainer>
<TableContainer :class="sectionClass('global')">
<TableRow>
<TableLabel
label="The menu is enabled by default for users"
help="Except when the configuration is forced."
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['default-enabled']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Force this configuration to users"
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['force']" />
</TableValue>
</TableRow>
</TableContainer>
<TableContainer :class="sectionClass('support')">
<TableRow>
<TableLabel
label="You like this app and you want to support me?"
:middle="true"
/>
<TableValue>
<a target="_blank" href="https://www.buymeacoffee.com/deblan" rel="noopener">
<NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
</a>
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Need help"
/>
<TableValue class="button-inline">
<a target="_blank" href="https://deblan.gitnet.page/side_menu_doc/" rel="noopener">
<NcButton variant="secondary">{{ trans('Open the documentation') }}</NcButton>
</a>
<a target="_blank" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fQUESTION_TEMPLATE.yml" rel="noopener">
<NcButton variant="secondary">{{ trans('Ask the developer') }}</NcButton>
</a>
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="I would like a new feature"
:middle="true"
/>
<TableValue>
<a target="_blank" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml" rel="noopener">
<NcButton variant="secondary">{{ trans('New request') }}</NcButton>
</a>
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Something went wrong"
:top="true"
/>
<TableValue class="button-inline">
<a target="_blank" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml" rel="noopener">
<NcButton variant="secondary">{{ trans('Report a bug') }}</NcButton>
</a>
<NcButton variant="secondary" @click="showConfig = true">{{ trans('Show the configuration') }}</NcButton>
<NcModal
v-if="showConfig"
@close="showConfig = false"
>
<div class="modal__content">
<p style="margin-bottom: 5px">{{ trans('Configuration:') }}</p>
<textarea class="config" readonly>{{ filterConfig(config) }}</textarea>
<div class="modal__footer">
<NcButton
@click="copyConfig"
variant="secondary"
>
<span v-if="configCopied">{{ trans('Done!') }}</span>
<span v-else>{{ trans('Copy') }}</span>
</NcButton>
<NcButton
@click="showConfig = false"
variant="primary"
>
{{ t('side_menu', 'Close') }}
</NcButton>
</div>
</div>
</NcModal>
</TableValue>
</TableRow>
</TableContainer>
</NcAppContent>
</NcContent>
</template>
<style scoped>
.wrapper {
display: flex;
gap: 12px;
padding-top: calc(var(--default-grid-baseline) * 5);
padding-left: calc(var(--default-grid-baseline) * 7);
padding-right: calc(var(--default-grid-baseline) * 7);
}
.hidden {
display: none;
}
.color-picker {
width: 100px;
height: 34px;
border-radius: 6px;
.button-inline button {
display: inline-block;
margin-right: 5px;
}
.flex {
display: flex;
.config {
width: 100%;
height: 30vh;
}
.modal__content {
padding: 20px;
}
.modal__footer {
margin-top: 20px;
text-align: right;
}
.modal__footer button {
display: inline-block;
margin-right: 5px;
}
</style>
<script setup>
import { NcContent, NcAppContent, NcColorPicker, NcButton } from '@nextcloud/vue'
import { NcContent, NcAppContent, NcButton, NcModal } from '@nextcloud/vue'
import { ref, onMounted } from 'vue'
import { useConfigStore } from '../store/config.js'
import MenuDisplay from '../components/settings/MenuDisplay'
import TableContainer from '../components/settings/TableContainer'
import TableRow from '../components/settings/TableRow'
import TableLabel from '../components/settings/TableLabel'
import TableValue from '../components/settings/TableValue'
import { ref, onMounted } from 'vue'
import SectionTitle from '../components/settings/SectionTitle'
import FormRange from '../components/settings/form/FormRange'
import FormColorPicker from '../components/settings/form/FormColorPicker'
import FormOpener from '../components/settings/form/FormOpener'
import FormSelect from '../components/settings/form/FormSelect'
import FormYesNo from '../components/settings/form/FormYesNo'
import FormSize from '../components/settings/form/FormSize'
import FormAppPicker from '../components/settings/form/FormAppPicker'
const menu = [
{label: 'Panel', section: 'panel'},
{label: 'Colors', section: 'color'},
{ label: 'Global', section: 'global' },
{ label: 'Panel', section: 'panel' },
{ label: 'Applications', section: 'apps' },
{ label: 'Colors', section: 'colors' },
{ label: 'Opener', section: 'opener' },
{ label: 'Top menu', section: 'topMenu' },
{ label: 'Support', section: 'support' },
]
const section = ref('panel')
const color = ref('#ff9')
const config = ref(null)
const showConfig = ref(false)
const configCopied = ref(false)
const configStore = useConfigStore()
const section = ref(menu[0].section)
const setSection = (value) => {
section.value = value
@@ -101,4 +514,30 @@ const sectionClass = (value) => {
hidden: value !== section.value,
}
}
const copyConfig = () => {
navigator.clipboard.writeText(JSON.stringify(filterConfig(config.value), null, 2))
configCopied.value = true
window.setTimeout(() => {
configCopied.value = false
}, 2000)
}
const filterConfig = (value) => {
const result = {}
for (let key in value) {
if (['cache-categories', 'cache'].includes(key) === false) {
result[key] = value[key]
}
}
return result
}
onMounted(async () => {
config.value = await configStore.getAppConfig()
})
</script>
src/scss/admin.scss
+3 -3
View File
@@ -114,7 +114,7 @@
.side-menu-setting-table {
display: table;
width: 100%;
padding: 10px;
padding: 20px;
}
.side-menu-setting-row {
@@ -225,9 +225,9 @@
}
.side-menu-setting {
padding: 10px;
padding: 20px;
display: flex;
gap: 12px;
gap: 5px;
}
.side-menu-setting-color-picker {
src/scss/menu.scss
+4 -3
View File
@@ -66,7 +66,8 @@
}
}
&.side-menu-big, &.side-menu-with-categories {
&.side-menu-big,
&.side-menu-with-categories {
height: auto;
}
}
@@ -225,7 +226,8 @@
}
}
.side-menu-big, .side-menu-with-categories {
.side-menu-big,
.side-menu-with-categories {
.side-menu-apps-list {
height: auto;
position: static;
@@ -284,7 +286,6 @@
stroke: var(--side-menu-text-color, #fff);
}
.side-menu-always-displayed {
body {
width: calc(100% - 50px) !important;
src/store/config.js
+12
View File
@@ -5,6 +5,7 @@ import { generateUrl } from '@nextcloud/router'
export const useConfigStore = defineStore('config', () => {
const config = ref(null)
const appConfig = ref(null)
async function getConfig() {
if (config.value !== null) {
@@ -16,7 +17,18 @@ export const useConfigStore = defineStore('config', () => {
return config.value
}
async function getAppConfig() {
if (appConfig.value !== null) {
return appConfig.value
}
appConfig.value = await axios.get(generateUrl('/apps/side_menu/admin/config')).then((response) => response.data)
return appConfig.value
}
return {
getConfig,
getAppConfig,
}
})