From c013d459d5e5e2731e8836524b7391407f0f92b2 Mon Sep 17 00:00:00 2001 From: thekavikumar <kavikumarceo@gmail.com> Date: Sat, 16 Mar 2024 10:06:50 +0530 Subject: [PATCH 1/6] resolved issue #7620 --- .../src/components/jobs-page/jobs-page.tsx | 27 +++++++++++++------ cvat-ui/src/components/jobs-page/styles.scss | 9 +++++++ 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/cvat-ui/src/components/jobs-page/jobs-page.tsx b/cvat-ui/src/components/jobs-page/jobs-page.tsx index 899075163d38..57c8f14c19dc 100644 --- a/cvat-ui/src/components/jobs-page/jobs-page.tsx +++ b/cvat-ui/src/components/jobs-page/jobs-page.tsx @@ -62,10 +62,12 @@ function JobsPageComponent(): JSX.Element { <Pagination className='cvat-jobs-page-pagination' onChange={(page: number) => { - dispatch(getJobsAsync({ - ...query, - page, - })); + dispatch( + getJobsAsync({ + ...query, + page, + }), + ); }} showSizeChanger={false} total={count} @@ -76,7 +78,18 @@ function JobsPageComponent(): JSX.Element { </Col> </Row> </> - ) : <Empty description={<Text>No results matched your search...</Text>} />; + ) : ( + <div className='cvat-empty-jobs-list'> + <Empty description={( + <Row justify='center' align='middle'> + <Col> + <Text>No results matched your search...</Text> + </Col> + </Row> + )} + /> + </div> + ); return ( <div className='cvat-jobs-page'> @@ -110,9 +123,7 @@ function JobsPageComponent(): JSX.Element { ); }} /> - { fetching ? ( - <Spin size='large' className='cvat-spinner' /> - ) : content } + {fetching ? <Spin size='large' className='cvat-spinner' /> : content} </div> ); } diff --git a/cvat-ui/src/components/jobs-page/styles.scss b/cvat-ui/src/components/jobs-page/styles.scss index cc561fcaa0ac..8e57ce818266 100644 --- a/cvat-ui/src/components/jobs-page/styles.scss +++ b/cvat-ui/src/components/jobs-page/styles.scss @@ -165,3 +165,12 @@ } } } + +.cvat-empty-jobs-list { + .ant-empty { + top: 50%; + left: 50%; + position: absolute; + transform: translate(-50%, -50%); + } +} \ No newline at end of file From 25b26b076d935b476435fc8fe7136fee94e0ee19 Mon Sep 17 00:00:00 2001 From: thekavikumar <kavikumarceo@gmail.com> Date: Mon, 18 Mar 2024 20:42:53 +0530 Subject: [PATCH 2/6] resolved issue #7620 --- changelog.d/20240318_203856_kavikumarceo.md | 4 + .../src/components/jobs-page/jobs-page.tsx | 12 ++- cvat-ui/src/components/jobs-page/styles.scss | 75 +++++++------------ 3 files changed, 37 insertions(+), 54 deletions(-) create mode 100644 changelog.d/20240318_203856_kavikumarceo.md diff --git a/changelog.d/20240318_203856_kavikumarceo.md b/changelog.d/20240318_203856_kavikumarceo.md new file mode 100644 index 000000000000..8f0e9d0ccab1 --- /dev/null +++ b/changelog.d/20240318_203856_kavikumarceo.md @@ -0,0 +1,4 @@ +### Fixed + +- The alignment of empty list component has been fixed. + (<https://github.com/opencv/cvat/pull/7621>) diff --git a/cvat-ui/src/components/jobs-page/jobs-page.tsx b/cvat-ui/src/components/jobs-page/jobs-page.tsx index 57c8f14c19dc..5d50cbdcc422 100644 --- a/cvat-ui/src/components/jobs-page/jobs-page.tsx +++ b/cvat-ui/src/components/jobs-page/jobs-page.tsx @@ -1,5 +1,5 @@ // Copyright (C) 2022 Intel Corporation -// Copyright (C) 2023 CVAT.ai Corporation +// Copyright (C) 2023-2024 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -62,12 +62,10 @@ function JobsPageComponent(): JSX.Element { <Pagination className='cvat-jobs-page-pagination' onChange={(page: number) => { - dispatch( - getJobsAsync({ - ...query, - page, - }), - ); + dispatch(getJobsAsync({ + ...query, + page, + })); }} showSizeChanger={false} total={count} diff --git a/cvat-ui/src/components/jobs-page/styles.scss b/cvat-ui/src/components/jobs-page/styles.scss index 8e57ce818266..26562447baf4 100644 --- a/cvat-ui/src/components/jobs-page/styles.scss +++ b/cvat-ui/src/components/jobs-page/styles.scss @@ -1,5 +1,5 @@ // Copyright (C) 2022 Intel Corporation -// Copyright (C) 2022 CVAT.ai Corporation +// Copyright (C) 2022-2024 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -12,23 +12,40 @@ width: 100%; overflow: auto; - > div:nth-child(1) { - div > { - .cvat-title { - color: $text-color; + .cvat-jobs-page-top-bar { + > div { + display: flex; + justify-content: space-between; + + > div { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + + .cvat-jobs-page-search-bar { + width: $grid-unit-size * 32; + padding-left: $grid-unit-size * 0.5; + } + + > div { + > *:not(:last-child) { + margin-right: $grid-unit-size; + } + + display: flex; + } } } } - > div:nth-child(2) { - &.ant-empty { + .cvat-empty-jobs-list { + .ant-empty { position: absolute; - top: 40%; + top: 50%; left: 50%; + transform: translate(-50%, -50%); } - - padding-bottom: $grid-unit-size; - padding-top: $grid-unit-size; } .cvat-job-page-list-item { @@ -138,39 +155,3 @@ font-size: 16px; } } - -.cvat-jobs-page-top-bar { - > div { - display: flex; - justify-content: space-between; - - > div { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - - .cvat-jobs-page-search-bar { - width: $grid-unit-size * 32; - padding-left: $grid-unit-size * 0.5; - } - - > div { - > *:not(:last-child) { - margin-right: $grid-unit-size; - } - - display: flex; - } - } - } -} - -.cvat-empty-jobs-list { - .ant-empty { - top: 50%; - left: 50%; - position: absolute; - transform: translate(-50%, -50%); - } -} \ No newline at end of file From b4cf63543675c1e75662e4729f8b7065f6cad8c1 Mon Sep 17 00:00:00 2001 From: thekavikumar <kavikumarceo@gmail.com> Date: Tue, 19 Mar 2024 09:17:08 +0530 Subject: [PATCH 3/6] resolved issue #7636 --- cvat-ui/src/components/labels-editor/labels-editor.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/cvat-ui/src/components/labels-editor/labels-editor.tsx b/cvat-ui/src/components/labels-editor/labels-editor.tsx index 85c133338600..f30f662faa4f 100644 --- a/cvat-ui/src/components/labels-editor/labels-editor.tsx +++ b/cvat-ui/src/components/labels-editor/labels-editor.tsx @@ -1,5 +1,5 @@ // Copyright (C) 2020-2022 Intel Corporation -// Copyright (C) 2023 CVAT.ai Corporation +// Copyright (C) 2023-2024 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -11,6 +11,7 @@ import ModalConfirm from 'antd/lib/modal/confirm'; import { EditOutlined, BuildOutlined, ExclamationCircleOutlined, } from '@ant-design/icons'; +import notification from 'antd/lib/notification'; import { SerializedLabel, SerializedAttribute } from 'cvat-core-wrapper'; import RawViewer from './raw-viewer'; @@ -207,6 +208,10 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditorProps, .map((label: LabelOptColor): LabelOptColor => transformLabel(label)); onSubmit(output); + notification.success({ + message: 'The label has been created!', + className: 'cvat-notification-create-label-success', + }); } public render(): JSX.Element { From 210835a87104a61ad504a261883d92f1723152f4 Mon Sep 17 00:00:00 2001 From: thekavikumar <kavikumarceo@gmail.com> Date: Tue, 19 Mar 2024 09:25:39 +0530 Subject: [PATCH 4/6] Revert "resolved issue #7636" This reverts commit b4cf63543675c1e75662e4729f8b7065f6cad8c1. --- cvat-ui/src/components/labels-editor/labels-editor.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/cvat-ui/src/components/labels-editor/labels-editor.tsx b/cvat-ui/src/components/labels-editor/labels-editor.tsx index f30f662faa4f..85c133338600 100644 --- a/cvat-ui/src/components/labels-editor/labels-editor.tsx +++ b/cvat-ui/src/components/labels-editor/labels-editor.tsx @@ -1,5 +1,5 @@ // Copyright (C) 2020-2022 Intel Corporation -// Copyright (C) 2023-2024 CVAT.ai Corporation +// Copyright (C) 2023 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -11,7 +11,6 @@ import ModalConfirm from 'antd/lib/modal/confirm'; import { EditOutlined, BuildOutlined, ExclamationCircleOutlined, } from '@ant-design/icons'; -import notification from 'antd/lib/notification'; import { SerializedLabel, SerializedAttribute } from 'cvat-core-wrapper'; import RawViewer from './raw-viewer'; @@ -208,10 +207,6 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditorProps, .map((label: LabelOptColor): LabelOptColor => transformLabel(label)); onSubmit(output); - notification.success({ - message: 'The label has been created!', - className: 'cvat-notification-create-label-success', - }); } public render(): JSX.Element { From b5d084a78c20ce358e72a166fb7afec39500e872 Mon Sep 17 00:00:00 2001 From: thekavikumar <kavikumarceo@gmail.com> Date: Tue, 19 Mar 2024 14:02:41 +0530 Subject: [PATCH 5/6] Resolved Issue #7620 --- changelog.d/20240318_203856_kavikumarceo.md | 2 +- cvat-ui/src/components/jobs-page/styles.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/changelog.d/20240318_203856_kavikumarceo.md b/changelog.d/20240318_203856_kavikumarceo.md index 8f0e9d0ccab1..cfa19c9cbb76 100644 --- a/changelog.d/20240318_203856_kavikumarceo.md +++ b/changelog.d/20240318_203856_kavikumarceo.md @@ -1,4 +1,4 @@ ### Fixed -- The alignment of empty list component has been fixed. +- Incorrect alignment of empty job list component (<https://github.com/opencv/cvat/pull/7621>) diff --git a/cvat-ui/src/components/jobs-page/styles.scss b/cvat-ui/src/components/jobs-page/styles.scss index 26562447baf4..45294b0bfd65 100644 --- a/cvat-ui/src/components/jobs-page/styles.scss +++ b/cvat-ui/src/components/jobs-page/styles.scss @@ -146,6 +146,8 @@ .cvat-jobs-page-list { display: flex; flex-wrap: wrap; + padding-top: 8px; + padding-bottom: 8px; } .cvat-job-card-more-button { From 4952d3d9d232912feb96fce1401d5325cf041c79 Mon Sep 17 00:00:00 2001 From: thekavikumar <kavikumarceo@gmail.com> Date: Tue, 19 Mar 2024 17:59:50 +0530 Subject: [PATCH 6/6] Resolved Issue #7620 --- cvat-ui/src/components/jobs-page/styles.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cvat-ui/src/components/jobs-page/styles.scss b/cvat-ui/src/components/jobs-page/styles.scss index 45294b0bfd65..c18774747d82 100644 --- a/cvat-ui/src/components/jobs-page/styles.scss +++ b/cvat-ui/src/components/jobs-page/styles.scss @@ -146,8 +146,8 @@ .cvat-jobs-page-list { display: flex; flex-wrap: wrap; - padding-top: 8px; - padding-bottom: 8px; + padding-top: $grid-unit-size; + padding-bottom: $grid-unit-size; } .cvat-job-card-more-button {