refactor(settings): move AppItem styles to AppItem component

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

2 files changed, 135 insertions, 174 deletions

diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 6330b929ffd..83fab93c63b 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -27,7 +27,6 @@
 			:class="{
 				'apps-list--list-view': (useBundleView || useListView),
 				'apps-list--store-view': useAppStoreView,
-				'apps-list--with-sidebar': !!selectedApp,
 			}">
 			<template v-if="useListView">
 				<div v-if="showUpdateAll" class="apps-list__toolbar">
@@ -212,6 +211,7 @@ export default {
 				// An app level of `200` will be set for apps featured on the app store
 				return apps.filter(app => app.level === 200)
 			}
+
 			// filter app store categories
 			return apps.filter(app => {
 				return app.appstore && app.category !== undefined
@@ -241,9 +241,6 @@ export default {
 					return false
 				})
 		},
-		selectedApp() {
-			return this.apps.find(app => app.id === this.$route.params.id)
-		},
 		useAppStoreView() {
 			return !this.useListView && !this.useBundleView
 		},
@@ -318,9 +315,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../../../core/css/variables.scss' as variables;
-@use 'sass:math';
-
 $toolbar-padding: 8px;
 $toolbar-height: 44px + $toolbar-padding * 2;
 
@@ -354,118 +348,18 @@ $toolbar-height: 44px + $toolbar-padding * 2;
 
 	&--list-view {
 		margin-bottom: 100px;
-
-		:deep(.app-item) {
-			display: table-row;
-			padding: 0;
-			margin: 0;
-
-			> * {
-				display: table-cell;
-				height: initial;
-				vertical-align: middle;
-				float: none;
-				border-bottom: 1px solid var(--color-border);
-				padding: 6px;
-				box-sizing: border-box;
-			}
-
-			> .app-actions {
-				display: flex;
-				gap: 8px;
-				flex-wrap: wrap;
-				justify-content: end;
-			}
-
-			&.app-item--selected {
-				background-color: var(--color-background-dark);
-			}
-		}
-
-		:deep(.app-image) {
-			width: 44px;
-			height: auto;
-			text-align: right;
-		}
-
-		:deep(.app-image-icon svg),
-		:deep(.app-image-icon .icon-settings-dark) {
-			margin-top: 5px;
-			width: 20px;
-			height: 20px;
-			opacity: .5;
-			background-size: cover;
-			display: inline-block;
-		}
-
-		:deep(.app-actions) {
-			text-align: right;
-
-			.icon-loading-small {
-				display: inline-block;
-				top: 4px;
-				margin-right: 10px;
-			}
-		}
 	}
 
 	&__list-container {
-		display: table;
 		width: 100%;
-		height: auto;
 		white-space: normal;
 	}
 
-	&--store-view {
-		:deep(.app-item) {
-			border: 0;
-			padding: 30px;
-		}
-
-		:deep(.app-name) {
-			display: block;
-			margin: 5px 0;
-		}
-
-		:deep(.app-image-icon .icon-settings-dark) {
-			width: 100%;
-			height: 150px;
-			background-size: 45px;
-			opacity: 0.5;
-		}
-
-		:deep(.app-actions) {
-			margin-top: 10px;
-
-			button {
-				margin: 10px 0;
-			}
-		}
-
-		:deep(.app-image-icon svg) {
-			position: absolute;
-			bottom: 43px;
-			/* position halfway vertically */
-			width: 64px;
-			height: 64px;
-			opacity: .1;
-		}
-	}
-
 	&__store-container {
 		display: flex;
 		flex-wrap: wrap;
 	}
 
-	:deep(.app-item) {
-		position: relative;
-		flex: 0 0 auto;
-
-		&:hover {
-			background-color: var(--color-background-dark);
-		}
-	}
-
 	&__bundle-heading {
 		display: flex;
 		align-items: center;
@@ -488,68 +382,4 @@ $toolbar-height: 44px + $toolbar-padding * 2;
 		}
 	}
 }
