From a8816171248d0ff0cc1473e538f488af8c526f23 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Thu, 5 Aug 2021 10:56:07 +0300 Subject: [PATCH] Added adjustments for 3440x1440px (#3506) * Added adjustments for 3440x1440px * fixed testts * Adjusted resolution * Fixed some comments * Added user hook * Changed parameter name --- .../annotation-page/annotation-page.tsx | 2 +- .../src/components/models-page/styles.scss | 3 +- .../components/projects-page/project-item.tsx | 12 ++- .../components/projects-page/project-list.tsx | 21 +---- .../src/components/projects-page/styles.scss | 82 ++++++++++++------- cvat-ui/src/components/task-page/styles.scss | 3 - cvat-ui/src/components/tasks-page/styles.scss | 16 +++- cvat-ui/src/styles.scss | 2 +- cvat-ui/src/utils/hooks.ts | 50 ++++++++++- tests/cypress/support/commands_projects.js | 32 ++++---- 10 files changed, 150 insertions(+), 73 deletions(-) diff --git a/cvat-ui/src/components/annotation-page/annotation-page.tsx b/cvat-ui/src/components/annotation-page/annotation-page.tsx index 5bedffaa..973e8ceb 100644 --- a/cvat-ui/src/components/annotation-page/annotation-page.tsx +++ b/cvat-ui/src/components/annotation-page/annotation-page.tsx @@ -44,7 +44,7 @@ export default function AnnotationPageComponent(props: Props): JSX.Element { saveLogs(); const root = window.document.getElementById('root'); if (root) { - root.style.minHeight = '600px'; + root.style.minHeight = '720px'; } return () => { diff --git a/cvat-ui/src/components/models-page/styles.scss b/cvat-ui/src/components/models-page/styles.scss index ddcaef8a..5d93e670 100644 --- a/cvat-ui/src/components/models-page/styles.scss +++ b/cvat-ui/src/components/models-page/styles.scss @@ -5,7 +5,8 @@ @import '../../base.scss'; .cvat-models-page { - padding-top: 30px; + padding-top: $grid-unit-size * 2; + padding-bottom: $grid-unit-size; height: 90%; overflow: auto; position: fixed; diff --git a/cvat-ui/src/components/projects-page/project-item.tsx b/cvat-ui/src/components/projects-page/project-item.tsx index 2ca8523f..d2f6a9e7 100644 --- a/cvat-ui/src/components/projects-page/project-item.tsx +++ b/cvat-ui/src/components/projects-page/project-item.tsx @@ -15,18 +15,27 @@ import Button from 'antd/lib/button'; import { MoreOutlined } from '@ant-design/icons'; import { CombinedState, Project } from 'reducers/interfaces'; +import { useCardHeightHOC } from 'utils/hooks'; import ProjectActionsMenuComponent from './actions-menu'; interface Props { projectInstance: Project; } +const useCardHeight = useCardHeightHOC({ + containerClassName: 'cvat-projects-page', + siblingClassNames: ['cvat-projects-pagination', 'cvat-projects-top-bar'], + paddings: 40, + numberOfRows: 3, +}); + export default function ProjectItemComponent(props: Props): JSX.Element { const { projectInstance: { instance, preview }, } = props; const history = useHistory(); + const height = useCardHeight(); const ownerName = instance.owner ? instance.owner.username : null; const updated = moment(instance.updatedDate).fromNow(); const deletes = useSelector((state: CombinedState) => state.projects.activities.deletes); @@ -36,8 +45,7 @@ export default function ProjectItemComponent(props: Props): JSX.Element { history.push(`/projects/${instance.id}`); }; - const style: React.CSSProperties = {}; - + const style: React.CSSProperties = { height }; if (deleted) { style.pointerEvents = 'none'; style.opacity = 0.5; diff --git a/cvat-ui/src/components/projects-page/project-list.tsx b/cvat-ui/src/components/projects-page/project-list.tsx index 494b501f..79685975 100644 --- a/cvat-ui/src/components/projects-page/project-list.tsx +++ b/cvat-ui/src/components/projects-page/project-list.tsx @@ -15,7 +15,7 @@ export default function ProjectListComponent(): JSX.Element { const dispatch = useDispatch(); const projectsCount = useSelector((state: CombinedState) => state.projects.count); const { page } = useSelector((state: CombinedState) => state.projects.gettingQuery); - const projectInstances = useSelector((state: CombinedState) => state.projects.current); + const projects = useSelector((state: CombinedState) => state.projects.current); const gettingQuery = useSelector((state: CombinedState) => state.projects.gettingQuery); function changePage(p: number): void { @@ -27,28 +27,13 @@ export default function ProjectListComponent(): JSX.Element { ); } - const projects = projectInstances.reduce((rows, key, index) => { - if (index % 4 === 0) { - rows.push([key]); - } else { - rows[rows.length - 1].push(key); - } - return rows; - }, []); - return ( <> {projects.map( - (row: Project[]): JSX.Element => ( - - {row.map((project: Project) => ( - - - - ))} - + (project: Project): JSX.Element => ( + ), )} diff --git a/cvat-ui/src/components/projects-page/styles.scss b/cvat-ui/src/components/projects-page/styles.scss index dd60013d..f665de5a 100644 --- a/cvat-ui/src/components/projects-page/styles.scss +++ b/cvat-ui/src/components/projects-page/styles.scss @@ -6,9 +6,8 @@ .cvat-projects-page { padding-top: $grid-unit-size * 2; - padding-bottom: $grid-unit-size * 5; + padding-bottom: $grid-unit-size; height: 100%; - position: fixed; width: 100%; > div:nth-child(1) { @@ -71,28 +70,6 @@ justify-content: center; } -.cvat-projects-project-item-title, -.cvat-projects-project-item-card-preview { - cursor: pointer; -} - -.cvat-porjects-project-item-description { - display: flex; - justify-content: space-between; - - // actions button - > div:nth-child(2) { - display: flex; - align-self: flex-end; - justify-content: center; - - > button { - color: $text-color; - width: inherit; - } - } -} - .ant-menu.cvat-project-actions-menu { box-shadow: 0 0 17px rgba(0, 0, 0, 0.2); @@ -107,17 +84,62 @@ } .cvat-projects-project-item-card { - .ant-empty { - margin: $grid-unit-size; - height: $grid-unit-size * 16; - } + .cvat-projects-project-item-card-preview { + .ant-empty { + margin: $grid-unit-size; + height: inherit; + display: grid; + + > div:first-child { + margin: auto; + } + } - img { - height: $grid-unit-size * 18; + height: 100%; + display: flex; + align-items: center; + justify-content: space-around; object-fit: cover; + cursor: pointer; } + + .cvat-projects-project-item-title { + cursor: pointer; + } + + .cvat-porjects-project-item-description { + display: flex; + justify-content: space-between; + + // actions button + > div:nth-child(2) { + display: flex; + align-self: flex-end; + justify-content: center; + + > button { + color: $text-color; + width: inherit; + } + } + } + + .ant-card-cover { + flex: 1; + height: 0; + } + + width: 25%; + border-width: 4px; + display: flex; + flex-direction: column; } .cvat-project-list-content { padding-bottom: $grid-unit-size; } + +.cvat-projects-list { + display: flex; + flex-wrap: wrap; +} diff --git a/cvat-ui/src/components/task-page/styles.scss b/cvat-ui/src/components/task-page/styles.scss index 1a381e89..3b6d6a84 100644 --- a/cvat-ui/src/components/task-page/styles.scss +++ b/cvat-ui/src/components/task-page/styles.scss @@ -88,9 +88,7 @@ .cvat-task-preview-wrapper { overflow: hidden; margin-bottom: 20px; - width: $grid-unit-size * 32; height: $grid-unit-size * 18; - display: table-cell; text-align: center; vertical-align: middle; background-color: $background-color-2; @@ -98,7 +96,6 @@ .cvat-task-parameters { margin-top: $grid-unit-size * 2; - width: $grid-unit-size * 32; } .cvat-open-bug-tracker-button { diff --git a/cvat-ui/src/components/tasks-page/styles.scss b/cvat-ui/src/components/tasks-page/styles.scss index 2c6dce8c..9ce429cc 100644 --- a/cvat-ui/src/components/tasks-page/styles.scss +++ b/cvat-ui/src/components/tasks-page/styles.scss @@ -6,8 +6,8 @@ @import '../../styles.scss'; .cvat-tasks-page { - padding-top: 15px; - padding-bottom: 40px; + padding-top: $grid-unit-size * 2; + padding-bottom: $grid-unit-size; height: 100%; width: 100%; @@ -33,6 +33,18 @@ padding-top: 10px; } + @media screen and (min-height: 900px) { + > div:nth-child(2) { + height: 88%; + } + } + + @media screen and (min-height: 1200px) { + > div:nth-child(2) { + height: 93%; + } + } + > div:nth-child(3) { padding-top: 10px; } diff --git a/cvat-ui/src/styles.scss b/cvat-ui/src/styles.scss index c00a4236..18d102ec 100644 --- a/cvat-ui/src/styles.scss +++ b/cvat-ui/src/styles.scss @@ -57,7 +57,7 @@ hr { width: 100%; height: 100%; display: grid; - min-width: 1280px; + min-width: 1024px; } #layout-grid { diff --git a/cvat-ui/src/utils/hooks.ts b/cvat-ui/src/utils/hooks.ts index 74b58a1d..9107317d 100644 --- a/cvat-ui/src/utils/hooks.ts +++ b/cvat-ui/src/utils/hooks.ts @@ -1,7 +1,7 @@ // Copyright (C) 2021 Intel Corporation // // SPDX-License-Identifier: MIT -import { useRef, useEffect } from 'react'; +import { useRef, useEffect, useState } from 'react'; // eslint-disable-next-line import/prefer-default-export export function usePrevious(value: T): T | undefined { @@ -11,3 +11,51 @@ export function usePrevious(value: T): T | undefined { }); return ref.current; } + +export interface ICardHeightHOC { + numberOfRows: number; + paddings: number; + containerClassName: string; + siblingClassNames: string[]; +} + +export function useCardHeightHOC(params: ICardHeightHOC): () => string { + const { + numberOfRows, paddings, containerClassName, siblingClassNames, + } = params; + + return (): string => { + const [height, setHeight] = useState('auto'); + useEffect(() => { + const resize = (): void => { + const container = window.document.getElementsByClassName(containerClassName)[0]; + const siblings = siblingClassNames.map( + (classname: string): Element | undefined => window.document.getElementsByClassName(classname)[0], + ); + + if (container) { + const { clientHeight: containerHeight } = container; + const othersHeight = siblings.reduce((acc: number, el: Element | undefined): number => { + if (el) { + return acc + el.clientHeight; + } + + return acc; + }, 0); + + const cardHeight = (containerHeight - (othersHeight + paddings)) / numberOfRows; + setHeight(`${Math.round(cardHeight)}px`); + } + }; + + resize(); + window.addEventListener('resize', resize); + + return () => { + window.removeEventListener('resize', resize); + }; + }, []); + + return height; + }; +} diff --git a/tests/cypress/support/commands_projects.js b/tests/cypress/support/commands_projects.js index b4ab2429..7493bed2 100644 --- a/tests/cypress/support/commands_projects.js +++ b/tests/cypress/support/commands_projects.js @@ -29,9 +29,7 @@ Cypress.Commands.add( cy.contains('Submit').click(); }); if (expectedResult == 'success') { - cy.get('.cvat-notification-create-project-success') - .should('exist') - .find('[data-icon="close"]').click(); + cy.get('.cvat-notification-create-project-success').should('exist').find('[data-icon="close"]').click(); } else if (expectedResult == 'fail') { cy.get('.cvat-notification-create-project-success').should('not.exist'); } @@ -61,7 +59,7 @@ Cypress.Commands.add('deleteProject', (projectName, projectID, expectedResult = if (expectedResult === 'success') { cy.get('.cvat-projects-project-item-card').should('have.css', 'opacity', '0.5'); } else if (expectedResult === 'fail') { - cy.get('.cvat-projects-project-item-card').should('not.have.attr', 'style'); + cy.get('.cvat-projects-project-item-card').should('not.have.css', 'opacity', '0.5'); } }); @@ -96,19 +94,25 @@ Cypress.Commands.add('closeNotification', (className) => { Cypress.Commands.add('movingTask', (taskName, projectName, labelMappingFrom, labelMappingTo, fromTask) => { if (fromTask) { cy.contains('.cvat-text-color', 'Actions').click(); - cy.get('.ant-dropdown').not('.ant-dropdown-hidden').within(() => { - cy.contains('Move to project').click(); - }); + cy.get('.ant-dropdown') + .not('.ant-dropdown-hidden') + .within(() => { + cy.contains('Move to project').click(); + }); } else { cy.contains('strong', taskName).parents('.cvat-tasks-list-item').find('.cvat-menu-icon').click(); - cy.get('.ant-dropdown').not('.ant-dropdown-hidden').within(() => { - cy.contains('Move to project').click(); - }); + cy.get('.ant-dropdown') + .not('.ant-dropdown-hidden') + .within(() => { + cy.contains('Move to project').click(); + }); } cy.get('.cvat-task-move-modal').find('.cvat-project-search-field').click(); - cy.get('.ant-select-dropdown').not('.ant-select-dropdown-hidden').within(() => { - cy.get(`[title="${projectName}"]`).click(); - }); + cy.get('.ant-select-dropdown') + .not('.ant-select-dropdown-hidden') + .within(() => { + cy.get(`[title="${projectName}"]`).click(); + }); if (labelMappingFrom !== labelMappingTo) { cy.get('.cvat-move-task-label-mapper-item').within(() => { cy.contains(labelMappingFrom).should('exist'); @@ -122,5 +126,5 @@ Cypress.Commands.add('movingTask', (taskName, projectName, labelMappingFrom, lab } cy.get('.cvat-task-move-modal').within(() => { cy.contains('button', 'OK').click(); - }) + }); });