miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

Merge branch 'group-dark-mode' into 'develop' 

Improve Dark mode support for Groups + Tests

See merge request soapbox-pub/soapbox!2390
develop^2
Chewbacca 2023-03-31 11:44:28 +00:00
rodzic a976b542e1 a994d1c33e
commit ccd97e1405
11 zmienionych plików z 230 dodań i 52 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
app/soapbox/components/groups/group-avatar.tsx
Wyświetl plik

@ -23,8 +23,9 @@ const GroupAvatar = (props: IGroupAvatar) => {
className={
clsx('relative rounded-full', {
'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing,
'dark:shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.gray.800)]': isOwner && withRing,
'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing,
'shadow-[0_0_0_2px_theme(colors.white)]': !isOwner && withRing,
'shadow-[0_0_0_2px_theme(colors.white)] dark:shadow-[0_0_0_2px_theme(colors.gray.800)]': !isOwner && withRing,
})
}
src={group.avatar}

2
app/soapbox/components/ui/button/useButtonStyles.ts
Wyświetl plik

@ -9,7 +9,7 @@ const themes = {
'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500',
transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
transparent: 'border-transparent bg-transparent text-primary-600 dark:text-accent-blue dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50',
outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
};

52
app/soapbox/components/ui/popover/popover.tsx
Wyświetl plik

@ -13,6 +13,8 @@ import {
import clsx from 'clsx';
import React, { useRef, useState } from 'react';
import Portal from '../portal/portal';
interface IPopover {
children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
/** The content of the popover */
@ -83,31 +85,33 @@ const Popover: React.FC<IPopover> = (props) => {
})}
{(isMounted) && (
<div
ref={refs.setFloating}
style={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
...styles,
}}
className={
clsx({
'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
'p-6': !isFlush,
})
}
{...getFloatingProps()}
>
{content}
<Portal>
<div
ref={refs.setFloating}
style={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
...styles,
}}
className={
clsx({
'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
'p-6': !isFlush,
})
}
{...getFloatingProps()}
>
{content}
<FloatingArrow
ref={arrowRef}
context={context}
className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
tipRadius={3}
/>
</div>
<FloatingArrow
ref={arrowRef}
context={context}
className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
tipRadius={3}
/>
</div>
</Portal>
)}
</>
);

85
app/soapbox/features/group/components/__tests__/group-options-button.test.tsx 100644
Wyświetl plik

@ -0,0 +1,85 @@
import React from 'react';
import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
import { render, screen } from 'soapbox/jest/test-helpers';
import { GroupRoles } from 'soapbox/schemas/group-member';
import { Group } from 'soapbox/types/entities';
import GroupOptionsButton from '../group-options-button';
let group: Group;
describe('<GroupOptionsButton />', () => {
describe('when the user blocked', () => {
beforeEach(() => {
group = buildGroup({
relationship: buildGroupRelationship({
requested: false,
member: true,
blocked_by: true,
role: 'user',
}),
});
});
it('should render null', () => {
render(<GroupOptionsButton group={group} />);
expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
});
});
describe('when the user is an admin', () => {
beforeEach(() => {
group = buildGroup({
relationship: buildGroupRelationship({
requested: false,
member: true,
role: GroupRoles.ADMIN,
}),
});
});
it('should render null', () => {
render(<GroupOptionsButton group={group} />);
expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
});
});
describe('when the user is an owner', () => {
beforeEach(() => {
group = buildGroup({
relationship: buildGroupRelationship({
requested: false,
member: true,
role: GroupRoles.OWNER,
}),
});
});
it('should render null', () => {
render(<GroupOptionsButton group={group} />);
expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
});
});
describe('when the user is a member', () => {
beforeEach(() => {
group = buildGroup({
relationship: buildGroupRelationship({
requested: false,
member: true,
role: GroupRoles.USER,
}),
});
});
it('should render the dropdown menu', () => {
render(<GroupOptionsButton group={group} />);
expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(1);
});
});
});

66
app/soapbox/features/group/components/__tests__/group-relationship.test.tsx 100644
Wyświetl plik

@ -0,0 +1,66 @@
import React from 'react';
import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
import { render, screen } from 'soapbox/jest/test-helpers';
import { GroupRoles } from 'soapbox/schemas/group-member';
import { Group } from 'soapbox/types/entities';
import GroupRelationship from '../group-relationship';
let group: Group;
describe('<GroupRelationship />', () => {
describe('when the user is an admin', () => {
beforeEach(() => {
group = buildGroup({
relationship: buildGroupRelationship({
requested: false,
member: true,
role: GroupRoles.ADMIN,
}),
});
});
it('should render the relationship', () => {
render(<GroupRelationship group={group} />);
expect(screen.getByTestId('group-relationship')).toHaveTextContent('Admin');
});
});
describe('when the user is an owner', () => {
beforeEach(() => {
group = buildGroup({
relationship: buildGroupRelationship({
requested: false,
member: true,
role: GroupRoles.OWNER,
}),
});
});
it('should render the relationship', () => {
render(<GroupRelationship group={group} />);
expect(screen.getByTestId('group-relationship')).toHaveTextContent('Owner');
});
});
describe('when the user is a member', () => {
beforeEach(() => {
group = buildGroup({
relationship: buildGroupRelationship({
requested: false,
member: true,
role: GroupRoles.USER,
}),
});
});
it('should render null', () => {
render(<GroupRelationship group={group} />);
expect(screen.queryAllByTestId('group-relationship')).toHaveLength(0);
});
});
});

11
app/soapbox/features/group/components/group-options-button.tsx
Wyświetl plik

