mirror/agregarr
1
0
Fork 0
mirror of https://github.com/agregarr/agregarr.git synced 2026-02-07 02:09:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(overlays): fixes focus issue in condition editor

Browse Source 
replace modal with Dialog, fix nested structure

fix #375
This commit is contained in:
Tom Wheeler
2026-01-19 03:01:27 +13:00
parent 92db73514e
commit c093e60b67
2 changed files with 101 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/OverlayEditor/ConditionEditorModal.tsx
View File

@@ -1,4 +1,4 @@
import Modal from '@app/components/Common/Modal';
import Button from '@app/components/Common/Button';
import type { DragEndEvent } from '@dnd-kit/core';
import {
closestCenter,
@@ -16,6 +16,7 @@ import {
verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Dialog } from '@headlessui/react';
import { Bars3Icon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
import type {
ApplicationCondition,
@@ -712,25 +713,45 @@ export const ConditionEditorModal: React.FC<ConditionEditorModalProps> = ({
};
return (
<Modal
title={intl.formatMessage(messages.title)}
onCancel={handleCancel}
onOk={handleSave}
okText={intl.formatMessage(messages.save)}
cancelText={intl.formatMessage(messages.cancel)}
backgroundClickable={false}
customMaxWidth="sm:max-w-4xl"
>
<div className="space-y-4">
<p className="text-sm text-stone-400">
{intl.formatMessage(messages.description)}
</p>
<Dialog open={isOpen} onClose={handleCancel} className="relative z-[60]">
{/* Backdrop */}
<div className="fixed inset-0 bg-black/75" aria-hidden="true" />
<div className="max-h-[600px] overflow-y-auto rounded border border-stone-700 bg-stone-900 p-4">
<ConditionBuilder condition={condition} onChange={setCondition} />
</div>
{/* Full-screen container for centering */}
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="w-full max-w-4xl rounded-lg bg-stone-800 p-4 shadow-xl ring-1 ring-gray-700">
{/* Header */}
<Dialog.Title className="text-agregarr mb-4 text-2xl font-bold">
{intl.formatMessage(messages.title)}
</Dialog.Title>
{/* Content */}
<div className="space-y-4">
<p className="text-sm text-stone-400">
{intl.formatMessage(messages.description)}
</p>
<div className="max-h-[600px] overflow-y-auto rounded border border-stone-700 bg-stone-900 p-4">
<ConditionBuilder condition={condition} onChange={setCondition} />
</div>
</div>
{/* Footer */}
<div className="mt-5 flex flex-row-reverse sm:mt-4">
<Button buttonType="primary" onClick={handleSave}>
{intl.formatMessage(messages.save)}
</Button>
<Button
buttonType="default"
onClick={handleCancel}
className="mr-3"
>
{intl.formatMessage(messages.cancel)}
</Button>
</div>
</Dialog.Panel>
</div>
</Modal>
</Dialog>
);
};

122
src/components/OverlayEditor/OverlayEditorModal.tsx
View File

@@ -529,68 +529,70 @@ export const OverlayEditorModal: React.FC<OverlayEditorModalProps> = ({
</Transition.Child>
</div>
</div>
{/* Nested modals - INSIDE Dialog for StackProvider/FocusTrap access */}
{isPreviewSelectorOpen && (
<Modal
title={intl.formatMessage(messages.selectOverlaysForPreview)}
onCancel={() => setIsPreviewSelectorOpen(false)}
onOk={() => setIsPreviewSelectorOpen(false)}
okText="Done"
loading={false}
backgroundClickable={false}
>
<div className="max-h-96 overflow-y-auto">
{availableTemplates.length === 0 ? (
<p className="text-center text-stone-400">
{intl.formatMessage(messages.noOtherOverlays)}
</p>
) : (
<div className="space-y-2">
{availableTemplates.map((template) => (
<label
key={template.id}
className="flex cursor-pointer items-center space-x-3 rounded-md p-2 hover:bg-stone-700"
>
<input
type="checkbox"
checked={selectedPreviewIds.includes(template.id)}
onChange={(e) => {
if (e.target.checked) {
setSelectedPreviewIds([
...selectedPreviewIds,
template.id,
]);
} else {
setSelectedPreviewIds(
selectedPreviewIds.filter(
(id) => id !== template.id
)
);
}
}}
className="rounded border-stone-600 bg-stone-700 text-orange-600 focus:ring-orange-500"
/>
<span className="text-sm text-white">
{template.name}
</span>
</label>
))}
</div>
)}
</div>
</Modal>
)}
{/* Condition Editor Modal */}
{isConditionEditorOpen && (
<ConditionEditorModal
isOpen={isConditionEditorOpen}
onClose={() => setIsConditionEditorOpen(false)}
initialCondition={condition}
onSave={setCondition}
/>
)}
</Dialog>
</Transition>
{/* Preview Overlay Selection Modal - outside Transition to avoid Fragment prop issues */}
{isPreviewSelectorOpen && (
<Modal
title={intl.formatMessage(messages.selectOverlaysForPreview)}
onCancel={() => setIsPreviewSelectorOpen(false)}
onOk={() => setIsPreviewSelectorOpen(false)}
okText="Done"
loading={false}
backgroundClickable={false}
>
<div className="max-h-96 overflow-y-auto">
{availableTemplates.length === 0 ? (
<p className="text-center text-stone-400">
{intl.formatMessage(messages.noOtherOverlays)}
</p>
) : (
<div className="space-y-2">
{availableTemplates.map((template) => (
<label
key={template.id}
className="flex cursor-pointer items-center space-x-3 rounded-md p-2 hover:bg-stone-700"
>
<input
type="checkbox"
checked={selectedPreviewIds.includes(template.id)}
onChange={(e) => {
if (e.target.checked) {
setSelectedPreviewIds([
...selectedPreviewIds,
template.id,
]);
} else {
setSelectedPreviewIds(
selectedPreviewIds.filter(
(id) => id !== template.id
)
);
}
}}
className="rounded border-stone-600 bg-stone-700 text-orange-600 focus:ring-orange-500"
/>
<span className="text-sm text-white">{template.name}</span>
</label>
))}
</div>
)}
</div>
</Modal>
)}
{/* Condition Editor Modal */}
{isConditionEditorOpen && (
<ConditionEditorModal
isOpen={isConditionEditorOpen}
onClose={() => setIsConditionEditorOpen(false)}
initialCondition={condition}
onSave={setCondition}
/>
)}
</>
);
};