deblan/side_menu
deblan/side_menu
4
11
Fork 9
Code Issues 20 Pull requests 3 Projects Releases 137 Wiki Activity

add user settings

Browse source
This commit is contained in:
Simon Vieille 2025-04-13 20:32:13 +02:00
commit fdd8f8850d
Signed by: deblan
GPG key ID: 579388D585F70417
20 changed files with 839 additions and 316 deletions
Download patch file Download diff file Expand all files Collapse all files

8
lib/Controller/AdminSettingController.php
View file

@ -98,7 +98,6 @@ class AdminSettingController extends Controller
'add-logo-link',
'show-settings',
'loader-enabled',
'top-menu-mouse-over-hidden-label',
'always-displayed',
'enabled',
'force',
@ -139,7 +138,6 @@ class AdminSettingController extends Controller
'add-logo-link' => '1',
'show-settings' => '0',
'loader-enabled' => '1',
'top-menu-mouse-over-hidden-label' => '0',
'always-displayed' => '0',
'enabled' => '1',
'force' => '0',
@ -207,6 +205,12 @@ class AdminSettingController extends Controller
}
}
foreach ($defaults as $key => $default) {
if (!array_key_exists($key, $config)) {
$config[$key] = $default;
}
}
$config['langs'] = $this->langRepository->getUsedLangs();
return new JSONResponse($config);

78
lib/Controller/PersonalSettingController.php
View file

@ -25,6 +25,7 @@ use OCP\AppFramework\Controller;
use OCP\AppFramework\Http\Attribute\FrontpageRoute;
use OCP\AppFramework\Http\Attribute\NoAdminRequired;
use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
use OCP\AppFramework\Http\JSONResponse;
use OCP\IConfig;
use OCP\IRequest;
use OCP\IUserSession;
@ -43,7 +44,7 @@ class PersonalSettingController extends Controller
#[NoCSRFRequired]
#[NoAdminRequired]
#[FrontpageRoute(verb: 'POST', url: '/personalSetting/valueSet')]
#[FrontpageRoute(verb: 'POST', url: '/user/valueSet')]
public function valueSet($name, $value): array
{
$doSave = false;
@ -65,22 +66,7 @@ class PersonalSettingController extends Controller
}
}
if ('target-blank-apps' === $name) {
$doSave = true;
$data = json_decode($value, true);
if (!is_array($data)) {
$doSave = false;
} else {
foreach ($data as $v) {
if (!is_string($v)) {
$doSave = false;
}
}
}
}
if (in_array($name, ['top-menu-apps', 'top-side-menu-apps', 'apps-order'])) {
if (in_array($name, ['target-blank-apps', 'top-menu-apps', 'top-side-menu-apps', 'apps-order'])) {
$doSave = true;
$data = json_decode($value, true);
@ -110,4 +96,62 @@ class PersonalSettingController extends Controller
return [];
}
#[NoCSRFRequired]
#[FrontpageRoute(verb: 'GET', url: '/user/config')]
public function configuration(): JSONResponse
{
$user = $this->userSession->getUser();
$keys = $this->config->getUserKeys($user->getUid(), Application::APP_ID);
$booleans = [
'enabled',
];
$arrays = [
'apps-order',
'target-blank-apps',
'top-menu-apps',
'top-side-menu-apps',
];
$integers = [
'target-blank-mode',
];
$defaults = [
'enabled' => '1',
'target-blank-mode' => '1',
'apps-order' => '[]',
'target-blank-apps' => '[]',
'top-menu-apps' => '[]',
'top-side-menu-apps' => '[]',
];
$config = [];
foreach ($keys as $key) {
if (!isset($defaults[$key])) {
continue;
}
if (in_array($key, $booleans)) {
$config[$key] = $this->configProxy->getUserValueBool($user, $key, $defaults[$key]);
} elseif (in_array($key, $arrays)) {
$config[$key] = $this->configProxy->getUserValueArray($user, $key, $defaults[$key]);
} elseif (in_array($key, $integers)) {
$config[$key] = $this->configProxy->getUserValueInt($user, $key, $defaults[$key]);
} else {
$config[$key] = $this->configProxy->getUserValue($user, $key, $defaults[$key]);
}
}
foreach ($defaults as $key => $default) {
if (!array_key_exists($key, $config)) {
$config[$key] = $default;
}
}
return new JSONResponse($config);
}
}

