matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace FAB with plus button in thumb nav, I need to remove one element to move the plus button to the center

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-08-14 16:52:11 +02:00
parent 08c4d9037e
commit ff9058e222
17 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/sidebar-menu.tsx
View File

@ -28,6 +28,7 @@ const messages = defineMessages({
groups: { id: 'column.groups', defaultMessage: 'Groups' },
events: { id: 'column.events', defaultMessage: 'Events' },
developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
dashboard: { id: 'navigation.dashboard', defaultMessage: 'Dashboard' },
drafts: { id: 'navigation.drafts', defaultMessage: 'Drafts' },
addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
@ -83,6 +84,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
const settings = useAppSelector((state) => getSettings(state));
const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
const draftCount = useAppSelector((state) => state.draft_statuses.size);
// const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
const [sidebarVisible, setSidebarVisible] = useState(sidebarOpen);
const [touchStart, setTouchStart] = useState(0);
const [touchEnd, setTouchEnd] = useState(0);
@ -338,6 +340,16 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
/>
)}
{account.staff && (
<SidebarLink
to='/dashboard'
icon={require('@tabler/icons/outline/dashboard.svg')}
text={intl.formatMessage(messages.dashboard)}
onClick={onClose}
// count={dashboardCount} WIP
/>
)}
<Divider />
<SidebarLink

36
src/components/thumb-navigation.tsx
View File

@ -1,9 +1,13 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { useRouteMatch } from 'react-router-dom';
import { groupComposeModal } from 'soapbox/actions/compose';
import { openModal } from 'soapbox/actions/modals';
import { openSidebar } from 'soapbox/actions/sidebar';
import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link';
import { useStatContext } from 'soapbox/contexts/stat-context';
import { Entities } from 'soapbox/entity-store/entities';
import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
import { Icon } from './ui';
@ -13,12 +17,24 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
const { account } = useOwnAccount();
const features = useFeatures();
const match = useRouteMatch<{ groupId: string }>('/groups/:groupId');
const { unreadChatsCount } = useStatContext();
const notificationCount = useAppSelector((state) => state.notifications.unread);
const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
const onOpenSidebar = () => dispatch(openSidebar());
const handleOpenSidebar = () => dispatch(openSidebar());
const handleOpenComposeModal = () => {
if (match?.params.groupId) {
dispatch((_, getState) => {
const group = getState().entities[Entities.GROUPS]?.store[match.params.groupId];
if (group) dispatch(groupComposeModal(group));
});
} else {
dispatch(openModal('COMPOSE'));
}
};
/** Conditionally render the supported messages link */
const renderMessagesLink = (): React.ReactNode => {
@ -52,7 +68,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
return (
<div className='fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 lg:hidden dark:border-gray-800 dark:bg-primary-900/90'>
<button className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600' onClick={onOpenSidebar}>
<button className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600' onClick={handleOpenSidebar}>
<Icon
src={require('@tabler/icons/outline/menu-2.svg')}
className='h-5 w-5 text-gray-600 black:text-white'
@ -97,13 +113,13 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{account && renderMessagesLink()}
{(account && account.staff) && (
<ThumbNavigationLink
src={require('@tabler/icons/outline/dashboard.svg')}
text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
to='/soapbox/admin'
count={dashboardCount}
/>
{account && (
<button className='flex flex-1 flex-col items-center px-1.5 py-3.5 text-lg text-gray-600' onClick={handleOpenComposeModal}>
<Icon
src={require('@tabler/icons/outline/square-rounded-plus.svg')}
className='h-6 w-6 text-gray-600 black:text-white'
/>
</button>
)}
</div>
);