Simon Vieille
71 lines
2.3 KiB
Vue
71 lines
2.3 KiB
Vue
<template>
|
|
<NcButton @click="update(false, false, false)" :variant="is(false, false, false) ? 'primary' : 'seconday'">
|
|
{{ t('side_menu', 'Default') }}
|
|
</NcButton>
|
|
<NcButton @click="update(true, false, false)" :variant="is(true, false, false) ? 'primary' : 'seconday'">
|
|
{{ t('side_menu', 'Always displayed') }}
|
|
</NcButton>
|
|
<NcButton @click="update(false, true, false)" :variant="is(false, true, false) ? 'primary' : 'seconday'">
|
|
{{ t('side_menu', 'Big menu') }}
|
|
</NcButton>
|
|
<NcButton @click="update(false, false, true)" :variant="is(false, false, true) ? 'primary' : 'seconday'">
|
|
{{ t('side_menu', 'With categories') }}
|
|
</NcButton>
|
|
|
|
<p>
|
|
<img v-if="is(false, false, false)" class="side-menu-display" :src="DefaultImg" />
|
|
<img v-if="is(true, false, false)" class="side-menu-display" :src="AlwaysDisplayedImg" />
|
|
<img v-if="is(false, true, false)" class="side-menu-display" :src="TopWideImg" />
|
|
<img v-if="is(false, false, true)" class="side-menu-display" :src="SideMenuWithCategoriesImg" />
|
|
</p>
|
|
</template>
|
|
<style scoped>
|
|
button {
|
|
display: inline-block !important;
|
|
margin: 2px;
|
|
}
|
|
</style>
|
|
|
|
<script setup>
|
|
import { NcButton } from '@nextcloud/vue'
|
|
|
|
import AlwaysDisplayedImg from '../../../../img/admin/layout-always-displayed.svg'
|
|
import TopWideImg from '../../../../img/admin/layout-big-menu.svg'
|
|
import SideMenuWithCategoriesImg from '../../../../img/admin/layout-side-menu-with-categories.svg'
|
|
import DefaultImg from '../../../../img/admin/layout-default.svg'
|
|
|
|
const emit = defineEmits([
|
|
'update:alwaysDisplayed',
|
|
'update:topWideMenu',
|
|
'update:sideMenuWithCategories',
|
|
])
|
|
|
|
const { alwaysDisplayed, topWideMenu, sideMenuWithCategories } = defineProps({
|
|
alwaysDisplayed: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
topWideMenu: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
sideMenuWithCategories: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const update = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
|
|
emit('update:alwaysDisplayed', isAlwayDisplayed)
|
|
emit('update:topWideMenu', isTopWideMenu)
|
|
emit('update:sideMenuWithCategories', isSideMenuWithCategories)
|
|
}
|
|
|
|
const is = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
|
|
return isAlwayDisplayed === alwaysDisplayed
|
|
&& isTopWideMenu === topWideMenu
|
|
&& isSideMenuWithCategories === sideMenuWithCategories
|
|
}
|
|
|
|
</script>
|