sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fancier visuals for autocomplete list, with small avatar previews and all that.

Browse source
This commit is contained in:
Shpuld Shpuldson 2017-06-16 01:13:54 +03:00
parent d0d95c59aa
commit 81d262af42
2 changed files with 49 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/post_status_form/post_status_form.js
View file

@ -50,10 +50,17 @@ const PostStatusForm = {
candidates () {
if (this.textAtCaret.charAt(0) === '@') {
const matchedUsers = filter(this.users, (user) => (user.name + user.screen_name).match(this.textAtCaret.slice(1)))
if (matchedUsers.length <= 0) {
return false
}
// eslint-disable-next-line camelcase
return map(take(matchedUsers, 5), ({screen_name, name}) => screen_name)
return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}) => ({
screen_name: screen_name,
name: name,
img: profile_image_url_original
}))
} else {
return ['nothing']
return false
}
},
textAtCaret () {

46
src/components/post_status_form/post_status_form.vue
View file

@ -4,12 +4,16 @@
<div class="form-group base03-border" >
<textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
</div>
<div>
<h1>Word</h1>
<h2>{{textAtCaret}}</h2>
<h1>Candidates</h1>
<h3 v-for="candidate in candidates" @click="replace('@' + candidate)">{{candidate}}</h3>
<div style="position:relative;" v-if="candidates">
<div class="autocomplete-panel base05-background">
<div v-for="candidate in candidates" @click="replace('@' + candidate.screen_name)" class="autocomplete base01">
<img :src="candidate.img"></img>
<span>
@{{candidate.screen_name}}
<small class="base02">{{candidate.name}}</small>
</span>
</div>
</div>
</div>
<div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
@ -115,6 +119,36 @@
.icon-cancel {
cursor: pointer;
}
.autocomplete-panel {
margin: 0 0.5em 0 0.5em;
padding: 0.25em 0.45em 0 0.45em;
border-radius: 5px;
position: absolute;
z-index: 1;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
min-width: 75%;
}
.autocomplete {
cursor: pointer;
padding: 0.2em 0 0.2em 0;
margin: 0.1em 0 0.1em 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
display: flex;
img {
width: 22px;
height: 22px;
border-radius: 2px;
}
span {
line-height: 20px;
margin: 0 0.1em 0 0.2em;
}
small {
font-style: italic;
}
}
}
</style>