github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: created a global mark as favorite component (#4203)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-04-16 13:23:50 +05:30 committed by GitHub
parent 0a6d7713fb
commit 6eed2c202b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 133 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/components/core/favorite-star.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Star } from "lucide-react";
// helpers
import { cn } from "@/helpers/common.helper";
type Props = {
buttonClassName?: string;
iconClassName?: string;
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
selected: boolean;
};
export const FavoriteStar: React.FC<Props> = (props) => {
const { buttonClassName, iconClassName, onClick, selected } = props;
return (
<button type="button" className={cn("h-4 w-4 grid place-items-center", buttonClassName)} onClick={onClick}>
<Star
className={cn(
"h-4 w-4 text-custom-text-300 transition-all",
{
"fill-yellow-500 stroke-yellow-500": selected,
},
iconClassName
)}
/>
</button>
);
};

3
web/components/core/index.ts
View File

@ -1,7 +1,8 @@
export * from "./filters"; export * from "./filters";
export * from "./modals"; export * from "./modals";
export * from "./sidebar"; export * from "./sidebar";
export * from "./theme";
export * from "./activity"; export * from "./activity";
export * from "./favorite-star";
export * from "./theme";
export * from "./image-picker-popover"; export * from "./image-picker-popover";
export * from "./page-title"; export * from "./page-title";

35
web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
View File

