fix(NcSelect): Make component same size as NcInput*

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Aug 30, 2024 · 0e48529 · 0e48529
1 parent b992faf
commit 0e48529
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -149,7 +149,7 @@ import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 
 import { userStatus } from '../../mixins/index.js'
 
-// global margin, ratio
+// global margin, ^2 ratio
 const margin = 8
 const defaultSize = 32
 

diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
@@ -536,8 +536,9 @@ export default {
 		<template #selected-option="selectedOption">
 			<NcListItemIcon v-if="userSelect"
 				v-bind="selectedOption"
-				:avatar-size="24"
+				:avatar-size="avatarSize"
 				:name="selectedOption[localLabel]"
+				no-margin
 				:search="search" />
 			<NcEllipsisedOption v-else
 				:name="String(selectedOption[localLabel])"
@@ -571,6 +572,7 @@ import {
 	offset,
 	shift,
 } from '@floating-ui/dom'
+import { h, warn } from 'vue'
 import { t } from '../../l10n.js'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
@@ -582,8 +584,6 @@ import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
 import GenRandomId from '../../utils/GenRandomId.js'
 
-import { h, warn } from 'vue'
-
 export default {
 	name: 'NcSelect',
 
@@ -968,6 +968,16 @@ export default {
 		'update:modelValue',
 	],
 
+	setup() {
+		const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))
+		const gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))
+		const avatarSize = clickableArea - 2 * gridBaseLine
+
+		return {
+			avatarSize,
+		}
+	},
+
 	data() {
 		return {
 			search: '',
@@ -1183,23 +1193,34 @@ body {
 	min-width: 260px;
 	margin: 0 0 var(--default-grid-baseline);
 
+	&.vs--open {
+		--vs-border-width: var(--border-width-input-focused, 2px);
+	}
+
 	.select__label {
 		display: block;
 		margin-bottom: 2px;
 	}
 
 	.vs__selected {
-		height: calc(var(--default-clickable-area) - var(--default-grid-baseline));
+		height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));
 		margin: calc(var(--default-grid-baseline) / 2);
-		padding: 0 8px 0 12px;
-		border-radius: 18px !important;
+		padding-block: 0;
+		padding-inline: 12px 8px;
+		border-radius: 16px !important;
 		background: var(--color-primary-element-light);
 		border: none;
 	}
 
+	&.vs--open .vs__selected:first-of-type {
+		margin-inline-start: calc(var(--default-grid-baseline) / 2 - (var(--border-width-input-focused, 2px) - var(--border-width-input, 2px))) !important; // prevent jumping
+	}
+
 	.vs__search {
 		text-overflow: ellipsis;
 		color: var(--color-main-text);
+		min-height: unset !important;
+		height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width)) !important;
 
 		&::placeholder {
 			color: var(--color-text-maxcontrast);
@@ -1273,7 +1294,7 @@ body {
 
 	.vs__selected-options {
 		// If search is hidden, ensure that the height of the search is the same
-		min-height: var(--default-clickable-area);
+		min-height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width));
 
 		// Hide search from dom if unused to prevent unneeded flex wrap
 		.vs__selected ~ .vs__search[readonly] {
@@ -1343,6 +1364,6 @@ body {
 
 // Selected users require slightly different padding
 .user-select .vs__selected {
-	padding: 0 5px !important;
+	padding-inline: 0 5px !important;
 }
 </style>