2
src/admin.js
View file

@ -21,7 +21,7 @@ import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { waitContainer } from './lib/dom.js'
import AdminSettings from './pages/AdminSettings.vue'
import AdminSettings from './pages/AdminSettings'
waitContainer('#side-menu-admin-settings').then((selector) => {
const pinia = createPinia()

90
src/components/settings/AdminSaveButton.vue Normal file
View file

@ -0,0 +1,90 @@
<template>
<div class="side-menu-setting-save">
<NcButton
variant="success"
@click="save"
>
<template v-if="!loading">
{{ t('side_menu', 'Save') }}
</template>
<NcLoadingIcon v-else />
</NcButton>
<div v-if="error" id="error">
</div>
</div>
</template>
<style scoped>
#error {
padding-top: 10px;
color: red;
}
</style>
<script setup>
import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
import { ref } from 'vue'
const loading = ref(false)
const error = ref(null)
const { config } = defineProps({
config: {
type: Object,
required: true,
},
})
const filterConfig = (value) => {
const result = {}
for (let key in value) {
if (['cache-categories', 'cache', 'langs', 'enabled'].includes(key) === false) {
result[key] = value[key]
}
}
return result
}
const save = async () => {
const data = filterConfig(config)
const size = Object.keys(data).length
let counter = 0
loading.value = true
error.value = null
const update = () => {
++counter;
if (counter === size) {
loading.value = false
if (!error.value) {
location.reload()
}
}
}
for (let key in data) {
let value = data[key]
if (Array.isArray(value) || typeof(value) === 'object') {
value = JSON.stringify(value)
} else if (typeof(value) === 'boolean') {
value = value ? 1 : 0
}
OCP.AppConfig.setValue('side_menu', key, value, {
success() {
update()
},
error() {
error.value = `Error while saving ${key}`
update()
}
})
}
}
</script>

11
src/components/settings/TableLabel.vue
View file

@ -27,7 +27,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template v-if="help">
<br />
<em>{{ help }}</em>
<em>{{ t('side_menu', help) }}</em>
</template>
<template v-if="help2">
<br />
<em>{{ t('side_menu', help2) }}</em>
</template>
</div>
</template>
@ -58,5 +62,10 @@ const { short, label } = defineProps({
required: false,
default: null,
},
help2: {
type: [String, null],
required: false,
default: null,
},
})
</script>

21
src/components/settings/TableRow.vue
View file

@ -15,7 +15,26 @@ You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div class="side-menu-setting-row">
<div
class="side-menu-setting-row"
:class="{'side-menu-setting-row--disabled': disabled }"
>
<slot></slot>
</div>
</template>
<style scoped>
.disabled {
display: block;
}
</style>
<script setup>
const { disabled } = defineProps({
disabled: {
type: Boolean,
required: false,
default: false,
}
})
</script>

97
src/components/settings/UserSaveButton.vue Normal file
View file

@ -0,0 +1,97 @@
<template>
<div class="side-menu-setting-save">
<NcButton
variant="success"
@click="save"
>
<template v-if="!loading">
{{ t('side_menu', 'Save') }}
</template>
<NcLoadingIcon v-else />
</NcButton>
<div v-if="error" id="error">
</div>
</div>
</template>
<style scoped>
#error {
padding-top: 10px;
color: red;
}
</style>
<script setup>
import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
import { ref } from 'vue'
const loading = ref(false)
const error = ref(null)
const { config } = defineProps({
config: {
type: Object,
required: true,
},
})
const filterConfig = (value) => {
const result = {}
for (let key in value) {
result[key] = value[key]
}
return result
}
const save = async () => {
const data = filterConfig(config)
const size = Object.keys(data).length
const url = OC.generateUrl('/apps/side_menu/user/valueSet')
let counter = 0
loading.value = true
error.value = null
const update = () => {
++counter;
if (counter === size) {
loading.value = false
if (!error.value) {
location.reload()
}
}
}
for (let key in data) {
let value = data[key]
let formData = []
if (Array.isArray(value) || typeof(value) === 'object') {
value = JSON.stringify(value)
} else if (typeof(value) === 'boolean') {
value = value ? 1 : 0
}
formData.push('name=' + encodeURIComponent(key))
formData.push('value=' + encodeURIComponent(value))
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: formData.join('&'),
})
.then(update)
.catch(() => {
error.value = `Error while saving ${key}`
update()
})
}
}
</script>