@ -1,17 +1,18 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Star, User2 } from "lucide-react"; import { User2 } from "lucide-react";
// hooks
import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
import { CycleQuickActions } from "@/components/cycles";
import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
import { renderFormattedDate } from "@/helpers/date-time.helper";
import { useCycle, useEventTracker, useMember } from "@/hooks/store";
// components
// ui // ui
// helpers import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
// components
import { FavoriteStar } from "@/components/core";
import { CycleQuickActions } from "@/components/cycles";
// constants // constants
import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
// helpers
import { renderFormattedDate } from "@/helpers/date-time.helper";
// hooks
import { useCycle, useEventTracker, useMember } from "@/hooks/store";
type Props = { type Props = {
cycleId: string; cycleId: string;
@ -112,15 +113,13 @@ export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
</span> </span>
)} )}
{cycle.is_favorite ? ( <FavoriteStar
<button type="button" onClick={handleRemoveFromFavorites}> onClick={(e) => {
<Star className="h-3.5 w-3.5 fill-current text-amber-500" /> if (cycle.is_favorite) handleRemoveFromFavorites(e);
</button> else handleAddToFavorites(e);
) : ( }}
<button type="button" onClick={handleAddToFavorites}> selected={!!cycle.is_favorite}
<Star className="h-3.5 w-3.5 text-custom-text-200" /> />
</button>
)}
{workspaceSlug && projectId && ( {workspaceSlug && projectId && (
<CycleQuickActions <CycleQuickActions

41
web/components/cycles/board/cycles-board-card.tsx
View File

@ -2,25 +2,23 @@ import { FC, MouseEvent } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// components import { Info } from "lucide-react";
import { Info, Star } from "lucide-react"; // types
import type { TCycleGroups } from "@plane/types"; import type { TCycleGroups } from "@plane/types";
import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
import { CycleQuickActions } from "@/components/cycles";
// hooks
// ui // ui
// icons import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
// helpers // components
// import { copyTextToClipboard } from "@/helpers/string.helper"; import { FavoriteStar } from "@/components/core";
import { CycleQuickActions } from "@/components/cycles";
// constants // constants
import { CYCLE_STATUS } from "@/constants/cycle"; import { CYCLE_STATUS } from "@/constants/cycle";
import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker"; import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
import { EUserWorkspaceRoles } from "@/constants/workspace"; import { EUserWorkspaceRoles } from "@/constants/workspace";
// helpers
import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper"; import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
// constants // hooks
import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store"; import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os"; import { usePlatformOS } from "@/hooks/use-platform-os";
//.types
export interface ICyclesBoardCard { export interface ICyclesBoardCard {
workspaceSlug: string; workspaceSlug: string;
@ -69,8 +67,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
? cycleTotalIssues === 0 ? cycleTotalIssues === 0
? "0 Issue" ? "0 Issue"
: cycleTotalIssues === cycleDetails.completed_issues : cycleTotalIssues === cycleDetails.completed_issues
? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}` ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
: `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues` : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
: "0 Issue"; : "0 Issue";
const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => { const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
@ -234,16 +232,15 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
<span className="text-xs text-custom-text-400">No due date</span> <span className="text-xs text-custom-text-400">No due date</span>
)} )}
<div className="z-[5] flex items-center gap-1.5"> <div className="z-[5] flex items-center gap-1.5">
{isEditingAllowed && {isEditingAllowed && (
(cycleDetails.is_favorite ? ( <FavoriteStar
<button type="button" onClick={handleRemoveFromFavorites}> onClick={(e) => {
<Star className="h-3.5 w-3.5 fill-current text-amber-500" /> if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
</button> else handleAddToFavorites(e);
) : ( }}
<button type="button" onClick={handleAddToFavorites}> selected={!!cycleDetails.is_favorite}
<Star className="h-3.5 w-3.5 text-custom-text-200" /> />
</button> )}
))}
<CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} /> <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
</div> </div>

23
web/components/cycles/list/cycles-list-item.tsx
View File

@ -3,12 +3,13 @@ import { observer } from "mobx-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// icons // icons
import { Check, Info, Star, User2 } from "lucide-react"; import { Check, Info, User2 } from "lucide-react";
// types // types
import type { TCycleGroups } from "@plane/types"; import type { TCycleGroups } from "@plane/types";
// ui // ui
import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui"; import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
// components // components
import { FavoriteStar } from "@/components/core";
import { CycleQuickActions } from "@/components/cycles"; import { CycleQuickActions } from "@/components/cycles";
// constants // constants
import { CYCLE_STATUS } from "@/constants/cycle"; import { CYCLE_STATUS } from "@/constants/cycle";
@ -231,17 +232,15 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
</div> </div>
</Tooltip> </Tooltip>
{isEditingAllowed && {isEditingAllowed && !isArchived && (
!isArchived && <FavoriteStar
(cycleDetails.is_favorite ? ( onClick={(e) => {
<button type="button" onClick={handleRemoveFromFavorites}> if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
<Star className="h-3.5 w-3.5 fill-current text-amber-500" /> else handleAddToFavorites(e);
</button> }}
) : ( selected={!!cycleDetails.is_favorite}
<button type="button" onClick={handleAddToFavorites}> />
<Star className="h-3.5 w-3.5 text-custom-text-200" /> )}
</button>
))}
<CycleQuickActions <CycleQuickActions
cycleId={cycleId} cycleId={cycleId}
projectId={projectId} projectId={projectId}

27
web/components/modules/module-card-item.tsx
View File

@ -2,11 +2,11 @@ import React from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// icons import { Info } from "lucide-react";
import { Info, Star } from "lucide-react";
// ui // ui
import { Avatar, AvatarGroup, LayersIcon, Tooltip, setPromiseToast } from "@plane/ui"; import { Avatar, AvatarGroup, LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
// components // components
import { FavoriteStar } from "@/components/core";
import { ModuleQuickActions } from "@/components/modules"; import { ModuleQuickActions } from "@/components/modules";
// constants // constants
import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker"; import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@ -139,8 +139,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
? !moduleTotalIssues || moduleTotalIssues === 0 ? !moduleTotalIssues || moduleTotalIssues === 0
? "0 Issue" ? "0 Issue"
: moduleTotalIssues === moduleDetails.completed_issues : moduleTotalIssues === moduleDetails.completed_issues
? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}` ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
: `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues` : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
: "0 Issue"; : "0 Issue";
return ( return (
@ -224,16 +224,15 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
)} )}
<div className="z-[5] flex items-center gap-1.5"> <div className="z-[5] flex items-center gap-1.5">
{isEditingAllowed && {isEditingAllowed && (
(moduleDetails.is_favorite ? ( <FavoriteStar
<button type="button" onClick={handleRemoveFromFavorites}> onClick={(e) => {
<Star className="h-3.5 w-3.5 fill-current text-amber-500" /> if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
</button> else handleAddToFavorites(e);
) : ( }}
<button type="button" onClick={handleAddToFavorites}> selected={!!moduleDetails.is_favorite}
<Star className="h-3.5 w-3.5 text-custom-text-200" /> />
</button> )}
))}
{workspaceSlug && projectId && ( {workspaceSlug && projectId && (
<ModuleQuickActions <ModuleQuickActions
moduleId={moduleId} moduleId={moduleId}

24
web/components/modules/module-list-item.tsx
View File

@ -2,11 +2,11 @@ import React from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// icons import { Check, Info, User2 } from "lucide-react";
import { Check, Info, Star, User2 } from "lucide-react";
// ui // ui
import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui"; import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
// components // components
import { FavoriteStar } from "@/components/core";
import { ModuleQuickActions } from "@/components/modules"; import { ModuleQuickActions } from "@/components/modules";
// constants // constants
import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker"; import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@ -212,17 +212,15 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
</div> </div>
</Tooltip> </Tooltip>
{isEditingAllowed && {isEditingAllowed && !isArchived && (
!isArchived && <FavoriteStar
(moduleDetails.is_favorite ? ( onClick={(e) => {
<button type="button" onClick={handleRemoveFromFavorites} className="z-[1]"> if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
<Star className="h-3.5 w-3.5 fill-current text-amber-500" /> else handleAddToFavorites(e);
</button> }}
) : ( selected={moduleDetails.is_favorite}
<button type="button" onClick={handleAddToFavorites} className="z-[1]"> />
<Star className="h-3.5 w-3.5 text-custom-text-300" /> )}
</button>
))}
{workspaceSlug && projectId && ( {workspaceSlug && projectId && (
<ModuleQuickActions <ModuleQuickActions
moduleId={moduleId} moduleId={moduleId}

17
web/components/pages/list/block.tsx
View File

@ -1,12 +1,12 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Link from "next/link"; import Link from "next/link";
import { Circle, Info, Lock, Minus, Star, UsersRound } from "lucide-react"; import { Circle, Info, Lock, Minus, UsersRound } from "lucide-react";
import { Avatar, TOAST_TYPE, Tooltip, setToast } from "@plane/ui"; import { Avatar, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
// components // components
import { FavoriteStar } from "@/components/core";
import { PageQuickActions } from "@/components/pages"; import { PageQuickActions } from "@/components/pages";
// helpers // helpers
import { cn } from "@/helpers/common.helper";
import { renderFormattedDate } from "@/helpers/date-time.helper"; import { renderFormattedDate } from "@/helpers/date-time.helper";
// hooks // hooks
import { useMember, usePage } from "@/hooks/store"; import { useMember, usePage } from "@/hooks/store";
@ -86,21 +86,14 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
</Tooltip> </Tooltip>
{/* favorite/unfavorite */} {/* favorite/unfavorite */}
<button <FavoriteStar
type="button"
className="h-4 w-4 grid place-items-center"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
handleFavorites(); handleFavorites();
}} }}
> selected={is_favorite}
<Star />
className={cn("h-4 w-4 text-custom-text-300 transition-all", {
"fill-yellow-500 stroke-yellow-500": is_favorite,
})}
/>
</button>
{/* quick actions dropdown */} {/* quick actions dropdown */}
<PageQuickActions pageId={pageId} projectId={projectId} workspaceSlug={workspaceSlug} /> <PageQuickActions pageId={pageId} projectId={projectId} workspaceSlug={workspaceSlug} />

24
web/components/project/card.tsx
View File

@ -2,23 +2,23 @@ import React, { useState } from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Star, Trash2 } from "lucide-react"; import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Trash2 } from "lucide-react";
// types
import type { IProject } from "@plane/types"; import type { IProject } from "@plane/types";
// ui // ui
import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast } from "@plane/ui"; import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast } from "@plane/ui";
// components // components
import { FavoriteStar } from "@/components/core";
import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project"; import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project";
// helpers // constants
import { EUserProjectRoles } from "@/constants/project"; import { EUserProjectRoles } from "@/constants/project";
// helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
import { renderFormattedDate } from "@/helpers/date-time.helper"; import { renderFormattedDate } from "@/helpers/date-time.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks // hooks
import { useProject } from "@/hooks/store"; import { useProject } from "@/hooks/store";
// types
import { usePlatformOS } from "@/hooks/use-platform-os"; import { usePlatformOS } from "@/hooks/use-platform-os";
// hooks
// constants
type Props = { type Props = {
project: IProject; project: IProject;
@ -166,19 +166,19 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
> >
<LinkIcon className="h-3 w-3 text-white" /> <LinkIcon className="h-3 w-3 text-white" />
</button> </button>
<button <FavoriteStar
className="flex h-6 w-6 items-center justify-center rounded bg-white/10" buttonClassName="h-6 w-6 bg-white/10"
iconClassName={cn("h-3 w-3", {
"text-white": !project.is_favorite,
})}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (project.is_favorite) handleRemoveFromFavorites(); if (project.is_favorite) handleRemoveFromFavorites();
else handleAddToFavorites(); else handleAddToFavorites();
}} }}
> selected={project.is_favorite}
<Star />
className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
/>
</button>
</div> </div>
)} )}
</div> </div>

