diff options
Diffstat (limited to 'core/src/views/LegacyUnifiedSearch.vue')
| -rw-r--r-- | core/src/views/LegacyUnifiedSearch.vue | 93 |
1 files changed, 39 insertions, 54 deletions
diff --git a/core/src/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue index 04e4c77fe39..1277970ba0e 100644 --- a/core/src/views/LegacyUnifiedSearch.vue +++ b/core/src/views/LegacyUnifiedSearch.vue @@ -1,24 +1,7 @@ - <!-- - - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com> - - - - @author John Molakvoæ <skjnldsv@protonmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> +<!-- + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <NcHeaderMenu id="unified-search" class="unified-search" @@ -29,8 +12,7 @@ @close="onClose"> <!-- Header icon --> <template #trigger> - <Magnify class="unified-search__trigger" - :size="22/* fit better next to other 20px icons */" /> + <Magnify class="unified-search__trigger-icon" :size="20" /> </template> <!-- Search form & filters wrapper --> @@ -126,11 +108,11 @@ import debounce from 'debounce' import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus' import { showError } from '@nextcloud/dialogs' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' -import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' -import NcHeaderMenu from '@nextcloud/vue/dist/Components/NcHeaderMenu.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcActions from '@nextcloud/vue/components/NcActions' +import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' +import NcHeaderMenu from '@nextcloud/vue/components/NcHeaderMenu' +import NcTextField from '@nextcloud/vue/components/NcTextField' import Magnify from 'vue-material-design-icons/Magnify.vue' @@ -288,7 +270,7 @@ export default { return n('core', 'Please enter {minSearchLength} character or more to search', - 'Please enter {minSearchLength} characters or more to search', + 'Please enter {minSearchLength} characters or more to search', this.minSearchLength, { minSearchLength: this.minSearchLength }) }, @@ -723,6 +705,10 @@ $input-height: 34px; $input-padding: 10px; .unified-search { + &__trigger-icon { + color: var(--color-background-plain-text) !important; + } + &__input-wrapper { position: sticky; // above search results @@ -738,17 +724,7 @@ $input-padding: 10px; align-self: flex-start; font-weight: bold; font-size: 19px; - margin-left: 13px; - } - } - - &__form-input { - margin: 0 !important; - &:focus, - &:focus-visible, - &:active { - border-color: 2px solid var(--color-main-text) !important; - box-shadow: 0 0 0 2px var(--color-main-background) !important; + margin-inline-start: 13px; } } @@ -759,7 +735,8 @@ $input-padding: 10px; } &__filters { - margin: $margin 0 $margin math.div($margin, 2); + margin-block: $margin; + margin-inline: math.div($margin, 2) 0; padding-top: 5px; ul { display: inline-flex; @@ -774,8 +751,7 @@ $input-padding: 10px; // Loading spinner &::after { - right: $input-padding; - left: auto; + inset-inline-start: auto $input-padding; } &-input, @@ -788,6 +764,13 @@ $input-padding: 10px; height: $input-height; padding: $input-padding; + &:focus, + &:focus-visible, + &:active { + border-color: 2px solid var(--color-main-text) !important; + box-shadow: 0 0 0 2px var(--color-main-background) !important; + } + &, &[placeholder], &::placeholder { @@ -805,10 +788,11 @@ $input-padding: 10px; } } - &-reset, &-submit { + &-reset, + &-submit { position: absolute; top: 0; - right: 4px; + inset-inline-end: 4px; width: $input-height - $input-padding; height: $input-height - $input-padding; min-height: 30px; @@ -816,7 +800,7 @@ $input-padding: 10px; opacity: .5; border: none; background-color: transparent; - margin-right: 0; + margin-inline-end: 0; &:hover, &:focus, @@ -826,35 +810,36 @@ $input-padding: 10px; } &-submit { - right: 28px; + inset-inline-end: 28px; } } &__results { + display: flex; + flex-direction: column; + gap: 4px; + &-header { display: block; margin: $margin; margin-bottom: $margin - 4px; - margin-left: 13px; + margin-inline-start: 13px; color: var(--color-primary-element); font-size: 19px; font-weight: bold; } - display: flex; - flex-direction: column; - gap: 4px; } - .unified-search__result-more::v-deep { + :deep(.unified-search__result-more) { color: var(--color-text-maxcontrast); } .empty-content { margin: 10vh 0; - ::v-deep .empty-content__title { + :deep(.empty-content__title) { font-weight: normal; - font-size: var(--default-font-size); + font-size: var(--default-font-size); text-align: center; } } |