fix(style): adjust sidebar header layout

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud · Jan 26, 2025 · 320fa96 · 320fa96
1 parent 15555c1
commit 320fa96
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/src/components/AppSidebar/CalendarPickerItem.vue b/src/components/AppSidebar/CalendarPickerItem.vue
@@ -121,9 +121,11 @@ export default {
 	display: flex;
 	border-bottom: 1px solid var(--color-border);
 	width: 100%;
+	padding: 0 6px;
 
 	:deep(.v-select.select) {
 		width: 100%;
+		margin: 0 !important;
 
 		.vs {
 			&__dropdown-menu,
@@ -142,7 +144,7 @@ export default {
 			}
 
 			&__selected {
-				height: 44px;
+				height: var(--default-clickable-area);
 				margin:  0;
 				padding: 0;
 				border: none;
@@ -161,8 +163,8 @@ export default {
 			&__search {
 				padding-left: 44px;
 				margin: 0;
-				height: 44px !important;
-				line-height: 44px;
+				height: var(--default-clickable-area) !important;
+				line-height: var(--default-clickable-area);
 				font-weight: bold;
 			}
 

diff --git a/src/components/AppSidebar/CalendarPickerOption.vue b/src/components/AppSidebar/CalendarPickerOption.vue
@@ -116,7 +116,7 @@ export default {
 		border: none;
 		flex-basis: 16px;
 		flex-shrink: 0;
-		margin: 14px;
+		margin: calc((var(--default-clickable-area) - 16px)/2);
 		cursor: pointer;
 	}
 

diff --git a/src/components/AppSidebar/CheckboxItem.vue b/src/components/AppSidebar/CheckboxItem.vue
@@ -64,9 +64,10 @@ export default {
 .property__item {
 	border-bottom: 1px solid var(--color-border);
 	color: var(--color-text-lighter);
-	line-height: 44px;
+	line-height: var(--default-clickable-area);
 	cursor: pointer;
 	width: 100%;
+	padding: 0 6px;
 
 	&--disabled * {
 		cursor: default;
@@ -77,14 +78,15 @@ export default {
 		width: 100%;
 
 		&::before {
-			margin: 13px;
+			margin: calc((var(--default-clickable-area) - 18px)/2);
 			border-width: 2px;
 			border-radius: var(--border-radius);
 			min-width: 18px;
 			min-height: 18px;
 			box-sizing: border-box;
 		}
 		> span {
+			margin-left: 4px;
 			font-weight: bold;
 			overflow: hidden;
 			text-overflow: ellipsis;

diff --git a/src/components/AppSidebar/DateTimePickerItem.vue b/src/components/AppSidebar/DateTimePickerItem.vue
@@ -206,7 +206,7 @@ $blue: #4271a6;
 
 .property__item {
 	border-bottom: 1px solid var(--color-border);
-	padding: 0;
+	padding: 0 6px;
 	position: relative;
 	margin-bottom: 0;
 	width: 100%;
@@ -224,16 +224,17 @@ $blue: #4271a6;
 	.item {
 		&__content {
 			display: flex;
-			line-height: 44px;
+			line-height: var(--default-clickable-area);
 			min-width: 0;
 			flex-grow: 1;
+			gap: 0 4px;
 
 			.content {
 				&__icon {
 					display: flex;
-					height: 44px;
-					width: 44px;
-					min-width: 44px;
+					height: var(--default-clickable-area);
+					width: var(--default-clickable-area);
+					min-width: var(--default-clickable-area);
 					justify-content: center;
 
 					.material-design-icon__svg {