diff --git a/packages/client/src/Client.jsx b/packages/client/src/Client.jsx index d6d9797f35..fca4c8eff2 100644 --- a/packages/client/src/Client.jsx +++ b/packages/client/src/Client.jsx @@ -230,6 +230,7 @@ const Client = inject( const { isInit: isInitPlugins, initPlugins } = pluginStore; const { isVisible } = infoPanelStore; + const isProfile = window.location.pathname.includes("/profile"); return { isDesktop: isDesktopClient, @@ -244,7 +245,7 @@ const Client = inject( isLoaded: authStore.isLoaded && clientLoadingStore.isLoaded, setIsLoaded: clientLoadingStore.setIsLoaded, withMainButton, - isInfoPanelVisible: isVisible, + isInfoPanelVisible: isVisible && !isProfile, setIsFilterLoading: setIsSectionFilterLoading, setIsHeaderLoading: setIsSectionHeaderLoading, isLoading, diff --git a/packages/client/src/components/Article/MainButton/MobileView.js b/packages/client/src/components/Article/MainButton/MobileView.js index 9961aff199..0d3ff8d12f 100644 --- a/packages/client/src/components/Article/MainButton/MobileView.js +++ b/packages/client/src/components/Article/MainButton/MobileView.js @@ -31,6 +31,7 @@ import styled, { css } from "styled-components"; import { inject, observer } from "mobx-react"; import { mobile } from "@docspace/shared/utils"; +import { isMobileOnly } from "react-device-detect"; import { MainButtonMobile } from "@docspace/shared/components/main-button-mobile"; @@ -41,10 +42,14 @@ const StyledMainButtonMobile = styled(MainButtonMobile)` ${(props) => props.theme.interfaceDirection === "rtl" ? css` - left: 24px; + left: ${isMobileOnly + ? "calc(16px + env(safe-area-inset-left))" + : "24px"}; ` : css` - right: 24px; + right: ${isMobileOnly + ? "calc(16px + env(safe-area-inset-right))" + : "24px"}; `} bottom: 24px; diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js index bbe20d2f59..26794450d2 100644 --- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js +++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js @@ -498,12 +498,16 @@ const StyledInviteLanguage = styled.div` padding-left: 6px; padding-right: 6px; } - .combo-button-label { + + .combo-buttons_arrow-icon { + margin-left: 0px; + } + + .combo-button_closed:not(:hover) .combo-button-label { color: ${(props) => props.theme.createEditRoomDialog.commonParam.descriptionColor}; } - .combo-buttons_arrow-icon { - margin-left: 0px; + .combo-button_closed:not(:hover) .combo-buttons_arrow-icon { svg { path { fill: ${(props) => diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js index dafdf25091..0637a5329b 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js @@ -45,7 +45,7 @@ import { IconButton } from "@docspace/shared/components/icon-button"; import { Tooltip } from "@docspace/shared/components/tooltip"; import { isDesktop } from "@docspace/shared/utils"; import LinksToViewingIconUrl from "PUBLIC_DIR/images/links-to-viewing.react.svg?url"; -import PlusReactSvgUrl from "PUBLIC_DIR/images/actions.button.plus.react.svg?url"; +import PlusIcon from "PUBLIC_DIR/images/plus.react.svg?url"; import { Avatar } from "@docspace/shared/components/avatar"; import { copyShareLink } from "@docspace/shared/utils/copy"; @@ -216,10 +216,12 @@ const Members = ({ className="additional-link" onClick={onAddNewLink} > - +
+ +
props.theme.backgroundColor}; + cursor: pointer; + + .icon-button_svg { + cursor: pointer; + } + + .create-link-icon { + display: flex; + align-items: center; + justify-content: center; + border-radius: 3px; + padding: 10px; + background: ${(props) => props.theme.avatar.icon.background}; + } .external-row-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; + color: ${({ theme }) => theme.infoPanel.members.createLink}; } .external-row-icons { diff --git a/packages/client/src/store/UploadDataStore.js b/packages/client/src/store/UploadDataStore.js index 18237ba389..f17f34224f 100644 --- a/packages/client/src/store/UploadDataStore.js +++ b/packages/client/src/store/UploadDataStore.js @@ -763,7 +763,7 @@ class UploadDataStore { fileId: null, toFolderId, action: "upload", - error: file.size ? null : t("EmptyFile"), + error: file.size ? null : t("Files:EmptyFile"), fileInfo: null, cancel: false, needConvert, @@ -938,7 +938,12 @@ class UploadDataStore { } = chunkUploadObj; if (!res.data.data && res.data.message) { - return reject(res.data.message); + return reject({ + message: res.data.message, + chunkIndex: index, + chunkSize: fileSize, + isFinalize, + }); } const { uploaded, id: fileId, file: fileInfo } = res.data.data; @@ -1451,8 +1456,16 @@ class UploadDataStore { this.files[indexOfFile].error = errorMessage; + const index = error?.chunkIndex ?? 0; + + const uploadedSize = error?.isFinalize + ? 0 + : fileSize <= chunkUploadSize + ? fileSize + : fileSize - index * chunkUploadSize; + const newPercent = this.isParallel - ? this.getFilesPercent(fileSize) + ? this.getFilesPercent(uploadedSize) : this.getNewPercent(fileSize, indexOfFile); this.primaryProgressDataStore.setPrimaryProgressBarData({ diff --git a/packages/doceditor/scripts/buildTranslations.js b/packages/doceditor/scripts/buildTranslations.js index c53cfbe977..718986bfee 100644 --- a/packages/doceditor/scripts/buildTranslations.js +++ b/packages/doceditor/scripts/buildTranslations.js @@ -33,7 +33,11 @@ beforeBuild( path.join(__dirname, "../../../public/locales"), ], path.join(__dirname, "../src/utils/autoGeneratedTranslations.js"), - null, + { + path: path.join(__dirname, "../../client/public/locales"), + files: ["Files.json"], + alias: "CLIENT_PUBLIC_DIR", + }, true, ); diff --git a/packages/doceditor/src/components/ShareDialog.tsx b/packages/doceditor/src/components/ShareDialog.tsx index 8a97cf1ec7..d57e6be42a 100644 --- a/packages/doceditor/src/components/ShareDialog.tsx +++ b/packages/doceditor/src/components/ShareDialog.tsx @@ -29,9 +29,10 @@ import styled from "styled-components"; import { useTranslation } from "react-i18next"; import Share from "@docspace/shared/components/share"; -import { Backdrop } from "@docspace/shared/components/backdrop"; -import { Aside } from "@docspace/shared/components/aside"; -import { Text } from "@docspace/shared/components/text"; +import { + ModalDialog, + ModalDialogType, +} from "@docspace/shared/components/modal-dialog"; import { NoUserSelect } from "@docspace/shared/utils/commonStyles"; import { Base } from "@docspace/shared/themes"; import { TFile } from "@docspace/shared/api/files/types"; @@ -42,21 +43,6 @@ const StyledWrapper = styled.div` height: 100%; display: flex; flex-direction: column; - - .share-file_header { - padding: 12px 16px; - border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom}; - - .share-file_heading { - font-size: 21px; - font-weight: 700; - line-height: 28px; - } - } - - .share-file_body { - padding: 16px; - } `; StyledWrapper.defaultProps = { theme: Base }; @@ -75,26 +61,21 @@ const SharingDialog = ({ const { t } = useTranslation(["Common"]); return ( - <> - - - + + ); }; diff --git a/packages/doceditor/tsconfig.json b/packages/doceditor/tsconfig.json index 147aeeb3d0..62d94935ef 100644 --- a/packages/doceditor/tsconfig.json +++ b/packages/doceditor/tsconfig.json @@ -1,14 +1,8 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "types": [ - "./index.d.ts" - ], + "lib": ["dom", "dom.iterable", "esnext"], + "types": ["./index.d.ts"], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -26,15 +20,10 @@ } ], "paths": { - "@/*": [ - "./src/*" - ], - "PUBLIC_DIR/*": [ - "../../public/*" - ], - "ASSETS_DIR/*": [ - "./public/*" - ] + "@/*": ["./src/*"], + "PUBLIC_DIR/*": ["../../public/*"], + "ASSETS_DIR/*": ["./public/*"], + "CLIENT_PUBLIC_DIR/*": ["../client/public/*"] } }, "include": [ @@ -45,7 +34,5 @@ "next.config.js", "./.next/types/**/*.ts" ], - "exclude": [ - "node_modules" - ] + "exclude": ["node_modules"] } diff --git a/packages/shared/components/combobox/Combobox.styled.ts b/packages/shared/components/combobox/Combobox.styled.ts index fe73bd6f0c..9cc6276d99 100644 --- a/packages/shared/components/combobox/Combobox.styled.ts +++ b/packages/shared/components/combobox/Combobox.styled.ts @@ -243,7 +243,6 @@ const StyledComboButton = styled.div<{ ${(props) => !props.noBorder && - !props.type && ` border: ${props.theme.comboBox.button.border}; border-radius: ${props.theme.comboBox.button.borderRadius}; @@ -303,7 +302,7 @@ const StyledComboButton = styled.div<{ border-color: ${props.theme.comboBox.button.hoverDisabledBorderColor}; `} - ${(props) => props.modernView && hoverModernViewButton} + ${(props) => props.modernView && !props.isDisabled && hoverModernViewButton} ${({ fillIcon }) => @@ -475,6 +474,7 @@ const StyledArrowIcon = styled.div<{ isLoading?: boolean; displayArrow?: boolean; isOpen?: boolean; + isDisabled?: boolean; }>` display: flex; align-self: center; @@ -483,7 +483,10 @@ const StyledArrowIcon = styled.div<{ .combo-buttons_expander-icon { path { - fill: ${(props) => props.theme.comboBox.label.selectedColor}; + fill: ${(props) => + props.isDisabled + ? props.theme.comboBox.label.disabledColor + : props.theme.comboBox.label.selectedColor}; } } diff --git a/packages/shared/components/combobox/sub-components/ComboButton.tsx b/packages/shared/components/combobox/sub-components/ComboButton.tsx index fd43236032..8a113e3bc8 100644 --- a/packages/shared/components/combobox/sub-components/ComboButton.tsx +++ b/packages/shared/components/combobox/sub-components/ComboButton.tsx @@ -74,6 +74,8 @@ const ComboButton = (props: ComboButtonProps) => { // const isSelected = selectedOption?.key !== 0; const displayArrow = withOptions || withAdvancedOptions; + const comboButtonClassName = `combo-button combo-button_${isOpen ? "open" : "closed"}`; + return ( { size={size} // isSelected={isSelected} modernView={modernView} - className="combo-button" + className={comboButtonClassName} tabIndex={tabIndex} displayArrow={displayArrow} isLoading={isLoading} @@ -152,6 +154,7 @@ const ComboButton = (props: ComboButtonProps) => { isOpen={isOpen} className="combo-buttons_arrow-icon" isLoading={isLoading} + isDisabled={isDisabled} > {displayArrow && (comboIcon ? ( diff --git a/packages/shared/components/main-button/MainButton.tsx b/packages/shared/components/main-button/MainButton.tsx index 0624a8d326..9a6ef1c614 100644 --- a/packages/shared/components/main-button/MainButton.tsx +++ b/packages/shared/components/main-button/MainButton.tsx @@ -46,7 +46,7 @@ const MainButton = (props: MainButtonProps) => { hide: (e: React.MouseEvent) => void; }>(null); - const [isOpen, setIsOpen] = useState(opened); + const [isOpen, setIsOpen] = useState(opened || false); const stopAction = (e: React.MouseEvent) => e.preventDefault(); @@ -95,7 +95,7 @@ const MainButton = (props: MainButtonProps) => { model={model} containerRef={ref} ref={menuRef} - onHide={onHide} + // onHide={onHide} /> )} diff --git a/packages/shared/components/more-login-modal/index.tsx b/packages/shared/components/more-login-modal/index.tsx index 00764cfeb1..ff0c204f64 100644 --- a/packages/shared/components/more-login-modal/index.tsx +++ b/packages/shared/components/more-login-modal/index.tsx @@ -60,6 +60,7 @@ const MoreLoginModal: React.FC = (props) => { visible={visible} onClose={onClose} displayType={ModalDialogType.aside} + withBodyScroll > {t("Common:ContinueWith")} diff --git a/packages/shared/components/share/Share.styled.ts b/packages/shared/components/share/Share.styled.ts index f3d4aaf5a5..e890a41e60 100644 --- a/packages/shared/components/share/Share.styled.ts +++ b/packages/shared/components/share/Share.styled.ts @@ -101,6 +101,11 @@ const StyledLinkRow = styled.div` height: 32px; width: 32px; } + + .create-and-copy_link { + width: 100%; + color: ${({ theme }) => theme.infoPanel.members.createLink}; + } `; const StyledSquare = styled.div` @@ -110,6 +115,10 @@ const StyledSquare = styled.div` border-radius: 3px; padding: 10px; background: ${(props) => props.theme.avatar.icon.background}; + cursor: pointer; + .icon-button_svg { + cursor: pointer; + } `; export { StyledLinks, StyledLinkRow, StyledSquare }; diff --git a/packages/shared/components/share/index.tsx b/packages/shared/components/share/index.tsx index 81dc9d84bf..60930e1ebd 100644 --- a/packages/shared/components/share/index.tsx +++ b/packages/shared/components/share/index.tsx @@ -32,6 +32,7 @@ import InfoIcon from "PUBLIC_DIR/images/info.outline.react.svg?url"; import LinksToViewingIconUrl from "PUBLIC_DIR/images/links-to-viewing.react.svg?url"; import { ShareAccessRights } from "../../enums"; +import { LINKS_LIMIT_COUNT } from "../../constants"; import { addExternalLink, editExternalLink, @@ -39,10 +40,12 @@ import { getPrimaryLink, } from "../../api/files"; import { TAvailableExternalRights, TFileLink } from "../../api/files/types"; +import { isDesktop } from "../../utils"; import { copyShareLink } from "../../utils/copy"; import { TOption } from "../combobox"; import { Text } from "../text"; import { IconButton } from "../icon-button"; +import { Tooltip } from "../tooltip"; import { toastr } from "../toast"; import { TData } from "../toast/Toast.type"; import PublicRoomBar from "../public-room-bar"; @@ -292,6 +295,14 @@ const Share = (props: ShareProps) => { } }; + const getTextTooltip = () => { + return ( + + {t("Files:MaximumNumberOfExternalLinksCreated")} + + ); + }; + if (hideSharePanel) return null; return ( @@ -310,12 +321,23 @@ const Share = (props: ShareProps) => { {t("Common:SharedLinks")} {fileLinks.length > 0 && ( - +
+ = LINKS_LIMIT_COUNT} + /> + {fileLinks.length >= LINKS_LIMIT_COUNT && ( + + )} +
)} + - + {t("Common:CreateAndCopy")} diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index 9df3280396..865f036d46 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -2113,6 +2113,7 @@ export const getBaseTheme = () => { roleSelectorColor: "#a3a9ae", disabledRoleSelectorColor: "#a3a9ae", roleSelectorArrowColor: "#a3a9ae", + createLink: "#a3a9ae", }, history: { diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index e7b848714a..dac5e988e5 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -2084,6 +2084,7 @@ const Dark: TTheme = { roleSelectorColor: "#a3a9ae", disabledRoleSelectorColor: "#a3a9ae", roleSelectorArrowColor: "#a3a9ae", + createLink: "#858585", }, history: {