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

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apiserver/plane/app/serializers/cycle.py
View File

@ -66,6 +66,7 @@ class CycleSerializer(BaseSerializer):
"external_source", "external_source",
"external_id", "external_id",
"progress_snapshot", "progress_snapshot",
"logo_props",
# meta fields # meta fields
"is_favorite", "is_favorite",
"total_issues", "total_issues",

1
apiserver/plane/app/serializers/module.py
View File

@ -199,6 +199,7 @@ class ModuleSerializer(DynamicBaseSerializer):
"sort_order", "sort_order",
"external_source", "external_source",
"external_id", "external_id",
"logo_props",
# computed fields # computed fields
"is_favorite", "is_favorite",
"total_issues", "total_issues",

1
apiserver/plane/app/serializers/page.py
View File

@ -39,6 +39,7 @@ class PageSerializer(BaseSerializer):
"created_by", "created_by",
"updated_by", "updated_by",
"view_props", "view_props",
"logo_props",
] ]
read_only_fields = [ read_only_fields = [
"workspace", "workspace",

5
apiserver/plane/app/views/cycle/base.py
View File

@ -231,6 +231,7 @@ class CycleViewSet(BaseViewSet):
"external_source", "external_source",
"external_id", "external_id",
"progress_snapshot", "progress_snapshot",
"logo_props",
# meta fields # meta fields
"is_favorite", "is_favorite",
"total_issues", "total_issues",
@ -356,6 +357,7 @@ class CycleViewSet(BaseViewSet):
"external_source", "external_source",
"external_id", "external_id",
"progress_snapshot", "progress_snapshot",
"logo_props",
# meta fields # meta fields
"is_favorite", "is_favorite",
"total_issues", "total_issues",
@ -403,6 +405,7 @@ class CycleViewSet(BaseViewSet):
"external_source", "external_source",
"external_id", "external_id",
"progress_snapshot", "progress_snapshot",
"logo_props",
# meta fields # meta fields
"is_favorite", "is_favorite",
"cancelled_issues", "cancelled_issues",
@ -496,6 +499,7 @@ class CycleViewSet(BaseViewSet):
"external_source", "external_source",
"external_id", "external_id",
"progress_snapshot", "progress_snapshot",
"logo_props",
# meta fields # meta fields
"is_favorite", "is_favorite",
"total_issues", "total_issues",
@ -556,6 +560,7 @@ class CycleViewSet(BaseViewSet):
"external_id", "external_id",
"progress_snapshot", "progress_snapshot",
"sub_issues", "sub_issues",
"logo_props",
# meta fields # meta fields
"is_favorite", "is_favorite",
"total_issues", "total_issues",

3
apiserver/plane/app/views/module/base.py
View File

@ -225,6 +225,7 @@ class ModuleViewSet(BaseViewSet):
"sort_order", "sort_order",
"external_source", "external_source",
"external_id", "external_id",
"logo_props",
# computed fields # computed fields
"is_favorite", "is_favorite",
"cancelled_issues", "cancelled_issues",
@ -281,6 +282,7 @@ class ModuleViewSet(BaseViewSet):
"sort_order", "sort_order",
"external_source", "external_source",
"external_id", "external_id",
"logo_props",
# computed fields # computed fields
"total_issues", "total_issues",
"is_favorite", "is_favorite",
@ -465,6 +467,7 @@ class ModuleViewSet(BaseViewSet):
"sort_order", "sort_order",
"external_source", "external_source",
"external_id", "external_id",
"logo_props",
# computed fields # computed fields
"is_favorite", "is_favorite",
"cancelled_issues", "cancelled_issues",

12
packages/types/src/common.d.ts vendored
View File

@ -9,3 +9,15 @@ export type TPaginationInfo = {
per_page?: number; per_page?: number;
total_results: number; total_results: number;
}; };
export type TLogoProps = {
in_use: "emoji" | "icon";
emoji?: {
value?: string;
url?: string;
};
icon?: {
name?: string;
color?: string;
};
};

2
packages/types/src/pages.d.ts vendored
View File

@ -1,3 +1,4 @@
import { TLogoProps } from "./common";
import { EPageAccess } from "./enums"; import { EPageAccess } from "./enums";
export type TPage = { export type TPage = {
@ -17,6 +18,7 @@ export type TPage = {
updated_at: Date | undefined; updated_at: Date | undefined;
updated_by: string | undefined; updated_by: string | undefined;
workspace: string | undefined; workspace: string | undefined;
logo_props: TLogoProps | undefined;
}; };
// page filters // page filters

15
packages/types/src/project/projects.d.ts vendored
View File

@ -6,21 +6,10 @@ import type {
IUserMemberLite, IUserMemberLite,
IWorkspace, IWorkspace,
IWorkspaceLite, IWorkspaceLite,
TLogoProps,
TStateGroups, TStateGroups,
} from ".."; } from "..";
export type TProjectLogoProps = {
in_use: "emoji" | "icon";
emoji?: {
value?: string;
url?: string;
};
icon?: {
name?: string;
color?: string;
};
};
export interface IProject { export interface IProject {
archive_in: number; archive_in: number;
archived_at: string | null; archived_at: string | null;
@ -46,7 +35,7 @@ export interface IProject {
is_deployed: boolean; is_deployed: boolean;
is_favorite: boolean; is_favorite: boolean;
is_member: boolean; is_member: boolean;
logo_props: TProjectLogoProps; logo_props: TLogoProps;
member_role: EUserProjectRoles | null; member_role: EUserProjectRoles | null;
members: IProjectMemberLite[]; members: IProjectMemberLite[];
name: string; name: string;

2
packages/types/src/views.d.ts vendored
View File

@ -1,3 +1,4 @@
import { TLogoProps } from "./common";
import { import {
IIssueDisplayFilterOptions, IIssueDisplayFilterOptions,
IIssueDisplayProperties, IIssueDisplayProperties,
@ -21,4 +22,5 @@ export interface IProjectView {
query_data: IIssueFilterOptions; query_data: IIssueFilterOptions;
project: string; project: string;
workspace: string; workspace: string;
logo_props: TLogoProps | undefined;
} }

1
packages/ui/package.json
View File

@ -26,6 +26,7 @@
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"emoji-picker-react": "^4.5.16", "emoji-picker-react": "^4.5.16",
"lucide-react": "^0.379.0",
"react-color": "^2.19.3", "react-color": "^2.19.3",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-popper": "^2.3.0", "react-popper": "^2.3.0",

4
packages/ui/src/control-link/control-link.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react";
export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & { export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
href: string; href: string;
onClick: () => void; onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
children: React.ReactNode; children: React.ReactNode;
target?: string; target?: string;
disabled?: boolean; disabled?: boolean;
@ -17,7 +17,7 @@ export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((pr
const clickCondition = (event.metaKey || event.ctrlKey) && event.button === LEFT_CLICK_EVENT_CODE; const clickCondition = (event.metaKey || event.ctrlKey) && event.button === LEFT_CLICK_EVENT_CODE;
if (!clickCondition) { if (!clickCondition) {
event.preventDefault(); event.preventDefault();
onClick(); onClick(event);
} }
}; };

100
packages/ui/src/emoji/emoji-icon-helper.tsx Normal file
View File

@ -0,0 +1,100 @@
import { Placement } from "@popperjs/core";
import { EmojiClickData, Theme } from "emoji-picker-react";
export enum EmojiIconPickerTypes {
EMOJI = "emoji",
ICON = "icon",
}
export const TABS_LIST = [
{
key: EmojiIconPickerTypes.EMOJI,
title: "Emojis",
},
{
key: EmojiIconPickerTypes.ICON,
title: "Icons",
},
];
export type TChangeHandlerProps =
| {
type: EmojiIconPickerTypes.EMOJI;
value: EmojiClickData;
}
| {
type: EmojiIconPickerTypes.ICON;
value: {
name: string;
color: string;
};
};
export type TCustomEmojiPicker = {
isOpen: boolean;
handleToggle: (value: boolean) => void;
buttonClassName?: string;
className?: string;
closeOnSelect?: boolean;
defaultIconColor?: string;
defaultOpen?: EmojiIconPickerTypes;
disabled?: boolean;
dropdownClassName?: string;
label: React.ReactNode;
onChange: (value: TChangeHandlerProps) => void;
placement?: Placement;
searchPlaceholder?: string;
theme?: Theme;
iconType?: "material" | "lucide";
};
export const DEFAULT_COLORS = ["#95999f", "#6d7b8a", "#5e6ad2", "#02b5ed", "#02b55c", "#f2be02", "#e57a00", "#f38e82"];
export type TIconsListProps = {
defaultColor: string;
onChange: (val: { name: string; color: string }) => void;
};
/**
* Adjusts the given hex color to ensure it has enough contrast.
* @param {string} hex - The hex color code input by the user.
* @returns {string} - The adjusted hex color code.
*/
export const adjustColorForContrast = (hex: string): string => {
// Ensure hex color is valid
if (!/^#([0-9A-F]{3}){1,2}$/i.test(hex)) {
throw new Error("Invalid hex color code");
}
// Convert hex to RGB
let r = 0,
g = 0,
b = 0;
if (hex.length === 4) {
r = parseInt(hex[1] + hex[1], 16);
g = parseInt(hex[2] + hex[2], 16);
b = parseInt(hex[3] + hex[3], 16);
} else if (hex.length === 7) {
r = parseInt(hex[1] + hex[2], 16);
g = parseInt(hex[3] + hex[4], 16);
b = parseInt(hex[5] + hex[6], 16);
}
// Calculate luminance
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
// If the color is too light, darken it
if (luminance > 0.5) {
r = Math.max(0, r - 50);
g = Math.max(0, g - 50);
b = Math.max(0, b - 50);
}
// Convert RGB back to hex
const toHex = (value: number): string => {
const hex = value.toString(16);
return hex.length === 1 ? "0" + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
};

135
packages/ui/src/emoji/emoji-icon-picker-new.tsx Normal file
View File

@ -0,0 +1,135 @@
import React, { useRef, useState } from "react";
import { usePopper } from "react-popper";
import { Popover, Tab } from "@headlessui/react";
import EmojiPicker from "emoji-picker-react";
// helpers
import { cn } from "../../helpers";
// hooks
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
import { LucideIconsList } from "./lucide-icons-list";
// helpers
import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
export const EmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
const {
isOpen,
handleToggle,
buttonClassName,
className,
closeOnSelect = true,
defaultIconColor = "#6d7b8a",
defaultOpen = EmojiIconPickerTypes.EMOJI,
disabled = false,
dropdownClassName,
label,
onChange,
placement = "bottom-start",
searchPlaceholder = "Search",
theme,
} = props;
// refs
const containerRef = useRef<HTMLDivElement>(null);
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
// popper-js
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement,
modifiers: [
{
name: "preventOverflow",
options: {
padding: 20,
},
},
],
});
// close dropdown on outside click
useOutsideClickDetector(containerRef, () => handleToggle(false));
return (
<Popover as="div" className={cn("relative", className)}>
<>
<Popover.Button as={React.Fragment}>
<button
type="button"
ref={setReferenceElement}
className={cn("outline-none", buttonClassName)}
disabled={disabled}
onClick={() => handleToggle(!isOpen)}
>
{label}
</button>
</Popover.Button>
{isOpen && (
<Popover.Panel className="fixed z-10" static>
<div
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
className={cn(
"w-80 bg-custom-background-100 rounded-md border-[0.5px] border-custom-border-300 overflow-hidden",
dropdownClassName
)}
>
<Tab.Group
ref={containerRef}
as="div"
className="h-full w-full flex flex-col overflow-hidden"
defaultIndex={TABS_LIST.findIndex((tab) => tab.key === defaultOpen)}
>
<Tab.List as="div" className="grid grid-cols-2 gap-1 p-2">
{TABS_LIST.map((tab) => (
<Tab
key={tab.key}
className={({ selected }) =>
cn("py-1 text-sm rounded border border-custom-border-200", {
"bg-custom-background-80": selected,
"hover:bg-custom-background-90 focus:bg-custom-background-90": !selected,
})
}
>
{tab.title}
</Tab>
))}
</Tab.List>
<Tab.Panels as="div" className="h-full w-full overflow-y-auto">
<Tab.Panel>
<EmojiPicker
onEmojiClick={(val) => {
onChange({
type: EmojiIconPickerTypes.EMOJI,
value: val,
});
if (closeOnSelect) close();
}}
height="20rem"
width="100%"
theme={theme}
searchPlaceholder={searchPlaceholder}
previewConfig={{
showPreview: false,
}}
/>
</Tab.Panel>
<Tab.Panel className="h-80 w-full">
<LucideIconsList
defaultColor={defaultIconColor}
onChange={(val) => {
onChange({
type: EmojiIconPickerTypes.ICON,
value: val,
});
if (closeOnSelect) close();
}}
/>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</Popover.Panel>
)}
</>
</Popover>
);
};

92
packages/ui/src/emoji/emoji-icon-picker.tsx
View File

@ -1,63 +1,23 @@
import React, { useState } from "react"; import React, { useRef, useState } from "react";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
import EmojiPicker, { EmojiClickData, Theme } from "emoji-picker-react"; import EmojiPicker from "emoji-picker-react";
import { Popover, Tab } from "@headlessui/react"; import { Popover, Tab } from "@headlessui/react";
import { Placement } from "@popperjs/core";
// components // components
import { IconsList } from "./icons-list"; import { IconsList } from "./icons-list";
// helpers // helpers
import { cn } from "../../helpers"; import { cn } from "../../helpers";
// hooks
export enum EmojiIconPickerTypes { import useOutsideClickDetector from "../hooks/use-outside-click-detector";
EMOJI = "emoji", import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
ICON = "icon",
}
type TChangeHandlerProps =
| {
type: EmojiIconPickerTypes.EMOJI;
value: EmojiClickData;
}
| {
type: EmojiIconPickerTypes.ICON;
value: {
name: string;
color: string;
};
};
export type TCustomEmojiPicker = {
buttonClassName?: string;
className?: string;
closeOnSelect?: boolean;
defaultIconColor?: string;
defaultOpen?: EmojiIconPickerTypes;
disabled?: boolean;
dropdownClassName?: string;
label: React.ReactNode;
onChange: (value: TChangeHandlerProps) => void;
placement?: Placement;
searchPlaceholder?: string;
theme?: Theme;
};
const TABS_LIST = [
{
key: EmojiIconPickerTypes.EMOJI,
title: "Emojis",
},
{
key: EmojiIconPickerTypes.ICON,
title: "Icons",
},
];
export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => { export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
const { const {
isOpen,
handleToggle,
buttonClassName, buttonClassName,
className, className,
closeOnSelect = true, closeOnSelect = true,
defaultIconColor = "#5f5f5f", defaultIconColor = "#6d7b8a",
defaultOpen = EmojiIconPickerTypes.EMOJI, defaultOpen = EmojiIconPickerTypes.EMOJI,
disabled = false, disabled = false,
dropdownClassName, dropdownClassName,
@ -68,6 +28,7 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
theme, theme,
} = props; } = props;
// refs // refs
const containerRef = useRef<HTMLDivElement>(null);
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null); const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null); const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
// popper-js // popper-js
@ -83,21 +44,25 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
], ],
}); });
// close dropdown on outside click
useOutsideClickDetector(containerRef, () => handleToggle(false));
return ( return (
<Popover as="div" className={cn("relative", className)}> <Popover as="div" className={cn("relative", className)}>
{({ close }) => ( <>
<> <Popover.Button as={React.Fragment}>
<Popover.Button as={React.Fragment}> <button
<button type="button"
type="button" ref={setReferenceElement}
ref={setReferenceElement} className={cn("outline-none", buttonClassName)}
className={cn("outline-none", buttonClassName)} disabled={disabled}
disabled={disabled} onClick={() => handleToggle(!isOpen)}
> >
{label} {label}
</button> </button>
</Popover.Button> </Popover.Button>
<Popover.Panel className="fixed z-10"> {isOpen && (
<Popover.Panel className="fixed z-10" static>
<div <div
ref={setPopperElement} ref={setPopperElement}
style={styles.popper} style={styles.popper}
@ -108,6 +73,7 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
)} )}
> >
<Tab.Group <Tab.Group
ref={containerRef}
as="div" as="div"
className="h-full w-full flex flex-col overflow-hidden" className="h-full w-full flex flex-col overflow-hidden"
defaultIndex={TABS_LIST.findIndex((tab) => tab.key === defaultOpen)} defaultIndex={TABS_LIST.findIndex((tab) => tab.key === defaultOpen)}
@ -162,8 +128,8 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
</Tab.Group> </Tab.Group>
</div> </div>
</Popover.Panel> </Popover.Panel>
</> )}
)} </>
</Popover> </Popover>
); );
}; };

