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

chore: icon revamp and refactor (#2447)

Browse source 
* chore: svg icons added in plane/ui package

* chore: swap priority and state icon with plane/ui icons

* chore: replace core folder icons with lucide and plane ui icons

* style: priority icon size

* chore: replace icons with lucide and plane/ui icons

* chore: replace cycle folder icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* fix: build error

* fix: build error

* fix: build error
This commit is contained in:
Anmol Singh Bhatia 2023-10-16 20:27:22 +05:30 • committed by GitHub
parent 1fc5d2bd45
commit 651b252c23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
270 changed files with 2567 additions and 1480 deletions
Download patch file Download diff file Expand all files Collapse all files

57
packages/editor/lite-text-editor/src/ui/index.tsx
View file

@ -1,8 +1,13 @@
"use client"
import * as React from 'react';
import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from '@plane/editor-core';
import { FixedMenu } from './menus/fixed-menu';
import { LiteTextEditorExtensions } from './extensions';
"use client";
import * as React from "react";
import {
EditorContainer,
EditorContentWrapper,
getEditorClassNames,
useEditor,
} from "@plane/editor-core";
import { FixedMenu } from "./menus/fixed-menu";
import { LiteTextEditorExtensions } from "./extensions";
export type UploadImage = (file: File) => Promise<string>;
export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
@ -16,19 +21,21 @@ interface ILiteTextEditor {
customClassName?: string;
editorContentCustomClassNames?: string;
onChange?: (json: any, html: string) => void;
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved"
) => void;
setShouldShowAlert?: (showAlert: boolean) => void;
forwardedRef?: any;
debouncedUpdatesEnabled?: boolean;
commentAccessSpecifier?: {
accessValue: string,
onAccessChange: (accessKey: string) => void,
showAccessSpecifier: boolean,
accessValue: string;
onAccessChange: (accessKey: string) => void;
showAccessSpecifier: boolean;
commentAccess: {
icon: string;
icon: any;
key: string;
label: "Private" | "Public";
}[]
}[];
};
onEnterKeyPress?: (e?: any) => void;
}
@ -56,7 +63,7 @@ const LiteTextEditor = ({
customClassName,
forwardedRef,
commentAccessSpecifier,
onEnterKeyPress
onEnterKeyPress,
}: LiteTextEditorProps) => {
const editor = useEditor({
onChange,
@ -70,25 +77,37 @@ const LiteTextEditor = ({
extensions: LiteTextEditorExtensions(onEnterKeyPress),
});
const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
const editorClassNames = getEditorClassNames({
noBorder,
borderOnFocus,
customClassName,
});
if (!editor) return null;
return (
<EditorContainer editor={editor} editorClassNames={editorClassNames}>
<div className="flex flex-col">
<EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
<EditorContentWrapper
editor={editor}
editorContentCustomClassNames={editorContentCustomClassNames}
/>
<div className="w-full mt-4">
<FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} commentAccessSpecifier={commentAccessSpecifier} />
<FixedMenu
editor={editor}
uploadFile={uploadFile}
setIsSubmitting={setIsSubmitting}
commentAccessSpecifier={commentAccessSpecifier}
/>
</div>
</div>
</EditorContainer >
</EditorContainer>
);
};
const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>((props, ref) => (
<LiteTextEditor {...props} forwardedRef={ref} />
));
const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
(props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />
);
LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";

88
packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
View file

@ -1,7 +1,19 @@
import { Editor } from "@tiptap/react";
import { BoldIcon } from "lucide-react";
import { BoldIcon, LucideIcon } from "lucide-react";
import { BoldItem, BulletListItem, cn, CodeItem, ImageItem, ItalicItem, NumberedListItem, QuoteItem, StrikeThroughItem, TableItem, UnderLineItem } from "@plane/editor-core";
import {
BoldItem,
BulletListItem,
cn,
CodeItem,
ImageItem,
ItalicItem,
NumberedListItem,
QuoteItem,
StrikeThroughItem,
TableItem,
UnderLineItem,
} from "@plane/editor-core";
import { Icon } from "./icon";
import { Tooltip } from "../../tooltip";
import { UploadImage } from "../..";
@ -16,18 +28,22 @@ export interface BubbleMenuItem {
type EditorBubbleMenuProps = {
editor: Editor;
commentAccessSpecifier?: {
accessValue: string,
onAccessChange: (accessKey: string) => void,
showAccessSpecifier: boolean,
commentAccess: {
icon: string;
key: string;
label: "Private" | "Public";
}[] | undefined;
}
accessValue: string;
onAccessChange: (accessKey: string) => void;
showAccessSpecifier: boolean;
commentAccess:
| {
icon: any;
key: string;
label: "Private" | "Public";
}[]
| undefined;
};
uploadFile: UploadImage;
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
}
setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved"
) => void;
};
export const FixedMenu = (props: EditorBubbleMenuProps) => {
const basicMarkItems: BubbleMenuItem[] = [
@ -56,31 +72,33 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
props.commentAccessSpecifier?.onAccessChange(accessKey);
};
return (
<div
className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
>
{props.commentAccessSpecifier && (<div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden">
{props?.commentAccessSpecifier.commentAccess?.map((access) => (
<Tooltip key={access.key} tooltipContent={access.label}>
<button
type="button"
onClick={() => handleAccessChange(access.key)}
className={`grid place-basicMarkItems-center p-1 hover:bg-custom-background-80 ${props.commentAccessSpecifier?.accessValue === access.key ? "bg-custom-background-80" : ""
<div className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl">
{props.commentAccessSpecifier && (
<div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden">
{props?.commentAccessSpecifier.commentAccess?.map((access) => (
<Tooltip key={access.key} tooltipContent={access.label}>
<button
type="button"
onClick={() => handleAccessChange(access.key)}
className={`grid place-basicMarkItems-center p-1 hover:bg-custom-background-80 ${
props.commentAccessSpecifier?.accessValue === access.key
? "bg-custom-background-80"
: ""
}`}
>
<Icon
iconName={access.icon}
className={`w-4 h-4 ${props.commentAccessSpecifier?.accessValue === access.key
? "!text-custom-text-100"
: "!text-custom-text-400"
>
<access.icon
className={`w-4 h-4 ${
props.commentAccessSpecifier?.accessValue === access.key
? "!text-custom-text-100"
: "!text-custom-text-400"
}`}
/>
</button>
</Tooltip>
))}
</div>)}
/>
</button>
</Tooltip>
))}
</div>
)}
<div className="flex">
{basicMarkItems.map((item, index) => (
<button