feat(NcAppContent): Support full width lists

Signed-off-by: greta <[email protected]>

src/components/NcAppContent/NcAppContent.vue

@@ -78,16 +78,18 @@ The list size must be between the min and the max width value.
 
 		<template v-if="hasList">
 			<!-- Mobile view does not allow resizeable panes -->
-			<div v-if="isMobile"
-				:class="showDetails ? 'app-content-wrapper--show-details' : 'app-content-wrapper--show-list'"
-				class="app-content-wrapper app-content-wrapper--mobile">
-				<NcAppDetailsToggle v-if="hasList && showDetails" @click.native.stop.prevent="hideDetails" />
-
-				<slot name="list" />
-				<slot />
+			<div v-if="isMobile || layout === 'no-split'"
+				class="app-content-wrapper app-content-wrapper--no-split"
+				:class="{
+					'app-content-wrapper--show-details': showDetails,
+					'app-content-wrapper--show-list': !showDetails,
+					'app-content-wrapper--mobile': isMobile,}">
+				<NcAppDetailsToggle v-if="showDetails" @click.native.stop.prevent="hideDetails" />
+				<slot v-if="!showDetails" name="list" />
+
+				<slot v-else />
 			</div>
-
-			<div v-else class="app-content-wrapper">
+			<div v-else-if="layout === 'vertical-split'" class="app-content-wrapper">
 				<Splitpanes class="default-theme"
 					@resized="handlePaneResize">
 					<Pane class="splitpanes__pane-list"
@@ -108,9 +110,8 @@ The list size must be between the min and the max width value.
 				</Splitpanes>
 			</div>
 		</template>
-
 		<!-- @slot Provide the main content to the app content -->
-		<slot v-else />
+		<slot v-if="!hasList" />
 	</main>
 </template>
 
@@ -119,11 +120,11 @@ import NcAppDetailsToggle from './NcAppDetailsToggle.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
 
 import { getBuilder } from '@nextcloud/browser-storage'
-import { emit } from '@nextcloud/event-bus'
 import { useSwipe } from '@vueuse/core'
 import { Splitpanes, Pane } from 'splitpanes'
 
 import 'splitpanes/dist/splitpanes.css'
+import { emit } from '@nextcloud/event-bus'
 
 const browserStorage = getBuilder('nextcloud').persist().build()
 
@@ -139,7 +140,6 @@ export default {
 		Pane,
 		Splitpanes,
 	},
-
 	props: {
 		/**
 		 * Allows to disable the control by swipe of the app navigation open state
@@ -202,6 +202,19 @@ export default {
 			type: String,
 			default: null,
 		},
+		/**
+		 * Content layout used when there is a list together with content:
+		 * - `vertical-split` - a 2-column layout with list and default content separated vertically
+		 * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.
+		 * On mobile screen `no-split` layout is forced.
+		 */
+		layout: {
+			type: String,
+			default: 'vertical-split',
+			validator(value) {
+				return ['no-split', 'vertical-split'].includes(value)
+			},
+		},
 	},
 
 	emits: [
@@ -219,7 +232,7 @@ export default {
 		return {
 			contentHeight: 0,
 			hasList: false,
-
+			hasContent: false,
 			swiping: {},
 			listPaneSize: this.restorePaneConfig(),
 		}
@@ -271,7 +284,7 @@ export default {
 	},
 
 	updated() {
-		this.checkListSlot()
+		this.checkSlots()
 	},
 
 	mounted() {
@@ -281,7 +294,7 @@ export default {
 			})
 		}
 
-		this.checkListSlot()
+		this.checkSlots()
 		this.restorePaneConfig()
 	},
 
@@ -320,11 +333,9 @@ export default {
 		},
 
 		// $slots is not reactive, we need to update this manually
-		checkListSlot() {
-			const hasListSlot = !!this.$slots.list
-			if (this.hasList !== hasListSlot) {
-				this.hasList = hasListSlot
-			}
+		checkSlots() {
+			this.hasList = !!this.$scopedSlots.list
+			this.hasContent = !!this.$scopedSlots.default
 		},
 
 		// browserStorage is not reactive, we need to update this manually
@@ -370,7 +381,7 @@ export default {
 }
 
 // Mobile list/details handling
-.app-content-wrapper--mobile {
+.app-content-wrapper--no-split {
 	&.app-content-wrapper--show-list :deep() {
 		.app-content-list {
 			display: flex;
@@ -431,4 +442,10 @@ export default {
 		}
 	}
 }
+
+.app-content-wrapper--show-list {
+	:deep(.app-content-list) {
+		max-width: none;
+	}
+}
 </style>

src/components/NcAppContent/NcAppDetailsToggle.vue

@@ -21,7 +21,11 @@
   -->
 
 <template>
-	<NcButton v-tooltip="title" :aria-label="title" class="app-details-toggle">
+	<NcButton v-tooltip="title"
+		type="tertiary"
+		:aria-label="title"
+		class="app-details-toggle"
+		:class="{ 'app-details-toggle--mobile': isMobile }">
 		<template #icon>
 			<ArrowRight :size="20" />
 		</template>
@@ -36,6 +40,7 @@ import Tooltip from '../../directives/Tooltip/index.js'
 import { emit } from '@nextcloud/event-bus'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
 
 export default {
 	name: 'NcAppDetailsToggle',
@@ -48,19 +53,30 @@ export default {
 		NcButton,
 		ArrowRight,
 	},
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
 
 	computed: {
 		title() {
 			return t('Go back to the list')
 		},
 	},
-
-	beforeMount() {
-		this.toggleAppNavigationButton(true)
+	watch: {
+		isMobile: {
+			immediate: true,
+			handler() {
+				this.toggleAppNavigationButton(this.isMobile)
+			},
+		},
 	},
 
 	beforeDestroy() {
-		this.toggleAppNavigationButton(false)
+		if (this.isMobile) {
+			this.toggleAppNavigationButton(false)
+		}
 	},
 
 	methods: {
@@ -81,7 +97,7 @@ export default {
 
 <style lang="scss" scoped>
 .app-details-toggle {
-	position: fixed;
+	position: sticky;
 	width: $clickable-area;
 	height: $clickable-area;
 	padding: $icon-margin;
@@ -91,10 +107,19 @@ export default {
 	background-color: var(--color-main-background);
 	z-index: 2000;
 
+	top: var(--app-navigation-padding);
+	// Navigation Toggle button width + 2 paddings around
+	left: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2);
+	&--mobile {
+		// There is no NavigationToggle button
+		left: var(--app-navigation-padding);
+	}
+
 	&:active,
 	&:hover,
 	&:focus {
 		opacity: 1;
 	}
 }
+
 </style>