Merge branch 'feature/virtual-rooms-1.2' into feature/oforms-gallery
This commit is contained in:
commit
f04d679df4
@ -1,5 +1,7 @@
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
import RectangleLoader from "../RectangleLoader";
|
||||
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { tablet, mobile } from "@appserver/components/utils/device";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
@ -16,8 +18,16 @@ const StyledContainer = styled.div`
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
max-width: ${(props) => (props.showText ? "240px" : "52px")};
|
||||
width: ${(props) => (props.showText ? "240px" : "52px")};
|
||||
padding: ${(props) => (props.showText ? "0 16px" : "10px 16px")};
|
||||
`}
|
||||
|
||||
@media ${mobile} {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -31,6 +41,13 @@ const StyledRectangleLoader = styled(RectangleLoader)`
|
||||
width: 20px;
|
||||
padding: 0 0 24px;
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 0 0 24px;
|
||||
`}
|
||||
`;
|
||||
|
||||
export { StyledContainer, StyledRectangleLoader };
|
||||
|
@ -72,8 +72,8 @@ const commonStyles = css`
|
||||
`;
|
||||
|
||||
const StyledSectionBody = styled.div`
|
||||
max-width: 100vw !important;
|
||||
${commonStyles}
|
||||
|
||||
${(props) =>
|
||||
props.withScroll &&
|
||||
`
|
||||
@ -90,7 +90,6 @@ const StyledSectionBody = styled.div`
|
||||
`
|
||||
}
|
||||
`}
|
||||
|
||||
.additional-scroll-height {
|
||||
${(props) =>
|
||||
!props.withScroll &&
|
||||
@ -102,9 +101,8 @@ const StyledSectionBody = styled.div`
|
||||
`;
|
||||
|
||||
const StyledDropZoneBody = styled(DragAndDrop)`
|
||||
${commonStyles}
|
||||
|
||||
.drag-and-drop {
|
||||
max-width: 100vw !important;
|
||||
${commonStyles} .drag-and-drop {
|
||||
user-select: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -38,23 +38,19 @@ const StyledSectionContainer = styled.section`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: calc(100vw - 256px);
|
||||
max-width: calc(100vw - 256px);
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
|
||||
@media ${tablet} {
|
||||
width: ${(props) =>
|
||||
props.showText ? "calc(100vw - 240px)" : "calc(100vw - 52px)"};
|
||||
max-width: ${(props) =>
|
||||
props.showText ? "calc(100vw - 240px)" : "calc(100vw - 52px)"};
|
||||
width: 100%;
|
||||
max-width: 100vw !important;
|
||||
padding: 0 0 0 16px;
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
width: ${(props) =>
|
||||
props.showText ? "calc(100vw - 240px)" : "calc(100vw - 52px)"} !important;
|
||||
max-width: ${(props) =>
|
||||
props.showText ? "calc(100vw - 240px)" : "calc(100vw - 52px)"} !important;
|
||||
width: 100% !important;
|
||||
max-width: 100vw !important
|
||||
padding: 0 0 0 16px;
|
||||
${tabletProps};
|
||||
min-width: 100px;
|
||||
@ -83,14 +79,6 @@ const StyledSectionContainer = styled.section`
|
||||
right: 15px;
|
||||
bottom: 83px;
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
!props.isSectionHeaderAvailable &&
|
||||
css`
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
box-sizing: border-box;
|
||||
`}
|
||||
`;
|
||||
|
||||
StyledSectionContainer.defaultProps = { theme: Base };
|
||||
|
@ -52,6 +52,7 @@
|
||||
"Culture_uk": "Ukrainian (Ukraine)",
|
||||
"Culture_vi": "Vietnamese (Vietnam)",
|
||||
"Culture_zh-CN": "Chinese (Simplified, PRC)",
|
||||
"DarkMode": "Dark mode",
|
||||
"Duplicate": "Create a copy",
|
||||
"Delete": "Delete",
|
||||
"Department": "Department",
|
||||
|
@ -52,6 +52,7 @@
|
||||
"Culture_uk": "Украинский (Украина)",
|
||||
"Culture_vi": "Вьетнамский (Вьетнам)",
|
||||
"Culture_zh-CN": "Китайский (упрощенный, КНР)",
|
||||
"DarkMode": "Тёмная тема",
|
||||
"Duplicate": "Создать копию",
|
||||
"Delete": "Удалить",
|
||||
"Department": "Отдел",
|
||||
|
@ -8,10 +8,12 @@ import { Base } from "@appserver/components/themes";
|
||||
|
||||
const StyledIconBox = styled.div`
|
||||
@media ${mobile} {
|
||||
display: ${(props) => (props.isProduct ? "flex !important" : "none")};
|
||||
display: flex;
|
||||
}
|
||||
display: ${(props) => (props.isProduct && isMobileOnly ? "flex" : "none")};
|
||||
display: ${isMobileOnly ? "flex" : "none"};
|
||||
align-items: center;
|
||||
|
||||
padding-left: 16px;
|
||||
`;
|
||||
|
||||
const StyledMenuIcon = styled(MenuIcon)`
|
||||
@ -31,12 +33,7 @@ const HeaderCatalogBurger = (props) => {
|
||||
const { isProduct, onClick, ...rest } = props;
|
||||
|
||||
return (
|
||||
<StyledIconBox
|
||||
isProduct={isProduct}
|
||||
onClick={onClick}
|
||||
name="catalog-burger"
|
||||
{...rest}
|
||||
>
|
||||
<StyledIconBox onClick={onClick} name="catalog-burger" {...rest}>
|
||||
<StyledMenuIcon />
|
||||
</StyledIconBox>
|
||||
);
|
||||
|
@ -1,16 +1,16 @@
|
||||
import React, { useCallback, useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
import NavItem from "./nav-item";
|
||||
import ProfileActions from "./profile-actions";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
import { tablet, mobile } from "@appserver/components/utils/device";
|
||||
import { combineUrl, deleteCookie } from "@appserver/common/utils";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withRouter } from "react-router";
|
||||
import { AppServerConfig } from "@appserver/common/constants";
|
||||
import config from "../../../../package.json";
|
||||
import { isDesktop, isMobile } from "react-device-detect";
|
||||
import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
|
||||
import AboutDialog from "../../pages/About/AboutDialog";
|
||||
import DebugInfoDialog from "../../pages/DebugInfo";
|
||||
import HeaderCatalogBurger from "./header-catalog-burger";
|
||||
@ -57,6 +57,20 @@ const StyledNav = styled.nav`
|
||||
.icon-profile-menu {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
padding: 0 16px 0 16px !important;
|
||||
`}
|
||||
|
||||
@media ${mobile} {
|
||||
padding: 0 0 0 16px;
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
padding: 0 0 0 16px !important;
|
||||
`}
|
||||
`;
|
||||
const HeaderNav = ({
|
||||
history,
|
||||
@ -71,10 +85,9 @@ const HeaderNav = ({
|
||||
buildVersionInfo,
|
||||
debugInfo,
|
||||
settingsModule,
|
||||
currentProductId,
|
||||
toggleArticleOpen,
|
||||
|
||||
changeTheme,
|
||||
isDarkMode,
|
||||
}) => {
|
||||
const { t } = useTranslation(["NavMenu", "Common", "About"]);
|
||||
const [visibleAboutDialog, setVisibleAboutDialog] = useState(false);
|
||||
@ -147,8 +160,11 @@ const HeaderNav = ({
|
||||
}),
|
||||
},
|
||||
{
|
||||
key: "ChangeTheme",
|
||||
...(!isPersonal && { label: "Change theme", onClick: changeTheme }),
|
||||
key: "DarkMode",
|
||||
label: t("Common:DarkMode"),
|
||||
onClick: changeTheme,
|
||||
withToggle: true,
|
||||
isChecked: isDarkMode,
|
||||
},
|
||||
{
|
||||
key: "AboutBtn",
|
||||
@ -172,7 +188,7 @@ const HeaderNav = ({
|
||||
}
|
||||
|
||||
return actions;
|
||||
}, [onProfileClick, onAboutClick, onLogoutClick]);
|
||||
}, [onProfileClick, onAboutClick, onLogoutClick, isDarkMode, changeTheme]);
|
||||
//console.log("HeaderNav render");
|
||||
return (
|
||||
<StyledNav className="profileMenuIcon hidingHeader">
|
||||
@ -183,12 +199,11 @@ const HeaderNav = ({
|
||||
user={user}
|
||||
userIsUpdate={userIsUpdate}
|
||||
setUserIsUpdate={setUserIsUpdate}
|
||||
isProduct={currentProductId !== "home"}
|
||||
/>
|
||||
<HeaderCatalogBurger
|
||||
{/* <HeaderCatalogBurger
|
||||
isProduct={currentProductId !== "home"}
|
||||
onClick={toggleArticleOpen}
|
||||
/>
|
||||
/> */}
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
@ -243,12 +258,15 @@ export default withRouter(
|
||||
toggleArticleOpen,
|
||||
buildVersionInfo,
|
||||
debugInfo,
|
||||
theme,
|
||||
changeTheme,
|
||||
} = settingsStore;
|
||||
const { user, userIsUpdate, setUserIsUpdate } = userStore;
|
||||
const modules = auth.availableModules;
|
||||
const settingsModule = modules.find((module) => module.id === "settings");
|
||||
|
||||
const isDarkMode = !theme.isBase;
|
||||
|
||||
return {
|
||||
isPersonal,
|
||||
user,
|
||||
@ -268,6 +286,7 @@ export default withRouter(
|
||||
debugInfo,
|
||||
settingsModule,
|
||||
changeTheme,
|
||||
isDarkMode,
|
||||
};
|
||||
})(observer(HeaderNav))
|
||||
);
|
||||
|
@ -30,6 +30,7 @@ import {
|
||||
onItemClick,
|
||||
} from "@appserver/studio/src/helpers/utils";
|
||||
import StyledExternalLinkIcon from "@appserver/studio/src/components/StyledExternalLinkIcon";
|
||||
import HeaderCatalogBurger from "./header-catalog-burger";
|
||||
import { Base } from "@appserver/components/themes";
|
||||
|
||||
const { proxyURL } = AppServerConfig;
|
||||
@ -143,6 +144,7 @@ const HeaderComponent = ({
|
||||
isPersonal,
|
||||
isPreparationPortal,
|
||||
theme,
|
||||
toggleArticleOpen,
|
||||
...props
|
||||
}) => {
|
||||
const { t } = useTranslation("Common");
|
||||
@ -224,6 +226,9 @@ const HeaderComponent = ({
|
||||
needNavMenu={needNavMenu}
|
||||
isDesktopView={isDesktopView}
|
||||
>
|
||||
{currentProductId !== "home" && (
|
||||
<HeaderCatalogBurger onClick={toggleArticleOpen} />
|
||||
)}
|
||||
<LinkWithoutRedirect className="header-logo-wrapper" to={defaultPage}>
|
||||
{!isPersonal ? (
|
||||
<img alt="logo" src={props.logoUrl} className="header-logo-icon" />
|
||||
@ -238,7 +243,6 @@ const HeaderComponent = ({
|
||||
/>
|
||||
)}
|
||||
</LinkWithoutRedirect>
|
||||
|
||||
{isNavAvailable && isDesktopView && !isPersonal && (
|
||||
<StyledNavigationIconsWrapper>
|
||||
{mainModules.map((item) => {
|
||||
@ -347,6 +351,7 @@ export default inject(({ auth }) => {
|
||||
currentProductId,
|
||||
personal: isPersonal,
|
||||
theme,
|
||||
toggleArticleOpen,
|
||||
} = settingsStore;
|
||||
const { totalNotifications } = moduleStore;
|
||||
|
||||
@ -364,6 +369,7 @@ export default inject(({ auth }) => {
|
||||
version,
|
||||
isAuthenticated,
|
||||
currentProductId,
|
||||
toggleArticleOpen,
|
||||
currentProductName: (product && product.title) || "",
|
||||
};
|
||||
})(observer(HeaderComponent));
|
||||
|
@ -6,17 +6,25 @@ import DropDownItem from "@appserver/components/drop-down-item";
|
||||
import Link from "@appserver/components/link";
|
||||
import ProfileMenu from "./profile-menu";
|
||||
import api from "@appserver/common/api";
|
||||
import { mobile } from "@appserver/components/utils/device";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
|
||||
import ToggleButton from "@appserver/components/toggle-button";
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@media ${mobile} {
|
||||
display: ${(props) => (props.isProduct ? "none !important" : "block")};
|
||||
}
|
||||
display: ${(props) => (props.isProduct && isMobileOnly ? "none" : "block")};
|
||||
`;
|
||||
|
||||
const StyledDropdownItem = styled(DropDownItem)`
|
||||
justify-content: space-between;
|
||||
|
||||
.toggle-button {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
grid-gap: 0px;
|
||||
}
|
||||
`;
|
||||
|
||||
class ProfileActions extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -119,9 +127,8 @@ class ProfileActions extends React.PureComponent {
|
||||
forwardedRef={this.ref}
|
||||
>
|
||||
<div style={{ paddingTop: "8px" }}>
|
||||
{this.props.userActions.map(
|
||||
(action) =>
|
||||
action && (
|
||||
{this.props.userActions.map((action) =>
|
||||
action && !action?.withToggle ? (
|
||||
<Link
|
||||
noHover={true}
|
||||
key={action.key}
|
||||
@ -130,6 +137,15 @@ class ProfileActions extends React.PureComponent {
|
||||
>
|
||||
<DropDownItem {...action} />
|
||||
</Link>
|
||||
) : (
|
||||
<StyledDropdownItem noHover={true} key={action.key}>
|
||||
{action.label}
|
||||
<ToggleButton
|
||||
className="toggle-button"
|
||||
onChange={action.onClick}
|
||||
isChecked={action.isChecked}
|
||||
/>
|
||||
</StyledDropdownItem>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
@ -1,9 +1,10 @@
|
||||
import styled from "styled-components";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { Base } from "@appserver/components/themes";
|
||||
|
||||
const StyledBodyPreparationPortal = styled.div`
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
// display: flex;
|
||||
width: 100%;
|
||||
max-width: ${(props) => (props.errorMessage ? "560px" : "480px")};
|
||||
padding: 0 24px;
|
||||
@ -11,6 +12,9 @@ const StyledBodyPreparationPortal = styled.div`
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.preparation-portal_progress {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
.preparation-portal_progress-bar {
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
@ -33,8 +37,17 @@ const StyledBodyPreparationPortal = styled.div`
|
||||
right: 50%;
|
||||
${(props) => props.percent > 50 && "color: white"}
|
||||
}
|
||||
}
|
||||
|
||||
.preparation-portal_text {
|
||||
text-align: center;
|
||||
|
||||
color: ${(props) => props.theme.text.disableColor};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledBodyPreparationPortal.defaultProps = { theme: Base };
|
||||
|
||||
const StyledPreparationPortal = styled.div`
|
||||
width: 100%;
|
||||
${isMobile &&
|
||||
@ -52,4 +65,5 @@ const StyledPreparationPortal = styled.div`
|
||||
max-width: 480px;
|
||||
}
|
||||
`;
|
||||
|
||||
export { StyledBodyPreparationPortal, StyledPreparationPortal };
|
||||
|
@ -191,7 +191,6 @@ class PreparationPortal extends React.Component {
|
||||
<StyledPreparationPortal>
|
||||
<ErrorContainer
|
||||
headerText={withoutHeader ? "" : t("PreparationPortalTitle")}
|
||||
bodyText={t("PreparationPortalDescription")}
|
||||
style={style}
|
||||
>
|
||||
<StyledBodyPreparationPortal
|
||||
@ -206,6 +205,7 @@ class PreparationPortal extends React.Component {
|
||||
>{`${errorMessage}`}</Text>
|
||||
) : (
|
||||
<>
|
||||
<div className="preparation-portal_progress">
|
||||
<div className="preparation-portal_progress-bar">
|
||||
<div className="preparation-portal_progress-line"></div>
|
||||
</div>
|
||||
@ -213,6 +213,10 @@ class PreparationPortal extends React.Component {
|
||||
className="preparation-portal_percent"
|
||||
color="#a3a9ae"
|
||||
>{`${percent}%`}</Text>
|
||||
</div>
|
||||
<Text className="preparation-portal_text">
|
||||
{t("PreparationPortalDescription")}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</StyledBodyPreparationPortal>
|
||||
|
@ -70,7 +70,6 @@ const SettingsPageLayout = ({ children }) => {
|
||||
|
||||
const isMobile = !!(isSmallTablet() && mobileView);
|
||||
|
||||
console.log("isMobile", isMobile);
|
||||
return <>{children(isMobile)}</>;
|
||||
};
|
||||
|
||||
|
@ -267,6 +267,7 @@ class WelcomePageSettings extends React.Component {
|
||||
isVertical={true}
|
||||
>
|
||||
<TextInput
|
||||
id="textInputContainerWelcomePage"
|
||||
scale={true}
|
||||
value={greetingTitle}
|
||||
onChange={this.onChangeGreetingTitle}
|
||||
@ -304,6 +305,7 @@ class WelcomePageSettings extends React.Component {
|
||||
<> {settingsBlock}</>
|
||||
)}
|
||||
<SaveCancelButtons
|
||||
id="buttonsWelcomePage"
|
||||
className="save-cancel-buttons"
|
||||
onSaveClick={this.onSaveGreetingSettings}
|
||||
onCancelClick={this.onRestoreGreetingSettings}
|
||||
|
@ -101,6 +101,7 @@ class BackupDesktopView extends React.Component {
|
||||
helpUrlCreatingBackup,
|
||||
downloadingProgress,
|
||||
organizationName,
|
||||
buttonSize,
|
||||
} = this.props;
|
||||
const { isInitialLoading, enableRestore, enableAutoBackup } = this.state;
|
||||
|
||||
@ -150,7 +151,7 @@ class BackupDesktopView extends React.Component {
|
||||
{t("ManualBackupDescription")}
|
||||
</Text>
|
||||
|
||||
<ManualBackup />
|
||||
<ManualBackup buttonSize={buttonSize} />
|
||||
</div>
|
||||
|
||||
{enableAutoBackup && (
|
||||
@ -167,7 +168,7 @@ class BackupDesktopView extends React.Component {
|
||||
{t("AutoBackupDescription")}
|
||||
</Text>
|
||||
|
||||
<AutoBackup />
|
||||
<AutoBackup buttonSize={buttonSize} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -181,7 +182,7 @@ class BackupDesktopView extends React.Component {
|
||||
t("RestoreBackupHelp") + " " + t("RestoreBackupHelpNote")
|
||||
)}
|
||||
</div>
|
||||
<RestoreBackup history={history} />
|
||||
<RestoreBackup history={history} buttonSize={buttonSize} />
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -200,7 +201,11 @@ class BackupDesktopView extends React.Component {
|
||||
|
||||
export default inject(({ auth, backup }) => {
|
||||
const { language, settingsStore } = auth;
|
||||
const { helpUrlCreatingBackup, organizationName } = settingsStore;
|
||||
const {
|
||||
helpUrlCreatingBackup,
|
||||
organizationName,
|
||||
isTabletView,
|
||||
} = settingsStore;
|
||||
const {
|
||||
setThirdPartyStorage,
|
||||
setBackupSchedule,
|
||||
@ -210,6 +215,7 @@ export default inject(({ auth, backup }) => {
|
||||
downloadingProgress,
|
||||
} = backup;
|
||||
|
||||
const buttonSize = isTabletView ? "normal" : "small";
|
||||
return {
|
||||
helpUrlCreatingBackup,
|
||||
language,
|
||||
@ -220,5 +226,6 @@ export default inject(({ auth, backup }) => {
|
||||
clearProgressInterval,
|
||||
downloadingProgress,
|
||||
organizationName,
|
||||
buttonSize,
|
||||
};
|
||||
})(observer(withTranslation(["Settings", "Common"])(BackupDesktopView)));
|
||||
|
@ -132,7 +132,7 @@ class BackupMobileView extends React.Component {
|
||||
: restoreBackup
|
||||
? restoreBackupTitle
|
||||
: "";
|
||||
|
||||
const buttonSize = "normal";
|
||||
const renderSection = (section, sectionTitle, keyHelp) => (
|
||||
<div className="backup-section_wrapper">
|
||||
<div className="backup-section_heading">
|
||||
@ -213,9 +213,11 @@ class BackupMobileView extends React.Component {
|
||||
</StyledSettingsHeader>
|
||||
)}
|
||||
|
||||
{autoBackup && <AutoBackup />}
|
||||
{manualBackup && <ManualBackup />}
|
||||
{restoreBackup && <RestoreBackup history={history} />}
|
||||
{autoBackup && <AutoBackup buttonSize={buttonSize} />}
|
||||
{manualBackup && <ManualBackup buttonSize={buttonSize} />}
|
||||
{restoreBackup && (
|
||||
<RestoreBackup history={history} buttonSize={buttonSize} />
|
||||
)}
|
||||
|
||||
{!isSectionOpen && renderBackupSections()}
|
||||
|
||||
|
@ -51,6 +51,15 @@ const StyledManualBackup = styled.div`
|
||||
.manual-backup_buttons {
|
||||
margin-top: 16px;
|
||||
margin-left: 24px;
|
||||
button:first-child {
|
||||
width: 50%;
|
||||
max-width: 164px;
|
||||
}
|
||||
button:last-child {
|
||||
max-width: 164px;
|
||||
width: calc(50% - 8px);
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.manual-backup_storages-module {
|
||||
@ -339,7 +348,7 @@ const StyledBackup = styled.div`
|
||||
|
||||
const StyledBackupList = styled.div`
|
||||
height: 100%;
|
||||
|
||||
width: calc(100% - 16px);
|
||||
.loader {
|
||||
height: inherit;
|
||||
}
|
||||
@ -407,12 +416,11 @@ const StyledBackupList = styled.div`
|
||||
height: 48px;
|
||||
grid-template-areas: "trash icon-name full-name radiobutton";
|
||||
|
||||
grid-template-columns: 25px 32px calc(100% - 97px) 1fr;
|
||||
grid-template-columns: 25px 32px auto 32px;
|
||||
|
||||
${(props) => props.isChecked && `background: #F3F4F4;`}
|
||||
|
||||
padding-left: 16px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.backup-restore_dialog-scroll-body {
|
||||
|
@ -475,6 +475,7 @@ class AutomaticBackup extends React.PureComponent {
|
||||
isCheckedThirdParty,
|
||||
isCheckedDocuments,
|
||||
commonThirdPartyList,
|
||||
buttonSize,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
@ -598,7 +599,7 @@ class AutomaticBackup extends React.PureComponent {
|
||||
onClick={this.onSaveModuleSettings}
|
||||
primary
|
||||
isDisabled={isLoadingData}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
className="save-button"
|
||||
/>
|
||||
|
||||
@ -606,7 +607,7 @@ class AutomaticBackup extends React.PureComponent {
|
||||
label={t("Common:CancelButton")}
|
||||
isDisabled={isLoadingData}
|
||||
onClick={this.onCancelModuleSettings}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
@ -184,6 +184,7 @@ class ManualBackup extends React.Component {
|
||||
temporaryLink,
|
||||
downloadingProgress,
|
||||
commonThirdPartyList,
|
||||
buttonSize,
|
||||
} = this.props;
|
||||
const {
|
||||
isInitialLoading,
|
||||
@ -208,6 +209,7 @@ class ManualBackup extends React.Component {
|
||||
const commonModulesProps = {
|
||||
isMaxProgress,
|
||||
onMakeCopy: this.onMakeCopy,
|
||||
buttonSize,
|
||||
};
|
||||
|
||||
return isInitialLoading ? (
|
||||
@ -233,14 +235,14 @@ class ManualBackup extends React.Component {
|
||||
onClick={this.onMakeTemporaryBackup}
|
||||
primary
|
||||
isDisabled={!isMaxProgress}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
/>
|
||||
{temporaryLink?.length > 0 && isMaxProgress && (
|
||||
<Button
|
||||
label={t("DownloadCopy")}
|
||||
onClick={this.onClickDownloadBackup}
|
||||
isDisabled={false}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
style={{ marginLeft: "8px" }}
|
||||
/>
|
||||
)}
|
||||
@ -248,7 +250,7 @@ class ManualBackup extends React.Component {
|
||||
<Button
|
||||
label={t("Common:CopyOperation") + "..."}
|
||||
isDisabled={true}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
style={{ marginLeft: "8px" }}
|
||||
/>
|
||||
)}
|
||||
|
@ -62,7 +62,7 @@ class DocumentsModule extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isMaxProgress, t } = this.props;
|
||||
const { isMaxProgress, t, buttonSize } = this.props;
|
||||
const {
|
||||
isPanelVisible,
|
||||
isStartCopy,
|
||||
@ -93,14 +93,13 @@ class DocumentsModule extends React.Component {
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={isModuleDisabled}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
/>
|
||||
{!isMaxProgress && (
|
||||
<Button
|
||||
label={t("Common:CopyOperation") + "..."}
|
||||
isDisabled={true}
|
||||
size="medium"
|
||||
style={{ marginLeft: "8px" }}
|
||||
size={buttonSize}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
@ -89,7 +89,7 @@ class ThirdPartyModule extends React.Component {
|
||||
});
|
||||
};
|
||||
render() {
|
||||
const { isMaxProgress, t, commonThirdPartyList } = this.props;
|
||||
const { isMaxProgress, t, commonThirdPartyList, buttonSize } = this.props;
|
||||
const {
|
||||
isPanelVisible,
|
||||
isLoadingData,
|
||||
@ -123,13 +123,13 @@ class ThirdPartyModule extends React.Component {
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={isModuleDisabled}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
/>
|
||||
{!isMaxProgress && (
|
||||
<Button
|
||||
label={t("Common:CopyOperation") + "..."}
|
||||
isDisabled={true}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
style={{ marginLeft: "8px" }}
|
||||
/>
|
||||
)}
|
||||
|
@ -119,7 +119,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
|
||||
return [firstError, errors];
|
||||
};
|
||||
render() {
|
||||
const { isMaxProgress, thirdPartyStorage } = this.props;
|
||||
const { isMaxProgress, thirdPartyStorage, buttonSize } = this.props;
|
||||
const {
|
||||
availableOptions,
|
||||
selectedStorage,
|
||||
@ -133,6 +133,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
|
||||
selectedStorage: availableStorage[selectedId],
|
||||
isMaxProgress,
|
||||
selectedId,
|
||||
buttonSize,
|
||||
onMakeCopyIntoStorage: this.onMakeCopyIntoStorage,
|
||||
isInvalidForm: this.isInvalidForm,
|
||||
};
|
||||
|
@ -57,7 +57,13 @@ class AmazonStorage extends React.Component {
|
||||
};
|
||||
render() {
|
||||
const { formSettings, formErrors } = this.state;
|
||||
const { t, isLoadingData, isMaxProgress, selectedStorage } = this.props;
|
||||
const {
|
||||
t,
|
||||
isLoadingData,
|
||||
isMaxProgress,
|
||||
selectedStorage,
|
||||
buttonSize,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -76,13 +82,13 @@ class AmazonStorage extends React.Component {
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={!isMaxProgress || this.isDisabled}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
/>
|
||||
{!isMaxProgress && (
|
||||
<Button
|
||||
label={t("Common:CopyOperation") + "..."}
|
||||
isDisabled={true}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
style={{ marginLeft: "8px" }}
|
||||
/>
|
||||
)}
|
||||
|
@ -50,7 +50,13 @@ class GoogleCloudStorage extends React.Component {
|
||||
};
|
||||
render() {
|
||||
const { formSettings, formErrors } = this.state;
|
||||
const { t, isLoadingData, isMaxProgress, selectedStorage } = this.props;
|
||||
const {
|
||||
t,
|
||||
isLoadingData,
|
||||
isMaxProgress,
|
||||
selectedStorage,
|
||||
buttonSize,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -68,13 +74,13 @@ class GoogleCloudStorage extends React.Component {
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={!isMaxProgress || this.isDisabled}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
/>
|
||||
{!isMaxProgress && (
|
||||
<Button
|
||||
label={t("Common:CopyOperation") + "..."}
|
||||
isDisabled
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
style={{ marginLeft: "8px" }}
|
||||
/>
|
||||
)}
|
||||
|
@ -50,7 +50,13 @@ class RackspaceStorage extends React.Component {
|
||||
};
|
||||
render() {
|
||||
const { formSettings, formErrors } = this.state;
|
||||
const { t, isLoadingData, isMaxProgress, selectedStorage } = this.props;
|
||||
const {
|
||||
t,
|
||||
isLoadingData,
|
||||
isMaxProgress,
|
||||
selectedStorage,
|
||||
buttonSize,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -69,13 +75,13 @@ class RackspaceStorage extends React.Component {
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={!isMaxProgress || this.isDisabled}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
/>
|
||||
{!isMaxProgress && (
|
||||
<Button
|
||||
label={t("Common:CopyOperation") + "..."}
|
||||
isDisabled
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
style={{ marginLeft: "8px" }}
|
||||
/>
|
||||
)}
|
||||
|
@ -52,7 +52,13 @@ class SelectelStorage extends React.Component {
|
||||
|
||||
render() {
|
||||
const { formSettings, formErrors } = this.state;
|
||||
const { t, isLoadingData, isMaxProgress, selectedStorage } = this.props;
|
||||
const {
|
||||
t,
|
||||
isLoadingData,
|
||||
isMaxProgress,
|
||||
selectedStorage,
|
||||
buttonSize,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -71,13 +77,13 @@ class SelectelStorage extends React.Component {
|
||||
onClick={this.onMakeCopy}
|
||||
primary
|
||||
isDisabled={!isMaxProgress || this.isDisabled}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
/>
|
||||
{!isMaxProgress && (
|
||||
<Button
|
||||
label={t("Common:CopyOperation") + "..."}
|
||||
isDisabled={true}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
style={{ marginLeft: "8px" }}
|
||||
/>
|
||||
)}
|
||||
|
@ -334,6 +334,7 @@ class RestoreBackup extends React.Component {
|
||||
history,
|
||||
downloadingProgress,
|
||||
commonThirdPartyList,
|
||||
buttonSize,
|
||||
} = this.props;
|
||||
const {
|
||||
isChecked,
|
||||
@ -490,7 +491,7 @@ class RestoreBackup extends React.Component {
|
||||
primary
|
||||
isDisabled={checkingRecoveryData || !isMaxProgress || !isChecked}
|
||||
isLoading={checkingRecoveryData}
|
||||
size="medium"
|
||||
size={buttonSize}
|
||||
tabIndex={10}
|
||||
/>
|
||||
</StyledRestoreBackup>
|
||||
|
@ -231,13 +231,13 @@ class BackupListModalDialog extends React.Component {
|
||||
<div className="restore_dialog-button">
|
||||
<Button
|
||||
primary
|
||||
size="medium"
|
||||
size="normal"
|
||||
label={t("Common:Restore")}
|
||||
onClick={this.onRestorePortal}
|
||||
isDisabled={isCopyingToLocal || !isChecked}
|
||||
/>
|
||||
<Button
|
||||
size="medium"
|
||||
size="normal"
|
||||
label={t("Common:CloseButton")}
|
||||
onClick={onModalClose}
|
||||
/>
|
||||
|
@ -37,12 +37,12 @@ export const settingsTree = [
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// key: '0-2',
|
||||
// icon: '',
|
||||
// link: 'whitelabel',
|
||||
// tKey: 'WhiteLabel',
|
||||
// },
|
||||
{
|
||||
key: "0-2",
|
||||
icon: "",
|
||||
link: "whitelabel",
|
||||
tKey: "WhiteLabel",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
@ -16,6 +16,10 @@ const saveData = {
|
||||
timeZoneID: "Pacific/Tahiti",
|
||||
};
|
||||
|
||||
const saveDataWelcomePageSettings = {
|
||||
title: "Hello",
|
||||
};
|
||||
|
||||
Scenario("Tfa auth success", async ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.confirm, "confirm");
|
||||
I.mockEndpoint(Endpoints.code, "code");
|
||||
@ -589,3 +593,150 @@ Scenario("Customization cancel button test time zone", async ({ I }) => {
|
||||
I.see(timeZoneCurrent);
|
||||
}
|
||||
});
|
||||
|
||||
Scenario("Welcome Page Settings Save button test", async ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.common, "common");
|
||||
I.mockEndpoint(Endpoints.cultures, "cultures");
|
||||
I.mockEndpoint(Endpoints.timezones, "timezones");
|
||||
I.mockEndpoint(Endpoints.settings, "settingsCustomization");
|
||||
I.mockEndpoint(Endpoints.build, "build");
|
||||
I.mockEndpoint(Endpoints.info, "infoSettings");
|
||||
I.mockEndpoint(Endpoints.self, "selfSettings");
|
||||
I.mockEndpoint(Endpoints.greetingsettings, "greetingsettings");
|
||||
|
||||
if (deviceType !== "mobile") {
|
||||
if (browser === "webkit") {
|
||||
I.wait(30);
|
||||
}
|
||||
I.amOnPage("/settings/common/customization");
|
||||
}
|
||||
|
||||
if (deviceType === "mobile") {
|
||||
I.amOnPage("/settings/common/customization/welcome-page-settings");
|
||||
}
|
||||
|
||||
const titleCurrent = await I.grabValueFrom("#textInputContainerWelcomePage");
|
||||
|
||||
I.fillField("#textInputContainerWelcomePage", "Hello");
|
||||
|
||||
I.seeElement({
|
||||
react: "TextInput",
|
||||
props: {
|
||||
value: "Hello",
|
||||
},
|
||||
});
|
||||
|
||||
const titleNew = await I.grabValueFrom("#textInputContainerWelcomePage");
|
||||
|
||||
if (titleCurrent === titleNew) {
|
||||
I.dontSee("You have unsaved changes");
|
||||
|
||||
I.seeElement({
|
||||
react: "Button",
|
||||
props: {
|
||||
label: "Save",
|
||||
isDisabled: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (titleCurrent !== titleNew) {
|
||||
I.see("You have unsaved changes");
|
||||
|
||||
I.seeElement({
|
||||
react: "Button",
|
||||
props: {
|
||||
label: "Save",
|
||||
isDisabled: false,
|
||||
},
|
||||
});
|
||||
|
||||
I.click({
|
||||
react: "Button",
|
||||
props: {
|
||||
label: "Save",
|
||||
id: "buttonsWelcomePage",
|
||||
},
|
||||
});
|
||||
|
||||
I.checkRequest(
|
||||
"http://localhost:8092/api/2.0/settings/greetingsettings.json",
|
||||
saveDataWelcomePageSettings,
|
||||
"settings",
|
||||
"greetingsettings"
|
||||
);
|
||||
|
||||
I.seeElement({
|
||||
react: "Button",
|
||||
props: {
|
||||
label: "Save",
|
||||
isDisabled: true,
|
||||
},
|
||||
});
|
||||
|
||||
I.seeElement({
|
||||
react: "TextInput",
|
||||
props: {
|
||||
value: "Hello",
|
||||
},
|
||||
});
|
||||
|
||||
I.dontSee("You have unsaved changes");
|
||||
}
|
||||
});
|
||||
|
||||
Scenario(
|
||||
"Welcome Page Settings Restore to Default button test",
|
||||
async ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.common, "common");
|
||||
I.mockEndpoint(Endpoints.cultures, "cultures");
|
||||
I.mockEndpoint(Endpoints.timezones, "timezones");
|
||||
I.mockEndpoint(Endpoints.settings, "settingsCustomization");
|
||||
I.mockEndpoint(Endpoints.build, "build");
|
||||
I.mockEndpoint(Endpoints.info, "infoSettings");
|
||||
I.mockEndpoint(Endpoints.self, "selfSettings");
|
||||
I.mockEndpoint(Endpoints.restore, "restore");
|
||||
|
||||
if (deviceType !== "mobile") {
|
||||
if (browser === "webkit") {
|
||||
I.wait(30);
|
||||
}
|
||||
I.amOnPage("/settings/common/customization");
|
||||
}
|
||||
|
||||
if (deviceType === "mobile") {
|
||||
I.amOnPage("/settings/common/customization/welcome-page-settings");
|
||||
}
|
||||
|
||||
I.fillField("#textInputContainerWelcomePage", "Hello");
|
||||
|
||||
I.seeElement({
|
||||
react: "TextInput",
|
||||
props: {
|
||||
value: "Hello",
|
||||
},
|
||||
});
|
||||
|
||||
I.click({
|
||||
react: "Button",
|
||||
props: {
|
||||
label: "Restore to Default",
|
||||
id: "buttonsWelcomePage",
|
||||
},
|
||||
});
|
||||
|
||||
I.checkRequest(
|
||||
"http://localhost:8092/api/2.0/settings/greetingsettings/restore.json",
|
||||
"",
|
||||
"settings",
|
||||
"restore"
|
||||
);
|
||||
|
||||
I.seeElement({
|
||||
react: "TextInput",
|
||||
props: {
|
||||
value: "Cloud Office Applications",
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
|
@ -17,6 +17,20 @@ module.exports = class Endpoints {
|
||||
baseDir: "settings",
|
||||
};
|
||||
|
||||
static restore = {
|
||||
url: [
|
||||
"http://localhost:8092/api/2.0/settings/greetingsettings/restore.json",
|
||||
],
|
||||
method: "POST",
|
||||
baseDir: "settings",
|
||||
};
|
||||
|
||||
static greetingsettings = {
|
||||
url: ["http://localhost:8092/api/2.0/settings/greetingsettings.json"],
|
||||
method: "POST",
|
||||
baseDir: "settings",
|
||||
};
|
||||
|
||||
static common = {
|
||||
url: ["http://localhost:8092/api/2.0/settings/customschemas/Common.json"],
|
||||
method: "GET",
|
||||
|
@ -0,0 +1,6 @@
|
||||
{
|
||||
"value": {
|
||||
"Status": 1,
|
||||
"Message": "Welcome Page settings have been successfully saved"
|
||||
}
|
||||
}
|
@ -0,0 +1,7 @@
|
||||
{
|
||||
"value": {
|
||||
"Status": 1,
|
||||
"Message": "Welcome Page settings have been successfully saved",
|
||||
"CompanyName": "Cloud Office Applications"
|
||||
}
|
||||
}
|
@ -355,3 +355,44 @@ if (deviceType === "mobile") {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Scenario("Welcome Page Settings mobile render test", async ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.common, "common");
|
||||
I.mockEndpoint(Endpoints.cultures, "cultures");
|
||||
I.mockEndpoint(Endpoints.timezones, "timezones");
|
||||
I.mockEndpoint(Endpoints.settings, "settingsCustomization");
|
||||
I.mockEndpoint(Endpoints.build, "build");
|
||||
I.mockEndpoint(Endpoints.info, "infoSettings");
|
||||
I.mockEndpoint(Endpoints.self, "selfSettings");
|
||||
|
||||
I.amOnPage("/settings/common/customization/welcome-page-settings");
|
||||
|
||||
if (deviceType === "mobile") {
|
||||
I.see("Welcome Page Settings");
|
||||
|
||||
I.seeElement("div", ".settings-block");
|
||||
|
||||
I.seeElement({
|
||||
react: "Button",
|
||||
props: {
|
||||
label: "Save",
|
||||
isDisabled: true,
|
||||
},
|
||||
});
|
||||
|
||||
I.seeElement({
|
||||
react: "Button",
|
||||
props: {
|
||||
label: "Restore to Default",
|
||||
},
|
||||
});
|
||||
|
||||
I.saveScreenshot(`10.welcome-page-settings-mobile.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`10.welcome-page-settings-mobile.png`, {
|
||||
tolerance: 1,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
Loading…
Reference in New Issue
Block a user