2
src/components/settings/form/FormAppPicker.vue
View file

@ -74,7 +74,7 @@ const closeModal = () => {
}
onMounted(async () => {
apps.value = await navStore.getApps()
apps.value = await navStore.getCoreApps()
})
</script>

2
src/components/settings/form/FormAppSort.vue
View file

@ -104,7 +104,7 @@ const update = () => {
}
onMounted(async () => {
const items = await navStore.getApps()
const items = await navStore.getCoreApps()
window.setTimeout(() => {
setApps(items)

5
src/components/settings/form/FormCatSort.vue
View file

@ -35,10 +35,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@end="update"
>
<template #item="{ element }">
<div class="draggable">
<div class="draggable" v-if="element.name !== ''">
<span class="arrow">⇅</span>
<span v-if="element.name !== ''">{{ element.name }}</span>
<span v-else>{{ t('side_menu', 'Other') }}</span>
{{ element.name }}
</div>
</template>
</draggable>

4
src/menus/SimpleSideMenu.vue
View file

@ -123,6 +123,8 @@ watch(
function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
const data = []
console.log(order)
items.forEach((item) => {
if (topMenuApps.includes(item.id) && !topSideMenuApps.includes(item.id)) {
return
@ -139,6 +141,8 @@ function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
data.push(item)
})
console.log(data)
return data.sort((a, b) => {
return a.order < b.order ? -1 : 1
})

60
src/pages/AdminSettings.vue
View file

@ -46,7 +46,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
</TableValue>
</TableRow>
<TableRow>
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
<TableLabel
label="Display the logo"
:middle="true"
@ -55,7 +55,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormYesNo v-model="config['display-logo']" />
</TableValue>
</TableRow>
<TableRow>
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
<TableLabel
label="Use the avatar instead of the logo"
:middle="true"
@ -64,7 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormYesNo v-model="config['use-avatar']" />
</TableValue>
</TableRow>
<TableRow>
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
<TableLabel
label="The logo is a link to the default app"
:middle="true"
@ -100,6 +100,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormSize v-model="config['size-text']" />
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('topMenu')">
@ -143,6 +144,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('apps')">
@ -175,12 +177,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormAppSort v-model="config['apps-order']" />
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('cats')">
<SectionTitle label="Categories" />
<TableRow>
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
<TableLabel
label="Order by"
:middle="true"
@ -190,13 +193,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-model="config['categories-order-type']"
:options="[
{ id: 'default', label: 'Name' },
{ id: 'custom', label: 'Customed' },
{ id: 'custom', label: 'Custom' },
]"
/>
</TableValue>
</TableRow>
<TableRow>
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
<TableLabel
label="Customize sorting"
:middle="true"
/>
<TableValue>
<FormCatSort v-model="config['categories-order']" />
</TableValue>
</TableRow>
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
<TableLabel
label="Customize application categories"
:top="true"
@ -213,15 +224,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Customize sorting"
:middle="true"
/>
<TableValue>
<FormCatSort v-model="config['categories-order']" />
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('opener')">
@ -272,13 +275,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<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>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('colors')">
@ -415,9 +418,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('global')">
<p class="side-menu-tips">
<em>{{ t('side_menu', 'Use the shortcut Ctrl+o to open and to hide the side menu. Use tab key to navigate.') }}</em>
</p>
<SectionTitle label="Global" />
<TableRow>
@ -450,6 +458,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<FormYesNo v-model="config['loader-enabled']" />
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
<TableContainer :class="sectionClass('support')">
@ -557,6 +566,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</NcModal>
</TableValue>
</TableRow>
<AdminSaveButton :config="config" />
</TableContainer>
</NcAppContent>
</NcContent>
@ -572,6 +582,7 @@ import TableRow from '../components/settings/TableRow'
import TableLabel from '../components/settings/TableLabel'
import TableValue from '../components/settings/TableValue'
import SectionTitle from '../components/settings/SectionTitle'
import AdminSaveButton from '../components/settings/AdminSaveButton'
import FormRange from '../components/settings/form/FormRange'
import FormColorPicker from '../components/settings/form/FormColorPicker'
import FormOpener from '../components/settings/form/FormOpener'
@ -587,11 +598,11 @@ import FormAppCategory from '../components/settings/form/FormAppCategory'
const menu = [
{ label: 'Global', section: 'global' },
{ label: 'Panel', section: 'panel' },
{ label: 'Top menu', section: 'topMenu' },
{ label: 'Colors', section: 'colors' },
{ label: 'Opener', section: 'opener' },
{ label: 'Applications', section: 'apps' },
{ label: 'Categories', section: 'cats' },
{ label: 'Top menu', section: 'topMenu' },
{ label: 'Support', section: 'support' },
]
@ -599,9 +610,11 @@ const config = ref(null)
const showConfig = ref(false)
const configCopied = ref(false)
const configStore = useConfigStore()
const section = ref(menu[0].section)
const section = ref(null)
const setSection = (value) => {
sessionStorage.setItem('side_menu_section', value)
section.value = value
}
@ -629,7 +642,7 @@ const filterConfig = (value) => {
const result = {}
for (let key in value) {
if (['cache-categories', 'cache'].includes(key) === false) {
if (['cache-categories', 'cache', 'langs', 'enabled'].includes(key) === false) {
result[key] = value[key]
}
}
@ -639,6 +652,8 @@ const filterConfig = (value) => {
onMounted(async () => {
config.value = await configStore.getAppConfig()
setSection(sessionStorage.getItem('side_menu_section') ?? menu[0].section)
})
</script>
@ -670,4 +685,9 @@ onMounted(async () => {
display: inline-block;
margin-right: 5px;
}
.save {
display: block;
float: right
}
</style>

171
src/pages/UserSettings.vue Normal file
View file

@ -0,0 +1,171 @@
<!--
@license GNU AGPL version 3 or any later version
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<NcContent
v-if="config"
app-name="side_menu"
>
<NcAppContent class="side-menu-setting-app" v-if="config['force']">
<TableContainer>
<TableLabel label="You do not have permission to change the settings." />
</TableContainer>
</NcAppContent>
<NcAppContent v-else class="side-menu-setting-app side-menu-setting-app--user">
<TableContainer>
<SectionTitle label="Menu" />
<TableRow>
<TableLabel
label="Enable the custom menu"
:middle="true"
/>
<TableValue>
<FormYesNo v-model="config['enabled']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Applications kept in the top menu"
help="If there is no selection then the global configuration is applied."
:middle="true"
/>
<TableValue>
<FormAppPicker v-model="config['top-menu-apps']" />
</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."
help2="If there is no selection then the global configuration is applied"
:middle="true"
/>
<TableValue>
<FormAppPicker v-model="config['top-side-menu-apps']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Open apps in new tab"
:middle="true"
/>
<TableValue>
<FormSelect v-model="config['target-blank-mode']" :options="[
{id: 1, label: 'Use the global setting'},
{id: 2, label: 'Use my selection'},
]" />
<FormAppPicker v-if="config['target-blank-mode'] === 2" v-model="config['target-blank-apps']" />
</TableValue>
</TableRow>
<TableRow>
<TableLabel
label="Customize sorting"
:top="true"
/>
<TableValue>
<FormAppSort v-model="config['apps-order']" />
</TableValue>
</TableRow>
</TableContainer>
<TableContainer>
<SectionTitle label="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>
<UserSaveButton :config="config" />
</TableContainer>
</NcAppContent>
</NcContent>
</template>
<script setup>
import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
import { ref, onMounted } from 'vue'
import { useConfigStore } from '../store/config.js'
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 SectionTitle from '../components/settings/SectionTitle'
import UserSaveButton from '../components/settings/UserSaveButton'
import FormYesNo from '../components/settings/form/FormYesNo'
import FormAppPicker from '../components/settings/form/FormAppPicker'
import FormAppSort from '../components/settings/form/FormAppSort'
import FormSelect from '../components/settings/form/FormSelect'
const config = ref(null)
const configStore = useConfigStore()
const trans = (value) => {
return t('side_menu', value)
}
onMounted(async () => {
config.value = await configStore.getUserConfig()
})
</script>
<style scoped>
.hidden {
display: none;
}
.button-inline button {
display: inline-block;
margin-right: 5px;
}
.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;
}
.save {
display: block;
float: right
}
</style>

24
src/scss/admin.scss
View file

@ -120,16 +120,10 @@
.side-menu-setting-row {
display: table;
margin-bottom: 10px;
}
.side-menu-setting-row code {
margin-left: 2px;
margin-bottom: 1px;
padding: 3px 10px;
border-radius: 5px;
display: inline-block;
right: 2px;
border: 1px solid var(--color-border-dark);
&--disabled {
opacity: 0.5;
}
}
.side-menu-setting-label {
@ -256,6 +250,10 @@
.side-menu-setting-app {
display: flex;
&--user {
display: block;
}
}
.side-menu-setting {
@ -264,3 +262,11 @@
flex-direction: column;
gap: 6px;
}
.side-menu-setting-save {
margin-top: 30px;
}
.side-menu-tips {
margin-bottom: 15px;
}

5
src/scss/menu.scss
View file

@ -76,11 +76,6 @@
padding: 10px 0;
}
}
&.side-menu-big,
&.side-menu-with-categories {
height: auto;
}
}
#header {

28
src/store/config.js
View file

@ -21,31 +21,37 @@ import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
export const useConfigStore = defineStore('config', () => {
const config = ref(null)
const appConfig = ref(null)
let config = null
let appConfig = null
let userConfig = null
async function getConfig() {
if (config.value !== null) {
return config.value
if (config === null) {
config = await axios.get(generateUrl('/apps/side_menu/js/config')).then((response) => response.data)
}
config.value = await axios.get(generateUrl('/apps/side_menu/js/config')).then((response) => response.data)
return config.value
return config
}
async function getAppConfig() {
if (appConfig.value !== null) {
return appConfig.value
if (appConfig === null) {
appConfig = await axios.get(generateUrl('/apps/side_menu/admin/config')).then((response) => response.data)
}
appConfig.value = await axios.get(generateUrl('/apps/side_menu/admin/config')).then((response) => response.data)
return appConfig
}
return appConfig.value
async function getUserConfig() {
if (userConfig === null) {
userConfig = await axios.get(generateUrl('/apps/side_menu/user/config')).then((response) => response.data)
}
return userConfig
}
return {
getConfig,
getAppConfig,
getUserConfig,
}
})

32
src/user.js Normal file
View file

@ -0,0 +1,32 @@
/**
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import './scss/admin.scss'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { waitContainer } from './lib/dom.js'
import UserSettings from './pages/UserSettings'
waitContainer('#side-menu-user-settings').then((selector) => {
const pinia = createPinia()
const app = createApp(UserSettings)
app.use(pinia)
app.mixin({ methods: { t, n } })
app.mount(selector)
})

249
templates/settings/personal-form.php
View file

@ -16,250 +16,11 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
vendor_script('side_menu', 'html5sortable.min');
script('side_menu', 'admin');
style('side_menu', 'admin');
use OCP\IURLGenerator;
use OCP\IConfig;
use OCA\SideMenu\AppInfo\Application;
$choicesYesNo = [
'No' => '0',
'Yes' => '1',
];
$labelShowHideApps = 'Show and hide the list of applications';
$labelReset = 'Reset to default';
script('side_menu', 'side_menu-user');
?>
<div id="side-menu-section">
<?php if ($_['force']): ?>
<div class="section">
<h2>
<?php p($l->t('Menu')); ?>
</h2>
<p>
<em><?php echo $l->t('You do not have permission to change the settings.'); ?></em>
</p>
</div>
<?php else: ?>
<div class="section">
<p>
<em><?php echo $l->t('Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'); ?></em>
</p>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Enable the custom menu')); ?>
</div>
<div class="side-menu-setting-form">
<select id="side-menu-enabled" name="enabled" class="side-menu-setting" data-personal>
<?php foreach ($choicesYesNo as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['enabled']): ?>selected<?php endif; ?>>
<?php echo $l->t($label); ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Open apps in new tab')); ?>
</div>
<div class="side-menu-setting-form">
<?php $choices = [
'Use the global setting' => '1',
'Use my selection' => '2',
]; ?>
<select id="side-menu-loader-enabled" name="target-blank-mode" class="side-menu-setting" data-personal>
<?php foreach ($choices as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['target-blank-mode']): ?>selected<?php endif; ?>>
<?php echo $l->t($label); ?>
</option>
<?php endforeach; ?>
</select>
<p>
<a class="side-menu-toggler" data-target="#target-blank-apps" href="#_">
🖱️ <?php p($l->t($labelShowHideApps)); ?>
</a>
</p>
<div class="side-menu-setting" data-name="target-blank-apps" id="target-blank-apps" data-personal data-checkbox style="display: none">
<ul class="side-menu-setting-list">
<?php foreach ($_['apps'] as $app): ?>
<li class="side-menu-setting-list-item">
<input
type="checkbox"
name="target-blank-apps[]"
value="<?php echo $app['id'] ?>"
id="target-blank-app-<?php echo $app['id'] ?>"
<?php if (in_array($app['id'], $_['target-blank-apps'])): ?>checked<?php endif; ?>
/>
<label for="target-blank-app-<?php echo $app['id'] ?>">
<?php echo p($l->t($app['name'])); ?>
</label>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h2>
<?php p($l->t('Top menu')); ?>
</h2>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Applications kept in the top menu')); ?>
<p>
<em>
<?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
</em>
</p>
</div>
<div class="side-menu-setting-form">
<p>
<a class="side-menu-toggler" data-target="#top-menu-apps" href="#_">
🖱️ <?php p($l->t($labelShowHideApps)); ?>
</a>
</p>
<div class="side-menu-setting" data-name="top-menu-apps" data-checkbox data-personal id="top-menu-apps" style="display: none">
<ul class="side-menu-setting-list">
<?php foreach ($_['apps'] as $app): ?>
<li class="side-menu-setting-list-item">
<input
type="checkbox"
name="top-menu-apps[]"
value="<?php echo $app['id'] ?>"
id="top-menu-app-<?php echo $app['id'] ?>"
<?php if (in_array($app['id'], $_['top-menu-apps'])): ?>checked<?php endif; ?>
/>
<label for="top-menu-app-<?php echo $app['id'] ?>">
<?php echo $app['name'] ?>
</label>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
</div>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
<p>
<em>
<?php p($l->t('These applications must be selected in the previous option.')); ?><br>
<?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
</em>
</p>
</div>
<div class="side-menu-setting-form">
<p>
<a class="side-menu-toggler" data-target="#top-side-menu-apps" href="#_">
🖱️ <?php p($l->t($labelShowHideApps)); ?>
</a>
</p>
<div class="side-menu-setting" data-name="top-side-menu-apps" data-checkbox data-personal id="top-side-menu-apps" style="display: none">
<ul class="side-menu-setting-list">
<?php foreach ($_['apps'] as $app): ?>
<li class="side-menu-setting-list-item">
<input
type="checkbox"
name="top-side-menu-apps[]"
value="<?php echo $app['id'] ?>"
id="top-side-menu-app-<?php echo $app['id'] ?>"
<?php if (in_array($app['id'], $_['top-side-menu-apps'])): ?>checked<?php endif; ?>
/>
<label for="top-side-menu-app-<?php echo $app['id'] ?>">
<?php echo $app['name'] ?>
</label>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h2>
<?php p($l->t('Applications')); ?>
</h2>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Customize sorting')); ?>
</div>
<div class="side-menu-setting-form">
<a class="side-menu-toggler" data-target="#apps-order-list" href="#_">
🖱️ <?php p($l->t($labelShowHideApps)); ?>
</a>
<div class="theme-undo icon icon-history btn-reset btn-reset--down" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
'side-menu-apps-order' => '[]',
])) ?>"></div>
<div id="apps-order-list" style="display: none">
<ul class="side-menu-setting-list">
<?php foreach ($_['ordered-apps'] as $key => $app): ?>
<li data-id="<?php echo $app['id']; ?>" class="side-menu-setting-list-item">
<span class="arrow">
⇅
</span>
<?php echo p($l->t($app['name'])); ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<input type="hidden" value='<?php echo json_encode($_['apps-order']) ?>' name="apps-order" class="side-menu-setting" id="side-menu-apps-order" data-personal>
</div>
</div>
</div>
</div>
<?php endif ?>
<div class="section">
<?php if (!$_['force']): ?>
<button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
<?php p($l->t('Save')); ?>
<progress max="100" value="0" id="side-menu-save-progress"></progress>
</button>
<span id="side-menu-message" class="msg"></span>
<div style="height: 30px"></div>
<?php endif ?>
<div>
<span for="side-menu-opener">
<?php p($l->t('You like this app and you want to support me?')); ?>
<a style="margin-left: 10px" target="_blank" href="https://www.buymeacoffee.com/deblan" rel="noopener">
<button arial-label="<?php p($l->t('Buy me a coffee ☕')); ?>">
<?php p($l->t('Buy me a coffee ☕')); ?>
</button>
</a>
</span>
</div>
</div>
</div>
<div id="side-menu-user-settings"></div>

265
templates/settings/personal-form.php.bk Normal file
View file

@ -0,0 +1,265 @@
<?php
/**
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
vendor_script('side_menu', 'html5sortable.min');
script('side_menu', 'admin');
style('side_menu', 'admin');
$choicesYesNo = [
'No' => '0',
'Yes' => '1',
];
$labelShowHideApps = 'Show and hide the list of applications';
$labelReset = 'Reset to default';
?>
<div id="side-menu-section">
<?php if ($_['force']): ?>
<div class="section">
<h2>
<?php p($l->t('Menu')); ?>
</h2>
<p>
<em><?php echo $l->t('You do not have permission to change the settings.'); ?></em>
</p>
</div>
<?php else: ?>
<div class="section">
<p>
<em><?php echo $l->t('Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'); ?></em>
</p>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Enable the custom menu')); ?>
</div>
<div class="side-menu-setting-form">
<select id="side-menu-enabled" name="enabled" class="side-menu-setting" data-personal>
<?php foreach ($choicesYesNo as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['enabled']): ?>selected<?php endif; ?>>
<?php echo $l->t($label); ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Open apps in new tab')); ?>
</div>
<div class="side-menu-setting-form">
<?php $choices = [
'Use the global setting' => '1',
'Use my selection' => '2',
]; ?>
<select id="side-menu-loader-enabled" name="target-blank-mode" class="side-menu-setting" data-personal>
<?php foreach ($choices as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['target-blank-mode']): ?>selected<?php endif; ?>>
<?php echo $l->t($label); ?>
</option>
<?php endforeach; ?>
</select>
<p>
<a class="side-menu-toggler" data-target="#target-blank-apps" href="#_">
🖱️ <?php p($l->t($labelShowHideApps)); ?>
</a>
</p>
<div class="side-menu-setting" data-name="target-blank-apps" id="target-blank-apps" data-personal data-checkbox style="display: none">
<ul class="side-menu-setting-list">
<?php foreach ($_['apps'] as $app): ?>
<li class="side-menu-setting-list-item">
<input
type="checkbox"
name="target-blank-apps[]"
value="<?php echo $app['id'] ?>"
id="target-blank-app-<?php echo $app['id'] ?>"
<?php if (in_array($app['id'], $_['target-blank-apps'])): ?>checked<?php endif; ?>
/>
<label for="target-blank-app-<?php echo $app['id'] ?>">
<?php echo p($l->t($app['name'])); ?>
</label>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h2>
<?php p($l->t('Top menu')); ?>
</h2>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Applications kept in the top menu')); ?>
<p>
<em>
<?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
</em>
</p>
</div>
<div class="side-menu-setting-form">
<p>
<a class="side-menu-toggler" data-target="#top-menu-apps" href="#_">
🖱️ <?php p($l->t($labelShowHideApps)); ?>
</a>
</p>
<div class="side-menu-setting" data-name="top-menu-apps" data-checkbox data-personal id="top-menu-apps" style="display: none">
<ul class="side-menu-setting-list">
<?php foreach ($_['apps'] as $app): ?>
<li class="side-menu-setting-list-item">
<input
type="checkbox"
name="top-menu-apps[]"
value="<?php echo $app['id'] ?>"
id="top-menu-app-<?php echo $app['id'] ?>"
<?php if (in_array($app['id'], $_['top-menu-apps'])): ?>checked<?php endif; ?>
/>
<label for="top-menu-app-<?php echo $app['id'] ?>">
<?php echo $app['name'] ?>
</label>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
</div>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
<p>
<em>
<?php p($l->t('These applications must be selected in the previous option.')); ?><br>
<?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
</em>
</p>
</div>
<div class="side-menu-setting-form">
<p>
<a class="side-menu-toggler" data-target="#top-side-menu-apps" href="#_">
🖱️ <?php p($l->t($labelShowHideApps)); ?>
</a>
</p>
<div class="side-menu-setting" data-name="top-side-menu-apps" data-checkbox data-personal id="top-side-menu-apps" style="display: none">
<ul class="side-menu-setting-list">
<?php foreach ($_['apps'] as $app): ?>
<li class="side-menu-setting-list-item">
<input
type="checkbox"
name="top-side-menu-apps[]"
value="<?php echo $app['id'] ?>"
id="top-side-menu-app-<?php echo $app['id'] ?>"
<?php if (in_array($app['id'], $_['top-side-menu-apps'])): ?>checked<?php endif; ?>
/>
<label for="top-side-menu-app-<?php echo $app['id'] ?>">
<?php echo $app['name'] ?>
</label>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h2>
<?php p($l->t('Applications')); ?>
</h2>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Customize sorting')); ?>
</div>
<div class="side-menu-setting-form">
<a class="side-menu-toggler" data-target="#apps-order-list" href="#_">
🖱️ <?php p($l->t($labelShowHideApps)); ?>
</a>
<div class="theme-undo icon icon-history btn-reset btn-reset--down" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
'side-menu-apps-order' => '[]',
])) ?>"></div>
<div id="apps-order-list" style="display: none">
<ul class="side-menu-setting-list">
<?php foreach ($_['ordered-apps'] as $key => $app): ?>
<li data-id="<?php echo $app['id']; ?>" class="side-menu-setting-list-item">
<span class="arrow">
⇅
</span>
<?php echo p($l->t($app['name'])); ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<input type="hidden" value='<?php echo json_encode($_['apps-order']) ?>' name="apps-order" class="side-menu-setting" id="side-menu-apps-order" data-personal>
</div>
</div>
</div>
</div>
<?php endif ?>
<div class="section">
<?php if (!$_['force']): ?>
<button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
<?php p($l->t('Save')); ?>
<progress max="100" value="0" id="side-menu-save-progress"></progress>
</button>
<span id="side-menu-message" class="msg"></span>
<div style="height: 30px"></div>
<?php endif ?>
<div>
<span for="side-menu-opener">
<?php p($l->t('You like this app and you want to support me?')); ?>
<a style="margin-left: 10px" target="_blank" href="https://www.buymeacoffee.com/deblan" rel="noopener">
<button arial-label="<?php p($l->t('Buy me a coffee ☕')); ?>">
<?php p($l->t('Buy me a coffee ☕')); ?>
</button>
</a>
</span>
</div>
</div>
</div>

1
webpack.config.js
View file

@ -17,6 +17,7 @@ module.exports = {
entry: {
menu: path.resolve(path.join('src', 'menu.js')),
admin: path.resolve(path.join('src', 'admin.js')),
user: path.resolve(path.join('src', 'user.js')),
},
output: {
path: path.resolve('./js'),