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

Web: Files: Public-room: added "Limit by time period" block

Browse Source
This commit is contained in:
Nikita Gopienko 2023-07-18 15:21:19 +03:00
parent d221c46cc2
commit 76a9126d4e
11 changed files with 101 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/client/public/locales/en/Files.json
View File

@ -145,5 +145,6 @@
"LinkRemovedSuccessfully": "Link removed successfully",
"Links": "Links",
"WantToRestoreTheRoom": "All external links in this room will become active, and its contents will be available to everyone with the link. Do you want to restore the room?",
"WantToRestoreTheRooms": "All external links in restored rooms will become active, and their contents will be available to everyone with the room links. Do you want to restore the rooms?"
"WantToRestoreTheRooms": "All external links in restored rooms will become active, and their contents will be available to everyone with the room links. Do you want to restore the rooms?",
"LinkValidUntil": "This link will be valid until"
}

3
packages/client/public/locales/en/Translations.json
View File

@ -71,5 +71,6 @@
"TypeTitleSkyDrive": "OneDrive",
"TypeTitleWebDav": "WebDAV",
"TypeTitleYandex": "Yandex.Disk",
"PublicRoomLinkValidTime": "This link is valid until {{date}} Once it expires, it will be impossible to access the room via this link."
"PublicRoomLinkValidTime": "This link is valid until {{date}} Once it expires, it will be impossible to access the room via this link.",
"LinkHasExpiredAndHasBeenDisabled": "The link has expired and has been disabled"
}

8
packages/client/src/components/panels/EditLinkPanel/LimitTimeBlock.js
View File

