52 lines
2.1 KiB
JavaScript
52 lines
2.1 KiB
JavaScript
import React from "react";
|
|
import {useTheme} from "../../hooks/themeHook";
|
|
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
|
import {faCloudMoon, faPalette} from "@fortawesome/free-solid-svg-icons";
|
|
import {colorEnumToBgClass} from "../../util/colors";
|
|
import {Modal} from "react-bootstrap-v5";
|
|
import {useTranslation} from "react-i18next";
|
|
|
|
const ColorSelectorButton = ({color, setColor, disabled}) =>
|
|
<button className={"btn color-chooser " + colorEnumToBgClass(color) + (disabled ? " disabled" : '')}
|
|
id={"choose-" + color}
|
|
disabled={disabled}
|
|
onClick={() => setColor(color)}
|
|
>
|
|
<Fa icon={faPalette}/>
|
|
</button>
|
|
|
|
const ColorSelectorModal = () => {
|
|
const {t} = useTranslation();
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Modal id="colorChooserModal"
|
|
aria-labelledby="colorChooserModalLabel"
|
|
show={theme.colorChooserOpen}
|
|
onHide={theme.toggleColorChooser}>
|
|
<Modal.Header className="bg-white">
|
|
<Modal.Title id="colorChooserModalLabel">
|
|
<Fa icon={faPalette}/> {t('html.label.themeSelect')}
|
|
</Modal.Title>
|
|
<button aria-label="Close" className="btn-close" onClick={theme.toggleColorChooser}/>
|
|
</Modal.Header>
|
|
<Modal.Body style={{padding: "0.5rem 0 0.5rem 0.5rem"}}>
|
|
{theme.themeColors.map(color =>
|
|
<ColorSelectorButton
|
|
key={color.name}
|
|
color={color.name}
|
|
setColor={theme.setColor}
|
|
disabled={theme.nightModeEnabled}
|
|
/>)}
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<button className="btn" id="night-mode-toggle" type="button" onClick={theme.toggleNightMode}>
|
|
<Fa icon={faCloudMoon}/> {t('html.button.nightMode')}
|
|
</button>
|
|
<button className="btn bg-theme" type="button" onClick={theme.toggleColorChooser}>OK</button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default ColorSelectorModal; |