mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-11-10 10:08:58 +00:00
Switch to radios for user and inbox pages for clarity. Fixes #608
This commit is contained in:
Dessalines
parent
4949ab973b
commit
0050ae74a4
22
ui/src/components/comment-node.tsx
vendored
22
ui/src/components/comment-node.tsx
vendored
|
|
@ -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')
|
||||
|
|
|
|||
132
ui/src/components/inbox.tsx
vendored
132
ui/src/components/inbox.tsx
vendored
|
|
@ -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> {
|
|||
);
|
||||
}
|
||||
|
||||
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
|
||||
value={this.state.unreadOrAll}
|
||||
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>
|
||||
<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();
|
||||
|
|
|
|||
16
ui/src/components/post-listing.tsx
vendored
16
ui/src/components/post-listing.tsx
vendored
|
|
@ -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
|
||||
|
|
|
|||
83
ui/src/components/user.tsx
vendored
83
ui/src/components/user.tsx
vendored
|
|
@ -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
|
||||
value={this.state.view}
|
||||
onChange={linkEvent(this, this.handleViewChange)}
|
||||
class="custom-select custom-select-sm w-auto"
|
||||
>
|
||||
<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>
|
||||
<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]
|
||||
|
|
|
|||
Loading…
Reference in a new issue