nextcloud · christianlupus · Dec 14, 2022 · Oct 18, 2022 · Oct 18, 2022 · Oct 18, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,10 @@
 - Allow import of recipes with HowToSections
   [#1255](https://github.com/nextcloud/cookbook/pull/1255) @christianlupus
 
+### Changed
+- Add an app configuration (settings modal) to replace the one in the sidebar
+  [#1258](https://github.com/nextcloud/cookbook/pull/1258) @MarcelRobitaille
+
 
 ## 0.9.17 - 2022-10-31
 

diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "@nextcloud/event-bus": "3.0.2",
     "@nextcloud/moment": "^1.1.1",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^7.0.1",
+    "@nextcloud/vue": "^7.1.0",
     "caret-pos": "2.0.0",
     "linkifyjs": "^4.0.0",
     "lozad": "^1.16.0",

diff --git a/src/components/AppMain.vue b/src/components/AppMain.vue
@@ -16,6 +16,7 @@
             />
         </NcAppContent>
         <dialogs-wrapper></dialogs-wrapper>
+        <SettingsDialog />
     </NcContent>
 </template>
 
@@ -26,13 +27,15 @@ import NcContent from "@nextcloud/vue/dist/Components/NcContent"
 import AppControls from "cookbook/components/AppControls/AppControls.vue"
 import { emit, subscribe, unsubscribe } from "@nextcloud/event-bus"
 import AppNavi from "./AppNavi.vue"
+import SettingsDialog from "./SettingsDialog.vue"
 
 export default {
     name: "AppMain",
     components: {
         NcAppContent,
         AppControls,
         AppNavi,
+        SettingsDialog,
         // eslint-disable-next-line vue/no-reserved-component-names
         NcContent,
     },

diff --git a/src/components/AppNavi.vue b/src/components/AppNavi.vue
@@ -73,15 +73,18 @@
         </template>
 
         <template slot="footer">
-            <AppSettings
-                :scanning-library="scanningLibrary"
-                @reindex="reindex"
+            <NcAppNavigationNew
+                :text="t('cookbook', 'Cookbook settings')"
+                :button-class="['create', 'icon-settings']"
+                @click="handleOpenSettings"
             />
         </template>
     </NcAppNavigation>
 </template>
 
 <script>
+import { emit } from "@nextcloud/event-bus"
+
 import NcActionInput from "@nextcloud/vue/dist/Components/NcActionInput"
 import NcAppNavigation from "@nextcloud/vue/dist/Components/NcAppNavigation"
 import NcAppNavigationItem from "@nextcloud/vue/dist/Components/NcAppNavigationItem"
@@ -96,7 +99,7 @@ import api from "cookbook/js/api-interface"
 import helpers from "cookbook/js/helper"
 import { showSimpleAlertModal } from "cookbook/js/modals"
 
-import AppSettings from "./AppSettings.vue"
+import { SHOW_SETTINGS_EVENT } from "./SettingsDialog.vue"
 import AppNavigationCaption from "./AppNavigationCaption.vue"
 
 export default {
@@ -107,7 +110,6 @@ export default {
         NcAppNavigationItem,
         NcAppNavigationNew,
         NcCounterBubble,
-        AppSettings,
         AppNavigationCaption,
         PlusIcon,
     },
@@ -118,7 +120,6 @@ export default {
             downloading: false,
             isCategoryUpdating: [],
             loading: { categories: true },
-            scanningLibrary: false,
             uncatRecipes: 0,
         }
     },
@@ -344,40 +345,6 @@ export default {
             }
         },
 
-        /**
-         * Reindex all recipes
-         */
-        reindex() {
-            this.$log.debug("Calling reindex")
-            const $this = this
-            if (this.scanningLibrary) {
-                // No repeat clicks until we're done
-                return
-            }
-            this.scanningLibrary = true
-            api.recipes
-                .reindex()
-                .then(() => {
-                    $this.scanningLibrary = false
-                    // eslint-disable-next-line no-console
-                    console.log("Library reindexing complete")
-                    if (
-                        ["index", "search"].indexOf(this.$store.state.page) > -1
-                    ) {
-                        // This refreshes the current router view in case items in it changed during reindex
-                        $this.$router.go()
-                    } else {
-                        this.$log.debug("Calling getCategories from reindex")
-                        $this.getCategories()
-                    }
-                })
-                .catch(() => {
-                    $this.scanningLibrary = false
-                    // eslint-disable-next-line no-console
-                    console.log("Library reindexing failed!")
-                })
-        },
-
         /**
          * Set loading recipe index to show the loading icon
          */
@@ -393,6 +360,10 @@ export default {
                 isVisible: !this.$store.state.appNavigation.visible,
             })
         },
+
+        handleOpenSettings() {
+            emit(SHOW_SETTINGS_EVENT)
+        },
     },
 }
 </script>

diff --git a/src/components/AppSettings.vue → src/components/SettingsDialog.vue b/src/components/AppSettings.vue → src/components/SettingsDialog.vue
@@ -1,19 +1,25 @@
 <template>
-    <NcAppNavigationSettings :open="true">
-        <div id="app-settings">
+    <NcAppSettingsDialog
+        :open.sync="isOpen"
+        :title="t('cookbook', 'Cookbook settings')"
+        :show-navigation="true"
+        first-selected-section="keyboard shortcuts"
+    >
+        <NcAppSettingsSection
+            id="settings-recipe-folder"
+            :title="t('cookbook', 'Recipe folder')"
+            class="app-settings-section"
+        >
             <fieldset>
                 <ul>
                     <li>
