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

This commit is contained in:
Dessalines 2020-03-20 18:35:33 -04:00
parent 4949ab973b
commit 0050ae74a4
4 changed files with 187 additions and 66 deletions

View File

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

View File

@ -39,7 +39,7 @@ enum UnreadOrAll {
All, All,
} }
enum UnreadType { enum MessageType {
All, All,
Replies, Replies,
Mentions, Mentions,
@ -50,7 +50,7 @@ type ReplyType = Comment | PrivateMessageI;
interface InboxState { interface InboxState {
unreadOrAll: UnreadOrAll; unreadOrAll: UnreadOrAll;
unreadType: UnreadType; messageType: MessageType;
replies: Array<Comment>; replies: Array<Comment>;
mentions: Array<Comment>; mentions: Array<Comment>;
messages: Array<PrivateMessageI>; messages: Array<PrivateMessageI>;
@ -62,7 +62,7 @@ export class Inbox extends Component<any, InboxState> {
private subscription: Subscription; private subscription: Subscription;
private emptyState: InboxState = { private emptyState: InboxState = {
unreadOrAll: UnreadOrAll.Unread, unreadOrAll: UnreadOrAll.Unread,
unreadType: UnreadType.All, messageType: MessageType.All,
replies: [], replies: [],
mentions: [], mentions: [],
messages: [], messages: [],
@ -130,10 +130,10 @@ export class Inbox extends Component<any, InboxState> {
</ul> </ul>
)} )}
{this.selects()} {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()} {this.paginator()}
</div> </div>
</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() { selects() {
return ( return (
<div className="mb-2"> <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 <SortSelect
sort={this.state.sort} sort={this.state.sort}
onChange={this.handleSortChange} onChange={this.handleSortChange}
@ -279,8 +353,8 @@ export class Inbox extends Component<any, InboxState> {
i.refetch(); 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.state.page = 1;
i.setState(i.state); i.setState(i.state);
i.refetch(); i.refetch();

View File

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

View File

@ -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() { selects() {
return ( return (
<div className="mb-2"> <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 <a
href={`/feeds/u/${this.state.username}.xml?sort=${ href={`/feeds/u/${this.state.username}.xml?sort=${
SortType[this.state.sort] SortType[this.state.sort]