add display picker

src/components/settings/form/FormAppPicker.vue

@@ -25,6 +25,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
   <NcModal
     v-if="modal"
+    size="small"
     @close="closeModal"
   >
     <div class="modal__content">

src/components/settings/form/FormDisplayPicker.vue

@@ -0,0 +1,70 @@
+<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>