add app orderer

This commit is contained in:
Simon Vieille
2025-04-12 14:58:40 +02:00
parent c8eed69672
commit ab64a13fc1
6 changed files with 215 additions and 54 deletions
@@ -1,22 +1,50 @@
<template>
<NcButton :variant="is(false, false, false) ? 'primary' : 'seconday'" @click="update(false, false, false)">
<NcButton
:variant="is(false, false, false) ? 'primary' : 'seconday'"
@click="update(false, false, false)"
>
{{ t('side_menu', 'Default') }}
</NcButton>
<NcButton :variant="is(true, false, false) ? 'primary' : 'seconday'" @click="update(true, false, false)">
<NcButton
:variant="is(true, false, false) ? 'primary' : 'seconday'"
@click="update(true, false, false)"
>
{{ t('side_menu', 'Always displayed') }}
</NcButton>
<NcButton :variant="is(false, true, false) ? 'primary' : 'seconday'" @click="update(false, true, false)">
<NcButton
:variant="is(false, true, false) ? 'primary' : 'seconday'"
@click="update(false, true, false)"
>
{{ t('side_menu', 'Big menu') }}
</NcButton>
<NcButton :variant="is(false, false, true) ? 'primary' : 'seconday'" @click="update(false, false, true)">
<NcButton
:variant="is(false, false, true) ? 'primary' : 'seconday'"
@click="update(false, false, true)"
>
{{ 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" />
<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>
<script setup>
@@ -27,11 +55,7 @@ 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 emit = defineEmits(['update:alwaysDisplayed', 'update:topWideMenu', 'update:sideMenuWithCategories'])
const { alwaysDisplayed, topWideMenu, sideMenuWithCategories } = defineProps({
alwaysDisplayed: {
@@ -55,11 +79,8 @@ const update = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
}
const is = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
return isAlwayDisplayed === alwaysDisplayed
&& isTopWideMenu === topWideMenu
&& isSideMenuWithCategories === sideMenuWithCategories
return isAlwayDisplayed === alwaysDisplayed && isTopWideMenu === topWideMenu && isSideMenuWithCategories === sideMenuWithCategories
}
</script>
<style scoped>