Merge branch 'develop' into feature/js-sdk-presets

This commit is contained in:
Vladimir Khvan 2023-12-24 18:09:44 +05:00
commit a85f2c70a5
30 changed files with 323 additions and 185 deletions

View File

@ -91,6 +91,7 @@ export type useRoomsHelperProps = {
};
export type useFilesHelpersProps = {
roomsFolderId?: number;
setBreadCrumbs: (items: BreadCrumb[]) => void;
setIsBreadCrumbsLoading: (value: boolean) => void;
setIsSelectedParentFolder: (value: boolean) => void;
@ -221,4 +222,6 @@ export type FilesSelectorProps = {
withHeader: boolean;
withCancelButton: boolean;
settings: any;
roomsFolderId?: number;
};

View File

@ -133,6 +133,7 @@ export const useFilesHelper = ({
getIcon,
t,
setIsSelectedParentFolder,
roomsFolderId,
}: useFilesHelpersProps) => {
const getFileList = React.useCallback(
async (
@ -278,7 +279,7 @@ export const useFilesHelper = ({
return {
label: title,
id: id,
isRoom: currentFolder?.current?.rootFolderId === id,
isRoom: roomsFolderId === id,
roomType,
};
}
@ -334,7 +335,7 @@ export const useFilesHelper = ({
}
}
},
[selectedItemId, searchValue, isFirstLoad, disabledItems]
[selectedItemId, searchValue, isFirstLoad, disabledItems, roomsFolderId]
);
return { getFileList };

View File

@ -104,6 +104,8 @@ const FilesSelector = ({
withCancelButton = true,
getIcon,
isRoomBackup,
roomsFolderId,
}: FilesSelectorProps) => {
const { t } = useTranslation(["Files", "Common", "Translations"]);
@ -208,6 +210,7 @@ const FilesSelector = ({
getIcon,
t,
setIsSelectedParentFolder,
roomsFolderId,
});
const onSelectAction = (item: Item) => {
@ -272,7 +275,9 @@ const FilesSelector = ({
if (
needRoomList ||
(!isThirdParty && parentId === 0 && rootFolderType === FolderType.Rooms)
(!isThirdParty &&
parentId === roomsFolderId &&
rootFolderType === FolderType.Rooms)
) {
getRoomSettings();
@ -633,7 +638,7 @@ export default inject(
const sessionPath = window.sessionStorage.getItem("filesSelectorPath");
const { treeFolders } = treeFoldersStore;
const { treeFolders, roomsFolderId } = treeFoldersStore;
const {
restorePanelVisible,
@ -747,6 +752,8 @@ export default inject(
setBackupToPublicRoomVisible,
currentDeviceType,
getIcon,
roomsFolderId,
};
}
)(observer(FilesSelector));

View File

@ -8,7 +8,7 @@ import Text from "@docspace/components/text";
const StyledInfoBar = styled.div`
display: flex;
background-color: #f8f9f9;
background-color: ${(props) => props.theme.infoBar.background};
color: #333;
font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
padding: 12px 16px;
@ -33,9 +33,13 @@ const StyledInfoBar = styled.div`
}
}
}
&__title {
color: ${(props) => props.theme.infoBar.title};
}
}
.body-container {
color: #555f65;
color: ${(props) => props.theme.infoBar.description};
font-weight: 400;
}
.close-icon {
@ -44,8 +48,8 @@ const StyledInfoBar = styled.div`
fill: ${({ theme }) => theme.iconButton.color};
}
svg {
weight: 10px;
height: 10px;
width: 12px;
height: 12px;
}
}
`;
@ -60,7 +64,7 @@ const InfoBar = (props) => {
<div className="header-icon">
<ReactSVG src={InfoIcon} />
</div>
<Text fontSize="12px" fontWeight={600}>
<Text className="header-body__title" fontSize="12px" fontWeight={600}>
{t("Common:Info")}
</Text>
</div>

View File

@ -251,7 +251,7 @@ const ComponentPure = ({
);
setIsRequestRunning && setIsRequestRunning(false);
setModalRequestRunning && setModalRequestRunning(false);
if (isSaveButton) {
setSettingsModalRequestRunning &&
setSettingsModalRequestRunning(false);
@ -263,15 +263,15 @@ const ComponentPure = ({
? isSaveButton
? modalRequestRunning
: isRequestRunning
? isRequestRunning
: rest.isLoading
? isRequestRunning
: rest.isLoading
: rest.isLoading;
const isDisabled = disableWhileRequestRunning
? isSaveButton
? modalRequestRunning
: isRequestRunning
? isRequestRunning
: rest.isDisabled
? isRequestRunning
: rest.isDisabled
: rest.isDisabled;
return (
@ -317,7 +317,7 @@ const ComponentPure = ({
return (
<iframe
{...elementProps}
style={{ minHeight: "100%", border: "none" }}
style={{ minHeight: "100%", border: "none", ...elementProps.style }}
></iframe>
);
}
@ -382,15 +382,18 @@ const WrappedComponent = ({
const [isRequestRunning, setIsRequestRunning] = React.useState(false);
const updatePropsContext = (name, props) => {
if (saveButton && name === saveButton.contextName) {
setSaveButtonProps && setSaveButtonProps((val) => ({ ...val, props }));
} else {
const newProps = { ...contextProps };
newProps[name] = props;
const updatePropsContext = (newContextProps) => {
const newProps = { ...contextProps };
setContextProps(newProps);
}
newContextProps.forEach(({ name, props }) => {
if (saveButton && name === saveButton.contextName) {
setSaveButtonProps && setSaveButtonProps((val) => ({ ...val, props }));
} else {
newProps[name] = props;
}
});
setContextProps(newProps);
};
return (

View File

@ -40,9 +40,7 @@ export const messageActions = (
case PluginActions.updateContext:
if (message.contextProps) {
message.contextProps.forEach((prop) => {
updatePropsContext && updatePropsContext(prop.name, prop.props);
});
updatePropsContext(contextProps);
}
break;

View File

@ -45,6 +45,10 @@ const SectionBodyContent = ({
resetFilters,
submitToGalleryTileIsVisible,
canSubmitToFormGallery,
setOformFilesLoaded,
categoryFilterLoaded,
languageFilterLoaded,
oformFilesLoaded,
}) => {
const onMouseDown = (e) => {
if (
@ -66,7 +70,11 @@ const SectionBodyContent = ({
};
}, [onMouseDown]);
return !tReady || !oformFiles ? (
useEffect(() => {
setOformFilesLoaded(tReady && oformFiles);
}, [tReady, oformFiles]);
return !(categoryFilterLoaded && languageFilterLoaded && oformFilesLoaded) ? (
<Loaders.Tiles foldersCount={0} withTitle={false} />
) : !hasGalleryFiles ? (
<EmptyScreenContainer
@ -120,4 +128,8 @@ export default inject(({ auth, accessRightsStore, oformsStore }) => ({
resetFilters: oformsStore.resetFilters,
submitToGalleryTileIsVisible: oformsStore.submitToGalleryTileIsVisible,
canSubmitToFormGallery: accessRightsStore.canSubmitToFormGallery,
setOformFilesLoaded: oformsStore.setOformFilesLoaded,
categoryFilterLoaded: oformsStore.categoryFilterLoaded,
languageFilterLoaded: oformsStore.languageFilterLoaded,
oformFilesLoaded: oformsStore.oformFilesLoaded,
}))(withTranslation("Common, FormGallery")(observer(SectionBodyContent)));

View File

@ -3,6 +3,7 @@ import { inject, observer } from "mobx-react";
import CategoryFilterDesktop from "./DesktopView";
import CategoryFilterMobile from "./MobileView";
import { mobile } from "@docspace/components/utils/device";
import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
import styled, { css } from "styled-components";
@ -34,21 +35,43 @@ export const StyledCategoryFilterWrapper = styled.div`
}
`;
export const StyledSkeleton = styled(RectangleSkeleton)`
width: 220px;
height: 32px;
@media ${mobile} {
width: 100%;
}
${({ noLocales }) =>
!noLocales &&
css`
@media ${mobile} {
max-width: calc(100% - 49px);
}
`}
`;
const CategoryFilter = ({
oformsFilter,
noLocales,
fetchCategoryTypes,
fetchCategoriesOfCategoryType,
filterOformsByLocaleIsLoading,
setFilterOformsByLocaleIsLoading,
setCategoryFilterLoaded,
categoryFilterLoaded,
languageFilterLoaded,
oformFilesLoaded,
}) => {
const [menuItems, setMenuItems] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
(async () => {
setIsLoading(true);
let newMenuItems = await fetchCategoryTypes();
if (!newMenuItems) {
setIsLoading(false);
filterOformsByLocaleIsLoading &&
setFilterOformsByLocaleIsLoading(false);
return;
}
@ -77,12 +100,21 @@ const CategoryFilter = ({
})
.finally(() => {
setMenuItems(newMenuItems);
setIsLoading(false);
filterOformsByLocaleIsLoading &&
setFilterOformsByLocaleIsLoading(false);
});
})();
}, [oformsFilter.locale]);
if (!isLoading && menuItems.length === 0) return null;
useEffect(() => {
setCategoryFilterLoaded(menuItems.length !== 0);
}, [menuItems.length]);
if (
filterOformsByLocaleIsLoading ||
!(categoryFilterLoaded && languageFilterLoaded && oformFilesLoaded)
)
return <StyledSkeleton $noLocales={noLocales} />;
return (
<StyledCategoryFilterWrapper
@ -100,4 +132,11 @@ export default inject(({ oformsStore }) => ({
oformsStore.oformLocales !== null && oformsStore.oformLocales?.length === 0,
fetchCategoryTypes: oformsStore.fetchCategoryTypes,
fetchCategoriesOfCategoryType: oformsStore.fetchCategoriesOfCategoryType,
filterOformsByLocaleIsLoading: oformsStore.filterOformsByLocaleIsLoading,
setFilterOformsByLocaleIsLoading:
oformsStore.setFilterOformsByLocaleIsLoading,
setCategoryFilterLoaded: oformsStore.setCategoryFilterLoaded,
categoryFilterLoaded: oformsStore.categoryFilterLoaded,
languageFilterLoaded: oformsStore.languageFilterLoaded,
oformFilesLoaded: oformsStore.oformFilesLoaded,
}))(observer(CategoryFilter));

View File

@ -2,13 +2,14 @@ import * as Styled from "./index.styled";
import { withTranslation } from "react-i18next";
import { useState } from "react";
import { useState, useEffect } from "react";
import { inject, observer } from "mobx-react";
import { flagsIcons } from "@docspace/common/utils/image-flags";
import { convertToCulture } from "@docspace/common/utils";
import Backdrop from "@docspace/components/backdrop";
import { isMobile } from "@docspace/components/utils/device";
import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
const LanguageFilter = ({
t,
@ -16,6 +17,11 @@ const LanguageFilter = ({
defaultOformLocale,
oformLocales,
filterOformsByLocale,
filterOformsByLocaleIsLoading,
setLanguageFilterLoaded,
categoryFilterLoaded,
languageFilterLoaded,
oformFilesLoaded,
}) => {
const [isOpen, setIsOpen] = useState(false);
const onToggleDropdownIsOpen = () => setIsOpen(!isOpen);
@ -29,7 +35,15 @@ const LanguageFilter = ({
sectionScroll.scrollTop = 0;
};
if (oformLocales !== null && oformLocales?.length === 0) return null;
useEffect(() => {
setLanguageFilterLoaded(oformLocales && oformLocales?.length !== 0);
}, [oformLocales, oformLocales?.length]);
if (
filterOformsByLocaleIsLoading ||
!(categoryFilterLoaded && languageFilterLoaded && oformFilesLoaded)
)
return <RectangleSkeleton width="41px" height="32px" />;
return (
<Styled.LanguageFilter>
@ -100,4 +114,9 @@ export default inject(({ oformsStore }) => ({
defaultOformLocale: oformsStore.defaultOformLocale,
oformLocales: oformsStore.oformLocales,
filterOformsByLocale: oformsStore.filterOformsByLocale,
filterOformsByLocaleIsLoading: oformsStore.filterOformsByLocaleIsLoading,
setLanguageFilterLoaded: oformsStore.setLanguageFilterLoaded,
categoryFilterLoaded: oformsStore.categoryFilterLoaded,
languageFilterLoaded: oformsStore.languageFilterLoaded,
oformFilesLoaded: oformsStore.oformFilesLoaded,
}))(withTranslation(["Common"])(observer(LanguageFilter)));

View File

@ -63,6 +63,8 @@ const FormGallery = ({
}
}, [fromFolderId]);
if (isInitLoading) return <></>;
return (
<>
<Section

View File

@ -46,12 +46,6 @@ const StyledComponent = styled.div`
display: none;
}
}
@media (max-height: 700px) {
.save-cancel-buttons {
bottom: auto;
}
}
`;
const CompanyInfoSettings = (props) => {

View File

@ -146,19 +146,17 @@ const StyledSettingsComponent = styled.div`
`}
.send-request-container {
box-sizing: border-box;
position: absolute;
padding-block: 30px;
position: sticky;
bottom: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: 0;
`
: css`
left: 0;
`}
padding: 16px;
width: 100%;
margin-top: 32px;
background-color: ${({ theme }) => theme.backgroundColor};
@media ${mobile} {
position: fixed;
padding-inline: 16px;
inset-inline: 0;
}
}
.send-request-button {

View File

@ -23,6 +23,7 @@ import Text from "@docspace/components/text";
import Link from "@docspace/components/link";
import BetaBadge from "@docspace/common/components/BetaBadge";
import { isBetaLanguage } from "@docspace/common/utils";
import withCultureNames from "@docspace/common/hoc/withCultureNames";
const mapTimezonesToArray = (timezones) => {
return timezones.map((timezone) => {
@ -566,7 +567,9 @@ export default inject(({ auth, setup, common }) => {
currentDeviceType,
};
})(
withLoading(
withTranslation(["Settings", "Common"])(observer(LanguageAndTimeZone))
withCultureNames(
withLoading(
withTranslation(["Settings", "Common"])(observer(LanguageAndTimeZone))
)
)
);

View File

@ -78,7 +78,8 @@ const PortalRenaming = (props) => {
useEffect(() => {
setDocumentTitle(t("PortalRenaming"));
if (!isLoaded) initSettings().then(() => setIsLoaded(true));
const page = isMobileView ? "language-and-time-zone" : "general";
if (!isLoaded) initSettings(page).then(() => setIsLoaded(true));
const checkScroll = checkScrollSettingsBlock();
checkInnerWidth();

View File

@ -86,7 +86,8 @@ const WelcomePageSettings = (props) => {
? greetingSettings
: greetingTitleDefaultFromSessionStorage;
if (!isLoaded) initSettings().then(() => setIsLoaded(true));
const page = isMobileView ? "language-and-time-zone" : "general";
if (!isLoaded) initSettings(page).then(() => setIsLoaded(true));
checkInnerWidth();
window.addEventListener("resize", checkInnerWidth);
@ -197,8 +198,7 @@ const WelcomePageSettings = (props) => {
.finally(() => {
getGreetingSettingsIsDefault();
setState((val) => ({ ...val, isLoadingGreetingSave: false }));
}
);
});
setState((val) => ({ ...val, showReminder: false }));
@ -225,8 +225,7 @@ const WelcomePageSettings = (props) => {
.finally(() => {
getGreetingSettingsIsDefault();
setState((val) => ({ ...val, isLoadingGreetingRestore: false }));
}
);
});
};
const settingIsEqualInitialValue = (stateName, value) => {

View File

@ -42,6 +42,8 @@ const Appearance = (props) => {
const defaultAppliedColorAccent = currentColorScheme.main.accent;
const defaultAppliedColorButtons = currentColorScheme.main.buttons;
const isMobileView = currentDeviceType === DeviceType.mobile;
const headerAddTheme = t("Settings:NewColorScheme");
const headerEditTheme = t("Settings:EditColorScheme");
@ -166,7 +168,7 @@ const Appearance = (props) => {
return () => {
window.removeEventListener("resize", onCheckView);
resetIsInit();
!isMobileView && resetIsInit();
};
}, []);

View File

@ -399,6 +399,20 @@ const StyledRestoreBackup = styled.div`
margin-bottom: 16px;
}
.restore-backup_button-container {
padding-block: 30px;
position: sticky;
bottom: 0;
margin-top: 32px;
background-color: ${({ theme }) => theme.backgroundColor};
@media ${mobile} {
position: fixed;
padding-inline: 16px;
inset-inline: 0;
}
}
.restore-backup_button {
@media ${mobile} {
width: 100%;

View File

@ -103,7 +103,7 @@ const ButtonContainer = (props) => {
const isLoadingButton = isLoading;
return (
<>
<div className="restore-backup_button-container">
<Button
className="restore-backup_button"
label={t("Common:Restore")}
@ -123,7 +123,7 @@ const ButtonContainer = (props) => {
percent={downloadingProgress}
/>
)}
</>
</div>
);
};

View File

@ -6,6 +6,7 @@ import { Link, Button, InputBlock, Label, Text } from "@docspace/components";
import toastr from "@docspace/components/toast/toastr";
import Loaders from "@docspace/common/components/Loaders";
import { DeviceType } from "@docspace/common/constants";
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
const URL_REGEX = /^https?:\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}\/?$/;
const DNS_PLACEHOLDER = `${window.location.protocol}//<docspace-dns-name>/`;
@ -224,31 +225,25 @@ const DocumentService = ({
</Text>
</div>
</div>
<div className="form-buttons">
<Button
onClick={onSubmit}
className="button"
primary
size={buttonSize}
label={t("Common:SaveButton")}
isDisabled={
isFormEmpty ||
isValuesInit ||
!allInputsValid ||
isSaveLoading ||
isResetLoading
}
isLoading={isSaveLoading}
/>
<Button
onClick={onReset}
className="button"
size={buttonSize}
label={t("Common:Restore")}
isDisabled={isDefaultSettings || isSaveLoading || isResetLoading}
isLoading={isResetLoading}
/>
</div>
<SaveCancelButtons
onSaveClick={onSubmit}
onCancelClick={onReset}
saveButtonLabel={t("Common:SaveButton")}
cancelButtonLabel={t("Common:Restore")}
saveButtonDisabled={
isFormEmpty ||
isValuesInit ||
!allInputsValid ||
isSaveLoading ||
isResetLoading
}
cancelButtonDisabled={
isDefaultSettings || isSaveLoading || isResetLoading
}
displaySettings={true}
isSaving={isSaveLoading || isResetLoading}
/>
</Styled.LocationForm>
</Styled.Location>
);

View File

@ -55,16 +55,4 @@ export const LocationForm = styled.form`
color: ${(props) => props.theme.client.settings.common.descriptionColor};
}
}
.form-buttons {
display: flex;
flex-direction: row;
gap: 8px;
@media ${mobile} {
.button {
width: 100%;
}
}
}
`;

View File

@ -14,33 +14,18 @@ import { useIsMobileView } from "../../../utils/useIsMobileView";
const StyledWrapper = styled.div`
.button-wrapper {
margin-top: 24px;
}
padding-block: 16px;
position: sticky;
bottom: 0;
margin-top: 32px;
background-color: ${({ theme }) => theme.backgroundColor};
@media ${mobile} {
.button-wrapper {
box-sizing: border-box;
position: absolute;
bottom: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: 0;
`
: css`
left: 0;
`}
width: 100%;
padding: 16px 16px 16px 24px;
@media ${mobile} {
position: fixed;
padding-inline: 16px;
inset-inline: 0;
}
}
@media ${mobile}{
.button-wrapper {
padding: 16px;
}
}
}
`;
const ProviderMetadata = (props) => {

View File

@ -86,6 +86,18 @@ const DownLoadWrapper = styled.div`
align-items: center;
gap: 12px;
padding-block: 16px 30px;
position: sticky;
bottom: 0;
margin-top: 32px;
background-color: ${({ theme }) => theme.backgroundColor};
@media ${mobile} {
position: fixed;
padding-inline: 16px;
inset-inline: 0;
}
.download-report_button {
width: auto;
height: auto;

View File

@ -34,6 +34,10 @@ class OformsStore {
categoryTitles = [];
oformLocales = null;
filterOformsByLocaleIsLoading = false;
categoryFilterLoaded = false;
languageFilterLoaded = false;
oformFilesLoaded = false;
submitToGalleryTileIsVisible = !localStorage.getItem(
"submitToGalleryTileIsHidden"
@ -45,8 +49,13 @@ class OformsStore {
}
get defaultOformLocale() {
const userLocale = convertToLanguage(getCookie(LANGUAGE)) || "en";
return this.oformLocales?.includes(userLocale) ? userLocale : "en";
const userLocale =
getCookie(LANGUAGE) || this.authStore.userStore.user?.cultureName || "en";
const convertedLocale = convertToLanguage(userLocale);
return this.oformLocales?.includes(convertedLocale)
? convertedLocale
: "en";
}
setOformFiles = (oformFiles) => (this.oformFiles = oformFiles);
@ -70,6 +79,22 @@ class OformsStore {
setOformLocales = (oformLocales) => (this.oformLocales = oformLocales);
setFilterOformsByLocaleIsLoading = (filterOformsByLocaleIsLoading) => {
this.filterOformsByLocaleIsLoading = filterOformsByLocaleIsLoading;
};
setCategoryFilterLoaded = (categoryFilterLoaded) => {
this.categoryFilterLoaded = categoryFilterLoaded;
};
setLanguageFilterLoaded = (languageFilterLoaded) => {
this.languageFilterLoaded = languageFilterLoaded;
};
setOformFilesLoaded = (oformFilesLoaded) => {
this.oformFilesLoaded = oformFilesLoaded;
};
fetchOformLocales = async () => {
const { uploadDomain, uploadDashboard } =
this.authStore.settingsStore.formGallery;
@ -78,9 +103,7 @@ class OformsStore {
try {
const fetchedLocales = await getOformLocales(url);
const localeKeys = fetchedLocales.map((locale) =>
convertToLanguage(locale.code)
);
const localeKeys = fetchedLocales.map((locale) => locale.code);
this.setOformLocales(localeKeys);
} catch (err) {
this.setOformLocales([]);
@ -260,6 +283,9 @@ class OformsStore {
filterOformsByLocale = async (locale) => {
if (!locale) return;
if (locale !== this.oformsFilter.locale)
this.setFilterOformsByLocaleIsLoading(true);
this.currentCategory = null;
this.oformsFilter.page = 1;

View File

@ -494,10 +494,10 @@ class SsoFormStore {
setSloUrls = (o) => {
switch (o.sloBinding) {
case BINDING_POST:
this.sloUrlPost = o.ssoUrl;
this.sloUrlPost = o.sloUrl;
break;
case BINDING_REDIRECT:
this.sloUrlRedirect = o.ssoUrl;
this.sloUrlRedirect = o.sloUrl;
}
};

View File

@ -429,7 +429,10 @@ export function convertToCulture(key: string) {
}
export function convertToLanguage(key: string) {
if (!key) return;
const splittedKey = key.split("-");
if (splittedKey.length > 1) return splittedKey[0];
return key;

View File

@ -111,6 +111,7 @@ const StyledSaveCancelButtons = styled.div`
align-items: center;
bottom: ${(props) => props.theme.saveCancelButtons.bottom};
width: ${(props) => props.theme.saveCancelButtons.width};
background-color: ${({ theme }) => theme.backgroundColor};
${(props) =>
props.theme.interfaceDirection === "rtl"
@ -120,8 +121,12 @@ const StyledSaveCancelButtons = styled.div`
.save-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? `margin-left: ${props.theme.saveCancelButtons.marginRight};`
: `margin-right: ${props.theme.saveCancelButtons.marginRight};`}
? css`
margin-left: ${props.theme.saveCancelButtons.marginRight};
`
: css`
margin-right: ${props.theme.saveCancelButtons.marginRight};
`}
}
.unsaved-changes {
color: ${(props) => props.theme.saveCancelButtons.unsavedColor};
@ -133,14 +138,25 @@ const StyledSaveCancelButtons = styled.div`
${(props) => props.displaySettings && tabletButtons}
${(props) =>
!props.displaySettings &&
`
css`
justify-content: flex-end;
position: fixed;
.unsaved-changes {
display: none;
}
`}
`}
}
@media ${mobile} {
position: fixed;
inset-inline: 0;
bottom: 0;
${({ showReminder }) =>
showReminder &&
css`
padding-top: 30px;
`}
}
`;
StyledSaveCancelButtons.defaultProps = { theme: Base };

View File

@ -26,6 +26,11 @@ const StyledBreadCrumbs = styled.div<{
.context-menu-button {
transform: rotate(90deg);
svg {
path {
fill: ${(props) => props.theme.selector.breadCrumbs.prevItemColor};
}
}
}
`;

View File

@ -134,23 +134,39 @@ class TableHeader extends React.Component {
addNewColumns = (gridTemplateColumns, activeColumnIndex, containerWidth) => {
const { columns, columnStorageName } = this.props;
const filterColumns = columns.filter((x) => !x.defaultSize);
const clearSize = gridTemplateColumns.map((c) => this.getSubstring(c));
const maxSize = Math.max.apply(Math, clearSize);
const defaultSize = columns[activeColumnIndex - 1].defaultSize;
const indexOfMaxSize = clearSize.findLastIndex((s) => s === maxSize);
const defaultColSize = defaultSize
const addedColumn = 1;
const enableColumnsLength =
columns.filter((column) => !column.defaultSize && column.enable).length -
addedColumn;
const allColumnsLength = columns.filter(
(column) => !column.defaultSize
).length;
const defaultSizeColumn = columns.find(
(column) => column.defaultSize
)?.defaultSize;
const widthColumns =
containerWidth -
settingsSize -
(defaultSizeColumn ? defaultSizeColumn : 0);
const newColumnSize = defaultSize
? defaultSize
: containerWidth / filterColumns.length;
const indexOfMaxSize = clearSize.findIndex((s) => s === maxSize);
: widthColumns / allColumnsLength;
const newSize = maxSize - defaultColSize;
const newSizeMaxColumn = maxSize - newColumnSize;
const AddColumn = () => {
gridTemplateColumns[indexOfMaxSize] = newSize + "px";
gridTemplateColumns[activeColumnIndex] = defaultColSize + "px";
gridTemplateColumns[indexOfMaxSize] = newSizeMaxColumn + "px";
gridTemplateColumns[activeColumnIndex] = newColumnSize + "px";
return false;
};
@ -161,8 +177,10 @@ class TableHeader extends React.Component {
};
if (
(indexOfMaxSize === 0 && newSize < minSizeFirstColumn) ||
newSize <= defaultColSize
(indexOfMaxSize === 0 && newSizeMaxColumn < minSizeFirstColumn) ||
(indexOfMaxSize !== 0 && newSizeMaxColumn < defaultMinColumnSize) ||
newColumnSize < defaultMinColumnSize ||
enableColumnsLength === 1
)
return ResetColumnsSize();
else return AddColumn();
@ -297,12 +315,12 @@ class TableHeader extends React.Component {
});
//If content column sizes are calculated as empty after changing view
if (!hasContent) return this.resetColumns(true);
if (!hasContent) return this.resetColumns();
}
// columns.length + 1 - its settings column
if (tableContainer.length !== columns.length + 1) {
return this.resetColumns(true);
return this.resetColumns();
}
if (!container) return;
@ -636,7 +654,7 @@ class TableHeader extends React.Component {
? gridTemplateColumnsWithoutOverfilling.join(" ")
: gridTemplateColumns.join(" ");
} else {
this.resetColumns(true);
this.resetColumns();
}
if (str) {
@ -724,7 +742,7 @@ class TableHeader extends React.Component {
}
};
resetColumns = (resetToDefault = false) => {
resetColumns = () => {
const {
containerRef,
columnStorageName,
@ -732,9 +750,6 @@ class TableHeader extends React.Component {
columns,
infoPanelVisible,
} = this.props;
const defaultSize = this.props.columns.find(
(col) => col.defaultSize
)?.defaultSize;
let str = "";
@ -748,39 +763,21 @@ class TableHeader extends React.Component {
: document.getElementById("table-container");
const containerWidth = +container.clientWidth;
if (resetToDefault) {
const firstColumnPercent = 40;
const percent = 60 / enableColumns.length;
const firstColumnPercent = 40;
const percent = 60 / enableColumns.length;
const wideColumnSize = (containerWidth * firstColumnPercent) / 100 + "px";
const otherColumns = (containerWidth * percent) / 100 + "px";
const wideColumnSize = (containerWidth * firstColumnPercent) / 100 + "px";
const otherColumns = (containerWidth * percent) / 100 + "px";
for (let col of columns) {
if (col.default) {
str += `${wideColumnSize} `;
} else
str += col.enable
? col.defaultSize
? `${col.defaultSize}px `
: `${otherColumns} `
: "0px ";
}
} else {
const percent = 100 / enableColumns.length;
const newContainerWidth =
containerWidth - containerMargin - (defaultSize || 0);
const otherColumns = (newContainerWidth * percent) / 100 + "px";
str = "";
for (let col of this.props.columns) {
for (let col of columns) {
if (col.default) {
str += `${wideColumnSize} `;
} else
str += col.enable
? /* col.minWidth
? `${col.minWidth}px `
: */ col.defaultSize
? col.defaultSize
? `${col.defaultSize}px `
: `${otherColumns} `
: "0px ";
}
}
str += `${settingsSize}px`;

View File

@ -1954,7 +1954,7 @@ const Base = {
navigation: {
expanderColor: black,
background: white,
rootFolderTitleColor: "#A3A9AE",
rootFolderTitleColor: "#657077",
publicIcon: black,
boxShadow: " 0px 12px 40px 0px #040F1B1F",
@ -2300,8 +2300,8 @@ const Base = {
border: `1px solid ${grayLightMid}`,
breadCrumbs: {
prevItemColor: "#A3A9AE",
arrowRightColor: "#A3A9AE",
prevItemColor: "#657077",
arrowRightColor: "#657077",
},
bodyDescriptionText: "#A3A9AE",
@ -3182,6 +3182,12 @@ const Base = {
descriptionColor: "#555F65",
},
infoBar: {
background: "#f8f9f9",
title: black,
description: cyanBlueDarkShade,
},
roomIcon: {
backgroundArchive: "#A3A9AE",
opacityBackground: "1",

View File

@ -1949,7 +1949,7 @@ const Dark = {
navigation: {
expanderColor: "#eeeeee",
background: black,
rootFolderTitleColor: "#858585",
rootFolderTitleColor: "#ADADAD",
publicIcon: "#858585",
boxShadow: "0px 12px 40px 0px #00000066",
@ -2302,8 +2302,8 @@ const Dark = {
border: `1px solid #474747`,
breadCrumbs: {
prevItemColor: "#858585",
arrowRightColor: "#858585",
prevItemColor: "#ADADAD",
arrowRightColor: "#ADADAD",
},
bodyDescriptionText: "#858585",
@ -3183,6 +3183,12 @@ const Dark = {
descriptionColor: "#ADADAD",
},
infoBar: {
background: "#282828",
title: white,
description: "#ADADAD",
},
roomIcon: {
backgroundArchive: "#FFFFFF",
opacityBackground: "0.1",