Merge pull request #5883 from nextcloud-libraries/fix/nc-select-size

fix(NcSelect): Ensure component height is same as input element
nextcloud-libraries · Aug 1, 2024 · f0bcc65 · f0bcc65
2 parents 77c027d + ca340e4
commit f0bcc65
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 12 deletions.
diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -111,6 +111,7 @@ It might be used for list rendering or within the multiselect for example
 <template>
 	<span :id="id"
 		class="option"
+		:class="{ 'option--compact': avatarSize < defaultSize }"
 		:style="cssVars"
 		v-on="$listeners">
 		<NcAvatar v-bind="$attrs"
@@ -266,9 +267,10 @@ export default {
 		},
 	},
 
-	data() {
+	setup() {
 		return {
 			margin,
+			defaultSize,
 		}
 	},
 
@@ -286,7 +288,7 @@ export default {
 		},
 
 		isSizeBigEnough() {
-			return this.avatarSize >= defaultSize
+			return this.avatarSize >= 26 // the font sizes
 		},
 
 		cssVars() {
@@ -357,12 +359,25 @@ export default {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		line-height: 1.1em;
+		line-height: 1.2;
 		strong {
 			font-weight: bold;
 		}
 	}
 
+	&--compact {
+		.option {
+			&__lineone {
+				font-size: 14px;
+			}
+			&__linetwo {
+				font-size: 11px;
+				line-height: 1.5;
+				margin-top: -4px;
+			}
+		}
+	}
+
 	&__icon {
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);

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="32"
+				:avatar-size="avatarSize"
 				:name="selectedOption[localLabel]"
+				no-margin
 				:search="search" />
 			<NcEllipsisedOption v-else
 				:name="String(selectedOption[localLabel])"
@@ -557,9 +558,6 @@ export default {
 </template>
 
 <script>
-import '@nextcloud/vue-select/dist/vue-select.css'
-
-import Vue from 'vue'
 import { VueSelect } from '@nextcloud/vue-select'
 import {
 	autoUpdate,
@@ -569,6 +567,7 @@ import {
 	offset,
 	shift,
 } from '@floating-ui/dom'
+import Vue from 'vue'
 import { t } from '../../l10n.js'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
@@ -580,6 +579,8 @@ import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
 import GenRandomId from '../../utils/GenRandomId.js'
 
+import '@nextcloud/vue-select/dist/vue-select.css'
+
 export default {
 	name: 'NcSelect',
 
@@ -965,6 +966,16 @@ export default {
 		' ',
 	],
 
+	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: '',
@@ -1179,23 +1190,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);
@@ -1269,7 +1291,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] {
@@ -1339,6 +1361,6 @@ body {
 
 // Selected users require slightly different padding
 .user-select .vs__selected {
-	padding: 0 5px !important;
+	padding-inline: 0 5px !important;
 }
 </style>