Merge pull request #31338 from nextcloud/fix/31237/new-button-AppList

Fix/31237/new button app list

apps/settings/css/settings.scss

@@ -1021,6 +1021,9 @@ span.version {
 }
 
 .apps-list {
+	$toolbar-padding: 8px;
+	$toolbar-height: 44px + $toolbar-padding * 2;
+
 	.section {
 		cursor: pointer;
 	}
@@ -1033,14 +1036,17 @@ span.version {
 		margin-left: 10px;
 	}
 
-	.counter {
-		padding-left: $header-height;
-		padding-top: 10px;
+	.toolbar {
+		height: $toolbar-height;
+		padding: $toolbar-padding;
+		// Leave room for app-navigation-toggle
+		padding-left: $toolbar-height;
 		width: 100%;
 		background-color: var(--color-main-background);
 		position: fixed;
 		z-index: 1;
-		height: $header-height;
+		display: flex;
+		align-items: center;
 	}
 
 	&.installed {
@@ -1048,7 +1054,7 @@ span.version {
 			display: table;
 			width: 100%;
 			height: auto;
-			margin-top: $header-height;
+			margin-top: $toolbar-height;
 		}
 
 		margin-bottom: 100px;

apps/settings/src/components/AdminTwoFactor.vue

@@ -55,12 +55,12 @@
 			</p>
 		</template>
 		<p>
-			<button v-if="dirty"
-				class="button primary"
+			<Button v-if="dirty"
+				type="primary"
 				:disabled="loading"
 				@click="saveChanges">
 				{{ t('settings', 'Save changes') }}
-			</button>
+			</Button>
 		</p>
 	</div>
 </template>
@@ -68,6 +68,8 @@
 <script>
 import axios from '@nextcloud/axios'
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Button from '@nextcloud/vue/dist/Components/Button'
+
 import _ from 'lodash'
 import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 
@@ -75,6 +77,7 @@ export default {
 	name: 'AdminTwoFactor',
 	components: {
 		Multiselect,
+		Button,
 	},
 	data() {
 		return {

apps/settings/src/components/AppList.vue

@@ -24,18 +24,20 @@
 	<div id="app-content-inner">
 		<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
 			<template v-if="useListView">
-				<div v-if="showUpdateAll" class="counter">
+				<div v-if="showUpdateAll" class="toolbar">
 					{{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }}
-					<button v-if="showUpdateAll"
+					<Button v-if="showUpdateAll"
 						id="app-list-update-all"
-						class="primary"
+						type="primary"
 						@click="updateAll">
 						{{ t('settings', 'Update all') }}
-					</button>
+					</Button>
 				</div>
-				<div v-if="!showUpdateAll" class="counter">
+
+				<div v-if="!showUpdateAll" class="toolbar">
 					{{ t('settings', 'All apps are up-to-date.') }}
 				</div>
+
 				<transition-group name="app-list" tag="div" class="apps-list-container">
 					<AppItem v-for="app in apps"
 						:key="app.id"
@@ -43,6 +45,7 @@
 						:category="category" />
 				</transition-group>
 			</template>
+
 			<transition-group v-if="useBundleView"
 				name="app-list"
 				tag="div"
@@ -104,11 +107,13 @@
 import AppItem from './AppList/AppItem'
 import PrefixMixin from './PrefixMixin'
 import pLimit from 'p-limit'
+import Button from '@nextcloud/vue/dist/Components/Button'
 
 export default {
 	name: 'AppList',
 	components: {
 		AppItem,
+		Button,
 	},
 	mixins: [PrefixMixin],
 	props: ['category', 'app', 'search'],

apps/settings/src/views/Apps.vue

@@ -361,19 +361,25 @@ export default {
 	}
 }
 
-	.app-sidebar-tabs__release {
-		h2 {
-			border-bottom: 1px solid var(--color-border);
-		}
+// Align the appNavigation toggle with the apps header toolbar
+.app-navigation::v-deep button.app-navigation-toggle {
+	top: 8px;
+	right: -8px;
+}
 
-		// Overwrite changelog heading styles
-		::v-deep {
-			h3 {
-				font-size: 20px;
-			}
-			h4 {
-				font-size: 17px;
-			}
+.app-sidebar-tabs__release {
+	h2 {
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	// Overwrite changelog heading styles
+	::v-deep {
+		h3 {
+			font-size: 20px;
+		}
+		h4 {
+			font-size: 17px;
 		}
 	}
+}
 </style>