Refactor modal window and z-order

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}

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>

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}

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> 

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}
       >

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);

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);

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'>

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>

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}

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'>
           Выбраны

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>

rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx

@@ -154,7 +154,8 @@ function RSTabsMenu({
           <DropdownCheckbox
             value={isForceAdmin}
             onChange={toggleForceAdmin}
-            label='режим администратора'
+            label='Я — администратор!'
+            tooltip='Режим редактирования для администраторов'
           />}
         </Dropdown>}
       </div>

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}

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, {