From 120cfdcf030e43a5ca40aa51b7a4f078277078c8 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 5 Sep 2023 23:18:21 +0300
Subject: [PATCH] Refactor modal window and z-order

---
 .../src/components/Common/ConceptTooltip.tsx  |  6 ++---
 .../src/components/Common/Dropdown.tsx        |  2 +-
 .../frontend/src/components/Common/Modal.tsx  |  8 +++---
 rsconcept/frontend/src/components/Footer.tsx  |  2 +-
 .../src/components/Navigation/Navigation.tsx  |  6 ++---
 .../src/components/RSInput/tooltip.ts         |  2 +-
 rsconcept/frontend/src/index.css              | 27 +++++++++++++++++++
 .../src/pages/LibraryPage/SearchPanel.tsx     |  2 +-
 .../src/pages/LibraryPage/ViewLibrary.tsx     |  2 +-
 .../src/pages/RSFormPage/DlgShowAST.tsx       |  2 +-
 .../src/pages/RSFormPage/EditorItems.tsx      |  2 +-
 .../src/pages/RSFormPage/EditorTermGraph.tsx  |  4 +--
 .../src/pages/RSFormPage/RSTabsMenu.tsx       |  3 ++-
 .../elements/ViewSideConstituents.tsx         |  2 +-
 rsconcept/frontend/src/utils/staticUI.ts      |  2 +-
 15 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
index dec3b6ea..b4a9a70b 100644
--- a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
@@ -4,16 +4,16 @@ import { useConceptTheme } from '../../context/ThemeContext';
 
 interface ConceptTooltipProps
 extends Omit<ITooltip, 'variant'> {
-  
+  layer?: string
 }
 
