diff options
| author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2022-10-07 13:46:08 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-07 13:46:08 +0300 |
| commit | d3a9444fa7d7a53d4a98f63b869c01718b5b1e45 (patch) | |
| tree | 9e021c8f9657e4bdce35818764fcb8198faa96c5 | |
| parent | ade09685321c24afd1acf82a1a4af70a68e97406 (diff) | |
| parent | de39e39027a7c98be41231781d0ed5c5402ebe9a (diff) | |
Merge pull request #8123 from nextcloud/backport/8112/stable25
[stable25] Use new NcTextField component for Forwarder search
| -rw-r--r-- | src/views/RoomSelector.vue | 39 |
1 files changed, 16 insertions, 23 deletions
diff --git a/src/views/RoomSelector.vue b/src/views/RoomSelector.vue index 4fd124882..a5522a40a 100644 --- a/src/views/RoomSelector.vue +++ b/src/views/RoomSelector.vue @@ -32,12 +32,13 @@ <p v-if="dialogSubtitle" class="subtitle"> {{ dialogSubtitle }} </p> - <div class="search-form"> - <div class="icon-search" /> - <input v-model="searchText" - class="search-form__input" - type="text"> - </div> + <NcTextField :value.sync="searchText" + trailing-button-icon="close" + class="search-form" + :show-trailing-button="searchText !==''" + @trailing-button-click="clearText"> + <Magnify :size="16" /> + </NcTextField> <div id="room-list"> <ul v-if="!loading && availableRooms.length > 0"> <li v-for="room in availableRooms" @@ -75,6 +76,8 @@ import { generateOcsUrl } from '@nextcloud/router' import { CONVERSATION } from '../constants.js' import ConversationIcon from '../components/ConversationIcon.vue' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import Magnify from 'vue-material-design-icons/Magnify.vue' export default { name: 'RoomSelector', @@ -82,6 +85,8 @@ export default { ConversationIcon, NcModal, NcButton, + NcTextField, + Magnify, }, props: { container: { @@ -153,6 +158,11 @@ export default { return conversation2.lastActivity - conversation1.lastActivity }, + + clearText() { + this.searchText = '' + }, + close() { // FIXME: should not emit on $root but on itself this.$root.$emit('close') @@ -242,23 +252,6 @@ li { } .search-form { - position: relative; - display: flex; - flex-direction: column; margin-bottom: 10px; - &__input { - width: 100%; - font-size: 16px; - padding-left: 28px; - line-height: 34px; - box-shadow: 0 10px 5px var(--color-main-background); - z-index: 1; - } - .icon-search { - position: absolute; - top: 12px; - left: 8px; - z-index: 2; - } } </style> |