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

Change icon, rename theme, set divideType based on theme 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-03-24 22:41:44 +01:00
parent 5e1499ed82
commit 1c5e8bc7d4
14 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/scrollable-list.tsx
View File

@ -226,7 +226,6 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
ref={ref}
id={id}
useWindowScroll={useWindowScroll}
className={className}
data={data}
startReached={onScrollToTop}
endReached={handleEndReached}

5
src/components/status-list.tsx
View File

@ -56,6 +56,7 @@ const StatusList: React.FC<IStatusList> = ({
isPartial,
showAds = false,
showGroup = true,
className,
...other
}) => {
const soapboxConfig = useSoapboxConfig();
@ -232,8 +233,8 @@ const StatusList: React.FC<IStatusList> = ({
placeholderCount={20}
ref={node}
className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
'divide-none black:divide-solid': divideType !== 'border',
})}
'divide-none': divideType !== 'border',
}, className)}
itemClassName={clsx({
'pb-3': divideType !== 'border',
})}

6
src/features/bookmarks/index.tsx
View File

@ -6,7 +6,7 @@ import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actio
import PullToRefresh from 'soapbox/components/pull-to-refresh';
import StatusList from 'soapbox/components/status-list';
import { Column } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
import { useAppSelector, useAppDispatch, useTheme } from 'soapbox/hooks';
const messages = defineMessages({
heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
@ -19,6 +19,7 @@ const handleLoadMore = debounce((dispatch) => {
const Bookmarks: React.FC = () => {
const dispatch = useAppDispatch();
const intl = useIntl();
const theme = useTheme();
const statusIds = useAppSelector((state) => state.status_lists.get('bookmarks')!.items);
const isLoading = useAppSelector((state) => state.status_lists.get('bookmarks')!.isLoading);
@ -38,13 +39,14 @@ const Bookmarks: React.FC = () => {
<Column label={intl.formatMessage(messages.heading)} transparent>
<PullToRefresh onRefresh={handleRefresh}>
<StatusList
className='black:p-4 black:sm:p-5'
statusIds={statusIds}
scrollKey='bookmarked_statuses'
hasMore={hasMore}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => handleLoadMore(dispatch)}
emptyMessage={emptyMessage}
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
/>
</PullToRefresh>
</Column>

6
src/features/community-timeline/index.tsx
View File

@ -5,7 +5,7 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines';
import { useCommunityStream } from 'soapbox/api/hooks';
import PullToRefresh from 'soapbox/components/pull-to-refresh';
import { Column } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
import Timeline from '../ui/components/timeline';
@ -16,6 +16,7 @@ const messages = defineMessages({
const CommunityTimeline = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const theme = useTheme();
const settings = useSettings();
const onlyMedia = settings.community.other.onlyMedia;
@ -41,12 +42,13 @@ const CommunityTimeline = () => {
<Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
<PullToRefresh onRefresh={handleRefresh}>
<Timeline
className='black:p-4 black:sm:p-5'
scrollKey={`${timelineId}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
prefix='home'
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
/>
</PullToRefresh>
</Column>

6
src/features/hashtag-timeline/index.tsx
View File

@ -7,7 +7,7 @@ import { useHashtagStream } from 'soapbox/api/hooks';
import List, { ListItem } from 'soapbox/components/list';
import { Column, Toggle } from 'soapbox/components/ui';
import Timeline from 'soapbox/features/ui/components/timeline';
import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn } from 'soapbox/hooks';
import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'soapbox/hooks';
interface IHashtagTimeline {
params?: {
@ -23,6 +23,7 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
const tag = useAppSelector((state) => state.tags.get(id));
const next = useAppSelector(state => state.timelines.get(`hashtag:${id}`)?.next);
const { isLoggedIn } = useLoggedIn();
const theme = useTheme();
const handleLoadMore = (maxId: string) => {
dispatch(expandHashtagTimeline(id, { url: next, maxId }));
@ -63,11 +64,12 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
</List>
)}
<Timeline
className='black:p-4 black:sm:p-5'
scrollKey='hashtag_timeline'
timelineId={`hashtag:${id}`}
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
/>
</Column>
);

6
src/features/home-timeline/index.tsx
View File

@ -6,7 +6,7 @@ import { expandHomeTimeline } from 'soapbox/actions/timelines';
import PullToRefresh from 'soapbox/components/pull-to-refresh';
import { Column, Stack, Text } from 'soapbox/components/ui';
import Timeline from 'soapbox/features/ui/components/timeline';
import { useAppSelector, useAppDispatch, useFeatures, useInstance } from 'soapbox/hooks';
import { useAppSelector, useAppDispatch, useFeatures, useInstance, useTheme } from 'soapbox/hooks';
const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' },
@ -17,6 +17,7 @@ const HomeTimeline: React.FC = () => {
const dispatch = useAppDispatch();
const features = useFeatures();
const instance = useInstance();
const theme = useTheme();
const polling = useRef<NodeJS.Timeout | null>(null);
@ -62,10 +63,11 @@ const HomeTimeline: React.FC = () => {
<Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
<PullToRefresh onRefresh={handleRefresh}>
<Timeline
className='black:p-4 black:sm:p-5'
scrollKey='home_timeline'
onLoadMore={handleLoadMore}
timelineId='home'
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
showAds
emptyMessage={
<Stack space={1}>

6
src/features/landing-timeline/index.tsx
View File

@ -5,7 +5,7 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines';
import { useCommunityStream } from 'soapbox/api/hooks';
import PullToRefresh from 'soapbox/components/pull-to-refresh';
import { Column } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch, useInstance } from 'soapbox/hooks';
import { useAppSelector, useAppDispatch, useInstance, useTheme } from 'soapbox/hooks';
import AboutPage from '../about';
import Timeline from '../ui/components/timeline';
@ -15,6 +15,7 @@ import { SiteBanner } from './components/site-banner';
const LandingTimeline = () => {
const dispatch = useAppDispatch();
const instance = useInstance();
const theme = useTheme();
const timelineEnabled = !instance.pleroma.metadata.restrict_unauthenticated.timelines.local;
const next = useAppSelector(state => state.timelines.get('community')?.next);
@ -50,12 +51,13 @@ const LandingTimeline = () => {
{timelineEnabled ? (
<PullToRefresh onRefresh={handleRefresh}>
<Timeline
className='black:p-4 black:sm:p-5'
scrollKey={`${timelineId}_timeline`}
timelineId={timelineId}
prefix='home'
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
/>
</PullToRefresh>
) : (

6
src/features/list-timeline/index.tsx
View File

@ -8,13 +8,14 @@ import { expandListTimeline } from 'soapbox/actions/timelines';
import { useListStream } from 'soapbox/api/hooks';
import MissingIndicator from 'soapbox/components/missing-indicator';
import { Column, Button, Spinner } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
import Timeline from '../ui/components/timeline';
const ListTimeline: React.FC = () => {
const dispatch = useAppDispatch();
const { id } = useParams<{ id: string }>();
const theme = useTheme();
const list = useAppSelector((state) => state.lists.get(id));
const next = useAppSelector(state => state.timelines.get(`list:${id}`)?.next);
@ -61,11 +62,12 @@ const ListTimeline: React.FC = () => {
return (
<Column label={title} transparent>
<Timeline
className='black:p-4 black:sm:p-5'
scrollKey='list_timeline'
timelineId={`list:${id}`}
onLoadMore={handleLoadMore}
emptyMessage={emptyMessage}
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
/>
</Column>
);

2
src/features/notifications/index.tsx
View File

@ -165,7 +165,7 @@ const Notifications = () => {
onScrollToTop={handleScrollToTop}
onScroll={handleScroll}
className={clsx({
'divide-y divide-gray-200 dark:divide-primary-800 divide-solid': notifications.size > 0,
'divide-y divide-gray-200 black:divide-gray-800 dark:divide-primary-800 divide-solid': notifications.size > 0,
'space-y-2': notifications.size === 0,
})}
>

6
src/features/public-timeline/index.tsx
View File

@ -7,7 +7,7 @@ import { expandPublicTimeline } from 'soapbox/actions/timelines';
import { usePublicStream } from 'soapbox/api/hooks';
import PullToRefresh from 'soapbox/components/pull-to-refresh';
import { Accordion, Column } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch, useInstance, useSettings } from 'soapbox/hooks';
import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme } from 'soapbox/hooks';
import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker';
import Timeline from '../ui/components/timeline';
@ -20,6 +20,7 @@ const messages = defineMessages({
const CommunityTimeline = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const theme = useTheme();
const instance = useInstance();
const settings = useSettings();
@ -86,12 +87,13 @@ const CommunityTimeline = () => {
</div>}
<PullToRefresh onRefresh={handleRefresh}>
<Timeline
className='black:p-4 black:sm:p-5'
scrollKey={`${timelineId}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
prefix='home'
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
/>
</PullToRefresh>
</Column>

6
src/features/quotes/index.tsx
View File

@ -7,7 +7,7 @@ import { useParams } from 'react-router-dom';
import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-quotes';
import StatusList from 'soapbox/components/status-list';
import { Column } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
const messages = defineMessages({
heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
@ -20,6 +20,7 @@ const Quotes: React.FC = () => {
const dispatch = useAppDispatch();
const intl = useIntl();
const { statusId } = useParams<{ statusId: string }>();
const theme = useTheme();
const statusIds = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'items'], ImmutableOrderedSet<string>()));
const isLoading = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'isLoading'], true));
@ -38,6 +39,7 @@ const Quotes: React.FC = () => {
return (
<Column label={intl.formatMessage(messages.heading)} transparent>
<StatusList
className='black:p-4 black:sm:p-5'
statusIds={statusIds as ImmutableOrderedSet<string>}
scrollKey={`quotes:${statusId}`}
hasMore={hasMore}
@ -45,7 +47,7 @@ const Quotes: React.FC = () => {
onLoadMore={() => handleLoadMore(statusId, dispatch)}
onRefresh={handleRefresh}
emptyMessage={emptyMessage}
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
/>
</Column>
);

6
src/features/remote-timeline/index.tsx
View File

@ -6,7 +6,7 @@ import { expandRemoteTimeline } from 'soapbox/actions/timelines';
import { useRemoteStream } from 'soapbox/api/hooks';
import IconButton from 'soapbox/components/icon-button';
import { Column, HStack, Text } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
import Timeline from '../ui/components/timeline';
@ -22,6 +22,7 @@ interface IRemoteTimeline {
const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
const history = useHistory();
const dispatch = useAppDispatch();
const theme = useTheme();
const instance = params?.instance as string;
const settings = useSettings();
@ -64,6 +65,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
)}
<Timeline
className='black:p-4 black:sm:p-5'
scrollKey={`${timelineId}_${instance}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
onLoadMore={handleLoadMore}
@ -74,7 +76,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
values={{ instance }}
/>
}
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
/>
</Column>
);

5
src/features/test-timeline/index.tsx
View File

@ -3,7 +3,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { importFetchedStatuses } from 'soapbox/actions/importer';
import { expandTimelineSuccess } from 'soapbox/actions/timelines';
import { useAppDispatch } from 'soapbox/hooks';
import { useAppDispatch, useTheme } from 'soapbox/hooks';
import { Column } from '../../components/ui';
import Timeline from '../ui/components/timeline';
@ -31,6 +31,7 @@ const onlyMedia = false;
const TestTimeline: React.FC = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const theme = useTheme();
React.useEffect(() => {
dispatch(importFetchedStatuses(MOCK_STATUSES));
@ -43,7 +44,7 @@ const TestTimeline: React.FC = () => {
scrollKey={`${timelineId}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
emptyMessage={<FormattedMessage id='empty_column.test' defaultMessage='The test timeline is empty.' />}
divideType='space'
divideType={theme === 'black' ? 'border' : 'space'}
/>
</Column>
);

4
src/features/ui/components/theme-selector.tsx
View File

@ -6,7 +6,7 @@ import { Icon, Select } from 'soapbox/components/ui';
const messages = defineMessages({
light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
black: { id: 'theme_toggle.black', defaultMessage: 'Pure Black (beta)' },
black: { id: 'theme_toggle.black', defaultMessage: 'Black' },
system: { id: 'theme_toggle.system', defaultMessage: 'System' },
});
@ -28,7 +28,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
case 'dark':
return require('@tabler/icons/moon.svg');
case 'black':
return require('@tabler/icons/moon-off.svg');
return require('@tabler/icons/shadow.svg');
default:
return null;
}