add autocomplete hint text and float right for third title

This commit is contained in:
Jiiks 2018-08-22 20:15:21 +03:00
parent 5c92f3e3e0
commit 07374ceeee
3 changed files with 14 additions and 7 deletions

View File

@ -1,4 +1,4 @@
/**
/**
* BetterDiscord Emote Autocomplete Module
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
* All rights reserved.
@ -41,13 +41,14 @@ export default new class EmoteAc extends BuiltinModule {
if (regex.length <= 0) {
return {
type: 'imagetext',
title: [`Your ${acType ? 'most used' : 'favourite'} emotes`, '<= TOGGLE =>'],
title: [`Your ${acType ? 'most used' : 'favourite'} emotes`, '', `${acType ? 'Favourites' : 'Most Used'}`],
items: EmoteModule[acType ? 'mostUsed' : 'favourites'].sort((a, b) => b.useCount - a.useCount).slice(0, 10).map(mu => {
return {
key: acType ? `${mu.key} | ${mu.useCount}` : mu.name,
key: acType ? mu.key : mu.name,
value: {
src: EMOTE_SOURCES[mu.type].replace(':id', mu.id),
replaceWith: `;${acType ? mu.key : mu.name};`
replaceWith: `;${acType ? mu.key : mu.name};`,
hint: mu.useCount ? `Used ${mu.useCount} times` : null
}
}
})

View File

@ -73,6 +73,10 @@
margin-left: 8px;
color: #f6f6f7;
}
.bd-acHint {
color: #72767d;
}
}
}
}

View File

@ -15,15 +15,17 @@
<div class="bd-autocompleteSelector">
<div class="bd-autocompleteTitle">
{{search.title[0] || search.title}}
<strong>{{search.title[1] || sterm}}</strong>
<strong v-if="search.title.length >= 2">{{search.title[1] || sterm}}</strong>
<strong v-if="search.title.length === 3" :style="{float: 'right'}">{{search.title[2]}}</strong>
</div>
</div>
</div>
<div v-for="(item, index) in search.items" class="bd-autocompleteRow" @mouseover="selectedIndex = index" @click="inject">
<div class="bd-autocompleteSelector bd-selectable" :class="{'bd-selected': index === selectedIndex}">
<div class="bd-autocompleteField">
<img v-if="search.type === 'imagetext'" :src="item.value.src" :alt="item.key" />
<div class="bd-flexGrow">{{item.key}}</div>
<img v-if="search.type === 'imagetext'" :src="item.src || item.value.src" :alt="item.key || item.text || item.alt" />
<div class="bd-flexGrow">{{item.key || item.text}}</div>
<div class="bd-acHint" v-if="item.hint || (item.value && item.value.hint)">{{item.hint || item.value.hint}}</div>
</div>
</div>
</div>