lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

bd-autocomplete -> bd-ac

This commit is contained in:
Jiiks 2018-08-22 20:17:43 +03:00
parent 07374ceeee
commit 2002db7807
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/styles/partials/generic/autocomplete.scss
View File

@ -1,4 +1,4 @@
.bd-autocomplete { .bd-ac {
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -10,16 +10,16 @@
right: 0; right: 0;
background-color: #2f3136; background-color: #2f3136;
.bd-autocompleteInner { .bd-acInner {
padding-bottom: 8px; padding-bottom: 8px;
white-space: nowrap; white-space: nowrap;
.bd-autocompleteRow { .bd-acRow {
padding: 0 8px; padding: 0 8px;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
.bd-autocompleteSelector { .bd-acSelector {
border-radius: 3px; border-radius: 3px;
padding: 8px; padding: 8px;
@ -35,7 +35,7 @@
} }
} }
.bd-autocompleteTitle { .bd-acTitle {
color: #72767d; color: #72767d;
padding: 4px 0; padding: 4px 0;
text-transform: uppercase; text-transform: uppercase;
@ -50,7 +50,7 @@
} }
} }
.bd-autocompleteField { .bd-acField {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
color: #f6f6f7; color: #f6f6f7;

16
client/src/ui/components/common/Autocomplete.vue
View File

@ -9,20 +9,20 @@
*/ */
<template> <template>
<div class="bd-autocomplete"> <div class="bd-ac">
<div v-if="search.items.length" class="bd-autocompleteInner"> <div v-if="search.items.length" class="bd-acInner">
<div class="bd-autocompleteRow"> <div class="bd-acRow">
<div class="bd-autocompleteSelector"> <div class="bd-acSelector">
<div class="bd-autocompleteTitle"> <div class="bd-acTitle">
{{search.title[0] || search.title}} {{search.title[0] || search.title}}
<strong v-if="search.title.length >= 2">{{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> <strong v-if="search.title.length === 3" :style="{float: 'right'}">{{search.title[2]}}</strong>
</div> </div>
</div> </div>
</div> </div>
<div v-for="(item, index) in search.items" class="bd-autocompleteRow" @mouseover="selectedIndex = index" @click="inject"> <div v-for="(item, index) in search.items" class="bd-acRow" @mouseover="selectedIndex = index" @click="inject">
<div class="bd-autocompleteSelector bd-selectable" :class="{'bd-selected': index === selectedIndex}"> <div class="bd-acSelector bd-selectable" :class="{'bd-selected': index === selectedIndex}">
<div class="bd-autocompleteField"> <div class="bd-acField">
<img v-if="search.type === 'imagetext'" :src="item.src || item.value.src" :alt="item.key || item.text || item.alt" /> <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-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 class="bd-acHint" v-if="item.hint || (item.value && item.value.hint)">{{item.hint || item.value.hint}}</div>