Merge pull request #42978 from nextcloud/fix/refactor-unified-search

fix(unified-search): Refactor header menu code

core/css/header.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["header.scss","variables.scss"],"names":[],"mappings":"AAiBA,mBAEC,yBACA,sBACA,qBACA,6PACC,aAGD,+QACC,YACA,kBACA,2BACA,WACA,WACA,kBACA,2CACA,SACA,UAGD,gLACC,WAIA,kPACC,WAGD,+HACC,SAOH,+DAGC,oBACA,kBACA,MACA,WACA,aACA,OC2Ce,KD1Cf,sBACA,8BAID,WACC,cACA,kBACA,kBACA,wBACA,sBACA,UACA,mBACA,aACA,eACA,gBACA,WAEA,mCACC,UAaD,gCACC,8CACA,sDACA,yCACA,sBACA,aACA,kBACA,gBAfD,gBACA,oCAgBC,UACA,SACA,SACA,gBAEA,kDACC,aAID,sCACC,gCACA,iDACA,YACA,YACA,SACA,QACA,kBACA,oBACA,WAGD,uEAEC,iCAzCF,gBACA,oCA4CA,cACC,oBACA,yFACA,4BACA,wBACA,2BACA,WACA,kBACA,UACA,QACA,WAEA,gFAGD,kCACC,aACA,mBACA,cAGD,sFAEC,oBACA,mBAGD,0CACC,SACA,mBACA,YAGD,4CACC,yBACA,cAOC,yEACC,2DAID,4DACC,2DAID,4EACC,2DAGF,qDAEC,YACA,kBACA,6EACC,aACA,uBACA,mBACA,MC3FY,KD4FZ,YACA,eACA,YACA,UACA,aAEA,yFACC,UAGD,yGACC,aASL,0CACC,YAKD,gBACC,wCACA,eACA,iBACA,SACA,UACA,kBACA,gBACA,uBAEA,cAGD,kBACC,wCACA,kBACA,gBACA,eACA,iBACA,gBACA,uBAID,cACC,kBACA,gBACA,aACA,WACA,SACA,aACA,aACA,eACA,SAEA,2BACC,IC1Jc,KDiKf,gDACC,mBACA,eAED,gJAEC,qBACA,YACA","file":"header.css"}
+{"version":3,"sourceRoot":"","sources":["header.scss","variables.scss"],"names":[],"mappings":"AAiBA,mBAEC,yBACA,sBACA,qBACA,6PACC,aAGD,+QACC,YACA,kBACA,2BACA,WACA,WACA,kBACA,2CACA,SACA,UAGD,gLACC,WAIA,kPACC,WAGD,+HACC,SAOH,+DAGC,oBACA,kBACA,MACA,WACA,aACA,OC2Ce,KD1Cf,sBACA,8BAID,WACC,cACA,kBACA,kBACA,wBACA,sBACA,UACA,mBACA,aACA,eACA,gBACA,WAEA,mCACC,UAaD,gCACC,8CACA,sDACA,yCACA,sBACA,aACA,kBACA,gBAfD,gBACA,oCAgBC,UACA,SACA,SACA,gBAEA,kDACC,aAID,sCACC,gCACA,iDACA,YACA,YACA,SACA,QACA,kBACA,oBACA,WAGD,uEAEC,iCAzCF,gBACA,oCA4CA,cACC,oBACA,yFACA,4BACA,wBACA,2BACA,WACA,kBACA,UACA,QACA,WAEA,gFAGD,kCACC,aACA,mBACA,cAGD,sFAEC,oBACA,mBAGD,0CACC,SACA,mBACA,YAGD,4CACC,yBACA,cAOC,mGACC,2DAID,sFACC,2DAGF,qDAEC,YACA,kBACA,6EACC,aACA,uBACA,mBACA,MCtFY,KDuFZ,YACA,eACA,YACA,UACA,aAEA,yFACC,UAGD,yGACC,aASL,0CACC,YAKD,gBACC,wCACA,eACA,iBACA,SACA,UACA,kBACA,gBACA,uBAEA,cAGD,kBACC,wCACA,kBACA,gBACA,eACA,iBACA,gBACA,uBAID,cACC,kBACA,gBACA,aACA,WACA,SACA,aACA,aACA,eACA,SAEA,2BACC,ICrJc,KD4Jf,gDACC,mBACA,eAED,gJAEC,qBACA,YACA","file":"header.css"}

core/css/header.scss

@@ -171,7 +171,7 @@
 
 	/* Right header standard */
 	.header-right {
-		> .header-menu:not(.user-menu) {
+		> .header-menu:not(.user-menu):not(.unified-search-menu) {
 			// For general
 			> .header-menu__trigger {
 				filter: var(--background-image-invert-if-bright) !important;
@@ -181,11 +181,6 @@
 			> .trigger {
 				filter: var(--background-image-invert-if-bright) !important;
 			}
-
-			// For unified search button
-			.unified-search__trigger {
-				filter: var(--background-image-invert-if-bright) !important;
-			}
 		}
 		> div,
 		> form {

core/src/views/UnifiedSearch.vue

@@ -20,13 +20,16 @@
   -
   -->
 <template>
-	<div class="header-menu">
-		<NcButton class="unified-search__button" :aria-label="t('core', 'Unified search')" @click="toggleUnifiedSearch">
+	<div class="header-menu unified-search-menu">
+		<NcButton class="header-menu__trigger"
+			:aria-label="t('core', 'Unified search')"
+			type="tertiary-no-background"
+			@click="toggleUnifiedSearch">
 			<template #icon>
-				<Magnify class="unified-search__trigger" :size="22" />
+				<Magnify class="header-menu__trigger-icon" :size="20" />
 			</template>
 		</NcButton>
-		<UnifiedSearchModal :class="'unified-search-modal'" :is-visible="showUnifiedSearch" @update:isVisible="handleModalVisibilityChange" />
+		<UnifiedSearchModal :is-visible="showUnifiedSearch" @update:isVisible="handleModalVisibilityChange" />
 	</div>
 </template>
 
@@ -62,35 +65,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.header-menu {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	.unified-search__button {
+// this is needed to allow us overriding component styles (focus-visible)
+#header {
+	.header-menu {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--header-height);
-		// height: var(--header-height);
-		margin: 0;
-		padding: 0;
-		cursor: pointer;
-		opacity: .85;
-		background-color: transparent;
-		border: none;
-		filter: none !important;
-		color: var(--color-primary-text) !important;
 
-		&:hover {
-			background-color: transparent !important;
+		&__trigger {
+			height: var(--header-height);
+			width: var(--header-height) !important;
+
+			&:focus-visible {
+				// align with other header menu entries
+				outline: none !important;
+				box-shadow: none !important;
+			}
+
+			&:not(:hover,:focus,:focus-visible) {
+				opacity: .85;
+			}
+
+			&-icon {
+				// ensure the icon has the correct color
+				color: var(--color-primary-text) !important;
+			}
 		}
 	}
 }
-
-.unified-search-modal {
-	::v-deep .modal-container {
-		height: 80%;
-	}
-}
 </style>

core/src/views/UnifiedSearchModal.vue

@@ -542,6 +542,7 @@ export default {
 .unified-search-modal {
 	box-sizing: border-box;
 	height: 100%;
+	min-height: 80vh;
 
 	display: flex;
 	flex-direction: column;