move app navigation to new nextcloud-vue components

Yes, i know. Commit early and often, sorry for that.

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

css/app-settings.scss

@@ -21,20 +21,13 @@
  */
 
 #app-settings {
-
-	#calendar-input-form-label {
-		display: block;
-		text-align: center;
-		background-position-x: 8px;
-	}
-
 	.settings-fieldset-interior-item {
 		padding: 5px 0;
 
 		.action-checkbox {
 			line-height: unset !important;
 
-			.action-checkbox__label::before {
+			&__label::before {
 				margin: 0 6px 3px 3px !important;
 			}
 		}
@@ -42,17 +35,23 @@
 		.action-button {
 			min-height: unset !important;
 
-			.action-button__icon {
+			&__icon {
 				margin: 0 6px 3px 3px !important;
 				height: 14px !important;
 				width: 14px !important;
 				background-position: unset !important;
 			}
 
-			.action-button__longtext {
+			&__longtext {
 				width: unset !important;
 				padding: 0 !important;
 			}
 		}
+
+		&__import-button {
+			display: block;
+			text-align: center;
+			background-position-x: 8px;
+		}
 	}
 }

css/import.scss

@@ -21,36 +21,31 @@
  */
 
 .import-modal {
+	.modal-container {
+		padding: 24px !important;
+		min-width: 50%;
+		overflow: visible !important;
 
-	&__title {
-
-	}
-
-	&__subtitle {
-
-	}
-
-	&__file-list {
-
-	}
-
-	&__actions {
-
-	}
-
-	.import-modal-file-item {
-
-		&--header {
-
+		.import-modal__title,
+		.import-modal__subtitle {
+			text-align: center;
 		}
 
-		&__filename {
+		.import-modal-file-item {
+			display: flex;
+			padding-top: 10px;
 
-		}
+			&--header {
+				font-weight: bold;
+			}
 
-		&__calendar-select {
+			&__filename {
+				flex: 2 1 0;
+			}
 
+			&__calendar-select {
+				flex: 1 1 0;
+			}
 		}
 	}
-
 }

src/components/AppNavigation/Settings/ImportScreen.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<modal class="import-modal" @close="cancelImport">
+	<modal class="import-modal" size="large" @close="cancelImport">
 		<h2 class="import-modal__title">
 			{{ $t('calendar', 'Import calendars') }}
 		</h2>
@@ -44,7 +44,6 @@
 		<div class="import-modal__actions">
 			<button @click="cancelImport">
 				{{ $t('calendar', 'Cancel' )}}
-				Cancel
 			</button>
 			<button class="primary" @click="importCalendar">
 				{{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }}

src/components/AppNavigation/Settings/SettingsImportSection.vue

@@ -143,6 +143,7 @@ export default {
 		 * @param {Event} event The change-event of the input-field
 		 */
 		async processFiles(event) {
+			console.debug('user changed files')
 			this.$store.commit('changeStage', 'processing')
 			let addedFiles = false