Skip to content

Commit

Permalink
fix: ui improvement and bug fixes (#1883)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anmolsinghbhatia
anmolsinghbhatia committed Aug 18, 2023
1 parent e593a8d commit d74ec7b
Show file tree
Hide file tree
Showing 11 changed files with 51 additions and 21 deletions.
17 changes: 13 additions & 4 deletions apps/app/components/core/views/board-view/single-issue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
const [contextMenu, setContextMenu] = useState(false);
const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
const [isMenuActive, setIsMenuActive] = useState(false);
const [isDropdownActive, setIsDropdownActive] = useState(false);

const actionSectionRef = useRef<HTMLDivElement | null>(null);

Expand Down Expand Up @@ -245,7 +246,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
setContextMenuPosition({ x: e.pageX, y: e.pageY });
}}
>
<div className="group/card relative select-none p-3.5">
<div className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px]">
{!isNotAllowed && (
<div
ref={actionSectionRef}
Expand Down Expand Up @@ -295,16 +296,20 @@ export const SingleBoardIssue: React.FC<Props> = ({
</div>
)}
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
<a>
<a className="flex flex-col gap-1.5">
{properties.key && (
<div className="mb-2.5 text-xs font-medium text-custom-text-200">
<div className="text-xs font-medium text-custom-text-200">
{issue.project_detail.identifier}-{issue.sequence_id}
</div>
)}
<h5 className="text-sm break-words line-clamp-2">{issue.name}</h5>
</a>
</Link>
<div className="mt-2.5 flex overflow-x-scroll items-center gap-2 text-xs">
<div
className={`flex items-center gap-2 text-xs ${
isDropdownActive ? "" : "overflow-x-scroll"
}`}
>
{properties.priority && (
<ViewPrioritySelect
issue={issue}
Expand All @@ -327,6 +332,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
<ViewStartDateSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
handleOnOpen={() => setIsDropdownActive(true)}
handleOnClose={() => setIsDropdownActive(false)}
user={user}
isNotAllowed={isNotAllowed}
/>
Expand All @@ -335,6 +342,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
<ViewDueDateSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
handleOnOpen={() => setIsDropdownActive(true)}
handleOnClose={() => setIsDropdownActive(false)}
user={user}
isNotAllowed={isNotAllowed}
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/issues/comment/add-comment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
? watch("comment_html")
: value
}
customClassName="p-3 min-h-[50px]"
customClassName="p-3 min-h-[50px] shadow-sm"
debouncedUpdatesEnabled={false}
onChange={(comment_json: Object, comment_html: string) => {
onChange(comment_html);
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/issues/comment/comment-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
ref={editorRef}
value={watch("comment_html")}
debouncedUpdatesEnabled={false}
customClassName="min-h-[50px] p-3"
customClassName="min-h-[50px] p-3 shadow-sm"
onChange={(comment_json: Object, comment_html: string) => {
setValue("comment_json", comment_json);
setValue("comment_html", comment_html);
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/issues/description-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
}
debouncedUpdatesEnabled={true}
setIsSubmitting={setIsSubmitting}
customClassName="min-h-[150px]"
customClassName="min-h-[150px] shadow-sm"
editorContentCustomClassNames="pb-9"
onChange={(description: Object, description_html: string) => {
setIsSubmitting("submitting");
Expand Down
14 changes: 6 additions & 8 deletions apps/app/components/issues/select/assignee.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import useSWR from "swr";
// services
import projectServices from "services/project.service";
// ui
import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
// icons
import { UserGroupIcon } from "@heroicons/react/24/outline";
import { AssigneesList, Avatar, CustomSearchSelect, Icon } from "components/ui";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";

Expand Down Expand Up @@ -44,15 +42,15 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
value={value}
onChange={onChange}
options={options}
label={
<div className="flex items-center gap-2 text-custom-text-200">
customButton={
<div className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
{value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center justify-center gap-2">
<div className="-my-0.5 flex items-center justify-center gap-2">
<AssigneesList userIds={value} length={3} showLength={true} />
</div>
) : (
<div className="flex items-center justify-center gap-2">
<UserGroupIcon className="h-4 w-4 text-custom-text-200" />
<div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300">
<Icon iconName="person" className="!text-base !leading-4" />
<span className="text-custom-text-200">Assignee</span>
</div>
)}
Expand Down
6 changes: 3 additions & 3 deletions apps/app/components/issues/select/label.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,17 +59,17 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
>
{({ open }: any) => (
<>
<Combobox.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200 hover:bg-custom-background-80">
<Combobox.Button className="flex cursor-pointer items-center text-xs">
{value && value.length > 0 ? (
<span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs">
<IssueLabelsList
labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
length={3}
showLength={true}
/>
</span>
) : (
<span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs">
<span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs rounded-md border border-custom-border-200 shadow-sm duration-200 hover:bg-custom-background-80">
<TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
<span className=" text-custom-text-200">Label</span>
</span>
Expand Down
6 changes: 4 additions & 2 deletions apps/app/components/issues/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,7 +396,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
start_date: val,
})
}
className="bg-custom-background-90 w-full"
className="bg-custom-background-100"
wrapperClassName="w-full"
maxDate={maxDate ?? undefined}
disabled={isNotAllowed || uneditable}
/>
Expand Down Expand Up @@ -424,7 +425,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
target_date: val,
})
}
className="bg-custom-background-90 w-full"
className="bg-custom-background-100"
wrapperClassName="w-full"
minDate={minDate ?? undefined}
disabled={isNotAllowed || uneditable}
/>
Expand Down
6 changes: 6 additions & 0 deletions apps/app/components/issues/view-select/due-date.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import useIssuesView from "hooks/use-issues-view";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
handleOnOpen?: () => void;
handleOnClose?: () => void;
tooltipPosition?: "top" | "bottom";
noBorder?: boolean;
user: ICurrentUserResponse | undefined;
Expand All @@ -22,6 +24,8 @@ type Props = {
export const ViewDueDateSelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
handleOnOpen,
handleOnClose,
tooltipPosition = "top",
noBorder = false,
user,
Expand Down Expand Up @@ -80,6 +84,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
}`}
minDate={minDate ?? undefined}
noBorder={noBorder}
handleOnOpen={handleOnOpen}
handleOnClose={handleOnClose}
disabled={isNotAllowed}
/>
</div>
Expand Down
6 changes: 6 additions & 0 deletions apps/app/components/issues/view-select/start-date.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import useIssuesView from "hooks/use-issues-view";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
handleOnOpen?: () => void;
handleOnClose?: () => void;
tooltipPosition?: "top" | "bottom";
noBorder?: boolean;
user: ICurrentUserResponse | undefined;
Expand All @@ -22,6 +24,8 @@ type Props = {
export const ViewStartDateSelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
handleOnOpen,
handleOnClose,
tooltipPosition = "top",
noBorder = false,
user,
Expand Down Expand Up @@ -72,6 +76,8 @@ export const ViewStartDateSelect: React.FC<Props> = ({
}`}
maxDate={maxDate ?? undefined}
noBorder={noBorder}
handleOnOpen={handleOnOpen}
handleOnClose={handleOnClose}
disabled={isNotAllowed}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/tiptap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
}, 500);
}, 1000);

const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg sm:shadow-lg mt-2 p-3 relative focus:outline-none rounded-md
const editorClassNames = `relative w-full max-w-screen-lg mt-2 p-3 relative focus:outline-none rounded-lg
${noBorder ? "" : "border border-custom-border-200"} ${
borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
} ${customClassName}`;
Expand Down
9 changes: 9 additions & 0 deletions apps/app/components/ui/datepicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@ type Props = {
renderAs?: "input" | "button";
value: Date | string | null | undefined;
onChange: (val: string | null) => void;
handleOnOpen?: () => void;
handleOnClose?: () => void;
placeholder?: string;
displayShortForm?: boolean;
error?: boolean;
noBorder?: boolean;
wrapperClassName?: string;
className?: string;
isClearable?: boolean;
disabled?: boolean;
Expand All @@ -23,10 +26,13 @@ export const CustomDatePicker: React.FC<Props> = ({
renderAs = "button",
value,
onChange,
handleOnOpen,
handleOnClose,
placeholder = "Select date",
displayShortForm = false,
error = false,
noBorder = false,
wrapperClassName = "",
className = "",
isClearable = true,
disabled = false,
Expand All @@ -40,6 +46,9 @@ export const CustomDatePicker: React.FC<Props> = ({
if (!val) onChange(null);
else onChange(renderDateFormat(val));
}}
onCalendarOpen={handleOnOpen}
onCalendarClose={handleOnClose}
wrapperClassName={wrapperClassName}
className={`${
renderAs === "input"
? "block px-2 py-2 text-sm focus:outline-none"
Expand Down

1 comment on commit d74ec7b

@vercel
Copy link

@vercel vercel bot commented on d74ec7b Aug 18, 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 – ./apps/app

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

Please sign in to comment.