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

Web: Files: added VDR-lifetime

Browse Source
This commit is contained in:
Nikita Gopienko 2023-11-22 15:55:19 +03:00
parent ec75beee04
commit 02ff6d65f6
10 changed files with 172 additions and 16 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

@ -176,5 +176,6 @@
"WantToRestoreTheRoom": "All shared 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 shared 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?",
"WithSubfolders": "With subfolders",
"YouLeftTheRoom": "You have left the room"
"YouLeftTheRoom": "You have left the room",
"RoomFilesLifetime": "The file lifetime is set to {{days}} days in this room"
}

59
packages/client/src/components/QuickButtons.js
View File

@ -4,14 +4,28 @@ import LinkReactSvgUrl from "PUBLIC_DIR/images/link.react.svg?url";
import LockedReactSvgUrl from "PUBLIC_DIR/images/locked.react.svg?url";
import FileActionsFavoriteReactSvgUrl from "PUBLIC_DIR/images/file.actions.favorite.react.svg?url";
import FavoriteReactSvgUrl from "PUBLIC_DIR/images/favorite.react.svg?url";
import React from "react";
import LifetimeReactSvgUrl from "PUBLIC_DIR/images/lifetime.react.svg?url";
import styled from "styled-components";
import IconButton from "@docspace/components/icon-button";
import commonIconsStyles from "@docspace/components/utils/common-icons-style";
import { isTablet } from "@docspace/components/utils/device";
import { FileStatus, RoomsType } from "@docspace/common/constants";
import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
import Tooltip from "@docspace/components/tooltip";
import Text from "@docspace/components/text";
const StyledQuickButtons = styled.div`
.file-lifetime {
svg {
rect {
fill: ${({ theme }) => theme.filesQuickButtons.lifeTimeColor};
}
circle,
path {
stroke: ${({ theme }) => theme.filesQuickButtons.lifeTimeColor};
}
}
}
`;
const QuickButtons = (props) => {
const {
@ -71,8 +85,41 @@ const QuickButtons = (props) => {
!isArchiveFolder &&
!isTile;
//const showLifetimeIcon = item.lifetime < item.lifetime * 0.1
//TODO:
const getTooltipContent = () => (
<Text fontSize="12px" fontWeight={400} noSelect>
The file will be deleted after 1 day and 2 hours.
</Text>
);
return (
<div className="badges additional-badges badges__quickButtons">
<StyledQuickButtons className="badges additional-badges badges__quickButtons">
{/* */}
{isAvailableLockFile && (
<>
<ColorTheme
themeId={ThemeType.IconButton}
iconName={LifetimeReactSvgUrl}
className="badge file-lifetime icons-group"
size={sizeQuickButton}
isClickable
isDisabled={isDisabled}
data-tooltip-id="lifetimeTooltip"
color={theme.filesQuickButtons.lifeTimeColor}
/>
<Tooltip
id="lifetimeTooltip"
place="bottom"
getContent={getTooltipContent}
maxWidth="300px"
/>
</>
)}
{/* */}
{isAvailableLockFile && (
<ColorTheme
themeId={ThemeType.IconButton}
@ -128,7 +175,7 @@ const QuickButtons = (props) => {
hoverColor={theme.filesQuickButtons.hoverColor}
/>
)} */}
</div>
</StyledQuickButtons>
);
};

31
packages/client/src/pages/Home/Section/Header/index.js
View File

@ -28,6 +28,7 @@ import PersonUserReactSvgUrl from "PUBLIC_DIR/images/person.user.react.svg?url";
import InviteAgainReactSvgUrl from "PUBLIC_DIR/images/invite.again.react.svg?url";
import PublicRoomIconUrl from "PUBLIC_DIR/images/public-room.react.svg?url";
import PluginMoreReactSvgUrl from "PUBLIC_DIR/images/plugin.more.react.svg?url";
import LifetimeRoomIconUrl from "PUBLIC_DIR/images/lifetime-room.react.svg?url";
import React from "react";
import { inject, observer } from "mobx-react";
@ -123,6 +124,21 @@ const StyledContainer = styled.div`
height: 53px;
}
}
${(props) =>
props.isVirtualDataRoomType &&
css`
.title-icon {
svg {
path {
fill: ${({ theme }) =>
theme.navigation.lifetimeIconFill} !important;
stroke: ${({ theme }) =>
theme.navigation.lifetimeIconStroke} !important;
}
}
}
`}
`;
const SectionHeaderContent = (props) => {
@ -218,6 +234,7 @@ const SectionHeaderContent = (props) => {
setRoomSharingPanelVisible,
downloadAction,
isPublicRoomType,
isVirtualDataRoomType,
isCustomRoomType,
primaryLink,
getPrimaryLink,
@ -1009,12 +1026,19 @@ const SectionHeaderContent = (props) => {
? getLogoFromPath(whiteLabelLogoUrls[5]?.path?.dark)
: getLogoFromPath(whiteLabelLogoUrls[5]?.path?.light);
const titleIcon =
(isPublicRoomType && !isPublicRoom && PublicRoomIconUrl) ||
(isVirtualDataRoomType && LifetimeRoomIconUrl);
const titleIconTooltip = t("Files:RoomFilesLifetime", { days: 12 }); // TODO: days
return (
<Consumer key="header">
{(context) => (
<StyledContainer
isRecycleBinFolder={isRecycleBinFolder}
hideContextMenuInsideArchiveRoom={hideContextMenuInsideArchiveRoom}
isVirtualDataRoomType={isVirtualDataRoomType}
>
{tableGroupMenuVisible ? (
<TableGroupMenu {...tableGroupMenuProps} />
@ -1066,9 +1090,8 @@ const SectionHeaderContent = (props) => {
withLogo={isPublicRoom && logo}
burgerLogo={isPublicRoom && burgerLogo}
isPublicRoom={isPublicRoom}
titleIcon={
currentIsPublicRoomType && !isPublicRoom && PublicRoomIconUrl
}
titleIcon={titleIcon}
titleIconTooltip={titleIconTooltip}
showRootFolderTitle={insideTheRoom}
currentDeviceType={currentDeviceType}
isFrame={isFrame}
@ -1196,6 +1219,7 @@ export default inject(
const isRoom = !!roomType;
const isPublicRoomType = roomType === RoomsType.PublicRoom;
const isVirtualDataRoomType = roomType === RoomsType.VirtualDataRoom;
const isCustomRoomType = roomType === RoomsType.CustomRoom;
const {
@ -1330,6 +1354,7 @@ export default inject(
moveToRoomsPage,
onClickBack,
isPublicRoomType,
isVirtualDataRoomType,
isCustomRoomType,
isPublicRoom,
primaryLink,

35
packages/common/components/Navigation/Navigation.js
View File

@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import StyledContainer from "./StyledNavigation";
import ArrowButton from "./sub-components/arrow-btn";
import Text from "./sub-components/text";
import NavigationText from "./sub-components/text";
import ControlButtons from "./sub-components/control-btn";
import DropBox from "./sub-components/drop-box";
@ -17,6 +17,8 @@ import { ReactSVG } from "react-svg";
import ToggleInfoPanelButton from "./sub-components/toggle-infopanel-btn";
import TrashWarning from "./sub-components/trash-warning";
import NavigationLogo from "./sub-components/logo-block";
import Tooltip from "@docspace/components/tooltip";
import Text from "@docspace/components/text";
import { DeviceType } from "../../constants";
const Navigation = ({
@ -52,9 +54,9 @@ const Navigation = ({
burgerLogo,
isPublicRoom,
titleIcon,
titleIconTooltip,
currentDeviceType,
rootRoomTitle,
...rest
}) => {
const [isOpen, setIsOpen] = React.useState(false);
@ -141,10 +143,30 @@ const Navigation = ({
const navigationTitleNode = (
<div className="title-block">
{titleIcon && <ReactSVG className="title-icon" src={titleIcon} />}
<Text
{titleIcon && (
<ReactSVG
data-tooltip-id="iconTooltip"
className="title-icon"
src={titleIcon}
/>
)}
{titleIconTooltip && (
<Tooltip
id="iconTooltip"
place="bottom"
getContent={() => (
<Text fontSize="12px" fontWeight={400} noSelect>
{titleIconTooltip}
</Text>
)}
maxWidth="300px"
/>
)}
<NavigationText
title={title}
isOpen={isOpen}
isOpen={false}
isRootFolder={isRootFolder}
onClick={toggleDropBox}
/>
@ -153,7 +175,7 @@ const Navigation = ({
const navigationTitleContainerNode = showRootFolderNavigation ? (
<div className="title-container">
<Text
<NavigationText
className="room-title"
title={
rootRoomTitle || navigationItems[navigationItems.length - 2].title
@ -217,6 +239,7 @@ const Navigation = ({
titleIcon={titleIcon}
currentDeviceType={currentDeviceType}
navigationTitleContainerNode={navigationTitleContainerNode}
titleIconTooltip={titleIconTooltip}
/>
</>
)}

14
packages/components/selector/sub-components/Item/StyledItem.ts
View File

@ -65,6 +65,20 @@ const StyledItem = styled.div<{
}
}
`}
.selector-item_name {
display: flex;
align-items: center;
gap: 6px;
svg {
path {
fill: ${({ theme }) => theme.navigation.lifetimeIconFill} !important;
stroke: ${({ theme }) =>
theme.navigation.lifetimeIconStroke} !important;
}
}
}
`;
StyledItem.defaultProps = { theme: Base };

34
packages/components/selector/sub-components/Item/index.tsx
View File

@ -7,6 +7,9 @@ import RoomIcon from "../../../room-icon";
import StyledItem from "./StyledItem";
import { ItemProps, Data, Item as ItemType } from "./Item.types";
import { ReactSVG } from "react-svg";
import LifetimeRoomIconUrl from "PUBLIC_DIR/images/lifetime-room.react.svg?url";
import Tooltip from "../../../tooltip";
const compareFunction = (prevProps: ItemProps, nextProps: ItemProps) => {
const prevData = prevProps.data;
@ -82,6 +85,37 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
) : (
<img className="room-logo" src={icon} alt="room logo" />
)}
<div className="selector-item_name">
<Text
className="label"
fontWeight={600}
fontSize={"14px"}
noSelect
truncate
>
{label}
</Text>
{true && (
<>
<ReactSVG
data-tooltip-id="iconTooltip"
className="title-icon"
src={LifetimeRoomIconUrl}
/>
<Tooltip
id="iconTooltip"
place="bottom"
getContent={() => (
<Text fontSize="12px" fontWeight={400} noSelect>
aaaaaaaaaa
</Text>
)}
maxWidth="300px"
/>
</>
)}
</div>
<Text
className="label"

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

@ -1948,6 +1948,8 @@ const Base = {
background: white,
rootFolderTitleColor: "#A3A9AE",
publicIcon: black,
lifetimeIconFill: "#f2675a",
lifetimeIconStroke: "#f2675a",
icon: {
fill: "#316DAA",

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

@ -1943,6 +1943,8 @@ const Dark = {
background: black,
rootFolderTitleColor: "#858585",
publicIcon: "#858585",
lifetimeIconFill: "none",
lifetimeIconStroke: "#657077",
icon: {
fill: "#E06A1B",

3
public/images/lifetime-room.react.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.29161 8.29084C3.35982 8.64692 3.4449 8.99697 3.55132 9.31623C3.75317 9.92178 4.14601 10.3844 4.6771 10.6278C5.18859 10.8623 5.73524 10.8507 6.19123 10.6987C6.64256 10.5482 7.07413 10.2374 7.33699 9.77739C7.61595 9.28921 7.66898 8.68902 7.41915 8.10608C6.78953 6.63698 6.88202 5.03002 7.37839 3.65122C7.60976 3.00852 7.9148 2.45209 8.24405 2.0037C8.40619 2.60299 8.64385 3.12067 8.94095 3.58119C9.47219 4.4046 10.1678 4.99418 10.7477 5.48566C10.783 5.51561 10.8179 5.54519 10.8524 5.57444C11.4796 6.10764 11.9845 6.56006 12.359 7.19042C12.7212 7.80008 13 8.64846 13 10C13 12.7614 10.7614 15 8 15C5.23858 15 3 12.7614 3 10C3 9.40715 3.11554 8.8279 3.29161 8.29084Z" stroke="#657077" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 815 B

5
public/images/lifetime.react.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="5" width="6" height="2" rx="1" fill="#F2675A"/>
<circle cx="8" cy="9" r="6" stroke="#F2675A" stroke-width="2"/>
<path d="M8 5V9L10 11" stroke="#F2675A" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 283 B