From 5a67d982e57b071c28eb9da9ba1c33c1886b3fc1 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 24 Aug 2023 14:23:17 +0300
Subject: [PATCH] Minor UI fixes

---
 rsconcept/frontend/src/App.tsx                | 21 +++-------------
 .../frontend/src/context/ThemeContext.tsx     | 25 ++++++++++++++++---
 .../frontend/src/pages/ManualsPage/index.tsx  |  4 ++-
 .../src/pages/RSFormPage/EditorItems.tsx      |  7 ++----
 4 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/rsconcept/frontend/src/App.tsx b/rsconcept/frontend/src/App.tsx
index dabdcd51..d0969811 100644
--- a/rsconcept/frontend/src/App.tsx
+++ b/rsconcept/frontend/src/App.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import Footer from './components/Footer';
@@ -17,21 +16,7 @@ import RSFormPage from './pages/RSFormPage';
 import UserProfilePage from './pages/UserProfilePage';
 
 function App () {
-  const { noNavigation } = useConceptTheme();
-
-  const scrollWindowSize = useMemo(
-  () => {
-    return !noNavigation ? 
-      'calc(100vh - 4.5rem)'
-    : '100vh'; 
-  }, [noNavigation]);
-  const mainSize = useMemo(
-  () => {
-    return !noNavigation ? 
-      'calc(100vh - 9.2rem)'
-    : '100vh'; 
-  }, [noNavigation]);
-  
+  const { noNavigation, viewportHeight, mainHeight } = useConceptTheme();  
   return (
     <div className='antialiased clr-app'>
       <Navigation />
@@ -42,8 +27,8 @@ function App () {
         pauseOnFocusLoss={false}
       />
       
-      <div className='overflow-auto' style={{maxHeight: scrollWindowSize}}>
-      <main style={{minHeight: mainSize}}>
+      <div className='overflow-auto' style={{maxHeight: viewportHeight}}>
+      <main className='h-full' style={{minHeight: mainHeight}}>
         <Routes>
           <Route path='/' element={ <HomePage/>} />
 
diff --git a/rsconcept/frontend/src/context/ThemeContext.tsx b/rsconcept/frontend/src/context/ThemeContext.tsx
index 69ad107a..895bd516 100644
--- a/rsconcept/frontend/src/context/ThemeContext.tsx
+++ b/rsconcept/frontend/src/context/ThemeContext.tsx
@@ -1,10 +1,12 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useLayoutEffect, useMemo, useState } from 'react';
 
 import useLocalStorage from '../hooks/useLocalStorage';
 
 interface IThemeContext {
   darkMode: boolean
   noNavigation: boolean
+  viewportHeight: string
+  mainHeight: string
   toggleDarkMode: () => void
   toggleNoNavigation: () => void
 }
@@ -38,16 +40,31 @@ export const ThemeState = ({ children }: ThemeStateProps) => {
     root.setAttribute('data-color-scheme', !isDark ? 'light' : 'dark');
   };
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setDarkClass(darkMode)
   }, [darkMode]);
 
+  const mainHeight = useMemo(
+  () => {
+    return !noNavigation ? 
+      'calc(100vh - 9.2rem)'
+    : '100vh'; 
+  }, [noNavigation]);
+
+  const viewportHeight = useMemo(
+  () => {
+    return !noNavigation ? 
+      'calc(100vh - 4.5rem)'
+    : '100vh'; 
+  }, [noNavigation]);
+
   return (
     <ThemeContext.Provider value={{
       darkMode,
-      toggleDarkMode: () => setDarkMode(prev => !prev),
       noNavigation,
-      toggleNoNavigation: () => setNoNavigation(prev => !prev)
+      toggleDarkMode: () => setDarkMode(prev => !prev),
+      toggleNoNavigation: () => setNoNavigation(prev => !prev),
+      viewportHeight, mainHeight
     }}>
       {children}
     </ThemeContext.Provider>
diff --git a/rsconcept/frontend/src/pages/ManualsPage/index.tsx b/rsconcept/frontend/src/pages/ManualsPage/index.tsx
index d358d112..46233d22 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/index.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/index.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useLayoutEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { useConceptTheme } from '../../context/ThemeContext';
 import { HelpTopic } from '../../utils/models';
 import TopicsList from './TopicsList';
 import ViewTopic from './ViewTopic';
@@ -8,6 +9,7 @@ import ViewTopic from './ViewTopic';
 function ManualsPage() {
   const navigate = useNavigate();
   const search = useLocation().search;
+  const { mainHeight } = useConceptTheme();
   const [activeTopic, setActiveTopic] = useState<HelpTopic>(HelpTopic.MAIN);
 
   const navigateTo = useCallback(
@@ -31,7 +33,7 @@ function ManualsPage() {
   }, [search, setActiveTopic, navigateTo]);
 
   return (
-    <div className='flex w-full gap-2 justify-stretch'>
+    <div className='flex w-full gap-2 justify-stretch' style={{minHeight: mainHeight}}>
       <TopicsList 
         activeTopic={activeTopic}
         onChangeTopic={topic => onSelectTopic(topic)}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
index ff5763d4..33620c04 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
@@ -8,7 +8,6 @@ import Divider from '../../components/Common/Divider';
 import HelpRSFormItems from '../../components/Help/HelpRSFormItems';
 import { ArrowDownIcon, ArrowsRotateIcon, ArrowUpIcon, DumpBinIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
-import { useConceptTheme } from '../../context/ThemeContext';
 import { prefixes } from '../../utils/constants';
 import { CstType, IConstituenta, ICstCreateData, ICstMovetoData } from '../../utils/models'
 import { getCstTypePrefix, getCstTypeShortcut, getCstTypificationLabel, mapStatusInfo } from '../../utils/staticUI';
@@ -21,7 +20,6 @@ interface EditorItemsProps {
 
 function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps) {
   const { schema, isEditable, cstMoveTo, resetAliases } = useRSForm();
-  const { noNavigation } = useConceptTheme();
   const [selected, setSelected] = useState<number[]>([]);
   const nothingSelected = useMemo(() => selected.length === 0, [selected]);
 
@@ -200,7 +198,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
       reorder: true,
     },
     {
-      name: 'Тип',
+      name: 'Типизация',
       id: 'type',
       cell: (cst: IConstituenta) => <div style={{ fontSize: 12 }}>{getCstTypificationLabel(cst)}</div>,
       width: '175px',
@@ -256,8 +254,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
   return (
     <div className='w-full'>
       <div
-        className={'flex justify-start w-full gap-1 px-2 py-1 border-y items-center h-[2.2rem] select-none clr-app' +
-          (!noNavigation ? ' sticky z-10 top-[0rem]' : ' sticky z-10 top-[0rem]')}
+        className='sticky top-0 z-10 flex justify-start w-full gap-1 px-2 py-1 border-y items-center h-[2.2rem] select-none clr-app'
       >
         <div className='mr-3 whitespace-nowrap'>
           Выбраны