mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 13:00:39 +03:00
Refactor modal window and z-order
This commit is contained in:
IRBorisov
parent
b53fe27b1e
commit
120cfdcf03
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
Выбраны
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -154,7 +154,8 @@ function RSTabsMenu({
|
|||
<DropdownCheckbox
|
||||
value={isForceAdmin}
|
||||
onChange={toggleForceAdmin}
|
||||
label='режим администратора'
|
||||
label='Я — администратор!'
|
||||
tooltip='Режим редактирования для администраторов'
|
||||
/>}
|
||||
</Dropdown>}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -361,7 +361,7 @@ export const mapTopicInfo: Map<HelpTopic, IDescriptor> = new Map([
|
|||
tooltip: 'Справка по языку родов структур и экспликации'
|
||||
}],
|
||||
[ HelpTopic.LIBRARY, {
|
||||
text: 'Библиотека:',
|
||||
text: 'Библиотека',
|
||||
tooltip: 'Интерфейс работы с библиотекой схем'
|
||||
}],
|
||||
[ HelpTopic.RSFORM, {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user