improve app settings design

Signed-off-by: szaimen <szaimen@e.mail.de>
nextcloud · Sep 5, 2022 · 80c296c · 80c296c
1 parent f496e47
commit 80c296c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 41 deletions.
diff --git a/apps/files/src/files-app-settings.js b/apps/files/src/files-app-settings.js
@@ -52,6 +52,11 @@ window.addEventListener('DOMContentLoaded', function() {
 		appSettingsHeader.addEventListener('click', e => {
 			const opened = e.currentTarget.children[0].classList.contains('opened')
 			OCA.Files.Settings.settings.forEach(e => opened ? e.close() : e.open())
+			if (opened) {
+				appSettingsHeader.classList.add('.settings-header-top-margin')
+			} else {
+				appSettingsHeader.classList.remove('.settings-header-top-margin')
+			}
 		})
 	}
 })
diff --git a/core/css/apps.scss b/core/css/apps.scss
@@ -814,52 +814,55 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 	border-radius: calc(var(--default-clickable-area) / 2);
 	padding: calc(var(--default-grid-baseline) * 2);
 	padding-top: 0;
-}
-
-
-#app-settings-header .settings-button {
-	display: flex;
-	align-items: center;
-	height: 44px;
-	width: 100%;
-	padding: 0;
-	margin: 0;
-	background-color: var(--color-main-background);
-	box-shadow: none;
-	border: 0;
-	border-radius: calc(var(--default-clickable-area) / 2);
-	text-align: left;
-	font-weight: normal;
-	font-size: 100%;
-	opacity: 0.8;
-
-	/* like app-navigation a */
-	color: var(--color-main-text);
 
-	&.opened {
-		border-top: solid 1px var(--color-border);
-		background-color: var(--color-main-background);
-	}
-	&:hover,
-	&:focus {
-		background-color: var(--color-background-hover);
+	&.settings-header-top-margin {
+		margin-top: 8px;
 	}
 
-	&::before {
-		background-image: var(--icon-settings-dark);
-		background-position: 14px center;
-		background-repeat: no-repeat;
-		content: '';
-		width: 44px;
+	.settings-button {
+		display: flex;
+		align-items: center;
 		height: 44px;
-		top: 0;
-		left: 0;
-		display: block;
-	}
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		background-color: var(--color-main-background);
+		box-shadow: none;
+		border: 0;
+		border-radius: calc(var(--default-clickable-area) / 2);
+		text-align: left;
+		font-weight: normal;
+		font-size: 100%;
+		opacity: 0.8;
+
+		/* like app-navigation a */
+		color: var(--color-main-text);
+
+		&.opened {
+			border-top: solid 1px var(--color-border);
+			background-color: var(--color-main-background);
+		}
+		&:hover,
+		&:focus {
+			background-color: var(--color-background-hover);
+		}
 
-	&:focus-visible {
-		box-shadow: 0 0 0 2px inset var(--color-primary) !important;
-		background-position: 12px center;
+		&::before {
+			background-image: var(--icon-settings-dark);
+			background-position: 14px center;
+			background-repeat: no-repeat;
+			content: '';
+			width: 44px;
+			height: 44px;
+			top: 0;
+			left: 0;
+			display: block;
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 2px inset var(--color-primary) !important;
+			background-position: 12px center;
+		}
 	}
 }