From 1c5d1542e84598b8da20e59823cf6ecfc18d9312 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 16 Aug 2023 14:11:07 +0530 Subject: [PATCH 1/6] fix: kanban card date select dropdown fix --- .../components/core/views/board-view/single-issue.tsx | 11 ++++++++++- apps/app/components/issues/view-select/due-date.tsx | 6 ++++++ apps/app/components/issues/view-select/start-date.tsx | 6 ++++++ apps/app/components/ui/datepicker.tsx | 6 ++++++ 4 files changed, 28 insertions(+), 1 deletion(-) diff --git a/apps/app/components/core/views/board-view/single-issue.tsx b/apps/app/components/core/views/board-view/single-issue.tsx index e87ea434f35..a754eddf008 100644 --- a/apps/app/components/core/views/board-view/single-issue.tsx +++ b/apps/app/components/core/views/board-view/single-issue.tsx @@ -88,6 +88,7 @@ export const SingleBoardIssue: React.FC = ({ 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(null); @@ -304,7 +305,11 @@ export const SingleBoardIssue: React.FC = ({
{issue.name}
-
+
{properties.priority && ( = ({ setIsDropdownActive(true)} + handleOnClose={() => setIsDropdownActive(false)} user={user} isNotAllowed={isNotAllowed} /> @@ -335,6 +342,8 @@ export const SingleBoardIssue: React.FC = ({ setIsDropdownActive(true)} + handleOnClose={() => setIsDropdownActive(false)} user={user} isNotAllowed={isNotAllowed} /> diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx index 54b287a1e6c..5f5e5cbd053 100644 --- a/apps/app/components/issues/view-select/due-date.tsx +++ b/apps/app/components/issues/view-select/due-date.tsx @@ -13,6 +13,8 @@ import useIssuesView from "hooks/use-issues-view"; type Props = { issue: IIssue; partialUpdateIssue: (formData: Partial, issue: IIssue) => void; + handleOnOpen?: () => void; + handleOnClose?: () => void; tooltipPosition?: "top" | "bottom"; noBorder?: boolean; user: ICurrentUserResponse | undefined; @@ -22,6 +24,8 @@ type Props = { export const ViewDueDateSelect: React.FC = ({ issue, partialUpdateIssue, + handleOnOpen, + handleOnClose, tooltipPosition = "top", noBorder = false, user, @@ -80,6 +84,8 @@ export const ViewDueDateSelect: React.FC = ({ }`} minDate={minDate ?? undefined} noBorder={noBorder} + handleOnOpen={handleOnOpen} + handleOnClose={handleOnClose} disabled={isNotAllowed} />
diff --git a/apps/app/components/issues/view-select/start-date.tsx b/apps/app/components/issues/view-select/start-date.tsx index 29110eadb1a..8748567ae5e 100644 --- a/apps/app/components/issues/view-select/start-date.tsx +++ b/apps/app/components/issues/view-select/start-date.tsx @@ -13,6 +13,8 @@ import useIssuesView from "hooks/use-issues-view"; type Props = { issue: IIssue; partialUpdateIssue: (formData: Partial, issue: IIssue) => void; + handleOnOpen?: () => void; + handleOnClose?: () => void; tooltipPosition?: "top" | "bottom"; noBorder?: boolean; user: ICurrentUserResponse | undefined; @@ -22,6 +24,8 @@ type Props = { export const ViewStartDateSelect: React.FC = ({ issue, partialUpdateIssue, + handleOnOpen, + handleOnClose, tooltipPosition = "top", noBorder = false, user, @@ -72,6 +76,8 @@ export const ViewStartDateSelect: React.FC = ({ }`} maxDate={maxDate ?? undefined} noBorder={noBorder} + handleOnOpen={handleOnOpen} + handleOnClose={handleOnClose} disabled={isNotAllowed} />
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx index 831baec5165..f64a2e48162 100644 --- a/apps/app/components/ui/datepicker.tsx +++ b/apps/app/components/ui/datepicker.tsx @@ -8,6 +8,8 @@ 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; @@ -23,6 +25,8 @@ export const CustomDatePicker: React.FC = ({ renderAs = "button", value, onChange, + handleOnOpen, + handleOnClose, placeholder = "Select date", displayShortForm = false, error = false, @@ -40,6 +44,8 @@ export const CustomDatePicker: React.FC = ({ if (!val) onChange(null); else onChange(renderDateFormat(val)); }} + onCalendarOpen={handleOnOpen} + onCalendarClose={handleOnClose} className={`${ renderAs === "input" ? "block px-2 py-2 text-sm focus:outline-none" From 37185271a2d69acaf6f81de6b027f2a68367834f Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 16 Aug 2023 16:29:34 +0530 Subject: [PATCH 2/6] style: kanban card height and padding --- .../app/components/core/views/board-view/single-issue.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/app/components/core/views/board-view/single-issue.tsx b/apps/app/components/core/views/board-view/single-issue.tsx index a754eddf008..4a1f25fe03b 100644 --- a/apps/app/components/core/views/board-view/single-issue.tsx +++ b/apps/app/components/core/views/board-view/single-issue.tsx @@ -246,7 +246,7 @@ export const SingleBoardIssue: React.FC = ({ setContextMenuPosition({ x: e.pageX, y: e.pageY }); }} > -
+
{!isNotAllowed && (
= ({
)} - + {properties.key && ( -
+
{issue.project_detail.identifier}-{issue.sequence_id}
)} @@ -306,7 +306,7 @@ export const SingleBoardIssue: React.FC = ({
From d05fd63e8b7441b86931a847a0ad582833c81b0e Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 16 Aug 2023 17:09:29 +0530 Subject: [PATCH 3/6] style: create issue modal assignee --- apps/app/components/issues/select/assignee.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx index 989d071ec9a..603483f0f8f 100644 --- a/apps/app/components/issues/select/assignee.tsx +++ b/apps/app/components/issues/select/assignee.tsx @@ -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"; @@ -44,15 +42,15 @@ export const IssueAssigneeSelect: React.FC = ({ projectId, value = [], on value={value} onChange={onChange} options={options} - label={ -
+ customButton={ +
{value && value.length > 0 && Array.isArray(value) ? ( -
+
) : ( -
- +
+ Assignee
)} From 5dfd59b3fc788e1512bde74b475bf1b54cee13d8 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 16 Aug 2023 17:15:17 +0530 Subject: [PATCH 4/6] style: create issue modal label --- apps/app/components/issues/select/label.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx index 6d7e2f39156..b15a6f9c6c5 100644 --- a/apps/app/components/issues/select/label.tsx +++ b/apps/app/components/issues/select/label.tsx @@ -59,9 +59,9 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, > {({ open }: any) => ( <> - + {value && value.length > 0 ? ( - + issueLabels?.find((l) => l.id === v)?.color) ?? []} length={3} @@ -69,7 +69,7 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, /> ) : ( - + Label From 06339106ed4af416b3dc49d842802f72a1a1675f Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 16 Aug 2023 17:46:43 +0530 Subject: [PATCH 5/6] style: date picker button theming and issue sidebar date select width adjustment --- apps/app/components/issues/sidebar.tsx | 6 ++++-- apps/app/components/ui/datepicker.tsx | 3 +++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx index c396750e5a2..7925be16719 100644 --- a/apps/app/components/issues/sidebar.tsx +++ b/apps/app/components/issues/sidebar.tsx @@ -396,7 +396,8 @@ export const IssueDetailsSidebar: React.FC = ({ start_date: val, }) } - className="bg-custom-background-90 w-full" + className="bg-custom-background-100" + wrapperClassName="w-full" maxDate={maxDate ?? undefined} disabled={isNotAllowed || uneditable} /> @@ -424,7 +425,8 @@ export const IssueDetailsSidebar: React.FC = ({ target_date: val, }) } - className="bg-custom-background-90 w-full" + className="bg-custom-background-100" + wrapperClassName="w-full" minDate={minDate ?? undefined} disabled={isNotAllowed || uneditable} /> diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx index f64a2e48162..3bb0d3a1ddf 100644 --- a/apps/app/components/ui/datepicker.tsx +++ b/apps/app/components/ui/datepicker.tsx @@ -14,6 +14,7 @@ type Props = { displayShortForm?: boolean; error?: boolean; noBorder?: boolean; + wrapperClassName?: string; className?: string; isClearable?: boolean; disabled?: boolean; @@ -31,6 +32,7 @@ export const CustomDatePicker: React.FC = ({ displayShortForm = false, error = false, noBorder = false, + wrapperClassName = "", className = "", isClearable = true, disabled = false, @@ -46,6 +48,7 @@ export const CustomDatePicker: React.FC = ({ }} onCalendarOpen={handleOnOpen} onCalendarClose={handleOnClose} + wrapperClassName={wrapperClassName} className={`${ renderAs === "input" ? "block px-2 py-2 text-sm focus:outline-none" From eec73904a0de5afbe3b96b75a061959b06a2f54c Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Fri, 18 Aug 2023 10:52:49 +0530 Subject: [PATCH 6/6] style: tip tap editor shadow fix --- apps/app/components/issues/comment/add-comment.tsx | 2 +- apps/app/components/issues/comment/comment-card.tsx | 2 +- apps/app/components/issues/description-form.tsx | 2 +- apps/app/components/tiptap/index.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx index 1dc75a7a6e4..15b67b157ad 100644 --- a/apps/app/components/issues/comment/add-comment.tsx +++ b/apps/app/components/issues/comment/add-comment.tsx @@ -101,7 +101,7 @@ export const AddComment: React.FC = ({ 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); diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx index 08ea0f1d5c3..02dbe9b0b17 100644 --- a/apps/app/components/issues/comment/comment-card.tsx +++ b/apps/app/components/issues/comment/comment-card.tsx @@ -106,7 +106,7 @@ export const CommentCard: React.FC = ({ 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); diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx index c0c6157a2f6..553a9fa7a6c 100644 --- a/apps/app/components/issues/description-form.tsx +++ b/apps/app/components/issues/description-form.tsx @@ -141,7 +141,7 @@ export const IssueDescriptionForm: FC = ({ } 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"); diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx index 0ecaf69b06c..72a914bc90f 100644 --- a/apps/app/components/tiptap/index.tsx +++ b/apps/app/components/tiptap/index.tsx @@ -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}`;