-
-@media only screen and (min-width: 1601px) {
-	.apps-list--store-view .app-item {
-		width: 25%;
-	}
-	.apps-list--with-sidebar.apps-list--store-view .app-item {
-		width: 33%;
-	}
-}
-
-@media only screen and (max-width: 1600px) {
-	.apps-list--store-view .app-item {
-		width: 25%;
-	}
-	.apps-list--with-sidebar.apps-list--store-view .app-item {
-		width: 33%;
-	}
-}
-
-@media only screen and (max-width: 1400px) {
-	.apps-list--store-view .app-item {
-		width: 33%;
-	}
-	.apps-list--with-sidebar.apps-list--store-view .app-item {
-		width: 50%;
-	}
-}
-
-@media only screen and (max-width: 900px) {
-	.apps-list--store-view .app-item {
-		width: 50%;
-	}
-	.apps-list--with-sidebar.apps-list--store-view .app-item {
-		width: 100%;
-	}
-}
-
-@media only screen and (max-width: variables.$breakpoint-mobile) {
-	.apps-list--store-view .app-item {
-		width: 50%;
-	}
-}
-
-@media only screen and (max-width: 480px) {
-	.apps-list--store-view .app-item {
-		width: 100%;
-	}
-}
-
-/* hide app version and level on narrower screens */
-@media only screen and (max-width: 900px) {
-	.apps-list--list-view {
-		:deep(.app-version), :deep(.app-level) {
-			display: none !important;
-		}
-	}
-}
-
-// Display buttons above each other on mobile
-@media (max-width: math.div(variables.$breakpoint-mobile, 2)) {
-	.apps-list--list-view .app-item > :deep(.app-actions) {
-		display: table-cell;
-	}
-}
 </style>
diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index f69e00c14ee..8b513167460 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -27,6 +27,7 @@
 			'app-item--list-view': listView,
 			'app-item--store-view': !listView,
 			'app-item--selected': isSelected,
+			'app-item--with-sidebar': withSidebar,
 		}">
 		<component :is="dataItemTag"
 			class="app-image app-image-icon"
@@ -172,6 +173,9 @@ export default {
 		dataItemTag() {
 			return this.listView ? 'td' : 'div'
 		},
+		withSidebar() {
+			return !!this.$route.params.id
+		},
 	},
 	watch: {
 		'$route.params.id'(id) {
@@ -204,6 +208,133 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@use '../../../../../core/css/variables.scss' as variables;
+
+.app-item {
+	position: relative;
+
+	&:hover {
+		background-color: var(--color-background-dark);
+	}
+
+	&--list-view {
+		&.app-item--selected {
+			background-color: var(--color-background-dark);
+		}
+
+		> * {
+			vertical-align: middle;
+			border-bottom: 1px solid var(--color-border);
+			padding: 6px;
+		}
+
+		.app-image {
+			width: 44px;
+			height: auto;
+			text-align: right;
+		}
+
+		.app-image-icon svg,
+		.app-image-icon .icon-settings-dark {
+			margin-top: 5px;
+			width: 20px;
+			height: 20px;
+			opacity: .5;
+			background-size: cover;
+			display: inline-block;
+		}
+
+		.app-actions {
+			display: flex;
+			gap: 8px;
+			flex-wrap: wrap;
+			justify-content: end;
+
+			.icon-loading-small {
+				display: inline-block;
+				top: 4px;
+				margin-right: 10px;
+			}
+		}
+
+		/* hide app version and level on narrower screens */
+		@media only screen and (max-width: 900px) {
+			.app-version,
+			.app-level {
+				display: none !important;
+			}
+		}
+	}
+
+	&--store-view {
+		padding: 30px;
+
+		.app-image-icon .icon-settings-dark {
+			width: 100%;
+			height: 150px;
+			background-size: 45px;
+			opacity: 0.5;
+		}
+
+		.app-image-icon svg {
+			position: absolute;
+			bottom: 43px;
+			/* position halfway vertically */
+			width: 64px;
+			height: 64px;
+			opacity: .1;
+		}
+
+		.app-name {
+			margin: 5px 0;
+		}
+
+		.app-actions {
+			margin: 10px 0;
+		}
+
+		@media only screen and (min-width: 1601px) {
+			width: 25%;
+
+			&.app-item--with-sidebar {
+				width: 33%;
+			}
+		}
+
+		@media only screen and (max-width: 1600px) {
+			width: 25%;
+
+			&.app-item--with-sidebar {
+				width: 33%;
+			}
+		}
+
+		@media only screen and (max-width: 1400px) {
+			width: 33%;
+
+			&.app-item--with-sidebar {
+				width: 50%;
+			}
+		}
+
+		@media only screen and (max-width: 900px) {
+			width: 50%;
+
+			&.app-item--with-sidebar {
+				width: 100%;
+			}
+		}
+
+		@media only screen and (max-width: variables.$breakpoint-mobile) {
+			width: 50%;
+		}
+
+		@media only screen and (max-width: 480px) {
+			width: 100%;
+		}
+	}
+}
+
 .app-icon {
 	filter: var(--background-invert-if-bright);
 }
@@ -213,10 +344,10 @@ export default {
 	height: 150px;
 	opacity: 1;
 	overflow: hidden;
-}
 
-.app-image img {
-	width: 100%;
+	img {
+		width: 100%;
+	}
 }
 
 .app-name--link::after {