-function ConceptTooltip({ className, place='bottom', ...props }: ConceptTooltipProps) {
+function ConceptTooltip({ className, layer, place='bottom', ...props }: ConceptTooltipProps) {
   const { darkMode } = useConceptTheme();
 
   return (
   <Tooltip
     opacity={0.95}
-    className={`overflow-auto border shadow-md z-20 ${className}`}
+    className={`overflow-auto border shadow-md ${layer ?? 'z-tooltip'} ${className}`}
     variant={(darkMode ? 'dark' : 'light')}
     place={place}
     {...props}
diff --git a/rsconcept/frontend/src/components/Common/Dropdown.tsx b/rsconcept/frontend/src/components/Common/Dropdown.tsx
index 456edde7..c5fdbc8e 100644
--- a/rsconcept/frontend/src/components/Common/Dropdown.tsx
+++ b/rsconcept/frontend/src/components/Common/Dropdown.tsx
@@ -7,7 +7,7 @@ interface DropdownProps {
 function Dropdown({ children, widthClass = 'w-fit', stretchLeft }: DropdownProps) {
   return (
     <div className='relative text-sm'>
-    <div className={`absolute ${stretchLeft ? 'right-0' : 'left-0'} mt-2 py-1 z-40 flex flex-col items-stretch justify-start origin-top-right border divide-y divide-inherit rounded-md shadow-lg clr-input ${widthClass}`}>
+    <div className={`absolute ${stretchLeft ? 'right-0' : 'left-0'} mt-2 py-1 z-tooltip flex flex-col items-stretch justify-start origin-top-right border divide-y divide-inherit rounded-md shadow-lg clr-input ${widthClass}`}>
       {children}
     </div>
     </div>
diff --git a/rsconcept/frontend/src/components/Common/Modal.tsx b/rsconcept/frontend/src/components/Common/Modal.tsx
index b4b2ae32..209064f3 100644
--- a/rsconcept/frontend/src/components/Common/Modal.tsx
+++ b/rsconcept/frontend/src/components/Common/Modal.tsx
@@ -37,16 +37,16 @@ function Modal({
 
   return (
     <>
-    <div className='fixed top-0 left-0 z-50 w-full h-full clr-modal-backdrop' />
+    <div className='fixed top-0 left-0 w-full h-full z-navigation clr-modal-backdrop' />
     <div 
       ref={ref}
-      className='fixed bottom-1/2 left-1/2 translate-y-1/2 -translate-x-1/2 px-6 py-4 flex flex-col w-fit max-w-[95vw] h-fit z-[60] clr-app border shadow-md mb-[5rem]'
+      className='fixed bottom-1/2 left-1/2 translate-y-1/2 -translate-x-1/2 px-6 py-4 flex flex-col justify-start w-fit max-w-[calc(100vw-2rem)] h-fit z-modal clr-app border shadow-md'
     >
       { title && <h1 className='mb-2 text-xl'>{title}</h1> }
-      <div className='max-h-[calc(95vh-15rem)]'>
+      <div className='max-h-[calc(100vh-8rem)]'>
         {children}
       </div>
-      <div className='flex justify-center w-full gap-4 pt-4 mt-2 border-t-2'>
+      <div className='flex justify-center w-full gap-4 pt-4 mt-2 border-t-2 z-modal-top'>
         {!readonly && 
         <Button
           text={submitText}
diff --git a/rsconcept/frontend/src/components/Footer.tsx b/rsconcept/frontend/src/components/Footer.tsx
index 5ccc65e4..c3113495 100644
--- a/rsconcept/frontend/src/components/Footer.tsx
+++ b/rsconcept/frontend/src/components/Footer.tsx
@@ -4,7 +4,7 @@ import { urls } from '../utils/constants';
 
 function Footer() {
   return (
-    <footer className='z-50 px-4 py-2 text-sm select-none whitespace-nowrap clr-footer'>
+    <footer className='px-4 py-2 text-sm select-none z-navigation whitespace-nowrap clr-footer'>
       <div className='justify-center w-full mx-auto'>
         <div className='mb-2 text-center'>
           <Link className='mx-2 hover:underline' to='/library' tabIndex={-1}>Библиотека</Link> 
diff --git a/rsconcept/frontend/src/components/Navigation/Navigation.tsx b/rsconcept/frontend/src/components/Navigation/Navigation.tsx
index 7508c4ae..7a3cc4b5 100644
--- a/rsconcept/frontend/src/components/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/components/Navigation/Navigation.tsx
@@ -14,11 +14,11 @@ function Navigation () {
   const navigateCreateNew = () => navigateTo('/rsform-create');
 
   return (
-    <nav className='sticky top-0 left-0 right-0 z-50 select-none h-fit'>
+    <nav className='sticky top-0 left-0 right-0 select-none z-navigation h-fit'>
       {!noNavigation &&
       <button
         title='Скрыть навигацию'
-        className='absolute top-0 right-0 z-[60] w-[1.2rem] h-[3rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
+        className='absolute top-0 right-0 z-navigation w-[1.2rem] h-[3rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
         onClick={toggleNoNavigation}
         tabIndex={-1}
       >
@@ -27,7 +27,7 @@ function Navigation () {
       {noNavigation &&
       <button
         title='Показать навигацию'
-        className='absolute top-0 right-0 z-[60] px-1 h-[1.6rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
+        className='absolute top-0 right-0 z-navigation px-1 h-[1.6rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
         onClick={toggleNoNavigation}
         tabIndex={-1}
       >
diff --git a/rsconcept/frontend/src/components/RSInput/tooltip.ts b/rsconcept/frontend/src/components/RSInput/tooltip.ts
index 86007319..df1b9bc2 100644
--- a/rsconcept/frontend/src/components/RSInput/tooltip.ts
+++ b/rsconcept/frontend/src/components/RSInput/tooltip.ts
@@ -6,7 +6,7 @@ import { getCstTypificationLabel } from '../../utils/staticUI';
 
 function createTooltipFor(cst: IConstituenta) {
   const dom = document.createElement('div');
-  dom.className = 'overflow-y-auto border shadow-md max-h-[25rem] max-w-[25rem] min-w-[10rem] w-fit z-20 text-sm px-2 py-2';
+  dom.className = 'overflow-y-auto border shadow-md max-h-[25rem] max-w-[25rem] min-w-[10rem] w-fit z-tooltip text-sm px-2 py-2';
   const alias = document.createElement('p');
   alias.innerHTML = `<b>${cst.alias}:</b> ${getCstTypificationLabel(cst)}`;
   dom.appendChild(alias);
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index e5f15000..ffed6e75 100644
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@@ -57,6 +57,32 @@
   --toastify-color-dark: var(--cd-bg-60);
 }
 
+/* Depth layers */
+.z-bottom {
+  z-index: 0;
+}
+.z-pop {
+  z-index: 10;
+}
+:is(.z-sticky,
+  .sticky
+) {
+  z-index: 20;
+}
+.z-tooltip {
+  z-index: 30;
+}
+.z-navigation {
+  z-index: 50;
+}
+.z-modal {
+  z-index: 60;
+}
+.z-modal-top {
+  z-index: 70;
+}
+
+
 :root {
   color: var(--cl-fg-100);
   border-color: var(--cl-bg-40);
@@ -142,6 +168,7 @@
 
   :is(.clr-primary,
     .clr-btn-primary:hover,
+    .clr-btn-primary:focus,
     .clr-checkbox:checked
   ) {
     color: var(--cl-prim-fg-100);
diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
index 375dff3d..aaed0014 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
@@ -70,7 +70,7 @@ function SearchPanel({ total, filtered, setFilter }: SearchPanelProps) {
   }, [strategy, navigateTo]);
 
   return (
-    <div className='sticky top-0 left-0 right-0 z-30 flex items-center justify-start w-full border-b clr-input'>
+    <div className='sticky top-0 left-0 right-0 flex items-center justify-start w-full border-b clr-input'>
       <div className='px-2 py-1 select-none whitespace-nowrap min-w-[10rem]'>
         Фильтр
         <span className='ml-2'>
diff --git a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
index 49c2bbe0..215706e2 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
@@ -86,7 +86,7 @@ function ViewLibrary({ items, cleanQuery }: ViewLibraryProps) {
   return (
     <div>
       <div className='relative w-full'>
-      <div className='absolute top-0 left-0 z-20 flex gap-1 mt-1 ml-5'>
+      <div className='absolute top-0 left-0 flex gap-1 mt-1 ml-5 z-pop'>
         <div id='library-help' className='py-2'>
           <HelpIcon color='text-primary' size={6} />
         </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgShowAST.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgShowAST.tsx
index 48dc4d39..ce736130 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/DlgShowAST.tsx
@@ -73,7 +73,7 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
           }
         </div>
         <div className='flex-wrap w-full h-full overflow-auto'>
-        <div className='relative w-[1040px] h-[600px] 2xl:w-[1680px] 2xl:h-[600px] max-h-full max-w-full'>
+        <div className='relative' style={{width: 'calc(100vw - 6rem - 2px)', height: 'calc(100vh - 14rem - 2px)'}}>
           <GraphCanvas
             nodes={nodes}
             edges={edges}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
index b789d76c..387a6397 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
@@ -259,7 +259,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
   return (
     <div className='w-full'>
       <div
-        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'
+        className='sticky top-0 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'>
           Выбраны
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index 823da6b3..8227a929 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -360,7 +360,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
       <div className='relative'>
         <InfoConstituenta
           data={hoverCst}
-          className='absolute top-[2.2rem] left-[2.6rem] z-50 w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3' 
+          className='absolute top-[2.2rem] left-[2.6rem] z-tooltip w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3' 
         />
       </div>}
       
@@ -465,7 +465,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
       className='relative'
       style={{width: canvasWidth, height: canvasHeight, borderBottomWidth: noNavigation ? '1px': ''}}
     >
-      <div className='relative top-0 right-0 z-10 flex mt-1 ml-2 flex-start'>
+      <div className='relative top-0 right-0 flex mt-1 ml-2 z-pop flex-start'>
         <div className='px-1 py-1' id='items-graph-help' >
           <HelpIcon color='text-primary' size={5} />
         </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
index a3987ec3..5227c9ba 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
@@ -154,7 +154,8 @@ function RSTabsMenu({
           <DropdownCheckbox
             value={isForceAdmin}
             onChange={toggleForceAdmin}
-            label='режим администратора'
+            label='Я — администратор!'
+            tooltip='Режим редактирования для администраторов'
           />}
         </Dropdown>}
       </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
index 262dba5d..9f587395 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
@@ -165,7 +165,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
   }, [noNavigation, baseHeight]);
 
   return (<>
-    <div className='sticky top-0 left-0 right-0 z-10 flex items-start justify-between w-full gap-1 px-2 py-1 border-b rounded clr-input'>
+    <div className='sticky top-0 left-0 right-0 flex items-start justify-between w-full gap-1 px-2 py-1 border-b rounded clr-input'>
       <MatchModePicker
         value={filterMatch}
         onChange={setFilterMatch}
diff --git a/rsconcept/frontend/src/utils/staticUI.ts b/rsconcept/frontend/src/utils/staticUI.ts
index b4fa7102..15e8536e 100644
--- a/rsconcept/frontend/src/utils/staticUI.ts
+++ b/rsconcept/frontend/src/utils/staticUI.ts
@@ -361,7 +361,7 @@ export const mapTopicInfo: Map<HelpTopic, IDescriptor> = new Map([
     tooltip: 'Справка по языку родов структур и экспликации'
   }],
   [ HelpTopic.LIBRARY, {
-    text: 'Библиотека:',
+    text: 'Библиотека',
     tooltip: 'Интерфейс работы с библиотекой схем'
   }],
   [ HelpTopic.RSFORM, {