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

matched theme colors

Browse Source
This commit is contained in:
Palanikannan1437 2023-08-14 20:53:57 +05:30
parent b885f14dc4
commit b590cb60fd
8 changed files with 26 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/app/components/tiptap/bubble-menu/index.tsx
View File

@ -98,11 +98,13 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
<button
key={index}
onClick={item.command}
className="p-2 text-custom-text-200 hover:bg-custom-background-100 active:bg-custom-background-100 transition-colors"
className={cn("p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors", {
"text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
})}
>
<item.icon
className={cn("h-4 w-4", {
"text-custom-primary-100": item.isActive(),
"text-custom-text-100": item.isActive(),
})}
/>
</button>

6
apps/app/components/tiptap/bubble-menu/link-selector.tsx
View File

@ -19,7 +19,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
return (
<div className="relative">
<button
className="flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-200 hover:bg-custom-background-80 active:bg-custom-background-80"
className={cn("flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100", { "bg-custom-background-100": isOpen })}
onClick={() => {
setIsOpen(!isOpen);
}}
@ -27,7 +27,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
<p className="text-base">↗</p>
<p
className={cn("underline underline-offset-4", {
"text-blue-500": editor.isActive("link"),
"text-custom-text-100": editor.isActive("link"),
})}
>
Link
@ -48,7 +48,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
ref={inputRef}
type="url"
placeholder="Paste a link"
className="flex-1 bg-custom-background-100 border border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
className="flex-1 bg-custom-background-100 border border-custom-primary-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
defaultValue={editor.getAttributes("link").href || ""}
/>
{editor.getAttributes("link").href ? (

9
apps/app/components/tiptap/bubble-menu/node-selector.tsx
View File

@ -91,7 +91,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
return (
<div className="relative h-full">
<button
className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-200 hover:bg-custom-background-80 active:bg-custom-background-80"
className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
onClick={() => setIsOpen(!isOpen)}
>
<span>{activeItem?.name}</span>
@ -99,7 +99,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
</button>
{isOpen && (
<section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
<section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
{items.map((item, index) => (
<button
key={index}
@ -107,10 +107,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
item.command();
setIsOpen(false);
}}
className={cn(
"flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-background-100/5 hover:text-custom-text-100",
{ "bg-custom-primary-100/5": activeItem.name === item.name }
)}
className={cn("flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100", { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name })}
>
<div className="flex items-center space-x-2">
<div className="rounded-sm border border-custom-border-300 p-1">

6
apps/app/components/tiptap/extensions/index.tsx
View File

@ -14,7 +14,6 @@ import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
import { lowlight } from "lowlight/lib/core";
import SlashCommand from "../slash-command";
import { InputRule } from "@tiptap/core";
import { Node as ProseMirrorNode } from "@tiptap/pm/model";
import ts from "highlight.js/lib/languages/typescript";
@ -54,7 +53,8 @@ export const TiptapExtensions = [
},
code: {
HTMLAttributes: {
class: "rounded-md bg-custom-bg-1000 px-1 py-1 font-mono font-medium text-custom-text-200",
class:
"rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
spellcheck: "false",
},
},
@ -95,7 +95,7 @@ export const TiptapExtensions = [
TiptapLink.configure({
HTMLAttributes: {
class:
"text-custom-text-200 underline underline-offset-[3px] hover:text-custom-text-100 transition-colors cursor-pointer",
"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
},
}),
CustomImage.configure({

10
apps/app/components/tiptap/index.tsx
View File

@ -115,10 +115,10 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
}, 500);
}, 1000);
const editorClassNames = `mt-2 p-3 relative focus:outline-none rounded-md focus:border-custom-border-200
${noBorder ? "" : "border border-custom-border-200"} ${
borderOnFocus ? "focus:border border-custom-border-200" : "focus:border-0"
} ${customClassName}`;
const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg sm:border sm:shadow-lg mt-2 p-3 relative focus:outline-none rounded-md
${noBorder ? '' : 'border border-custom-border-200'
} ${borderOnFocus ? 'focus:border border-custom-border-300' : 'focus:border-0'
} ${customClassName}`;
if (!editor) return null;
editorRef.current = editor;
@ -128,7 +128,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
onClick={() => {
editor?.chain().focus().run();
}}
className={`tiptap-editor-container cursor-text relative ${editorClassNames}`}
className={`tiptap-editor-container ${editorClassNames}`}
>
{editor && <EditorBubbleMenu editor={editor} />}
<div className={`${editorContentCustomClassNames}`}>

5
apps/app/components/tiptap/plugins/upload-image.tsx
View File

@ -22,7 +22,10 @@ const UploadImagesPlugin = () =>
const placeholder = document.createElement("div");
placeholder.setAttribute("class", "img-placeholder");
const image = document.createElement("img");
image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
image.setAttribute(
"class",
"opacity-10 rounded-lg border border-custom-border-300",
);
image.src = src;
placeholder.appendChild(image);
const deco = Decoration.widget(pos + 1, placeholder, {

11
apps/app/components/tiptap/slash-command/index.tsx
View File

@ -17,6 +17,7 @@ import {
ImageIcon,
} from "lucide-react";
import { startImageUpload } from "../plugins/upload-image";
import { cn } from "../utils";
interface CommandItemProps {
title: string;
@ -197,8 +198,6 @@ export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
const CommandList = ({
items,
command,
editor,
range,
}: {
items: CommandItemProps[];
command: any;
@ -261,19 +260,17 @@ const CommandList = ({
<div
id="slash-command"
ref={commandListContainer}
className="z-20 h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
className="z-50 fixed h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
>
{items.map((item: CommandItemProps, index: number) => (
<button
className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-custom-primary-100/5 ${
index === selectedIndex ? "bg-custom-primary-100/5" : ""
}`}
className={cn(`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`, { "bg-custom-primary-100/5 text-custom-text-100": index === selectedIndex })}
key={index}
onClick={() => selectItem(index)}
>
<div>
<p className="font-medium">{item.title}</p>
<p className="text-xs text-custom-text-200">{item.description}</p>
<p className="text-xs text-custom-text-300">{item.description}</p>
</div>
</button>
))}

80
apps/app/styles/editor.css
View File

@ -115,83 +115,3 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
.ProseMirror pre {
background: #121212;
border-radius: 0.375rem;
border-color: rgba(var(--color-background-100));
border: 0.5px solid;
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
}
.ProseMirror pre code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
.ProseMirror-icon {
display: inline-block;
line-height: 0.8;
vertical-align: -2px;
color: #666;
cursor: pointer;
margin: 0 3px;
padding: 3px 8px;
border-radius: 3px;
border: 1px solid transparent;
transition: background 50ms ease-in-out;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ProseMirror-menu-disabled.ProseMirror-icon {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.ProseMirror-icon svg {
fill: currentColor;
height: 1em;
}
.ProseMirror-icon span {
vertical-align: text-top;
}
.remirror-editor-wrapper .remirror-editor {
min-height: 150px;
}
.issue-comments-section .remirror-editor-wrapper .remirror-editor,
.page-block-section .remirror-editor-wrapper .remirror-editor {
min-height: 50px;
}
.remirror-section .remirror-editor-wrapper .remirror-editor {
min-height: 0 !important;
}
.remirror-editor-wrapper {
padding-top: 8px;
}
.MuiButtonBase-root {
border: none !important;
border-radius: 0.25rem !important;
padding: 0.25rem !important;
}
.MuiButtonBase-root svg {
fill: rgb(var(--color-text-100)) !important;
}
.MuiButtonBase-root.Mui-selected,
.MuiButtonBase-root:hover {
background-color: rgb(var(--color-background-100)) !important;
}