moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

StatusActionBar: fix styles in Thread

This commit is contained in:
Alex Gleason 2022-08-09 18:46:16 -05:00
parent ca4821abf7
commit 168cee0636
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/soapbox/components/status-action-bar.tsx
View File

@ -1,3 +1,4 @@
import classNames from 'classnames';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';
import React from 'react'; import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@ -82,7 +83,8 @@ interface IStatusActionBar {
status: Status, status: Status,
withDismiss?: boolean, withDismiss?: boolean,
withLabels?: boolean, withLabels?: boolean,
expandable?: boolean expandable?: boolean,
space?: 'expand' | 'compact',
} }
const StatusActionBar: React.FC<IStatusActionBar> = ({ const StatusActionBar: React.FC<IStatusActionBar> = ({
@ -90,6 +92,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
withDismiss = false, withDismiss = false,
withLabels = false, withLabels = false,
expandable = true, expandable = true,
space = 'compact',
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const history = useHistory(); const history = useHistory();
@ -584,7 +587,12 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
const canShare = ('share' in navigator) && status.visibility === 'public'; const canShare = ('share' in navigator) && status.visibility === 'public';
return ( return (
<div className='pt-4 flex flex-row space-x-2'> <div
className={classNames('flex flex-row', {
'justify-between': space === 'expand',
'space-x-2': space === 'compact',
})}
>
<StatusActionButton <StatusActionButton
title={replyTitle} title={replyTitle}
icon={require('@tabler/icons/message-circle-2.svg')} icon={require('@tabler/icons/message-circle-2.svg')}

4
app/soapbox/components/status-action-button.tsx
View File

@ -79,7 +79,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
ref={ref} ref={ref}
type='button' type='button'
className={classNames( className={classNames(
'flex items-center p-1 space-x-0.5 rounded-full', 'flex items-center p-1 rounded-full',
'text-gray-600 hover:text-gray-600 dark:hover:text-white', 'text-gray-600 hover:text-gray-600 dark:hover:text-white',
'bg-white dark:bg-transparent', 'bg-white dark:bg-transparent',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0', 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
@ -87,6 +87,8 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
'text-black dark:text-white': active && emoji, 'text-black dark:text-white': active && emoji,
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent, 'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success, 'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
'space-x-0.5': !text,
'space-x-2': text,
}, },
className, className,
)} )}

4
app/soapbox/components/status.tsx
View File

@ -373,7 +373,9 @@ const Status: React.FC<IStatus> = (props) => {
{quote} {quote}
{!hideActionBar && ( {!hideActionBar && (
<StatusActionBar status={actualStatus} /> <div className='pt-4'>
<StatusActionBar status={actualStatus} />
</div>
)} )}
</div> </div>
</div> </div>

7
app/soapbox/features/status/index.tsx
View File

@ -484,7 +484,12 @@ const Thread: React.FC<IThread> = (props) => {
<hr className='mb-2 border-t-2 dark:border-primary-800' /> <hr className='mb-2 border-t-2 dark:border-primary-800' />
<StatusActionBar status={status} withLabels expandable={false} /> <StatusActionBar
status={status}
expandable={false}
space='expand'
withLabels
/>
</div> </div>
</HotKeys> </HotKeys>