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>

src/pages/AdminSettings.vue

@@ -31,6 +31,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <TableContainer :class="sectionClass('panel')">
+        <TableRow>
+          <TableLabel label="Display" />
+          <TableValue>
+            <FormDisplayPicker
+              :alwaysDisplayed="config['always-displayed']"
+              :topWideMenu="config['big-menu']"
+              :sideMenuWithCategories="config['side-with-categories']"
+
+              @update:alwaysDisplayed="(value) => config['always-displayed'] = value"
+              @update:topWideMenu="(value) => config['big-menu'] = value"
+              @update:sideMenuWithCategories="(value) => config['side-with-categories'] = value"
+            />
+          </TableValue>
+        </TableRow>
         <TableRow>
           <TableLabel
             label="Display the logo"
@@ -85,15 +99,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <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('topMenu')">
@@ -370,6 +375,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormYesNo v-model="config['force']" />
           </TableValue>
         </TableRow>
+
+        <TableRow>
+          <TableLabel
+            label="Loader enabled"
+            :middle="true"
+          />
+          <TableValue>
+            <FormYesNo v-model="config['loader-enabled']" />
+          </TableValue>
+        </TableRow>
       </TableContainer>
 
       <TableContainer :class="sectionClass('support')">
@@ -498,14 +513,15 @@ 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'
+import FormDisplayPicker from '../components/settings/form/FormDisplayPicker'
 
 const menu = [
   { label: 'Global', section: 'global' },
   { label: 'Panel', section: 'panel' },
-  { label: 'Applications', section: 'apps' },
+  { label: 'Top menu', section: 'topMenu' },
   { label: 'Colors', section: 'colors' },
   { label: 'Opener', section: 'opener' },
-  { label: 'Top menu', section: 'topMenu' },
+  { label: 'Applications', section: 'apps' },
   { label: 'Support', section: 'support' },
 ]
 

src/scss/admin.scss

@@ -227,7 +227,7 @@
 .side-menu-setting {
   padding: 20px;
   display: flex;
-  gap: 5px;
+  gap: 4px;
 }
 
 .side-menu-setting-color-picker {