mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-01 10:09:56 +00:00
Merge pull request #1670 from LemmyNet/bugfix/fix-subscribe-button-layout
Make community sidebar "Subscribe"/"Joined"/"Pending" button consistent
This commit is contained in:
commit
0e9faf75da
1 changed files with 39 additions and 32 deletions
|
@ -166,7 +166,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
|
|
||||||
communityTitle() {
|
communityTitle() {
|
||||||
const community = this.props.community_view.community;
|
const community = this.props.community_view.community;
|
||||||
const subscribed = this.props.community_view.subscribed;
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h5 className="mb-0">
|
<h5 className="mb-0">
|
||||||
|
@ -176,33 +176,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
<span className="me-2">
|
<span className="me-2">
|
||||||
<CommunityLink community={community} hideAvatar />
|
<CommunityLink community={community} hideAvatar />
|
||||||
</span>
|
</span>
|
||||||
{subscribed === "Subscribed" && (
|
|
||||||
<button
|
|
||||||
className="btn btn-secondary btn-sm me-2"
|
|
||||||
onClick={linkEvent(this, this.handleUnfollowCommunity)}
|
|
||||||
>
|
|
||||||
{this.state.followCommunityLoading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Icon icon="check" classes="icon-inline text-success me-1" />
|
|
||||||
{I18NextService.i18n.t("joined")}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{subscribed === "Pending" && (
|
|
||||||
<button
|
|
||||||
className="btn btn-warning me-2"
|
|
||||||
onClick={linkEvent(this, this.handleUnfollowCommunity)}
|
|
||||||
>
|
|
||||||
{this.state.followCommunityLoading ? (
|
|
||||||
<Spinner />
|
|
||||||
) : (
|
|
||||||
I18NextService.i18n.t("subscribe_pending")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{community.removed && (
|
{community.removed && (
|
||||||
<small className="me-2 text-muted fst-italic">
|
<small className="me-2 text-muted fst-italic">
|
||||||
{I18NextService.i18n.t("removed")}
|
{I18NextService.i18n.t("removed")}
|
||||||
|
@ -259,8 +232,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
|
|
||||||
subscribe() {
|
subscribe() {
|
||||||
const community_view = this.props.community_view;
|
const community_view = this.props.community_view;
|
||||||
|
|
||||||
|
if (community_view.subscribed === "NotSubscribed") {
|
||||||
return (
|
return (
|
||||||
community_view.subscribed === "NotSubscribed" && (
|
|
||||||
<button
|
<button
|
||||||
className="btn btn-secondary d-block mb-2 w-100"
|
className="btn btn-secondary d-block mb-2 w-100"
|
||||||
onClick={linkEvent(this, this.handleFollowCommunity)}
|
onClick={linkEvent(this, this.handleFollowCommunity)}
|
||||||
|
@ -271,10 +245,43 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
I18NextService.i18n.t("subscribe")
|
I18NextService.i18n.t("subscribe")
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (community_view.subscribed === "Subscribed") {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className="btn btn-secondary d-block mb-2 w-100"
|
||||||
|
onClick={linkEvent(this, this.handleUnfollowCommunity)}
|
||||||
|
>
|
||||||
|
{this.state.followCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Icon icon="check" classes="icon-inline text-success me-1" />
|
||||||
|
{I18NextService.i18n.t("joined")}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (community_view.subscribed === "Pending") {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className="btn btn-warning d-block mb-2 w-100"
|
||||||
|
onClick={linkEvent(this, this.handleUnfollowCommunity)}
|
||||||
|
>
|
||||||
|
{this.state.followCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
I18NextService.i18n.t("subscribe_pending")
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
blockCommunity() {
|
blockCommunity() {
|
||||||
const { subscribed, blocked } = this.props.community_view;
|
const { subscribed, blocked } = this.props.community_view;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue