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 "./modals";
export * from "./sidebar";
export * from "./theme";
export * from "./activity";
export * from "./favorite-star";
export * from "./theme";
export * from "./image-picker-popover";
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 Link from "next/link";
import { useRouter } from "next/router";
import { Star, 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
import { User2 } from "lucide-react";
// ui
// helpers
import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
// components
import { FavoriteStar } from "@/components/core";
import { CycleQuickActions } from "@/components/cycles";
// 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 = {
cycleId: string;
@ -112,15 +113,13 @@ export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
</span>
)}
{cycle.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
)}
<FavoriteStar
onClick={(e) => {
if (cycle.is_favorite) handleRemoveFromFavorites(e);
else handleAddToFavorites(e);
}}
selected={!!cycle.is_favorite}
/>
{workspaceSlug && projectId && (
<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 Link from "next/link";
import { useRouter } from "next/router";
// components
import { Info, Star } from "lucide-react";
import { Info } from "lucide-react";
// types
import type { TCycleGroups } from "@plane/types";
import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
import { CycleQuickActions } from "@/components/cycles";
// hooks
// ui
// icons
// helpers
// import { copyTextToClipboard } from "@/helpers/string.helper";
import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
// components
import { FavoriteStar } from "@/components/core";
import { CycleQuickActions } from "@/components/cycles";
// constants
import { CYCLE_STATUS } from "@/constants/cycle";
import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
import { EUserWorkspaceRoles } from "@/constants/workspace";
// helpers
import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
// constants
// hooks
import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
//.types
export interface ICyclesBoardCard {
workspaceSlug: string;
@ -69,8 +67,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
? cycleTotalIssues === 0
? "0 Issue"
: cycleTotalIssues === cycleDetails.completed_issues
? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
: `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
: `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
: "0 Issue";
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>
)}
<div className="z-[5] flex items-center gap-1.5">
{isEditingAllowed &&
(cycleDetails.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
))}
{isEditingAllowed && (
<FavoriteStar
onClick={(e) => {
if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
else handleAddToFavorites(e);
}}
selected={!!cycleDetails.is_favorite}
/>
)}
<CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
</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 { useRouter } from "next/router";
// icons
import { Check, Info, Star, User2 } from "lucide-react";
import { Check, Info, User2 } from "lucide-react";
// types
import type { TCycleGroups } from "@plane/types";
// ui
import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
// components
import { FavoriteStar } from "@/components/core";
import { CycleQuickActions } from "@/components/cycles";
// constants
import { CYCLE_STATUS } from "@/constants/cycle";
@ -231,17 +232,15 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
</div>
</Tooltip>
{isEditingAllowed &&
!isArchived &&
(cycleDetails.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
))}
{isEditingAllowed && !isArchived && (
<FavoriteStar
onClick={(e) => {
if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
else handleAddToFavorites(e);
}}
selected={!!cycleDetails.is_favorite}
/>
)}
<CycleQuickActions
cycleId={cycleId}
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 Link from "next/link";
import { useRouter } from "next/router";
// icons
import { Info, Star } from "lucide-react";
import { Info } from "lucide-react";
// ui
import { Avatar, AvatarGroup, LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
// components
import { FavoriteStar } from "@/components/core";
import { ModuleQuickActions } from "@/components/modules";
// constants
import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@ -139,8 +139,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
? !moduleTotalIssues || moduleTotalIssues === 0
? "0 Issue"
: moduleTotalIssues === moduleDetails.completed_issues
? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
: `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
: `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
: "0 Issue";
return (
@ -224,16 +224,15 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
)}
<div className="z-[5] flex items-center gap-1.5">
{isEditingAllowed &&
(moduleDetails.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
))}
{isEditingAllowed && (
<FavoriteStar
onClick={(e) => {
if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
else handleAddToFavorites(e);
}}
selected={!!moduleDetails.is_favorite}
/>
)}
{workspaceSlug && projectId && (
<ModuleQuickActions
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 Link from "next/link";
import { useRouter } from "next/router";
// icons
import { Check, Info, Star, User2 } from "lucide-react";
import { Check, Info, User2 } from "lucide-react";
// ui
import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
// components
import { FavoriteStar } from "@/components/core";
import { ModuleQuickActions } from "@/components/modules";
// constants
import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@ -212,17 +212,15 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
</div>
</Tooltip>
{isEditingAllowed &&
!isArchived &&
(moduleDetails.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites} className="z-[1]">
<Star className="h-3.5 w-3.5 text-custom-text-300" />
</button>
))}
{isEditingAllowed && !isArchived && (
<FavoriteStar
onClick={(e) => {
if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
else handleAddToFavorites(e);
}}
selected={moduleDetails.is_favorite}
/>
)}
{workspaceSlug && projectId && (
<ModuleQuickActions
moduleId={moduleId}

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

@ -1,12 +1,12 @@
import { FC } from "react";
import { observer } from "mobx-react";
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";
// components
import { FavoriteStar } from "@/components/core";
import { PageQuickActions } from "@/components/pages";
// helpers
import { cn } from "@/helpers/common.helper";
import { renderFormattedDate } from "@/helpers/date-time.helper";
// hooks
import { useMember, usePage } from "@/hooks/store";
@ -86,21 +86,14 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
</Tooltip>
{/* favorite/unfavorite */}
<button
type="button"
className="h-4 w-4 grid place-items-center"
<FavoriteStar
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleFavorites();
}}
>
<Star
className={cn("h-4 w-4 text-custom-text-300 transition-all", {
"fill-yellow-500 stroke-yellow-500": is_favorite,
})}
/>
</button>
selected={is_favorite}
/>
{/* quick actions dropdown */}
<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 Link from "next/link";
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";
// ui
import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast } from "@plane/ui";
// components
import { FavoriteStar } from "@/components/core";
import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project";
// helpers
// constants
import { EUserProjectRoles } from "@/constants/project";
// helpers
import { cn } from "@/helpers/common.helper";
import { renderFormattedDate } from "@/helpers/date-time.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks
import { useProject } from "@/hooks/store";
// types
import { usePlatformOS } from "@/hooks/use-platform-os";
// hooks
// constants
type Props = {
project: IProject;
@ -166,19 +166,19 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
>
<LinkIcon className="h-3 w-3 text-white" />
</button>
<button
className="flex h-6 w-6 items-center justify-center rounded bg-white/10"
<FavoriteStar
buttonClassName="h-6 w-6 bg-white/10"
iconClassName={cn("h-3 w-3", {
"text-white": !project.is_favorite,
})}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (project.is_favorite) handleRemoveFromFavorites();
else handleAddToFavorites();
}}
>
<Star
className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
/>
</button>
selected={project.is_favorite}
/>
</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 && (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<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>
</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 Link from "next/link";
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";
// ui
import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { FavoriteStar } from "@/components/core";
import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views";
// constants
import { EUserProjectRoles } from "@/constants/project";
@ -15,7 +17,6 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks
import { useProjectView, useUser } from "@/hooks/store";
// types
type Props = {
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">
{totalFilters} {totalFilters === 1 ? "filter" : "filters"}
</p>
{isEditingAllowed &&
(view.is_favorite ? (
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleRemoveFromFavorites();
}}
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>
))}
{isEditingAllowed && (
<FavoriteStar
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (view.is_favorite) handleRemoveFromFavorites();
else handleAddToFavorites();
}}
selected={view.is_favorite}
/>
)}
<CustomMenu ellipsis>
{isEditingAllowed && (