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

Make tags clickable

This commit is contained in:
Jiiks 2018-12-05 08:26:01 +02:00
parent 497ab62ee6
commit 93f536bf21
3 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/styles/partials/bdsettings/remotecard.scss
View File

@ -48,8 +48,19 @@
color: #828a97; color: #828a97;
font-size: 10px; font-size: 10px;
display: flex; display: flex;
flex-direction: column; align-items: flex-end;
justify-content: flex-end;
.bd-remoteCardTag {
> div {
display: inline;
cursor: pointer;
margin-left: 2px;
&:hover {
color: #fff;
}
}
}
} }
.bd-buttonGroup { .bd-buttonGroup {

8
client/src/ui/components/bd/RemoteCard.vue
View File

@ -25,7 +25,11 @@
</div> </div>
</div> </div>
<div class="bd-flexRow bd-flex bd-flexGrow"> <div class="bd-flexRow bd-flex bd-flexGrow">
<div class="bd-flexGrow bd-remoteCardTags">{{item.tags.join(', ')}}</div> <div class="bd-flexGrow bd-remoteCardTags">
<div v-for="(tag, index) in item.tags" class="bd-remoteCardTag">
<div @click="tagClicked(tag)">{{tag}}</div><span v-if="index + 1 < item.tags.length">, </span>
</div>
</div>
<div class="bd-buttonGroup"> <div class="bd-buttonGroup">
<div class="bd-button">Install</div> <div class="bd-button">Install</div>
<div class="bd-button">Preview</div> <div class="bd-button">Preview</div>
@ -40,7 +44,7 @@
import { shell } from 'electron'; import { shell } from 'electron';
export default { export default {
props: ['item'], props: ['item', 'tagClicked'],
data() { data() {
return {} return {}
}, },

9
client/src/ui/components/bd/ThemesView.vue
View File

@ -35,7 +35,7 @@
</div> </div>
<div class="bd-searchHint">{{searchHint}}</div> <div class="bd-searchHint">{{searchHint}}</div>
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}"> <div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
<input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop /> <input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop :value="onlineThemes.filters.sterm"/>
</div> </div>
</div> </div>
<div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length"> <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
@ -49,7 +49,7 @@
</div> </div>
</div> </div>
<ScrollerWrap class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes" :scrollend="scrollend"> <ScrollerWrap class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes" :scrollend="scrollend">
<RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" /> <RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" :tagClicked="searchByTag"/>
<div class="bd-spinnerContainer"> <div class="bd-spinnerContainer">
<div v-if="loadingMore" class="bd-spinner7"/> <div v-if="loadingMore" class="bd-spinner7"/>
</div> </div>
@ -191,6 +191,11 @@
this.onlineThemes.filters.ascending = false; this.onlineThemes.filters.ascending = false;
} }
this.refreshOnline(); this.refreshOnline();
},
async searchByTag(tag) {
if (this.loadingOnline || this.loadingMore) return;
this.onlineThemes.filters.sterm = tag;
this.refreshOnline();
} }
} }
} }