settings: add dialog

lib/Controller/OtherController.php

@@ -25,7 +25,6 @@ namespace OCA\Memories\Controller;
 
 use OCA\Memories\AppInfo\Application;
 use OCP\AppFramework\Http;
-use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\AppFramework\Http\StreamResponse;
 

src/App.vue

@@ -23,9 +23,12 @@
       </template>
 
       <template #footer>
-        <NcAppNavigationSettings :title="t('memories', 'Settings')">
-          <Settings />
-        </NcAppNavigationSettings>
+        <NcAppNavigationItem
+          :title="t('memories', 'Settings')"
+          @click="showSettings"
+        >
+          <CogIcon slot="icon" :size="20" />
+        </NcAppNavigationItem>
       </template>
     </NcAppNavigation>
 
@@ -39,6 +42,8 @@
         <router-view />
       </div>
     </NcAppContent>
+
+    <Settings :open.sync="settingsOpen" />
   </NcContent>
 </template>
 
@@ -50,8 +55,6 @@ import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent";
 import NcAppNavigation from "@nextcloud/vue/dist/Components/NcAppNavigation";
 const NcAppNavigationItem = () =>
   import("@nextcloud/vue/dist/Components/NcAppNavigationItem");
-const NcAppNavigationSettings = () =>
-  import("@nextcloud/vue/dist/Components/NcAppNavigationSettings");
 
 import { generateUrl } from "@nextcloud/router";
 import { translate as t } from "@nextcloud/l10n";
@@ -72,6 +75,7 @@ import PeopleIcon from "vue-material-design-icons/AccountBoxMultiple.vue";
 import MarkerIcon from "vue-material-design-icons/MapMarker.vue";
 import TagsIcon from "vue-material-design-icons/Tag.vue";
 import MapIcon from "vue-material-design-icons/Map.vue";
+import CogIcon from "vue-material-design-icons/Cog.vue";
 
 export default defineComponent({
   name: "App",
@@ -80,7 +84,6 @@ export default defineComponent({
     NcAppContent,
     NcAppNavigation,
     NcAppNavigationItem,
-    NcAppNavigationSettings,
 
     Timeline,
     Settings,
@@ -97,11 +100,13 @@ export default defineComponent({
     MarkerIcon,
     TagsIcon,
     MapIcon,
+    CogIcon,
   },
 
   data: () => ({
     navItems: [],
     metadataComponent: null as any,
+    settingsOpen: false,
   }),
 
   computed: {
@@ -324,6 +329,10 @@ export default defineComponent({
 
       tokenInput.value = token;
     },
+
+    showSettings() {
+      this.settingsOpen = true;
+    },
   },
 });
 </script>

src/components/Settings.vue

@@ -22,37 +22,54 @@
 
 <template>
   <div>
-    <label for="timeline-path">{{ t("memories", "Timeline Path") }}</label>
-    <input
-      id="timeline-path"
-      @click="chooseTimelinePath"
-      v-model="config_timelinePath"
-      type="text"
-    />
-
-    <label for="folders-path">{{ t("memories", "Folders Path") }}</label>
-    <input
-      id="folders-path"
-      @click="chooseFoldersPath"
-      v-model="config_foldersPath"
-      type="text"
-    />
-
-    <NcCheckboxRadioSwitch
-      :checked.sync="config_showHidden"
-      @update:checked="updateShowHidden"
-      type="switch"
+    <NcAppSettingsDialog
+      :open="open"
+      :show-navigation="true"
+      :title="t('memories', 'Memories Settings')"
+      @update:open="onClose"
     >
-      {{ t("memories", "Show hidden folders") }}
-    </NcCheckboxRadioSwitch>
+      <NcAppSettingsSection
+        id="general-settings"
+        :title="t('memories', 'General')"
+      >
+        <label for="timeline-path">{{ t("memories", "Timeline Path") }}</label>
+        <input
+          id="timeline-path"
+          @click="chooseTimelinePath"
+          v-model="config_timelinePath"
+          type="text"
+        />
 
-    <NcCheckboxRadioSwitch
-      :checked.sync="config_squareThumbs"
-      @update:checked="updateSquareThumbs"
-      type="switch"
-    >
-      {{ t("memories", "Square grid mode") }}
-    </NcCheckboxRadioSwitch>
+        <NcCheckboxRadioSwitch
+          :checked.sync="config_squareThumbs"
+          @update:checked="updateSquareThumbs"
+          type="switch"
+        >
+          {{ t("memories", "Square grid mode") }}
+        </NcCheckboxRadioSwitch>
+      </NcAppSettingsSection>
+
+      <NcAppSettingsSection
+        id="folders-settings"
+        :title="t('memories', 'Folders')"
+      >
+        <label for="folders-path">{{ t("memories", "Folders Path") }}</label>
+        <input
+          id="folders-path"
+          @click="chooseFoldersPath"
+          v-model="config_foldersPath"
+          type="text"
+        />
+
+        <NcCheckboxRadioSwitch
+          :checked.sync="config_showHidden"
+          @update:checked="updateShowHidden"
+          type="switch"
+        >
+          {{ t("memories", "Show hidden folders") }}
+        </NcCheckboxRadioSwitch>
+      </NcAppSettingsSection>
+    </NcAppSettingsDialog>
 
     <MultiPathSelectionModal
       ref="multiPathModal"
@@ -72,6 +89,10 @@ input[type="text"] {
 import { defineComponent } from "vue";
 
 import { getFilePickerBuilder } from "@nextcloud/dialogs";
+const NcAppSettingsDialog = () =>
+  import("@nextcloud/vue/dist/Components/NcAppSettingsDialog");
+const NcAppSettingsSection = () =>
+  import("@nextcloud/vue/dist/Components/NcAppSettingsSection");
 const NcCheckboxRadioSwitch = () =>
   import("@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch");
 
@@ -81,10 +102,19 @@ export default defineComponent({
   name: "Settings",
 
   components: {
+    NcAppSettingsDialog,
+    NcAppSettingsSection,
     NcCheckboxRadioSwitch,
     MultiPathSelectionModal,
   },
 
+  props: {
+    open: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
   computed: {
     pathSelTitle(): string {
       return this.t("memories", "Choose Timeline Paths");
@@ -92,6 +122,10 @@ export default defineComponent({
   },
 
   methods: {
+    onClose() {
+      this.$emit("update:open", false);
+    },
+
     async chooseFolder(title: string, initial: string) {
       const picker = getFilePickerBuilder(title)
         .setMultiSelect(false)