feat(NcAppNavigationSettingsButton): add settings button for App Navi…

…gation Signed-off-by: Grigorii K. Shartsev <[email protected]>
nextcloud-libraries · Jul 24, 2024 · 775795f · 775795f
1 parent 10eae39
commit 775795f
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 28 deletions.
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -12,13 +12,13 @@
 				<NcAppNavigationSearch v-model="searchValue">
 					<template #actions>
 						<NcActions>
-							<NcActionButton close-after-click @click="showModal = true">
+							<NcActionButton close-after-click @click="isSettingsDialogOpen = true">
 								<template #icon>
 									<IconCog :size="20" />
 								</template>
 								App settings (close after click)
 							</NcActionButton>
-							<NcActionButton @click="showModal = true">
+							<NcActionButton @click="isSettingsDialogOpen = true">
 								<template #icon>
 									<IconCog :size="20" />
 								</template>
@@ -36,28 +36,20 @@
 				</NcAppNavigationItem>
 			</template>
 			<template #footer>
-				<div class="navigation__footer">
-					<NcButton wide @click="showModal = true">
-						<template #icon>
-							<IconCog />
-						</template>
-						App settings
-					</NcButton>
-					<NcModal v-if="showModal" name="Modal for focus-trap check" @close="showModal = false">
-						<div class="modal-content">
-							<h4>Focus-trap should be locked inside the modal</h4>
-							<NcTextField :value.sync="modalValue" label="Focus me" />
-						</div>
-					</NcModal>
-				</div>
+				<NcAppNavigationSettingsButton name="Example settings" @click="isSettingsDialogOpen = true" />
+				<NcAppSettingsDialog :open.sync="isSettingsDialogOpen" name="Example settings">
+					<NcAppSettingsSection id="section-1" name="Section 1">
+						<NcTextField label="Setting field" :value.sync="modelValue" />
+					</NcAppSettingsSection>
+				</NcAppSettingsDialog>
 			</template>
 		</NcAppNavigation>
 	</div>
 </template>
 
 <script>
-	import IconCheck from 'vue-material-design-icons/Check'
-	import IconCog from 'vue-material-design-icons/Cog'
+	import IconCheck from 'vue-material-design-icons/Check.vue'
+	import IconCog from 'vue-material-design-icons/Cog.vue'
 
 	export default {
 		components: {
@@ -71,10 +63,10 @@
 		},
 		data() {
 			return {
-				items: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),
+				items: Array.from({ length: 10 }, (v, i) => `Item ${i + 1}`),
 				searchValue: '',
-				modalValue: '',
-				showModal: false,
+				modelValue: '',
+				isSettingsDialogOpen: false,
 			}
 		},
 	}
@@ -84,7 +76,7 @@
 	/* Mock NcContent */
 	.styleguide-nc-content {
 		position: relative;
-		height: 300px;
+		height: 290px;
 		background-color: var(--color-background-plain);
 		overflow: hidden;
 	}
@@ -96,11 +88,6 @@
 		gap: 4px;
 		padding: 4px;
 	}
-
-	.modal-content {
-		height: 120px;
-		padding: 10px;
-	}
 </style>
 ```
 
@@ -160,7 +147,7 @@ emit('toggle-navigation', {
 				<slot name="list" />
 			</NcAppNavigationList>
 
-			<!-- @slot Footer for e.g. NcAppNavigationSettings -->
+			<!-- @slot Footer for e.g. NcAppNavigationSettingsButton and NcAppSettingsDialog -->
 			<slot name="footer" />
 		</nav>
 		<NcAppNavigationToggle :open="open" @update:open="toggleNavigation" />

diff --git a/src/components/NcAppNavigationSettingsButton/NcAppNavigationSettingsButton.vue b/src/components/NcAppNavigationSettingsButton/NcAppNavigationSettingsButton.vue
@@ -0,0 +1,55 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<docs>
+The component to be used as a settings button in the `<NcAppNavigation>` to open `<NcAppSettingsDialog>`.
+</docs>
+
+<template>
+	<div class="app-navigation-settings-button">
+		<NcButton class="app-navigation-settings-button__button"
+			type="tertiary"
+			alignment="start"
+			wide
+			@click.stop="emit('click', $event)">
+			<template #icon>
+				<IconCog :size="20" />
+			</template>
+			<span class="app-navigation-settings-button__text">
+				{{ name }}
+			</span>
+		</NcButton>
+	</div>
+</template>
+
+<script setup>
+import { t } from '../../l10n.js'
+import NcButton from '../NcButton/index.js'
+import IconCog from 'vue-material-design-icons/Cog.vue'
+
+defineProps({
+	/**
+	 * The name of the settings button. For example, "Files Settings" or "Talk Settings".
+	 */
+	name: {
+		type: String,
+		required: false,
+		default: t('Settings'),
+	},
+})
+
+const emit = defineEmits(['click'])
+</script>
+
+<style lang="scss" scoped>
+.app-navigation-settings-button {
+	padding: var(--default-grid-baseline);
+
+	&__text {
+		// Make the settings button less presentative, like app navigation items
+		font-weight: normal;
+	}
+}
+</style>
diff --git a/src/components/NcAppNavigationSettingsButton/index.js b/src/components/NcAppNavigationSettingsButton/index.js
@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export { default } from './NcAppNavigationSettingsButton.vue'
diff --git a/src/components/index.js b/src/components/index.js
@@ -27,6 +27,7 @@ export { default as NcAppNavigationNew } from './NcAppNavigationNew/index.js'
 export { default as NcAppNavigationNewItem } from './NcAppNavigationNewItem/index.js'
 export { default as NcAppNavigationSearch } from './NcAppNavigationSearch/index.js'
 export { default as NcAppNavigationSettings } from './NcAppNavigationSettings/index.js'
+export { default as NcAppNavigationSettingsButton } from './NcAppNavigationSettingsButton/index.js'
 export { default as NcAppNavigationSpacer } from './NcAppNavigationSpacer/index.js'
 export { default as NcAppSettingsDialog } from './NcAppSettingsDialog/index.js'
 export { default as NcAppSettingsSection } from './NcAppSettingsSection/index.js'