Add a new slot to support full width view for mail list

Signed-off-by: greta <gretadoci@gmail.com>
nextcloud-libraries · Feb 2, 2024 · a5d74d3 · a5d74d3
1 parent 0bb49c0
commit a5d74d3
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 11 deletions.
diff --git a/src/components/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
@@ -86,8 +86,7 @@ The list size must be between the min and the max width value.
 				<slot name="list" />
 				<slot />
 			</div>
-
-			<div v-else class="app-content-wrapper">
+			<div v-else-if="hasContent" class="app-content-wrapper">
 				<Splitpanes class="default-theme"
 					@resized="handlePaneResize">
 					<Pane class="splitpanes__pane-list"
@@ -107,6 +106,9 @@ The list size must be between the min and the max width value.
 					</Pane>
 				</Splitpanes>
 			</div>
+			<div v-else class="app-content-list-only">
+				<slot name="list" />
+			</div>
 		</template>
 
 		<!-- @slot Provide the main content to the app content -->
@@ -219,7 +221,7 @@ export default {
 		return {
 			contentHeight: 0,
 			hasList: false,
-
+			hasContent: false,
 			swiping: {},
 			listPaneSize: this.restorePaneConfig(),
 		}
@@ -271,7 +273,7 @@ export default {
 	},
 
 	updated() {
-		this.checkListSlot()
+		this.checkSlots()
 	},
 
 	mounted() {
@@ -281,7 +283,7 @@ export default {
 			})
 		}
 
-		this.checkListSlot()
+		this.checkSlots()
 		this.restorePaneConfig()
 	},
 
@@ -320,11 +322,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
@@ -431,4 +431,9 @@ export default {
 		}
 	}
 }
+.app-content-list-only {
+	:deep(.app-content-list) {
+		max-width: none;
+	}
+}
 </style>
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
@@ -336,7 +336,7 @@
 					<!-- Main content -->
 					<div class="list-item-content">
 						<div class="list-item-content__main"
-							:class="{ 'list-item-content__main--oneline': oneLine }">
+							:class="{ 'list-item-content__main--oneline': oneLine, 'list-item-content__main--full-width-view' : fullWidthView }">
 
 							<!-- First line, name and details -->
 							<div class="line-one">
@@ -550,6 +550,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		fullWidthView: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: [
@@ -788,6 +792,12 @@ export default {
 			&--oneline {
 				display: flex;
 			}
+			&--full-width-view {
+				display: flex;
+				flex-direction: row;
+				//this shouldnt be here but i need it for testing right now
+				width: 100%;
+			}
 		}
 
 		&__actions {