Improve navigation

This commit is contained in:
IRBorisov 2023-07-16 22:53:22 +03:00
parent 61d8a0e4aa
commit f26ba55fef
8 changed files with 49 additions and 20 deletions

View File

@ -76,6 +76,14 @@ export function MenuIcon() {
); );
} }
export function ShareIcon() {
return (
<IconSVG viewbox='0 0 24 24'>
<path d='M5.5 15a3.51 3.51 0 002.36-.93l6.26 3.58a3.06 3.06 0 00-.12.85 3.53 3.53 0 101.14-2.57l-6.26-3.58a2.74 2.74 0 00.12-.76l6.15-3.52A3.49 3.49 0 1014 5.5a3.35 3.35 0 00.12.85L8.43 9.6A3.5 3.5 0 105.5 15zm12 2a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm0-13A1.5 1.5 0 1116 5.5 1.5 1.5 0 0117.5 4zm-12 6A1.5 1.5 0 114 11.5 1.5 1.5 0 015.5 10z' />
</IconSVG>
);
}
export function FilterCogIcon() { export function FilterCogIcon() {
return ( return (
<IconSVG viewbox='0 0 24 24'> <IconSVG viewbox='0 0 24 24'>

View File

@ -7,8 +7,8 @@ interface LogoProps {
function Logo({title}: LogoProps) { function Logo({title}: LogoProps) {
return ( return (
<Link to='/' className='flex items-center mr-4'> <Link to='/' className='flex items-center mr-4'>
<img src='/favicon.svg' className='h-10 mr-2' alt=''/> <img src='/favicon.svg' className='min-h-[2.5rem] mr-2 min-w-[2.5rem]' alt=''/>
<span className='hidden lg:block self-center text-2xl font-semibold whitespace-nowrap dark:text-white'>{title}</span> <span className='self-center hidden text-2xl font-semibold lg:block whitespace-nowrap dark:text-white'>{title}</span>
</Link> </Link>
); );
} }

View File

@ -3,7 +3,6 @@ import TopSearch from './TopSearch';
import { EducationIcon, LibraryIcon } from '../Icons'; import { EducationIcon, LibraryIcon } from '../Icons';
import NavigationButton from './NavigationButton'; import NavigationButton from './NavigationButton';
import UserMenu from './UserMenu'; import UserMenu from './UserMenu';
import ThemeSwitcher from './ThemeSwitcher';
import { useAuth } from '../../context/AuthContext'; import { useAuth } from '../../context/AuthContext';
import UserTools from './UserTools'; import UserTools from './UserTools';
import Logo from './Logo'; import Logo from './Logo';
@ -26,9 +25,8 @@ function Navigation() {
<div className='flex items-center'> <div className='flex items-center'>
{user && <UserTools/>} {user && <UserTools/>}
<div className='flex items-center pl-2'> <div className='flex items-center pl-2'>
<NavigationButton icon={<LibraryIcon />} description='Библиотека конструктов' onClick={navigateCommon} /> <NavigationButton icon={<LibraryIcon />} description='Общие схемы' onClick={navigateCommon} />
<NavigationButton icon={<EducationIcon />} description='Справка' onClick={navigateHelp} /> <NavigationButton icon={<EducationIcon />} description='Справка' onClick={navigateHelp} />
<ThemeSwitcher />
<UserMenu /> <UserMenu />
</div> </div>
</div> </div>

View File

@ -5,7 +5,7 @@ interface NavigationTextItemProps {
bold?: boolean bold?: boolean
} }
function NavigationTextItem({text='', description='', onClick, bold=true}: NavigationTextItemProps) { function NavigationTextItem({text='', description='', onClick, bold}: NavigationTextItemProps) {
return ( return (
<button <button
title={description} title={description}

View File

@ -21,19 +21,25 @@ function UserDropdown({hideDropdown}: UserDropdownProps) {
hideDropdown() hideDropdown()
logout(() => {navigate('/login/');}) logout(() => {navigate('/login/');})
}; };
const navigateMyWork = () => {
hideDropdown()
navigate('/rsforms?filter=personal');
};
return ( return (
<div className='relative'> <div className='relative'>
<div className='absolute right-0 z-10 flex flex-col items-stretch justify-start p-2 mt-4 text-sm origin-top-right bg-white border border-gray-100 divide-y rounded-md shadow-lg dark:border-gray-500 dark:bg-gray-900 w-36'> <div className='absolute right-0 z-10 flex flex-col items-stretch justify-start p-2 mt-4 text-sm origin-top-right bg-white border border-gray-100 divide-y rounded-md shadow-lg dark:border-gray-500 dark:bg-gray-900 w-36'>
<NavigationTextItem description='Профиль пользователя' bold={false} <NavigationTextItem description='Профиль пользователя'
text={user?.username} text={user?.username}
onClick={navigateProfile} onClick={navigateProfile}
/> />
<NavigationTextItem description='Переключение темы оформления' bold={false} <NavigationTextItem description='Переключение темы оформления'
text={darkMode ? 'Светлая тема' : 'Темная тема'} text={darkMode ? 'Светлая тема' : 'Темная тема'}
onClick={toggleDarkMode} onClick={toggleDarkMode}
/> />
<NavigationTextItem text={'Выйти...'} onClick={logoutAndRedirect} /> <NavigationTextItem text={'Мои схемы'} onClick={navigateMyWork} />
<NavigationTextItem text={'Выйти...'} bold onClick={logoutAndRedirect} />
</div> </div>
</div> </div>
); );

View File

@ -26,7 +26,12 @@ function UserMenu() {
return ( return (
<div ref={dropdownRef}> <div ref={dropdownRef}>
{ !user && <LoginRef />} { !user && <LoginRef />}
{ user && <NavigationButton icon={<UserIcon />} description='Пользователь' onClick={toggleUserDropdown} /> } { user &&
<NavigationButton
icon={<UserIcon />}
description={`Пользователь ${user?.username}`}
onClick={toggleUserDropdown}
/>}
{ user && showUserDropdown && <UserDropdown hideDropdown={hideDropdown} /> } { user && showUserDropdown && <UserDropdown hideDropdown={hideDropdown} /> }
</div> </div>
); );

View File

@ -1,16 +1,16 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import NavigationButton from './NavigationButton'; import NavigationButton from './NavigationButton';
import { PlusIcon, SquaresIcon } from '../Icons'; import { BellIcon, PlusIcon, SquaresIcon } from '../Icons';
import { toast } from 'react-toastify';
function UserTools() { function UserTools() {
const navigate = useNavigate();; const navigate = useNavigate();
const navigateCreateRSForm = () => { const navigateCreateRSForm = () => navigate('/rsform-create');
navigate('/rsform-create'); const navigateMyWork = () => navigate('/rsforms?filter=personal');
};
const navigateMyWork = () => { const handleNotifications = () => {
navigate('/rsforms?filter=personal'); toast.info('Уведомления в разработке');
}; };
return ( return (
@ -22,7 +22,8 @@ function UserTools() {
colorClass='text-blue-500 hover:text-blue-700 dark:text-orange-500 dark:hover:text-orange-300' colorClass='text-blue-500 hover:text-blue-700 dark:text-orange-500 dark:hover:text-orange-300'
/> />
</span> </span>
<NavigationButton icon={<SquaresIcon />} description='Рабочие схемы' onClick={navigateMyWork} /> <NavigationButton icon={<SquaresIcon />} description='Мои схемы' onClick={navigateMyWork} />
<NavigationButton icon={<BellIcon />} description='Уведомления' onClick={handleNotifications} />
</div> </div>
); );
} }

View File

@ -6,7 +6,7 @@ import TextInput from '../../components/Common/TextInput';
import { useRSForm } from '../../context/RSFormContext'; import { useRSForm } from '../../context/RSFormContext';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import Button from '../../components/Common/Button'; import Button from '../../components/Common/Button';
import { CrownIcon, DownloadIcon, DumpBinIcon } from '../../components/Icons'; import { CrownIcon, DownloadIcon, DumpBinIcon, ShareIcon } from '../../components/Icons';
import { useUsers } from '../../context/UsersContext'; import { useUsers } from '../../context/UsersContext';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
@ -78,6 +78,12 @@ function RSFormCard() {
} }
}); });
}, [download, schema?.alias, fileURL]); }, [download, schema?.alias, fileURL]);
const handleShare = useCallback(() => {
const url = window.location.href + '&share';
navigator.clipboard.writeText(url);
toast.success(`Ссылка скопирована: ${url}`);
}, []);
return ( return (
<form onSubmit={handleSubmit} className='flex-grow max-w-xl px-4 py-2 border'> <form onSubmit={handleSubmit} className='flex-grow max-w-xl px-4 py-2 border'>
@ -108,6 +114,11 @@ function RSFormCard() {
<div className='flex items-center justify-between gap-1 py-2 mt-2'> <div className='flex items-center justify-between gap-1 py-2 mt-2'>
<SubmitButton text='Сохранить изменения' loading={processing} disabled={!isEditable || processing} /> <SubmitButton text='Сохранить изменения' loading={processing} disabled={!isEditable || processing} />
<div className='flex justify-end gap-1'> <div className='flex justify-end gap-1'>
<Button
tooltip='Поделиться схемой'
icon={<ShareIcon />}
onClick={handleShare}
/>
<Button <Button
disabled={processing} disabled={processing}
tooltip='Скачать TRS файл' tooltip='Скачать TRS файл'