From 800f7abbfcdb2b2cc21043347b12d283ac6ee51c Mon Sep 17 00:00:00 2001
From: Marcel Klehr <mklehr@gmx.net>
Date: Wed, 31 Jan 2024 18:51:59 +0100
Subject: [PATCH] overhaul settings: Use settings modal

Signed-off-by: Marcel Klehr <mklehr@gmx.net>
---
 lib/Service/UserSettingsService.php |   1 +
 src/components/Navigation.vue       |  12 +-
 src/components/Settings.vue         | 171 ++++++++++++++--------------
 3 files changed, 94 insertions(+), 90 deletions(-)

diff --git a/lib/Service/UserSettingsService.php b/lib/Service/UserSettingsService.php
index 29ac59d2..b5162d33 100644
--- a/lib/Service/UserSettingsService.php
+++ b/lib/Service/UserSettingsService.php
@@ -100,6 +100,7 @@ class UserSettingsService {
 			$array[$key] = $this->get($key);
 		}
 		$array['limit'] = $this->get('limit');
+		$array['privacy.enableScraping'] = $this->get('privacy.enableScraping');
 		return $array;
 	}
 }
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 942481d5..4bfc6026 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -104,9 +104,8 @@
 			</template>
 		</template>
 		<template #footer>
-			<NcAppNavigationSettings v-if="!isPublic">
-				<Settings />
-			</NcAppNavigationSettings>
+			<NcAppNavigationItem :name="t('bookmarks', 'Settings')" @click="settingsOpen = !settingsOpen"><template #icon><CogIcon /></template></NcAppNavigationItem>
+			<Settings :settingsOpen.sync="settingsOpen" />
 		</template>
 	</NcAppNavigation>
 </template>
@@ -125,6 +124,7 @@ import VectorLinkIcon from 'vue-material-design-icons/VectorLink.vue'
 import TagIcon from 'vue-material-design-icons/Tag.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import GaugeIcon from 'vue-material-design-icons/Gauge.vue'
+import CogIcon from 'vue-material-design-icons/Cog.vue'
 import ProgressBar from 'vue-simple-progress'
 import Settings from './Settings.vue'
 import { actions, mutations } from '../store/index.js'
