From 53868d48d7586333131c084c9cb6b63955ec782a Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Fri, 21 Jul 2023 01:50:57 +0300 Subject: [PATCH] Add navigation hide btn and improve styling --- rsconcept/frontend/src/App.tsx | 2 +- .../src/components/Common/SubmitButton.tsx | 3 +- rsconcept/frontend/src/components/Footer.tsx | 2 +- .../src/components/Navigation/Navigation.tsx | 26 +++++++++-- rsconcept/frontend/src/index.css | 8 ++++ .../pages/RSFormPage/ConstituentEditor.tsx | 9 ++-- .../pages/RSFormPage/ConstituentsSideList.tsx | 2 +- .../pages/RSFormPage/ConstituentsTable.tsx | 6 +-- .../src/pages/RSFormPage/RSFormTabs.tsx | 44 +++++++++++++++++-- .../src/pages/RSFormPage/TablistTools.tsx | 4 +- 10 files changed, 84 insertions(+), 22 deletions(-) diff --git a/rsconcept/frontend/src/App.tsx b/rsconcept/frontend/src/App.tsx index facc4913..02bdec61 100644 --- a/rsconcept/frontend/src/App.tsx +++ b/rsconcept/frontend/src/App.tsx @@ -25,7 +25,7 @@ function App() { pauseOnFocusLoss={false} limit={5} /> -
+
} /> diff --git a/rsconcept/frontend/src/components/Common/SubmitButton.tsx b/rsconcept/frontend/src/components/Common/SubmitButton.tsx index cf7b6d3b..9cffef3f 100644 --- 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 ( } + {!isActive && + } + {isActive && +
-
{user && }
@@ -30,7 +48,7 @@ function Navigation() {
-
+ } ); } diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css index 71cfd287..cc6b5837 100644 --- 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 } diff --git a/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx b/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx index b882173d..11a406ce 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx @@ -78,7 +78,7 @@ function ConstituentEditor() { return (
-
+
+
+ +
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx index 28fbb144..85a6901e 100644 --- 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 (
-
+
([]); const nothingSelected = useMemo(() => selectedRows.length === 0, [selectedRows]); @@ -25,9 +25,9 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) { const handleRowClicked = useCallback( (cst: IConstituenta, event: React.MouseEvent) => { if (event.ctrlKey) { - console.log('ctrl + click'); + onOpenEdit(cst); } - }, []); + }, [onOpenEdit]); const handleDelete = useCallback(() => { toast.info('Удаление конституент'); diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx index 98050f70..f301536b 100644 --- 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); - url.searchParams.set('tab', String(tabIndex)); + 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) { - url.searchParams.set('active', String(active.entityUID)); + if (currentActive !== String(active.entityUID)) { + url.searchParams.set('active', String(active.entityUID)); + } } else { url.searchParams.delete('active'); } - window.history.pushState(null, '', url.toString()); + if (saveHistory) { + window.history.pushState(null, '', url.toString()); + } else { + window.history.replaceState(null, '', url.toString()); + } } }, [tabIndex, active, init]); diff --git a/rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx b/rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx index 0f7d7d8a..83546c2a 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx @@ -42,9 +42,9 @@ function TablistTools() {

клонировать

поделиться

- +
- +

Удалить схему