mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 04:50:36 +03:00
Improve navigation
This commit is contained in:
parent
61d8a0e4aa
commit
f26ba55fef
|
@ -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() {
|
||||
return (
|
||||
<IconSVG viewbox='0 0 24 24'>
|
||||
|
|
|
@ -7,8 +7,8 @@ interface LogoProps {
|
|||
function Logo({title}: LogoProps) {
|
||||
return (
|
||||
<Link to='/' className='flex items-center mr-4'>
|
||||
<img src='/favicon.svg' className='h-10 mr-2' alt=''/>
|
||||
<span className='hidden lg:block self-center text-2xl font-semibold whitespace-nowrap dark:text-white'>{title}</span>
|
||||
<img src='/favicon.svg' className='min-h-[2.5rem] mr-2 min-w-[2.5rem]' alt=''/>
|
||||
<span className='self-center hidden text-2xl font-semibold lg:block whitespace-nowrap dark:text-white'>{title}</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -3,7 +3,6 @@ import TopSearch from './TopSearch';
|
|||
import { EducationIcon, LibraryIcon } from '../Icons';
|
||||
import NavigationButton from './NavigationButton';
|
||||
import UserMenu from './UserMenu';
|
||||
import ThemeSwitcher from './ThemeSwitcher';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import UserTools from './UserTools';
|
||||
import Logo from './Logo';
|
||||
|
@ -26,9 +25,8 @@ function Navigation() {
|
|||
<div className='flex items-center'>
|
||||
{user && <UserTools/>}
|
||||
<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} />
|
||||
<ThemeSwitcher />
|
||||
<UserMenu />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -5,7 +5,7 @@ interface NavigationTextItemProps {
|
|||
bold?: boolean
|
||||
}
|
||||
|
||||
function NavigationTextItem({text='', description='', onClick, bold=true}: NavigationTextItemProps) {
|
||||
function NavigationTextItem({text='', description='', onClick, bold}: NavigationTextItemProps) {
|
||||
return (
|
||||
<button
|
||||
title={description}
|
||||
|
|
|
@ -22,18 +22,24 @@ function UserDropdown({hideDropdown}: UserDropdownProps) {
|
|||
logout(() => {navigate('/login/');})
|
||||
};
|
||||
|
||||
const navigateMyWork = () => {
|
||||
hideDropdown()
|
||||
navigate('/rsforms?filter=personal');
|
||||
};
|
||||
|
||||
return (
|
||||
<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'>
|
||||
<NavigationTextItem description='Профиль пользователя' bold={false}
|
||||
<NavigationTextItem description='Профиль пользователя'
|
||||
text={user?.username}
|
||||
onClick={navigateProfile}
|
||||
/>
|
||||
<NavigationTextItem description='Переключение темы оформления' bold={false}
|
||||
<NavigationTextItem description='Переключение темы оформления'
|
||||
text={darkMode ? 'Светлая тема' : 'Темная тема'}
|
||||
onClick={toggleDarkMode}
|
||||
/>
|
||||
<NavigationTextItem text={'Выйти...'} onClick={logoutAndRedirect} />
|
||||
<NavigationTextItem text={'Мои схемы'} onClick={navigateMyWork} />
|
||||
<NavigationTextItem text={'Выйти...'} bold onClick={logoutAndRedirect} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -26,7 +26,12 @@ function UserMenu() {
|
|||
return (
|
||||
<div ref={dropdownRef}>
|
||||
{ !user && <LoginRef />}
|
||||
{ user && <NavigationButton icon={<UserIcon />} description='Пользователь' onClick={toggleUserDropdown} /> }
|
||||
{ user &&
|
||||
<NavigationButton
|
||||
icon={<UserIcon />}
|
||||
description={`Пользователь ${user?.username}`}
|
||||
onClick={toggleUserDropdown}
|
||||
/>}
|
||||
{ user && showUserDropdown && <UserDropdown hideDropdown={hideDropdown} /> }
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
import { useNavigate } from 'react-router-dom';
|
||||
import NavigationButton from './NavigationButton';
|
||||
import { PlusIcon, SquaresIcon } from '../Icons';
|
||||
import { BellIcon, PlusIcon, SquaresIcon } from '../Icons';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
function UserTools() {
|
||||
const navigate = useNavigate();;
|
||||
const navigate = useNavigate();
|
||||
|
||||
const navigateCreateRSForm = () => {
|
||||
navigate('/rsform-create');
|
||||
};
|
||||
const navigateCreateRSForm = () => navigate('/rsform-create');
|
||||
const navigateMyWork = () => navigate('/rsforms?filter=personal');
|
||||
|
||||
const navigateMyWork = () => {
|
||||
navigate('/rsforms?filter=personal');
|
||||
const handleNotifications = () => {
|
||||
toast.info('Уведомления в разработке');
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -22,7 +22,8 @@ function UserTools() {
|
|||
colorClass='text-blue-500 hover:text-blue-700 dark:text-orange-500 dark:hover:text-orange-300'
|
||||
/>
|
||||
</span>
|
||||
<NavigationButton icon={<SquaresIcon />} description='Рабочие схемы' onClick={navigateMyWork} />
|
||||
<NavigationButton icon={<SquaresIcon />} description='Мои схемы' onClick={navigateMyWork} />
|
||||
<NavigationButton icon={<BellIcon />} description='Уведомления' onClick={handleNotifications} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -6,7 +6,7 @@ import TextInput from '../../components/Common/TextInput';
|
|||
import { useRSForm } from '../../context/RSFormContext';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
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 { useNavigate } from 'react-router-dom';
|
||||
import { toast } from 'react-toastify';
|
||||
|
@ -79,6 +79,12 @@ function RSFormCard() {
|
|||
});
|
||||
}, [download, schema?.alias, fileURL]);
|
||||
|
||||
const handleShare = useCallback(() => {
|
||||
const url = window.location.href + '&share';
|
||||
navigator.clipboard.writeText(url);
|
||||
toast.success(`Ссылка скопирована: ${url}`);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className='flex-grow max-w-xl px-4 py-2 border'>
|
||||
<TextInput id='title' label='Полное название' type='text'
|
||||
|
@ -108,6 +114,11 @@ function RSFormCard() {
|
|||
<div className='flex items-center justify-between gap-1 py-2 mt-2'>
|
||||
<SubmitButton text='Сохранить изменения' loading={processing} disabled={!isEditable || processing} />
|
||||
<div className='flex justify-end gap-1'>
|
||||
<Button
|
||||
tooltip='Поделиться схемой'
|
||||
icon={<ShareIcon />}
|
||||
onClick={handleShare}
|
||||
/>
|
||||
<Button
|
||||
disabled={processing}
|
||||
tooltip='Скачать TRS файл'
|
||||
|
|
Loading…
Reference in New Issue
Block a user