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

Merge branch 'release/v2.5.0' into bugfix/selector

Browse Source
This commit is contained in:
Timofey Boyko 2024-04-09 10:05:48 +03:00
commit 565f9c25d9
18 changed files with 133 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/client/src/Client.jsx
View File

@ -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,

9
packages/client/src/components/Article/MainButton/MobileView.js
View File

@ -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;

10
packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
View File

@ -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) =>

8
packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
View File

@ -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}
>
<Avatar size="min" source={PlusReactSvgUrl} />
<div className="create-link-icon">
<IconButton size={12} iconName={PlusIcon} isDisabled />
</div>
<Link
isHovered
noHover
type="action"
fontSize="14px"
fontWeight={600}

15
packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js
View File

@ -73,12 +73,27 @@ const StyledLinkRow = styled.div`
gap: 12px;
height: 100%;
background: ${(props) => 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 {

19
packages/client/src/store/UploadDataStore.js
View File

@ -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({

6
packages/doceditor/scripts/buildTranslations.js
View File

@ -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,
);

47
packages/doceditor/src/components/ShareDialog.tsx
View File

@ -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 (
<>
<Backdrop
onClick={onCancel}
visible={isVisible}
zIndex={310}
isAside
withoutBackground={false}
withoutBlur={false}
/>
<Aside visible={isVisible} onClose={onCancel}>
<ModalDialog
visible={isVisible}
onClose={onCancel}
displayType={ModalDialogType.aside}
withBodyScroll
>
<ModalDialog.Header>{t("Common:Share")}</ModalDialog.Header>
<ModalDialog.Body>
<StyledWrapper>
<div className="share-file_header">
<Text className="share-file_heading">{t("Common:Share")}</Text>
</div>
<div className="share-file_body">
<Share infoPanelSelection={fileInfo} />
</div>
</StyledWrapper>
</Aside>
</>
</ModalDialog.Body>
</ModalDialog>
);
};

27
packages/doceditor/tsconfig.json
View File

@ -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"]
}

9
packages/shared/components/combobox/Combobox.styled.ts
View File

@ -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};
}
}

5
packages/shared/components/combobox/sub-components/ComboButton.tsx
View File

@ -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 (
<ComboButtonTheme
isOpen={isOpen}
@ -86,7 +88,7 @@ const ComboButton = (props: ComboButtonProps) => {
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 ? (

4
packages/shared/components/main-button/MainButton.tsx
View File

@ -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}
/>
</>
)}

1
packages/shared/components/more-login-modal/index.tsx
View File

@ -60,6 +60,7 @@ const MoreLoginModal: React.FC<MoreLoginModalProps> = (props) => {
visible={visible}
onClose={onClose}
displayType={ModalDialogType.aside}
withBodyScroll
>
<ModalDialog.Header>{t("Common:ContinueWith")}</ModalDialog.Header>
<ModalDialog.Body>

9
packages/shared/components/share/Share.styled.ts
View File

@ -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 };

34
packages/shared/components/share/index.tsx
View File

@ -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 (
<Text fontSize="12px" noSelect>
{t("Files:MaximumNumberOfExternalLinksCreated")}
</Text>
);
};
if (hideSharePanel) return null;
return (
@ -310,12 +321,23 @@ const Share = (props: ShareProps) => {
{t("Common:SharedLinks")}
</Text>
{fileLinks.length > 0 && (
<IconButton
className="link-to-viewing-icon"
iconName={LinksToViewingIconUrl}
onClick={addAdditionalLinks}
size={16}
/>
<div data-tooltip-id="file-links-tooltip" data-tip="tooltip">
<IconButton
className="link-to-viewing-icon"
iconName={LinksToViewingIconUrl}
onClick={addAdditionalLinks}
size={16}
isDisabled={fileLinks.length >= LINKS_LIMIT_COUNT}
/>
{fileLinks.length >= LINKS_LIMIT_COUNT && (
<Tooltip
float={isDesktop()}
id="file-links-tooltip"
getContent={getTextTooltip}
place="bottom"
/>
)}
</div>
)}
</div>
<LinkRow

11
packages/shared/components/share/sub-components/LinkRow.tsx
View File

@ -35,7 +35,7 @@ import { RowSkeleton } from "../../../skeletons/share";
import { TFileLink } from "../../../api/files/types";
import { copyShareLink } from "../../../utils/copy";
import { Avatar, AvatarRole, AvatarSize } from "../../avatar";
import { Link, LinkType } from "../../link";
import { Link } from "../../link";
import { ComboBox, ComboBoxSize, TOption } from "../../combobox";
import { IconButton } from "../../icon-button";
import { toastr } from "../../toast";
@ -67,16 +67,11 @@ const LinkRow = ({
};
return !links?.length ? (
<StyledLinkRow>
<StyledLinkRow onClick={onAddClick}>
<StyledSquare>
<IconButton size={12} iconName={PlusIcon} isDisabled />
</StyledSquare>
<Link
type={LinkType.action}
isHovered
fontWeight={600}
onClick={onAddClick}
>
<Link className="create-and-copy_link" noHover fontWeight={600}>
{t("Common:CreateAndCopy")}
</Link>
</StyledLinkRow>

1
packages/shared/themes/base.ts
View File

@ -2113,6 +2113,7 @@ export const getBaseTheme = () => {
roleSelectorColor: "#a3a9ae",
disabledRoleSelectorColor: "#a3a9ae",
roleSelectorArrowColor: "#a3a9ae",
createLink: "#a3a9ae",
},
history: {

1
packages/shared/themes/dark.ts
View File

@ -2084,6 +2084,7 @@ const Dark: TTheme = {
roleSelectorColor: "#a3a9ae",
disabledRoleSelectorColor: "#a3a9ae",
roleSelectorArrowColor: "#a3a9ae",
createLink: "#858585",
},
history: {