refactor(settings): move apps list styles to components

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
nextcloud · Mar 19, 2024 · d181a82 · d181a82
1 parent eac928a
commit d181a82
Show file tree

Hide file tree

Showing 4 changed files with 246 additions and 241 deletions.
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
@@ -538,7 +538,7 @@ span.usersLastLoginTooltip {
 	white-space: nowrap;
 }
 
-/* APPS */
+/* SETTINGS NAVIGATION */
 #app-navigation {
 	/* Navigation icons */
 	img {
@@ -558,93 +558,7 @@ span.usersLastLoginTooltip {
 	}
 }
 
-.app-version {
-	color: var(--color-text-maxcontrast);
-}
-
-#apps-list.store {
-	.section {
-		border: 0;
-	}
-
-	.app-name {
-		display: block;
-		margin: 5px 0;
-	}
-
-	.app-image-icon .icon-settings-dark {
-		width: 100%;
-		height: 150px;
-		background-size: 45px;
-		opacity: 0.5;
-	}
-
-	.actions {
-		margin-top: 10px;
-
-		button {
-			margin: 10px 0;
-		}
-	}
-}
-
-@media only screen and (min-width: 1601px) {
-	.store .section {
-		width: 25%;
-	}
-	.with-app-sidebar .store .section {
-		width: 33%;
-	}
-}
-
-@media only screen and (max-width: 1600px) {
-	.store .section {
-		width: 25%;
-	}
-	.with-app-sidebar .store .section {
-		width: 33%;
-	}
-}
-
-@media only screen and (max-width: 1400px) {
-	.store .section {
-		width: 33%;
-	}
-	.with-app-sidebar .store .section {
-		width: 50%;
-	}
-}
-
-@media only screen and (max-width: 900px) {
-	.store .section {
-		width: 50%;
-	}
-	.with-app-sidebar .store .section {
-		width: 100%;
-	}
-}
-
-@media only screen and (max-width: variables.$breakpoint-mobile) {
-	.store .section {
-		width: 50%;
-	}
-}
-
-@media only screen and (max-width: 480px) {
-	.store .section {
-		width: 100%;
-	}
-}
-
-/* hide app version and level on narrower screens */
-@media only screen and (max-width: 900px) {
-	.apps-list.installed {
-		.app-version, .app-level {
-			display: none !important;
-		}
-	}
-}
-
+/* SETTINGS SECTIONS */
 .section {
 	margin-bottom: 0;
 	/* section divider lines, none needed for last one */
@@ -664,148 +578,6 @@ span.usersLastLoginTooltip {
 	}
 }
 
-.app-image {
-	position: relative;
-	height: 150px;
-	opacity: 1;
-	overflow: hidden;
-}
-
-.missing-dependencies {
-	list-style: initial;
-	list-style-type: initial;
-	list-style-position: inside;
-}
-
-.apps-list {
-	$toolbar-padding: 8px;
-	$toolbar-height: 44px + $toolbar-padding * 2;
-
-	.app-list-move {
-		transition: transform 1s;
-	}
-
-	#app-list-update-all {
-		margin-left: 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: sticky;
-		top: 0;
-		z-index: 1;
-		display: flex;
-		align-items: center;
-	}
-
-	&.installed {
-		.apps-list-container {
-			display: table;
-			width: 100%;
-			height: auto;
-			white-space: normal;
-		}
-
-		margin-bottom: 100px;
-
-		.section {
-			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;
-			}
-
-			> .actions {
-				display: flex;
-				gap: 8px;
-				flex-wrap: wrap;
-				justify-content: end;
-			}
-
-			&.selected {
-				background-color: var(--color-background-dark);
-			}
-
-		}
-
-		.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;
-		}
-
-		.actions {
-			text-align: right;
-
-			.icon-loading-small {
-				display: inline-block;
-				top: 4px;
-				margin-right: 10px;
-			}
-		}
-	}
-
-	&:not(.installed) .app-image-icon svg {
-		position: absolute;
-		bottom: 43px;
-		/* position halfway vertically */
-		width: 64px;
-		height: 64px;
-		opacity: .1;
-	}
-
-	display: flex;
-	flex-wrap: wrap;
-	align-content: flex-start;
-
-	.section {
-		position: relative;
-		flex: 0 0 auto;
-
-		&:hover {
-			background-color: var(--color-background-dark);
-		}
-	}
-}
-
-// Display buttons above each other on mobile
-@media (max-width: math.div(variables.$breakpoint-mobile, 2)) {
-	.apps-list.installed .section > .actions {
-		display: table-cell;
-	}
-}
-
-#apps-list-search {
-	.section {
-		h2 {
-			margin-bottom: 0;
-		}
-	}
-}
-
 /* LOG */
 #log {
 	white-space: normal;