Philipp Kief 17c71b886e
Refactor UI components using React and TSX and providing new features (#113)
* Use react for settings popup

* Update options

* Update styling

* Remove unused type conversions

* Remove unused controls function

* Update project structure

* Delete unused code

* Legacy ui components

* Refactor files

* Update styling

* Update UI components

* Remove unused code

* Remove unused code

* Improve theming

* Update icon color

* Improve custom domains

* Update extension

* Add delete functionalty for custom domains

* Improve icon sizes on screen

* Implement icon bindings dialog

* Minor improvements

* Add tooltips

* Support lookup of language ids in manifest

* Implement watch mode for development purposes

* Improve language id binding customization

* Adjust node script

* Improve reset functionality

* Adjust node script

* Minor improvements

* Update binding controls with icons

* Organize imports

* Update error message

* Adjust icon binding dialog

* Add Info Popover

* Update autocomplete behavior

* Fix image issue

* Minor improvements

* Clean up code

* Make appbar sticky

* Improve project structure

* Update info text

* Adjust styling

* Update styling

* Improve adding new bindings

* Adjust tsconfig

* Support switch of themes for the icon preview

* Update watch script

* Improve error handling

* Move build languages step before build src
2024-10-23 12:03:52 +02:00

43 lines
1.1 KiB
TypeScript

import { Domain } from '@/models';
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Typography,
} from '@mui/material';
import { FileIconBindings } from './file-icon-bindings';
import { FolderIconBindings } from './folder-icon-bindings';
import { LanguageIconBindings } from './language-icon-bindings';
type IconSettingsDialogProps = {
show: boolean;
domain: Domain;
onClose: () => void;
};
export function IconSettingsDialog({
show,
domain,
onClose,
}: IconSettingsDialogProps) {
return (
<Dialog open={show} onClose={onClose} fullWidth={true} maxWidth='lg'>
<DialogTitle>Configure Icon Bindings</DialogTitle>
<DialogContent>
<Typography component='div' style={{ paddingBottom: '1.5rem' }}>
Domain: {domain.name}
</Typography>
<FileIconBindings domain={domain} />
<FolderIconBindings domain={domain} />
<LanguageIconBindings domain={domain} />
</DialogContent>
<DialogActions>
<Button onClick={onClose}>Close</Button>
</DialogActions>
</Dialog>
);
}