puppyflat
/
lsdmaodsfjfaj
forked from hexbear-collective/hexbear-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Continue building updated mobile post listing

feature/settings-cleanup
GreatBearShark 2 years ago
parent
f7254a1c7c
commit
cd2965814e
2 changed files with 87 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 157
      src/components/post-listing.tsx
  2. 1
      src/theme.tsx

157
src/components/post-listing.tsx
View File

@ -65,6 +65,7 @@ interface PostListingState {
upvotes: number;
downvotes: number;
localPostSaved: boolean;
innerWidth: number;
}
interface PostListingProps {
@ -147,7 +148,7 @@ const VoteButtons = ({
</>
);
const PostActionButton = props => <Button p={2}variant="muted" bg="transparent" {...props} />
const PostActionButton = props => <Button p={2} variant="muted" bg="transparent" {...props} />
const MobilePostListing = ({
post,
@ -161,13 +162,15 @@ const MobilePostListing = ({
handleSavePostClick,
thumbnail,
handleReportPost,
showBody,
handleShowAdvanced
}) => {
console.log({ post })
const [actionsVisible, setActionsVisible] = useState(false);
return (
<Flex css={{ flexDirection: 'column' }}>
<Link to={`/post/${post.id}`}>
<Heading as="h5" mb={2} color="highlight" css={{ fontWeight: 500, fontSize: '24px' }}>
<Heading as="h5" my={2} color="#dedede" css={{ fontWeight: 400, fontSize: '18px' }}>
{post.name}
</Heading>
</Link>
@ -180,11 +183,10 @@ const MobilePostListing = ({
{post.body && (
<Text
css={{
// border: '1px solid rgb(68, 68, 68)',
// padding: '8px',
borderRadius: '4px',
fontSize: '14px'
}}
mb={2}
my={2}
>
{post.body}
</Text>
@ -229,7 +231,7 @@ const MobilePostListing = ({
• <MomentTime data={post} />
</span>
</Box>
<Flex css={{ alignItems: 'center' }} mt={3}>
<Flex css={{ alignItems: 'center' }} mt={1}>
<PostActionButton
onClick={handlePostLike}
color={my_vote === 1 ? '#fffc00' : 'inherit'}
@ -265,11 +267,11 @@ const MobilePostListing = ({
{post.number_of_comments}
</PostActionButton>
</Box>
<PostActionButton onClick={() => setActionsVisible(prev => !prev)} mx={2} css={{ marginLeft: 'auto' }}>
<Icon name="more" />
</PostActionButton>
<PostActionButton onClick={() => showBody ? handleShowAdvanced() : setActionsVisible(prev => !prev)} mx={2} css={{ marginLeft: 'auto' }}>
<Icon name="more" />
</PostActionButton>
</Flex>
{actionsVisible && (
{actionsVisible && !showBody && (
<Flex my={2}>
<PostActionButton onClick={handleReportPost}>
<Icon name="report" />
@ -305,6 +307,7 @@ class BasePostListing extends Component<
downvotes: this.props.post.downvotes,
// @TODO: Debug why this isn't being passed down on update
localPostSaved: this.props.post.saved,
innerWidth: window.innerWidth,
};
state = this.emptyState;
@ -312,6 +315,15 @@ class BasePostListing extends Component<
componentDidMount() {
// scroll to top of page when loading post listing
window.scrollTo(0, 0);
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
handleResize = () => {
this.setState({ innerWidth: window.innerWidth })
}
// @TODO: Check if this problem still persists
@ -516,7 +528,7 @@ class BasePostListing extends Component<
listingActions = () => {
let post = this.props.post;
const isMobile = window.innerWidth < 768;
const isMobile = this.state.innerWidth < 768;
return (
<div className="details col-12">
@ -775,13 +787,14 @@ class BasePostListing extends Component<
listing = () => {
let post = this.props.post;
const isMobile = window.innerWidth < 768;
const isMobile = this.state.innerWidth < 768;
// if (isMobile) {
// return (
// <>
// <MobilePostListing
// my_vote={this.state.my_vote}
// my_vote={this.state.my_vote}
// handleShowAdvanced={this.handleShowAdvanced}
// post={post}
// enableDownvotes={this.props.enableDownvotes}
// score={this.state.score}
@ -791,11 +804,13 @@ class BasePostListing extends Component<
// thumbnail={this.thumbnail}
// localPostSaved={this.state.localPostSaved}
// handleSavePostClick={this.handleSavePostClick}
// handleReportPost={this.handleReportPost}
// handleReportPost={this.handleReportPost}
// showBody={this.props.showBody}
// />
// <Box p={2}>
// {this.listingForms()}
// </Box>
// <Flex>
// {this.advancedActions()}
// </Flex>
// {this.listingForms()}
// </>
// );
// }
@ -1026,12 +1041,27 @@ class BasePostListing extends Component<
</li>
</>
)}
{this.advancedActions()}
</>
)}
</ul>
{post.body && this.state.imageExpanded && !this.props.showBody && (
<PostBody body={post.body} />
)}
</div>
);
};
{!this.state.showAdvanced && this.props.showBody ? (
<li className="list-inline-item">
advancedActions = () => {
const { post } = this.props;
return (
<>
{!this.state.showAdvanced && this.props.showBody ? (
<li className="list-inline-item only-desktop">
<button
className="btn btn-sm btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleShowAdvanced)}
onClick={this.handleShowAdvanced}
data-tippy-content={i18n.t('more')}
>
<Icon name="more" />
@ -1041,8 +1071,8 @@ class BasePostListing extends Component<
<>
{this.props.showBody && post.body && (
<li className="list-inline-item">
<button
className="btn btn-sm btn-link btn-animate text-muted"
<PostActionButton
// className="btn btn-sm btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={i18n.t('view_source')}
>
@ -1053,14 +1083,14 @@ class BasePostListing extends Component<
>
<use xlinkHref="#icon-file-text" />
</svg>
</button>
</PostActionButton>
</li>
)}
{this.canModOnSelf && (
<>
<li className="list-inline-item">
<button
className="btn btn-sm btn-link btn-animate text-muted"
<PostActionButton
// className="btn btn-sm btn-link btn-animate text-muted"
onClick={this.handleModLock}
data-tippy-content={
post.locked ? i18n.t('unlock') : i18n.t('lock')
@ -1073,11 +1103,11 @@ class BasePostListing extends Component<
>
<use xlinkHref="#icon-lock" />
</svg>
</button>
</PostActionButton>
</li>
<li className="list-inline-item">
<button
className="btn btn-sm btn-link btn-animate text-muted"
<PostActionButton
// className="btn btn-sm btn-link btn-animate text-muted"
onClick={this.handleModSticky}
data-tippy-content={
post.stickied
@ -1092,7 +1122,7 @@ class BasePostListing extends Component<
>
<use xlinkHref="#icon-pin" />
</svg>
</button>
</PostActionButton>
</li>
</>
)}
@ -1100,19 +1130,19 @@ class BasePostListing extends Component<
{(this.canMod || this.canAdmin) && (
<li className="list-inline-item">
{!post.removed ? (
<span
<PostActionButton
className="pointer"
onClick={this.handleModRemoveShow}
>
{i18n.t('remove')}
</span>
</PostActionButton>
) : (
<span
<PostActionButton
className="pointer"
onClick={this.handleModRemoveSubmit}
>
{i18n.t('restore')}
</span>
</PostActionButton>
)}
</li>
)}
@ -1121,29 +1151,26 @@ class BasePostListing extends Component<
{!this.isMod && (
<li className="list-inline-item">
{!post.banned_from_community ? (
<span
className="pointer"
<PostActionButton
onClick={this.handleModBanFromCommunityShow}
>
{i18n.t('ban')}
</span>
</PostActionButton>
) : (
<span
className="pointer"
<PostActionButton
onClick={linkEvent(
this,
this.handleModBanFromCommunitySubmit
)}
>
{i18n.t('unban')}
</span>
</PostActionButton>
)}
</li>
)}
{!post.banned_from_community && (
<li className="list-inline-item">
<span
className="pointer"
<PostActionButton
onClick={linkEvent(
this,
this.handleAddModToCommunity
@ -1152,7 +1179,7 @@ class BasePostListing extends Component<
{this.isMod
? i18n.t('remove_as_mod')
: i18n.t('appoint_as_mod')}
</span>
</PostActionButton>
</li>
)}
</>
@ -1161,15 +1188,14 @@ class BasePostListing extends Component<
{(this.amCommunityCreator || this.canAdmin) && this.isMod && (
<li className="list-inline-item">
{!this.state.showConfirmTransferCommunity ? (
<span
className="pointer"
<PostActionButton
onClick={linkEvent(
this,
this.handleShowConfirmTransferCommunity
)}
>
{i18n.t('transfer_community')}
</span>
</PostActionButton>
) : (
<>
<span className="d-inline-block mr-1">
@ -1203,44 +1229,40 @@ class BasePostListing extends Component<
{!this.isAdmin && (
<li className="list-inline-item">
{!post.banned ? (
<span
className="pointer"
<PostActionButton
onClick={this.handleModBanShow}
>
{i18n.t('ban_from_site')}
</span>
</PostActionButton>
) : (
<span
className="pointer"
<PostActionButton
onClick={this.handleModBanSubmit}
>
{i18n.t('unban_from_site')}
</span>
</PostActionButton>
)}
</li>
)}
{!post.banned && (
<li className="list-inline-item">
<span
className="pointer"
<PostActionButton
onClick={linkEvent(this, this.handleAddAdmin)}
>
{this.isAdmin
? i18n.t('remove_as_admin')
: i18n.t('appoint_as_admin')}
</span>
</PostActionButton>
</li>
)}
{!post.banned && (
<li className="list-inline-item">
<span
className="pointer"
<PostActionButton
onClick={linkEvent(this, this.handleAddSitemod)}
>
{this.isSitemod
? i18n.t('remove_as_sitemod')
: i18n.t('appoint_as_sitemod')}
</span>
</PostActionButton>
</li>
)}
</>
@ -1249,15 +1271,14 @@ class BasePostListing extends Component<
{this.amSiteCreator && this.isAdmin && (
<li className="list-inline-item">
{!this.state.showConfirmTransferSite ? (
<span
className="pointer"
<PostActionButton
onClick={linkEvent(
this,
this.handleShowConfirmTransferSite
)}
>
{i18n.t('transfer_site')}
</span>
</PostActionButton>
) : (
<>
<span className="d-inline-block mr-1">
@ -1284,15 +1305,9 @@ class BasePostListing extends Component<
)}
</>
)}
</>
)}
</ul>
{post.body && this.state.imageExpanded && !this.props.showBody && (
<PostBody body={post.body} />
)}
</div>
);
};
</>
)
}
private get myPost(): boolean {
return (
@ -1731,8 +1746,8 @@ class BasePostListing extends Component<
});
}
handleShowAdvanced(i: BasePostListing) {
i.setState(
handleShowAdvanced = () => {
this.setState(
prevState => ({
showAdvanced: !prevState.showAdvanced,
}),

1
src/theme.tsx
View File

@ -77,6 +77,7 @@ const defaultTheme: ThemeProviderProps<Theme> = {
// primary: '#DA1B9A',
primary: '#A4288B',
secondary: '#2030DF',
text: '#DEDEDE',
accent: '#F3B90C',
danger: '#dc3545',
muted: '#303030',

Write Preview
Loading…
Cancel
Save