bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix some settings, move them back to Settings page

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-04-28 22:47:49 +02:00
parent 096c005a94
commit 7ae2b4282f
13 changed files with 101 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/actions/settings.ts
View file

@ -31,10 +31,10 @@ const defaultSettings = ImmutableMap({
underlineLinks: false,
autoPlayGif: true,
displayMedia: 'default',
unfollowModal: false,
unfollowModal: true,
boostModal: false,
deleteModal: true,
missingDescriptionModal: false,
missingDescriptionModal: true,
defaultPrivacy: 'public',
defaultContentType: 'text/plain',
themeMode: 'system',
@ -42,8 +42,8 @@ const defaultSettings = ImmutableMap({
showExplanationBox: true,
explanationBox: true,
autoloadTimelines: true,
autoloadMore: true,
preserveSpoilers: false,
autoloadMore: false,
preserveSpoilers: true,
systemFont: false,
demetricator: false,

6
src/components/sidebar-navigation-link.tsx
View file

@ -2,6 +2,8 @@ import clsx from 'clsx';
import React from 'react';
import { NavLink } from 'react-router-dom';
import { useSettings } from 'soapbox/hooks';
import { Icon, Text } from './ui';
interface ISidebarNavigationLink {
@ -26,6 +28,8 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
const { icon, activeIcon, text, to = '', count, countMax, onClick } = props;
const isActive = location.pathname === to;
const { demetricator } = useSettings();
const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
if (onClick) {
onClick(e);
@ -55,7 +59,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
>
<Icon
src={(isActive && activeIcon) || icon}
count={count}
count={demetricator ? undefined : count}
countMax={countMax}
className={clsx('h-5 w-5', {
'text-primary-700 dark:text-white': !isActive,

5
src/components/status-action-button.tsx
View file

@ -2,6 +2,7 @@ import clsx from 'clsx';
import React from 'react';
import { Text, Icon, Emoji } from 'soapbox/components/ui';
import { useSettings } from 'soapbox/hooks';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import type { EmojiReaction } from 'soapbox/schemas';
@ -19,9 +20,11 @@ interface IStatusActionCounter {
/** Action button numerical counter, eg "5" likes. */
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
const { demetricator } = useSettings();
return (
<Text size='xs' weight='semibold' theme='inherit'>
{shortNumberFormat(count)}
{demetricator && count > 1 ? '1+' : shortNumberFormat(count)}
</Text>
);
};

4
src/components/thumb-navigation-link.tsx
View file

@ -4,6 +4,7 @@ import { NavLink, useLocation } from 'react-router-dom';
import IconWithCounter from 'soapbox/components/icon-with-counter';
import { Icon, Text } from 'soapbox/components/ui';
import { useSettings } from 'soapbox/hooks';
interface IThumbNavigationLink {
count?: number;
@ -18,6 +19,7 @@ interface IThumbNavigationLink {
const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax, src, activeSrc, text, to, exact, paths }): JSX.Element => {
const { pathname } = useLocation();
const { demetricator } = useSettings();
const isActive = (): boolean => {
if (paths) {
@ -33,7 +35,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
return (
<NavLink to={to} exact={exact} className='thumb-navigation__link'>
{count !== undefined ? (
{!demetricator && count !== undefined ? (
<IconWithCounter
src={icon}
className={clsx({

2
src/components/ui/divider/divider.tsx
View file

@ -18,7 +18,7 @@ const Divider = ({ text, textSize = 'md' }: IDivider) => (
{text && (
<div className='relative flex justify-center'>
<span className='bg-white px-2 text-gray-700 dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
<span className='bg-white px-2 text-gray-700 black:bg-black dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
<Text size={textSize} tag='span' theme='inherit'>{text}</Text>
</span>
</div>

2
src/features/account/components/header.tsx
View file

@ -618,7 +618,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
<Avatar
src={account.avatar}
size={96}
className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white dark:bg-primary-900 dark:ring-primary-900'
className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
/>
</a>
{account.verified && (

5
src/features/chats/components/chat-widget/chat-pane-header.tsx
View file

@ -1,6 +1,7 @@
import React, { HTMLAttributes } from 'react';
import { HStack, IconButton, Text } from 'soapbox/components/ui';
import { useSettings } from 'soapbox/hooks';
interface IChatPaneHeader {
isOpen: boolean;
@ -24,6 +25,8 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
...rest
} = props;
const { demetricator } = useSettings();
const ButtonComp = isToggleable ? 'button' : 'div';
const buttonProps: HTMLAttributes<HTMLButtonElement | HTMLDivElement> = {};
if (isToggleable) {
@ -41,7 +44,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
{title}
</Text>
{(typeof unreadCount !== 'undefined' && unreadCount > 0) && (
{(!demetricator && typeof unreadCount !== 'undefined' && unreadCount > 0) && (
<HStack alignItems='center' space={2}>
<Text weight='semibold' data-testid='unread-count'>
({unreadCount})

27
src/features/developers/settings-store.tsx
View file

@ -109,33 +109,6 @@ const SettingsStore: React.FC = () => {
>
<SettingToggle settings={settings} settingPath={['demo']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.notifications.advanced' defaultMessage='Show all notification categories' />}>
<SettingToggle settings={settings} settingPath={['notifications', 'quickFilter', 'advanced']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.fields.unfollow_modal_label' defaultMessage='Show confirmation dialog before unfollowing someone' />}>
<SettingToggle settings={settings} settingPath={['unfollowModal']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.fields.reduce_motion_label' defaultMessage='Reduce motion in animations' />}>
<SettingToggle settings={settings} settingPath={['reduceMotion']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.fields.underline_links_label' defaultMessage='Always underline links in posts' />}>
<SettingToggle settings={settings} settingPath={['underlineLinks']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.fields.system_font_label' defaultMessage="Use system's default font" />}>
<SettingToggle settings={settings} settingPath={['systemFont']} onChange={onToggleChange} />
</ListItem>
<ListItem
label={<FormattedMessage id='preferences.fields.demetricator_label' defaultMessage='Use Demetricator' />}
hint={<FormattedMessage id='preferences.hints.demetricator' defaultMessage='Decrease social media anxiety by hiding all numbers from the site.' />}
>
<SettingToggle settings={settings} settingPath={['demetricator']} onChange={onToggleChange} />
</ListItem>
</List>
</Column>
);

27
src/features/preferences/index.tsx
View file

@ -180,6 +180,17 @@ const Preferences = () => {
<SettingToggle settings={settings} settingPath={['preserveSpoilers']} onChange={onToggleChange} />
</ListItem>
)}
<ListItem label={<FormattedMessage id='preferences.notifications.advanced' defaultMessage='Show all notification categories' />}>
<SettingToggle settings={settings} settingPath={['notifications', 'quickFilter', 'advanced']} onChange={onToggleChange} />
</ListItem>
<ListItem
label={<FormattedMessage id='preferences.fields.demetricator_label' defaultMessage='Use Demetricator' />}
hint={<FormattedMessage id='preferences.hints.demetricator' defaultMessage='Decrease social media anxiety by hiding all numbers from the site.' />}
>
<SettingToggle settings={settings} settingPath={['demetricator']} onChange={onToggleChange} />
</ListItem>
</List>
<List>
@ -194,6 +205,10 @@ const Preferences = () => {
<ListItem label={<FormattedMessage id='preferences.fields.missing_description_modal_label' defaultMessage='Show confirmation dialog before sending a post without media descriptions' />}>
<SettingToggle settings={settings} settingPath={['missingDescriptionModal']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.fields.unfollow_modal_label' defaultMessage='Show confirmation dialog before unfollowing someone' />}>
<SettingToggle settings={settings} settingPath={['unfollowModal']} onChange={onToggleChange} />
</ListItem>
</List>
<List>
@ -201,6 +216,18 @@ const Preferences = () => {
<SettingToggle settings={settings} settingPath={['autoPlayGif']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.fields.system_font_label' defaultMessage="Use system's default font" />}>
<SettingToggle settings={settings} settingPath={['systemFont']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.fields.reduce_motion_label' defaultMessage='Reduce motion in animations' />}>
<SettingToggle settings={settings} settingPath={['reduceMotion']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.fields.underline_links_label' defaultMessage='Always underline links in posts' />}>
<SettingToggle settings={settings} settingPath={['underlineLinks']} onChange={onToggleChange} />
</ListItem>
<ListItem label={<FormattedMessage id='preferences.fields.autoload_timelines_label' defaultMessage='Automatically load new posts when scrolled to the top of the page' />}>
<SettingToggle settings={settings} settingPath={['autoloadTimelines']} onChange={onToggleChange} />
</ListItem>

18
src/features/ui/components/profile-stats.tsx
View file

@ -3,6 +3,7 @@ import { useIntl, defineMessages } from 'react-intl';
import { NavLink } from 'react-router-dom';
import { HStack, Text } from 'soapbox/components/ui';
import { useSettings } from 'soapbox/hooks';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import type { Account } from 'soapbox/schemas';
@ -20,6 +21,7 @@ interface IProfileStats {
/** Display follower and following counts for an account. */
const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
const intl = useIntl();
const { demetricator } = useSettings();
if (!account) {
return null;
@ -29,9 +31,11 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
<HStack alignItems='center' space={3}>
<NavLink to={`/@${account.acct}/followers`} onClick={onClickHandler} title={intl.formatNumber(account.followers_count)} className='hover:underline'>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.followers_count)}
</Text>
{!demetricator && (
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.followers_count)}
</Text>
)}
<Text weight='bold' size='sm'>
{intl.formatMessage(messages.followers)}
</Text>
@ -40,9 +44,11 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
<NavLink to={`/@${account.acct}/following`} onClick={onClickHandler} title={intl.formatNumber(account.following_count)} className='hover:underline'>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.following_count)}
</Text>
{!demetricator && (
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.following_count)}
</Text>
)}
<Text weight='bold' size='sm'>
{intl.formatMessage(messages.follows)}
</Text>

57
src/features/ui/components/user-panel.tsx
View file

@ -6,7 +6,7 @@ import { useAccount } from 'soapbox/api/hooks';
import StillImage from 'soapbox/components/still-image';
import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification-badge';
import { useAppSelector } from 'soapbox/hooks';
import { useAppSelector, useSettings } from 'soapbox/hooks';
import { getAcct } from 'soapbox/utils/accounts';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import { displayFqn } from 'soapbox/utils/state';
@ -20,6 +20,7 @@ interface IUserPanel {
const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain }) => {
const intl = useIntl();
const { demetricator } = useSettings();
const { account } = useAccount(accountId);
const fqn = useAppSelector((state) => displayFqn(state));
@ -76,33 +77,35 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
</HStack>
</Stack>
<HStack alignItems='center' space={3}>
{account.followers_count >= 0 && (
<Link to={`/@${account.acct}/followers`} title={intl.formatNumber(account.followers_count)}>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.followers_count)}
</Text>
<Text weight='bold' size='sm'>
<FormattedMessage id='account.followers' defaultMessage='Followers' />
</Text>
</HStack>
</Link>
)}
{!demetricator && (
<HStack alignItems='center' space={3}>
{account.followers_count >= 0 && (
<Link to={`/@${account.acct}/followers`} title={intl.formatNumber(account.followers_count)}>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.followers_count)}
</Text>
<Text weight='bold' size='sm'>
<FormattedMessage id='account.followers' defaultMessage='Followers' />
</Text>
</HStack>
</Link>
)}
{account.following_count >= 0 && (
<Link to={`/@${account.acct}/following`} title={intl.formatNumber(account.following_count)}>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.following_count)}
</Text>
<Text weight='bold' size='sm'>
<FormattedMessage id='account.follows' defaultMessage='Following' />
</Text>
</HStack>
</Link>
)}
</HStack>
{account.following_count >= 0 && (
<Link to={`/@${account.acct}/following`} title={intl.formatNumber(account.following_count)}>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.following_count)}
</Text>
<Text weight='bold' size='sm'>
<FormattedMessage id='account.follows' defaultMessage='Following' />
</Text>
</HStack>
</Link>
)}
</HStack>
)}
</Stack>
</div>
);

3
src/init/soapbox-head.tsx
View file

@ -20,7 +20,7 @@ interface ISoapboxHead {
/** Injects metadata into site head with Helmet. */
const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
const { locale, direction } = useLocale();
const { demo, reduceMotion, underlineLinks, demetricator } = useSettings();
const { demo, reduceMotion, underlineLinks, demetricator, systemFont } = useSettings();
const soapboxConfig = useSoapboxConfig();
const theme = useTheme();
@ -31,6 +31,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
'no-reduce-motion': !reduceMotion,
'underline-links': underlineLinks,
'demetricator': demetricator,
'system-font': systemFont,
});
useEffect(() => {

8
src/styles/basics.scss
View file

@ -31,3 +31,11 @@ noscript {
div[data-viewport-type='window'] {
position: static !important;
}
body.system-font, body.system-font .font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}
body.system-font .font-mono {
font-family: ui-monospace, mono;
}