Add navigation hide btn and improve styling

2025-06-26 04:50:36 +03:00 · 2023-07-21 01:50:57 +03:00 · 2023-07-21 01:50:57 +03:00 · 53868d48d7
commit 53868d48d7
parent 94961deb8a
10 changed files with 84 additions and 22 deletions
--- a/rsconcept/frontend/src/App.tsx
+++ b/rsconcept/frontend/src/App.tsx
@ -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/>} />

--- a/rsconcept/frontend/src/components/Common/SubmitButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SubmitButton.tsx
@ -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}
--- a/rsconcept/frontend/src/components/Footer.tsx
+++ b/rsconcept/frontend/src/components/Footer.tsx
@ -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/>
--- a/rsconcept/frontend/src/components/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/components/Navigation/Navigation.tsx
@ -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>
  );
 }
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@ -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
  }
--- a/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx
@ -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>
--- a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx
@ -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'
--- a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx
@ -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('Удаление конституент');
--- a/rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx
@ -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]);

--- a/rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx
@ -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>