ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 04:50:36 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add navigation hide btn and improve styling

Browse Source
This commit is contained in:
IRBorisov 2023-07-21 01:50:57 +03:00
parent 94961deb8a
commit 53868d48d7
10 changed files with 84 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rsconcept/frontend/src/App.tsx
View File

@ -25,7 +25,7 @@ function App() {
pauseOnFocusLoss={false}
limit={5}
/>
<main className='min-h-[calc(100vh-6.8rem)] px-2 h-fit'>
<main className='min-h-[calc(100vh-7.5rem)] px-2 h-fit'>
<Routes>
<Route path='/' element={ <HomePage/>} />

3
rsconcept/frontend/src/components/Common/SubmitButton.tsx
View File

@ -5,10 +5,9 @@ interface SubmitButtonProps {
}
function SubmitButton({text='ОК', disabled, loading=false}: SubmitButtonProps) {
const style = 'px-4 py-2 font-bold text-white disabled:cursor-not-allowed bg-blue-500 rounded hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-300 disabled:bg-gray-400'
return (
<button type='submit'
className={style + (loading ? ' cursor-progress': '')}
className={`px-4 py-2 font-bold text-white disabled:cursor-not-allowed rounded clr-btn-primary ${loading ? ' cursor-progress': ''}`}
disabled={disabled}
>
{text}

2
rsconcept/frontend/src/components/Footer.tsx
View File

@ -3,7 +3,7 @@ import { urls } from '../utils/constants';
function Footer() {
return (
<footer className='z-50 px-4 py-4 text-gray-600 bg-white border-t-2 border-gray-400 dark:bg-gray-700 dark:border-gray-300 dark:text-gray-300'>
<footer className='z-50 px-4 pt-2 pb-4 text-gray-600 bg-white border-t-2 border-gray-400 dark:bg-gray-700 dark:border-gray-300 dark:text-gray-300'>
<div className='flex items-stretch justify-center w-full mx-auto'>
<div className='px-4 underline'>
<Link to='manuals' tabIndex={-1}>Справка</Link> <br/>

26
rsconcept/frontend/src/components/Navigation/Navigation.tsx
View File

@ -6,22 +6,40 @@ import UserMenu from './UserMenu';
import { useAuth } from '../../context/AuthContext';
import UserTools from './UserTools';
import Logo from './Logo';
import { useState } from 'react';
function Navigation() {
const {user} = useAuth();
const navigate = useNavigate();
const [isActive, setActive] = useState(true);
const navigateCommon = () => navigate('/rsforms?filter=common');
const navigateHelp = () => navigate('/manuals');
return (
<nav className='bg-white dark:bg-gray-700 border-b-2 border-gray-400 rounded dark:border-gray-300 px-4 py-2.5 sticky top-0 left-0 right-0 z-50 h-[4rem]'>
<div className='flex items-center justify-between '>
<nav className='sticky top-0 left-0 right-0 z-50'>
{isActive &&
<button
title='Скрыть навигацию'
className='absolute top-0 right-0 z-[60] border-b-2 border-l-2 clr-nav w-[1.2rem] h-[4rem] '
onClick={() => setActive(!isActive)}
>
<p>{'>'}</p><p>{'>'}</p>
</button>}
{!isActive &&
<button
title='Показать навигацию'
className='absolute top-0 right-0 z-[60] border-b-2 border-l-2 clr-nav w-[4rem] h-[1.6rem]'
onClick={() => setActive(!isActive)}
>
{'∨∨∨'}
</button>}
{isActive &&
<div className='border-b-2 clr-nav pr-6 pl-2 py-2.5 h-[4rem] flex items-center justify-between '>
<div className='flex items-start justify-start '>
<Logo title='КонцептПортал' />
<TopSearch placeholder='Поиск схемы...' />
</div>
<div className='flex items-center'>
{user && <UserTools/>}
<div className='flex items-center pl-2'>
@ -30,7 +48,7 @@ function Navigation() {
<UserMenu />
</div>
</div>
</div>
</div>}
</nav>
);
}

8
rsconcept/frontend/src/index.css
View File

@ -23,10 +23,18 @@
@apply text-zinc-200 bg-gray-900
}
.clr-nav {
@apply border-gray-400 dark:border-gray-300 bg-white dark:bg-gray-700 rounded-none
}
.clr-hover {
@apply hover:bg-gray-50 hover:text-gray-700 dark:hover:text-white dark:hover:bg-gray-500
}
.clr-btn-primary {
@apply bg-blue-400 hover:bg-blue-600 dark:bg-orange-600 dark:hover:bg-orange-400 disabled:bg-gray-400 dark:disabled:bg-gray-400
}
.text-red {
@apply text-red-400 dark:text-red-600
}

9
rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx
View File

@ -78,7 +78,7 @@ function ConstituentEditor() {
return (
<div className='flex items-start w-full gap-2'>
<form onSubmit={handleSubmit} className='flex-grow min-w-[50rem] max-w-min px-4 py-2 border'>
<div className='flex items-center justify-between gap-1'>
<div className='flex items-start justify-between gap-1'>
<span className='mr-12'>
<label
title='Переименовать конституенту'
@ -89,6 +89,9 @@ function ConstituentEditor() {
</label>
<b className='ml-2'>{alias}</b>
</span>
<div className='mt-2 h-[1rem]'>
<SubmitButton text='Сохранить изменения' disabled={!isEditable} />
</div>
<span>
<label
title='Изменить тип конституенты'
@ -141,9 +144,7 @@ function ConstituentEditor() {
onChange={event => setConvention(event.target.value)}
onFocus={() => setEditMode(EditMode.TEXT)}
/>
<div className='flex items-center justify-between gap-1 py-2 mt-2'>
<SubmitButton text='Сохранить изменения' disabled={!isEditable} />
</div>
</form>
<ConstituentsSideList expression={expression}/>
</div>

2
rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx
View File

@ -76,7 +76,7 @@ function ConstituentsSideList({expression}: ConstituentsSideListProps) {
return (
<div className='max-h-[80vh] overflow-y-scroll border flex-grow w-full'>
<div className='sticky top-0 left-0 right-0 z-40 flex items-center justify-between w-full gap-1 px-2 py-1 bg-white border-b-2 border-gray-400 rounded dark:bg-gray-700 dark:border-gray-300'>
<div className='sticky top-0 left-0 right-0 z-10 flex items-center justify-between w-full gap-1 px-2 py-1 bg-white border-b-2 border-gray-400 rounded dark:bg-gray-700 dark:border-gray-300'>
<div className='w-full'>
<input type='text'
className='w-full px-2 outline-none dark:bg-gray-700 hover:text-clip'

6
rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx
View File

@ -13,7 +13,7 @@ interface ConstituentsTableProps {
}
function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
const { schema, isEditable } = useRSForm();
const { schema, isEditable, } = useRSForm();
const [selectedRows, setSelectedRows] = useState<IConstituenta[]>([]);
const nothingSelected = useMemo(() => selectedRows.length === 0, [selectedRows]);
@ -25,9 +25,9 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
const handleRowClicked = useCallback(
(cst: IConstituenta, event: React.MouseEvent<Element, MouseEvent>) => {
if (event.ctrlKey) {
console.log('ctrl + click');
onOpenEdit(cst);
}
}, []);
}, [onOpenEdit]);
const handleDelete = useCallback(() => {
toast.info('Удаление конституент');

38
rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx
View File

@ -43,6 +43,31 @@ function RSFormTabs() {
}
}, [setActive, schema, setInit]);
// const [ locationKeys, setLocationKeys ] = useState([])
// const history = useHistory()
// useEffect(() => {
// return history.listen(location => {
// if (history.action === 'PUSH') {
// setLocationKeys([ location.key ])
// }
// if (history.action === 'POP') {
// if (locationKeys[1] === location.key) {
// setLocationKeys(([ _, ...keys ]) => keys)
// // Handle forward event
// } else {
// setLocationKeys((keys) => [ location.key, ...keys ])
// // Handle back event
// }
// }
// })
// }, [ locationKeys, ])
useEffect(() => {
const url = new URL(window.location.href);
const tabQuery = url.searchParams.get('tab');
@ -51,14 +76,25 @@ function RSFormTabs() {
useEffect(() => {
if (init) {
let url = new URL(window.location.href);
const url = new URL(window.location.href);
let currentActive = url.searchParams.get('active');
const currentTab = url.searchParams.get('tab');
const saveHistory = tabIndex === TabsList.CST_EDIT && currentActive !== String(active?.entityUID);
if (currentTab !== String(tabIndex)) {
url.searchParams.set('tab', String(tabIndex));
}
if (active) {
if (currentActive !== String(active.entityUID)) {
url.searchParams.set('active', String(active.entityUID));
}
} else {
url.searchParams.delete('active');
}
if (saveHistory) {
window.history.pushState(null, '', url.toString());
} else {
window.history.replaceState(null, '', url.toString());
}
}
}, [tabIndex, active, init]);

4
rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx
View File

@ -42,9 +42,9 @@ function TablistTools() {
<Dropdown>
<p>клонировать</p>
<p>поделиться</p>
<DropdownButton disabled={isEditable} onClick={handleDelete}>
<DropdownButton disabled={!isEditable} onClick={handleDelete}>
<div className='inline-flex items-center gap-1 justify-normal'>
<span className={isOwned ? 'text-red' : ''}><DumpBinIcon size={4} /></span>
<span className={isEditable ? 'text-red' : ''}><DumpBinIcon size={4} /></span>
<p>Удалить схему</p>
</div>
</DropdownButton>