Skip to content

Commit

Permalink
Patch sidebar design
Browse files Browse the repository at this point in the history
  • Loading branch information
@albingroen
albingroen committed Feb 21, 2023
1 parent f385475 commit bf20a92
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 73 deletions.
5 changes: 4 additions & 1 deletion components/ImportSchema.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,10 @@ const ImportSchema = ({ onClose }: ImportSchemaProps) => {
name="schema"
value={form.values.schema}
onChange={form.handleChange}
className="rounded-lg focus:outline-none focus:ring-0 focus:border-indigo-500 w-full resize-none pb-20 font-mono whitespace-pre-wrap overflow-auto"
className="rounded-lg p-4 placeholder-gray-300 focus:outline-none border-gray-300 focus:ring-0 focus:border-indigo-500 w-full resize-none pb-20 font-mono whitespace-pre-wrap overflow-auto"
placeholder={`model User {
id String @id @unique @default(cuid())
}`}
/>

<input
Expand Down
128 changes: 65 additions & 63 deletions components/Models.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@ import Sidebar from "./Sidebar";
import SidebarItem from "./SidebarItem";
import Stack from "./Stack";
import toast from "react-hot-toast";
import { ArrowLeftIcon, EllipsisVerticalIcon } from "@heroicons/react/20/solid";
import { ArrowLeftIcon } from "@heroicons/react/20/solid";
import {
ArrowUpTrayIcon,
CubeIcon,
EllipsisVerticalIcon,
EyeIcon,
ListBulletIcon,
PlusIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { BoltIcon, CubeIcon as CubeIconSolid } from "@heroicons/react/24/solid";
Expand Down Expand Up @@ -272,7 +274,7 @@ export default function Models() {

<Stack align="center" className="mt-5" justify="between">
<h1
className="text-2xl p-2 -m-2 hover:bg-gray-100 focus:bg-gray-200 transition rounded-md font-medium truncate leading-none focus:outline-none"
className="text-2xl p-2 -m-2 hover:bg-gray-100 focus:bg-gray-100 transition rounded-md font-medium truncate leading-none focus:outline-none"
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
Expand Down Expand Up @@ -304,7 +306,7 @@ export default function Models() {
},
]}
>
<button type="button" className="icon-button">
<button type="button" className="icon-button-light">
<EllipsisVerticalIcon className="w-5 icon-button-button" />
</button>
</Dropdown>
Expand All @@ -329,75 +331,75 @@ export default function Models() {
))}
</Select>

<hr className="mt-5 border-gray-200/80 -mx-5" />
<hr className="mt-6 mb-5 -mx-5" />

<Stack direction="vertical" className="mt-4" spacing="small">
<div>
<p className="label">Models</p>
<Stack direction="vertical" spacing="mini">
<Stack align="center" justify="between">
<p className="label-flat">Models</p>

{schema.models.length ? (
<ul className="w-full">
{schema.models.map((model, i) => {
const isActive = query.id === String(i);

return (
<li key={model.name}>
<SidebarItem
href={`/schemas/${schema.name}/models/${i}`}
icon={isActive ? CubeIconSolid : CubeIcon}
isActive={isActive}
>
{model.name}
</SidebarItem>
</li>
);
})}
</ul>
) : null}
</div>

<Button
type="button"
variant="secondary"
onClick={handleCreateModel}
>
New model
</Button>
</Stack>

<hr className="mt-5 mb-4 border-gray-200/80 -mx-5" />
<button
type="button"
title="New model"
className="icon-button-light"
onClick={handleCreateModel}
>
<PlusIcon className="icon-button-icon" />
</button>
</Stack>

<Stack direction="vertical" spacing="small">
<div>
<p className="label">Enums</p>
{schema.models.length ? (
<ul className="w-full">
{schema.models.map((model, i) => {
const isActive = query.id === String(i);

{schema.enums.length ? (
<ul className="w-full">
{schema.enums.map((schemaEnum, i) => (
<li key={schemaEnum.name}>
return (
<li key={model.name}>
<SidebarItem
icon={ListBulletIcon}
onClick={() => {
setEditingEnum(schemaEnum.name);
}}
href={`/schemas/${schema.name}/models/${i}`}
icon={isActive ? CubeIconSolid : CubeIcon}
isActive={isActive}
>
{schemaEnum.name}
{model.name}
</SidebarItem>
</li>
))}
</ul>
) : null}
</div>
);
})}
</ul>
) : null}
</Stack>

<Button
type="button"
variant="secondary"
onClick={() => {
setShowingAddEnum(true);
}}
>
New enum
</Button>
<Stack direction="vertical" spacing="mini" className="mt-5">
<Stack align="center" justify="between">
<p className="label-flat">Enums</p>

<button
type="button"
className="icon-button-light"
title="New enum"
onClick={() => {
setShowingAddEnum(true);
}}
>
<PlusIcon className="icon-button-icon" />
</button>
</Stack>

