diff options
author | Dessalines <tyhou13@gmx.com> | 2020-03-20 18:35:33 -0400 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-03-20 18:41:42 -0400 |
commit | 0050ae74a44c88a9a2be3a1a864423b0da627639 (patch) | |
tree | 23e74ebfc5a913c50b22de5ac096311434f0ebe8 /ui/src | |
parent | 4949ab973b4c9a951fa43341972fdb53d712fd56 (diff) |
Switch to radios for user and inbox pages for clarity. Fixes #608
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/comment-node.tsx | 22 | ||||
-rw-r--r-- | ui/src/components/inbox.tsx | 132 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 16 | ||||
-rw-r--r-- | ui/src/components/user.tsx | 83 |
4 files changed, 187 insertions, 66 deletions
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index c1dceed2..b2d04150 100644 --- a/ui/src/components/comment-node.tsx +++ b/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') 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(); diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index a5ec4799..c5afe9ce 100644 --- a/ui/src/components/post-listing.tsx +++ b/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 diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index 3e5df1b0..245df42f 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -242,27 +242,74 @@ export class User extends Component<any, UserState> { ); } - selects() { + viewRadios() { return ( - <div className="mb-2"> - <select - value={this.state.view} - onChange={linkEvent(this, this.handleViewChange)} - class="custom-select custom-select-sm w-auto" + <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'} + `} > - <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 + <input + type="radio" + value={View.Saved} + checked={this.state.view == View.Saved} + onChange={linkEvent(this, this.handleViewChange)} /> - </span> + {i18n.t('saved')} + </label> + </div> + ); + } + + selects() { + return ( + <div className="mb-2"> + <span class="mr-3">{this.viewRadios()}</span> + <SortSelect + sort={this.state.sort} + onChange={this.handleSortChange} + hideHot + /> <a href={`/feeds/u/${this.state.username}.xml?sort=${ SortType[this.state.sort] |