mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: fixes and improvement (#2595)
* fix: project card fix * chore: bug fixes and ui improvement
This commit is contained in:
parent
ba7b7d6f8b
commit
325fb4a377
@ -149,7 +149,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
||||
projectId={projectId}
|
||||
/>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
|
||||
<a className="group flex items-center justify-between gap-5 px-10 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<a className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<div className="flex items-center gap-3 w-full truncate">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
<span className="flex-shrink-0">
|
||||
|
@ -305,14 +305,12 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div>
|
||||
{peekCycle && (
|
||||
<button
|
||||
className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
|
||||
onClick={() => handleClose()}
|
||||
>
|
||||
<ChevronRight className="h-3 w-3 text-white stroke-2" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3.5">
|
||||
<button onClick={handleCopyText}>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { GanttChart, LayoutGrid, List, Plus } from "lucide-react";
|
||||
import { GanttChartSquare, LayoutGrid, List, Plus } from "lucide-react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// hooks
|
||||
@ -22,7 +22,7 @@ const moduleViewOptions: { type: "list" | "grid" | "gantt_chart"; icon: any }[]
|
||||
},
|
||||
{
|
||||
type: "gantt_chart",
|
||||
icon: GanttChart,
|
||||
icon: GanttChartSquare,
|
||||
},
|
||||
];
|
||||
|
||||
|
@ -128,7 +128,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
||||
)}
|
||||
<DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
|
||||
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||
<a className="group flex items-center justify-between gap-5 px-10 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<a className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<div className="flex items-center gap-3 w-full truncate">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
<span className="flex-shrink-0">
|
||||
|
@ -238,14 +238,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div>
|
||||
{peekModule && (
|
||||
<button
|
||||
className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
|
||||
onClick={() => handleClose()}
|
||||
>
|
||||
<ChevronRight className="h-3 w-3 text-white stroke-2" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3.5">
|
||||
<button onClick={handleCopyText}>
|
||||
|
@ -113,8 +113,8 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-t"
|
||||
/>
|
||||
|
||||
<div className="absolute h-9 w-full bottom-4 z-10 flex items-center justify-between px-4">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="absolute h-10 w-full bottom-4 z-10 flex items-center justify-between px-4">
|
||||
<div className="flex items-center gap-2.5 flex-grow truncate">
|
||||
<div className="h-9 w-9 flex item-center justify-center rounded bg-white/90 flex-shrink-0">
|
||||
<span className="flex items-center justify-center">
|
||||
{project.emoji
|
||||
@ -125,8 +125,8 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-0.5 justify-center h-9">
|
||||
<h3 className="text-white font-semibold line-clamp-1">{project.name}</h3>
|
||||
<div className="flex flex-col gap-0.5 justify-between w-full truncate">
|
||||
<h3 className="text-white font-semibold truncate">{project.name}</h3>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<p className="text-xs font-medium text-white">{project.identifier} </p>
|
||||
{project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
|
||||
@ -134,7 +134,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center h-full gap-2">
|
||||
<div className="flex items-center h-full gap-2 flex-shrink-0">
|
||||
<button
|
||||
className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
|
||||
onClick={(e) => {
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { GanttChart, Kanban, List } from "lucide-react";
|
||||
import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
|
||||
|
||||
export const CYCLE_TAB_LIST = [
|
||||
{
|
||||
@ -26,15 +26,15 @@ export const CYCLE_TAB_LIST = [
|
||||
export const CYCLE_VIEWS = [
|
||||
{
|
||||
key: "list",
|
||||
icon: <List className="h-4 w-4" />,
|
||||
icon: List,
|
||||
},
|
||||
{
|
||||
key: "board",
|
||||
icon: <Kanban className="h-4 w-4" />,
|
||||
icon: LayoutGrid,
|
||||
},
|
||||
{
|
||||
key: "gantt",
|
||||
icon: <GanttChart className="h-4 w-4" />,
|
||||
icon: GanttChartSquare,
|
||||
},
|
||||
];
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
// icons
|
||||
import { Calendar, GanttChart, Kanban, List, Sheet } from "lucide-react";
|
||||
import { Calendar, GanttChartSquare, Kanban, List, Sheet } from "lucide-react";
|
||||
// types
|
||||
import {
|
||||
IIssueDisplayProperties,
|
||||
@ -129,7 +129,7 @@ export const ISSUE_LAYOUTS: {
|
||||
{ key: "kanban", title: "Kanban Layout", icon: Kanban },
|
||||
{ key: "calendar", title: "Calendar Layout", icon: Calendar },
|
||||
{ key: "spreadsheet", title: "Spreadsheet Layout", icon: Sheet },
|
||||
{ key: "gantt_chart", title: "Gantt Chart Layout", icon: GanttChart },
|
||||
{ key: "gantt_chart", title: "Gantt Chart Layout", icon: GanttChartSquare },
|
||||
];
|
||||
|
||||
export const ISSUE_LIST_FILTERS = [
|
||||
|
@ -22,6 +22,8 @@ import type { NextPage } from "next";
|
||||
import { CYCLE_TAB_LIST, CYCLE_VIEWS } from "constants/cycle";
|
||||
// lib cookie
|
||||
import { setLocalStorage, getLocalStorage } from "lib/local-storage";
|
||||
import { Tooltip } from "@plane/ui";
|
||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||
|
||||
const ProjectCyclesPage: NextPage = observer(() => {
|
||||
const [createModal, setCreateModal] = useState(false);
|
||||
@ -135,18 +137,25 @@ const ProjectCyclesPage: NextPage = observer(() => {
|
||||
{CYCLE_VIEWS.map((view) => {
|
||||
if (view.key === "gantt" && cycleStore?.cycleView === "draft") return null;
|
||||
return (
|
||||
<button
|
||||
<Tooltip
|
||||
key={view.key}
|
||||
tooltipContent={
|
||||
<span className="capitalize">{replaceUnderscoreIfSnakeCase(view.key)} Layout</span>
|
||||
}
|
||||
position="bottom"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-8 w-8 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
|
||||
cycleStore?.cycleLayout === view.key
|
||||
? "bg-custom-background-80 text-custom-text-100"
|
||||
: "text-custom-text-200"
|
||||
? "bg-custom-sidebar-background-80"
|
||||
: "text-custom-sidebar-text-200"
|
||||
}`}
|
||||
onClick={() => handleCurrentLayout(view.key as TCycleLayout)}
|
||||
>
|
||||
{view.icon}
|
||||
<view.icon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user