[WEB-1424] chore: page and view logo implementation, and emoji/icon picker improvement

apiserver/plane/app/serializers/cycle.py

@@ -66,6 +66,7 @@ class Meta:
             "external_source",
             "external_id",
             "progress_snapshot",
+            "logo_props",
             # meta fields
             "is_favorite",
             "total_issues",

apiserver/plane/app/serializers/module.py

@@ -199,6 +199,7 @@ class Meta:
             "sort_order",
             "external_source",
             "external_id",
+            "logo_props",
             # computed fields
             "is_favorite",
             "total_issues",

apiserver/plane/app/serializers/page.py

@@ -39,6 +39,7 @@ class Meta:
             "created_by",
             "updated_by",
             "view_props",
+            "logo_props",
         ]
         read_only_fields = [
             "workspace",

apiserver/plane/app/views/cycle/base.py

@@ -231,6 +231,7 @@ def list(self, request, slug, project_id):
                 "external_source",
                 "external_id",
                 "progress_snapshot",
+                "logo_props",
                 # meta fields
                 "is_favorite",
                 "total_issues",
@@ -356,6 +357,7 @@ def list(self, request, slug, project_id):
             "external_source",
             "external_id",
             "progress_snapshot",
+            "logo_props",
             # meta fields
             "is_favorite",
             "total_issues",
@@ -403,6 +405,7 @@ def create(self, request, slug, project_id):
                         "external_source",
                         "external_id",
                         "progress_snapshot",
+                        "logo_props",
                         # meta fields
                         "is_favorite",
                         "cancelled_issues",
@@ -496,6 +499,7 @@ def partial_update(self, request, slug, project_id, pk):
                 "external_source",
                 "external_id",
                 "progress_snapshot",
+                "logo_props",
                 # meta fields
                 "is_favorite",
                 "total_issues",
@@ -556,6 +560,7 @@ def retrieve(self, request, slug, project_id, pk):
                 "external_id",
                 "progress_snapshot",
                 "sub_issues",
+                "logo_props",
                 # meta fields
                 "is_favorite",
                 "total_issues",

apiserver/plane/app/views/module/base.py

@@ -225,6 +225,7 @@ def create(self, request, slug, project_id):
                     "sort_order",
                     "external_source",
                     "external_id",
+                    "logo_props",
                     # computed fields
                     "is_favorite",
                     "cancelled_issues",
@@ -281,6 +282,7 @@ def list(self, request, slug, project_id):
                 "sort_order",
                 "external_source",
                 "external_id",
+                "logo_props",
                 # computed fields
                 "total_issues",
                 "is_favorite",
@@ -465,6 +467,7 @@ def partial_update(self, request, slug, project_id, pk):
                 "sort_order",
                 "external_source",
                 "external_id",
+                "logo_props",
                 # computed fields
                 "is_favorite",
                 "cancelled_issues",

packages/types/src/common.d.ts

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

packages/types/src/pages.d.ts

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

packages/types/src/project/projects.d.ts

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

packages/types/src/views.d.ts

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

packages/ui/package.json

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

packages/ui/src/control-link/control-link.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   href: string;
-  onClick: () => void;
+  onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
   children: React.ReactNode;
   target?: string;
   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;
     if (!clickCondition) {
       event.preventDefault();
-      onClick();
+      onClick(event);
     }
   };
 

packages/ui/src/emoji/emoji-icon-helper.tsx

@@ -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)}`;
+};