-                        <NcActionButton
-                            class="button"
-                            :icon="
-                                scanningLibrary
-                                    ? 'icon-loading-small'
-                                    : 'icon-history'
-                            "
-                            :title="t('cookbook', 'Rescan library')"
-                            @click="$emit('reindex')"
-                        />
+                        <NcButton @click="reindex">
+                            <template #icon>
+                                <LoadingIcon v-if="scanningLibrary" />
+                                <ReloadIcon v-else />
+                            </template>
+                            {{ t("cookbook", "Rescan library") }}
+                        </NcButton>
                     </li>
                     <li>
                         <label class="settings-input">{{
@@ -37,6 +43,16 @@
                             placeholder="0"
                         />
                     </li>
+                </ul>
+            </fieldset>
+        </NcAppSettingsSection>
+        <NcAppSettingsSection
+            id="settings-recipe-display"
+            :title="t('cookbook', 'Recipe display settings')"
+            class="app-settings-section"
+        >
+            <fieldset>
+                <ul>
                     <li>
                         <input
                             id="recipe-print-image"
@@ -64,36 +80,42 @@
                     </li>
                 </ul>
             </fieldset>
-        </div>
-    </NcAppNavigationSettings>
+        </NcAppSettingsSection>
+    </NcAppSettingsDialog>
 </template>
 
 <script>
-import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton"
-import NcAppNavigationSettings from "@nextcloud/vue/dist/Components/NcAppNavigationSettings"
+import { subscribe, unsubscribe } from "@nextcloud/event-bus"
+
+import NcAppSettingsDialog from "@nextcloud/vue/dist/Components/NcAppSettingsDialog"
+import NcAppSettingsSection from "@nextcloud/vue/dist/Components/NcAppSettingsSection"
+import NcButton from "@nextcloud/vue/dist/Components/NcButton"
+import LoadingIcon from "icons/Loading.vue"
+import ReloadIcon from "icons/Cached.vue"
 
 import api from "cookbook/js/api-interface"
 import { showSimpleAlertModal } from "cookbook/js/modals"
 
+export const SHOW_SETTINGS_EVENT = "show-settings"
+
 export default {
-    name: "AppSettings",
+    name: "SettingsDialog",
     components: {
-        NcActionButton,
-        NcAppNavigationSettings,
-    },
-    props: {
-        scanningLibrary: {
-            type: Boolean,
-            default: false,
-        },
+        NcButton,
+        NcAppSettingsDialog,
+        NcAppSettingsSection,
+        LoadingIcon,
+        ReloadIcon,
     },
     data() {
         return {
+            isOpen: false,
             printImage: false,
             recipeFolder: "",
             resetPrintImage: true,
             showTagCloudInRecipeList: true,
             resetTagCloud: true,
+            scanningLibrary: false,
             // By setting the reset value initially to true, it will skip one watch event
             // (the one when config is loaded at page load)
             resetInterval: true,
@@ -150,8 +172,14 @@ export default {
     },
     mounted() {
         this.setup()
+
+        subscribe(SHOW_SETTINGS_EVENT, this.handleShowSettings)
     },
     methods: {
+        handleShowSettings() {
+            this.isOpen = true
+        },
+
         /**
          * Select a recipe folder using the Nextcloud file picker
          */
@@ -209,27 +237,72 @@ export default {
                 )
             }
         },
+
+        /**
+         * Reindex all recipes
+         */
+        reindex() {
+            const $this = this
+            if (this.scanningLibrary) {
+                // No repeat clicks until we're done
+                return
+            }
+            this.scanningLibrary = true
+            api.recipes
+                .reindex()
+                .then(() => {
+                    $this.scanningLibrary = false
+                    // eslint-disable-next-line no-console
+                    console.log("Library reindexing complete")
+                    if (
+                        ["index", "search"].indexOf(this.$store.state.page) > -1
+                    ) {
+                        // This refreshes the current router view in case items in it changed during reindex
+                        $this.$router.go()
+                    } else {
+                        $this.getCategories()
+                    }
+                })
+                .catch(() => {
+                    $this.scanningLibrary = false
+                    // eslint-disable-next-line no-console
+                    console.log("Library reindexing failed!")
+                })
+        },
+
+        beforeDestroy() {
+            unsubscribe(SHOW_SETTINGS_EVENT, this.handleShowSettings)
+        },
     },
 }
 </script>
 
+<style scoped>
+/* TODO: Use @nextcloud/vue LoadingIcon once we update to 7.0.0 and we won't
+ * have to do this */
+.material-design-icon.loading-icon:deep(svg) {
+    animation: rotate var(--animation-duration, 0.8s) linear infinite;
+    color: var(--color-loading-dark);
+}
+</style>
+
 <style>
 #app-settings input[type="text"],
 #app-settings input[type="number"],
-#app-settings .button {
+#app-settings .button.disable {
     display: block;
     width: 100%;
 }
 
-#app-settings .button {
-    z-index: 2;
-    height: 44px;
-    padding: 0;
-    border-radius: var(--border-radius);
-}
+/* #app-settings .button { */
+/*     z-index: 2; */
+/*     height: 44px; */
+/*     padding: 0; */
+/*     border-radius: var(--border-radius); */
+/* } */
 
-#app-settings .button p {
-    margin: auto;
-    font-size: 13px;
-}
+/* #app-settings .button p { */
+/*     margin: auto; */
+/*     font-size: 13px; */
+/* } */
 </style>