forked from github/plane
fix: minor ui fixes
This commit is contained in:
sriram veeraghanta
parent
ccf6bd4e32
commit
b2d17e6ec9
@ -25,17 +25,12 @@ const tabOptions = [
|
||||
},
|
||||
];
|
||||
|
||||
const EmojiIconPicker: React.FC<Props> = ({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
onIconColorChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const EmojiIconPicker: React.FC<Props> = (props) => {
|
||||
const { label, value, onChange, onIconColorChange, disabled = false } = props;
|
||||
// states
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [openColorPicker, setOpenColorPicker] = useState(false);
|
||||
const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
|
||||
|
||||
const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
|
||||
|
||||
const emojiPickerRef = useRef<HTMLDivElement>(null);
|
||||
@ -52,11 +47,7 @@ const EmojiIconPicker: React.FC<Props> = ({
|
||||
|
||||
return (
|
||||
<Popover className="relative z-[1]">
|
||||
<Popover.Button
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
className="outline-none"
|
||||
disabled={disabled}
|
||||
>
|
||||
<Popover.Button onClick={() => setIsOpen((prev) => !prev)} className="outline-none" disabled={disabled}>
|
||||
{label}
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
@ -139,15 +130,7 @@ const EmojiIconPicker: React.FC<Props> = ({
|
||||
<Tab.Panel className="flex h-full w-full flex-col justify-center">
|
||||
<div className="relative">
|
||||
<div className="flex items-center justify-between px-1 pb-2">
|
||||
{[
|
||||
"#FF6B00",
|
||||
"#8CC1FF",
|
||||
"#FCBE1D",
|
||||
"#18904F",
|
||||
"#ADF672",
|
||||
"#05C3FF",
|
||||
"#000000",
|
||||
].map((curCol) => (
|
||||
{["#FF6B00", "#8CC1FF", "#FCBE1D", "#18904F", "#ADF672", "#05C3FF", "#000000"].map((curCol) => (
|
||||
<span
|
||||
key={curCol}
|
||||
className="h-4 w-4 cursor-pointer rounded-full"
|
||||
@ -168,9 +151,7 @@ const EmojiIconPicker: React.FC<Props> = ({
|
||||
</div>
|
||||
<div>
|
||||
<TwitterPicker
|
||||
className={`!absolute top-4 left-4 z-10 m-2 ${
|
||||
openColorPicker ? "block" : "hidden"
|
||||
}`}
|
||||
className={`!absolute top-4 left-4 z-10 m-2 ${openColorPicker ? "block" : "hidden"}`}
|
||||
color={activeColor}
|
||||
onChange={(color) => {
|
||||
setActiveColor(color.hex);
|
||||
@ -193,10 +174,7 @@ const EmojiIconPicker: React.FC<Props> = ({
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{ color: activeColor }}
|
||||
className="material-symbols-rounded text-lg"
|
||||
>
|
||||
<span style={{ color: activeColor }} className="material-symbols-rounded text-lg">
|
||||
{icon.name}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
2
web/components/project/publish-project/index.tsx
Normal file
2
web/components/project/publish-project/index.tsx
Normal file
@ -0,0 +1,2 @@
|
||||
export * from "./modal";
|
||||
export * from "./popover";
|
||||
@ -61,19 +61,17 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
|
||||
if (typeof window !== "undefined" && !plane_deploy_url) {
|
||||
plane_deploy_url = window.location.protocol + "//" + window.location.host + "/spaces";
|
||||
}
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
// store
|
||||
const store: RootStore = useMobxStore();
|
||||
const { projectPublish } = store;
|
||||
|
||||
// hooks
|
||||
const { user } = useUser();
|
||||
|
||||
const { mutateProjectDetails } = useProjectDetails();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
formState: { isSubmitting },
|
||||
@ -87,7 +85,6 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
|
||||
|
||||
const handleClose = () => {
|
||||
projectPublish.handleProjectModal(null);
|
||||
|
||||
setIsUpdateRequired(false);
|
||||
reset({ ...defaultValues });
|
||||
};
|
||||
|
||||
@ -16,11 +16,9 @@ import {
|
||||
PhotoFilterOutlined,
|
||||
SettingsOutlined,
|
||||
} from "@mui/icons-material";
|
||||
import { PenSquare } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { CustomMenu, Icon, Tooltip } from "components/ui";
|
||||
import { PenSquare } from "lucide-react";
|
||||
// helpers
|
||||
import { renderEmoji } from "helpers/emoji.helper";
|
||||
// types
|
||||
@ -29,7 +27,9 @@ import { IProject } from "types";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
// components
|
||||
import { CustomMenu, Icon, Tooltip } from "components/ui";
|
||||
import { LeaveProjectModal, DeleteProjectModal } from "components/project";
|
||||
import { PublishProjectModal } from "components/project/publish-project";
|
||||
|
||||
type Props = {
|
||||
project: IProject;
|
||||
@ -132,6 +132,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<PublishProjectModal />
|
||||
<DeleteProjectModal project={project} isOpen={deleteProjectModalOpen} onClose={handleDeleteProjectModalClose} />
|
||||
<LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
|
||||
<Disclosure key={project.id} defaultOpen={projectId === project.id}>
|
||||
|
||||
@ -1,18 +1,15 @@
|
||||
import React, { useState, FC, useRef, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR, { mutate } from "swr";
|
||||
import useSWR from "swr";
|
||||
import { DragDropContext, Draggable, DropResult, Droppable } from "react-beautiful-dnd";
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
import useProjects from "hooks/use-projects";
|
||||
// components
|
||||
import { CreateProjectModal, ProjectSidebarListItem, LeaveProjectModal } from "components/project";
|
||||
import { PublishProjectModal } from "components/project/publish-project/modal";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
|
||||
|
||||
// icons
|
||||
import { Icon } from "components/ui";
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
@ -21,13 +18,11 @@ import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { IProject } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
export const ProjectSidebarList: FC = observer(() => {
|
||||
const { theme: themeStore, workspace: workspaceStore, project: projectStore } = useMobxStore();
|
||||
const { theme: themeStore, project: projectStore } = useMobxStore();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
@ -80,7 +75,7 @@ export const ProjectSidebarList: FC = observer(() => {
|
||||
|
||||
projectStore
|
||||
.updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder })
|
||||
.catch((error) => {
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
@ -118,8 +113,6 @@ export const ProjectSidebarList: FC = observer(() => {
|
||||
setToFavorite={isFavoriteProjectCreate}
|
||||
user={user}
|
||||
/>
|
||||
{/* publish project modal */}
|
||||
<PublishProjectModal />
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${
|
||||
|
||||
Loading…
Reference in New Issue
Block a user