diff options
Diffstat (limited to 'core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue')
| -rw-r--r-- | core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue | 27 |
1 files changed, 13 insertions, 14 deletions
diff --git a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue index d68466ea91a..171eada8a06 100644 --- a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue +++ b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue @@ -32,7 +32,7 @@ {{ t('core', 'Search everywhere') }} </template> <template #icon> - <NcIconSvgWrapper :path="mdiCloudSearch" /> + <NcIconSvgWrapper :path="mdiCloudSearchOutline" /> </template> </NcButton> </div> @@ -41,15 +41,15 @@ <script lang="ts" setup> import type { ComponentPublicInstance } from 'vue' -import { mdiCloudSearch, mdiClose } from '@mdi/js' +import { mdiCloudSearchOutline, mdiClose } from '@mdi/js' import { translate as t } from '@nextcloud/l10n' -import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js' +import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile' +import { useElementSize } from '@vueuse/core' import { computed, ref, watchEffect } from 'vue' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js' -import { useElementSize } from '@vueuse/core' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcInputField from '@nextcloud/vue/components/NcInputField' const props = defineProps<{ query: string, @@ -93,7 +93,6 @@ function clearAndCloseSearch() { <style scoped lang="scss"> .local-unified-search { --local-search-width: min(calc(250px + v-bind('searchGlobalButtonCSSWidth')), 95vw); - box-sizing: border-box; position: relative; height: var(--header-height); @@ -124,7 +123,7 @@ function clearAndCloseSearch() { // this can break at any time the component library changes :deep(input) { // search global width + close button width - padding-inline-end: calc(v-bind('searchGlobalButtonWidth') + var(--default-clickable-area)); + padding-inline-end: calc(v-bind('searchGlobalButtonCSSWidth') + var(--default-clickable-area)); } } } @@ -133,8 +132,8 @@ function clearAndCloseSearch() { transition: width var(--animation-quick) linear; } -// Make the position absolut during the transition -// this is needed to "hide" the button begind it +// Make the position absolute during the transition +// this is needed to "hide" the button behind it .v-leave-active { position: absolute !important; } @@ -142,7 +141,7 @@ function clearAndCloseSearch() { .v-enter, .v-leave-to { &.local-unified-search { - // Start with only the overlayed button + // Start with only the overlay button --local-search-width: var(--clickable-area-large); } } @@ -154,13 +153,13 @@ function clearAndCloseSearch() { padding-inline: var(--default-grid-baseline); } - // when open we need to position it absolut to allow overlay the full bar + // when open we need to position it absolute to allow overlay the full bar :global(.unified-search-menu:has(.local-unified-search--open)) { position: absolute !important; inset-inline: 0; } // Hide all other entries, especially the user menu as it might leak pixels - :global(.header-right:has(.local-unified-search--open) > :not(.unified-search-menu)) { + :global(.header-end:has(.local-unified-search--open) > :not(.unified-search-menu)) { display: none; } } |