Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Re-arranging subscribed. Removing transparent cards. Fixes #38"

Browse source
This commit is contained in:
Dessalines 2020-09-23 18:01:45 -05:00
parent f9c0c72bb9
commit fb1163e27f
6 changed files with 102 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/shared/components/community.tsx
View file

@ -243,7 +243,7 @@ export class Community extends Component<any, State> {
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={this.state.communityRes.community.title}
description={this.state.communityRes.community.description}
image={this.state.communityRes.community.icon}
/>
{this.communityInfo()}

2
src/shared/components/iframely-card.tsx
View file

@ -29,7 +29,7 @@ export class IFramelyCard extends Component<
return (
<>
{post.embed_title && !this.state.expanded && (
<div class="card bg-transparent border-secondary mt-3 mb-2">
<div class="card border-secondary mt-3 mb-2">
<div class="row">
<div class="col-12">
<div class="card-body">

95
src/shared/components/main.tsx
View file

@ -274,28 +274,25 @@ export class Main extends Component<any, MainState> {
<div>
{!this.state.loading && (
<div>
<div class="card bg-transparent border-secondary mb-3">
<div class="card-header bg-transparent border-secondary">
<div class="mb-2">
{this.siteName()}
{this.adminButtons()}
</div>
<BannerIconHeader banner={this.state.siteRes.site.banner} />
</div>
<div class="card border-secondary mb-3">
<div class="card-body">
{this.trendingCommunities()}
{this.createCommunityButton()}
{/* TODO
{this.subscribedCommunities()}
*/}
</div>
</div>
<div class="card bg-transparent border-secondary mb-3">
{UserService.Instance.user &&
this.state.subscribedCommunities.length > 0 && (
<div class="card border-secondary mb-3">
<div class="card-body">{this.subscribedCommunities()}</div>
</div>
)}
<div class="card border-secondary mb-3">
<div class="card-body">{this.sidebar()}</div>
</div>
<div class="card bg-transparent border-secondary">
<div class="card border-secondary">
<div class="card-body">{this.landing()}</div>
</div>
</div>
@ -336,34 +333,31 @@ export class Main extends Component<any, MainState> {
subscribedCommunities() {
return (
UserService.Instance.user &&
this.state.subscribedCommunities.length > 0 && (
<div>
<h5>
<T i18nKey="subscribed_to_communities">
<div>
<h5>
<T i18nKey="subscribed_to_communities">
#
<Link className="text-body" to="/communities">
#
<Link className="text-body" to="/communities">
#
</Link>
</T>
</h5>
<ul class="list-inline">
{this.state.subscribedCommunities.map(community => (
<li class="list-inline-item">
<CommunityLink
community={{
name: community.community_name,
id: community.community_id,
local: community.community_local,
actor_id: community.community_actor_id,
icon: community.community_icon,
}}
/>
</li>
))}
</ul>
</div>
)
</Link>
</T>
</h5>
<ul class="list-inline mb-0">
{this.state.subscribedCommunities.map(community => (
<li class="list-inline-item">
<CommunityLink
community={{
name: community.community_name,
id: community.community_id,
local: community.community_local,
actor_id: community.community_actor_id,
icon: community.community_icon,
}}
/>
</li>
))}
</ul>
</div>
);
}
@ -371,7 +365,14 @@ export class Main extends Component<any, MainState> {
return (
<div>
{!this.state.showEditSite ? (
this.siteInfo()
<div>
<div class="mb-2">
{this.siteName()}
{this.adminButtons()}
</div>
<BannerIconHeader banner={this.state.siteRes.site.banner} />
{this.siteInfo()}
</div>
) : (
<SiteForm
site={this.state.siteRes.site}
@ -431,31 +432,31 @@ export class Main extends Component<any, MainState> {
badges() {
return (
<ul class="my-2 list-inline">
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
{i18n.t('number_online', { count: this.state.siteRes.online })}
</li>
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_users', {
count: this.state.siteRes.site.number_of_users,
})}
</li>
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_communities', {
count: this.state.siteRes.site.number_of_communities,
})}
</li>
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_posts', {
count: this.state.siteRes.site.number_of_posts,
})}
</li>
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_comments', {
count: this.state.siteRes.site.number_of_comments,
})}
</li>
<li className="list-inline-item">
<Link className="badge badge-light" to="/modlog">
<Link className="badge badge-secondary" to="/modlog">
{i18n.t('modlog')}
</Link>
</li>

2
src/shared/components/markdown-textarea.tsx
View file

@ -133,7 +133,7 @@ export class MarkdownTextArea extends Component<
/>
{this.state.previewMode && (
<div
className="card bg-transparent border-secondary card-body md-div"
className="card border-secondary card-body md-div"
dangerouslySetInnerHTML={mdToHtml(this.state.content)}
/>
)}

77
src/shared/components/sidebar.tsx
View file

@ -73,14 +73,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
sidebar() {
return (
<div>
<div class="card bg-transparent border-secondary mb-3">
<div class="card-header bg-transparent border-secondary">
<div class="card border-secondary mb-3">
<div class="card-body">
{this.communityTitle()}
{this.adminButtons()}
{this.subscribe()}
{this.createPost()}
</div>
<div class="card-body">{this.subscribes()}</div>
</div>
<div class="card bg-transparent border-secondary mb-3">
<div class="card border-secondary mb-3">
<div class="card-body">
{this.description()}
{this.badges()}
@ -99,19 +100,31 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{this.props.showIcon && (
<BannerIconHeader icon={community.icon} banner={community.banner} />
)}
<span>{community.title}</span>
<span class="mr-2">{community.title}</span>
{community.subscribed && (
<a
class="btn btn-secondary btn-sm mr-2"
href="#"
onClick={linkEvent(community.id, this.handleUnsubscribe)}
>
<svg class="text-success mr-1 icon icon-inline">
<use xlinkHref="#icon-check"></use>
</svg>
{i18n.t('joined')}
</a>
)}
{community.removed && (
<small className="ml-2 text-muted font-italic">
<small className="mr-2 text-muted font-italic">
{i18n.t('removed')}
</small>
)}
{community.deleted && (
<small className="ml-2 text-muted font-italic">
<small className="mr-2 text-muted font-italic">
{i18n.t('deleted')}
</small>
)}
{community.nsfw && (
<small className="ml-2 text-muted font-italic">
<small className="mr-2 text-muted font-italic">
{i18n.t('nsfw')}
</small>
)}
@ -131,38 +144,38 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
let community = this.props.community;
return (
<ul class="my-1 list-inline">
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
{i18n.t('number_online', { count: this.props.online })}
</li>
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_subscribers', {
count: community.number_of_subscribers,
})}
</li>
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_posts', {
count: community.number_of_posts,
})}
</li>
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
{i18n.t('number_of_comments', {
count: community.number_of_comments,
})}
</li>
<li className="list-inline-item">
<Link className="badge badge-light" to="/communities">
<Link className="badge badge-secondary" to="/communities">
{community.category_name}
</Link>
</li>
<li className="list-inline-item">
<Link
className="badge badge-light"
className="badge badge-secondary"
to={`/modlog/community/${this.props.community.id}`}
>
{i18n.t('modlog')}
</Link>
</li>
<li className="list-inline-item badge badge-light">
<li className="list-inline-item badge badge-secondary">
<CommunityLink community={community} realLink />
</li>
</ul>
@ -191,29 +204,29 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
);
}
subscribes() {
createPost() {
let community = this.props.community;
return (
<div class="d-flex flex-wrap">
community.subscribed && (
<Link
className={`btn btn-secondary flex-fill mr-2 mb-2 ${
className={`btn btn-secondary btn-block mb-2 ${
community.deleted || community.removed ? 'no-click' : ''
}`}
to={`/create_post?community=${community.name}`}
>
{i18n.t('create_a_post')}
</Link>
{community.subscribed ? (
)
);
}
subscribe() {
let community = this.props.community;
return (
<div class="mb-2">
{!community.subscribed && (
<a
class="btn btn-secondary flex-fill mb-2"
href="#"
onClick={linkEvent(community.id, this.handleUnsubscribe)}
>
{i18n.t('unsubscribe')}
</a>
) : (
<a
class="btn btn-secondary flex-fill mb-2"
class="btn btn-secondary btn-block"
href="#"
onClick={linkEvent(community.id, this.handleSubscribe)}
>
@ -380,7 +393,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
this.setState(this.state);
}
handleDeleteClick(i: Sidebar) {
handleDeleteClick(i: Sidebar, event: any) {
event.preventDefault();
let deleteForm: DeleteCommunityForm = {
edit_id: i.props.community.id,
@ -410,7 +423,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
i.setState(i.state);
}
handleUnsubscribe(communityId: number) {
handleUnsubscribe(communityId: number, event: any) {
event.preventDefault();
let form: FollowCommunityForm = {
community_id: communityId,
@ -419,7 +432,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
WebSocketService.Instance.followCommunity(form);
}
handleSubscribe(communityId: number) {
handleSubscribe(communityId: number, event: any) {
event.preventDefault();
let form: FollowCommunityForm = {
community_id: communityId,
@ -464,7 +477,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
i.setState(i.state);
}
handleModRemoveSubmit(i: Sidebar) {
handleModRemoveSubmit(i: Sidebar, event: any) {
event.preventDefault();
let removeForm: RemoveCommunityForm = {
edit_id: i.props.community.id,

12
src/shared/components/user.tsx
View file

@ -422,7 +422,7 @@ export class User extends Component<any, UserState> {
<div className="flex-grow-1 unselectable pointer mx-2"></div>
{this.isCurrentUser ? (
<button
class="d-flex align-self-start btn btn-secondary ml-2"
class="d-flex align-self-start btn btn-secondary mr-2"
onClick={linkEvent(this, this.handleLogoutClick)}
>
{i18n.t('logout')}
@ -430,7 +430,7 @@ export class User extends Component<any, UserState> {
) : (
<>
<a
className={`d-flex align-self-start btn btn-secondary ml-2 ${
className={`d-flex align-self-start btn btn-secondary mr-2 ${
!user.matrix_user_id && 'invisible'
}`}
target="_blank"
@ -440,7 +440,7 @@ export class User extends Component<any, UserState> {
{i18n.t('send_secure_message')}
</a>
<Link
class="d-flex align-self-start btn btn-secondary ml-2"
className={'d-flex align-self-start btn btn-secondary'}
to={`/create_private_message/recipient/${user.id}`}
>
{i18n.t('send_message')}
@ -489,7 +489,7 @@ export class User extends Component<any, UserState> {
userSettings() {
return (
<div>
<div class="card bg-transparent border-secondary mb-3">
<div class="card border-secondary mb-3">
<div class="card-body">
<h5>{i18n.t('settings')}</h5>
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
@ -834,7 +834,7 @@ export class User extends Component<any, UserState> {
return (
<div>
{this.state.userRes.moderates.length > 0 && (
<div class="card bg-transparent border-secondary mb-3">
<div class="card border-secondary mb-3">
<div class="card-body">
<h5>{i18n.t('moderates')}</h5>
<ul class="list-unstyled mb-0">
@ -857,7 +857,7 @@ export class User extends Component<any, UserState> {
return (
<div>
{this.state.userRes.follows.length > 0 && (
<div class="card bg-transparent border-secondary mb-3">
<div class="card border-secondary mb-3">
<div class="card-body">
<h5>{i18n.t('subscribed')}</h5>
<ul class="list-unstyled mb-0">