{schema.enums.length ? (
<ul className="w-full">
{schema.enums.map((schemaEnum) => (
<li key={schemaEnum.name}>
<SidebarItem
icon={ListBulletIcon}
onClick={() => {
setEditingEnum(schemaEnum.name);
}}
>
{schemaEnum.name}
</SidebarItem>
</li>
))}
</ul>
) : null}
</Stack>
</div>
</Sidebar>
Expand Down
2 changes: 1 addition & 1 deletion components/SidebarItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function SidebarItem({
{...rest}
href={href}
className={classNames(
"hover:bg-gray-100 px-2 py-1.5 -mx-2 rounded-md flex items-center gap-2.5 group w-full",
"hover:bg-gray-100 px-2 py-1.5 -mx-2 rounded-md flex items-center gap-2.5 group",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-black focus-visible:bg-gray-100"
)}
onClick={
Expand Down
12 changes: 6 additions & 6 deletions pages/schemas/[schemaId]/models/[id]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import {
Bars3Icon,
ClipboardDocumentIcon,
DocumentDuplicateIcon,
EllipsisVerticalIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
import { Field, FieldType, Model } from "../../../../../lib/types";
import { TYPES } from "../../../../../lib/fields";
import { classNames } from "react-cmdk";
Expand Down Expand Up @@ -107,7 +107,7 @@ const Model = () => {
<div className="flex-1 p-8 flex flex-col space-y-4">
<Stack align="center" justify="between">
<h2
className="text-2xl p-2 -m-2 hover:bg-gray-200 focus:bg-gray-300 transition rounded-md font-medium focus:outline-none"
className="text-2xl p-2 -m-2 hover:bg-gray-200 focus:bg-gray-200 transition rounded-md font-medium focus:outline-none"
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
Expand Down Expand Up @@ -172,8 +172,8 @@ const Model = () => {
},
]}
>
<button type="button" className="icon-button">
<EllipsisVerticalIcon className="icon-button-icon" />
<button type="button" className="icon-button-dark">
<EllipsisVerticalIcon className="icon-button-icon-lg" />
</button>
</Dropdown>
</Stack>
Expand Down Expand Up @@ -384,15 +384,15 @@ const Model = () => {
<button
type="button"
className={classNames(
"rounded-lg bg-white shadow text-left border border-transparent focus:outline-none focus:ring-0 focus:border-indigo-500 hover:border-indigo-500 py-3 px-4 flex items-center space-x-3.5",
"rounded-lg bg-white shadow text-left border border-transparent focus:outline-none focus:ring-0 focus:border-indigo-500 hover:border-indigo-500 py-3 px-4 flex items-center space-x-3.5 group",
type.type === "model" || type.type === "enum"
? "bg-indigo-100"
: "bg-blue-100"
)}
onClick={() => setAddingField(type.name as FieldType)}
key={type.name}
>
<div className="rounded-md !bg-gray-100 flex items-center justify-center p-3">
<div className="rounded-md bg-gray-100 text-gray-500 group-hover:text-inherit flex items-center justify-center p-3">
<Icon className={classNames("w-5")} />
</div>

Expand Down
24 changes: 22 additions & 2 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,12 @@
@apply text-gray-500 text-sm mb-2 inline-block;
}

.label-flat {
@apply text-gray-500 text-sm inline-block leading-none;
}

.input {
@apply border text-sm border-gray-200 rounded-md p-2 shadow-sm hover:border-gray-300 focus:outline-none focus:ring-0 focus:border-gray-500;
@apply border text-sm border-gray-300 rounded-md p-2 shadow-sm hover:border-gray-400 focus:outline-none focus:ring-0 focus:border-gray-500;
}

.fade-in {
Expand All @@ -41,14 +45,30 @@
@apply opacity-100 outline-none;
}

.icon-button-base {
@apply p-1.5 rounded-md focus:outline-none focus:ring-0 enabled:hover:text-inherit enabled:focus-visible:text-inherit;
}

.icon-button {
@apply p-1.5 rounded-md enabled:hover:bg-gray-100 enabled:focus-visible:bg-gray-100 border border-transparent enabled:hover:border-gray-200 enabled:focus-visible:border-gray-200 focus:outline-none focus:ring-0 text-gray-500 enabled:hover:text-inherit enabled:focus-visible:text-inherit;
@apply enabled:hover:bg-gray-100 enabled:focus-visible:bg-gray-100 text-gray-500 icon-button-base;
}

.icon-button-light {
@apply enabled:hover:bg-gray-100 enabled:focus-visible:bg-gray-100 text-gray-400 icon-button-base;
}

.icon-button-dark {
@apply enabled:hover:bg-gray-200 enabled:focus-visible:bg-gray-200 text-gray-600 icon-button-base;
}

.icon-button-icon {
@apply w-[18px];
}

.icon-button-icon-lg {
@apply w-5;
}

@keyframes fadeIn {
from {
opacity: 0;
Expand Down

1 comment on commit bf20a92

@vercel
Copy link

@vercel vercel bot commented on bf20a92 Feb 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

prismabuilder-io – ./

prismabuilder-io.vercel.app
prismabuilder-io-albingroen1.vercel.app
prismabuilder.io
prismabuilder-io-git-main-albingroen1.vercel.app
www.prismabuilder.io

Please sign in to comment.