Make modal flex configurable

Make it possible to make the modal flex. Adjusted app settings dialog to use a flex modal. Signed-off-by: Vincent Petry <[email protected]>
nextcloud-libraries · Nov 16, 2020 · 75aecb4 · 75aecb4
1 parent fcb6421
commit 75aecb4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/AppSettingsDialog/AppSettingsDialog.vue b/src/components/AppSettingsDialog/AppSettingsDialog.vue
@@ -244,6 +244,9 @@ export default {
 		// Return value of the render function
 		if (this.open) {
 			return createElement('Modal', {
+				attrs: {
+					flex: true,
+				},
 				on: {
 					close: () => { this.handleCloseModal() },
 				},

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
@@ -148,7 +148,7 @@ export default {
 					</transition>
 
 					<!-- Content -->
-					<div class="modal-container">
+					<div class="modal-container" :class="{ 'flex': flex }">
 						<!-- @slot Modal content to render -->
 						<slot />
 					</div>
@@ -281,6 +281,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Makes the modal flex
+		 */
+		flex: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -681,6 +688,10 @@ $header-size: 50px;
 		border-radius: var(--border-radius-large);
 		background-color: var(--color-main-background);
 		box-shadow: 0 0 40px rgba(0, 0, 0, .2);
+
+		&.flex {
+			display: flex;
+		}
 	}
 	&:not(&--large):not(&--full) .modal-container {
 		max-width: 900px;