IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Studio:Сolor palette stylization.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-07-15 10:22:56 +03:00
parent 5bc309ed11
commit a478d7760b
1 changed files with 61 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js
View File

@ -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>