Web:Studio:Сolor palette stylization.
This commit is contained in:
parent
5bc309ed11
commit
a478d7760b
@ -3,7 +3,8 @@ import ModalDialog from "@appserver/components/modal-dialog";
|
||||
import styled from "styled-components";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import Button from "@appserver/components/button";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { HexColorPicker, HexColorInput } from "react-colorful";
|
||||
import InputBlock from "@appserver/components/input-block";
|
||||
|
||||
const StyledComponent = styled(ModalDialog)`
|
||||
.modal-dialog-aside-footer {
|
||||
@ -60,33 +61,42 @@ const StyledComponent = styled(ModalDialog)`
|
||||
box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
|
||||
}
|
||||
|
||||
.react-colorful {
|
||||
.hex-color-picker .react-colorful {
|
||||
width: auto;
|
||||
height: 239px;
|
||||
height: 195px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.react-colorful__pointer {
|
||||
.react-colorful__saturation {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.hex-color-picker .react-colorful__saturation-pointer {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.react-colorful__hue-pointer {
|
||||
.hex-color-picker .react-colorful__hue {
|
||||
border-radius: 6px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.hex-color-picker .react-colorful__hue-pointer {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
|
||||
border: 6px solid #fff;
|
||||
}
|
||||
|
||||
.react-colorful__last-control {
|
||||
border-radius: 6px;
|
||||
height: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.hex-value {
|
||||
outline: none;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #d0d5da;
|
||||
border-radius: 3px;
|
||||
margin: 16px 0;
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hex-button {
|
||||
@ -110,7 +120,7 @@ const ColorSchemeDialog = (props) => {
|
||||
t,
|
||||
} = props;
|
||||
|
||||
const [color, setColor] = useState("#b32aa9");
|
||||
const [color, setColor] = useState("#FF9933");
|
||||
const [openHexColorPicker, setOpenHexColorPicker] = useState(false);
|
||||
|
||||
const onClick = () => {
|
||||
@ -125,36 +135,46 @@ const ColorSchemeDialog = (props) => {
|
||||
>
|
||||
<ModalDialog.Header>{header}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<div className="flex">
|
||||
<div className="text">Accent</div>
|
||||
<div className="color-button accent" onClick={onClick}></div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="text">Buttons</div>
|
||||
<div className="color-button buttons" onClick={onClick}></div>
|
||||
</div>
|
||||
{openHexColorPicker && (
|
||||
<div className="hex-color-picker">
|
||||
<div className="hex-value">{color.toUpperCase()}</div>
|
||||
<HexColorPicker color={color} onChange={setColor} />
|
||||
|
||||
<div className="hex-button">
|
||||
<Button
|
||||
label="Apply"
|
||||
size="small"
|
||||
className="apply-button"
|
||||
primary={true}
|
||||
scale={true}
|
||||
/>
|
||||
<Button
|
||||
label="Cancel"
|
||||
className="button"
|
||||
size="small"
|
||||
scale={true}
|
||||
/>
|
||||
<div>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<div className="text">Accent</div>
|
||||
<div className="color-button accent" onClick={onClick}></div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="text">Buttons</div>
|
||||
<div className="color-button buttons" onClick={onClick}></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{openHexColorPicker && (
|
||||
<div className="hex-color-picker">
|
||||
<HexColorInput
|
||||
className="hex-value"
|
||||
prefixed
|
||||
color={color.toUpperCase()}
|
||||
onChange={setColor}
|
||||
/>
|
||||
<HexColorPicker color={color} onChange={setColor} />
|
||||
|
||||
<div className="hex-button">
|
||||
<Button
|
||||
label="Apply"
|
||||
size="small"
|
||||
className="apply-button"
|
||||
primary={true}
|
||||
scale={true}
|
||||
/>
|
||||
<Button
|
||||
label="Cancel"
|
||||
className="button"
|
||||
size="small"
|
||||
scale={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ModalDialog.Body>
|
||||
|
||||
<ModalDialog.Footer>
|
||||
|
Loading…
Reference in New Issue
Block a user