@@ -136,7 +136,6 @@ export default {
 		NcAppNavigationItem,
 		NcAppNavigationNewItem,
 		NcCounterBubble,
-		NcAppNavigationSettings,
 		NcAppNavigationSpacer,
 		NcActionButton,
 		Settings,
@@ -153,6 +152,7 @@ export default {
 		TagIcon,
 		DeleteIcon,
 		GaugeIcon,
+		CogIcon,
 	},
 
 	filters: {
@@ -161,7 +161,9 @@ export default {
 		},
 	},
 	data() {
-		return {}
+		return {
+			settingsOpen: false,
+		}
 	},
 	computed: {
 		tags() {
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index c6e03f0b..ee390ab9 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -5,62 +5,78 @@
   -->
 
 <template>
-	<div class="settings">
-		<input type="file"
-			class="import"
-			size="5"
-			@change="onImportSubmit">
-		<button @click="onImportOpen">
-			<span :class="{'icon-upload': !importing, 'icon-loading-small': importing}" />{{ t('bookmarks', 'Import') }}
-		</button>
-		<button @click="onExport">
-			<span class="icon-download" /> {{ t('bookmarks', 'Export') }}
-		</button>
+	<NcAppSettingsDialog :open.sync="settingsOpen" :show-navigation="true" :name="t('bookmarks', 'Bookmarks settings')" class="settings">
+		<NcAppSettingsSection id="importexport" :name="t('bookmarks', 'Import/Export')">
+			<template #icon>
+				<ImportIcon :size="20" />
+			</template>
+			<input type="file"
+				class="import"
+				size="5"
+				@change="onImportSubmit">
+			<button @click="onImportOpen">
+				<span :class="{'icon-upload': !importing, 'icon-loading-small': importing}" />{{ t('bookmarks', 'Import bookmarks') }}
+			</button>
+			<button @click="onExport">
+				<span class="icon-download" /> {{ t('bookmarks', 'Export bookmarks') }}
+			</button>
+		</NcAppSettingsSection>
 
-		<template v-if="scrapingEnabled">
-			<label><h3>{{ t('bookmarks', 'Archive path') }}</h3>
-				<p><label><input type="checkbox" :checked="archiveEnabled" @input="onChangeArchiveEnabled">{{ t('bookmarks', 'Enable bookmarks archiving to store the web contents of the links that you have bookmarked') }}</label></p>
-				<p>{{ t('bookmarks',
-					'Enter the path of a folder in your Files where bookmarked files should be stored.'
-				) }}</p>
-				<input :value="archivePath"
-					:readonly="true"
-					@click="onChangeArchivePath">
-			</label>
-		</template>
+		<NcAppSettingsSection v-if="scrapingEnabled" id="archive" :name="t('bookmarks', 'Auto-archiving')">
+			<template #icon>
+				<ArchiveIcon :size="20" />
+			</template>
+			<p>{{ t('bookmarks', 'The bookmarks app can automatically archive the web content of links you have bookmarked') }}</p>
+			<NcCheckboxRadioSwitch :checked="archiveEnabled" @update:checked="onChangeArchiveEnabled">{{ t('bookmarks', 'Enable archiving') }}</NcCheckboxRadioSwitch>
+			<NcTextField v-if="archiveEnabled" :label="t('bookmarks', 'Enter the path of a folder in your Files where bookmarked files should be stored.')" :value="archivePath"
+									 :readonly="true"
+									 @click="onChangeArchivePath" />
+		</NcAppSettingsSection>
 
-		<label><h3>{{ t('bookmarks', 'Backups') }}</h3>
-			<p><label><input type="checkbox" :checked="backupEnabled" @input="onChangeBackupEnabled">{{ t('bookmarks', 'Enable bookmarks backups') }}</label></p>
-			<p>{{ t('bookmarks',
-				'Enter the path of a folder in your Files where backups will be stored.'
-			) }}</p>
-			<input :value="backupPath"
+		<NcAppSettingsSection id="backup" :name="t('bookmarks', 'Auto-Backup')">
+			<template #icon>
+				<BackupIcon :size="20" />
+			</template>
+			<p>{{ t('bookmarks', 'The bookmarks app can automatically backup your bookmarks on a daily basis to prevent data loss when syncing bookmarks across devices.') }}</p>
+			<NcCheckboxRadioSwitch :checked="backupEnabled" @update:checked="onChangeBackupEnabled">{{ t('bookmarks', 'Enable backups') }}</NcCheckboxRadioSwitch>
+			<NcTextField v-if="backupEnabled" :label="t('bookmarks', 'Enter the path of a folder in your Files where backups will be stored.')" :value="backupPath"
 				:readonly="true"
-				@click="onChangeBackupPath">
-		</label>
+				@click="onChangeBackupPath" />
+		</NcAppSettingsSection>
 
-		<h3>{{ t('bookmarks', 'Client apps') }}</h3>
-		<p>
-			{{
-				t('bookmarks',
-					'Also check out the collection of client apps that integrate with this app: '
-				)
-			}}
-			<a href="https://github.com/nextcloud/bookmarks#third-party-clients">{{
-				t('bookmarks', 'Client apps')
-			}}</a>
-		</p>
+		<NcAppSettingsSection id="client-apps" :name="t('bookmarks', 'Client apps')">
+			<template #icon>
+				<ApplicationIcon :size="20" />
+			</template>
+			<p>
+				{{
+					t('bookmarks',
+						'Also check out the collection of client apps that integrate with this app: '
+					)
+				}}
+				<a href="https://github.com/nextcloud/bookmarks#third-party-clients" style="text-decoration: underline;">{{
+					t('bookmarks', 'Client apps')
+				}}</a>
+			</p>
+		</NcAppSettingsSection>
 
-		<label>
-			<h3>{{ t('bookmarks', 'Install web app on device') }}</h3>
+		<NcAppSettingsSection id="install" :name="t('bookmarks', 'Install web app')">
+			<template #icon>
+				<ApplicationImportIcon :size="20" />
+			</template>
 			<p>{{ t('bookmarks', 'You can install this app on your device home screen to quickly access your bookmarks on your phone. You can easily remove the app from your home screen again, if you don\'t like it.') }}</p>
 			<a class="button center" href="#" @click.prevent="clickAddToHomeScreen">{{ t('bookmarks', 'Install on home screen') }}</a>
-		</label>
+		</NcAppSettingsSection>
 
-		<label><h3>{{ t('bookmarks', 'Bookmarklet') }}</h3>
-			<p>{{ t('bookmarks',
-				'Drag this to your browser bookmarks and click it to quickly bookmark a webpage.'
-			) }}</p>
+		<NcAppSettingsSection id="bookmarklet" :name="t('bookmarks', 'Bookmarklet')">
+			<template #icon>
+				<LinkIcon :size="20" />
+			</template>
+			<p>
+				{{ t('bookmarks',
+					'Drag this to your browser bookmarks and click it to quickly bookmark a webpage.'
+				) }}
+			</p>
 			<a class="button center"
 				:href="bookmarklet"
 				@click.prevent="void 0">{{
@@ -68,8 +84,8 @@
 						instanceName: oc_defaults.name
 					})
 				}}</a>
-		</label>
-	</div>
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 <script>
 import { generateUrl } from '@nextcloud/router'
@@ -77,10 +93,23 @@ import { actions } from '../store/index.js'
 import { getRequestToken } from '@nextcloud/auth'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { privateRoutes } from '../router.js'
+import { NcAppSettingsSection, NcAppSettingsDialog, NcCheckboxRadioSwitch, NcTextField } from '@nextcloud/vue'
+import ImportIcon from 'vue-material-design-icons/Import.vue'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import BackupIcon from 'vue-material-design-icons/BackupRestore.vue'
+import LinkIcon from 'vue-material-design-icons/Link.vue'
+import ApplicationIcon from 'vue-material-design-icons/Application.vue'
+import ApplicationImportIcon from 'vue-material-design-icons/ApplicationImport.vue'
 
 export default {
 	name: 'Settings',
-	components: {},
+	components: { NcAppSettingsSection, NcAppSettingsDialog, NcCheckboxRadioSwitch, NcTextField, ImportIcon, ArchiveIcon, BackupIcon, LinkIcon, ApplicationIcon, ApplicationImportIcon },
+	props: {
+		settingsOpen: {
+			type: Boolean,
+			required: true,
+		},
+	},
 	data() {
 		return {
 			importing: false,
@@ -106,7 +135,7 @@ export default {
 		},
 		bookmarklet() {
 			const bookmarkletUrl
-					= window.location.origin + generateUrl('/apps/bookmarks/bookmarklet')
+		= window.location.origin + generateUrl('/apps/bookmarks/bookmarklet')
 			let queryStringExtension = ''
 			if (this.$route.name === privateRoutes.FOLDER) {
 				queryStringExtension = `+'&folderId=${this.$route.params.folder}'`
@@ -131,7 +160,7 @@ export default {
 	},
 	mounted() {
 		window.addEventListener('beforeinstallprompt', (e) => {
-			// Prevent Chrome 67 and earlier from automatically showing the prompt
+		// Prevent Chrome 67 and earlier from automatically showing the prompt
 			e.preventDefault()
 			// Stash the event so it can be triggered later.
 			this.addToHomeScreen = e
@@ -153,8 +182,8 @@ export default {
 		},
 		onExport() {
 			window.location
-				= 'bookmark/export?requesttoken='
-					+ encodeURIComponent(getRequestToken())
+		= 'bookmark/export?requesttoken='
+		+ encodeURIComponent(getRequestToken())
 		},
 		async onChangeArchiveEnabled(e) {
 			await this.$store.dispatch(actions.SET_SETTING, {
@@ -206,38 +235,10 @@ export default {
 }
 </script>
 <style>
-.import {
+	.import {
 	opacity: 0;
 	position: absolute;
 	top: 0;
 	left: -1000px;
-}
-
-.settings label,
-.settings input,
-.settings select,
-.settings button,
-.settings label a.button {
-	display: block;
-	width: 100%;
-}
-
-.settings input[type=checkbox] {
-	display: inline-block;
-	position: relative;
-	top: 0.5em;
-	width: 1.2em;
-}
-
-.settings label {
-	margin-top: 10px;
-}
-
-.settings h3 {
-	font-weight: bold;
-}
-
-.settings a:link:not(.button) {
-	text-decoration: underline;
-}
+	}
 </style>