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

fix: show project drag handle only when uncollapsed (#1727)

Browse Source 
* fix: show project drag handle only when uncollapsed

* chore: fetch profile issues auth

* chore: update theme colors

* chore: update profile page redirection
This commit is contained in:
Aaryan Khandelwal 2023-07-31 18:11:25 +05:30 committed by GitHub
parent 1ae78e55c9
commit d733fb92cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 139 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/app/components/project/single-sidebar-project.tsx
View File

@ -143,7 +143,9 @@ export const SingleSidebarProject: React.FC<Props> = ({
>
<button
type="button"
className="absolute top-2 left-0 hidden rounded p-0.5 group-hover:!flex"
className={`absolute top-2 left-0 hidden rounded p-0.5 ${
sidebarCollapse ? "" : "group-hover:!flex"
}`}
{...provided.dragHandleProps}
>
<EllipsisVerticalIcon className="h-4" />
@ -157,8 +159,8 @@ export const SingleSidebarProject: React.FC<Props> = ({
>
<Disclosure.Button
as="div"
className={`flex w-full ml-4 cursor-pointer select-none items-center rounded-sm py-1 text-left text-sm font-medium ${
sidebarCollapse ? "justify-center" : "justify-between"
className={`flex w-full cursor-pointer select-none items-center rounded-sm py-1 text-left text-sm font-medium ${
sidebarCollapse ? "justify-center" : "justify-between ml-4"
}`}
>
<div className="flex items-center gap-x-2">

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

@ -25,7 +25,7 @@ import { truncateText } from "helpers/string.helper";
import { IWorkspace } from "types";
// Static Data
const userLinks = (workspaceSlug: string) => [
const userLinks = (workspaceSlug: string, userId: string) => [
{
name: "Workspace Settings",
href: `/${workspaceSlug}/settings`,
@ -36,7 +36,7 @@ const userLinks = (workspaceSlug: string) => [
},
{
name: "My Profile",
href: `/${workspaceSlug}/me/profile`,
href: `/${workspaceSlug}/profile/${userId}`,
},
];
@ -119,7 +119,7 @@ export const WorkspaceSidebarDropdown = () => {
</Menu.Button>
{!sidebarCollapse && (
<Link href={`/${workspaceSlug}/me/profile`}>
<Link href={`/${workspaceSlug}/profile/${user?.id}`}>
<a>
<div className="flex flex-grow justify-end">
<Avatar user={user} height="28px" width="28px" fontSize="14px" />
@ -215,7 +215,7 @@ export const WorkspaceSidebarDropdown = () => {
)}
</div>
<div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-200 px-3 py-2 text-sm">
{userLinks(workspaceSlug as string).map((link, index) => (
{userLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map((link, index) => (
<Menu.Item
key={index}
as="div"

9
apps/app/hooks/use-profile-issues.tsx
View File

@ -12,6 +12,7 @@ import { profileIssuesContext } from "contexts/profile-issues-context";
import { IIssue } from "types";
// fetch-keys
import { USER_PROFILE_ISSUES } from "constants/fetch-keys";
import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
const useProfileIssues = (workspaceSlug: string | undefined, userId: string | undefined) => {
const {
@ -33,6 +34,8 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
const router = useRouter();
const { memberRole } = useWorkspaceMyMembership();
const params: any = {
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
@ -47,14 +50,16 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
};
const { data: userProfileIssues, mutate: mutateProfileIssues } = useSWR(
workspaceSlug && userId
workspaceSlug && userId && (memberRole.isOwner || memberRole.isMember || memberRole.isViewer)
? USER_PROFILE_ISSUES(workspaceSlug.toString(), userId.toString(), params)
: null,
workspaceSlug && userId
workspaceSlug && userId && (memberRole.isOwner || memberRole.isMember || memberRole.isViewer)
? () => userService.getUserProfileIssues(workspaceSlug.toString(), userId.toString(), params)
: null
);
console.log(memberRole);
const groupedIssues:
| {
[key: string]: IIssue[];

30
apps/app/layouts/profile-layout.tsx
View File

@ -1,5 +1,3 @@
import { useRouter } from "next/router";
// hooks
import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
// layouts
@ -14,23 +12,17 @@ type Props = {
className?: string;
};
export const ProfileAuthWrapper = (props: Props) => {
const router = useRouter();
const { workspaceSlug } = router.query;
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem title={`User Name`} />
</Breadcrumbs>
}
>
<ProfileLayout {...props} />
</WorkspaceAuthorizationLayout>
);
};
export const ProfileAuthWrapper = (props: Props) => (
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title="User Profile" />
</Breadcrumbs>
}
>
<ProfileLayout {...props} />
</WorkspaceAuthorizationLayout>
);
const ProfileLayout: React.FC<Props> = ({ children, className }) => {
const { memberRole } = useWorkspaceMyMembership();

226
apps/app/styles/globals.css
View File

@ -23,6 +23,107 @@
}
:root {
color-scheme: light !important;
--color-background-100: 255, 255, 255; /* primary bg */
--color-background-90: 250, 250, 250; /* secondary bg */
--color-background-80: 245, 245, 245; /* tertiary bg */
--color-text-100: 23, 23, 23; /* primary text */
--color-text-200: 58, 58, 58; /* secondary text */
--color-text-300: 82, 82, 82; /* tertiary text */
--color-text-400: 163, 163, 163; /* placeholder text */
--color-border-100: 245, 245, 245; /* subtle border= 1 */
--color-border-200: 229, 229, 229; /* subtle border- 2 */
--color-border-300: 212, 212, 212; /* strong border- 1 */
--color-border-400: 185, 185, 185; /* strong border- 2 */
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
}
[data-theme="light"],
[data-theme="light-contrast"] {
color-scheme: light !important;
--color-background-100: 255, 255, 255; /* primary bg */
--color-background-90: 250, 250, 250; /* secondary bg */
--color-background-80: 245, 245, 245; /* tertiary bg */
}
[data-theme="light"] {
--color-text-100: 23, 23, 23; /* primary text */
--color-text-200: 58, 58, 58; /* secondary text */
--color-text-300: 82, 82, 82; /* tertiary text */
--color-text-400: 163, 163, 163; /* placeholder text */
--color-border-100: 245, 245, 245; /* subtle border= 1 */
--color-border-200: 229, 229, 229; /* subtle border- 2 */
--color-border-300: 212, 212, 212; /* strong border- 1 */
--color-border-400: 185, 185, 185; /* strong border- 2 */
}
[data-theme="light-contrast"] {
--color-text-100: 11, 11, 11; /* primary text */
--color-text-200: 38, 38, 38; /* secondary text */
--color-text-300: 58, 58, 58; /* tertiary text */
--color-text-400: 115, 115, 115; /* placeholder text */
--color-border-100: 34, 34, 34; /* subtle border= 1 */
--color-border-200: 38, 38, 38; /* subtle border- 2 */
--color-border-300: 46, 46, 46; /* strong border- 1 */
--color-border-400: 58, 58, 58; /* strong border- 2 */
}
[data-theme="dark"],
[data-theme="dark-contrast"] {
color-scheme: dark !important;
--color-background-100: 7, 7, 7; /* primary bg */
--color-background-90: 11, 11, 11; /* secondary bg */
--color-background-80: 23, 23, 23; /* tertiary bg */
}
[data-theme="dark"] {
--color-text-100: 229, 229, 229; /* primary text */
--color-text-200: 163, 163, 163; /* secondary text */
--color-text-300: 115, 115, 115; /* tertiary text */
--color-text-400: 82, 82, 82; /* placeholder text */
--color-border-100: 34, 34, 34; /* subtle border= 1 */
--color-border-200: 38, 38, 38; /* subtle border- 2 */
--color-border-300: 46, 46, 46; /* strong border- 1 */
--color-border-400: 58, 58, 58; /* strong border- 2 */
}
[data-theme="dark-contrast"] {
--color-text-100: 250, 250, 250; /* primary text */
--color-text-200: 241, 241, 241; /* secondary text */
--color-text-300: 212, 212, 212; /* tertiary text */
--color-text-400: 115, 115, 115; /* placeholder text */
--color-border-100: 245, 245, 245; /* subtle border= 1 */
--color-border-200: 229, 229, 229; /* subtle border- 2 */
--color-border-300: 212, 212, 212; /* strong border- 1 */
--color-border-400: 185, 185, 185; /* strong border- 2 */
}
[data-theme="light"],
[data-theme="dark"],
[data-theme="light-contrast"],
[data-theme="dark-contrast"] {
--color-primary-10: 236, 241, 255;
--color-primary-20: 217, 228, 255;
--color-primary-30: 197, 214, 255;
@ -42,122 +143,19 @@
--color-primary-800: 19, 35, 76;
--color-primary-900: 13, 24, 51;
/* default theme- light */
--color-background-100: 255, 255, 255; /* primary bg */
--color-background-90: 250, 250, 250; /* secondary bg */
--color-background-80: 245, 245, 245; /* tertiary bg */
--color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
--color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
--color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
--color-text-100: 23, 23, 23; /* primary text */
--color-text-200: 82, 82, 82; /* secondary text */
--color-text-300: 115, 115, 115; /* tertiary text */
--color-text-400: 163, 163, 163; /* placeholder text */
--color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
--color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
--color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
--color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
--color-border-100: 245, 245, 245; /* subtle border= 1 */
--color-border-200: 229, 229, 229; /* subtle border- 2 */
--color-border-300: 212, 212, 212; /* strong border- 1 */
--color-border-400: 185, 185, 185; /* strong border- 2 */
--color-sidebar-background-100: 255, 255, 255; /* primary sidebar bg */
--color-sidebar-background-90: 250, 250, 250; /* secondary sidebar bg */
--color-sidebar-background-80: 245, 245, 245; /* tertiary sidebar bg */
--color-sidebar-text-100: 23, 23, 23; /* primary sidebar text */
--color-sidebar-text-200: 82, 82, 82; /* secondary sidebar text */
--color-sidebar-text-300: 115, 115, 115; /* tertiary sidebar text */
--color-sidebar-text-400: 163, 163, 163; /* sidebar placeholder text */
--color-sidebar-border-100: 245, 245, 245; /* subtle sidebar border= 1 */
--color-sidebar-border-200: 229, 229, 229; /* subtle sidebar border- 2 */
--color-sidebar-border-300: 212, 212, 212; /* strong sidebar border- 1 */
--color-sidebar-border-400: 185, 185, 185; /* strong sidebar border- 2 */
}
[data-theme="dark"] {
color-scheme: dark !important;
--color-background-100: 7, 7, 7; /* primary bg */
--color-background-90: 11, 11, 11; /* secondary bg */
--color-background-80: 23, 23, 23; /* tertiary bg */
--color-text-100: 241, 241, 241; /* primary text */
--color-text-200: 115, 115, 115; /* secondary text */
--color-text-300: 163, 163, 163; /* tertiary text */
--color-text-400: 82, 82, 82; /* placeholder text */
--color-border-100: 34, 34, 34; /* subtle border= 1 */
--color-border-200: 38, 38, 38; /* subtle border- 2 */
--color-border-300: 46, 46, 46; /* strong border- 1 */
--color-border-400: 58, 58, 58; /* strong border- 2 */
--color-sidebar-background-100: 7, 7, 7; /* primary sidebar bg */
--color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
--color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
--color-sidebar-text-100: 241, 241, 241; /* primary sidebar text */
--color-sidebar-text-200: 115, 115, 115; /* secondary sidebar text */
--color-sidebar-text-300: 163, 163, 163; /* tertiary sidebar text */
--color-sidebar-text-400: 82, 82, 82; /* sidebar placeholder text */
--color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
--color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */
--color-sidebar-border-300: 46, 46, 46; /* strong sidebar border- 1 */
--color-sidebar-border-400: 58, 58, 58; /* strong sidebar border- 2 */
}
[data-theme="light-contrast"] {
color-scheme: light !important;
--color-text-100: 11, 11, 11; /* primary text */
--color-text-200: 38, 38, 38; /* secondary text */
--color-text-300: 58, 58, 58; /* tertiary text */
--color-text-400: 115, 115, 115; /* placeholder text */
--color-border-100: 34, 34, 34; /* subtle border= 1 */
--color-border-200: 38, 38, 38; /* subtle border- 2 */
--color-border-300: 46, 46, 46; /* strong border- 1 */
--color-border-400: 58, 58, 58; /* strong border- 2 */
--color-sidebar-text-100: 11, 11, 11; /* primary sidebar text */
--color-sidebar-text-200: 38, 38, 38; /* secondary sidebar text */
--color-sidebar-text-300: 58, 58, 58; /* tertiary sidebar text */
--color-sidebar-text-400: 115, 115, 115; /* sidebar placeholder text */
--color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
--color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */
--color-sidebar-border-300: 46, 46, 46; /* strong sidebar border- 1 */
--color-sidebar-border-400: 58, 58, 58; /* strong sidebar border- 2 */
}
[data-theme="dark-contrast"] {
color-scheme: dark !important;
--color-background-100: 7, 7, 7; /* primary bg */
--color-background-90: 11, 11, 11; /* secondary bg */
--color-background-80: 23, 23, 23; /* tertiary bg */
--color-text-100: 250, 250, 250; /* primary text */
--color-text-200: 241, 241, 241; /* secondary text */
--color-text-300: 212, 212, 212; /* tertiary text */
--color-text-400: 115, 115, 115; /* placeholder text */
--color-border-100: 245, 245, 245; /* subtle border= 1 */
--color-border-200: 229, 229, 229; /* subtle border- 2 */
--color-border-300: 212, 212, 212; /* strong border- 1 */
--color-border-400: 185, 185, 185; /* strong border- 2 */
--color-sidebar-background-100: 7, 7, 7; /* primary sidebar bg */
--color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
--color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
--color-sidebar-text-100: 250, 250, 250; /* primary sidebar text */
--color-sidebar-text-200: 241, 241, 241; /* secondary sidebar text */
--color-sidebar-text-300: 212, 212, 212; /* tertiary sidebar text */
--color-sidebar-text-400: 115, 115, 115; /* sidebar placeholder text */
--color-sidebar-border-100: 245, 245, 245; /* subtle sidebar border= 1 */
--color-sidebar-border-200: 229, 229, 229; /* subtle sidebar border- 2 */
--color-sidebar-border-300: 212, 212, 212; /* strong sidebar border- 1 */
--color-sidebar-border-400: 185, 185, 185; /* strong sidebar border- 2 */
--color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
--color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
--color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
--color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
}
}