Switch to radios for user and inbox pages for clarity. Fixes #608

1 files changed, 103 insertions, 29 deletions

diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index fa6bd397..63004c26 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -39,7 +39,7 @@ enum UnreadOrAll {
   All,
 }
 
-enum UnreadType {
+enum MessageType {
   All,
   Replies,
   Mentions,
@@ -50,7 +50,7 @@ type ReplyType = Comment | PrivateMessageI;
 
 interface InboxState {
   unreadOrAll: UnreadOrAll;
-  unreadType: UnreadType;
+  messageType: MessageType;
   replies: Array<Comment>;
   mentions: Array<Comment>;
   messages: Array<PrivateMessageI>;
@@ -62,7 +62,7 @@ export class Inbox extends Component<any, InboxState> {
   private subscription: Subscription;
   private emptyState: InboxState = {
     unreadOrAll: UnreadOrAll.Unread,
-    unreadType: UnreadType.All,
+    messageType: MessageType.All,
     replies: [],
     mentions: [],
     messages: [],
@@ -130,10 +130,10 @@ export class Inbox extends Component<any, InboxState> {
                 </ul>
               )}
             {this.selects()}
-            {this.state.unreadType == UnreadType.All && this.all()}
-            {this.state.unreadType == UnreadType.Replies && this.replies()}
-            {this.state.unreadType == UnreadType.Mentions && this.mentions()}
-            {this.state.unreadType == UnreadType.Messages && this.messages()}
+            {this.state.messageType == MessageType.All && this.all()}
+            {this.state.messageType == MessageType.Replies && this.replies()}
+            {this.state.messageType == MessageType.Mentions && this.mentions()}
+            {this.state.messageType == MessageType.Messages && this.messages()}
             {this.paginator()}
           </div>
         </div>
@@ -141,29 +141,103 @@ export class Inbox extends Component<any, InboxState> {
     );
   }
 
-  selects() {
+  unreadOrAllRadios() {
     return (
-      <div className="mb-2">
-        <select
-          value={this.state.unreadOrAll}
-          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          class="custom-select custom-select-sm w-auto mr-2"
+      <div class="btn-group btn-group-toggle">
+        <label
+          className={`btn btn-sm btn-secondary pointer
+            ${this.state.unreadOrAll == UnreadOrAll.Unread && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={UnreadOrAll.Unread}
+            checked={this.state.unreadOrAll == UnreadOrAll.Unread}
+            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+          />
+          {i18n.t('unread')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer
+            ${this.state.unreadOrAll == UnreadOrAll.All && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={UnreadOrAll.All}
+            checked={this.state.unreadOrAll == UnreadOrAll.All}
+            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+          />
+          {i18n.t('all')}
+        </label>
+      </div>
+    );
+  }
+
+  messageTypeRadios() {
+    return (
+      <div class="btn-group btn-group-toggle">
+        <label
+          className={`btn btn-sm btn-secondary pointer
+            ${this.state.messageType == MessageType.All && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={MessageType.All}
+            checked={this.state.messageType == MessageType.All}
+            onChange={linkEvent(this, this.handleMessageTypeChange)}
+          />
+          {i18n.t('all')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.messageType == MessageType.Replies && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={MessageType.Replies}
+            checked={this.state.messageType == MessageType.Replies}
+            onChange={linkEvent(this, this.handleMessageTypeChange)}
+          />
+          {i18n.t('replies')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.messageType == MessageType.Mentions && 'active'}
+          `}
         >
-          <option disabled>{i18n.t('type')}</option>
-          <option value={UnreadOrAll.Unread}>{i18n.t('unread')}</option>
-          <option value={UnreadOrAll.All}>{i18n.t('all')}</option>
-        </select>
-        <select
-          value={this.state.unreadType}
-          onChange={linkEvent(this, this.handleUnreadTypeChange)}
-          class="custom-select custom-select-sm w-auto mr-2"
+          <input
+            type="radio"
+            value={MessageType.Mentions}
+            checked={this.state.messageType == MessageType.Mentions}
+            onChange={linkEvent(this, this.handleMessageTypeChange)}
+          />
+          {i18n.t('mentions')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.messageType == MessageType.Messages && 'active'}
+          `}
         >
-          <option disabled>{i18n.t('type')}</option>
-          <option value={UnreadType.All}>{i18n.t('all')}</option>
-          <option value={UnreadType.Replies}>{i18n.t('replies')}</option>
-          <option value={UnreadType.Mentions}>{i18n.t('mentions')}</option>
-          <option value={UnreadType.Messages}>{i18n.t('messages')}</option>
-        </select>
+          <input
+            type="radio"
+            value={MessageType.Messages}
+            checked={this.state.messageType == MessageType.Messages}
+            onChange={linkEvent(this, this.handleMessageTypeChange)}
+          />
+          {i18n.t('messages')}
+        </label>
+      </div>
+    );
+  }
+
+  selects() {
+    return (
+      <div className="mb-2">
+        <span class="mr-3">{this.unreadOrAllRadios()}</span>
+        <span class="mr-3">{this.messageTypeRadios()}</span>
         <SortSelect
           sort={this.state.sort}
           onChange={this.handleSortChange}
@@ -279,8 +353,8 @@ export class Inbox extends Component<any, InboxState> {
     i.refetch();
   }
 
-  handleUnreadTypeChange(i: Inbox, event: any) {
-    i.state.unreadType = Number(event.target.value);
+  handleMessageTypeChange(i: Inbox, event: any) {
+    i.state.messageType = Number(event.target.value);
     i.state.page = 1;
     i.setState(i.state);
     i.refetch();