54
packages/ui/src/emoji/icons-list.tsx
View File

@ -3,15 +3,11 @@ import React, { useEffect, useState } from "react";
import { Input } from "../form-fields"; import { Input } from "../form-fields";
// helpers // helpers
import { cn } from "../../helpers"; import { cn } from "../../helpers";
// constants import { DEFAULT_COLORS, TIconsListProps, adjustColorForContrast } from "./emoji-icon-helper";
// icons
import { MATERIAL_ICONS_LIST } from "./icons"; import { MATERIAL_ICONS_LIST } from "./icons";
import { InfoIcon } from "../icons";
type TIconsListProps = { import { Search } from "lucide-react";
defaultColor: string;
onChange: (val: { name: string; color: string }) => void;
};
const DEFAULT_COLORS = ["#ff6b00", "#8cc1ff", "#fcbe1d", "#18904f", "#adf672", "#05c3ff", "#5f5f5f"];
export const IconsList: React.FC<TIconsListProps> = (props) => { export const IconsList: React.FC<TIconsListProps> = (props) => {
const { defaultColor, onChange } = props; const { defaultColor, onChange } = props;
@ -19,6 +15,8 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
const [activeColor, setActiveColor] = useState(defaultColor); const [activeColor, setActiveColor] = useState(defaultColor);
const [showHexInput, setShowHexInput] = useState(false); const [showHexInput, setShowHexInput] = useState(false);
const [hexValue, setHexValue] = useState(""); const [hexValue, setHexValue] = useState("");
const [isInputFocused, setIsInputFocused] = useState(false);
const [query, setQuery] = useState("");
useEffect(() => { useEffect(() => {
if (DEFAULT_COLORS.includes(defaultColor.toLowerCase())) setShowHexInput(false); if (DEFAULT_COLORS.includes(defaultColor.toLowerCase())) setShowHexInput(false);
@ -28,11 +26,28 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
} }
}, [defaultColor]); }, [defaultColor]);
const filteredArray = MATERIAL_ICONS_LIST.filter((icon) => icon.name.toLowerCase().includes(query.toLowerCase()));
return ( return (
<> <>
<div className="grid grid-cols-8 gap-2 items-center justify-items-center px-2.5 h-9"> <div className="flex items-center px-2 py-[15px] w-full ">
<div
className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
onFocus={() => setIsInputFocused(true)}
onBlur={() => setIsInputFocused(false)}
>
<Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
<Input
placeholder="Search"
value={query}
onChange={(e) => setQuery(e.target.value)}
className="text-[1rem] border-none p-0 h-full w-full "
/>
</div>
</div>
<div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
{showHexInput ? ( {showHexInput ? (
<div className="col-span-7 flex items-center gap-1 justify-self-stretch ml-2"> <div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">
<span <span
className="h-4 w-4 flex-shrink-0 rounded-full mr-1" className="h-4 w-4 flex-shrink-0 rounded-full mr-1"
style={{ style={{
@ -47,7 +62,7 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
setHexValue(value); setHexValue(value);
if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(`#${value}`); if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
}} }}
className="flex-grow pl-0 text-xs text-custom-text-200" className="flex-grow pl-0 text-xs text-custom-text-200"
mode="true-transparent" mode="true-transparent"
@ -59,7 +74,7 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
<button <button
key={curCol} key={curCol}
type="button" type="button"
className="grid place-items-center" className="grid place-items-center size-5"
onClick={() => { onClick={() => {
setActiveColor(curCol); setActiveColor(curCol);
setHexValue(curCol.slice(1, 7)); setHexValue(curCol.slice(1, 7));
@ -86,12 +101,16 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
)} )}
</button> </button>
</div> </div>
<div className="grid grid-cols-8 gap-2 px-2.5 justify-items-center mt-2"> <div className="flex items-center gap-2 w-full pl-4 pr-3 py-1 h-6">
{MATERIAL_ICONS_LIST.map((icon) => ( <InfoIcon className="h-3 w-3" />
<p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p>
</div>
<div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2">
{filteredArray.map((icon) => (
<button <button
key={icon.name} key={icon.name}
type="button" type="button"
className="h-6 w-6 select-none text-lg grid place-items-center rounded hover:bg-custom-background-80" className="h-9 w-9 select-none text-lg grid place-items-center rounded hover:bg-custom-background-80"
onClick={() => { onClick={() => {
onChange({ onChange({
name: icon.name, name: icon.name,
@ -99,7 +118,10 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
}); });
}} }}
> >
<span style={{ color: activeColor }} className="material-symbols-rounded text-base"> <span
style={{ color: activeColor }}
className="material-symbols-rounded !text-[1.25rem] !leading-[1.25rem]"
>
{icon.name} {icon.name}
</span> </span>
</button> </button>

306
packages/ui/src/emoji/icons.ts
View File

@ -1,3 +1,156 @@
import {
Activity,
Airplay,
AlertCircle,
AlertOctagon,
AlertTriangle,
AlignCenter,
AlignJustify,
AlignLeft,
AlignRight,
Anchor,
Aperture,
Archive,
ArrowDown,
ArrowLeft,
ArrowRight,
ArrowUp,
AtSign,
Award,
BarChart,
BarChart2,
Battery,
BatteryCharging,
Bell,
BellOff,
Book,
Bookmark,
BookOpen,
Box,
Briefcase,
Calendar,
Camera,
CameraOff,
Cast,
Check,
CheckCircle,
CheckSquare,
ChevronDown,
ChevronLeft,
ChevronRight,
ChevronUp,
Clipboard,
Clock,
Cloud,
CloudDrizzle,
CloudLightning,
CloudOff,
CloudRain,
CloudSnow,
Code,
Codepen,
Codesandbox,
Coffee,
Columns,
Command,
Compass,
Copy,
CornerDownLeft,
CornerDownRight,
CornerLeftDown,
CornerLeftUp,
CornerRightDown,
CornerRightUp,
CornerUpLeft,
CornerUpRight,
Cpu,
CreditCard,
Crop,
Crosshair,
Database,
Delete,
Disc,
Divide,
DivideCircle,
DivideSquare,
DollarSign,
Download,
DownloadCloud,
Dribbble,
Droplet,
Edit,
Edit2,
Edit3,
ExternalLink,
Eye,
EyeOff,
Facebook,
FastForward,
Feather,
Figma,
File,
FileMinus,
FilePlus,
FileText,
Film,
Filter,
Flag,
Folder,
FolderMinus,
FolderPlus,
Framer,
Frown,
Gift,
GitBranch,
GitCommit,
GitMerge,
GitPullRequest,
Github,
Gitlab,
Globe,
Grid,
HardDrive,
Hash,
Headphones,
Heart,
HelpCircle,
Hexagon,
Home,
Image,
Inbox,
Info,
Instagram,
Italic,
Key,
Layers,
Layout,
LifeBuoy,
Link,
Link2,
Linkedin,
List,
Loader,
Lock,
LogIn,
LogOut,
Mail,
Map,
MapPin,
Maximize,
Maximize2,
Meh,
Menu,
MessageCircle,
MessageSquare,
Mic,
MicOff,
Minimize,
Minimize2,
Minus,
MinusCircle,
MinusSquare,
} from "lucide-react";
export const MATERIAL_ICONS_LIST = [ export const MATERIAL_ICONS_LIST = [
{ {
name: "search", name: "search",
@ -603,3 +756,156 @@ export const MATERIAL_ICONS_LIST = [
name: "skull", name: "skull",
}, },
]; ];
export const LUCIDE_ICONS_LIST = [
{ name: "Activity", element: Activity },
{ name: "Airplay", element: Airplay },
{ name: "AlertCircle", element: AlertCircle },
{ name: "AlertOctagon", element: AlertOctagon },
{ name: "AlertTriangle", element: AlertTriangle },
{ name: "AlignCenter", element: AlignCenter },
{ name: "AlignJustify", element: AlignJustify },
{ name: "AlignLeft", element: AlignLeft },
{ name: "AlignRight", element: AlignRight },
{ name: "Anchor", element: Anchor },
{ name: "Aperture", element: Aperture },
{ name: "Archive", element: Archive },
{ name: "ArrowDown", element: ArrowDown },
{ name: "ArrowLeft", element: ArrowLeft },
{ name: "ArrowRight", element: ArrowRight },
{ name: "ArrowUp", element: ArrowUp },
{ name: "AtSign", element: AtSign },
{ name: "Award", element: Award },
{ name: "BarChart", element: BarChart },
{ name: "BarChart2", element: BarChart2 },
{ name: "Battery", element: Battery },
{ name: "BatteryCharging", element: BatteryCharging },
{ name: "Bell", element: Bell },
{ name: "BellOff", element: BellOff },
{ name: "Book", element: Book },
{ name: "Bookmark", element: Bookmark },
{ name: "BookOpen", element: BookOpen },
{ name: "Box", element: Box },
{ name: "Briefcase", element: Briefcase },
{ name: "Calendar", element: Calendar },
{ name: "Camera", element: Camera },
{ name: "CameraOff", element: CameraOff },
{ name: "Cast", element: Cast },
{ name: "Check", element: Check },
{ name: "CheckCircle", element: CheckCircle },
{ name: "CheckSquare", element: CheckSquare },
{ name: "ChevronDown", element: ChevronDown },
{ name: "ChevronLeft", element: ChevronLeft },
{ name: "ChevronRight", element: ChevronRight },
{ name: "ChevronUp", element: ChevronUp },
{ name: "Clipboard", element: Clipboard },
{ name: "Clock", element: Clock },
{ name: "Cloud", element: Cloud },
{ name: "CloudDrizzle", element: CloudDrizzle },
{ name: "CloudLightning", element: CloudLightning },
{ name: "CloudOff", element: CloudOff },
{ name: "CloudRain", element: CloudRain },
{ name: "CloudSnow", element: CloudSnow },
{ name: "Code", element: Code },
{ name: "Codepen", element: Codepen },
{ name: "Codesandbox", element: Codesandbox },
{ name: "Coffee", element: Coffee },
{ name: "Columns", element: Columns },
{ name: "Command", element: Command },
{ name: "Compass", element: Compass },
{ name: "Copy", element: Copy },
{ name: "CornerDownLeft", element: CornerDownLeft },
{ name: "CornerDownRight", element: CornerDownRight },
{ name: "CornerLeftDown", element: CornerLeftDown },
{ name: "CornerLeftUp", element: CornerLeftUp },
{ name: "CornerRightDown", element: CornerRightDown },
{ name: "CornerRightUp", element: CornerRightUp },
{ name: "CornerUpLeft", element: CornerUpLeft },
{ name: "CornerUpRight", element: CornerUpRight },
{ name: "Cpu", element: Cpu },
{ name: "CreditCard", element: CreditCard },
{ name: "Crop", element: Crop },
{ name: "Crosshair", element: Crosshair },
{ name: "Database", element: Database },
{ name: "Delete", element: Delete },
{ name: "Disc", element: Disc },
{ name: "Divide", element: Divide },
{ name: "DivideCircle", element: DivideCircle },
{ name: "DivideSquare", element: DivideSquare },
{ name: "DollarSign", element: DollarSign },
{ name: "Download", element: Download },
{ name: "DownloadCloud", element: DownloadCloud },
{ name: "Dribbble", element: Dribbble },
{ name: "Droplet", element: Droplet },
{ name: "Edit", element: Edit },
{ name: "Edit2", element: Edit2 },
{ name: "Edit3", element: Edit3 },
{ name: "ExternalLink", element: ExternalLink },
{ name: "Eye", element: Eye },
{ name: "EyeOff", element: EyeOff },
{ name: "Facebook", element: Facebook },
{ name: "FastForward", element: FastForward },
{ name: "Feather", element: Feather },
{ name: "Figma", element: Figma },
{ name: "File", element: File },
{ name: "FileMinus", element: FileMinus },
{ name: "FilePlus", element: FilePlus },
{ name: "FileText", element: FileText },
{ name: "Film", element: Film },
{ name: "Filter", element: Filter },
{ name: "Flag", element: Flag },
{ name: "Folder", element: Folder },
{ name: "FolderMinus", element: FolderMinus },
{ name: "FolderPlus", element: FolderPlus },
{ name: "Framer", element: Framer },
{ name: "Frown", element: Frown },
{ name: "Gift", element: Gift },
{ name: "GitBranch", element: GitBranch },
{ name: "GitCommit", element: GitCommit },
{ name: "GitMerge", element: GitMerge },
{ name: "GitPullRequest", element: GitPullRequest },
{ name: "Github", element: Github },
{ name: "Gitlab", element: Gitlab },
{ name: "Globe", element: Globe },
{ name: "Grid", element: Grid },
{ name: "HardDrive", element: HardDrive },
{ name: "Hash", element: Hash },
{ name: "Headphones", element: Headphones },
{ name: "Heart", element: Heart },
{ name: "HelpCircle", element: HelpCircle },
{ name: "Hexagon", element: Hexagon },
{ name: "Home", element: Home },
{ name: "Image", element: Image },
{ name: "Inbox", element: Inbox },
{ name: "Info", element: Info },
{ name: "Instagram", element: Instagram },
{ name: "Italic", element: Italic },
{ name: "Key", element: Key },
{ name: "Layers", element: Layers },
{ name: "Layout", element: Layout },
{ name: "LifeBuoy", element: LifeBuoy },
{ name: "Link", element: Link },
{ name: "Link2", element: Link2 },
{ name: "Linkedin", element: Linkedin },
{ name: "List", element: List },
{ name: "Loader", element: Loader },
{ name: "Lock", element: Lock },
{ name: "LogIn", element: LogIn },
{ name: "LogOut", element: LogOut },
{ name: "Mail", element: Mail },
{ name: "Map", element: Map },
{ name: "MapPin", element: MapPin },
{ name: "Maximize", element: Maximize },
{ name: "Maximize2", element: Maximize2 },
{ name: "Meh", element: Meh },
{ name: "Menu", element: Menu },
{ name: "MessageCircle", element: MessageCircle },
{ name: "MessageSquare", element: MessageSquare },
{ name: "Mic", element: Mic },
{ name: "MicOff", element: MicOff },
{ name: "Minimize", element: Minimize },
{ name: "Minimize2", element: Minimize2 },
{ name: "Minus", element: Minus },
{ name: "MinusCircle", element: MinusCircle },
{ name: "MinusSquare", element: MinusSquare },
];

3
packages/ui/src/emoji/index.ts
View File

@ -1 +1,4 @@
export * from "./emoji-icon-picker-new";
export * from "./emoji-icon-picker"; export * from "./emoji-icon-picker";
export * from "./emoji-icon-helper";
export * from "./icons";

128
packages/ui/src/emoji/lucide-icons-list.tsx Normal file
View File

@ -0,0 +1,128 @@
import React, { useEffect, useState } from "react";
// components
import { Input } from "../form-fields";
// helpers
import { cn } from "../../helpers";
import { DEFAULT_COLORS, TIconsListProps, adjustColorForContrast } from "./emoji-icon-helper";
// icons
import { InfoIcon } from "../icons";
// constants
import { LUCIDE_ICONS_LIST } from "./icons";
import { Search } from "lucide-react";
export const LucideIconsList: React.FC<TIconsListProps> = (props) => {
const { defaultColor, onChange } = props;
// states
const [activeColor, setActiveColor] = useState(defaultColor);
const [showHexInput, setShowHexInput] = useState(false);
const [hexValue, setHexValue] = useState("");
const [isInputFocused, setIsInputFocused] = useState(false);
const [query, setQuery] = useState("");
useEffect(() => {
if (DEFAULT_COLORS.includes(defaultColor.toLowerCase())) setShowHexInput(false);
else {
setHexValue(defaultColor.slice(1, 7));
setShowHexInput(true);
}
}, [defaultColor]);
const filteredArray = LUCIDE_ICONS_LIST.filter((icon) => icon.name.toLowerCase().includes(query.toLowerCase()));
return (
<>
<div className="flex items-center px-2 py-[15px] w-full ">
<div
className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
onFocus={() => setIsInputFocused(true)}
onBlur={() => setIsInputFocused(false)}
>
<Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
<Input
placeholder="Search"
value={query}
onChange={(e) => setQuery(e.target.value)}
className="text-[1rem] border-none p-0 h-full w-full "
/>
</div>
</div>
<div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
{showHexInput ? (
<div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">
<span
className="h-4 w-4 flex-shrink-0 rounded-full mr-1"
style={{
backgroundColor: `#${hexValue}`,
}}
/>
<span className="text-xs text-custom-text-300 flex-shrink-0">HEX</span>
<span className="text-xs text-custom-text-200 flex-shrink-0 -mr-1">#</span>
<Input
type="text"
value={hexValue}
onChange={(e) => {
const value = e.target.value;
setHexValue(value);
if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
}}
className="flex-grow pl-0 text-xs text-custom-text-200"
mode="true-transparent"
autoFocus
/>
</div>
) : (
DEFAULT_COLORS.map((curCol) => (
<button
key={curCol}
type="button"
className="grid place-items-center size-5"
onClick={() => {
setActiveColor(curCol);
setHexValue(curCol.slice(1, 7));
}}
>
<span className="h-4 w-4 cursor-pointer rounded-full" style={{ backgroundColor: curCol }} />
</button>
))
)}
<button
type="button"
className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
"border-custom-border-400": !showHexInput,
})}
onClick={() => {
setShowHexInput((prevData) => !prevData);
setHexValue(activeColor.slice(1, 7));
}}
>
{showHexInput ? (
<span className="conical-gradient h-4 w-4 rounded-full" />
) : (
<span className="text-custom-text-300 text-[0.6rem] grid place-items-center">#</span>
)}
</button>
</div>
<div className="flex items-center gap-2 w-full pl-4 pr-3 py-1 h-6">
<InfoIcon className="h-3 w-3" />
<p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p>
</div>
<div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2">
{filteredArray.map((icon) => (
<button
key={icon.name}
type="button"
className="h-9 w-9 select-none text-lg grid place-items-center rounded hover:bg-custom-background-80"
onClick={() => {
onChange({
name: icon.name,
color: activeColor,
});
}}
>
<icon.element style={{ color: activeColor }} className="size-4" />
</button>
))}
</div>
</>
);
};

1
packages/ui/src/icons/index.ts
View File

@ -19,3 +19,4 @@ export * from "./priority-icon";
export * from "./related-icon"; export * from "./related-icon";
export * from "./side-panel-icon"; export * from "./side-panel-icon";
export * from "./transfer-icon"; export * from "./transfer-icon";
export * from "./info-icon";

21
packages/ui/src/icons/info-icon.tsx Normal file
View File

@ -0,0 +1,21 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const InfoIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4" />
<path d="M12 8h.01" />
</svg>
);

8
space/components/common/project-logo.tsx
View File

@ -1,11 +1,11 @@
// helpers
import { TProjectLogoProps } from "@plane/types";
import { cn } from "@/helpers/common.helper";
// types // types
import { TLogoProps } from "@plane/types";
// helpers
import { cn } from "@/helpers/common.helper";
type Props = { type Props = {
className?: string; className?: string;
logo: TProjectLogoProps; logo: TLogoProps;
}; };
export const ProjectLogo: React.FC<Props> = (props) => { export const ProjectLogo: React.FC<Props> = (props) => {

4
space/types/project.d.ts vendored
View File

@ -1,4 +1,4 @@
import { TProjectLogoProps } from "@plane/types"; import { TLogoProps } from "@plane/types";
export type TWorkspaceDetails = { export type TWorkspaceDetails = {
name: string; name: string;
@ -19,7 +19,7 @@ export type TProjectDetails = {
identifier: string; identifier: string;
name: string; name: string;
cover_image: string | undefined; cover_image: string | undefined;
logo_props: TProjectLogoProps; logo_props: TLogoProps;
description: string; description: string;
}; };

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

@ -1,10 +1,11 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// hooks
// icons // icons
import { Contrast, LayoutGrid, Users } from "lucide-react"; import { Contrast, LayoutGrid, Users } from "lucide-react";
// components
import { Logo } from "@/components/common";
// helpers // helpers
import { ProjectLogo } from "@/components/project";
import { truncateText } from "@/helpers/string.helper"; import { truncateText } from "@/helpers/string.helper";
// hooks
import { useProject } from "@/hooks/store"; import { useProject } from "@/hooks/store";
type Props = { type Props = {
@ -29,7 +30,7 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
<div key={projectId} className="w-full"> <div key={projectId} className="w-full">
<div className="flex items-center gap-1 text-sm"> <div className="flex items-center gap-1 text-sm">
<div className="h-6 w-6 grid place-items-center"> <div className="h-6 w-6 grid place-items-center">
<ProjectLogo logo={project.logo_props} /> <Logo logo={project.logo_props} />
</div> </div>
<h5 className="flex items-center gap-1"> <h5 className="flex items-center gap-1">
<p className="break-words">{truncateText(project.name, 20)}</p> <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 { observer } from "mobx-react";
import { useRouter } from "next/router"; 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 // components
// helpers import { Logo } from "@/components/common";
// constants // 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(() => { export const CustomAnalyticsSidebarHeader = observer(() => {
const router = useRouter(); const router = useRouter();
@ -84,7 +84,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{projectDetails && ( {projectDetails && (
<span className="h-6 w-6 grid place-items-center flex-shrink-0"> <span className="h-6 w-6 grid place-items-center flex-shrink-0">
<ProjectLogo logo={projectDetails.logo_props} /> <Logo logo={projectDetails.logo_props} />
</span> </span>
)} )}
<h4 className="break-words font-medium">{projectDetails?.name}</h4> <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 "./latest-feature-block";
export * from "./breadcrumb-link"; export * from "./breadcrumb-link";
export * from "./logo-spinner"; 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 React, { FC } from "react";
import Link from "next/link"; import { useRouter } from "next/router";
// ui // ui
import { Tooltip } from "@plane/ui"; import { ControlLink, Tooltip } from "@plane/ui";
// helpers // helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
@ -14,6 +14,7 @@ interface IListItemProps {
actionableItems?: JSX.Element; actionableItems?: JSX.Element;
isMobile?: boolean; isMobile?: boolean;
parentRef: React.RefObject<HTMLDivElement>; parentRef: React.RefObject<HTMLDivElement>;
disableLink?: boolean;
className?: string; className?: string;
} }
@ -27,12 +28,22 @@ export const ListItem: FC<IListItemProps> = (props) => {
onItemClick, onItemClick,
isMobile = false, isMobile = false,
parentRef, parentRef,
disableLink = false,
className = "", className = "",
} = props; } = props;
// router
const router = useRouter();
// handlers
const handleControlLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
if (onItemClick) onItemClick(e);
else router.push(itemLink);
};
return ( return (
<div ref={parentRef} className="relative"> <div ref={parentRef} className="relative">
<Link href={itemLink} onClick={onItemClick}> <ControlLink href={itemLink} onClick={handleControlLinkClick} disabled={disableLink}>
<div <div
className={cn( 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", "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> </div>
<span className="h-6 w-96 flex-shrink-0" /> <span className="h-6 w-96 flex-shrink-0" />
</div> </div>
</Link> </ControlLink>
{actionableItems && ( {actionableItems && (
<div className="absolute right-5 bottom-4 flex items-center gap-1.5"> <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"> <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 ( return (
<ListItem <ListItem
title={cycleDetails?.name ?? ""} title={cycleDetails?.name ?? ""}
itemLink={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`} itemLink={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}
onItemClick={(e) => { onItemClick={handleItemClick}
if (cycleDetails.archived_at) openCycleOverview(e);
}}
className={className} className={className}
prependTitleElement={ prependTitleElement={
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}> <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 // ui
import { Avatar, AvatarGroup } from "@plane/ui"; import { Avatar, AvatarGroup } from "@plane/ui";
// components // components
import { Logo } from "@/components/common";
import { WidgetLoader, WidgetProps } from "@/components/dashboard/widgets"; import { WidgetLoader, WidgetProps } from "@/components/dashboard/widgets";
import { ProjectLogo } from "@/components/project";
// constants // constants
import { PROJECT_BACKGROUND_COLORS } from "@/constants/dashboard"; import { PROJECT_BACKGROUND_COLORS } from "@/constants/dashboard";
import { EUserWorkspaceRoles } from "@/constants/workspace"; 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}`} 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"> <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> </div>
<div className="flex-grow truncate"> <div className="flex-grow truncate">

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

@ -6,7 +6,7 @@ import { Combobox } from "@headlessui/react";
// types // types
import { IProject } from "@plane/types"; import { IProject } from "@plane/types";
// components // components
import { ProjectLogo } from "@/components/project"; import { Logo } from "@/components/common";
// helpers // helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
// hooks // hooks
@ -83,7 +83,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{projectDetails && ( {projectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4"> <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>
)} )}
<span className="flex-grow truncate">{projectDetails?.name}</span> <span className="flex-grow truncate">{projectDetails?.name}</span>
@ -157,7 +157,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
> >
{!hideIcon && selectedProject && ( {!hideIcon && selectedProject && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4"> <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> </span>
)} )}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && ( {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"; import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip } from "@plane/ui";
// components // components
import { ProjectAnalyticsModal } from "@/components/analytics"; 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 { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
import { ProjectLogo } from "@/components/project";
// constants // constants
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue"; import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project"; import { EUserProjectRoles } from "@/constants/project";
@ -170,7 +169,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
icon={ icon={
currentProjectDetails && ( currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center"> <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> </span>
) )
} }

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

@ -4,9 +4,8 @@ import { useRouter } from "next/router";
// ui // ui
import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui"; import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
// components // components
import { BreadcrumbLink } from "@/components/common"; import { BreadcrumbLink, Logo } from "@/components/common";
import { CyclesViewHeader } from "@/components/cycles"; import { CyclesViewHeader } from "@/components/cycles";
import { ProjectLogo } from "@/components/project";
// constants // constants
import { EUserProjectRoles } from "@/constants/project"; import { EUserProjectRoles } from "@/constants/project";
// hooks // hooks
@ -41,7 +40,7 @@ export const CyclesHeader: FC = observer(() => {
icon={ icon={
currentProjectDetails && ( currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4"> <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> </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"; import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip } from "@plane/ui";
// components // components
import { ProjectAnalyticsModal } from "@/components/analytics"; 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 { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
import { ProjectLogo } from "@/components/project";
// constants // constants
import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue"; import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project"; import { EUserProjectRoles } from "@/constants/project";
@ -170,7 +169,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
icon={ icon={
currentProjectDetails && ( currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center"> <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> </span>
) )
} }

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

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

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

@ -1,22 +1,52 @@
import { useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { FileText } from "lucide-react"; import { FileText } from "lucide-react";
// types
import { TLogoProps } from "@plane/types";
// ui // ui
import { Breadcrumbs, Button } from "@plane/ui"; import { Breadcrumbs, Button, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, setToast } from "@plane/ui";
// components // components
import { BreadcrumbLink } from "@/components/common"; import { BreadcrumbLink, Logo } from "@/components/common";
import { ProjectLogo } from "@/components/project"; // helper
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
// hooks // hooks
import { usePage, useProject } from "@/hooks/store"; import { usePage, useProject } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os"; import { usePlatformOS } from "@/hooks/use-platform-os";
export interface IPagesHeaderProps {
showButton?: boolean;
}
export const PageDetailsHeader = observer(() => { export const PageDetailsHeader = observer(() => {
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, pageId } = router.query; const { workspaceSlug, pageId } = router.query;
// state
const [isOpen, setIsOpen] = useState(false);
// store hooks // store hooks
const { currentProjectDetails } = useProject(); 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 // use platform
const { platform } = usePlatformOS(); const { platform } = usePlatformOS();
// derived values // derived values
@ -38,7 +68,7 @@ export const PageDetailsHeader = observer(() => {
icon={ icon={
currentProjectDetails && ( currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center"> <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> </span>
) )
} }
@ -67,7 +97,49 @@ export const PageDetailsHeader = observer(() => {
<Breadcrumbs.BreadcrumbItem <Breadcrumbs.BreadcrumbItem
type="text" type="text"
link={ 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> </Breadcrumbs>

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

@ -5,8 +5,7 @@ import { FileText } from "lucide-react";
// ui // ui
import { Breadcrumbs, Button } from "@plane/ui"; import { Breadcrumbs, Button } from "@plane/ui";
// helpers // helpers
import { BreadcrumbLink } from "@/components/common"; import { BreadcrumbLink, Logo } from "@/components/common";
import { ProjectLogo } from "@/components/project";
import { EUserProjectRoles } from "@/constants/project"; import { EUserProjectRoles } from "@/constants/project";
// constants // constants
// components // components
@ -41,7 +40,7 @@ export const PagesHeader = observer(() => {
icon={ icon={
currentProjectDetails && ( currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center"> <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> </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"; import useSWR from "swr";
// hooks // hooks
import { ArchiveIcon, Breadcrumbs, LayersIcon } from "@plane/ui"; import { ArchiveIcon, Breadcrumbs, LayersIcon } from "@plane/ui";
import { BreadcrumbLink } from "@/components/common"; import { BreadcrumbLink, Logo } from "@/components/common";
import { ProjectLogo } from "@/components/project";
import { ISSUE_DETAILS } from "@/constants/fetch-keys"; import { ISSUE_DETAILS } from "@/constants/fetch-keys";
import { useProject } from "@/hooks/store"; import { useProject } from "@/hooks/store";
// components // components
@ -52,7 +51,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
icon={ icon={
currentProjectDetails && ( currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4"> <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> </span>
) )
} }

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

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

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

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

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

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

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

@ -4,8 +4,7 @@ import { useRouter } from "next/router";
// hooks // hooks
import { PanelRight } from "lucide-react"; import { PanelRight } from "lucide-react";
import { Breadcrumbs, LayersIcon } from "@plane/ui"; import { Breadcrumbs, LayersIcon } from "@plane/ui";
import { BreadcrumbLink } from "@/components/common"; import { BreadcrumbLink, Logo } from "@/components/common";
import { ProjectLogo } from "@/components/project";
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store"; import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
// ui // ui
@ -42,7 +41,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
icon={ icon={
currentProjectDetails && ( currentProjectDetails && (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center"> <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> </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"; import { Breadcrumbs, Button, LayersIcon, Tooltip } from "@plane/ui";
// components // components
import { ProjectAnalyticsModal } from "@/components/analytics"; 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 { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
import { ProjectLogo } from "@/components/project";
// constants // constants
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue"; import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project"; import { EUserProjectRoles } from "@/constants/project";
@ -130,7 +129,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
currentProjectDetails ? ( currentProjectDetails ? (
currentProjectDetails && ( currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4"> <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> </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 { Settings } from "lucide-react";
import { Breadcrumbs, CustomMenu } from "@plane/ui"; import { Breadcrumbs, CustomMenu } from "@plane/ui";
// components // components
import { BreadcrumbLink } from "@/components/common"; import { BreadcrumbLink, Logo } from "@/components/common";
import { ProjectLogo } from "@/components/project";
// constants // constants
import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project"; import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
// hooks // hooks
@ -39,7 +38,7 @@ export const ProjectSettingHeader: FC = observer(() => {
icon={ icon={
currentProjectDetails && ( currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4"> <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> </span>
) )
} }

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

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

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

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

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

@ -1,9 +1,9 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { X } from "lucide-react"; import { X } from "lucide-react";
// hooks
import { ProjectLogo } from "@/components/project";
import { useProject } from "@/hooks/store";
// components // components
import { Logo } from "@/components/common";
// hooks
import { useProject } from "@/hooks/store";
type Props = { type Props = {
handleRemove: (val: string) => void; handleRemove: (val: string) => void;
@ -26,7 +26,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
return ( return (
<div key={projectId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <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"> <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>
<span className="normal-case">{projectDetails.name}</span> <span className="normal-case">{projectDetails.name}</span>
{editable && ( {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 React, { useMemo, useState } from "react";
import sortBy from "lodash/sortBy"; import sortBy from "lodash/sortBy";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// components // ui
import { Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
// components
import { Logo } from "@/components/common";
import { FilterHeader, FilterOption } from "@/components/issues"; import { FilterHeader, FilterOption } from "@/components/issues";
// hooks // hooks
import { ProjectLogo } from "@/components/project";
import { useProject } from "@/hooks/store"; import { useProject } from "@/hooks/store";
// components
// ui
// helpers
type Props = { type Props = {
appliedFilters: string[] | null; appliedFilters: string[] | null;
@ -65,7 +63,7 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
onClick={() => handleUpdate(project.id)} onClick={() => handleUpdate(project.id)}
icon={ icon={
<span className="grid place-items-center flex-shrink-0 h-4 w-4"> <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> </span>
} }
title={project.name} 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 uniq from "lodash/uniq";
import scrollIntoView from "smooth-scroll-into-view-if-needed"; import scrollIntoView from "smooth-scroll-into-view-if-needed";
import { ContrastIcon } from "lucide-react"; import { ContrastIcon } from "lucide-react";
// types
import { import {
GroupByColumnTypes, GroupByColumnTypes,
IGroupByColumn, IGroupByColumn,
@ -13,12 +14,14 @@ import {
TIssue, TIssue,
TIssueGroupByOptions, TIssueGroupByOptions,
} from "@plane/types"; } from "@plane/types";
// ui
import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui"; import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
// components // components
import { ProjectLogo } from "@/components/project"; import { Logo } from "@/components/common";
// stores // constants
import { ISSUE_PRIORITIES, EIssuesStoreType } from "@/constants/issue"; import { ISSUE_PRIORITIES, EIssuesStoreType } from "@/constants/issue";
import { STATE_GROUPS } from "@/constants/state"; import { STATE_GROUPS } from "@/constants/state";
// stores
import { ICycleStore } from "@/store/cycle.store"; import { ICycleStore } from "@/store/cycle.store";
import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store"; import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
import { ILabelStore } from "@/store/label.store"; import { ILabelStore } from "@/store/label.store";
@ -26,9 +29,6 @@ import { IMemberRootStore } from "@/store/member";
import { IModuleStore } from "@/store/module.store"; import { IModuleStore } from "@/store/module.store";
import { IProjectStore } from "@/store/project/project.store"; import { IProjectStore } from "@/store/project/project.store";
import { IStateStore } from "@/store/state.store"; import { IStateStore } from "@/store/state.store";
// helpers
// constants
// types
export const HIGHLIGHT_CLASS = "highlight"; export const HIGHLIGHT_CLASS = "highlight";
export const HIGHLIGHT_WITH_LINE = "highlight-with-line"; export const HIGHLIGHT_WITH_LINE = "highlight-with-line";
@ -101,7 +101,7 @@ const getProjectColumns = (project: IProjectStore): IGroupByColumn[] | undefined
name: project.name, name: project.name,
icon: ( icon: (
<div className="w-6 h-6 grid place-items-center flex-shrink-0"> <div className="w-6 h-6 grid place-items-center flex-shrink-0">
<ProjectLogo logo={project.logo_props} /> <Logo logo={project.logo_props} />
</div> </div>
), ),
payload: { project_id: project.id }, 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 ( return (
<ListItem <ListItem
title={moduleDetails?.name ?? ""} title={moduleDetails?.name ?? ""}
itemLink={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`} itemLink={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
onItemClick={(e) => { onItemClick={handleItemClick}
if (moduleDetails.archived_at) openModuleOverview(e);
}}
prependTitleElement={ prependTitleElement={
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}> <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
{completedModuleCheck ? ( {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 { 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 // components
import { Logo } from "@/components/common";
import { ListItem } from "@/components/core/list"; import { ListItem } from "@/components/core/list";
import { BlockItemAction } from "@/components/pages/list"; import { BlockItemAction } from "@/components/pages/list";
// helpers // helpers
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
import { getPageName } from "@/helpers/page.helper"; import { getPageName } from "@/helpers/page.helper";
// hooks // hooks
import { usePage } from "@/hooks/store"; import { usePage } from "@/hooks/store";
@ -19,12 +26,74 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
const { workspaceSlug, projectId, pageId } = props; const { workspaceSlug, projectId, pageId } = props;
// refs // refs
const parentRef = useRef(null); const parentRef = useRef(null);
// state
const [isOpen, setIsOpen] = useState(false);
// hooks // hooks
const { name } = usePage(pageId); const { name, logo_props, updatePageLogo } = usePage(pageId);
const { isMobile } = usePlatformOS(); 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 ( return (
<ListItem <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)} title={getPageName(name)}
itemLink={`/${workspaceSlug}/projects/${projectId}/pages/${pageId}`} itemLink={`/${workspaceSlug}/projects/${projectId}/pages/${pageId}`}
actionableItems={ actionableItems={
@ -32,6 +101,7 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
} }
isMobile={isMobile} isMobile={isMobile}
parentRef={parentRef} 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, id: undefined,
name: "", name: "",
access: EPageAccess.PUBLIC, access: EPageAccess.PUBLIC,
logo_props: undefined,
}); });
// router // router
const router = useRouter(); const router = useRouter();

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

@ -1,12 +1,15 @@
import { FormEvent, useState } from "react"; import { FormEvent, useState } from "react";
// types // types
import { FileText } from "lucide-react";
import { TPage } from "@plane/types"; import { TPage } from "@plane/types";
// ui // ui
import { Button, Input, Tooltip } from "@plane/ui"; import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, Tooltip } from "@plane/ui";
import { Logo } from "@/components/common";
// constants // constants
import { PAGE_ACCESS_SPECIFIERS } from "@/constants/page"; import { PAGE_ACCESS_SPECIFIERS } from "@/constants/page";
// helpers // helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
// hooks // hooks
import { usePlatformOS } from "@/hooks/use-platform-os"; import { usePlatformOS } from "@/hooks/use-platform-os";
@ -22,6 +25,7 @@ export const PageForm: React.FC<Props> = (props) => {
// hooks // hooks
const { isMobile } = usePlatformOS(); const { isMobile } = usePlatformOS();
// state // state
const [isOpen, setIsOpen] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const handlePageFormSubmit = async (e: FormEvent<HTMLFormElement>) => { const handlePageFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
@ -41,21 +45,66 @@ export const PageForm: React.FC<Props> = (props) => {
<form onSubmit={handlePageFormSubmit}> <form onSubmit={handlePageFormSubmit}>
<div className="space-y-5 p-5"> <div className="space-y-5 p-5">
<h3 className="text-xl font-medium text-custom-text-200">Create Page</h3> <h3 className="text-xl font-medium text-custom-text-200">Create Page</h3>
<div className="space-y-1"> <div className="flex items-start gap-2 h-9 w-full">
<Input <EmojiIconPicker
id="name" isOpen={isOpen}
type="text" handleToggle={(val: boolean) => setIsOpen(val)}
value={formData.name} className="flex items-center justify-center flex-shrink0"
onChange={(e) => handleFormData("name", e.target.value)} buttonClassName="flex items-center justify-center"
placeholder="Title" label={
className="w-full resize-none text-base" <span className="grid h-9 w-9 place-items-center rounded-md bg-custom-background-90">
tabIndex={1} <>
required {formData?.logo_props?.in_use ? (
autoFocus <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 && ( <div className="space-y-1 flew-grow w-full">
<span className="text-xs text-red-500">Max length of the name should be less than 255 characters</span> <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> </div>
<div className="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-custom-border-200"> <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"; import useSWR from "swr";
// icons // icons
import { ChevronDown, Pencil } from "lucide-react"; import { ChevronDown, Pencil } from "lucide-react";
// ui // headless ui
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
// icons
// plane ui // plane ui
import { Loader, Tooltip } from "@plane/ui"; import { Loader, Tooltip } from "@plane/ui";
// components
import { Logo } from "@/components/common";
// fetch-keys // fetch-keys
import { ProjectLogo } from "@/components/project";
import { USER_PROFILE_PROJECT_SEGREGATION } from "@/constants/fetch-keys"; import { USER_PROFILE_PROJECT_SEGREGATION } from "@/constants/fetch-keys";
// helpers // helpers
import { renderFormattedDate } from "@/helpers/date-time.helper"; 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"> <Disclosure.Button className="flex w-full items-center justify-between gap-2">
<div className="flex w-3/4 items-center 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"> <span className="grid h-7 w-7 flex-shrink-0 place-items-center">
<ProjectLogo logo={projectDetails.logo_props} /> <Logo logo={projectDetails.logo_props} />
</span> </span>
<div className="truncate break-words text-sm font-medium">{projectDetails.name}</div> <div className="truncate break-words text-sm font-medium">{projectDetails.name}</div>
</div> </div>

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

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

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

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

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

@ -18,7 +18,6 @@ export * from "./sidebar-list";
export * from "./integration-card"; export * from "./integration-card";
export * from "./member-list"; export * from "./member-list";
export * from "./member-list-item"; export * from "./member-list-item";
export * from "./project-logo";
export * from "./project-settings-member-defaults"; export * from "./project-settings-member-defaults";
export * from "./send-project-invitation-modal"; export * from "./send-project-invitation-modal";
export * from "./confirm-project-member-remove"; 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 React, { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Link from "next/link"; import Link from "next/link";
// hooks
import { Button, getButtonStyling } from "@plane/ui";
import { useProject } from "@/hooks/store";
// ui // ui
import { Button, getButtonStyling } from "@plane/ui";
// components // components
import { ProjectLogo } from "./project-logo"; import { Logo } from "@/components/common";
import { ProjectFeaturesList } from "./settings"; import { ProjectFeaturesList } from "@/components/project/settings";
// hooks
import { useProject } from "@/hooks/store";
type Props = { type Props = {
workspaceSlug: string; workspaceSlug: string;
@ -35,7 +35,7 @@ export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
<ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin /> <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="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"> <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. <p className="break-all">{currentProjectDetails.name}</p> created.
</div> </div>
<div className="flex gap-2"> <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 Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
// icons
import { import {
MoreVertical, MoreVertical,
PenSquare, PenSquare,
@ -21,8 +22,8 @@ import {
MoreHorizontal, MoreHorizontal,
Inbox, Inbox,
} from "lucide-react"; } from "lucide-react";
// headless ui
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
// icons
// ui // ui
import { import {
CustomMenu, CustomMenu,
@ -35,8 +36,12 @@ import {
setPromiseToast, setPromiseToast,
DropIndicator, DropIndicator,
} from "@plane/ui"; } 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"; import { EUserProjectRoles } from "@/constants/project";
// helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
// hooks // hooks
import { useAppTheme, useEventTracker, useProject } from "@/hooks/store"; import { useAppTheme, useEventTracker, useProject } from "@/hooks/store";
@ -203,8 +208,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
const root = createRoot(container); const root = createRoot(container);
root.render( root.render(
<div className="rounded flex items-center bg-custom-background-100 text-sm p-1 pr-2"> <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"> <div className="h-7 w-7 grid place-items-center flex-shrink-0">
{project && <ProjectLogo logo={project?.logo_props} />} {project && <Logo logo={project?.logo_props} />}
</div> </div>
<p className="truncate text-custom-sidebar-text-200">{project?.name}</p> <p className="truncate text-custom-sidebar-text-200">{project?.name}</p>
</div> </div>
@ -331,8 +336,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
"justify-center": isCollapsed, "justify-center": isCollapsed,
})} })}
> >
<div className="h-7 w-5 grid place-items-center flex-shrink-0"> <div className="h-7 w-7 grid place-items-center flex-shrink-0">
<ProjectLogo logo={project.logo_props} /> <Logo logo={project.logo_props} />
</div> </div>
{!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>} {!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
</div> </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 { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// types // types
import { IProjectView, IIssueFilterOptions } from "@plane/types"; import { IProjectView, IIssueFilterOptions } from "@plane/types";
// ui // ui
import { Button, Input, TextArea } from "@plane/ui"; import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, PhotoFilterIcon, TextArea } from "@plane/ui";
// components // components
import { Logo } from "@/components/common";
import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues"; import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
// constants // constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue"; import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
// helpers
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
// hooks // hooks
import { useLabel, useMember, useProject, useProjectState } from "@/hooks/store"; import { useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
@ -26,6 +29,8 @@ const defaultValues: Partial<IProjectView> = {
export const ProjectViewForm: React.FC<Props> = observer((props) => { export const ProjectViewForm: React.FC<Props> = observer((props) => {
const { handleFormSubmit, handleClose, data, preLoadedData } = props; const { handleFormSubmit, handleClose, data, preLoadedData } = props;
// state
const [isOpen, setIsOpen] = useState(false);
// store hooks // store hooks
const { currentProjectDetails } = useProject(); const { currentProjectDetails } = useProject();
const { projectStates } = useProjectState(); const { projectStates } = useProjectState();
@ -45,6 +50,8 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
defaultValues, defaultValues,
}); });
const logoValue = watch("logo_props");
const selectedFilters: IIssueFilterOptions = {}; const selectedFilters: IIssueFilterOptions = {};
Object.entries(watch("filters") ?? {}).forEach(([key, value]) => { Object.entries(watch("filters") ?? {}).forEach(([key, value]) => {
if (!value) return; if (!value) return;
@ -85,6 +92,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
await handleFormSubmit({ await handleFormSubmit({
name: formData.name, name: formData.name,
description: formData.description, description: formData.description,
logo_props: formData.logo_props,
filters: formData.filters, filters: formData.filters,
} as IProjectView); } as IProjectView);
@ -112,33 +120,74 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
<div className="space-y-5 p-5"> <div className="space-y-5 p-5">
<h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Create"} View</h3> <h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Create"} View</h3>
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-1"> <div className="flex items-start gap-2 w-full">
<Controller <EmojiIconPicker
control={control} isOpen={isOpen}
name="name" handleToggle={(val: boolean) => setIsOpen(val)}
rules={{ className="flex items-center justify-center flex-shrink0"
required: "Title is required", buttonClassName="flex items-center justify-center"
maxLength: { label={
value: 255, <span className="grid h-9 w-9 place-items-center rounded-md bg-custom-background-90">
message: "Title should be less than 255 characters", <>
}, {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 } }) => ( defaultIconColor={logoValue?.in_use && logoValue?.in_use === "icon" ? logoValue?.icon?.color : undefined}
<Input defaultOpen={
id="name" logoValue?.in_use && logoValue?.in_use === "emoji"
type="name" ? EmojiIconPickerTypes.EMOJI
name="name" : EmojiIconPickerTypes.ICON
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 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>
<div> <div>
<Controller <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 { observer } from "mobx-react-lite";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// types // types
import { IProjectView } from "@plane/types"; import { IProjectView, TLogoProps } from "@plane/types";
// ui
import { EmojiIconPicker, EmojiIconPickerTypes, PhotoFilterIcon, TOAST_TYPE, setToast } from "@plane/ui";
// components // components
import { Logo } from "@/components/common";
import { ListItem } from "@/components/core/list"; import { ListItem } from "@/components/core/list";
import { ViewListItemAction } from "@/components/views"; import { ViewListItemAction } from "@/components/views";
// helpers
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
// hooks // hooks
import { useProjectView } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os"; import { usePlatformOS } from "@/hooks/use-platform-os";
type Props = { type Props = {
@ -17,19 +23,87 @@ export const ProjectViewListItem: FC<Props> = observer((props) => {
const { view } = props; const { view } = props;
// refs // refs
const parentRef = useRef(null); const parentRef = useRef(null);
// state
const [isOpen, setIsOpen] = useState(false);
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
// store hooks // store hooks
const { isMobile } = usePlatformOS(); 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 ( return (
<ListItem <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} title={view.name}
itemLink={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`} itemLink={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
actionableItems={<ViewListItemAction parentRef={parentRef} view={view} />} actionableItems={<ViewListItemAction parentRef={parentRef} view={view} />}
isMobile={isMobile} isMobile={isMobile}
parentRef={parentRef} 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)) .map((e) => parseInt(e, 16))
.join("-"); .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 set from "lodash/set";
import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx"; import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
// types // types
import { TPage } from "@plane/types"; import { TLogoProps, TPage } from "@plane/types";
// constants // constants
import { EPageAccess } from "@/constants/page"; import { EPageAccess } from "@/constants/page";
import { EUserProjectRoles } from "@/constants/project"; import { EUserProjectRoles } from "@/constants/project";
@ -38,6 +38,7 @@ export interface IPageStore extends TPage {
unlock: () => Promise<void>; unlock: () => Promise<void>;
archive: () => Promise<void>; archive: () => Promise<void>;
restore: () => Promise<void>; restore: () => Promise<void>;
updatePageLogo: (logo_props: TLogoProps) => Promise<void>;
addToFavorites: () => Promise<void>; addToFavorites: () => Promise<void>;
removeFromFavorites: () => Promise<void>; removeFromFavorites: () => Promise<void>;
} }
@ -48,6 +49,7 @@ export class PageStore implements IPageStore {
// page properties // page properties
id: string | undefined; id: string | undefined;
name: string | undefined; name: string | undefined;
logo_props: TLogoProps | undefined;
description_html: string | undefined; description_html: string | undefined;
color: string | undefined; color: string | undefined;
labels: string[] | undefined; labels: string[] | undefined;
@ -75,6 +77,7 @@ export class PageStore implements IPageStore {
) { ) {
this.id = page?.id || undefined; this.id = page?.id || undefined;
this.name = page?.name; this.name = page?.name;
this.logo_props = page?.logo_props || undefined;
this.description_html = page?.description_html || undefined; this.description_html = page?.description_html || undefined;
this.color = page?.color || undefined; this.color = page?.color || undefined;
this.labels = page?.labels || undefined; this.labels = page?.labels || undefined;
@ -97,6 +100,7 @@ export class PageStore implements IPageStore {
// page properties // page properties
id: observable.ref, id: observable.ref,
name: observable.ref, name: observable.ref,
logo_props: observable.ref,
description_html: observable.ref, description_html: observable.ref,
color: observable.ref, color: observable.ref,
labels: observable, labels: observable,
@ -135,6 +139,7 @@ export class PageStore implements IPageStore {
unlock: action, unlock: action,
archive: action, archive: action,
restore: action, restore: action,
updatePageLogo: action,
addToFavorites: action, addToFavorites: action,
removeFromFavorites: action, removeFromFavorites: action,
}); });
@ -178,6 +183,7 @@ export class PageStore implements IPageStore {
labels: this.labels, labels: this.labels,
owned_by: this.owned_by, owned_by: this.owned_by,
access: this.access, access: this.access,
logo_props: this.logo_props,
is_favorite: this.is_favorite, is_favorite: this.is_favorite,
is_locked: this.is_locked, is_locked: this.is_locked,
archived_at: this.archived_at, 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 * @description add the page to favorites
*/ */