Fix breaking changes of nc/vue update

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

4 files changed, 80 insertions, 78 deletions

diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss
index e13cf0d7a4e..d035b24de92 100644
--- a/apps/files/css/detailsView.scss
+++ b/apps/files/css/detailsView.scss
@@ -1,19 +1,19 @@
-#app-sidebar .detailFileInfoContainer {
+.app-sidebar .detailFileInfoContainer {
 	min-height: 50px;
 	padding: 15px;
 }
 
-#app-sidebar .detailFileInfoContainer > div {
+.app-sidebar .detailFileInfoContainer > div {
 	clear: both;
 }
 
 
-#app-sidebar .mainFileInfoView .icon {
+.app-sidebar .mainFileInfoView .icon {
 	display: inline-block;
 	background-size: 16px 16px;
 }
 
-#app-sidebar .mainFileInfoView .permalink {
+.app-sidebar .mainFileInfoView .permalink {
 	padding: 6px 10px;
 	vertical-align: top;
 	opacity: .6;
@@ -23,22 +23,22 @@
 		opacity: 1;
 	}
 }
-#app-sidebar .mainFileInfoView .permalink-field>input {
+.app-sidebar .mainFileInfoView .permalink-field>input {
 	clear: both;
 	width: 90%;
 }
 
-#app-sidebar .thumbnailContainer.large {
+.app-sidebar .thumbnailContainer.large {
 	margin-left: -15px;
 	margin-right: -35px; /* 15 + 20 for the close button */
 	margin-top: -15px;
 }
 
-#app-sidebar .thumbnailContainer.large.portrait {
+.app-sidebar .thumbnailContainer.large.portrait {
 	margin: 0; /* if we don't fit the image anyway we give it back the margin */
 }
 
-#app-sidebar .large .thumbnail {
+.app-sidebar .large .thumbnail {
 	width:100%;
 	display:block;
 	background-repeat: no-repeat;
@@ -49,21 +49,21 @@
 	height: auto;
 }
 
-#app-sidebar .large .thumbnail .stretcher {
+.app-sidebar .large .thumbnail .stretcher {
 	content: '';
 	display: block;
 	padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */
 }
 
-#app-sidebar .large.portrait .thumbnail {
+.app-sidebar .large.portrait .thumbnail {
 	background-position: 50% top;
 }
 
-#app-sidebar .large.portrait .thumbnail {
+.app-sidebar .large.portrait .thumbnail {
 	background-size: contain;
 }
 
-#app-sidebar .large.text {
+.app-sidebar .large.text {
 	overflow-y: scroll;
 	overflow-x: hidden;
 	padding-top: 14px;
@@ -71,7 +71,7 @@
 	margin-left: 0;
 }
 
-#app-sidebar .thumbnail {
+.app-sidebar .thumbnail {
 	width: 100%;
 	min-height: 75px;
 	display: inline-block;
@@ -81,44 +81,44 @@
 	background-repeat: no-repeat;
 }
 
