From a0e3130aa213f51d4a9aa8969103d95abaf29886 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Fri, 24 Mar 2023 12:58:15 +0300 Subject: [PATCH] Make empty previews responsive to page resize (#5925) ### Motivation and context Resolves #5615 - [x] Fix default preview resizing for all resources - [x] Fix loding preview ux ![image](https://user-images.githubusercontent.com/50956430/227453295-6e2c8e3e-e536-4607-9854-a2eb46cc69da.png) ### How has this been tested? ### Checklist - [x] I submit my changes into the `develop` branch - [x] I have added a description of my changes into the [CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md) file - ~~[ ] I have updated the documentation accordingly~~ - ~~[ ] I have added tests to cover my changes~~ - [x] I have linked related issues (see [GitHub docs]( https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword)) - [x] I have increased versions of npm packages if it is necessary ([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning), [cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning), [cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning) and [cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning)) ### License - [x] I submit _my code changes_ under the same [MIT License]( https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the project. Feel free to contact the maintainers if that's a concern. --- CHANGELOG.md | 1 + cvat-ui/package.json | 2 +- cvat-ui/src/base.scss | 26 +++++++++++++++++++ .../cloud-storages-page/styles.scss | 11 ++++---- cvat-ui/src/components/jobs-page/styles.scss | 10 +++---- .../src/components/models-page/styles.scss | 10 +++---- .../src/components/projects-page/styles.scss | 12 +++++---- cvat-ui/src/components/task-page/styles.scss | 5 +--- cvat-ui/src/components/tasks-page/styles.scss | 6 ++--- 9 files changed, 53 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 475384fe8ed9..2a18c6bfb504 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Width and height in CVAT dataset format mask annotations () - Empty list of export formats for a project without tasks () - Downgrade NumPy used by HRNet because `np.int` is no longer available () +- Make empty previews responsive to page resize ### Security - TDB diff --git a/cvat-ui/package.json b/cvat-ui/package.json index b1b4c2acc0f8..f941c09a3210 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.50.3", + "version": "1.50.4", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { diff --git a/cvat-ui/src/base.scss b/cvat-ui/src/base.scss index 643b0859e2cf..9e37248c1dd6 100644 --- a/cvat-ui/src/base.scss +++ b/cvat-ui/src/base.scss @@ -43,3 +43,29 @@ $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, $monospaced-fonts-stack: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; + +.cvat-base-preview { + .ant-spin { + position: inherit; + } + + font-size: $grid-unit-size * 15; + text-align: center; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + svg { + width: 65%; + height: 65%; + } + + .anticon { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } +} diff --git a/cvat-ui/src/components/cloud-storages-page/styles.scss b/cvat-ui/src/components/cloud-storages-page/styles.scss index 043e7d71da54..2fe56705a5b1 100644 --- a/cvat-ui/src/components/cloud-storages-page/styles.scss +++ b/cvat-ui/src/components/cloud-storages-page/styles.scss @@ -70,13 +70,14 @@ .cvat-cloud-storage-item-loading-preview, .cvat-cloud-storage-item-empty-preview { - .ant-spin { - position: inherit; - } + @extend .cvat-base-preview; - font-size: $grid-unit-size * 15; - text-align: center; height: $grid-unit-size * 24; + + svg { + width: 40%; + height: 40%; + } } .cvat-cloud-storage-item-preview { diff --git a/cvat-ui/src/components/jobs-page/styles.scss b/cvat-ui/src/components/jobs-page/styles.scss index 69d95d55cf85..fb3c3fae1ffc 100644 --- a/cvat-ui/src/components/jobs-page/styles.scss +++ b/cvat-ui/src/components/jobs-page/styles.scss @@ -81,13 +81,11 @@ .cvat-job-item-loading-preview, .cvat-job-item-empty-preview { - .ant-spin { - position: inherit; - } + @extend .cvat-base-preview; - font-size: $grid-unit-size * 15; - text-align: center; - height: $grid-unit-size * 24; + &:hover { + cursor: pointer; + } } .cvat-job-page-list-item-dimension { diff --git a/cvat-ui/src/components/models-page/styles.scss b/cvat-ui/src/components/models-page/styles.scss index 4d1d55cb1940..30ea82d723db 100644 --- a/cvat-ui/src/components/models-page/styles.scss +++ b/cvat-ui/src/components/models-page/styles.scss @@ -125,12 +125,8 @@ .cvat-model-item-loading-preview, .cvat-model-item-empty-preview { - .ant-spin { - position: inherit; - } + @extend .cvat-base-preview; - font-size: 80px; - text-align: center; height: $grid-unit-size * 18; &:hover { @@ -138,6 +134,10 @@ } } +.cvat-model-item-loading-preview { + padding-top: $grid-unit-size * 3; +} + .cvat-models-item-card-preview-wrapper { display: flex; justify-content: center; diff --git a/cvat-ui/src/components/projects-page/styles.scss b/cvat-ui/src/components/projects-page/styles.scss index 09dbfcea4b56..a0ac7ea3aad6 100644 --- a/cvat-ui/src/components/projects-page/styles.scss +++ b/cvat-ui/src/components/projects-page/styles.scss @@ -135,13 +135,15 @@ .cvat-project-item-loading-preview, .cvat-project-item-empty-preview { - .ant-spin { - position: inherit; + @extend .cvat-base-preview; + + &:hover { + cursor: pointer; } + } - font-size: $grid-unit-size * 15; - text-align: center; - height: $grid-unit-size * 24; + .cvat-project-item-loading-preview { + padding-top: $grid-unit-size * 3; } .cvat-projects-project-item-title { diff --git a/cvat-ui/src/components/task-page/styles.scss b/cvat-ui/src/components/task-page/styles.scss index f4a7f91b3773..487164e9e151 100644 --- a/cvat-ui/src/components/task-page/styles.scss +++ b/cvat-ui/src/components/task-page/styles.scss @@ -40,13 +40,10 @@ .cvat-task-item-loading-preview, .cvat-task-item-empty-preview { - .ant-spin { - position: inherit; - } + @extend .cvat-base-preview; height: $grid-unit-size * 18; font-size: $grid-unit-size * 10; - text-align: center; margin-bottom: $grid-unit-size * 3; } diff --git a/cvat-ui/src/components/tasks-page/styles.scss b/cvat-ui/src/components/tasks-page/styles.scss index 8abcb64148d7..3718c10dc87b 100644 --- a/cvat-ui/src/components/tasks-page/styles.scss +++ b/cvat-ui/src/components/tasks-page/styles.scss @@ -95,12 +95,10 @@ .cvat-task-item-loading-preview, .cvat-task-item-empty-preview { - .ant-spin { - position: inherit; - } + @extend .cvat-base-preview; font-size: $grid-unit-size * 6; - text-align: center; + height: $grid-unit-size * 10; } .cvat-task-item-preview-wrapper {