Skip to content

Commit

Permalink
fix: ui and bugs (#2289)
Browse files Browse the repository at this point in the history 
* fix: 24 character limit on first & last name in onboarding page

* fix: no option: 'Add Issue' in archive issue page

* fix: in archive issue directly sending to issue detail page

* fix: issue type showing in archive issue

* fix: custom menu overflowing

* fix: changing subscriber in filters has no effect

* style: border in quick-add

* fix: on onboarding member role overflowing

* fix: inconsistent icons in issue detail

* style: spacing, borders and shadows in quick-add

* fix: custom menu truncate
  • Loading branch information
@dakshesh14
dakshesh14 authored Sep 28, 2023
1 parent 60a69e2 commit ec91a0d
Show file tree
Hide file tree
Showing 27 changed files with 289 additions and 158 deletions.
84 changes: 54 additions & 30 deletions web/components/core/activity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,27 @@ import useEstimateOption from "hooks/use-estimate-option";
import issuesService from "services/issues.service";
// icons
import { Icon, Tooltip } from "components/ui";
import { CopyPlus } from "lucide-react";
import { Squares2X2Icon } from "@heroicons/react/24/outline";
import { BlockedIcon, BlockerIcon, RelatedIcon } from "components/icons";
import {
TagIcon,
CopyPlus,
Calendar,
Link2Icon,
RocketIcon,
Users2Icon,
ArchiveIcon,
PaperclipIcon,
ContrastIcon,
TriangleIcon,
LayoutGridIcon,
SignalMediumIcon,
MessageSquareIcon,
} from "lucide-react";
import {
BlockedIcon,
BlockerIcon,
RelatedIcon,
StackedLayersHorizontalIcon,
} from "components/icons";
// helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { capitalizeFirstLetter } from "helpers/string.helper";
Expand Down Expand Up @@ -38,7 +56,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
{activity.issue_detail
? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
: "Issue"}
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
</Tooltip>
);
Expand Down Expand Up @@ -131,14 +149,14 @@ const activityDetails: {
</>
);
},
icon: <Icon iconName="group" className="!text-2xl" aria-hidden="true" />,
icon: <Users2Icon size={12} color="#6b7280" aria-hidden="true" />,
},
archived_at: {
message: (activity) => {
if (activity.new_value === "restore") return "restored the issue.";
else return "archived the issue.";
},
icon: <Icon iconName="archive" className="!text-2xl" aria-hidden="true" />,
icon: <ArchiveIcon size={12} color="#6b7280" aria-hidden="true" />,
},
attachment: {
message: (activity, showIssue) => {
Expand All @@ -153,7 +171,7 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
attachment
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
{showIssue && (
<>
Expand All @@ -177,7 +195,7 @@ const activityDetails: {
</>
);
},
icon: <Icon iconName="attach_file" className="!text-2xl" aria-hidden="true" />,
icon: <PaperclipIcon size={12} color="#6b7280" aria-hidden="true" />,
},
blocking: {
message: (activity) => {
Expand Down Expand Up @@ -268,7 +286,7 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
</>
);
Expand All @@ -283,7 +301,7 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
</>
);
Expand All @@ -298,12 +316,12 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.old_value}
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
</>
);
},
icon: <Icon iconName="contrast" className="!text-2xl" aria-hidden="true" />,
icon: <ContrastIcon size={12} color="#6b7280" aria-hidden="true" />,
},
description: {
message: (activity, showIssue) => (
Expand All @@ -318,7 +336,7 @@ const activityDetails: {
.
</>
),
icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
},
estimate_point: {
message: (activity, showIssue) => {
Expand Down Expand Up @@ -349,14 +367,14 @@ const activityDetails: {
</>
);
},
icon: <Icon iconName="change_history" className="!text-2xl" aria-hidden="true" />,
icon: <TriangleIcon size={12} color="#6b7280" aria-hidden="true" />,
},
issue: {
message: (activity) => {
if (activity.verb === "created") return "created the issue.";
else return "deleted an issue.";
},
icon: <Icon iconName="stack" className="!text-2xl" aria-hidden="true" />,
icon: <StackedLayersHorizontalIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
},
labels: {
message: (activity, showIssue) => {
Expand Down Expand Up @@ -393,7 +411,7 @@ const activityDetails: {
</>
);
},
icon: <Icon iconName="sell" className="!text-2xl" aria-hidden="true" />,
icon: <TagIcon size={12} color="#6b7280" aria-hidden="true" />,
},
link: {
message: (activity, showIssue) => {
Expand All @@ -408,7 +426,7 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
link
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
{showIssue && (
<>
Expand All @@ -430,7 +448,7 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
link
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
{showIssue && (
<>
Expand All @@ -452,7 +470,7 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
link
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
{showIssue && (
<>
Expand All @@ -464,7 +482,7 @@ const activityDetails: {
</>
);
},
icon: <Icon iconName="link" className="!text-2xl" aria-hidden="true" />,
icon: <Link2Icon size={12} color="#6b7280" aria-hidden="true" />,
},
modules: {
message: (activity, showIssue, workspaceSlug) => {
Expand All @@ -479,7 +497,7 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
</>
);
Expand All @@ -494,7 +512,7 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
</>
);
Expand All @@ -509,12 +527,12 @@ const activityDetails: {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.old_value}
<Icon iconName="launch" className="!text-xs" />
<RocketIcon size={12} color="#6b7280" />
</a>
</>
);
},
icon: <Icon iconName="dataset" className="!text-2xl" aria-hidden="true" />,
icon: <Icon iconName="dataset" className="!text-xs !text-[#6b7280]" aria-hidden="true" />,
},
name: {
message: (activity, showIssue) => (
Expand All @@ -529,7 +547,7 @@ const activityDetails: {
.
</>
),
icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
},
parent: {
message: (activity, showIssue) => {
Expand Down Expand Up @@ -562,7 +580,13 @@ const activityDetails: {
</>
);
},
icon: <Icon iconName="supervised_user_circle" className="!text-2xl" aria-hidden="true" />,
icon: (
<Icon
iconName="supervised_user_circle"
className="!text-xs !text-[#6b7280]"
aria-hidden="true"
/>
),
},
priority: {
message: (activity, showIssue) => (
Expand All @@ -580,7 +604,7 @@ const activityDetails: {
.
</>
),
icon: <Icon iconName="signal_cellular_alt" className="!text-2xl" aria-hidden="true" />,
icon: <SignalMediumIcon size={12} color="#6b7280" aria-hidden="true" />,
},
start_date: {
message: (activity, showIssue) => {
Expand Down Expand Up @@ -614,7 +638,7 @@ const activityDetails: {
</>
);
},
icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
},
state: {
message: (activity, showIssue) => (
Expand All @@ -630,7 +654,7 @@ const activityDetails: {
.
</>
),
icon: <Squares2X2Icon className="h-6 w-6 text-custom-sidebar-200" aria-hidden="true" />,
icon: <LayoutGridIcon size={12} color="#6b7280" aria-hidden="true" />,
},
target_date: {
message: (activity, showIssue) => {
Expand Down Expand Up @@ -664,7 +688,7 @@ const activityDetails: {
</>
);
},
icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
},
};

Expand Down
4 changes: 3 additions & 1 deletion web/components/core/filters/filters-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,9 @@ export const FiltersList: React.FC<Props> = ({
className="cursor-pointer"
onClick={() =>
setFilters({
assignees: filters.assignees?.filter((p: any) => p !== memberId),
subscriber: filters.subscriber?.filter(
(p: any) => p !== memberId
),
})
}
>
Expand Down
54 changes: 28 additions & 26 deletions web/components/core/filters/issues-view-filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,33 +277,35 @@ export const IssuesFilterView: React.FC = () => {
</div>
</div>
)}
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Issue type</h4>
<div className="w-28">
<CustomMenu
label={
FILTER_ISSUE_OPTIONS.find(
(option) => option.key === displayFilters.type
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{FILTER_ISSUE_OPTIONS.map((option) => (
<CustomMenu.MenuItem
key={option.key}
onClick={() =>
setDisplayFilters({
type: option.key,
})
}
>
{option.name}
</CustomMenu.MenuItem>
))}
</CustomMenu>
{!isArchivedIssues && (
<div className="flex items-center justify-between">
<h4 className="text-custom-text-200">Issue type</h4>
<div className="w-28">
<CustomMenu
label={
FILTER_ISSUE_OPTIONS.find(
(option) => option.key === displayFilters.type
)?.name ?? "Select"
}
className="!w-full"
buttonClassName="w-full"
>
{FILTER_ISSUE_OPTIONS.map((option) => (
<CustomMenu.MenuItem
key={option.key}
onClick={() =>
setDisplayFilters({
type: option.key,
})
}
>
{option.name}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
</div>
</div>
)}

{displayFilters.layout !== "calendar" &&
displayFilters.layout !== "spreadsheet" && (
Expand Down
2 changes: 1 addition & 1 deletion web/components/core/views/board-view/inline-create-issue-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const InlineInput = () => {
export const BoardInlineCreateIssueForm: React.FC<Props> = (props) => (
<>
<InlineCreateIssueFormWrapper
className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
className="flex flex-col border-[0.5px] border-custom-border-100 justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
{...props}
>
<InlineInput />
Expand Down
4 changes: 2 additions & 2 deletions web/components/core/views/calendar-view/inline-create-issue-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const InlineInput = () => {
{...register("name", {
required: "Issue title is required.",
})}
className="w-full pr-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
className="w-full pr-2 py-2.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
/>
</>
);
Expand All @@ -90,7 +90,7 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
>
<InlineCreateIssueFormWrapper
{...props}
className="flex w-full p-1 px-1.5 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
className="flex w-full px-1.5 border-[0.5px] border-custom-border-100 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
>
<InlineInput />
</InlineCreateIssueFormWrapper>
Expand Down
2 changes: 1 addition & 1 deletion web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const InlineInput = () => {
export const GanttInlineCreateIssueForm: React.FC<Props> = (props) => (
<>
<InlineCreateIssueFormWrapper
className="flex py-3 px-4 mr-2.5 items-center rounded gap-x-2 border bg-custom-background-100 shadow-custom-shadow-sm"
className="flex py-3 px-4 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm"
{...props}
>
<InlineInput />
Expand Down
5 changes: 4 additions & 1 deletion web/components/core/views/issues-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ export const IssuesView: React.FC<Props> = ({

const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
const isDraftIssues = router.asPath.includes("draft-issues");

const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
const isArchivedIssues = router.pathname?.split("/")?.[4] === "archived-issues";

const { user } = useUserAuth();

Expand Down Expand Up @@ -625,6 +627,7 @@ export const IssuesView: React.FC<Props> = ({
params,
properties,
}}
disableAddIssueOption={isArchivedIssues}
/>
</>
);
Expand Down
Loading

2 comments on commit ec91a0d

@vercel
Copy link

@vercel vercel bot commented on ec91a0d Sep 28, 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:

plane-sh-dev – ./space/

plane-space-dev.vercel.app
plane-sh-dev-plane.vercel.app
plane-sh-dev-git-develop-plane.vercel.app

@vercel
Copy link

@vercel vercel bot commented on ec91a0d Sep 28, 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:

plane-dev – ./web/

plane-dev-git-develop-plane.vercel.app
plane-dev-plane.vercel.app
plane-dev.vercel.app

Please sign in to comment.