binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1981] chore: project view icon and empty state (#5153)

Browse source 
* chore: view icon updated

* chore: view asset updated

* chore: project view empty state updated
This commit is contained in:
Anmol Singh Bhatia 2024-07-18 15:46:16 +05:30 • committed by GitHub
parent cfc70622d6
commit 39e3c28ad8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 32 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/core/components/views/form.tsx
View file

@ -3,10 +3,11 @@
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { Layers } from "lucide-react";
// types
import { IProjectView, IIssueFilterOptions } from "@plane/types";
// ui
import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, PhotoFilterIcon, TextArea } from "@plane/ui";
import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, TextArea } from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
@ -144,7 +145,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
{logoValue?.in_use ? (
<Logo logo={logoValue} size={18} type="lucide" />
) : (
<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
<Layers className="h-4 w-4 text-custom-text-300" />
)}
</>
</span>

5
web/core/components/views/view-list-item.tsx
View file

@ -3,10 +3,9 @@
import { FC, useRef } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { Layers } from "lucide-react";
// types
import { IProjectView } from "@plane/types";
// ui
import { PhotoFilterIcon } from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { ListItem } from "@/components/core/list";
@ -34,7 +33,7 @@ export const ProjectViewListItem: FC<Props> = observer((props) => {
{view?.logo_props?.in_use ? (
<Logo logo={view?.logo_props} size={16} type="lucide" />
) : (
<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
<Layers className="h-4 w-4 text-custom-text-300" />
)}
</>
}

21
web/core/components/views/views-list.tsx
View file

@ -1,5 +1,4 @@
import { observer } from "mobx-react";
import Image from "next/image";
import { useParams } from "next/navigation";
// components
import { ListLayout } from "@/components/core/list";
@ -11,14 +10,12 @@ import { EmptyStateType } from "@/constants/empty-state";
// hooks
import { useCommandPalette, useProjectView } from "@/hooks/store";
// assets
import AllFiltersImage from "@/public/empty-state/pages/all-filters.svg";
import NameFilterImage from "@/public/empty-state/pages/name-filter.svg";
export const ProjectViewsList = observer(() => {
const { projectId } = useParams();
// store hooks
const { toggleCreateViewModal } = useCommandPalette();
const { getProjectViews, getFilteredProjectViews, filters, loader } = useProjectView();
const { getProjectViews, getFilteredProjectViews, loader } = useProjectView();
const projectViews = getProjectViews(projectId?.toString());
const filteredProjectViews = getFilteredProjectViews(projectId?.toString());
@ -27,20 +24,8 @@ export const ProjectViewsList = observer(() => {
if (filteredProjectViews.length === 0 && projectViews.length > 0) {
return (
<div className="h-full w-full grid place-items-center">
<div className="text-center">
<Image
src={filters.searchQuery.length > 0 ? NameFilterImage : AllFiltersImage}
className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
alt="No matching modules"
/>
<h5 className="text-xl font-medium mt-7 mb-1">No matching views</h5>
<p className="text-custom-text-400 text-base">
{filters.searchQuery.length > 0
? "Remove the search criteria to see all views"
: "Remove the filters to see all views"}
</p>
</div>
<div className="flex items-center justify-center h-full w-full">
<EmptyState type={EmptyStateType.VIEWS_EMPTY_SEARCH} layout="screen-simple" />
</div>
);
}