grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/src/components/comment-node.tsx vendored
View file

@ -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
View file

@ -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
View file

@ -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
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() {
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]