2
web/components/project/sidebar-list-item.tsx
View File

@ -273,7 +273,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{project.is_favorite && ( {project.is_favorite && (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}> <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
<Star className="h-3.5 w-3.5 fill-orange-400 stroke-[1.5] text-orange-400" /> <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500" />
<span>Remove from favorites</span> <span>Remove from favorites</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

42
web/components/views/view-list-item.tsx
View File

@ -2,11 +2,13 @@ import React, { useState } from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "lucide-react"; import { LinkIcon, PencilIcon, TrashIcon } from "lucide-react";
// types
import { IProjectView } from "@plane/types"; import { IProjectView } from "@plane/types";
// ui // ui
import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
// components // components
import { FavoriteStar } from "@/components/core";
import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views"; import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views";
// constants // constants
import { EUserProjectRoles } from "@/constants/project"; import { EUserProjectRoles } from "@/constants/project";
@ -15,7 +17,6 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks // hooks
import { useProjectView, useUser } from "@/hooks/store"; import { useProjectView, useUser } from "@/hooks/store";
// types
type Props = { type Props = {
view: IProjectView; view: IProjectView;
@ -91,32 +92,17 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
<p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block"> <p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
{totalFilters} {totalFilters === 1 ? "filter" : "filters"} {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
</p> </p>
{isEditingAllowed && {isEditingAllowed && (
(view.is_favorite ? ( <FavoriteStar
<button onClick={(e) => {
type="button" e.preventDefault();
onClick={(e) => { e.stopPropagation();
e.preventDefault(); if (view.is_favorite) handleRemoveFromFavorites();
e.stopPropagation(); else handleAddToFavorites();
handleRemoveFromFavorites(); }}
}} selected={view.is_favorite}
className="grid place-items-center" />
> )}
<StarIcon className="h-3.5 w-3.5 fill-orange-400 text-orange-400" strokeWidth={2} />
</button>
) : (
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleAddToFavorites();
}}
className="grid place-items-center"
>
<StarIcon size={14} strokeWidth={2} />
</button>
))}
<CustomMenu ellipsis> <CustomMenu ellipsis>
{isEditingAllowed && ( {isEditingAllowed && (