From d052f6b63994f208f5a5c3741acfc4482eb8d276 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Sevilla=20Mart=C3=ADn?=
 <datitisev@users.noreply.github.com>
Date: Mon, 17 Jul 2017 00:10:35 -0400
Subject: [PATCH] Use dropdown for discussion list order input (#1191)

* Use dropdown menu for index select input

* Fix space before `:`
---
 js/forum/dist/app.js                 | 31 +++++++++++++++++++++-------
 js/forum/src/components/IndexPage.js | 21 ++++++++++++++-----
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/js/forum/dist/app.js b/js/forum/dist/app.js
index 629e93c2c..fad6954e7 100644
--- a/js/forum/dist/app.js
+++ b/js/forum/dist/app.js
@@ -23275,10 +23275,10 @@ System.register('flarum/components/HeaderSecondary', ['flarum/Component', 'flaru
 });;
 'use strict';
 
-System.register('flarum/components/IndexPage', ['flarum/extend', 'flarum/components/Page', 'flarum/utils/ItemList', 'flarum/helpers/listItems', 'flarum/helpers/icon', 'flarum/components/DiscussionList', 'flarum/components/WelcomeHero', 'flarum/components/DiscussionComposer', 'flarum/components/LogInModal', 'flarum/components/DiscussionPage', 'flarum/components/Select', 'flarum/components/Button', 'flarum/components/LinkButton', 'flarum/components/SelectDropdown'], function (_export, _context) {
+System.register('flarum/components/IndexPage', ['flarum/extend', 'flarum/components/Page', 'flarum/utils/ItemList', 'flarum/helpers/listItems', 'flarum/helpers/icon', 'flarum/components/DiscussionList', 'flarum/components/WelcomeHero', 'flarum/components/DiscussionComposer', 'flarum/components/LogInModal', 'flarum/components/DiscussionPage', 'flarum/components/Dropdown', 'flarum/components/Button', 'flarum/components/LinkButton', 'flarum/components/SelectDropdown'], function (_export, _context) {
   "use strict";
 
-  var extend, Page, ItemList, listItems, icon, DiscussionList, WelcomeHero, DiscussionComposer, LogInModal, DiscussionPage, Select, Button, LinkButton, SelectDropdown, IndexPage;
+  var extend, Page, ItemList, listItems, icon, DiscussionList, WelcomeHero, DiscussionComposer, LogInModal, DiscussionPage, Dropdown, Button, LinkButton, SelectDropdown, IndexPage;
   return {
     setters: [function (_flarumExtend) {
       extend = _flarumExtend.extend;
@@ -23300,8 +23300,8 @@ System.register('flarum/components/IndexPage', ['flarum/extend', 'flarum/compone
       LogInModal = _flarumComponentsLogInModal.default;
     }, function (_flarumComponentsDiscussionPage) {
       DiscussionPage = _flarumComponentsDiscussionPage.default;
-    }, function (_flarumComponentsSelect) {
-      Select = _flarumComponentsSelect.default;
+    }, function (_flarumComponentsDropdown) {
+      Dropdown = _flarumComponentsDropdown.default;
     }, function (_flarumComponentsButton) {
       Button = _flarumComponentsButton.default;
     }, function (_flarumComponentsLinkButton) {
@@ -23504,6 +23504,8 @@ System.register('flarum/components/IndexPage', ['flarum/extend', 'flarum/compone
         }, {
           key: 'viewItems',
           value: function viewItems() {
+            var _this2 = this;
+
             var items = new ItemList();
             var sortMap = app.cache.discussionList.sortMap();
 
@@ -23512,10 +23514,23 @@ System.register('flarum/components/IndexPage', ['flarum/extend', 'flarum/compone
               sortOptions[i] = app.translator.trans('core.forum.index_sort.' + i + '_button');
             }
 
-            items.add('sort', Select.component({
-              options: sortOptions,
-              value: this.params().sort || Object.keys(sortMap)[0],
-              onchange: this.changeSort.bind(this)
+            items.add('sort', Dropdown.component({
+              buttonClassName: "Select-input FormControl",
+              label: sortOptions[this.params().sort] || Object.keys(sortMap).map(function (key) {
+                return sortOptions[key];
+              })[0],
+              caretIcon: "sort",
+              children: Object.keys(sortOptions).map(function (value) {
+                var label = sortOptions[value];
+                var active = (_this2.params().sort || Object.keys(sortMap)[0]) === value;
+
+                return Button.component({
+                  children: label,
+                  icon: active ? 'check' : true,
+                  onclick: _this2.changeSort.bind(_this2, value),
+                  active: active
+                });
+              })
             }));
 
             return items;
diff --git a/js/forum/src/components/IndexPage.js b/js/forum/src/components/IndexPage.js
index 6c3bbb9e4..b677363d1 100644
--- a/js/forum/src/components/IndexPage.js
+++ b/js/forum/src/components/IndexPage.js
@@ -8,7 +8,7 @@ import WelcomeHero from 'flarum/components/WelcomeHero';
 import DiscussionComposer from 'flarum/components/DiscussionComposer';
 import LogInModal from 'flarum/components/LogInModal';
 import DiscussionPage from 'flarum/components/DiscussionPage';
-import Select from 'flarum/components/Select';
+import Dropdown from 'flarum/components/Dropdown';
 import Button from 'flarum/components/Button';
 import LinkButton from 'flarum/components/LinkButton';
 import SelectDropdown from 'flarum/components/SelectDropdown';
@@ -212,10 +212,21 @@ export default class IndexPage extends Page {
     }
 
     items.add('sort',
-      Select.component({
-        options: sortOptions,
-        value: this.params().sort || Object.keys(sortMap)[0],
-        onchange: this.changeSort.bind(this)
+      Dropdown.component({
+        buttonClassName: "Select-input FormControl",
+        label: sortOptions[this.params().sort] || Object.keys(sortMap).map(key => sortOptions[key])[0],
+        caretIcon: "sort",
+        children: Object.keys(sortOptions).map(value => {
+          const label = sortOptions[value];
+          const active = (this.params().sort || Object.keys(sortMap)[0]) === value;
+
+          return Button.component({
+            children: label,
+            icon: active ? 'check' : true,
+            onclick: this.changeSort.bind(this, value),
+            active: active,
+          })
+        }),
       })
     );