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

fix: ui improvement (#214)

Browse Source 
* fix: help option ui fix

* feat: auth toast added

* fix: copy shortcut command fix

* feat: card title ellipsis added

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2023-01-31 18:09:11 +05:30 committed by GitHub
parent 28d4f4c876
commit 27e3364a1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/app/components/account/email-code-form.tsx
View File

@ -5,6 +5,7 @@ import { CheckCircleIcon } from "@heroicons/react/20/solid";
import { Button, Input } from "components/ui";
// services
import authenticationService from "services/authentication.service";
import useToast from "hooks/use-toast";
// icons
// types
@ -16,6 +17,7 @@ type EmailCodeFormValues = {
export const EmailCodeForm = ({ onSuccess }: any) => {
const [codeSent, setCodeSent] = useState(false);
const { setToastAlert } = useToast();
const {
register,
handleSubmit,
@ -53,6 +55,11 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
})
.catch((error) => {
console.log(error);
setToastAlert({
title: "Oops!",
type: "error",
message: "Enter the correct code to sign in",
});
setError("token" as keyof EmailCodeFormValues, {
type: "manual",
message: error.error,

7
apps/app/components/account/email-password-form.tsx
View File

@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
// ui
import { Button, Input } from "components/ui";
import authenticationService from "services/authentication.service";
import useToast from "hooks/use-toast";
// types
type EmailPasswordFormValues = {
@ -15,6 +16,7 @@ type EmailPasswordFormValues = {
};
export const EmailPasswordForm = ({ onSuccess }: any) => {
const { setToastAlert } = useToast();
const {
register,
handleSubmit,
@ -38,6 +40,11 @@ export const EmailPasswordForm = ({ onSuccess }: any) => {
})
.catch((error) => {
console.log(error);
setToastAlert({
title: "Oops!",
type: "error",
message: "Enter the correct email address and password to sign in",
});
if (!error?.response?.data) return;
Object.keys(error.response.data).forEach((key) => {
const err = error.response.data[key];

5
apps/app/components/command-palette/index.tsx
View File

@ -105,6 +105,8 @@ const CommandPalette: React.FC = () => {
if ((e.ctrlKey || e.metaKey) && e.key === "k") {
e.preventDefault();
setIsPaletteOpen(true);
} else if (e.ctrlKey && e.key === "c") {
console.log("Text copied");
} else if (e.key === "c") {
e.preventDefault();
setIsIssueModalOpen(true);
@ -128,8 +130,6 @@ const CommandPalette: React.FC = () => {
setIsBulkDeleteIssuesModalOpen(true);
} else if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "c") {
e.preventDefault();
}
if (!router.query.issueId) return;
const url = new URL(window.location.href);
@ -147,6 +147,7 @@ const CommandPalette: React.FC = () => {
});
});
}
}
},
[toggleCollapsed, setToastAlert, router]
);

6
apps/app/components/project/card.tsx
View File

@ -52,8 +52,10 @@ export const ProjectCard: React.FC<ProjectCardProps> = (props) => {
{project.icon && (
<span className="text-base">{String.fromCodePoint(parseInt(project.icon))}</span>
)}
<span>{project.name}</span>
<span className="text-xs text-gray-500">{project.identifier}</span>
<span className="w-3/4 max-w-[225px] md:max-w-[140px] xl:max-w-[225px] text-ellipsis overflow-hidden">
{project.name}
</span>
<span className="text-xs text-gray-500 ">{project.identifier}</span>
</a>
</Link>
</div>

4
apps/app/components/project/cycles/stats-view/single-stat.tsx
View File

@ -71,7 +71,9 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
<div className="flex items-center justify-between gap-2">
<Link href={`/${workspaceSlug}/projects/${projectId as string}/cycles/${cycle.id}`}>
<a>
<h2 className="font-medium">{cycle.name}</h2>
<h2 className="font-medium w-full max-w-[175px] lg:max-w-[225px] xl:max-w-[300px] text-ellipsis overflow-hidden">
{cycle.name}
</h2>
</a>
</Link>
<CustomMenu width="auto" ellipsis>

6
apps/app/components/project/modules/single-module-card.tsx
View File

@ -30,7 +30,7 @@ const SingleModuleCard: React.FC<Props> = ({ module }) => {
};
return (
<div className="group/card relative select-none p-2">
<div className="group/card h-full w-full relative select-none p-2">
<div className="absolute top-4 right-4 z-50 bg-red-200 opacity-0 group-hover/card:opacity-100">
<button
type="button"
@ -50,8 +50,8 @@ const SingleModuleCard: React.FC<Props> = ({ module }) => {
data={selectedModuleForDelete}
/>
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="block cursor-pointer rounded-md border bg-white p-3">
{module.name}
<a className="flex flex-col cursor-pointer rounded-md border bg-white p-3 ">
<span className="w-3/4 text-ellipsis overflow-hidden">{module.name}</span>
<div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
<div className="space-y-2">
<h6 className="text-gray-500">LEAD</h6>

6
apps/app/components/workspace/help-section.tsx
View File

@ -53,6 +53,8 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
// hooks
useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
const helpOptionMode = sidebarCollapse ? "left-full" : "left-[-75px]";
return (
<div
className={`flex w-full items-center self-baseline bg-primary px-2 py-2 ${
@ -107,14 +109,14 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
leaveTo="transform opacity-0 scale-95"
>
<div
className="absolute bottom-0 left-full space-y-2 rounded-sm bg-white py-3 shadow-md"
className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-white py-3 shadow-md`}
ref={helpOptionsRef}
>
{helpOptions.map(({ name, Icon, href }) => (
<Link href={href} key={name}>
<a
target="_blank"
className="mx-3 flex items-center gap-x-2 rounded-md px-2 py-2 text-xs hover:bg-gray-100"
className="mx-3 flex items-center gap-x-2 rounded-md whitespace-nowrap px-2 py-2 text-xs hover:bg-gray-100"
>
<Icon className="h-5 w-5 text-gray-500" />
<span className="text-sm">{name}</span>

6
apps/app/layouts/navbar/main-sidebar.tsx
View File

@ -84,6 +84,8 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
const helpOptionMode = sidebarCollapse ? "left-full" : "left-[-75px]";
return (
<nav className="relative z-20 h-screen">
<div
@ -148,14 +150,14 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
leaveTo="transform opacity-0 scale-95"
>
<div
className="absolute bottom-0 left-full space-y-2 rounded-sm bg-white py-3 shadow-md"
className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-white py-3 shadow-md`}
ref={helpOptionsRef}
>
{helpOptions.map(({ name, Icon, href }) => (
<Link href={href} key={name}>
<a
target="_blank"
className="mx-3 flex items-center gap-x-2 rounded-md px-2 py-2 text-xs hover:bg-gray-100"
className="mx-3 flex items-center gap-x-2 rounded-md whitespace-nowrap px-2 py-2 text-xs hover:bg-gray-100"
>
<Icon className="h-5 w-5 text-gray-500" />
<span className="text-sm">{name}</span>

5
apps/app/pages/signin.tsx
View File

@ -75,6 +75,11 @@ const SignInPage: NextPage = () => {
})
.catch((err) => {
console.log(err);
setToastAlert({
title: "Error signing in!",
type: "error",
message: "Something went wrong. Please try again later or contact the support team.",
});
setLoading(false);
});
};