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

Web:Client:Add loader for Appearance.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-08-19 14:38:14 +03:00
parent 9ac1206eeb
commit b6fe70e23e
4 changed files with 120 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/client/src/pages/PortalSettings/categories/common/appearance.js
View File

@ -4,9 +4,7 @@ import { withRouter } from "react-router";
import toastr from "@docspace/components/toast/toastr";
import { inject, observer } from "mobx-react";
import Button from "@docspace/components/button";
import withLoading from "SRC_DIR/HOCs/withLoading";
import styled, { css } from "styled-components";
import TabContainer from "@docspace/components/tabs-container";
import Preview from "./settingsAppearance/preview";
@ -18,11 +16,11 @@ import DropDownContainer from "@docspace/components/drop-down";
import HexColorPickerComponent from "./sub-components/hexColorPicker";
import { isMobileOnly } from "react-device-detect";
import Loaders from "@docspace/common/components/Loaders";
import Loader from "./sub-components/loaderAppearance";
import { StyledComponent } from "./settingsAppearance/StyledApperance.js";
import BreakpointWarning from "../../../../BreakpointWarning/index";
import BreakpointWarning from "../../../../components/BreakpointWarning/index";
const Appearance = (props) => {
const {
@ -31,11 +29,11 @@ const Appearance = (props) => {
sendAppearanceTheme,
getAppearanceTheme,
currentColorScheme,
tReady,
t,
} = props;
// const [selectedColor, setSelectedColor] = useState(selectedThemeId);
const [previewTheme, setPreviewTheme] = useState("Light theme");
const [showColorSchemeDialog, setShowColorSchemeDialog] = useState(false);
@ -81,8 +79,6 @@ const Appearance = (props) => {
);
const [selectThemeId, setSelectThemeId] = useState(selectedThemeId);
const [changeTheme, setChangeTheme] = useState([]);
const checkImg = (
<img className="check-img" src="/static/images/check.white.svg" />
);
@ -114,7 +110,7 @@ const Appearance = (props) => {
),
},
],
[selectAccentColor, previewTheme, selectThemeId]
[selectAccentColor, previewTheme, selectThemeId, tReady]
);
useEffect(() => {
@ -157,19 +153,6 @@ const Appearance = (props) => {
const onColorSelection = (item) => {
setSelectAccentColor(item.accentColor);
setSelectThemeId(item.id);
//TODO: find id and give item
//TODO: if changeTheme array = 0, then appearanceTheme, else changeTheme array
// const theme = changeTheme?.find((item) => item.id === colorNumber);
// If theme has already been edited before
// if (theme) {
// theme.isSelected = true;
// setSelectThemeId(theme);
// } else {
// If theme not has already been edited before
// const theme = appearanceTheme.find((item) => item.id === colorNumber);
// theme.isSelected = true;
// setSelectThemeId(theme);
// }
};
const onShowCheck = (colorNumber) => {
@ -194,8 +177,6 @@ const Appearance = (props) => {
const onClickEdit = () => {
appearanceTheme.map((item) => {
if (item.id === selectThemeId) {
// TODO: give store Accent color and Buttons main to id
setCurrentColorAccent(item.accentColor);
setCurrentColorButtons(item.buttonsMain);
}
@ -205,7 +186,6 @@ const Appearance = (props) => {
setHeaderColorSchemeDialog("Edit color scheme");
//TODO: if position <=7 then default theme and show button RestoreToDefault
setShowRestoreToDefaultButtonDialog(true);
setShowColorSchemeDialog(true);
@ -276,19 +256,12 @@ const Appearance = (props) => {
}, [appliedColorButtons]);
const onSaveColorSchemeDialog = () => {
// selectTheme.theme.accentColor = currentColorAccent;
// selectTheme.theme.buttonsMain = currentColorButtons;
const theme = {
id: selectTheme.id,
accentColor: currentColorAccent,
buttonsMain: currentColorButtons,
textColor: "#FFFFFF",
};
//setChangeTheme([...changeTheme, theme]);
// onCloseColorSchemeDialog();
};
const nodeHexColorPickerButtons = viewMobile ? (
@ -373,7 +346,12 @@ const Appearance = (props) => {
);
return viewMobile ? (
<BreakpointWarning content={t("Settings:TheAppearanceSettings")} />
<BreakpointWarning
isLoading={!tReady}
content={t("Settings:TheAppearanceSettings")}
/>
) : !tReady ? (
<Loader />
) : (
<StyledComponent>
<div className="header">{t("Common:Color")}</div>

3
packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
View File

@ -1,7 +1,6 @@
import React, { useState, useCallback, useEffect } from "react";
import React from "react";
import ModalDialog from "@docspace/components/modal-dialog";
import styled from "styled-components";
import { inject, observer } from "mobx-react";
import Button from "@docspace/components/button";
const StyledComponent = styled(ModalDialog)`

5
packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js
View File

@ -14,7 +14,6 @@ const StyledComponent = styled.div`
.hex-color-picker .react-colorful {
width: auto;
height: 239px;
padding-bottom: 16px;
}
@ -88,10 +87,6 @@ const StyledComponent = styled.div`
}
`}
}
//TODO:mobile horizontal orientation
@media (min-width: 428px) {
}
`;
const HexColorPickerComponent = (props) => {

108
packages/client/src/pages/PortalSettings/categories/common/sub-components/loaderAppearance.js Normal file
View File

@ -0,0 +1,108 @@
import React from "react";
import styled from "styled-components";
import Loaders from "@docspace/common/components/Loaders";
const StyledLoader = styled.div`
width: 100%;
.block {
display: block;
}
.padding-bottom {
padding-bottom: 16px;
}
.flex {
display: flex;
}
.padding-right {
padding-right: 12px;
}
.preview-title {
padding-bottom: 8px;
}
.preview {
width: 100%;
max-width: 575px;
padding-top: 12px;
padding-bottom: 32px;
}
`;
const Loader = () => {
return (
<StyledLoader>
<Loaders.Rectangle
height="24px"
width="93px"
className="block padding-bottom"
/>
<Loaders.Rectangle
height="16px"
width="118px"
className="block padding-bottom"
/>
<div className="flex padding-bottom">
<Loaders.Rectangle
height="46px"
width="46px"
className="padding-right"
/>
<Loaders.Rectangle
height="46px"
width="46px"
className="padding-right"
/>
<Loaders.Rectangle
height="46px"
width="46px"
className="padding-right"
/>
<Loaders.Rectangle
height="46px"
width="46px"
className="padding-right"
/>
<Loaders.Rectangle
height="46px"
width="46px"
className="padding-right"
/>
<Loaders.Rectangle
height="46px"
width="46px"
className="padding-right"
/>
<Loaders.Rectangle
height="46px"
width="46px"
className="padding-right"
/>
</div>
<Loaders.Rectangle
height="16px"
width="118px"
className="block padding-bottom"
/>
<Loaders.Rectangle
height="46px"
width="46px"
className="block padding-bottom"
/>
<Loaders.Rectangle
height="24px"
width="93px"
className="block preview-title"
/>
<Loaders.Rectangle height="32px" width="211px" className="block" />
<Loaders.Rectangle height="325px" className="block preview" />
<Loaders.Rectangle height="32px" width="447px" className="block" />
</StyledLoader>
);
};
export default Loader;