diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/appearance.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/appearance.js
index 2f742621fd..1ec9e45a76 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/appearance.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/appearance.js
@@ -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 = ;
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 (
@@ -140,7 +163,7 @@ const Appearance = (props) => {
{onShowCheck(7)}
-
@@ -149,6 +172,8 @@ const Appearance = (props) => {
Preview
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js
index 493d031f46..df179449c1 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js
@@ -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 (
-
- Edit color scheme
+
+ {header}
{openHexColorPicker && (