@ -3,12 +3,15 @@ import ToggleBlock from "./ToggleBlock";
import DateTimePicker from "@docspace/components/date-time-picker";
const LimitTimeBlock = (props) => {
const { isLoading, expirationDate, setExpirationDate } = props;
const { isLoading, expirationDate, setExpirationDate, isExpired } = props;
const onChange = (date) => {
setExpirationDate(date);
};
const minDate = new Date(new Date().getTime());
minDate.setDate(new Date().getDate() - 1);
return (
<ToggleBlock {...props} withToggle={false}>
<DateTimePicker
@ -16,6 +19,9 @@ const LimitTimeBlock = (props) => {
isDisabled={isLoading}
initialDate={expirationDate}
onChange={onChange}
minDate={minDate}
openDate={new Date()}
hasError={isExpired}
/>
</ToggleBlock>
);

15
packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
View File

@ -1,4 +1,4 @@
import styled from "styled-components";
import styled, { css } from "styled-components";
import Box from "@docspace/components/box";
import Scrollbar from "@docspace/components/scrollbar";
@ -58,6 +58,14 @@ const StyledEditLinkPanel = styled.div`
}
}
.edit-link-toggle-description {
color: ${({ theme }) => theme.editLink.text.color};
}
.edit-link-toggle-description_expired {
color: ${({ theme }) => theme.editLink.text.errorColor};
}
.edit-link_password-block {
width: 100%;
display: flex;
@ -90,6 +98,11 @@ const StyledEditLinkPanel = styled.div`
.public-room_date-picker {
padding-top: 8px;
${({ isExpired }) =>
isExpired &&
css`
color: ${({ theme }) => theme.datePicker.errorColor};
`};
}
`;

22
packages/client/src/components/panels/EditLinkPanel/ToggleBlock.js
View File

@ -10,6 +10,7 @@ const ToggleBlock = ({
onChange,
children,
withToggle = true,
isExpired,
}) => {
return (
<div className="edit-link-toggle-block">
@ -26,14 +27,19 @@ const ToggleBlock = ({
/>
)}
</div>
<Text
className="edit-link-toggle-description"
fontSize="12px"
fontWeight={400}
color="#A3A9AE"
>
{bodyText}
</Text>
{bodyText && (
<Text
className={
isExpired
? "edit-link-toggle-description_expired"
: "edit-link-toggle-description"
}
fontSize="12px"
fontWeight={400}
>
{bodyText}
</Text>
)}
{children}
</div>

17
packages/client/src/components/panels/EditLinkPanel/index.js
View File

@ -142,8 +142,18 @@ const EditLinkPanel = (props) => {
const linkNameIsValid = !!linkNameValue.trim();
const isExpired = expirationDate
? new Date(expirationDate).getTime() <= new Date().getTime()
: false;
const expiredLinkText = isExpired
? t("Translations:LinkHasExpiredAndHasBeenDisabled")
: expirationDate
? `${t("Files:LinkValidUntil")}:`
: t("Files:ChooseExpirationDate");
return (
<StyledEditLinkPanel>
<StyledEditLinkPanel isExpired={isExpired}>
<Backdrop
onClick={onClosePanel}
visible={visible}
@ -191,9 +201,10 @@ const EditLinkPanel = (props) => {
onChange={onDenyDownloadChange}
/>
<LimitTimeBlock
isExpired={isExpired}
isLoading={isLoading}
headerText={t("Files:LimitByTimePeriod")}
bodyText={t("Files:ChooseExpirationDate")}
bodyText={expiredLinkText}
expirationDate={expirationDate}
setExpirationDate={setExpirationDate}
/>
@ -206,7 +217,7 @@ const EditLinkPanel = (props) => {
primary
size="normal"
label={t("Common:SaveButton")}
isDisabled={isLoading || !linkNameIsValid}
isDisabled={isLoading || !linkNameIsValid || isExpired}
onClick={onSave}
/>
<Button

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

@ -39,14 +39,23 @@ const LinkRow = (props) => {
const [isLoading, setIsLoading] = useState(false);
const { title, shareLink, id, password, disabled, expirationDate } =
link.sharedTo;
const {
title,
shareLink,
id,
password,
disabled,
expirationDate,
isExpired,
} = link.sharedTo;
const isLocked = !!password;
const expiryDate = !!expirationDate;
const date = moment(expirationDate).format("LLL");
const tooltipContent = t("Translations:PublicRoomLinkValidTime", { date });
const tooltipContent = isExpired
? t("Translations:LinkHasExpiredAndHasBeenDisabled")
: t("Translations:PublicRoomLinkValidTime", { date });
const onEditLink = () => {
setEditLinkPanelIsVisible(true);
@ -54,6 +63,12 @@ const LinkRow = (props) => {
};
const onDisableLink = () => {
if (isExpired) {
setEditLinkPanelIsVisible(true);
setLinkParams({ isEdit: true, link });
return;
}
setIsLoading(true);
const newLink = JSON.parse(JSON.stringify(link));
@ -109,7 +124,7 @@ const LinkRow = (props) => {
// icon: ShareReactSvgUrl,
// // onClick: () => args.onClickLabel("label2"),
// },
{
!isExpired && {
key: "embedding-settings-key",
label: t("Files:EmbeddingSettings"),
icon: CodeReactSvgUrl,
@ -143,7 +158,7 @@ const LinkRow = (props) => {
};
return (
<StyledLinkRow {...rest}>
<StyledLinkRow {...rest} isExpired={isExpired}>
<Avatar
className="avatar"
size="min"

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

@ -1,4 +1,4 @@
import styled from "styled-components";
import styled, { css } from "styled-components";
import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
import commonIconsStyles from "@docspace/components/utils/common-icons-style";
@ -17,9 +17,6 @@ const StyledPublicRoomBar = styled.div`
flex-direction: column;
}
.header-icon {
}
.header-body {
display: flex;
height: fit-content;
@ -88,6 +85,18 @@ const StyledLinkRow = styled.div`
display: flex;
gap: 16px;
}
.avatar_role-wrapper {
${({ isExpired }) =>
isExpired &&
css`
svg {
path {
fill: #f98e86;
}
}
`}
}
`;
export { StyledPublicRoomBar, StyledCrossIcon, LinksBlock, StyledLinkRow };

1
packages/components/avatar/index.js
View File

@ -117,6 +117,7 @@ const Avatar = (props) => {
size={size}
data-for={uniqueTooltipId}
data-tip={tooltipContent}
className="avatar_role-wrapper"
>
{props.roleIcon ? props.roleIcon : roleIcon}
</RoleWrapper>

7
packages/components/themes/base.js
View File

@ -3119,6 +3119,13 @@ const Base = {
borderColor: "#A3A9AE",
dashedBorder: "1px dashed #5299E0",
},
editLink: {
text: {
color: "#A3A9AE",
errorColor: "#F21C0E",
},
},
};
export default Base;

7
packages/components/themes/dark.js
View File

@ -3123,6 +3123,13 @@ const Dark = {
borderColor: "#858585",
dashedBorder: "1px dashed #fff",
},
editLink: {
text: {
color: "#A3A9AE",
errorColor: "#F21C0E",
},
},
};
export default Dark;