diff options
| -rw-r--r-- | src/components/user_autosuggest/user_autosuggest.js | 41 | ||||
| -rw-r--r-- | src/components/user_autosuggest/user_autosuggest.vue | 93 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.js | 4 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 3 |
4 files changed, 139 insertions, 2 deletions
diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js new file mode 100644 index 00000000..6612c2f3 --- /dev/null +++ b/src/components/user_autosuggest/user_autosuggest.js @@ -0,0 +1,41 @@ +import { VueAutosuggest } from 'vue-autosuggest' +import BasicUserCard from '../basic_user_card/basic_user_card.vue' +import userSearchApi from '../../services/new_api/user_search.js' + +export default { + components: { + VueAutosuggest, + BasicUserCard + }, + data () { + return { + results: [], + timeout: null, + selected: null, + debounceMilliseconds: 500, + inputProps: { + id: 'autosuggest__input', + onInputChange: this.fetchResults, + placeholder: 'Search...', + class: 'form-control' + }, + suggestions: [] + } + }, + methods: { + fetchResults (query) { + clearTimeout(this.timeout) + this.timeout = setTimeout(() => { + userSearchApi.search({query, store: this.$store}) + .then((data) => { this.suggestions = [{ data }] }) + }, this.debounceMilliseconds) + }, + clickHandler (item) { + return false + }, + clickUserHandler () { + console.log('clickUserHandler') + return false + } + } +} diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue new file mode 100644 index 00000000..48fe350d --- /dev/null +++ b/src/components/user_autosuggest/user_autosuggest.vue @@ -0,0 +1,93 @@ +<template> + <div class="user-autosuggest"> + <VueAutosuggest + :suggestions="suggestions" + :inputProps="inputProps" + @click="clickHandler" + > + <template slot-scope="{suggestion}"> + <BasicUserCard :user="suggestion.item" /> + </template> + </VueAutosuggest> + </div> +</template> + +<script src="./user_autosuggest.js"></script> + +<style lang="scss"> +.user-autosuggest { + .avatar { + height: 25px; + width: 25px; + border-radius: 20px; + margin-right: 10px; + } + #autosuggest__input { + outline: none; + position: relative; + display: block; + border: 1px solid #616161; + padding: 10px; + width: 100%; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + } + + #autosuggest__input.autosuggest__input-open { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + .autosuggest__results-container { + position: relative; + width: 100%; + } + + .autosuggest__results { + font-weight: 300; + margin: 0; + position: absolute; + z-index: 10000001; + width: 100%; + border: 1px solid #e0e0e0; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + background: white; + padding: 0px; + max-height: 400px; + overflow-y: scroll; + } + + .autosuggest__results ul { + list-style: none; + padding-left: 0; + margin: 0; + } + + .autosuggest__results .autosuggest__results_item { + cursor: pointer; + padding: 15px; + } + + #autosuggest ul:nth-child(1) > .autosuggest__results_title { + border-top: none; + } + + .autosuggest__results .autosuggest__results_title { + color: gray; + font-size: 11px; + margin-left: 0; + padding: 15px 13px 5px; + border-top: 1px solid lightgray; + } + + .autosuggest__results .autosuggest__results_item:active, + .autosuggest__results .autosuggest__results_item:hover, + .autosuggest__results .autosuggest__results_item:focus, + .autosuggest__results + .autosuggest__results_item.autosuggest__results_item-highlighted { + background-color: #f6f6f6; + } +} +</style> diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index b6a0479d..d5772082 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -9,6 +9,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for import BlockCard from '../block_card/block_card.vue' import MuteCard from '../mute_card/mute_card.vue' import EmojiInput from '../emoji-input/emoji-input.vue' +import UserAutoSuggest from '../user_autosuggest/user_autosuggest.vue' import withSubscription from '../../hocs/with_subscription/with_subscription' import withList from '../../hocs/with_list/with_list' @@ -73,7 +74,8 @@ const UserSettings = { ImageCropper, BlockList, MuteList, - EmojiInput + EmojiInput, + UserAutoSuggest }, computed: { user () { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index c08698dc..d98a8eba 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -22,7 +22,7 @@ <div class="setting-item" > <h2>{{$t('settings.name_bio')}}</h2> <p>{{$t('settings.name')}}</p> - <EmojiInput + <EmojiInput type="text" v-model="newName" id="username" @@ -195,6 +195,7 @@ </div> <div :label="$t('settings.blocks_tab')"> + <UserAutoSuggest /> <block-list :refresh="true"> <template slot="empty">{{$t('settings.no_blocks')}}</template> </block-list> |