From 95447dd3f09938ca50886bad8780558ca9756607 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 08:07:18 +0200
Subject: [PATCH] Array for sort buttons

---
 client/src/styles/partials/bdsettings/contentview.scss |  1 +
 client/src/ui/components/bd/ThemesView.vue             | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 926b853c..9f5a084f 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -53,6 +53,7 @@
                     height: 14px;
                     cursor: pointer;
                     transition: color .2s ease-in-out;
+                    font-weight: 700;
 
                     &:hover {
                         color: #fff;
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 1c1c87c8..5728f8fb 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -40,10 +40,11 @@
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
                         <div class="bd-searchSort bd-flex bd-flexGrow">
-                            <div class="bd-sort" @click="sortBy('updated')" :class="{'bd-active': onlineThemes.filters.sort === 'updated', 'bd-flipY': onlineThemes.filters.ascending}">Updated<MiChevronDown v-if="onlineThemes.filters.sort === 'updated'" size="18" /></div>
-                            <div class="bd-sort" @click="sortBy('installs')" :class="{'bd-active': onlineThemes.filters.sort === 'installs', 'bd-flipY': onlineThemes.filters.ascending}">Installs<MiChevronDown v-if="onlineThemes.filters.sort === 'installs'" size="18" /></div>
-                            <div class="bd-sort" @click="sortBy('users')" :class="{'bd-active': onlineThemes.filters.sort === 'users', 'bd-flipY': onlineThemes.filters.ascending}">Users<MiChevronDown v-if="onlineThemes.filters.sort === 'users'" size="18" /></div>
-                            <div class="bd-sort" @click="sortBy('rating')" :class="{'bd-active': onlineThemes.filters.sort === 'rating', 'bd-flipY': onlineThemes.filters.ascending}">Rating<MiChevronDown v-if="onlineThemes.filters.sort === 'rating'" size="18" /></div>
+                            <div v-for="btn in sortBtns"
+                                 class="bd-sort"
+                                 :class="{'bd-active': onlineThemes.filters.sort === btn.toLowerCase(), 'bd-flipY': onlineThemes.filters.ascending}"
+                                 @click="sortBy(btn.toLowerCase())">{{btn}}<MiChevronDown v-if="onlineThemes.filters.sort === btn.toLowerCase()" size="18" />
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -73,6 +74,7 @@
         data() {
             return {
                 ThemeManager,
+                sortBtns: ['Updated', 'Installs', 'Users', 'Rating'],
                 local: true,
                 localThemes: ThemeManager.localThemes,
                 onlineThemes: {