Web:EmptyContainer Added a empty screen for the filter
This commit is contained in:
parent
0616b6d465
commit
b6374f020d
@ -23,19 +23,24 @@
|
||||
// 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 EmptyScreenFilterAltSvgUrl from "PUBLIC_DIR/images/empty_screen_filter_alt.svg?url";
|
||||
import EmptyScreenFilterAltDarkSvgUrl from "PUBLIC_DIR/images/empty_screen_filter_alt_dark.svg?url";
|
||||
import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
|
||||
import React from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import EmptyContainer from "./EmptyContainer";
|
||||
import FilesFilter from "@docspace/shared/api/files/filter";
|
||||
|
||||
import ClearEmptyFilterSvg from "PUBLIC_DIR/images/clear.empty.filter.svg";
|
||||
|
||||
import EmptyFilterRoomsLightIcon from "PUBLIC_DIR/images/emptyFilter/empty.filter.rooms.light.svg";
|
||||
import EmptyFilterRoomsDarkIcon from "PUBLIC_DIR/images/emptyFilter/empty.filter.rooms.dark.svg";
|
||||
|
||||
import EmptyFilterFilesLightIcon from "PUBLIC_DIR/images/emptyFilter/empty.filter.files.light.svg";
|
||||
import EmptyFilterFilesDarkIcon from "PUBLIC_DIR/images/emptyFilter/empty.filter.files.dark.svg";
|
||||
|
||||
import RoomsFilter from "@docspace/shared/api/rooms/filter";
|
||||
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||
import { Link } from "@docspace/shared/components/link";
|
||||
import FilesFilter from "@docspace/shared/api/files/filter";
|
||||
import { EmptyView } from "@docspace/shared/components/empty-view";
|
||||
|
||||
// import EmptyContainer from "./EmptyContainer";
|
||||
|
||||
const EmptyFilterContainer = ({
|
||||
t,
|
||||
@ -55,12 +60,32 @@ const EmptyFilterContainer = ({
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const subheadingText = t("EmptyFilterSubheadingText");
|
||||
const descriptionText = isRooms
|
||||
? t("Common:SearchEmptyRoomsDescription")
|
||||
: t("Common:EmptyFilterDescriptionText");
|
||||
? t("Common:EmptyFilterRoomsDescription")
|
||||
: t("Common:EmptyFilterFilesDescription");
|
||||
|
||||
const getIconURL = () => {
|
||||
if (isRooms)
|
||||
return theme.isBase ? (
|
||||
<EmptyFilterRoomsLightIcon />
|
||||
) : (
|
||||
<EmptyFilterRoomsDarkIcon />
|
||||
);
|
||||
|
||||
return theme.isBase ? (
|
||||
<EmptyFilterFilesLightIcon />
|
||||
) : (
|
||||
<EmptyFilterFilesDarkIcon />
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {React.MouseEvent<HTMLAnchorElement, MouseEvent>} event
|
||||
* @returns {void}
|
||||
*/
|
||||
const onResetFilter = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const onResetFilter = () => {
|
||||
setIsLoading(true);
|
||||
|
||||
if (isArchiveFolder) {
|
||||
@ -86,31 +111,21 @@ const EmptyFilterContainer = ({
|
||||
}
|
||||
};
|
||||
|
||||
const buttons = (
|
||||
<div className="empty-folder_container-links">
|
||||
<IconButton
|
||||
className="empty-folder_container-icon"
|
||||
size="12"
|
||||
onClick={onResetFilter}
|
||||
iconName={ClearEmptyFilterSvgUrl}
|
||||
isFill
|
||||
/>
|
||||
<Link onClick={onResetFilter} {...linkStyles}>
|
||||
{t("Common:ClearFilter")}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
const options = {
|
||||
to: "",
|
||||
description: t("Common:ClearFilter"),
|
||||
icon: <ClearEmptyFilterSvg />,
|
||||
onClick: onResetFilter,
|
||||
};
|
||||
|
||||
const imageSrc = theme.isBase
|
||||
? EmptyScreenFilterAltSvgUrl
|
||||
: EmptyScreenFilterAltDarkSvgUrl;
|
||||
const imageSrc = getIconURL();
|
||||
|
||||
return (
|
||||
<EmptyContainer
|
||||
headerText={t("Common:NotFoundTitle")}
|
||||
descriptionText={descriptionText}
|
||||
imageSrc={imageSrc}
|
||||
buttons={buttons}
|
||||
<EmptyView
|
||||
icon={imageSrc}
|
||||
title={t("Common:NoFindingsFound")}
|
||||
options={options}
|
||||
description={descriptionText}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -67,6 +67,9 @@ export const EmptyViewBody = styled.div`
|
||||
color: #4781d1;
|
||||
svg {
|
||||
color: #4781d1;
|
||||
g {
|
||||
fill: currentColor;
|
||||
}
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
@ -46,7 +46,12 @@ export const EmptyView = ({
|
||||
</EmptyViewHeader>
|
||||
<EmptyViewBody>
|
||||
{isEmptyLinkOptions(options) ? (
|
||||
<Link className="ev-link" to={options.to} state={options.state}>
|
||||
<Link
|
||||
className="ev-link"
|
||||
to={options.to}
|
||||
state={options.state}
|
||||
onClick={options.onClick}
|
||||
>
|
||||
{options.icon}
|
||||
<span>{options.description}</span>
|
||||
</Link>
|
||||
|
@ -5,6 +5,7 @@ export type EmptyViewLinkType = {
|
||||
state?: unknown;
|
||||
icon: React.ReactElement;
|
||||
description: string;
|
||||
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
|
||||
};
|
||||
|
||||
export type EmptyViewItemType = {
|
||||
|
@ -50,6 +50,7 @@
|
||||
"Color": "Color",
|
||||
"ComingSoon": "Coming soon",
|
||||
"Comment": "Comment",
|
||||
"Commentator": "Commentator",
|
||||
"Comments": "Comments",
|
||||
"Common": "Common",
|
||||
"CommonFiles": "Common files",
|
||||
@ -127,8 +128,8 @@
|
||||
"Delete": "Delete",
|
||||
"DenyAccess": "Deny access",
|
||||
"Description": "Description",
|
||||
"Disable": "Disable",
|
||||
"DeveloperTools": "Developer Tools",
|
||||
"Disable": "Disable",
|
||||
"Disabled": "Disabled",
|
||||
"DisableQuota": "Disable quota",
|
||||
"DisableStorageQuota": "Disable storage quota",
|
||||
@ -148,12 +149,13 @@
|
||||
"EditButton": "Edit",
|
||||
"Editing": "Editing",
|
||||
"Editor": "Editor",
|
||||
"Commentator": "Commentator",
|
||||
"Email": "Email",
|
||||
"EmptyDescription": "The list of users previously invited to {{productName}} or separate rooms will appear here. You will be able to invite these users for collaboration at any time.",
|
||||
"EmptyEmail": "No email address parsed",
|
||||
"EmptyFieldError": "Empty field",
|
||||
"EmptyFilterDescriptionText": "No files or folders match this filter. Try a different one or clear filter to view all files.",
|
||||
"EmptyFilterFilesDescription": "No files or folders match this filter. Try another or remove the filter to view all files.",
|
||||
"EmptyFilterRoomsDescription": "No room matches this filter. Try another or reset filter to view all rooms.",
|
||||
"EmptyGroupsDescription": "Please create the first group.",
|
||||
"EmptyGroupsHeader": "No groups here yet",
|
||||
"EmptyHeader": "No other accounts here yet",
|
||||
@ -252,6 +254,7 @@
|
||||
"LinkExpireAfter": "The link will expire after <1>{{date}}</1>",
|
||||
"LinkExpired": "The link has expired.",
|
||||
"LinkIsValid": "The link is valid for <1>{{date}}</1>",
|
||||
"LinkRemoved": "Link removed",
|
||||
"LinkSuccessfullyCopied": "Link successfully copied to clipboard",
|
||||
"ListAccounts": "Account list",
|
||||
"LiveChat": "Live chat",
|
||||
@ -302,6 +305,7 @@
|
||||
"NewVersionAvailable": "A new version of the website available",
|
||||
"Next": "Next",
|
||||
"No": "No",
|
||||
"NoFindingsFound": "No findings found",
|
||||
"NoRoomsFound": "No rooms found",
|
||||
"NotFoundGroups": "No groups found",
|
||||
"NotFoundGroupsDescription": "No groups match your search. Please adjust your search parameters or clear the search field to view the full list of groups.",
|
||||
@ -327,8 +331,8 @@
|
||||
"OAuthRoomsWriteDescription": "View and manage all rooms",
|
||||
"OCT": "OCT",
|
||||
"OFORMsGallery": "Form Gallery",
|
||||
"OkButton": "Ok",
|
||||
"OKButton": "OK",
|
||||
"OkButton": "Ok",
|
||||
"Or": "or",
|
||||
"orContinueWith": "or continue with",
|
||||
"OrganizationName": "ONLYOFFICE",
|
||||
@ -388,12 +392,11 @@
|
||||
"RecoverDescribeYourProblemPlaceholder": "Describe your problem",
|
||||
"RecoverTitle": "Access recovery",
|
||||
"Regenerate": "Regenerate",
|
||||
"RemoveLink": "Remove link",
|
||||
"LinkRemoved": "Link removed",
|
||||
"RegistrationEmail": "Your registration email address",
|
||||
"ReloadPage": "Reload page",
|
||||
"Remember": "Remember me",
|
||||
"Remove": "Remove",
|
||||
"RemoveLink": "Remove link",
|
||||
"Rename": "Rename",
|
||||
"RenewSubscription": "Renew subscription?",
|
||||
"RepeatInvitation": "Repeat invitation",
|
||||
|
Loading…
Reference in New Issue
Block a user