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

ui/src/components/comment-node.tsx

@@ -254,7 +254,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   {this.props.markable && (
                     <li className="list-inline-item">
                       <button
-                        class="btn btn-link btn-animate text-muted"
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         onClick={linkEvent(this, this.handleMarkRead)}
                         data-tippy-content={
                           node.comment.read
@@ -279,7 +279,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     <>
                       <li className="list-inline-item">
                         <button
-                          className={`btn btn-link btn-animate ${
+                          className={`btn btn-link btn-sm btn-animate ${
                             this.state.my_vote == 1 ? 'text-info' : 'text-muted'
                           }`}
                           onClick={linkEvent(node, this.handleCommentUpvote)}
@@ -296,7 +296,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       {WebSocketService.Instance.site.enable_downvotes && (
                         <li className="list-inline-item">
                           <button
-                            className={`btn btn-link btn-animate ${
+                            className={`btn btn-link btn-sm btn-animate ${
                               this.state.my_vote == -1
                                 ? 'text-danger'
                                 : 'text-muted'
@@ -318,7 +318,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       )}
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-animate text-muted"
+                          class="btn btn-link btn-sm btn-animate text-muted"
                           onClick={linkEvent(this, this.handleSaveCommentClick)}
                           data-tippy-content={
                             node.comment.saved
@@ -340,7 +340,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       </li>
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-animate text-muted"
+                          class="btn btn-link btn-sm btn-animate text-muted"
                           onClick={linkEvent(this, this.handleReplyClick)}
                           data-tippy-content={i18n.t('reply')}
                         >
@@ -352,7 +352,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       {!this.state.showAdvanced ? (
                         <li className="list-inline-item">
                           <button
-                            className="btn btn-link btn-animate text-muted"
+                            className="btn btn-link btn-sm btn-animate text-muted"
                             onClick={linkEvent(this, this.handleShowAdvanced)}
                             data-tippy-content={i18n.t('more')}
                           >
@@ -366,7 +366,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           {!this.myComment && (
                             <li className="list-inline-item">
                               <Link
-                                class="btn btn-link btn-animate text-muted"
+                                class="btn btn-link btn-sm btn-animate text-muted"
                                 to={`/create_private_message?recipient_id=${node.comment.creator_id}`}
                                 title={i18n.t('message').toLowerCase()}
                               >
@@ -379,7 +379,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           {!this.props.showContext && this.linkBtn}
                           <li className="list-inline-item">
                             <button
-                              className="btn btn-link btn-animate text-muted"
+                              className="btn btn-link btn-sm btn-animate text-muted"
                               onClick={linkEvent(this, this.handleViewSource)}
                               data-tippy-content={i18n.t('view_source')}
                             >
@@ -396,7 +396,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               <li className="list-inline-item">•</li>
                               <li className="list-inline-item">
                                 <button
-                                  class="btn btn-link btn-animate text-muted"
+                                  class="btn btn-link btn-sm btn-animate text-muted"
                                   onClick={linkEvent(
                                     this,
                                     this.handleEditClick
@@ -410,7 +410,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               </li>
                               <li className="list-inline-item">
                                 <button
-                                  class="btn btn-link btn-animate text-muted"
+                                  class="btn btn-link btn-sm btn-animate text-muted"
                                   onClick={linkEvent(
                                     this,
                                     this.handleDeleteClick
@@ -763,7 +763,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return (
       <li className="list-inline-item">
         <Link
-          className="btn btn-link btn-animate text-muted"
+          className="btn btn-link btn-sm btn-animate text-muted"
           to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
           title={
             this.props.showContext ? i18n.t('show_context') : i18n.t('link')

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.messageType == MessageType.All && this.all()}
-            {this.state.unreadType == UnreadType.Replies && this.replies()}
+            {this.state.messageType == MessageType.Replies && this.replies()}
-            {this.state.unreadType == UnreadType.Mentions && this.mentions()}
+            {this.state.messageType == MessageType.Mentions && this.mentions()}
-            {this.state.unreadType == UnreadType.Messages && this.messages()}
+            {this.state.messageType == MessageType.Messages && this.messages()}
             {this.paginator()}
           </div>
         </div>
@@ -141,29 +141,103 @@ export class Inbox extends Component<any, InboxState> {
     );
   }
 
+  unreadOrAllRadios() {
+    return (
+      <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'}
+          `}
+        >
+          <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'}
+          `}
+        >
+          <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">
-        <select
+        <span class="mr-3">{this.unreadOrAllRadios()}</span>
-          value={this.state.unreadOrAll}
+        <span class="mr-3">{this.messageTypeRadios()}</span>
-          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          class="custom-select custom-select-sm w-auto mr-2"
-        >
-          <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"
-        >
-          <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>
         <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) {
+  handleMessageTypeChange(i: Inbox, event: any) {
-    i.state.unreadType = Number(event.target.value);
+    i.state.messageType = Number(event.target.value);
     i.state.page = 1;
     i.setState(i.state);
     i.refetch();

ui/src/components/post-listing.tsx

@@ -524,7 +524,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       <>
                         <li className="list-inline-item">
                           <button
-                            class="btn btn-link btn-animate text-muted"
+                            class="btn btn-sm btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleSavePostClick)}
                             data-tippy-content={
                               post.saved ? i18n.t('unsave') : i18n.t('save')
@@ -540,7 +540,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         </li>
                         <li className="list-inline-item">
                           <Link
-                            class="btn btn-link btn-animate text-muted"
+                            class="btn btn-sm btn-link btn-animate text-muted"
                             to={`/create_post${this.crossPostParams}`}
                             title={i18n.t('cross_post')}
                           >
@@ -555,7 +555,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       <>
                         <li className="list-inline-item">
                           <button
-                            class="btn btn-link btn-animate text-muted"
+                            class="btn btn-sm btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleEditClick)}
                             data-tippy-content={i18n.t('edit')}
                           >
@@ -566,7 +566,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         </li>
                         <li className="list-inline-item">
                           <button
-                            class="btn btn-link btn-animate text-muted"
+                            class="btn btn-sm btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleDeleteClick)}
                             data-tippy-content={
                               !post.deleted
@@ -588,7 +588,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                     {!this.state.showAdvanced && this.props.showBody ? (
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-animate text-muted"
+                          class="btn btn-sm btn-link btn-animate text-muted"
                           onClick={linkEvent(this, this.handleShowAdvanced)}
                           data-tippy-content={i18n.t('more')}
                         >
@@ -602,7 +602,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         {this.props.showBody && post.body && (
                           <li className="list-inline-item">
                             <button
-                              class="btn btn-link btn-animate text-muted"
+                              class="btn btn-sm btn-link btn-animate text-muted"
                               onClick={linkEvent(this, this.handleViewSource)}
                               data-tippy-content={i18n.t('view_source')}
                             >
@@ -619,7 +619,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                           <>
                             <li className="list-inline-item">
                               <button
-                                class="btn btn-link btn-animate text-muted"
+                                class="btn btn-sm btn-link btn-animate text-muted"
                                 onClick={linkEvent(this, this.handleModLock)}
                                 data-tippy-content={
                                   post.locked
@@ -637,7 +637,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             </li>
                             <li className="list-inline-item">
                               <button
-                                class="btn btn-link btn-animate text-muted"
+                                class="btn btn-sm btn-link btn-animate text-muted"
                                 onClick={linkEvent(this, this.handleModSticky)}
                                 data-tippy-content={
                                   post.stickied

ui/src/components/user.tsx

@@ -242,27 +242,74 @@ export class User extends Component<any, UserState> {
     );
   }
 
+  viewRadios() {
+    return (
+      <div class="btn-group btn-group-toggle">
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.view == View.Overview && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={View.Overview}
+            checked={this.state.view == View.Overview}
+            onChange={linkEvent(this, this.handleViewChange)}
+          />
+          {i18n.t('overview')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.view == View.Comments && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={View.Comments}
+            checked={this.state.view == View.Comments}
+            onChange={linkEvent(this, this.handleViewChange)}
+          />
+          {i18n.t('comments')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.view == View.Posts && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={View.Posts}
+            checked={this.state.view == View.Posts}
+            onChange={linkEvent(this, this.handleViewChange)}
+          />
+          {i18n.t('posts')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.view == View.Saved && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={View.Saved}
+            checked={this.state.view == View.Saved}
+            onChange={linkEvent(this, this.handleViewChange)}
+          />
+          {i18n.t('saved')}
+        </label>
+      </div>
+    );
+  }
+
   selects() {
     return (
       <div className="mb-2">
-        <select
+        <span class="mr-3">{this.viewRadios()}</span>
-          value={this.state.view}
+        <SortSelect
-          onChange={linkEvent(this, this.handleViewChange)}
+          sort={this.state.sort}
-          class="custom-select custom-select-sm w-auto"
+          onChange={this.handleSortChange}
-        >
+          hideHot
-          <option disabled>{i18n.t('view')}</option>
+        />
-          <option value={View.Overview}>{i18n.t('overview')}</option>
-          <option value={View.Comments}>{i18n.t('comments')}</option>
-          <option value={View.Posts}>{i18n.t('posts')}</option>
-          <option value={View.Saved}>{i18n.t('saved')}</option>
-        </select>
-        <span class="ml-2">
-          <SortSelect
-            sort={this.state.sort}
-            onChange={this.handleSortChange}
-            hideHot
-          />
-        </span>
         <a
           href={`/feeds/u/${this.state.username}.xml?sort=${
             SortType[this.state.sort]