chore: update all layout selections (#2641)

This commit is contained in:
Aaryan Khandelwal 2023-11-03 19:17:13 +05:30 committed by GitHub
parent 41e9d5d7e3
commit 79cad16aba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 130 additions and 84 deletions

View File

@ -1,6 +1,6 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { GanttChartSquare, LayoutGrid, List, Plus } from "lucide-react";
import { Plus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
@ -8,23 +8,9 @@ import useLocalStorage from "hooks/use-local-storage";
// ui
import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
// helper
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
const moduleViewOptions: { type: "list" | "grid" | "gantt_chart"; icon: any }[] = [
{
type: "list",
icon: List,
},
{
type: "grid",
icon: LayoutGrid,
},
{
type: "gantt_chart",
icon: GanttChartSquare,
},
];
// constants
import { MODULE_VIEW_LAYOUTS } from "constants/module";
export const ModulesListHeader: React.FC = observer(() => {
// router
@ -68,23 +54,26 @@ export const ModulesListHeader: React.FC = observer(() => {
</div>
</div>
<div className="flex items-center gap-2">
{moduleViewOptions.map((option) => (
<Tooltip
key={option.type}
tooltipContent={<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>}
position="bottom"
>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
modulesView === option.type ? "bg-custom-sidebar-background-80" : "text-custom-sidebar-text-200"
}`}
onClick={() => setModulesView(option.type)}
>
<option.icon className="h-3.5 w-3.5" />
</button>
</Tooltip>
))}
<div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
{MODULE_VIEW_LAYOUTS.map((layout) => (
<Tooltip key={layout.key} tooltipContent={layout.title}>
<button
type="button"
className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
modulesView == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
}`}
onClick={() => setModulesView(layout.key)}
>
<layout.icon
strokeWidth={2}
className={`h-3.5 w-3.5 ${
modulesView == layout.key ? "text-custom-text-100" : "text-custom-text-200"
}`}
/>
</button>
</Tooltip>
))}
</div>
<Button
variant="primary"
prependIcon={<Plus />}

View File

@ -82,7 +82,7 @@ export const PrioritySelect: React.FC<Props> = ({
: value === "low"
? "text-green-500"
: "text-custom-text-200"
} ${value === "urgent" && highlightUrgentPriority ? "text-white" : "text-red-500"}`}
} ${value === "urgent" ? (highlightUrgentPriority ? "text-white" : "text-red-500") : ""}`}
/>
{showTitle && <span className="capitalize text-xs">{value}</span>}
</div>

View File

@ -23,18 +23,21 @@ export const CYCLE_TAB_LIST = [
},
];
export const CYCLE_VIEWS = [
export const CYCLE_VIEW_LAYOUTS = [
{
key: "list",
icon: List,
title: "List layout",
},
{
key: "board",
icon: LayoutGrid,
title: "Grid layout",
},
{
key: "gantt",
icon: GanttChartSquare,
title: "Gantt layout",
},
];

View File

@ -1,3 +1,4 @@
import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
// types
import { TModuleStatus } from "types";
@ -51,3 +52,21 @@ export const MODULE_STATUS: {
bgColor: "bg-red-50",
},
];
export const MODULE_VIEW_LAYOUTS: { key: "list" | "grid" | "gantt_chart"; icon: any; title: string }[] = [
{
key: "list",
icon: List,
title: "List layout",
},
{
key: "grid",
icon: LayoutGrid,
title: "Grid layout",
},
{
key: "gantt_chart",
icon: GanttChartSquare,
title: "Gantt layout",
},
];

37
web/constants/page.ts Normal file
View File

@ -0,0 +1,37 @@
import { LayoutGrid, List } from "lucide-react";
export const PAGE_VIEW_LAYOUTS = [
{
key: "list",
icon: List,
title: "List layout",
},
{
key: "detailed",
icon: LayoutGrid,
title: "Detailed layout",
},
];
export const PAGE_TABS_LIST: { key: string; title: string }[] = [
{
key: "recent",
title: "Recent",
},
{
key: "all",
title: "All",
},
{
key: "favorites",
title: "Favorites",
},
{
key: "created-by-me",
title: "Created by me",
},
{
key: "created-by-others",
title: "Created by others",
},
];

View File

@ -31,7 +31,7 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = (props) => {
if (!currentUser && !error) {
return (
<div className="h-screen grid place-items-center p-4">
<div className="h-screen grid place-items-center p-4 bg-custom-background-100">
<div className="flex flex-col items-center gap-3 text-center">
<Spinner />
</div>

View File

@ -20,11 +20,9 @@ import emptyCycle from "public/empty-state/cycle.svg";
import { TCycleView, TCycleLayout } from "types";
import { NextPageWithLayout } from "types/app";
// constants
import { CYCLE_TAB_LIST, CYCLE_VIEWS } from "constants/cycle";
import { CYCLE_TAB_LIST, CYCLE_VIEW_LAYOUTS } from "constants/cycle";
// lib cookie
import { setLocalStorage, getLocalStorage } from "lib/local-storage";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
const ProjectCyclesPage: NextPageWithLayout = observer(() => {
const [createModal, setCreateModal] = useState(false);
@ -118,7 +116,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
handleCurrentView(CYCLE_TAB_LIST[i].key as TCycleView);
}}
>
<div className="flex flex-col sm:flex-row gap-4 justify-between border-b border-custom-border-300 px-4 sm:px-5 pb-4 sm:pb-0">
<div className="flex flex-col sm:flex-row gap-4 justify-between items-end sm:items-center border-b border-custom-border-200 px-4 sm:px-5 pb-4 sm:pb-0">
<Tab.List as="div" className="flex items-center overflow-x-scroll">
{CYCLE_TAB_LIST.map((tab) => (
<Tab
@ -133,28 +131,28 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
</Tab>
))}
</Tab.List>
{CYCLE_VIEWS && CYCLE_VIEWS.length > 0 && cycleStore?.cycleView != "active" && (
<div className="justify-end sm:justify-start flex items-center gap-x-1">
{CYCLE_VIEWS.map((view) => {
if (view.key === "gantt" && cycleStore?.cycleView === "draft") return null;
{cycleStore?.cycleView != "active" && (
<div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
{CYCLE_VIEW_LAYOUTS.map((layout) => {
if (layout.key === "gantt" && cycleStore?.cycleView === "draft") return null;
return (
<Tooltip
key={view.key}
tooltipContent={
<span className="capitalize">{replaceUnderscoreIfSnakeCase(view.key)} Layout</span>
}
position="bottom"
>
<Tooltip key={layout.key} tooltipContent={layout.title}>
<button
type="button"
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-sidebar-background-80"
: "text-custom-sidebar-text-200"
className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
cycleStore?.cycleLayout == layout.key
? "bg-custom-background-100 shadow-custom-shadow-2xs"
: ""
}`}
onClick={() => handleCurrentLayout(view.key as TCycleLayout)}
onClick={() => handleCurrentLayout(layout.key as TCycleLayout)}
>
<view.icon className="h-3.5 w-3.5" />
<layout.icon
strokeWidth={2}
className={`h-3.5 w-3.5 ${
cycleStore?.cycleLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
}`}
/>
</button>
</Tooltip>
);

View File

@ -5,16 +5,18 @@ import { Tab } from "@headlessui/react";
// hooks
import useLocalStorage from "hooks/use-local-storage";
import useUserAuth from "hooks/use-user-auth";
// icons
import { LayoutGrid, List } from "lucide-react";
// layouts
import { AppLayout } from "layouts/app-layout";
// components
import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
import { PagesHeader } from "components/headers";
// ui
import { Tooltip } from "@plane/ui";
// types
import { TPageViewProps } from "types";
import { NextPageWithLayout } from "types/app";
// constants
import { PAGE_TABS_LIST, PAGE_VIEW_LAYOUTS } from "constants/page";
const AllPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.AllPagesList), {
ssr: false,
@ -32,8 +34,6 @@ const OtherPagesList = dynamic<TPagesListProps>(() => import("components/pages")
ssr: false,
});
const tabsList = ["Recent", "All", "Favorites", "Created by me", "Created by others"];
const ProjectPagesPage: NextPageWithLayout = () => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -77,25 +77,25 @@ const ProjectPagesPage: NextPageWithLayout = () => {
<div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
<div className="flex gap-4 justify-between">
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
<div className="flex gap-x-1">
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
viewType === "list" ? "bg-custom-background-80" : ""
}`}
onClick={() => setViewType("list")}
>
<List className="h-4 w-4" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
viewType === "detailed" ? "bg-custom-background-80" : ""
}`}
onClick={() => setViewType("detailed")}
>
<LayoutGrid className="h-4 w-4" />
</button>
<div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
{PAGE_VIEW_LAYOUTS.map((layout) => (
<Tooltip key={layout.key} tooltipContent={layout.title}>
<button
type="button"
className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
viewType == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
}`}
onClick={() => setViewType(layout.key as TPageViewProps)}
>
<layout.icon
strokeWidth={2}
className={`h-3.5 w-3.5 ${
viewType == layout.key ? "text-custom-text-100" : "text-custom-text-200"
}`}
/>
</button>
</Tooltip>
))}
</div>
</div>
<Tab.Group
@ -121,9 +121,9 @@ const ProjectPagesPage: NextPageWithLayout = () => {
>
<Tab.List as="div" className="mb-6 flex items-center justify-between">
<div className="flex gap-4 items-center flex-wrap">
{tabsList.map((tab, index) => (
{PAGE_TABS_LIST.map((tab) => (
<Tab
key={`${tab}-${index}`}
key={tab.key}
className={({ selected }) =>
`rounded-full border px-5 py-1.5 text-sm outline-none ${
selected
@ -132,7 +132,7 @@ const ProjectPagesPage: NextPageWithLayout = () => {
}`
}
>
{tab}
{tab.title}
</Tab>
))}
</div>