@ -1,4 +1,5 @@
import React, { useMemo } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { initReport, ReportableEntities } from 'soapbox/actions/reports';
import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
@ -8,20 +9,25 @@ import { GroupRoles } from 'soapbox/schemas/group-member';
import type { Account, Group } from 'soapbox/types/entities';
const messages = defineMessages({
report: { id: 'group.report.label', defaultMessage: 'Report' },
});
interface IGroupActionButton {
group: Group
}
const GroupOptionsButton = ({ group }: IGroupActionButton) => {
const dispatch = useAppDispatch();
const account = useOwnAccount();
const dispatch = useAppDispatch();
const intl = useIntl();
const isMember = group.relationship?.role === GroupRoles.USER;
const isBlocked = group.relationship?.blocked_by;
const menu: Menu = useMemo(() => ([
{
text: 'Report',
text: intl.formatMessage(messages.report),
icon: require('@tabler/icons/flag.svg'),
action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
},
@ -38,6 +44,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
theme='secondary'
iconClassName='h-5 w-5'
className='self-stretch px-2.5'
data-testid='dropdown-menu-button'
/>
</DropdownMenu>
);

13
app/soapbox/features/group/components/group-relationship.tsx
Wyświetl plik

@ -13,12 +13,17 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
const isOwner = group.relationship?.role === GroupRoles.OWNER;
const isAdmin = group.relationship?.role === GroupRoles.ADMIN;
if (!isOwner || !isAdmin) {
if (!isOwner && !isAdmin) {
return null;
}
return (
<HStack space={1} alignItems='center'>
<HStack
space={1}
alignItems='center'
data-testid='group-relationship'
className='text-primary-600 dark:text-accent-blue'
>
<Icon
className='h-4 w-4'
src={
@ -30,8 +35,8 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
<Text tag='span' weight='medium' size='sm' theme='inherit'>
{isOwner
? <FormattedMessage id='group.role.admin' defaultMessage='Admin' />
: <FormattedMessage id='group.role.moderator' defaultMessage='Moderator' />}
? <FormattedMessage id='group.role.owner' defaultMessage='Owner' />
: <FormattedMessage id='group.role.admin' defaultMessage='Admin' />}
</Text>
</HStack>
);

1
app/soapbox/features/groups/pending-requests.tsx
Wyświetl plik

@ -18,7 +18,6 @@ export default () => {
const { groups, isLoading } = usePendingGroups();
const renderBlankslate = () => (
<Stack
space={4}

2
app/soapbox/features/placeholder/components/placeholder-group-discover.tsx
Wyświetl plik

@ -13,7 +13,7 @@ const PlaceholderGroupDiscover = () => {
{/* Group Cover Image */}
<div className='absolute inset-0 rounded-t-lg bg-gray-300 object-cover dark:bg-gray-800' />
<Stack justifyContent='end' className='z-10 p-4 text-white' space={3}>
<Stack justifyContent='end' className='z-10 p-4 text-gray-900 dark:text-gray-100' space={3}>
{/* Group Avatar */}
<div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />

44
app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
Wyświetl plik

@ -3,8 +3,10 @@ import { FormattedMessage } from 'react-intl';
import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
import type { Group } from 'soapbox/schemas';
interface IConfirmationStep {
group: any
group: Group
}
const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
@ -53,24 +55,30 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
<Stack space={5}>
<InfoListItem number={1}>
<FormattedMessage
id='manage_group.confirmation.info_1'
defaultMessage='As the owner of this group, you can assign staff, delete posts and much more.'
/>
<Text theme='muted'>
<FormattedMessage
id='manage_group.confirmation.info_1'
defaultMessage='As the owner of this group, you can assign staff, delete posts and much more.'
/>
</Text>
</InfoListItem>
<InfoListItem number={2}>
<FormattedMessage
id='manage_group.confirmation.info_2'
defaultMessage="Post the group's first post and get the conversation started."
/>
<Text theme='muted'>
<FormattedMessage
id='manage_group.confirmation.info_2'
defaultMessage="Post the group's first post and get the conversation started."
/>
</Text>
</InfoListItem>
<InfoListItem number={3}>
<FormattedMessage
id='manage_group.confirmation.info_3'
defaultMessage='Share your new group with friends, family and followers to grow its membership.'
/>
<Text theme='muted'>
<FormattedMessage
id='manage_group.confirmation.info_3'
defaultMessage='Share your new group with friends, family and followers to grow its membership.'
/>
</Text>
</InfoListItem>
</Stack>
</Stack>
@ -96,7 +104,7 @@ interface IInfoListNumber {
const InfoListNumber: React.FC<IInfoListNumber> = ({ number }) => {
return (
<div className='flex h-7 w-7 items-center justify-center rounded-full border border-gray-200'>
<div className='flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-gray-200 dark:border-gray-800'>
<Text theme='primary' size='sm' weight='bold'>{number}</Text>
</div>
);
@ -109,9 +117,11 @@ interface IInfoListItem {
const InfoListItem: React.FC<IInfoListItem> = ({ number, children }) => {
return (
<HStack space={3}>
<div><InfoListNumber number={number} /></div>
<div>{children}</div>
<HStack alignItems='top' space={3}>
<InfoListNumber number={number} />
<div className='mt-0.5'>
{children}
</div>
</HStack>
);
};

3
app/soapbox/locales/en.json
Wyświetl plik

@ -799,8 +799,9 @@
"group.promote.admin.confirmation.message": "Are you sure you want to assign the admin role to @{name}?",
"group.promote.admin.confirmation.title": "Assign Admin Role",
"group.promote.admin.success": "@{name} is now an admin",
"group.report.label": "Report",
"group.role.admin": "Admin",
"group.role.moderator": "Moderator",
"group.role.owner": "Owner",
"group.tabs.all": "All",
"group.tabs.members": "Members",
"group.upload_banner": "Upload photo",