From 1dce72cb3cb1d602734db10cad257cbfa5a5167e Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Mon, 6 Nov 2023 20:43:34 +0530 Subject: [PATCH] style: updated layouts UI in the space app (#2671) * style: updated layouts UI in space * fix: build error --- space/components/icons/index.ts | 1 - .../icons/state-group/backlog-state-icon.tsx | 23 ------ .../state-group/cancelled-state-icon.tsx | 74 ------------------- .../state-group/completed-state-icon.tsx | 65 ---------------- space/components/icons/state-group/index.ts | 6 -- .../icons/state-group/started-state-icon.tsx | 73 ------------------ .../icons/state-group/state-group-icon.tsx | 29 -------- .../state-group/unstarted-state-icon.tsx | 55 -------------- space/components/icons/types.d.ts | 6 -- .../issues/board-views/block-state.tsx | 4 +- .../issues/board-views/kanban/block.tsx | 3 +- .../issues/board-views/kanban/header.tsx | 12 +-- .../issues/board-views/list/block.tsx | 6 +- .../issues/board-views/list/header.tsx | 14 ++-- .../issues/board-views/list/index.tsx | 4 +- .../peek-overview/comment/add-comment.tsx | 34 +++++---- web/components/issues/comment/add-comment.tsx | 17 +++-- .../issues/issue-layouts/kanban/block.tsx | 2 +- .../issues/issue-layouts/kanban/default.tsx | 2 +- .../kanban/headers/state-group.tsx | 2 +- .../activity/comment-editor.tsx | 1 + .../issues/issue-peek-overview/view.tsx | 2 +- 22 files changed, 56 insertions(+), 379 deletions(-) delete mode 100644 space/components/icons/index.ts delete mode 100644 space/components/icons/state-group/backlog-state-icon.tsx delete mode 100644 space/components/icons/state-group/cancelled-state-icon.tsx delete mode 100644 space/components/icons/state-group/completed-state-icon.tsx delete mode 100644 space/components/icons/state-group/index.ts delete mode 100644 space/components/icons/state-group/started-state-icon.tsx delete mode 100644 space/components/icons/state-group/state-group-icon.tsx delete mode 100644 space/components/icons/state-group/unstarted-state-icon.tsx delete mode 100644 space/components/icons/types.d.ts diff --git a/space/components/icons/index.ts b/space/components/icons/index.ts deleted file mode 100644 index 28162f591..000000000 --- a/space/components/icons/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./state-group"; diff --git a/space/components/icons/state-group/backlog-state-icon.tsx b/space/components/icons/state-group/backlog-state-icon.tsx deleted file mode 100644 index f2f62d24a..000000000 --- a/space/components/icons/state-group/backlog-state-icon.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -// types -import type { Props } from "../types"; -// constants -import { issueGroupColors } from "constants/data"; - -export const BacklogStateIcon: React.FC = ({ - width = "14", - height = "14", - className, - color = issueGroupColors["backlog"], -}) => ( - - - -); diff --git a/space/components/icons/state-group/cancelled-state-icon.tsx b/space/components/icons/state-group/cancelled-state-icon.tsx deleted file mode 100644 index e244c191a..000000000 --- a/space/components/icons/state-group/cancelled-state-icon.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from "react"; -// types -import type { Props } from "../types"; -// constants -import { issueGroupColors } from "constants/data"; - -export const CancelledStateIcon: React.FC = ({ - width = "14", - height = "14", - className, - color = issueGroupColors["cancelled"], -}) => ( - - - - - - - - - - - - - -); diff --git a/space/components/icons/state-group/completed-state-icon.tsx b/space/components/icons/state-group/completed-state-icon.tsx deleted file mode 100644 index 417ebbf3f..000000000 --- a/space/components/icons/state-group/completed-state-icon.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react"; -// types -import type { Props } from "../types"; -// constants -import { issueGroupColors } from "constants/data"; - -export const CompletedStateIcon: React.FC = ({ - width = "14", - height = "14", - className, - color = issueGroupColors["completed"], -}) => ( - - - - - - - - - - - - -); diff --git a/space/components/icons/state-group/index.ts b/space/components/icons/state-group/index.ts deleted file mode 100644 index 6ede38df6..000000000 --- a/space/components/icons/state-group/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from "./backlog-state-icon"; -export * from "./cancelled-state-icon"; -export * from "./completed-state-icon"; -export * from "./started-state-icon"; -export * from "./state-group-icon"; -export * from "./unstarted-state-icon"; diff --git a/space/components/icons/state-group/started-state-icon.tsx b/space/components/icons/state-group/started-state-icon.tsx deleted file mode 100644 index 4ebd1771f..000000000 --- a/space/components/icons/state-group/started-state-icon.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from "react"; -// types -import type { Props } from "../types"; -// constants -import { issueGroupColors } from "constants/data"; - -export const StartedStateIcon: React.FC = ({ - width = "14", - height = "14", - className, - color = issueGroupColors["started"], -}) => ( - - - - - - - - - - - - -); diff --git a/space/components/icons/state-group/state-group-icon.tsx b/space/components/icons/state-group/state-group-icon.tsx deleted file mode 100644 index 1af523400..000000000 --- a/space/components/icons/state-group/state-group-icon.tsx +++ /dev/null @@ -1,29 +0,0 @@ -// icons -import { - BacklogStateIcon, - CancelledStateIcon, - CompletedStateIcon, - StartedStateIcon, - UnstartedStateIcon, -} from "components/icons"; -import { TIssueGroupKey } from "types/issue"; - -type Props = { - stateGroup: TIssueGroupKey; - color: string; - className?: string; - height?: string; - width?: string; -}; - -export const StateGroupIcon: React.FC = ({ stateGroup, className, color, height = "12px", width = "12px" }) => { - if (stateGroup === "backlog") - return ; - else if (stateGroup === "cancelled") - return ; - else if (stateGroup === "completed") - return ; - else if (stateGroup === "started") - return ; - else return ; -}; diff --git a/space/components/icons/state-group/unstarted-state-icon.tsx b/space/components/icons/state-group/unstarted-state-icon.tsx deleted file mode 100644 index f79bc00fc..000000000 --- a/space/components/icons/state-group/unstarted-state-icon.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from "react"; -// types -import type { Props } from "../types"; -// constants -import { issueGroupColors } from "constants/data"; - -export const UnstartedStateIcon: React.FC = ({ - width = "14", - height = "14", - className, - color = issueGroupColors["unstarted"], -}) => ( - - - - - - - - - - -); diff --git a/space/components/icons/types.d.ts b/space/components/icons/types.d.ts deleted file mode 100644 index f82a18147..000000000 --- a/space/components/icons/types.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type Props = { - width?: string | number; - height?: string | number; - color?: string; - className?: string; -}; diff --git a/space/components/issues/board-views/block-state.tsx b/space/components/issues/board-views/block-state.tsx index 16792c81b..2daba1226 100644 --- a/space/components/issues/board-views/block-state.tsx +++ b/space/components/issues/board-views/block-state.tsx @@ -1,3 +1,5 @@ +// ui +import { StateGroupIcon } from "@plane/ui"; // constants import { issueGroupFilter } from "constants/data"; @@ -8,7 +10,7 @@ export const IssueBlockState = ({ state }: any) => { return (
- +
{state?.name}
diff --git a/space/components/issues/board-views/kanban/block.tsx b/space/components/issues/board-views/kanban/block.tsx index b4de76f2b..b2effc4ad 100644 --- a/space/components/issues/board-views/kanban/block.tsx +++ b/space/components/issues/board-views/kanban/block.tsx @@ -7,7 +7,6 @@ import { useMobxStore } from "lib/mobx/store-provider"; // components import { IssueBlockPriority } from "components/issues/board-views/block-priority"; import { IssueBlockState } from "components/issues/board-views/block-state"; -import { IssueBlockLabels } from "components/issues/board-views/block-labels"; import { IssueBlockDueDate } from "components/issues/board-views/block-due-date"; // interfaces import { IIssue } from "types/issue"; @@ -37,7 +36,7 @@ export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => { }; return ( -
+
{/* id */}
{projectStore?.project?.identifier}-{issue?.sequence_id} diff --git a/space/components/issues/board-views/kanban/header.tsx b/space/components/issues/board-views/kanban/header.tsx index 5645e2b3b..8f2f28496 100644 --- a/space/components/issues/board-views/kanban/header.tsx +++ b/space/components/issues/board-views/kanban/header.tsx @@ -4,8 +4,8 @@ import { observer } from "mobx-react-lite"; import { IIssueState } from "types/issue"; // constants import { issueGroupFilter } from "constants/data"; -// icons -import { StateGroupIcon } from "components/icons"; +// ui +import { StateGroupIcon } from "@plane/ui"; // mobx hook import { useMobxStore } from "lib/mobx/store-provider"; import { RootStore } from "store/root"; @@ -18,11 +18,11 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => { if (stateGroup === null) return <>; return ( -
-
- +
+
+
-
{state?.name}
+
{state?.name}
{store.issue.getCountOfIssuesByState(state.id)} diff --git a/space/components/issues/board-views/list/block.tsx b/space/components/issues/board-views/list/block.tsx index bdf39b84f..57011d033 100644 --- a/space/components/issues/board-views/list/block.tsx +++ b/space/components/issues/board-views/list/block.tsx @@ -38,10 +38,10 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => { }; return ( -
-
+
+
{/* id */} -
+
{projectStore?.project?.identifier}-{issue?.sequence_id}
{/* name */} diff --git a/space/components/issues/board-views/list/header.tsx b/space/components/issues/board-views/list/header.tsx index 83312e7b9..fc7e5ef61 100644 --- a/space/components/issues/board-views/list/header.tsx +++ b/space/components/issues/board-views/list/header.tsx @@ -2,8 +2,8 @@ import { observer } from "mobx-react-lite"; // interfaces import { IIssueState } from "types/issue"; -// icons -import { StateGroupIcon } from "components/icons"; +// ui +import { StateGroupIcon } from "@plane/ui"; // constants import { issueGroupFilter } from "constants/data"; // mobx hook @@ -18,12 +18,12 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => { if (stateGroup === null) return <>; return ( -
-
- +
+
+
-
{state?.name}
-
{store.issue.getCountOfIssuesByState(state.id)}
+
{state?.name}
+
{store.issue.getCountOfIssuesByState(state.id)}
); }); diff --git a/space/components/issues/board-views/list/index.tsx b/space/components/issues/board-views/list/index.tsx index 1c6900dd9..d6b11d026 100644 --- a/space/components/issues/board-views/list/index.tsx +++ b/space/components/issues/board-views/list/index.tsx @@ -27,9 +27,7 @@ export const IssueListView = observer(() => { ))}
) : ( -
- No Issues are available. -
+
No issues.
)}
))} diff --git a/space/components/issues/peek-overview/comment/add-comment.tsx b/space/components/issues/peek-overview/comment/add-comment.tsx index c7e7a468e..f70a2c5aa 100644 --- a/space/components/issues/peek-overview/comment/add-comment.tsx +++ b/space/components/issues/peek-overview/comment/add-comment.tsx @@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // ui -import { SecondaryButton } from "components/ui"; +import { Button } from "@plane/ui"; // types import { Comment } from "types/issue"; // components @@ -29,7 +29,6 @@ export const AddComment: React.FC = observer((props) => { const { handleSubmit, control, - setValue, watch, formState: { isSubmitting }, reset, @@ -85,27 +84,30 @@ export const AddComment: React.FC = observer((props) => { ? watch("comment_html") : value } - customClassName="p-3 min-h-[50px] shadow-sm" + customClassName="p-2" + editorContentCustomClassNames="min-h-[35px]" debouncedUpdatesEnabled={false} onChange={(comment_json: Object, comment_html: string) => { onChange(comment_html); }} + submitButton={ + + } /> )} /> - - { - userStore.requiredLogin(() => { - handleSubmit(onSubmit)(e); - }); - }} - type="submit" - disabled={isSubmitting || disabled} - className="mt-2" - > - {isSubmitting ? "Adding..." : "Comment"} -
); diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx index 4a022b578..28c986bc7 100644 --- a/web/components/issues/comment/add-comment.tsx +++ b/web/components/issues/comment/add-comment.tsx @@ -88,7 +88,8 @@ export const AddComment: React.FC = ({ disabled = false, onSubmit, showAc deleteFile={fileService.deleteImage} ref={editorRef} value={!commentValue || commentValue === "" ? "

" : commentValue} - customClassName="p-3 min-h-[100px] shadow-sm" + customClassName="p-2 h-full" + editorContentCustomClassNames="min-h-[35px]" debouncedUpdatesEnabled={false} onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)} commentAccessSpecifier={ @@ -98,15 +99,21 @@ export const AddComment: React.FC = ({ disabled = false, onSubmit, showAc } mentionSuggestions={editorSuggestions.mentionSuggestions} mentionHighlights={editorSuggestions.mentionHighlights} + submitButton={ + + } /> )} /> )} /> - -
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx index 34ed02382..d9165aa27 100644 --- a/web/components/issues/issue-layouts/kanban/block.tsx +++ b/web/components/issues/issue-layouts/kanban/block.tsx @@ -61,7 +61,7 @@ export const KanbanIssueBlock: React.FC = (props) => { )}
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx index 1e252895b..1f41cf39b 100644 --- a/web/components/issues/issue-layouts/kanban/default.tsx +++ b/web/components/issues/issue-layouts/kanban/default.tsx @@ -55,7 +55,7 @@ const GroupByKanBan: React.FC = observer((props) => { kanBanToggle?.groupByHeaderMinMax.includes(getValueFromObject(_list, listKey) as string); return ( -
+
{list && list.length > 0 && list.map((_list: any) => ( diff --git a/web/components/issues/issue-layouts/kanban/headers/state-group.tsx b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx index 33c70bddd..47d258c36 100644 --- a/web/components/issues/issue-layouts/kanban/headers/state-group.tsx +++ b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx @@ -17,7 +17,7 @@ export interface IStateGroupHeader { } export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => ( -
+
); diff --git a/web/components/issues/issue-peek-overview/activity/comment-editor.tsx b/web/components/issues/issue-peek-overview/activity/comment-editor.tsx index 91b3bf7f1..1eccfb33e 100644 --- a/web/components/issues/issue-peek-overview/activity/comment-editor.tsx +++ b/web/components/issues/issue-peek-overview/activity/comment-editor.tsx @@ -90,6 +90,7 @@ export const IssueCommentEditor: React.FC = (props) => { ref={editorRef} value={!commentValue || commentValue === "" ? "

" : commentValue} customClassName="p-2 h-full" + editorContentCustomClassNames="min-h-[35px]" debouncedUpdatesEnabled={false} mentionSuggestions={editorSuggestions.mentionSuggestions} mentionHighlights={editorSuggestions.mentionHighlights} diff --git a/web/components/issues/issue-peek-overview/view.tsx b/web/components/issues/issue-peek-overview/view.tsx index a44fbedaf..3342cbf40 100644 --- a/web/components/issues/issue-peek-overview/view.tsx +++ b/web/components/issues/issue-peek-overview/view.tsx @@ -250,7 +250,7 @@ export const IssueView: FC = observer((props) => { issue && ( <> {["side-peek", "modal"].includes(peekMode) ? ( -
+