From b6374f020d25ce6c11f87ca7b4183187be15f4e0 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Thu, 15 Aug 2024 16:24:22 +0500 Subject: [PATCH] Web:EmptyContainer Added a empty screen for the filter --- .../EmptyContainer/EmptyFilterContainer.js | 83 +++++++++++-------- .../components/empty-view/EmptyView.styled.ts | 3 + .../components/empty-view/EmptyView.tsx | 7 +- .../components/empty-view/EmptyView.types.ts | 1 + public/locales/en/Common.json | 15 ++-- 5 files changed, 68 insertions(+), 41 deletions(-) diff --git a/packages/client/src/components/EmptyContainer/EmptyFilterContainer.js b/packages/client/src/components/EmptyContainer/EmptyFilterContainer.js index 130a66e79c..03f325c5a4 100644 --- a/packages/client/src/components/EmptyContainer/EmptyFilterContainer.js +++ b/packages/client/src/components/EmptyContainer/EmptyFilterContainer.js @@ -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 ? ( + + ) : ( + + ); + + return theme.isBase ? ( + + ) : ( + + ); + }; + + /** + * @param {React.MouseEvent} event + * @returns {void} + */ + const onResetFilter = (event) => { + event.preventDefault(); - const onResetFilter = () => { setIsLoading(true); if (isArchiveFolder) { @@ -86,31 +111,21 @@ const EmptyFilterContainer = ({ } }; - const buttons = ( -
- - - {t("Common:ClearFilter")} - -
- ); + const options = { + to: "", + description: t("Common:ClearFilter"), + icon: , + onClick: onResetFilter, + }; - const imageSrc = theme.isBase - ? EmptyScreenFilterAltSvgUrl - : EmptyScreenFilterAltDarkSvgUrl; + const imageSrc = getIconURL(); return ( - ); }; diff --git a/packages/shared/components/empty-view/EmptyView.styled.ts b/packages/shared/components/empty-view/EmptyView.styled.ts index efda1a9030..183a4c6db1 100644 --- a/packages/shared/components/empty-view/EmptyView.styled.ts +++ b/packages/shared/components/empty-view/EmptyView.styled.ts @@ -67,6 +67,9 @@ export const EmptyViewBody = styled.div` color: #4781d1; svg { color: #4781d1; + g { + fill: currentColor; + } flex-shrink: 0; } diff --git a/packages/shared/components/empty-view/EmptyView.tsx b/packages/shared/components/empty-view/EmptyView.tsx index a1bbc7695e..d0f4d5564d 100644 --- a/packages/shared/components/empty-view/EmptyView.tsx +++ b/packages/shared/components/empty-view/EmptyView.tsx @@ -46,7 +46,12 @@ export const EmptyView = ({ {isEmptyLinkOptions(options) ? ( - + {options.icon} {options.description} diff --git a/packages/shared/components/empty-view/EmptyView.types.ts b/packages/shared/components/empty-view/EmptyView.types.ts index 71c41d374d..2b56e90c1e 100644 --- a/packages/shared/components/empty-view/EmptyView.types.ts +++ b/packages/shared/components/empty-view/EmptyView.types.ts @@ -5,6 +5,7 @@ export type EmptyViewLinkType = { state?: unknown; icon: React.ReactElement; description: string; + onClick?: React.MouseEventHandler; }; export type EmptyViewItemType = { diff --git a/public/locales/en/Common.json b/public/locales/en/Common.json index 5e283730f3..20b4b5e9fa 100644 --- a/public/locales/en/Common.json +++ b/public/locales/en/Common.json @@ -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}}", "LinkExpired": "The link has expired.", "LinkIsValid": "The link is valid for <1>{{date}}", + "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", @@ -530,4 +533,4 @@ "Yes": "Yes", "Yesterday": "Yesterday", "You": "You" -} \ No newline at end of file +}