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

Web: Client: InfoPanel: history restyled

Browse Source
This commit is contained in:
Elyor Djalilov 2024-08-19 12:25:41 +05:00
parent 59651b5d4c
commit 1cc547cbe2
16 changed files with 342 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
packages/client/src/pages/Home/InfoPanel/Body/styles/history.js
View File

@ -71,7 +71,11 @@ const StyledHistoryBlock = styled.div`
.title {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.name {
font-weight: 600;
font-size: 14px;
@ -87,14 +91,27 @@ const StyledHistoryBlock = styled.div`
font-size: 12px;
color: ${(props) => props.theme.infoPanel.history.dateColor};
}
.users-counter {
margin-bottom: 1px;
}
}
}
`;
const StyledHistoryDisplaynameBlock = styled.div`
.name {
color: ${(props) => props.theme.infoPanel.history.subtitleColor};
}
`;
const StyledHistoryBlockMessage = styled.div`
font-weight: 400;
font-size: 13px;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-flex;
gap: 4px;
@ -137,9 +154,7 @@ const StyledHistoryBlockMessage = styled.div`
const StyledHistoryLink = styled.span`
display: inline-block;
white-space: normal;
margin: 1px 0;
.text {
font-size: 13px;
@ -168,16 +183,14 @@ const StyledHistoryBlockTagList = styled.div`
`;
const StyledHistoryBlockFilesList = styled.div`
margin-top: 8px;
display: flex;
flex-direction: column;
padding: 8px 0;
background: ${(props) => props.theme.infoPanel.history.fileBlockBg};
border-radius: 3px;
`;
const StyledHistoryBlockFile = styled.div`
padding: 4px 16px;
padding: 4px 0px;
display: flex;
gap: 8px;
flex-direction: row;
@ -187,15 +200,41 @@ const StyledHistoryBlockFile = styled.div`
.icon {
width: 24px;
height: 24px;
margin-inline-end: 5px;
svg {
width: 24px;
height: 24px;
}
}
.item-wrapper,
.old-item-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid
${(props) => props.theme.infoPanel.history.itemBorderColor};
border-radius: 6px;
padding: 6px 8px;
&:hover {
cursor: ${(props) => (props.isFolder ? "auto" : "pointer")};
background-color: ${(props) =>
!props.isFolder && props.theme.infoPanel.history.fileBackgroundColor};
}
}
.old-item-wrapper {
border: none;
&:hover {
cursor: auto;
background-color: transparent;
}
}
.item-title {
font-weight: 600;
font-size: 14px;
font-size: 13px;
display: flex;
min-width: 0;
gap: 0;
@ -224,8 +263,15 @@ const StyledHistoryBlockFile = styled.div`
}
.location-btn {
margin-inline-start: auto;
margin-inline-start: 8px;
min-width: 16px;
opacity: 0;
}
&:hover {
.location-btn {
opacity: 1;
}
}
`;
@ -237,7 +283,7 @@ const StyledHistoryBlockExpandLink = styled.div`
&.files-list-expand-link {
margin-top: 8px;
margin-inline-start: 20px;
margin-inline-start: 5px;
}
&.user-list-expand-link {
@ -268,4 +314,5 @@ export {
StyledHistoryBlockFile,
StyledHistoryBlockTagList,
StyledHistoryBlockExpandLink,
StyledHistoryDisplaynameBlock,
};

6
packages/client/src/pages/Home/InfoPanel/Body/views/History/FeedInfo.ts
View File

@ -21,7 +21,11 @@ enum FeedTarget {
Group = "group",
}
export type AnyFeedInfo = (typeof feedInfo)[number];
export type AnyFeedInfo = {
key: string;
actionType: FeedAction;
targetType: FeedTarget;
};
export type ActionByTarget<T extends `${FeedTarget}`> = Extract<
AnyFeedInfo,

24
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js
View File

@ -26,16 +26,13 @@
import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url";
import { Avatar } from "@docspace/shared/components/avatar";
import { Text } from "@docspace/shared/components/text";
import DefaultUserAvatarSmall from "PUBLIC_DIR/images/default_user_photo_size_32-32.png";
import { StyledHistoryBlock } from "../../styles/history";
import { getDateTime } from "../../helpers/HistoryHelper";
import { decode } from "he";
import DefaultUserAvatarSmall from "PUBLIC_DIR/images/default_user_photo_size_32-32.png";
import HistoryTitleBlock from "./HistoryBlockContent/HistoryTitleBlock";
import HistoryBlockContent from "./HistoryBlockContent";
const HistoryBlock = ({ t, feed, isLastEntity }) => {
const { action, initiator, date } = feed;
const { action, initiator } = feed;
const isUserAction =
action.key === "RoomCreateUser" ||
@ -60,20 +57,7 @@ const HistoryBlock = ({ t, feed, isLastEntity }) => {
}
/>
<div className="info">
<div className="title">
<Text className="name">
{initiator?.isAnonim
? t("Common:Anonymous")
: decode(initiator.displayName)}
</Text>
{initiator.isOwner && (
<Text className="secondary-info">
{t("Common:Owner").toLowerCase()}
</Text>
)}
<Text className="date">{getDateTime(date)}</Text>
</div>
<HistoryTitleBlock t={t} feed={feed} />
<HistoryBlockContent feed={feed} />
</div>
</StyledHistoryBlock>

8
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/GroupList.tsx
View File

@ -25,24 +25,26 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { useState } from "react";
import { useNavigate, NavigateFunction } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { decode } from "he";
import { inject, observer } from "mobx-react";
import { Link } from "@docspace/shared/components/link";
import { Text } from "@docspace/shared/components/text";
import { Trans, withTranslation } from "react-i18next";
import { TTranslation } from "@docspace/shared/types";
import { TSetSelectedFolder } from "../../../../../../../store/SelectedFolderStore";
import { Feed } from "./HistoryBlockContent.types";
import {
StyledHistoryBlockExpandLink,
StyledHistoryLink,
} from "../../../styles/history";
import { TSetSelectedFolder } from "../../../../../../../store/SelectedFolderStore.ts";
const EXPANSION_THRESHOLD = 8;
interface HistoryGroupListProps {
t: TTranslation;
feed: any;
feed: Feed;
isVisitor?: boolean;
isCollaborator?: boolean;
setPeopleSelection?: (newSelection: any[]) => void;

72
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/HistoryBlockContent.types.ts Normal file
View File

@ -0,0 +1,72 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { TTranslation } from "@docspace/shared/types";
export interface HistoryBlockContentProps {
t: TTranslation;
feed: Feed;
historyWithFileList?: boolean;
}
interface UserData {
avatar: string;
avatarSmall: string;
avatarMedium: string;
avatarMax: string;
avatarOriginal: string;
displayName: string;
hasAvatar: boolean;
id: string;
isAnonim: boolean;
profileUrl: string;
tags: [];
access: string;
oldAccess: string;
parentId: number;
toFolderId: number;
parentTitle: string;
parentType: number;
fromParentType: number;
fromParentTitle: string;
}
interface RelatedAction {
action: UserData;
initiator: UserData;
date: string;
data: UserData;
}
export interface Feed {
action: {
id: number;
key: string;
};
data: UserData;
date: string;
initiator: UserData;
related: RelatedAction[];
}

64
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/HistoryTitleBlock.tsx Normal file
View File

@ -0,0 +1,64 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { Text } from "@docspace/shared/components/text";
import { useFeedTranslation } from "../useFeedTranslation";
import { getDateTime } from "../../../helpers/HistoryHelper";
import { getFeedInfo } from "../FeedInfo";
import HistoryUserList from "./UserList";
import HistoryMainTextFolderInfo from "./MainTextFolderInfo";
import { HistoryBlockContentProps } from "./HistoryBlockContent.types";
const HistoryTitleBlock = ({ t, feed }: HistoryBlockContentProps) => {
const { actionType, targetType } = getFeedInfo(feed);
const hasRelatedItems = feed.related.length > 0;
return (
<div className="title">
{targetType === "user" && actionType === "update" && (
<HistoryUserList feed={feed} />
)}
{useFeedTranslation(t, feed, hasRelatedItems)}
{hasRelatedItems && (
<Text className="users-counter">({feed.related.length + 1}).</Text>
)}
{(targetType === "file" || targetType === "folder") &&
actionType !== "delete" && <HistoryMainTextFolderInfo feed={feed} />}
{feed.related.length === 0 &&
targetType === "user" &&
actionType !== "update" && <HistoryUserList feed={feed} />}
<Text className="date">{getDateTime(feed.date)}</Text>
</div>
);
};
export default HistoryTitleBlock;

135
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/ItemList.tsx
View File

@ -40,15 +40,17 @@ import {
} from "../../../styles/history";
import { ActionByTarget } from "../FeedInfo";
import { Feed } from "./HistoryBlockContent.types";
const EXPANSION_THRESHOLD = 3;
type HistoryItemListProps = {
t: TTranslation;
feed: any;
feed: Feed;
nameWithoutExtension?: (title: string) => string;
getInfoPanelItemIcon?: (item: any, size: number) => string;
checkAndOpenLocationAction?: (item: any) => void;
checkAndOpenLocationAction?: (item: any, actionType: string) => void;
} & (
| {
actionType: ActionByTarget<"file">;
@ -60,7 +62,7 @@ type HistoryItemListProps = {
}
);
export const HistoryItemList = ({
const HistoryItemList = ({
t,
feed,
actionType,
@ -69,9 +71,10 @@ export const HistoryItemList = ({
getInfoPanelItemIcon,
checkAndOpenLocationAction,
}: HistoryItemListProps) => {
const [isExpanded, setIsExpanded] = useState(
1 + feed.related.length <= EXPANSION_THRESHOLD,
);
const totalItems = feed.related.length + 1;
const isExpandable = totalItems > EXPANSION_THRESHOLD;
const [isExpanded, setIsExpanded] = useState(!isExpandable);
const onExpand = () => setIsExpanded(true);
const items = [
@ -95,63 +98,77 @@ export const HistoryItemList = ({
<StyledHistoryBlockFilesList>
{items.map((item, i) => {
if (!isExpanded && i > EXPANSION_THRESHOLD - 1) return null;
console.log("item", item);
return (
<StyledHistoryBlockFile
isRoom={false}
key={`${feed.action.id}_${item.id}`}
>
<ReactSVG className="icon" src={getInfoPanelItemIcon!(item, 24)} />
<div className="item-title">
{item.title ? (
<>
<span className="name" key="hbil-item-name">
{item.title}
</span>
{item.fileExst && (
<span className="exst" key="hbil-item-exst">
{item.fileExst}
</span>
<>
<StyledHistoryBlockFile
isRoom={false}
isFolder={item.isFolder}
key={`${feed.action.id}_${item.id}`}
>
<div className="item-wrapper">
<ReactSVG
className="icon"
src={getInfoPanelItemIcon!(item, 24)}
/>
<div className="item-title">
{item.title ? (
<>
<span className="name" key="hbil-item-name">
{item.title}
</span>
{item.fileExst && (
<span className="exst" key="hbil-item-exst">
{item.fileExst}
</span>
)}
</>
) : (
<span className="name">{item.fileExst}</span>
)}
</>
) : (
<span className="name">{item.fileExst}</span>
)}
</div>
<IconButton
className="location-btn"
iconName={FolderLocationReactSvgUrl}
size="16"
isFill
onClick={() => checkAndOpenLocationAction!(item, actionType)}
title={t("Files:OpenLocation")}
/>
</StyledHistoryBlockFile>
</div>
</div>
<IconButton
className="location-btn"
iconName={FolderLocationReactSvgUrl}
size={16}
isFill
onClick={() => checkAndOpenLocationAction!(item, actionType)}
title={t("Files:OpenLocation")}
/>
</StyledHistoryBlockFile>
{actionType === "rename" && oldItem && (
<StyledHistoryBlockFile>
<div className="old-item-wrapper">
<ReactSVG
className="icon"
src={getInfoPanelItemIcon!(item, 24)}
/>
<div className="item-title old-item-title">
{oldItem.title ? (
<>
<span className="name" key="hbil-item-name">
{oldItem.title}
</span>
{oldItem.fileExst && (
<span className="exst" key="hbil-item-exst">
{oldItem.fileExst}
</span>
)}
</>
) : (
<span className="name">{oldItem.fileExst}</span>
)}
</div>
</div>
</StyledHistoryBlockFile>
)}
</>
);
})}
{actionType === "rename" && oldItem && (
<StyledHistoryBlockFile>
<div style={{ width: "24px", height: "24px" }} />
<div className="item-title old-item-title">
{oldItem.title ? (
<>
<span className="name" key="hbil-item-name">
{oldItem.title}
</span>
{oldItem.fileExst && (
<span className="exst" key="hbil-item-exst">
{oldItem.fileExst}
</span>
)}
</>
) : (
<span className="name">{oldItem.fileExst}</span>
)}
</div>
</StyledHistoryBlockFile>
)}
{!isExpanded && (
{isExpandable && !isExpanded && (
<StyledHistoryBlockExpandLink
className="files-list-expand-link"
onClick={onExpand}

20
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/MainText.tsx
View File

@ -26,20 +26,28 @@
import { withTranslation } from "react-i18next";
import { inject, observer } from "mobx-react";
import { decode } from "he";
import { TTranslation } from "@docspace/shared/types";
import { StyledHistoryBlockMessage } from "../../../styles/history";
import { useFeedTranslation } from "../useFeedTranslation";
import { Text } from "@docspace/shared/components/text";
import { StyledHistoryDisplaynameBlock } from "../../../styles/history";
import { Feed } from "./HistoryBlockContent.types";
interface HistoryMainTextProps {
t: TTranslation;
feed: any;
feed: Feed;
}
const HistoryMainText = ({ t, feed }: HistoryMainTextProps) => {
return (
<StyledHistoryBlockMessage className="message">
<span className="main-message">{useFeedTranslation(t, feed)}</span>{" "}
</StyledHistoryBlockMessage>
<StyledHistoryDisplaynameBlock className="message">
<span className="main-message">
<Text className="name">
{feed.initiator?.isAnonim
? t("Common:Anonymous")
: decode(feed.initiator.displayName)}
</Text>
</span>
</StyledHistoryDisplaynameBlock>
);
};

5
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/MainTextFolderInfo.tsx
View File

@ -29,10 +29,11 @@ import { inject, observer } from "mobx-react";
import { TTranslation } from "@docspace/shared/types";
import { FolderType } from "@docspace/shared/enums";
import { StyledHistoryBlockMessage } from "../../../styles/history";
import { Feed } from "./HistoryBlockContent.types";
type HistoryMainTextFolderInfoProps = {
t: TTranslation;
feed: any;
feed: Feed;
selectedFolderId?: number;
};
@ -80,7 +81,7 @@ const HistoryMainTextFolderInfo = ({
);
};
export default inject(({ selectedFolderStore }) => ({
export default inject<TStore>(({ selectedFolderStore }) => ({
selectedFolderId: selectedFolderStore.id,
}))(
withTranslation(["InfoPanel", "Common", "Translations"])(

9
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/RoomTagList.tsx
View File

@ -24,12 +24,13 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { Tag } from "@docspace/shared/components/tag";
import { StyledHistoryBlockTagList } from "../../../styles/history";
import { ActionByTarget } from "../FeedInfo";
import { Tag } from "@docspace/shared/components/tag";
import { Feed } from "./HistoryBlockContent.types";
interface HistoryRoomTagListProps {
feed: any;
feed: Feed;
actionType: ActionByTarget<"roomTag">;
}
@ -37,7 +38,7 @@ const HistoryRoomTagList = ({ feed, actionType }: HistoryRoomTagListProps) => {
if (actionType === "create")
return (
<StyledHistoryBlockTagList>
{feed.data.tags.map((tag: string) => (
{feed.data?.tags.map((tag: string) => (
<Tag
className="history-tag"
key={tag}
@ -52,7 +53,7 @@ const HistoryRoomTagList = ({ feed, actionType }: HistoryRoomTagListProps) => {
if (actionType === "delete") {
return (
<StyledHistoryBlockTagList>
{feed.data.tags.map((tag: string) => (
{feed.data?.tags.map((tag: string) => (
<Tag
className="history-tag deleted-tag"
key={tag}

3
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/UserGroupRoleChange.tsx
View File

@ -25,9 +25,10 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { StyledHistoryBlockMessage } from "../../../styles/history";
import { Feed } from "./HistoryBlockContent.types";
interface HistoryUserRoleChangeProps {
feed: any;
feed: Feed;
}
const HistoryUserGroupRoleChange = ({ feed }: HistoryUserRoleChangeProps) => {

17
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/UserList.tsx
View File

@ -25,22 +25,25 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { useState } from "react";
import { useNavigate, NavigateFunction } from "react-router-dom";
import { decode } from "he";
import { inject, observer } from "mobx-react";
import { useNavigate, NavigateFunction } from "react-router-dom";
import { Trans, withTranslation } from "react-i18next";
import { TTranslation } from "@docspace/shared/types";
import { decode } from "he";
import { Link } from "@docspace/shared/components/link";
import { Text } from "@docspace/shared/components/text";
import { Feed } from "./HistoryBlockContent.types";
import {
StyledHistoryBlockExpandLink,
StyledHistoryLink,
} from "../../../styles/history";
import { Trans, withTranslation } from "react-i18next";
const EXPANSION_THRESHOLD = 8;
interface HistoryUserListProps {
t;
feed: any;
t: TTranslation;
feed: Feed;
openUser?: (user: any, navigate: NavigateFunction) => void;
isVisitor?: boolean;
isCollaborator?: boolean;
@ -88,7 +91,7 @@ const HistoryUserList = ({
)}
{withComma && ","}
<div className="space" />
{feed.related.length > 0 && <div className="space" />}
</StyledHistoryLink>
);
})}
@ -111,7 +114,7 @@ const HistoryUserList = ({
);
};
export default inject(({ infoPanelStore, userStore }) => ({
export default inject<TStore>(({ infoPanelStore, userStore }) => ({
openUser: infoPanelStore.openUser,
isVisitor: userStore.user.isVisitor,
isCollaborator: userStore.user.isCollaborator,

45
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/index.tsx
View File

@ -25,20 +25,16 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { inject, observer } from "mobx-react";
import HistoryUserList from "./UserList";
import HistoryMainText from "./MainText";
import HistoryItemList from "./ItemList";
import HistoryMainTextFolderInfo from "./MainTextFolderInfo";
import HistoryRoomExternalLink from "./RoomExternalLink";
import HistoryGroupList from "./GroupList";
import HistoryUserGroupRoleChange from "./UserGroupRoleChange";
import HistoryRoomTagList from "./RoomTagList";
import { getFeedInfo } from "../FeedInfo";
interface HistoryBlockContentProps {
feed: any;
}
import { HistoryBlockContentProps } from "./HistoryBlockContent.types";
const HistoryBlockContent = ({
feed,
@ -48,18 +44,22 @@ const HistoryBlockContent = ({
return (
<>
{targetType === "user" && actionType === "update" && (
<HistoryUserList feed={feed} />
)}
{targetType === "group" && actionType === "update" && (
<HistoryGroupList feed={feed} />
)}
<HistoryMainText feed={feed} />
{targetType === "roomExternalLink" && actionType === "create" && (
<HistoryRoomExternalLink feedData={feed.data} />
)}
{(targetType === "file" || targetType === "folder") &&
actionType !== "delete" && <HistoryMainTextFolderInfo feed={feed} />}
{targetType === "group" && actionType !== "update" && (
<HistoryGroupList feed={feed} />
)}
{(targetType === "user" || targetType === "group") &&
actionType === "update" && <HistoryUserGroupRoleChange feed={feed} />}
<HistoryMainText feed={feed} />
{(targetType === "file" || targetType === "folder") &&
(actionType === "rename" || historyWithFileList) && (
@ -70,29 +70,18 @@ const HistoryBlockContent = ({
/>
)}
{feed.related.length > 0 &&
targetType === "user" &&
actionType !== "update" && <HistoryUserList feed={feed} />}
{targetType === "roomTag" && (
<HistoryRoomTagList feed={feed} actionType={actionType} />
)}
{targetType === "roomExternalLink" && actionType === "create" && (
<HistoryRoomExternalLink feedData={feed.data} />
)}
{targetType === "user" && actionType !== "update" && (
<HistoryUserList feed={feed} />
)}
{targetType === "group" && actionType !== "update" && (
<HistoryGroupList feed={feed} />
)}
{(targetType === "user" || targetType === "group") &&
actionType === "update" && <HistoryUserGroupRoleChange feed={feed} />}
</>
);
};
export default inject(({ infoPanelStore }) => {
export default inject<TStore>(({ infoPanelStore }) => {
const { historyWithFileList } = infoPanelStore;
return { historyWithFileList };
})(observer(HistoryBlockContent));

6
packages/client/src/pages/Home/InfoPanel/Body/views/History/useFeedTranslation.tsx
View File

@ -5,11 +5,13 @@ import { AnyFeedInfo } from "./FeedInfo";
export const useFeedTranslation = (
t: TTranslation,
feed: { action: { key: AnyFeedInfo["key"] }; data: any },
hasRelatedItems: boolean,
) => {
switch (feed.action.key) {
case "FileCreated":
return t("InfoPanel:FileCreated");
case "FileUploaded":
if (hasRelatedItems) return t("InfoPanel:FileUploaded").slice(0, -1);
return t("InfoPanel:FileUploaded");
case "UserFileUpdated":
return t("InfoPanel:UserFileUpdated");
@ -38,10 +40,13 @@ export const useFeedTranslation = (
case "FolderRenamed":
return t("InfoPanel:FolderRenamed");
case "FolderMoved":
if (hasRelatedItems) return t("InfoPanel:FolderMoved").slice(0, -1);
return t("InfoPanel:FolderMoved");
case "FolderCopied":
if (hasRelatedItems) return t("InfoPanel:FolderCopied").slice(0, -1);
return t("InfoPanel:FolderCopied");
case "FolderDeleted":
if (hasRelatedItems) return t("InfoPanel:FolderDeleted").slice(0, -1);
return t("InfoPanel:FolderDeleted");
case "RoomCreated":
return (
@ -124,6 +129,7 @@ export const useFeedTranslation = (
/>
);
case "RoomCreateUser":
if (hasRelatedItems) return t("InfoPanel:RoomCreateUser").slice(0, -1);
return t("InfoPanel:RoomCreateUser");
case "RoomUpdateAccessForUser":
return t("InfoPanel:RoomUpdateAccess");

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

@ -1890,6 +1890,8 @@ export const getBaseTheme = () => {
renamedItemColor: gray,
oldRoleColor: lightGrayDark,
messageColor: black,
itemBorderColor: grayLightMid,
fileBackgroundColor: lightGraySelected,
},
details: {

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

@ -1875,6 +1875,8 @@ const Dark: TTheme = {
renamedItemColor: gray,
oldRoleColor: gray,
messageColor: white,
itemBorderColor: grayDarkStrong,
fileBackgroundColor: darkGrayLight,
},
details: {