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

[WEB-1424] chore: page and view logo implementation, and emoji/icon (#4662)

Browse source 
* [WEB-1424] chore: page and view logo implementation, and emoji/icon picker improvement (#4583)

* chore: added logo_props

* chore: logo props in cycles, views and modules

* chore: emoji icon picker types updated

* chore: info icon added to plane ui package

* chore: icon color adjust helper function added

* style: icon picker ui improvement and default color options updated

* chore: update page logo action added in store

* chore: emoji code to unicode helper function added

* chore: common logo renderer component added

* chore: app header project logo updated

* chore: project logo updated across platform

* chore: page logo picker added

* chore: control link component improvement

* chore: list item improvement

* chore: emoji picker component updated

* chore: space app and package logo prop type updated

* chore: migration

* chore: logo added to project view

* chore: page logo picker added in create modal and breadcrumbs

* chore: view logo picker added in create modal and updated breadcrumbs

* fix: build error

* chore: AIO docker images for preview deployments (#4605)

* fix: adding single docker base file

* action added

* fix action

* dockerfile.base modified

* action fix

* dockerfile

* fix: base aio dockerfile

* fix: dockerfile.base

* fix: dockerfile base

* fix: modified folder structure

* fix: action

* fix: dockerfile

* fix: dockerfile.base

* fix: supervisor file name changed

* fix: base dockerfile updated

* fix dockerfile base

* fix: base dockerfile

* fix: docker files

* fix: base dockerfile

* update base image

* modified docker aio base

* aio base modified to debian-12-slim

* fixes

* finalize the dockerfiles with volume exposure

* modified the aio build and dockerfile

* fix: codacy suggestions implemented

* fix: codacy fix

* update aio build action

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

* fix: merge conflict

* chore: lucide react added to planu ui package

* chore: new emoji picker component added with lucid icon and code refactor

* chore: logo component updated

* chore: emoji picker updated for pages and views

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

* fix: build error

---------

Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com>
Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
This commit is contained in:
sriram veeraghanta 2024-05-31 14:27:52 +05:30 • committed by GitHub
parent fc4ba5a170
commit 092e65b43d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
64 changed files with 1414 additions and 304 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/components/analytics/custom-analytics/sidebar/projects-list.tsx
View file

@ -1,10 +1,11 @@
import { observer } from "mobx-react";
// hooks
// icons
import { Contrast, LayoutGrid, Users } from "lucide-react";
// components
import { Logo } from "@/components/common";
// helpers
import { ProjectLogo } from "@/components/project";
import { truncateText } from "@/helpers/string.helper";
// hooks
import { useProject } from "@/hooks/store";
type Props = {
@ -29,7 +30,7 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
<div key={projectId} className="w-full">
<div className="flex items-center gap-1 text-sm">
<div className="h-6 w-6 grid place-items-center">
<ProjectLogo logo={project.logo_props} />
<Logo logo={project.logo_props} />
</div>
<h5 className="flex items-center gap-1">
<p className="break-words">{truncateText(project.name, 20)}</p>

14
web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
View file

@ -1,13 +1,13 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
// hooks
import { ProjectLogo } from "@/components/project";
import { NETWORK_CHOICES } from "@/constants/project";
import { renderFormattedDate } from "@/helpers/date-time.helper";
import { useCycle, useMember, useModule, useProject } from "@/hooks/store";
// components
// helpers
import { Logo } from "@/components/common";
// constants
import { NETWORK_CHOICES } from "@/constants/project";
// helpers
import { renderFormattedDate } from "@/helpers/date-time.helper";
// hooks
import { useCycle, useMember, useModule, useProject } from "@/hooks/store";
export const CustomAnalyticsSidebarHeader = observer(() => {
const router = useRouter();
@ -84,7 +84,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
<div className="flex items-center gap-1">
{projectDetails && (
<span className="h-6 w-6 grid place-items-center flex-shrink-0">
<ProjectLogo logo={projectDetails.logo_props} />
<Logo logo={projectDetails.logo_props} />
</span>
)}
<h4 className="break-words font-medium">{projectDetails?.name}</h4>

1
web/components/common/index.ts
View file

@ -3,3 +3,4 @@ export * from "./empty-state";
export * from "./latest-feature-block";
export * from "./breadcrumb-link";
export * from "./logo-spinner";
export * from "./logo";

69
web/components/common/logo.tsx Normal file
View file

@ -0,0 +1,69 @@
import { FC } from "react";
// emoji-picker-react
import { Emoji } from "emoji-picker-react";
// import { icons } from "lucide-react";
import { TLogoProps } from "@plane/types";
// helpers
import { LUCIDE_ICONS_LIST } from "@plane/ui";
import { emojiCodeToUnicode } from "@/helpers/emoji.helper";
type Props = {
logo: TLogoProps;
size?: number;
type?: "lucide" | "material";
};
export const Logo: FC<Props> = (props) => {
const { logo, size = 16, type = "material" } = props;
// destructuring the logo object
const { in_use, emoji, icon } = logo;
// derived values
const value = in_use === "emoji" ? emoji?.value : icon?.name;
const color = icon?.color;
const lucideIcon = LUCIDE_ICONS_LIST.find((item) => item.name === value);
// if no value, return empty fragment
if (!value) return <></>;
// emoji
if (in_use === "emoji") {
return <Emoji unified={emojiCodeToUnicode(value)} size={size} />;
}
// icon
if (in_use === "icon") {
return (
<>
{type === "lucide" ? (
<>
{lucideIcon && (
<lucideIcon.element
style={{
color: color,
height: size,
width: size,
}}
/>
)}
</>
) : (
<span
className="material-symbols-rounded"
style={{
fontSize: size,
color: color,
scale: "115%",
}}
>
{value}
</span>
)}
</>
);
}
// if no value, return empty fragment
return <></>;
};

19
web/components/core/list/list-item.tsx
View file

@ -1,7 +1,7 @@
import React, { FC } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
// ui
import { Tooltip } from "@plane/ui";
import { ControlLink, Tooltip } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
@ -14,6 +14,7 @@ interface IListItemProps {
actionableItems?: JSX.Element;
isMobile?: boolean;
parentRef: React.RefObject<HTMLDivElement>;
disableLink?: boolean;
className?: string;
}
@ -27,12 +28,22 @@ export const ListItem: FC<IListItemProps> = (props) => {
onItemClick,
isMobile = false,
parentRef,
disableLink = false,
className = "",
} = props;
// router
const router = useRouter();
// handlers
const handleControlLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
if (onItemClick) onItemClick(e);
else router.push(itemLink);
};
return (
<div ref={parentRef} className="relative">
<Link href={itemLink} onClick={onItemClick}>
<ControlLink href={itemLink} onClick={handleControlLinkClick} disabled={disableLink}>
<div
className={cn(
"group h-24 sm:h-[52px] flex w-full flex-col items-center justify-between gap-3 sm:gap-5 px-6 py-4 sm:py-0 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 sm:flex-row",
@ -52,7 +63,7 @@ export const ListItem: FC<IListItemProps> = (props) => {
</div>
<span className="h-6 w-96 flex-shrink-0" />
</div>
</Link>
</ControlLink>
{actionableItems && (
<div className="absolute right-5 bottom-4 flex items-center gap-1.5">
<div className="relative flex items-center gap-4 sm:w-auto sm:flex-shrink-0 sm:justify-end">

11
web/components/cycles/list/cycles-list-item.tsx
View file

@ -77,13 +77,18 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
}
};
// handlers
const handleArchivedCycleClick = (e: MouseEvent<HTMLAnchorElement>) => {
openCycleOverview(e);
};
const handleItemClick = cycleDetails.archived_at ? handleArchivedCycleClick : undefined;
return (
<ListItem
title={cycleDetails?.name ?? ""}
itemLink={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}
onItemClick={(e) => {
if (cycleDetails.archived_at) openCycleOverview(e);
}}
onItemClick={handleItemClick}
className={className}
prependTitleElement={
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>

4
web/components/dashboard/widgets/recent-projects.tsx
View file

@ -7,8 +7,8 @@ import { TRecentProjectsWidgetResponse } from "@plane/types";
// ui
import { Avatar, AvatarGroup } from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { WidgetLoader, WidgetProps } from "@/components/dashboard/widgets";
import { ProjectLogo } from "@/components/project";
// constants
import { PROJECT_BACKGROUND_COLORS } from "@/constants/dashboard";
import { EUserWorkspaceRoles } from "@/constants/workspace";
@ -38,7 +38,7 @@ const ProjectListItem: React.FC<ProjectListItemProps> = observer((props) => {
className={`grid h-[3.375rem] w-[3.375rem] flex-shrink-0 place-items-center rounded border border-transparent ${randomBgColor}`}
>
<div className="grid h-7 w-7 place-items-center">
<ProjectLogo logo={projectDetails.logo_props} className="text-xl" />
<Logo logo={projectDetails.logo_props} size={20} />
</div>
</div>
<div className="flex-grow truncate">

6
web/components/dropdowns/project.tsx
View file

@ -6,7 +6,7 @@ import { Combobox } from "@headlessui/react";
// types
import { IProject } from "@plane/types";
// components
import { ProjectLogo } from "@/components/project";
import { Logo } from "@/components/common";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
@ -83,7 +83,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
<div className="flex items-center gap-2">
{projectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={projectDetails?.logo_props} className="text-sm" />
<Logo logo={projectDetails?.logo_props} size={12} />
</span>
)}
<span className="flex-grow truncate">{projectDetails?.name}</span>
@ -157,7 +157,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
>
{!hideIcon && selectedProject && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={selectedProject.logo_props} className="text-sm" />
<Logo logo={selectedProject.logo_props} size={12} />
</span>
)}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (

5
web/components/headers/cycle-issues.tsx
View file

@ -10,9 +10,8 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip } from "@plane/ui";
// components
import { ProjectAnalyticsModal } from "@/components/analytics";
import { BreadcrumbLink } from "@/components/common";
import { BreadcrumbLink, Logo } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
import { ProjectLogo } from "@/components/project";
// constants
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
@ -170,7 +169,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

5
web/components/headers/cycles.tsx
View file

@ -4,9 +4,8 @@ import { useRouter } from "next/router";
// ui
import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { BreadcrumbLink, Logo } from "@/components/common";
import { CyclesViewHeader } from "@/components/cycles";
import { ProjectLogo } from "@/components/project";
// constants
import { EUserProjectRoles } from "@/constants/project";
// hooks
@ -41,7 +40,7 @@ export const CyclesHeader: FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

5
web/components/headers/module-issues.tsx
View file

@ -10,9 +10,8 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip } from "@plane/ui";
// components
import { ProjectAnalyticsModal } from "@/components/analytics";
import { BreadcrumbLink } from "@/components/common";
import { BreadcrumbLink, Logo } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
import { ProjectLogo } from "@/components/project";
// constants
import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
@ -170,7 +169,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

5
web/components/headers/modules-list.tsx
View file

@ -3,9 +3,8 @@ import { useRouter } from "next/router";
// ui
import { Breadcrumbs, Button, DiceIcon } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { BreadcrumbLink, Logo } from "@/components/common";
import { ModuleViewHeader } from "@/components/modules";
import { ProjectLogo } from "@/components/project";
// constants
import { EUserProjectRoles } from "@/constants/project";
// hooks
@ -41,7 +40,7 @@ export const ModulesListHeader: React.FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

84
web/components/headers/page-details.tsx
View file

@ -1,22 +1,52 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { FileText } from "lucide-react";
// types
import { TLogoProps } from "@plane/types";
// ui
import { Breadcrumbs, Button } from "@plane/ui";
import { Breadcrumbs, Button, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { ProjectLogo } from "@/components/project";
import { BreadcrumbLink, Logo } from "@/components/common";
// helper
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
// hooks
import { usePage, useProject } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
export interface IPagesHeaderProps {
showButton?: boolean;
}
export const PageDetailsHeader = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, pageId } = router.query;
// state
const [isOpen, setIsOpen] = useState(false);
// store hooks
const { currentProjectDetails } = useProject();
const { isContentEditable, isSubmitting, name } = usePage(pageId?.toString() ?? "");
const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = usePage(pageId?.toString() ?? "");
const handlePageLogoUpdate = async (data: TLogoProps) => {
if (data) {
updatePageLogo(data)
.then(() => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "Logo Updated successfully.",
});
})
.catch(() => {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Something went wrong. Please try again.",
});
});
}
};
// use platform
const { platform } = usePlatformOS();
// derived values
@ -38,7 +68,7 @@ export const PageDetailsHeader = observer(() => {
icon={
currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}
@ -67,7 +97,49 @@ export const PageDetailsHeader = observer(() => {
<Breadcrumbs.BreadcrumbItem
type="text"
link={
<BreadcrumbLink label={name ?? "Page"} icon={<FileText className="h-4 w-4 text-custom-text-300" />} />
<BreadcrumbLink
label={name ?? "Page"}
icon={
<EmojiIconPicker
isOpen={isOpen}
handleToggle={(val: boolean) => setIsOpen(val)}
className="flex items-center justify-center"
buttonClassName="flex items-center justify-center"
label={
<>
{logo_props?.in_use ? (
<Logo logo={logo_props} size={16} type="lucide" />
) : (
<FileText className="h-4 w-4 text-custom-text-300" />
)}
</>
}
onChange={(val) => {
let logoValue = {};
if (val?.type === "emoji")
logoValue = {
value: convertHexEmojiToDecimal(val.value.unified),
url: val.value.imageUrl,
};
else if (val?.type === "icon") logoValue = val.value;
handlePageLogoUpdate({
in_use: val?.type,
[val?.type]: logoValue,
}).finally(() => setIsOpen(false));
}}
defaultIconColor={
logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined
}
defaultOpen={
logo_props?.in_use && logo_props?.in_use === "emoji"
? EmojiIconPickerTypes.EMOJI
: EmojiIconPickerTypes.ICON
}
/>
}
/>
}
/>
</Breadcrumbs>

5
web/components/headers/pages.tsx
View file

@ -5,8 +5,7 @@ import { FileText } from "lucide-react";
// ui
import { Breadcrumbs, Button } from "@plane/ui";
// helpers
import { BreadcrumbLink } from "@/components/common";
import { ProjectLogo } from "@/components/project";
import { BreadcrumbLink, Logo } from "@/components/common";
import { EUserProjectRoles } from "@/constants/project";
// constants
// components
@ -41,7 +40,7 @@ export const PagesHeader = observer(() => {
icon={
currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

5
web/components/headers/project-archived-issue-details.tsx
View file

@ -4,8 +4,7 @@ import { useRouter } from "next/router";
import useSWR from "swr";
// hooks
import { ArchiveIcon, Breadcrumbs, LayersIcon } from "@plane/ui";
import { BreadcrumbLink } from "@/components/common";
import { ProjectLogo } from "@/components/project";
import { BreadcrumbLink, Logo } from "@/components/common";
import { ISSUE_DETAILS } from "@/constants/fetch-keys";
import { useProject } from "@/hooks/store";
// components
@ -52,7 +51,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

5
web/components/headers/project-archives.tsx
View file

@ -4,8 +4,7 @@ import { useRouter } from "next/router";
// ui
import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { ProjectLogo } from "@/components/project";
import { BreadcrumbLink, Logo } from "@/components/common";
// constants
import { PROJECT_ARCHIVES_BREADCRUMB_LIST } from "@/constants/archives";
import { EIssuesStoreType } from "@/constants/issue";
@ -49,7 +48,7 @@ export const ProjectArchivesHeader: FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

5
web/components/headers/project-draft-issues.tsx
View file

@ -6,9 +6,8 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
// ui
import { Breadcrumbs, LayersIcon, Tooltip } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { BreadcrumbLink, Logo } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
import { ProjectLogo } from "@/components/project";
// constants
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
// helpers
@ -101,7 +100,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

5
web/components/headers/project-inbox.tsx
View file

@ -5,9 +5,8 @@ import { RefreshCcw } from "lucide-react";
// ui
import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { BreadcrumbLink, Logo } from "@/components/common";
import { InboxIssueCreateEditModalRoot } from "@/components/inbox";
import { ProjectLogo } from "@/components/project";
// hooks
import { useProject, useProjectInbox } from "@/hooks/store";
@ -35,7 +34,7 @@ export const ProjectInboxHeader: FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

5
web/components/headers/project-issue-details.tsx
View file

@ -4,8 +4,7 @@ import { useRouter } from "next/router";
// hooks
import { PanelRight } from "lucide-react";
import { Breadcrumbs, LayersIcon } from "@plane/ui";
import { BreadcrumbLink } from "@/components/common";
import { ProjectLogo } from "@/components/project";
import { BreadcrumbLink, Logo } from "@/components/common";
import { cn } from "@/helpers/common.helper";
import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
// ui
@ -42,7 +41,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

5
web/components/headers/project-issues.tsx
View file

@ -9,9 +9,8 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
import { Breadcrumbs, Button, LayersIcon, Tooltip } from "@plane/ui";
// components
import { ProjectAnalyticsModal } from "@/components/analytics";
import { BreadcrumbLink } from "@/components/common";
import { BreadcrumbLink, Logo } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
import { ProjectLogo } from "@/components/project";
// constants
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
@ -130,7 +129,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
currentProjectDetails ? (
currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
) : (

5
web/components/headers/project-settings.tsx
View file

@ -5,8 +5,7 @@ import { useRouter } from "next/router";
import { Settings } from "lucide-react";
import { Breadcrumbs, CustomMenu } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { ProjectLogo } from "@/components/project";
import { BreadcrumbLink, Logo } from "@/components/common";
// constants
import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
// hooks
@ -39,7 +38,7 @@ export const ProjectSettingHeader: FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

17
web/components/headers/project-view-issues.tsx
View file

@ -7,9 +7,8 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
// ui
import { Breadcrumbs, Button, CustomMenu, PhotoFilterIcon } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { BreadcrumbLink, Logo } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
import { ProjectLogo } from "@/components/project";
// constants
import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
@ -141,7 +140,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}
@ -164,7 +163,11 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
<CustomMenu
label={
<>
<PhotoFilterIcon height={12} width={12} />
{viewDetails?.logo_props?.in_use ? (
<Logo logo={viewDetails.logo_props} size={12} type="lucide" />
) : (
<PhotoFilterIcon height={12} width={12} />
)}
{viewDetails?.name && truncateText(viewDetails.name, 40)}
</>
}
@ -182,7 +185,11 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
href={`/${workspaceSlug}/projects/${projectId}/views/${viewId}`}
className="flex items-center gap-1.5"
>
<PhotoFilterIcon height={12} width={12} />
{view?.logo_props?.in_use ? (
<Logo logo={view.logo_props} size={12} type="lucide" />
) : (
<PhotoFilterIcon height={12} width={12} />
)}
{truncateText(view.name, 40)}
</Link>
</CustomMenu.MenuItem>

13
web/components/headers/project-views.tsx
View file

@ -1,14 +1,13 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
// hooks
// components
// ui
import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
import { BreadcrumbLink } from "@/components/common";
// helpers
import { ProjectLogo } from "@/components/project";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
import { ViewListHeader } from "@/components/views";
import { EUserProjectRoles } from "@/constants/project";
// constants
import { EUserProjectRoles } from "@/constants/project";
// hooks
import { useCommandPalette, useProject, useUser } from "@/hooks/store";
export const ProjectViewsHeader: React.FC = observer(() => {
@ -40,7 +39,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
icon={
currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
<ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
}

8
web/components/issues/issue-layouts/filters/applied-filters/project.tsx
View file

@ -1,9 +1,9 @@
import { observer } from "mobx-react";
import { X } from "lucide-react";
// hooks
import { ProjectLogo } from "@/components/project";
import { useProject } from "@/hooks/store";
// components
import { Logo } from "@/components/common";
// hooks
import { useProject } from "@/hooks/store";
type Props = {
handleRemove: (val: string) => void;
@ -26,7 +26,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
return (
<div key={projectId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={projectDetails.logo_props} className="text-sm" />
<Logo logo={projectDetails.logo_props} size={12} />
</span>
<span className="normal-case">{projectDetails.name}</span>
{editable && (

10
web/components/issues/issue-layouts/filters/header/filters/project.tsx
View file

@ -1,15 +1,13 @@
import React, { useMemo, useState } from "react";
import sortBy from "lodash/sortBy";
import { observer } from "mobx-react";
// components
// ui
import { Loader } from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { FilterHeader, FilterOption } from "@/components/issues";
// hooks
import { ProjectLogo } from "@/components/project";
import { useProject } from "@/hooks/store";
// components
// ui
// helpers
type Props = {
appliedFilters: string[] | null;
@ -65,7 +63,7 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
onClick={() => handleUpdate(project.id)}
icon={
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<ProjectLogo logo={project.logo_props} className="text-sm" />
<Logo logo={project.logo_props} size={12} />
</span>
}
title={project.name}

12
web/components/issues/issue-layouts/utils.tsx
View file

@ -5,6 +5,7 @@ import pull from "lodash/pull";
import uniq from "lodash/uniq";
import scrollIntoView from "smooth-scroll-into-view-if-needed";
import { ContrastIcon } from "lucide-react";
// types
import {
GroupByColumnTypes,
IGroupByColumn,
@ -13,12 +14,14 @@ import {
TIssue,
TIssueGroupByOptions,
} from "@plane/types";
// ui
import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
// components
import { ProjectLogo } from "@/components/project";
// stores
import { Logo } from "@/components/common";
// constants
import { ISSUE_PRIORITIES, EIssuesStoreType } from "@/constants/issue";
import { STATE_GROUPS } from "@/constants/state";
// stores
import { ICycleStore } from "@/store/cycle.store";
import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
import { ILabelStore } from "@/store/label.store";
@ -26,9 +29,6 @@ import { IMemberRootStore } from "@/store/member";
import { IModuleStore } from "@/store/module.store";
import { IProjectStore } from "@/store/project/project.store";
import { IStateStore } from "@/store/state.store";
// helpers
// constants
// types
export const HIGHLIGHT_CLASS = "highlight";
export const HIGHLIGHT_WITH_LINE = "highlight-with-line";
@ -101,7 +101,7 @@ const getProjectColumns = (project: IProjectStore): IGroupByColumn[] | undefined
name: project.name,
icon: (
<div className="w-6 h-6 grid place-items-center flex-shrink-0">
<ProjectLogo logo={project.logo_props} />
<Logo logo={project.logo_props} />
</div>
),
payload: { project_id: project.id },

10
web/components/modules/module-list-item.tsx
View file

@ -59,13 +59,17 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
}
};
const handleArchivedModuleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
openModuleOverview(e);
};
const handleItemClick = moduleDetails.archived_at ? handleArchivedModuleClick : undefined;
return (
<ListItem
title={moduleDetails?.name ?? ""}
itemLink={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
onItemClick={(e) => {
if (moduleDetails.archived_at) openModuleOverview(e);
}}
onItemClick={handleItemClick}
prependTitleElement={
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
{completedModuleCheck ? (

74
web/components/pages/list/block.tsx
View file

@ -1,9 +1,16 @@
import { FC, useRef } from "react";
import { FC, useRef, useState } from "react";
import { observer } from "mobx-react";
import { FileText } from "lucide-react";
// types
import { TLogoProps } from "@plane/types";
// ui
import { EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { ListItem } from "@/components/core/list";
import { BlockItemAction } from "@/components/pages/list";
// helpers
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
import { getPageName } from "@/helpers/page.helper";
// hooks
import { usePage } from "@/hooks/store";
@ -19,12 +26,74 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
const { workspaceSlug, projectId, pageId } = props;
// refs
const parentRef = useRef(null);
// state
const [isOpen, setIsOpen] = useState(false);
// hooks
const { name } = usePage(pageId);
const { name, logo_props, updatePageLogo } = usePage(pageId);
const { isMobile } = usePlatformOS();
const handlePageLogoUpdate = async (data: TLogoProps) => {
if (data) {
updatePageLogo(data)
.then(() => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "Logo Updated successfully.",
});
})
.catch(() => {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Something went wrong. Please try again.",
});
});
}
};
return (
<ListItem
prependTitleElement={
<>
<EmojiIconPicker
isOpen={isOpen}
handleToggle={(val: boolean) => setIsOpen(val)}
className="flex items-center justify-center"
buttonClassName="flex items-center justify-center"
label={
<>
{logo_props?.in_use ? (
<Logo logo={logo_props} size={16} type="lucide" />
) : (
<FileText className="h-4 w-4 text-custom-text-300" />
)}
</>
}
onChange={(val) => {
let logoValue = {};
if (val?.type === "emoji")
logoValue = {
value: convertHexEmojiToDecimal(val.value.unified),
url: val.value.imageUrl,
};
else if (val?.type === "icon") logoValue = val.value;
handlePageLogoUpdate({
in_use: val?.type,
[val?.type]: logoValue,
}).finally(() => setIsOpen(false));
}}
defaultIconColor={logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined}
defaultOpen={
logo_props?.in_use && logo_props?.in_use === "emoji"
? EmojiIconPickerTypes.EMOJI
: EmojiIconPickerTypes.ICON
}
/>
</>
}
title={getPageName(name)}
itemLink={`/${workspaceSlug}/projects/${projectId}/pages/${pageId}`}
actionableItems={
@ -32,6 +101,7 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
}
isMobile={isMobile}
parentRef={parentRef}
disableLink={isOpen}
/>
);
});

1
web/components/pages/modals/create-page-modal.tsx
View file

@ -26,6 +26,7 @@ export const CreatePageModal: FC<Props> = (props) => {
id: undefined,
name: "",
access: EPageAccess.PUBLIC,
logo_props: undefined,
});
// router
const router = useRouter();

79
web/components/pages/modals/page-form.tsx
View file

@ -1,12 +1,15 @@
import { FormEvent, useState } from "react";
// types
import { FileText } from "lucide-react";
import { TPage } from "@plane/types";
// ui
import { Button, Input, Tooltip } from "@plane/ui";
import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, Tooltip } from "@plane/ui";
import { Logo } from "@/components/common";
// constants
import { PAGE_ACCESS_SPECIFIERS } from "@/constants/page";
// helpers
import { cn } from "@/helpers/common.helper";
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
// hooks
import { usePlatformOS } from "@/hooks/use-platform-os";
@ -22,6 +25,7 @@ export const PageForm: React.FC<Props> = (props) => {
// hooks
const { isMobile } = usePlatformOS();
// state
const [isOpen, setIsOpen] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const handlePageFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
@ -41,21 +45,66 @@ export const PageForm: React.FC<Props> = (props) => {
<form onSubmit={handlePageFormSubmit}>
<div className="space-y-5 p-5">
<h3 className="text-xl font-medium text-custom-text-200">Create Page</h3>
<div className="space-y-1">
<Input
id="name"
type="text"
value={formData.name}
onChange={(e) => handleFormData("name", e.target.value)}
placeholder="Title"
className="w-full resize-none text-base"
tabIndex={1}
required
autoFocus
<div className="flex items-start gap-2 h-9 w-full">
<EmojiIconPicker
isOpen={isOpen}
handleToggle={(val: boolean) => setIsOpen(val)}
className="flex items-center justify-center flex-shrink0"
buttonClassName="flex items-center justify-center"
label={
<span className="grid h-9 w-9 place-items-center rounded-md bg-custom-background-90">
<>
{formData?.logo_props?.in_use ? (
<Logo logo={formData?.logo_props} size={18} type="lucide" />
) : (
<FileText className="h-4 w-4 text-custom-text-300" />
)}
</>
</span>
}
onChange={(val: any) => {
let logoValue = {};
if (val?.type === "emoji")
logoValue = {
value: convertHexEmojiToDecimal(val.value.unified),
url: val.value.imageUrl,
};
else if (val?.type === "icon") logoValue = val.value;
handleFormData("logo_props", {
in_use: val?.type,
[val?.type]: logoValue,
});
setIsOpen(false);
}}
defaultIconColor={
formData?.logo_props?.in_use && formData?.logo_props?.in_use === "icon"
? formData?.logo_props?.icon?.color
: undefined
}
defaultOpen={
formData?.logo_props?.in_use && formData?.logo_props?.in_use === "emoji"
? EmojiIconPickerTypes.EMOJI
: EmojiIconPickerTypes.ICON
}
/>
{isTitleLengthMoreThan255Character && (
<span className="text-xs text-red-500">Max length of the name should be less than 255 characters</span>
)}
<div className="space-y-1 flew-grow w-full">
<Input
id="name"
type="text"
value={formData.name}
onChange={(e) => handleFormData("name", e.target.value)}
placeholder="Title"
className="w-full resize-none text-base"
tabIndex={1}
required
autoFocus
/>
{isTitleLengthMoreThan255Character && (
<span className="text-xs text-red-500">Max length of the name should be less than 255 characters</span>
)}
</div>
</div>
</div>
<div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200">

8
web/components/profile/sidebar.tsx
View file

@ -5,13 +5,13 @@ import { useRouter } from "next/router";
import useSWR from "swr";
// icons
import { ChevronDown, Pencil } from "lucide-react";
// ui
// headless ui
import { Disclosure, Transition } from "@headlessui/react";
// icons
// plane ui
import { Loader, Tooltip } from "@plane/ui";
// components
import { Logo } from "@/components/common";
// fetch-keys
import { ProjectLogo } from "@/components/project";
import { USER_PROFILE_PROJECT_SEGREGATION } from "@/constants/fetch-keys";
// helpers
import { renderFormattedDate } from "@/helpers/date-time.helper";
@ -151,7 +151,7 @@ export const ProfileSidebar = observer(() => {
<Disclosure.Button className="flex w-full items-center justify-between gap-2">
<div className="flex w-3/4 items-center gap-2">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center">
<ProjectLogo logo={projectDetails.logo_props} />
<Logo logo={projectDetails.logo_props} />
</span>
<div className="truncate break-words text-sm font-medium">{projectDetails.name}</div>
</div>

5
web/components/project/card.tsx
View file

@ -18,8 +18,9 @@ import {
TContextMenuItem,
} from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { FavoriteStar } from "@/components/core";
import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project";
import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal } from "@/components/project";
// constants
import { EUserProjectRoles } from "@/constants/project";
// helpers
@ -203,7 +204,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
<div className="absolute bottom-4 z-[1] flex h-10 w-full items-center justify-between gap-3 px-4">
<div className="flex flex-grow items-center gap-2.5 truncate">
<div className="h-9 w-9 flex-shrink-0 grid place-items-center rounded bg-white/90">
<ProjectLogo logo={project.logo_props} />
<Logo logo={project.logo_props} size={18} />
</div>
<div className="flex w-full flex-col justify-between gap-0.5 truncate">

11
web/components/project/create-project-form.tsx
View file

@ -16,6 +16,7 @@ import {
Tooltip,
} from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { ImagePickerPopover } from "@/components/core";
import { MemberDropdown } from "@/components/dropdowns";
// constants
@ -28,8 +29,6 @@ import { projectIdentifierSanitizer } from "@/helpers/project.helper";
// hooks
import { useEventTracker, useProject } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
// types
import { ProjectLogo } from "./project-logo";
type Props = {
setToFavorite?: boolean;
@ -59,6 +58,7 @@ export const CreateProjectForm: FC<Props> = observer((props) => {
const { captureProjectEvent } = useEventTracker();
const { addProjectToFavorites, createProject } = useProject();
// states
const [isOpen, setIsOpen] = useState(false);
const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
// form info
const {
@ -189,9 +189,13 @@ export const CreateProjectForm: FC<Props> = observer((props) => {
control={control}
render={({ field: { value, onChange } }) => (
<CustomEmojiIconPicker
isOpen={isOpen}
handleToggle={(val: boolean) => setIsOpen(val)}
className="flex items-center justify-center"
buttonClassName="flex items-center justify-center"
label={
<span className="grid h-11 w-11 place-items-center rounded-md bg-custom-background-80">
<ProjectLogo logo={value} className="text-xl" />
<Logo logo={value} size={20} />
</span>
}
onChange={(val: any) => {
@ -208,6 +212,7 @@ export const CreateProjectForm: FC<Props> = observer((props) => {
in_use: val?.type,
[val?.type]: logoValue,
});
setIsOpen(false);
}}
defaultIconColor={value.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
defaultOpen={

14
web/components/project/form.tsx
View file

@ -16,6 +16,7 @@ import {
Tooltip,
} from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { ImagePickerPopover } from "@/components/core";
// constants
import { PROJECT_UPDATED } from "@/constants/event-tracker";
@ -29,7 +30,6 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
// services
import { ProjectService } from "@/services/project";
// types
import { ProjectLogo } from "./project-logo";
export interface IProjectDetailsForm {
project: IProject;
workspaceSlug: string;
@ -40,6 +40,7 @@ const projectService = new ProjectService();
export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
const { project, workspaceSlug, projectId, isAdmin } = props;
// states
const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
// store hooks
const { captureProjectEvent } = useEventTracker();
@ -149,11 +150,11 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
name="logo_props"
render={({ field: { value, onChange } }) => (
<CustomEmojiIconPicker
label={
<span className="grid h-7 w-7 place-items-center">
<ProjectLogo logo={value} className="text-lg" />
</span>
}
isOpen={isOpen}
handleToggle={(val: boolean) => setIsOpen(val)}
className="flex items-center justify-center"
buttonClassName="flex items-center justify-center"
label={<Logo logo={value} size={28} />}
onChange={(val) => {
let logoValue = {};
@ -168,6 +169,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
in_use: val?.type,
[val?.type]: logoValue,
});
setIsOpen(false);
}}
defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined}
defaultOpen={

1
web/components/project/index.ts
View file

@ -18,7 +18,6 @@ export * from "./sidebar-list";
export * from "./integration-card";
export * from "./member-list";
export * from "./member-list-item";
export * from "./project-logo";
export * from "./project-settings-member-defaults";
export * from "./send-project-invitation-modal";
export * from "./confirm-project-member-remove";

12
web/components/project/project-feature-update.tsx
View file

@ -1,13 +1,13 @@
import React, { FC } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
// hooks
import { Button, getButtonStyling } from "@plane/ui";
import { useProject } from "@/hooks/store";
// ui
import { Button, getButtonStyling } from "@plane/ui";
// components
import { ProjectLogo } from "./project-logo";
import { ProjectFeaturesList } from "./settings";
import { Logo } from "@/components/common";
import { ProjectFeaturesList } from "@/components/project/settings";
// hooks
import { useProject } from "@/hooks/store";
type Props = {
workspaceSlug: string;
@ -35,7 +35,7 @@ export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
<ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
<div className="flex items-center justify-between gap-2 mt-4 px-4 pt-4 pb-2 border-t border-custom-border-100">
<div className="text-sm text-custom-text-300 font-medium">
Congrats! Project <ProjectLogo logo={currentProjectDetails.logo_props} />{" "}
Congrats! Project <Logo logo={currentProjectDetails.logo_props} />{" "}
<p className="break-all">{currentProjectDetails.name}</p> created.
</div>
<div className="flex gap-2">

34
web/components/project/project-logo.tsx
View file

@ -1,34 +0,0 @@
// helpers
import { TProjectLogoProps } from "@plane/types";
import { cn } from "@/helpers/common.helper";
// types
type Props = {
className?: string;
logo: TProjectLogoProps;
};
export const ProjectLogo: React.FC<Props> = (props) => {
const { className, logo } = props;
if (logo?.in_use === "icon" && logo?.icon)
return (
<span
style={{
color: logo.icon.color,
}}
className={cn("material-symbols-rounded text-base", className)}
>
{logo.icon.name}
</span>
);
if (logo?.in_use === "emoji" && logo?.emoji)
return (
<span className={cn("text-base", className)}>
{logo.emoji.value?.split("-").map((emoji) => String.fromCodePoint(parseInt(emoji, 10)))}
</span>
);
return <></>;
};

17
web/components/project/sidebar-list-item.tsx
View file

@ -8,6 +8,7 @@ import { observer } from "mobx-react";
import Link from "next/link";
import { useRouter } from "next/router";
import { createRoot } from "react-dom/client";
// icons
import {
MoreVertical,
PenSquare,
@ -21,8 +22,8 @@ import {
MoreHorizontal,
Inbox,
} from "lucide-react";
// headless ui
import { Disclosure, Transition } from "@headlessui/react";
// icons
// ui
import {
CustomMenu,
@ -35,8 +36,12 @@ import {
setPromiseToast,
DropIndicator,
} from "@plane/ui";
import { LeaveProjectModal, ProjectLogo, PublishProjectModal } from "@/components/project";
// components
import { Logo } from "@/components/common";
import { LeaveProjectModal, PublishProjectModal } from "@/components/project";
// constants
import { EUserProjectRoles } from "@/constants/project";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppTheme, useEventTracker, useProject } from "@/hooks/store";
@ -203,8 +208,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
const root = createRoot(container);
root.render(
<div className="rounded flex items-center bg-custom-background-100 text-sm p-1 pr-2">
<div className="flex items-center h-7 w-5 grid place-items-center flex-shrink-0">
{project && <ProjectLogo logo={project?.logo_props} />}
<div className="h-7 w-7 grid place-items-center flex-shrink-0">
{project && <Logo logo={project?.logo_props} />}
</div>
<p className="truncate text-custom-sidebar-text-200">{project?.name}</p>
</div>
@ -331,8 +336,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
"justify-center": isCollapsed,
})}
>
<div className="h-7 w-5 grid place-items-center flex-shrink-0">
<ProjectLogo logo={project.logo_props} />
<div className="h-7 w-7 grid place-items-center flex-shrink-0">
<Logo logo={project.logo_props} />
</div>
{!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
</div>

103
web/components/views/form.tsx
View file

@ -1,14 +1,17 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
// types
import { IProjectView, IIssueFilterOptions } from "@plane/types";
// ui
import { Button, Input, TextArea } from "@plane/ui";
import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, PhotoFilterIcon, TextArea } from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
// helpers
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
// hooks
import { useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
@ -26,6 +29,8 @@ const defaultValues: Partial<IProjectView> = {
export const ProjectViewForm: React.FC<Props> = observer((props) => {
const { handleFormSubmit, handleClose, data, preLoadedData } = props;
// state
const [isOpen, setIsOpen] = useState(false);
// store hooks
const { currentProjectDetails } = useProject();
const { projectStates } = useProjectState();
@ -45,6 +50,8 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
defaultValues,
});
const logoValue = watch("logo_props");
const selectedFilters: IIssueFilterOptions = {};
Object.entries(watch("filters") ?? {}).forEach(([key, value]) => {
if (!value) return;
@ -85,6 +92,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
await handleFormSubmit({
name: formData.name,
description: formData.description,
logo_props: formData.logo_props,
filters: formData.filters,
} as IProjectView);
@ -112,33 +120,74 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
<div className="space-y-5 p-5">
<h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Create"} View</h3>
<div className="space-y-3">
<div className="space-y-1">
<Controller
control={control}
name="name"
rules={{
required: "Title is required",
maxLength: {
value: 255,
message: "Title should be less than 255 characters",
},
<div className="flex items-start gap-2 w-full">
<EmojiIconPicker
isOpen={isOpen}
handleToggle={(val: boolean) => setIsOpen(val)}
className="flex items-center justify-center flex-shrink0"
buttonClassName="flex items-center justify-center"
label={
<span className="grid h-9 w-9 place-items-center rounded-md bg-custom-background-90">
<>
{logoValue?.in_use ? (
<Logo logo={logoValue} size={18} type="lucide" />
) : (
<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
)}
</>
</span>
}
onChange={(val: any) => {
let logoValue = {};
if (val?.type === "emoji")
logoValue = {
value: convertHexEmojiToDecimal(val.value.unified),
url: val.value.imageUrl,
};
else if (val?.type === "icon") logoValue = val.value;
setValue("logo_props", {
in_use: val?.type,
[val?.type]: logoValue,
});
setIsOpen(false);
}}
render={({ field: { value, onChange } }) => (
<Input
id="name"
type="name"
name="name"
value={value}
onChange={onChange}
hasError={Boolean(errors.name)}
placeholder="Title"
className="w-full text-base"
tabIndex={1}
autoFocus
/>
)}
defaultIconColor={logoValue?.in_use && logoValue?.in_use === "icon" ? logoValue?.icon?.color : undefined}
defaultOpen={
logoValue?.in_use && logoValue?.in_use === "emoji"
? EmojiIconPickerTypes.EMOJI
: EmojiIconPickerTypes.ICON
}
/>
<span className="text-xs text-red-500">{errors?.name?.message}</span>
<div className="space-y-1 flew-grow w-full">
<Controller
control={control}
name="name"
rules={{
required: "Title is required",
maxLength: {
value: 255,
message: "Title should be less than 255 characters",
},
}}
render={({ field: { value, onChange } }) => (
<Input
id="name"
type="name"
name="name"
value={value}
onChange={onChange}
hasError={Boolean(errors.name)}
placeholder="Title"
className="w-full text-base"
tabIndex={1}
autoFocus
/>
)}
/>
<span className="text-xs text-red-500">{errors?.name?.message}</span>
</div>
</div>
<div>
<Controller

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

@ -1,12 +1,18 @@
import { FC, useRef } from "react";
import { FC, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// types
import { IProjectView } from "@plane/types";
import { IProjectView, TLogoProps } from "@plane/types";
// ui
import { EmojiIconPicker, EmojiIconPickerTypes, PhotoFilterIcon, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { ListItem } from "@/components/core/list";
import { ViewListItemAction } from "@/components/views";
// helpers
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
// hooks
import { useProjectView } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
type Props = {
@ -17,19 +23,87 @@ export const ProjectViewListItem: FC<Props> = observer((props) => {
const { view } = props;
// refs
const parentRef = useRef(null);
// state
const [isOpen, setIsOpen] = useState(false);
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const { isMobile } = usePlatformOS();
const { updateView } = useProjectView();
const handleViewLogoUpdate = async (data: TLogoProps) => {
if (!workspaceSlug || !projectId || !view.id || !data) return;
updateView(workspaceSlug.toString(), projectId.toString(), view.id.toString(), {
logo_props: data,
})
.then(() => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "Logo Updated successfully.",
});
})
.catch(() => {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Something went wrong. Please try again.",
});
});
};
return (
<ListItem
prependTitleElement={
<>
<EmojiIconPicker
isOpen={isOpen}
handleToggle={(val: boolean) => setIsOpen(val)}
className="flex items-center justify-center"
buttonClassName="flex items-center justify-center"
label={
<>
{view?.logo_props?.in_use ? (
<Logo logo={view?.logo_props} size={16} type="lucide" />
) : (
<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
)}
</>
}
onChange={(val) => {
let logoValue = {};
if (val?.type === "emoji")
logoValue = {
value: convertHexEmojiToDecimal(val.value.unified),
url: val.value.imageUrl,
};
else if (val?.type === "icon") logoValue = val.value;
handleViewLogoUpdate({
in_use: val?.type,
[val?.type]: logoValue,
}).finally(() => setIsOpen(false));
}}
defaultIconColor={
view?.logo_props?.in_use && view?.logo_props.in_use === "icon" ? view?.logo_props?.icon?.color : undefined
}
defaultOpen={
view?.logo_props?.in_use && view?.logo_props?.in_use === "emoji"
? EmojiIconPickerTypes.EMOJI
: EmojiIconPickerTypes.ICON
}
/>
</>
}
title={view.name}
itemLink={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
actionableItems={<ViewListItemAction parentRef={parentRef} view={view} />}
isMobile={isMobile}
parentRef={parentRef}
disableLink={isOpen}
/>
);
});

13
web/helpers/emoji.helper.tsx
View file

@ -63,3 +63,16 @@ export const convertHexEmojiToDecimal = (emojiUnified: string): string => {
.map((e) => parseInt(e, 16))
.join("-");
};
export const emojiCodeToUnicode = (emoji: string) => {
if (!emoji) return "";
// convert emoji code to unicode
const uniCodeEmoji = emoji
.split("-")
.map((emoji) => parseInt(emoji, 10).toString(16))
.join("-");
return uniCodeEmoji;
};

24
web/store/pages/page.store.ts
View file

@ -1,7 +1,7 @@
import set from "lodash/set";
import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
// types
import { TPage } from "@plane/types";
import { TLogoProps, TPage } from "@plane/types";
// constants
import { EPageAccess } from "@/constants/page";
import { EUserProjectRoles } from "@/constants/project";
@ -38,6 +38,7 @@ export interface IPageStore extends TPage {
unlock: () => Promise<void>;
archive: () => Promise<void>;
restore: () => Promise<void>;
updatePageLogo: (logo_props: TLogoProps) => Promise<void>;
addToFavorites: () => Promise<void>;
removeFromFavorites: () => Promise<void>;
}
@ -48,6 +49,7 @@ export class PageStore implements IPageStore {
// page properties
id: string | undefined;
name: string | undefined;
logo_props: TLogoProps | undefined;
description_html: string | undefined;
color: string | undefined;
labels: string[] | undefined;
@ -75,6 +77,7 @@ export class PageStore implements IPageStore {
) {
this.id = page?.id || undefined;
this.name = page?.name;
this.logo_props = page?.logo_props || undefined;
this.description_html = page?.description_html || undefined;
this.color = page?.color || undefined;
this.labels = page?.labels || undefined;
@ -97,6 +100,7 @@ export class PageStore implements IPageStore {
// page properties
id: observable.ref,
name: observable.ref,
logo_props: observable.ref,
description_html: observable.ref,
color: observable.ref,
labels: observable,
@ -135,6 +139,7 @@ export class PageStore implements IPageStore {
unlock: action,
archive: action,
restore: action,
updatePageLogo: action,
addToFavorites: action,
removeFromFavorites: action,
});
@ -178,6 +183,7 @@ export class PageStore implements IPageStore {
labels: this.labels,
owned_by: this.owned_by,
access: this.access,
logo_props: this.logo_props,
is_favorite: this.is_favorite,
is_locked: this.is_locked,
archived_at: this.archived_at,
@ -455,6 +461,22 @@ export class PageStore implements IPageStore {
}
};
updatePageLogo = async (logo_props: TLogoProps) => {
const { workspaceSlug, projectId } = this.store.router;
if (!workspaceSlug || !projectId || !this.id) return undefined;
try {
await this.pageService.update(workspaceSlug, projectId, this.id, {
logo_props,
});
runInAction(() => {
this.logo_props = logo_props;
});
} catch (error) {
throw error;
}
};
/**
* @description add the page to favorites
*/