Web:Studio:Add header, selectedAccentColorAndButtonsMain props to ColorSchemeDialog.
This commit is contained in:
parent
3cb56da496
commit
5bc309ed11
@ -60,6 +60,15 @@ const Appearance = (props) => {
|
||||
|
||||
const [showColorSchemeDialog, setShowColorSchemeDialog] = useState(false);
|
||||
|
||||
const [headerColorSchemeDialog, setHeaderColorSchemeDialog] = useState(
|
||||
"Edit color scheme"
|
||||
);
|
||||
|
||||
const [
|
||||
selectedAccentColorAndButtonsMain,
|
||||
setSelectedAccentColorAndButtonsMain,
|
||||
] = useState({});
|
||||
|
||||
const checkImg = <img src="/static/images/check.white.svg" />;
|
||||
|
||||
const array_items = useMemo(
|
||||
@ -102,17 +111,31 @@ const Appearance = (props) => {
|
||||
};
|
||||
|
||||
const onClickEdit = () => {
|
||||
console.log("onClickEdit");
|
||||
// TODO: give store Accent color and Buttons main to id
|
||||
setSelectedAccentColorAndButtonsMain({
|
||||
accentColor: "#F97A0B",
|
||||
buttonsMain: "#FF9933",
|
||||
});
|
||||
|
||||
setHeaderColorSchemeDialog("Edit color scheme");
|
||||
|
||||
setShowColorSchemeDialog(true);
|
||||
};
|
||||
|
||||
// TODO: true?
|
||||
const onCloseEdit = () => {
|
||||
setShowColorSchemeDialog(false);
|
||||
};
|
||||
|
||||
console.log("colorScheme", colorScheme);
|
||||
const onAddTheme = () => {
|
||||
setSelectedAccentColorAndButtonsMain({
|
||||
addColor:
|
||||
"url(/static/images/plus.theme.svg) 15px 15px no-repeat #D0D5DA",
|
||||
});
|
||||
|
||||
setHeaderColorSchemeDialog("New color scheme");
|
||||
|
||||
setShowColorSchemeDialog(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledComponent>
|
||||
@ -140,7 +163,7 @@ const Appearance = (props) => {
|
||||
<div id="color-scheme_7" className="box" onClick={onColorSelection}>
|
||||
{onShowCheck(7)}
|
||||
</div>
|
||||
<div className="add-theme box">
|
||||
<div className="add-theme box" onClick={onAddTheme}>
|
||||
<img src="/static/images/plus.theme.svg" />
|
||||
</div>
|
||||
</div>
|
||||
@ -149,6 +172,8 @@ const Appearance = (props) => {
|
||||
<ColorSchemeDialog
|
||||
visible={showColorSchemeDialog}
|
||||
onClose={onCloseEdit}
|
||||
header={headerColorSchemeDialog}
|
||||
selectedAccentColorAndButtonsMain={selectedAccentColorAndButtonsMain}
|
||||
/>
|
||||
<div>Preview</div>
|
||||
<TabContainer elements={array_items} onSelect={onChangePreviewTheme} />
|
||||
|
@ -30,7 +30,20 @@ const StyledComponent = styled(ModalDialog)`
|
||||
.color-button {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.accent {
|
||||
background: ${(props) =>
|
||||
props.selectedAccentColorAndButtonsMain.accentColor
|
||||
? props.selectedAccentColorAndButtonsMain.accentColor
|
||||
: props.selectedAccentColorAndButtonsMain.addColor};
|
||||
}
|
||||
|
||||
.buttons {
|
||||
background: ${(props) =>
|
||||
props.selectedAccentColorAndButtonsMain.buttonsMain
|
||||
? props.selectedAccentColorAndButtonsMain.buttonsMain
|
||||
: props.selectedAccentColorAndButtonsMain.addColor};
|
||||
}
|
||||
|
||||
.save-button {
|
||||
@ -89,7 +102,13 @@ const StyledComponent = styled(ModalDialog)`
|
||||
`;
|
||||
|
||||
const ColorSchemeDialog = (props) => {
|
||||
const { visible, onClose, t } = props;
|
||||
const {
|
||||
visible,
|
||||
onClose,
|
||||
header,
|
||||
selectedAccentColorAndButtonsMain,
|
||||
t,
|
||||
} = props;
|
||||
|
||||
const [color, setColor] = useState("#b32aa9");
|
||||
const [openHexColorPicker, setOpenHexColorPicker] = useState(false);
|
||||
@ -99,16 +118,20 @@ const ColorSchemeDialog = (props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledComponent visible={visible} onClose={onClose}>
|
||||
<ModalDialog.Header>Edit color scheme</ModalDialog.Header>
|
||||
<StyledComponent
|
||||
selectedAccentColorAndButtonsMain={selectedAccentColorAndButtonsMain}
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
>
|
||||
<ModalDialog.Header>{header}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<div className="flex">
|
||||
<div className="text">Accent</div>
|
||||
<div className="color-button" onClick={onClick}></div>
|
||||
<div className="color-button accent" onClick={onClick}></div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="text">Buttons</div>
|
||||
<div className="color-button" onClick={onClick}></div>
|
||||
<div className="color-button buttons" onClick={onClick}></div>
|
||||
</div>
|
||||
{openHexColorPicker && (
|
||||
<div className="hex-color-picker">
|
||||
|
Loading…
Reference in New Issue
Block a user