-#app-sidebar .ellipsis {
+.app-sidebar .ellipsis {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
-#app-sidebar .fileName {
+.app-sidebar .fileName {
 	font-size: 16px;
 	padding-top: 13px;
 	padding-bottom: 3px;
 }
 
-#app-sidebar .fileName h3 {
+.app-sidebar .fileName h3 {
 	width: calc(100% - 42px); /* 36px is the with of the copy link icon, but this breaks so we add some more to be sure */
 	display: inline-block;
 	padding: 5px 0;
 	margin: -5px 0;
 }
 
-#app-sidebar .file-details {
+.app-sidebar .file-details {
 	color: var(--color-text-maxcontrast);
 }
 
-#app-sidebar .action-favorite {
+.app-sidebar .action-favorite {
 	vertical-align: sub;
 	padding: 10px;
 	margin: -10px;
 }
 
-#app-sidebar .action-favorite > span{
+.app-sidebar .action-favorite > span{
 	opacity: .7 !important;
 }
 
-#app-sidebar .detailList {
+.app-sidebar .detailList {
 	float: left;
 }
 
-#app-sidebar .close {
+.app-sidebar .close {
 	position: absolute;
 	top: 0;
 	right: 0;
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 16abb3ca76f..1fc89c6a7ee 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -454,7 +454,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-#app-sidebar {
+.app-sidebar {
 	&.has-preview::v-deep {
 		.app-sidebar-header__figure {
 			background-size: cover;
diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index 6afdb2536aa..ccdb2d1b8de 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -26,7 +26,7 @@
 		:content-class="{ 'icon-loading': loadingList }"
 		:navigation-class="{ 'icon-loading': loading }">
 		<AppNavigation>
-			<ul id="appscategories">
+			<template #list>
 				<AppNavigationItem
 					id="app-category-your-apps"
 					:to="{ name: 'apps' }"
@@ -84,7 +84,7 @@
 					id="app-developer-docs"
 					href="settings.developerDocumentation"
 					:title="t('settings', 'Developer documentation') + ' ↗'" />
-			</ul>
+			</template>
 		</AppNavigation>
 		<AppContent class="app-settings-content" :class="{ 'icon-loading': loadingList }">
 			<AppList :category="category" :app="currentApp" :search="searchQuery" />
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index d174768fc80..0e837979b85 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -27,7 +27,7 @@
 				:text="t('settings','New user')"
 				button-class="icon-add"
 				@click="toggleNewUserMenu" />
-			<ul id="usergrouplist">
+			<template #list>
 				<AppNavigationItem
 					id="addgroup"
 					ref="addGroup"
@@ -92,58 +92,60 @@
 						</ActionButton>
 					</template>
 				</AppNavigationItem>
-			</ul>
-			<AppNavigationSettings>
-				<div>
-					<p>{{ t('settings', 'Default quota:') }}</p>
-					<Multiselect :value="defaultQuota"
-						:options="quotaOptions"
-						tag-placeholder="create"
-						:placeholder="t('settings', 'Select default quota')"
-						label="label"
-						track-by="id"
-						:allow-empty="false"
-						:taggable="true"
-						@tag="validateQuota"
-						@input="setDefaultQuota" />
-				</div>
-				<div>
-					<input id="showLanguages"
-						v-model="showLanguages"
-						type="checkbox"
-						class="checkbox">
-					<label for="showLanguages">{{ t('settings', 'Show Languages') }}</label>
-				</div>
-				<div>
-					<input id="showLastLogin"
-						v-model="showLastLogin"
-						type="checkbox"
-						class="checkbox">
-					<label for="showLastLogin">{{ t('settings', 'Show last login') }}</label>
-				</div>
-				<div>
-					<input id="showUserBackend"
-						v-model="showUserBackend"
-						type="checkbox"
-						class="checkbox">
-					<label for="showUserBackend">{{ t('settings', 'Show user backend') }}</label>
-				</div>
-				<div>
-					<input id="showStoragePath"
-						v-model="showStoragePath"
-						type="checkbox"
-						class="checkbox">
-					<label for="showStoragePath">{{ t('settings', 'Show storage path') }}</label>
-				</div>
-				<div>
-					<input id="sendWelcomeMail"
-						v-model="sendWelcomeMail"
-						:disabled="loadingSendMail"
-						type="checkbox"
-						class="checkbox">
-					<label for="sendWelcomeMail">{{ t('settings', 'Send email to new user') }}</label>
-				</div>
-			</AppNavigationSettings>
+			</template>
+			<template #footer>
+				<AppNavigationSettings>
+					<div>
+						<p>{{ t('settings', 'Default quota:') }}</p>
+						<Multiselect :value="defaultQuota"
+							:options="quotaOptions"
+							tag-placeholder="create"
+							:placeholder="t('settings', 'Select default quota')"
+							label="label"
+							track-by="id"
+							:allow-empty="false"
+							:taggable="true"
+							@tag="validateQuota"
+							@input="setDefaultQuota" />
+					</div>
+					<div>
+						<input id="showLanguages"
+							v-model="showLanguages"
+							type="checkbox"
+							class="checkbox">
+						<label for="showLanguages">{{ t('settings', 'Show Languages') }}</label>
+					</div>
+					<div>
+						<input id="showLastLogin"
+							v-model="showLastLogin"
+							type="checkbox"
+							class="checkbox">
+						<label for="showLastLogin">{{ t('settings', 'Show last login') }}</label>
+					</div>
+					<div>
+						<input id="showUserBackend"
+							v-model="showUserBackend"
+							type="checkbox"
+							class="checkbox">
+						<label for="showUserBackend">{{ t('settings', 'Show user backend') }}</label>
+					</div>
+					<div>
+						<input id="showStoragePath"
+							v-model="showStoragePath"
+							type="checkbox"
+							class="checkbox">
+						<label for="showStoragePath">{{ t('settings', 'Show storage path') }}</label>
+					</div>
+					<div>
+						<input id="sendWelcomeMail"
+							v-model="sendWelcomeMail"
+							:disabled="loadingSendMail"
+							type="checkbox"
+							class="checkbox">
+						<label for="sendWelcomeMail">{{ t('settings', 'Send email to new user') }}</label>
+					</div>
+				</AppNavigationSettings>
+			</template>
 		</AppNavigation>
 		<AppContent>
 			<UserList #content
@@ -514,7 +516,7 @@ export default {
 
 <style lang="scss" scoped>
 // force hiding the editing action for the add group entry
-#usergrouplist #addgroup::v-deep .app-navigation-entry__utils {
+.app-navigation__list #addgroup::v-deep .app-navigation-entry__utils {
 	display: none;
 }
 </style>