diff options
| author | Nikola <nikola.gladovic@nextcloud.com> | 2022-01-19 22:06:45 +0300 |
|---|---|---|
| committer | Joas Schilling <coding@schilljs.com> | 2022-01-21 16:42:25 +0300 |
| commit | 7425b6999e73e49ae11d7151aedc7045ddf1c07a (patch) | |
| tree | 266370214fad5f07dbe90ed3a00649193f5da30a /src/views | |
| parent | 764805f01787a19a5f19ac0f6c227f40fe449b68 (diff) | |
6417: updated search box for forward modal
Signed-off-by: Nikola <nikola.gladovic@nextcloud.com>
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 5fc5c73c0..0ca018d8d 100644 --- a/src/views/RoomSelector.vue +++ b/src/views/RoomSelector.vue @@ -32,6 +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> <div id="room-list"> <ul v-if="!loading && availableRooms.length > 0"> <li @@ -107,23 +114,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(x => x.displayName.includes(this.searchText)) + } }, }, beforeMount() { this.fetchRooms() - const $store = OCA.Talk?.instance?.$store if ($store) { this.currentRoom = $store.getters.getToken() @@ -160,9 +172,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; } @@ -226,4 +240,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> |