diff options
| author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2022-01-26 17:27:13 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-01-26 17:27:13 +0300 |
| commit | 68e495d296f963878f7279800bdbc4b34c5d3a7e (patch) | |
| tree | b61c72c488118a3bd23ffb26c335a3dd5342e6e5 /src/views | |
| parent | c15b145554b8730065a327763d42745b140207c1 (diff) | |
| parent | 22a08741fdad8dc449382bee21337b646b08fd64 (diff) | |
Merge pull request #6763 from nextcloud/feature/6417-search-box-forward-modal
6417: added search feature to forward modal
Diffstat (limited to 'src/views')
| -rw-r--r-- | src/views/RoomSelector.vue | 42 |
1 files changed, 38 insertions, 4 deletions
diff --git a/src/views/RoomSelector.vue b/src/views/RoomSelector.vue index 477aeb76d..55752544e 100644 --- a/src/views/RoomSelector.vue +++ b/src/views/RoomSelector.vue @@ -31,6 +31,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> <div id="room-list"> <ul v-if="!loading && availableRooms.length > 0"> <li v-for="room in availableRooms" @@ -103,23 +110,28 @@ export default { rooms: [], selectedRoom: null, currentRoom: null, + searchText: '', loading: true, } }, computed: { availableRooms() { - return this.rooms.filter((room) => { + const roomsTemp = this.rooms.filter((room) => { return room.type !== CONVERSATION.TYPE.CHANGELOG && (!this.currentRoom || this.currentRoom !== room.token) && (!this.showPostableOnly || room.readOnly === CONVERSATION.STATE.READ_WRITE) && room.objectType !== 'file' && room.objectType !== 'share:password' }) + if (!this.searchText) { + return roomsTemp + } else { + return roomsTemp.filter(room => room.displayName.toLowerCase().includes(this.searchText.toLowerCase())) + } }, }, beforeMount() { this.fetchRooms() - const $store = OCA.Talk?.instance?.$store if ($store) { this.currentRoom = $store.getters.getToken() @@ -156,9 +168,11 @@ export default { #modal-inner { width: 90vw; max-width: 400px; - height: 50vh; + height: 55vh; position: relative; - + display: flex; + align-items: center; + justify-content: center; h2 { margin-bottom: 4px; } @@ -222,4 +236,24 @@ li { margin-bottom: 8px; } +.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> |