style: module ui revamp (#2548)

* chore: module constant and helper function added

* style: module card ui revamp

* chore: custom media query added

* chore: circular progress indicator added

* chore: module card item ui improvement

* chore: module list view added

* chore: module sidebar added in list and card view

* chore: module list and card ui improvement

* chore: module sidebar select, avatar and link list component improvement

* chore: sidebar improvement and refactor

* style: module sidebar revamp

* style: module sidebar ui improvement

* chore: module sidebar lead and member select improvement

* style: module sidebar progress section empty state added

* chore: module card issue count validation added

* style: module card and list item ui improvement
This commit is contained in:
Anmol Singh Bhatia 2023-10-27 18:45:10 +05:30 committed by GitHub
parent 080b5a29ae
commit fc82d6fc23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 1159 additions and 623 deletions

View file

@ -1,25 +1,28 @@
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
import { GanttChart, LayoutGrid, List, Plus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useLocalStorage from "hooks/use-local-storage";
// ui
import { Breadcrumbs, BreadcrumbItem, Button, Tooltip } from "@plane/ui";
import { Icon } from "components/ui";
// helper
import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
const moduleViewOptions: { type: "grid" | "gantt_chart"; icon: any }[] = [
const moduleViewOptions: { type: "list" | "grid" | "gantt_chart"; icon: any }[] = [
{
type: "gantt_chart",
icon: "view_timeline",
type: "list",
icon: List,
},
{
type: "grid",
icon: "table_rows",
icon: LayoutGrid,
},
{
type: "gantt_chart",
icon: GanttChart,
},
];
@ -67,7 +70,7 @@ export const ModulesListHeader: React.FC = observer(() => {
}`}
onClick={() => setModulesView(option.type)}
>
<Icon iconName={option.icon} className={`!text-base ${option.type === "grid" ? "rotate-90" : ""}`} />
<option.icon className="h-3.5 w-3.5" />
</button>
</Tooltip>
))}