thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: design (#430)

Browse Source 
* style: shortcut modal

* style: feature setting module icon

* style: delete issue modal

* style: delete project modal

* style: sidebar prompt for chart and other info

* fix: create issue modal state icon

* fix: workspace dropdown
This commit is contained in:
Anmol Singh Bhatia 2023-03-13 23:38:43 +05:30 committed by GitHub
parent 7d7683ae6f
commit d5d64e09d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 246 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
apps/app/components/command-palette/shortcuts-modal.tsx
View File

@ -3,6 +3,8 @@ import React, { useEffect, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
// icons
import { XMarkIcon } from "@heroicons/react/20/solid";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { MacCommandIcon } from "components/icons";
// ui
import { Input } from "components/ui";
@ -15,7 +17,7 @@ const shortcuts = [
{
title: "Navigation",
shortcuts: [
{ keys: "Ctrl,/,Cmd,K", description: "To open navigator" },
{ keys: "Ctrl,K", description: "To open navigator" },
{ keys: "↑", description: "Move up" },
{ keys: "↓", description: "Move down" },
{ keys: "←", description: "Move left" },
@ -34,8 +36,8 @@ const shortcuts = [
{ keys: "Delete", description: "To bulk delete issues" },
{ keys: "H", description: "To open shortcuts guide" },
{
keys: "Ctrl,/,Cmd,Alt,C",
description: "To copy issue url when on issue detail page.",
keys: "Ctrl,Alt,C",
description: "To copy issue url when on issue detail page",
},
],
},
@ -100,7 +102,10 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
</span>
</Dialog.Title>
<div>
<div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-gray-200 bg-gray-100 px-3 py-2">
<MagnifyingGlassIcon className="h-3.5 w-3.5 text-gray-500" />
<Input
className="w-full border-none bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
id="search"
name="search"
type="text"
@ -108,20 +113,27 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
onChange={(e) => setQuery(e.target.value)}
/>
</div>
</div>
<div className="flex w-full flex-col gap-y-3">
{query.trim().length > 0 ? (
filteredShortcuts.length > 0 ? (
filteredShortcuts.map((shortcut) => (
<div key={shortcut.keys} className="flex w-full flex-col">
<div className="flex flex-col gap-y-3">
<div className="flex justify-between">
<div className="flex items-center justify-between">
<p className="text-sm text-gray-500">{shortcut.description}</p>
<div className="flex items-center gap-x-1">
<div className="flex items-center gap-x-2.5">
{shortcut.keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1">
<kbd className="rounded bg-gray-200 px-1 text-sm">
{key}
{key === "Ctrl" ? (
<span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
<MacCommandIcon />
</span>
) : (
<kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
{key === "Ctrl" ? <MacCommandIcon /> : key}
</kbd>
)}
</span>
))}
</div>
@ -147,14 +159,20 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<p className="mb-4 font-medium">{title}</p>
<div className="flex flex-col gap-y-3">
{shortcuts.map(({ keys, description }, index) => (
<div key={index} className="flex justify-between">
<div key={index} className="flex items-center justify-between">
<p className="text-sm text-gray-500">{description}</p>
<div className="flex items-center gap-x-1">
<div className="flex items-center gap-x-2.5">
{keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1">
<kbd className="rounded bg-gray-200 px-1 text-sm">
{key}
{key === "Ctrl" ? (
<span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
<MacCommandIcon />
</span>
) : (
<kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
{key === "Ctrl" ? <MacCommandIcon /> : key}
</kbd>
)}
</span>
))}
</div>

26
apps/app/components/cycles/sidebar.tsx
View File

@ -19,6 +19,7 @@ import {
UserCircleIcon,
ChevronDownIcon,
DocumentIcon,
ExclamationCircleIcon,
} from "@heroicons/react/24/outline";
// ui
import { CustomMenu, Loader, ProgressBar } from "components/ui";
@ -144,7 +145,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
{cycle ? (
<>
<div className="flex flex-col items-start justify-center">
<div className="flex gap-2.5 px-7 text-sm">
<div className="flex gap-2.5 px-6 text-sm">
<div className="flex items-center ">
<span
className={`flex items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
@ -244,7 +245,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</div>
</div>
<div className="flex flex-col gap-6 px-7 py-6">
<div className="flex flex-col gap-6 px-6 py-6">
<div className="flex flex-col items-start justify-start gap-2 ">
<div className="flex items-start justify-start gap-2 ">
<h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4>
@ -314,7 +315,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</div>
</div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 ">
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure>
{({ open }) => (
<div
@ -331,13 +332,21 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
""
)}
</div>
{isStartValid && isEndValid ? (
<Disclosure.Button>
<ChevronDownIcon
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<ExclamationCircleIcon className="h-3 w-3" />
<span className="text-xs italic">
Invalid date. Please enter valid date.
</span>
</div>
)}
</div>
<Transition show={open}>
<Disclosure.Panel>
@ -383,7 +392,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</Disclosure>
</div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 ">
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure>
{({ open }) => (
<div
@ -394,12 +403,19 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<span className="font-medium text-gray-500">Other Information</span>
</div>
{issues.length > 0 ? (
<Disclosure.Button>
<ChevronDownIcon
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<ExclamationCircleIcon className="h-3 w-3" />
<span className="text-xs italic">No issues found. Please add issue.</span>
</div>
)}
</div>
<Transition show={open}>
<Disclosure.Panel>

11
apps/app/components/icons/cmd-icon.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
import Image from "next/image";
import type { Props } from "./types";
import CMDIcon from "public/mac-command.svg";
export const MacCommandIcon: React.FC<Props> = ({ width = "14", height = "14" }) => (
<Image src={CMDIcon} height={height} width={width} alt="CMDIcon" />
);
export default MacCommandIcon;

1
apps/app/components/icons/index.ts
View File

@ -41,3 +41,4 @@ export * from "./assignment-clipboard-icon";
export * from "./tick-mark-icon";
export * from "./contrast-icon";
export * from "./people-group-icon";
export * from "./cmd-icon";

46
apps/app/components/issues/delete-issue-modal.tsx
View File

@ -122,52 +122,50 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div>
<div className="mx-auto grid h-16 w-16 place-items-center rounded-full bg-red-100">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4">
<ExclamationTriangleIcon
className="h-8 w-8 text-red-600"
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</span>
<span className="flex items-center justify-start">
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
</span>
</div>
<Dialog.Title
as="h3"
className="mt-3 text-lg font-medium leading-6 text-gray-900"
>
Are you sure you want to delete {`"`}
{data?.project_detail.identifier}-{data?.sequence_id} - {data?.name}?{`"`}
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
All of the data related to the issue will be permanently removed. This
<span>
<p className="text-sm leading-7 text-gray-500 break-all">
Are you sure you want to delete issue{" "}
<span className="font-semibold break-all">
{data?.project_detail.identifier}-{data?.sequence_id}
</span>{" "}
? All of the data related to the issue will be permanently removed. This
action cannot be undone.
</p>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
</span>
<div className="flex flex-row-reverse items-center gap-3">
<Button
type="button"
onClick={handleDeletion}
theme="danger"
disabled={isDeleteLoading}
className="inline-flex sm:ml-3"
className="rounded-lg border-none px-5 py-2 "
>
{isDeleteLoading ? "Deleting..." : "Delete"}
{isDeleteLoading ? "Deleting..." : "Delete Issue"}
</Button>
<Button
type="button"
theme="secondary"
className="inline-flex sm:ml-3"
className="rounded-lg border-none px-5 py-2 "
onClick={onClose}
ref={cancelButtonRef}
>
Cancel
</Button>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>

7
apps/app/components/issues/select/state.tsx
View File

@ -56,9 +56,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
options={options}
label={
<div className="flex items-center gap-2 text-gray-500">
{selectedOption ? (
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
) : (
<Squares2X2Icon className="h-4 w-4" />
{selectedOption &&
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
)}
{selectedOption?.name ?? "State"}
</div>
}

25
apps/app/components/modules/sidebar.tsx
View File

@ -14,6 +14,7 @@ import {
ChevronDownIcon,
DocumentDuplicateIcon,
DocumentIcon,
ExclamationCircleIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
@ -205,7 +206,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
{module ? (
<>
<div className="flex flex-col items-start justify-center">
<div className="flex gap-2.5 px-7 text-sm">
<div className="flex gap-2.5 px-6 text-sm">
<div className="flex items-center ">
<Controller
control={control}
@ -325,7 +326,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div>
</div>
<div className="flex flex-col gap-6 px-7 py-6">
<div className="flex flex-col gap-6 px-6 py-6">
<div className="flex flex-col items-start justify-start gap-2 ">
<div className="flex items-start justify-start gap-2 ">
<h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
@ -396,7 +397,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div>
</div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 ">
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure>
{({ open }) => (
<div
@ -414,12 +415,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
)}
</div>
{isStartValid && isEndValid ? (
<Disclosure.Button>
<ChevronDownIcon
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<ExclamationCircleIcon className="h-3 w-3" />
<span className="text-xs italic">
Invalid date. Please enter valid date.
</span>
</div>
)}
</div>
<Transition show={open}>
<Disclosure.Panel>
@ -465,7 +475,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</Disclosure>
</div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 ">
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure>
{({ open }) => (
<div
@ -476,12 +486,19 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<span className="font-medium text-gray-500">Other Information</span>
</div>
{issues.length > 0 ? (
<Disclosure.Button>
<ChevronDownIcon
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<ExclamationCircleIcon className="h-3 w-3" />
<span className="text-xs italic">No issues found. Please add issue.</span>
</div>
)}
</div>
<Transition show={open}>
<Disclosure.Panel>

53
apps/app/components/project/delete-project-modal.tsx
View File

@ -113,33 +113,31 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4">
<ExclamationTriangleIcon
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</span>
<span className="flex items-center justify-start">
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
</span>
</div>
<div className="mt-3 w-full text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
Delete Project
</Dialog.Title>
<div className="mt-2">
<p className="break-all text-sm text-gray-500">
Are you sure you want to delete project - {`"`}
<span className="italic">{selectedProject?.name}</span>
{`"`} ? All of the data related to the project will be permanently
removed. This action cannot be undone.
<span>
<p className="text-sm leading-7 text-gray-500">
Are you sure you want to delete project{" "}
<span className="break-all font-semibold">{selectedProject?.name}</span>? All
of the data related to the project will be permanently removed. This action
cannot be undone
</p>
</div>
<div className="my-3 h-0.5 bg-gray-200" />
<div className="mt-3">
</span>
<div className="text-gray-600">
<p className="break-all text-sm ">
Enter the project name{" "}
<span className="font-semibold">{selectedProject?.name}</span> to
continue:
<span className="font-medium">{selectedProject?.name}</span> to continue:
</p>
<Input
type="text"
@ -152,10 +150,9 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props
name="projectName"
/>
</div>
<div className="mt-3">
<div className="text-gray-600">
<p className="text-sm">
To confirm, type <span className="font-semibold">delete my project</span>{" "}
below:
To confirm, type <span className="font-medium">delete my project</span> below:
</p>
<Input
type="text"
@ -171,29 +168,27 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props
name="typeDelete"
/>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<div className="flex flex-row-reverse items-center gap-3">
<Button
type="button"
onClick={handleDeletion}
theme="danger"
disabled={isDeleteLoading || !canDelete}
className="inline-flex sm:ml-3"
className="rounded-lg border-none px-5 py-2"
>
{isDeleteLoading ? "Deleting..." : "Delete"}
{isDeleteLoading ? "Deleting..." : "Delete Project"}
</Button>
<Button
type="button"
theme="secondary"
className="inline-flex sm:ml-3"
className="rounded-lg border-none px-5 py-2"
onClick={handleClose}
ref={cancelButtonRef}
>
Cancel
</Button>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>

11
apps/app/components/workspace/sidebar-dropdown.tsx
View File

@ -12,7 +12,9 @@ import useWorkspaces from "hooks/use-workspaces";
import userService from "services/user.service";
import authenticationService from "services/authentication.service";
// components
import { Avatar, Loader } from "components/ui";
import { Avatar, Loader, Tooltip } from "components/ui";
// helper
import { truncateText } from "helpers/string.helper";
// types
import { IWorkspace } from "types";
@ -96,7 +98,7 @@ export const WorkspaceSidebarDropdown = () => {
<p className="text-base">
{activeWorkspace?.name
? activeWorkspace.name.length > 17
? `${activeWorkspace.name.substring(0, 17)}...`
? `${activeWorkspace.name.substring(0, 15)}...`
: activeWorkspace.name
: "Loading..."}
</p>
@ -159,7 +161,10 @@ export const WorkspaceSidebarDropdown = () => {
activeWorkspace?.name?.charAt(0) ?? "N"
)}
</span>
<h5 className="text-sm">{workspace.name}</h5>
<h5 className="text-sm">
{truncateText(workspace.name, 18)}
</h5>
</div>
<span className="p-1">
<CheckIcon

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
View File

@ -20,7 +20,7 @@ import { IProject, UserAuth } from "types";
import type { NextPage, GetServerSidePropsContext } from "next";
// fetch-keys
import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
import { ContrastIcon, GridViewIcon } from "components/icons";
import { ContrastIcon, PeopleGroupIcon } from "components/icons";
const FeaturesSettings: NextPage<UserAuth> = (props) => {
const router = useRouter();
@ -124,7 +124,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
</div>
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-6">
<div className="flex items-start gap-3">
<GridViewIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />
<PeopleGroupIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />
<div>
<h4 className="-mt-1.5 text-xl font-semibold">Modules</h4>
<p className="text-gray-500">

2
apps/app/public/mac-command.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" id="icon" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title>mac-command</title><path d="M24,13a4,4,0,0,0,4-4V8a4,4,0,0,0-4-4H23a4,4,0,0,0-4,4v3H13V8A4,4,0,0,0,9,4H8A4,4,0,0,0,4,8V9a4,4,0,0,0,4,4h3v6H8a4,4,0,0,0-4,4v1a4,4,0,0,0,4,4H9a4,4,0,0,0,4-4V21h6v3a4,4,0,0,0,4,4h1a4,4,0,0,0,4-4V23a4,4,0,0,0-4-4H21V13ZM21,8a2,2,0,0,1,2-2h1a2,2,0,0,1,2,2V9a2,2,0,0,1-2,2H21ZM8,11A2,2,0,0,1,6,9V8A2,2,0,0,1,8,6H9a2,2,0,0,1,2,2v3H8Zm3,13a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2V23a2,2,0,0,1,2-2h3Zm8-5H13V13h6Zm2,2h3a2,2,0,0,1,2,2v1a2,2,0,0,1-2,2H23a2,2,0,0,1-2-2Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 890 B