From 45a801e05a9ff682eebc2137fd0a52cee2948923 Mon Sep 17 00:00:00 2001 From: snehalsankhe Date: Wed, 29 May 2024 17:54:14 +0530 Subject: [PATCH 1/4] changes in layout --- ui/src/components/Common/Card/card.scss | 2 ++ ui/src/components/SideBar/index.js | 15 +++++++++++++++ ui/src/components/SideBar/index.scss | 6 ++++++ ui/src/components/layout/AppLayout/index.tsx | 6 ++++-- ui/src/scss/App.scss | 3 +++ 5 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 ui/src/components/SideBar/index.js create mode 100644 ui/src/components/SideBar/index.scss diff --git a/ui/src/components/Common/Card/card.scss b/ui/src/components/Common/Card/card.scss index 288599138..a1a7a84c3 100644 --- a/ui/src/components/Common/Card/card.scss +++ b/ui/src/components/Common/Card/card.scss @@ -58,4 +58,6 @@ border-bottom: 1px solid rgb(226, 235, 248); box-shadow: rgba(226, 235, 248, 0.15) 0 $space-10 15px; border: 1px solid rgba(204, 204, 204, 0.6); + margin-top: 3.5rem; + z-index: 99; } diff --git a/ui/src/components/SideBar/index.js b/ui/src/components/SideBar/index.js new file mode 100644 index 000000000..643c4039c --- /dev/null +++ b/ui/src/components/SideBar/index.js @@ -0,0 +1,15 @@ +// Libraries +import { Icon } from '@contentstack/venus-components'; +// Styles +import './index.scss'; + +const SideBar = () => { + + return ( +
+ +
+ ); +}; + +export default SideBar; diff --git a/ui/src/components/SideBar/index.scss b/ui/src/components/SideBar/index.scss new file mode 100644 index 000000000..dc581bd62 --- /dev/null +++ b/ui/src/components/SideBar/index.scss @@ -0,0 +1,6 @@ +@import '../../scss/variables'; +.recycle-wrapper { + margin-top: -1px; + background-color: $color-brand-white-base; + z-index: 99; +} \ No newline at end of file diff --git a/ui/src/components/layout/AppLayout/index.tsx b/ui/src/components/layout/AppLayout/index.tsx index 9b887f266..11f2b0f2a 100644 --- a/ui/src/components/layout/AppLayout/index.tsx +++ b/ui/src/components/layout/AppLayout/index.tsx @@ -1,9 +1,9 @@ // Libraries import { FC, ReactNode } from 'react'; import { useLocation } from 'react-router'; - // Component import MainHeader from '../../MainHeader'; +import SideBar from '../../SideBar'; type IProps = { children?: ReactNode; @@ -14,7 +14,9 @@ const AppLayout: FC = ({ children }) => { return ( <> - {location.pathname === '/projects' && } + {/* {location.pathname === '/projects' && } */} + +
Date: Mon, 3 Jun 2024 19:46:55 +0530 Subject: [PATCH 2/4] added layout changes --- ui/src/components/Card/card.scss | 54 ++++++++++++++----- ui/src/components/Card/index.tsx | 41 +++++++++++--- ui/src/components/Common/Card/card.scss | 3 +- ui/src/components/DestinationStack/index.tsx | 2 +- ui/src/components/LegacyCms/index.tsx | 2 +- ui/src/components/MainHeader/index.tsx | 33 ++++++------ ui/src/components/ProjectsHeader/index.tsx | 2 +- .../SideBar/{index.js => index.tsx} | 4 +- ui/src/components/layout/AppLayout/index.tsx | 11 ++-- ui/src/pages/Projects/index.scss | 2 + ui/src/scss/App.scss | 4 +- ui/src/scss/_variables.scss | 5 ++ ui/src/utilities/constants.ts | 10 ++++ 13 files changed, 126 insertions(+), 47 deletions(-) rename ui/src/components/SideBar/{index.js => index.tsx} (58%) diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss index 336343444..a16bbc3a9 100644 --- a/ui/src/components/Card/card.scss +++ b/ui/src/components/Card/card.scss @@ -36,7 +36,7 @@ border-top: 1px solid $color-brand-secondary-lightest; border-radius: 0 0 0.5rem 0.5rem; height: 59.008px; - justify-content: space-between; + justify-content: flex-end; padding: 0.9375rem 1.875rem; align-items: center; } @@ -45,7 +45,11 @@ padding: 0; text-align: center; } +.ProjectCard__Staus-unit { + padding: 0 1em; +} .ProjectCard__unit { + border-left: 1px solid $color-brand-secondary-lightest; padding: 0 1em; } .ProjectCard__unit:not(:last-child) { @@ -57,25 +61,51 @@ justify-content: center; } .ProjectCard__stats-category { - color: $color-font-active; - font-size: $size-font-small; - font-weight: $font-weight-regular; - line-height: 1.42; + border: 1px solid $color-brand-secondary-lightest; + border-radius: 8px; + font-size: $size-font-large; + color: $color-black-2121; + padding: 4px 8px; + text-transform: capitalize; + svg { + margin-right: 5px; + } + &.draft { + border-color: $color-brand-draft-base; + background-color: $color-brand-draft-light; + svg { + stroke: $color-brand-draft-base; + fill: none; + } + } + &.completed { + background-color: $color-brand-success-light; + border-color: $color-brand-success-base; + } + &.failed { + background-color: $color-brand-fail-light; + border-color: $color-brand-fail-base; + } + &.pending { + background-color: $color-brand-attention-light; + border-color: $color-brand-attention-base; + } } -.ProjectCard__stats-number { +.ProjectCard__stats-Title { + color: $color-stepper-title; display: block; - font-size: $size-font-large; - font-weight: $font-weight-semi-bold; - letter-spacing: 0.00875rem; - line-height: 150%; + font-size: $size-font-small; margin-bottom: $space-4; } .validation-color { color: $color-brand-warning-medium; } .ProjectCard__cms { - font-size: $size-font-small; - color: $color-font-black; + border: 1px solid $color-brand-secondary-lightest; + border-radius: 8px; + font-size: $size-font-large; + color: $color-font-base; + padding: 4px 8px; text-transform: capitalize; } .ProjectCard__modified-date { diff --git a/ui/src/components/Card/index.tsx b/ui/src/components/Card/index.tsx index b77c7d2fc..ef55dd394 100644 --- a/ui/src/components/Card/index.tsx +++ b/ui/src/components/Card/index.tsx @@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from 'react'; import { Tooltip, Icon } from '@contentstack/venus-components'; import { useNavigate } from 'react-router-dom'; // Utilities -import { PROJECT_STATUS } from '../../utilities/constants'; +import { NEW_PROJECT_STATUS } from '../../utilities/constants'; import { getDays, isEmptyString } from '../../utilities/functions'; import { AppContext } from '../../context/app/app.context'; // Interface @@ -20,6 +20,29 @@ const CardList = ({ project }: ProjectType) => { if (isEmptyString(id)) return; navigate(`/projects/${id}/migration/steps/1`); }; + const iconMapping: { [key: string]: string } = { + '0': 'Information', + '1': 'WarningBold', + '2': 'WarningBold', + '3': 'WarningBold', + '4': 'WarningBold', + '5': 'CheckCircle', + '6': 'CloseBorder', + }; + const statusClassMapping: { [key: string]: string } = { + '0': 'draft', + '1': 'pending', + '2': 'pending', + '3': 'pending', + '4': 'pending', + '5': 'completed', + '6': 'failed', + }; + const status = project?.status ?? '0'; + const statusClass = statusClassMapping[status] || ''; + const icon = iconMapping[status] || ''; + const statusText = NEW_PROJECT_STATUS[status]; + useEffect(() => { const fetchProject = async () => { if (selectedOrganisation?.value && project?.id) { @@ -31,8 +54,8 @@ const CardList = ({ project }: ProjectType) => { }; fetchProject(); }, [selectedOrganisation?.value, project?.id]); - console.log("........status", project) + return (
onClickProject(project?.id || '')}> @@ -43,17 +66,21 @@ const CardList = ({ project }: ProjectType) => {
+
+ Source +
{projectDetails ? projectDetails : '-'}
+
- Project Status - - {PROJECT_STATUS?.[project?.status !== undefined ? project?.status : 0]} - + Project Status +
+ {icon && } + {statusText} +
-
{projectDetails}
diff --git a/ui/src/components/Common/Card/card.scss b/ui/src/components/Common/Card/card.scss index a1a7a84c3..9e57a1630 100644 --- a/ui/src/components/Common/Card/card.scss +++ b/ui/src/components/Common/Card/card.scss @@ -55,9 +55,10 @@ } .PageLayout--full-screen .PageLayout__head { + position: relative; border-bottom: 1px solid rgb(226, 235, 248); box-shadow: rgba(226, 235, 248, 0.15) 0 $space-10 15px; border: 1px solid rgba(204, 204, 204, 0.6); margin-top: 3.5rem; - z-index: 99; + z-index: 8; } diff --git a/ui/src/components/DestinationStack/index.tsx b/ui/src/components/DestinationStack/index.tsx index 866eca491..56ddb02da 100644 --- a/ui/src/components/DestinationStack/index.tsx +++ b/ui/src/components/DestinationStack/index.tsx @@ -4,7 +4,7 @@ import { getDestinationStackSteps } from './StepperSteps'; import { useNavigate, useParams } from 'react-router-dom'; import { Button, CircularLoader } from '@contentstack/venus-components'; //import { getEntries } from '../../services/contentstackSDK'; -import { CS_ENTRIES, PROJECT_STATUS } from '../../utilities/constants'; +import { CS_ENTRIES } from '../../utilities/constants'; import { AppContext } from '../../context/app/app.context'; import { DEFAULT_DESTINATION_STACK_DATA, diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx index 583675190..a2c63afbc 100644 --- a/ui/src/components/LegacyCms/index.tsx +++ b/ui/src/components/LegacyCms/index.tsx @@ -4,7 +4,7 @@ import { getLegacyCMSSteps } from './StepperSteps'; import { useNavigate, useParams } from 'react-router-dom'; import { Button, CircularLoader } from '@contentstack/venus-components'; // import { getEntries } from '../../services/contentstackSDK'; -import { CS_ENTRIES, PROJECT_STATUS } from '../../utilities/constants'; +import { CS_ENTRIES } from '../../utilities/constants'; import { AppContext } from '../../context/app/app.context'; import { DEFAULT_CMS_TYPE, diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index edbd57c66..b4d50d7dc 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -92,7 +92,6 @@ const MainHeader = () => { updateSelectedOrganisation(data); setDataInLocalStorage('organization', data?.value); }; - return (
@@ -100,9 +99,9 @@ const MainHeader = () => {
{logo?.image?.url ? (
- + - Contentstack Logo + Contentstack Logo
@@ -110,21 +109,21 @@ const MainHeader = () => { '' )} -
- -
+ {location.pathname === '/projects' &&
+ +
}
-
+ {(location.pathname == '/projects' || location.pathname.includes('/projects/')) &&
{
{name}
-
+
}
diff --git a/ui/src/components/ProjectsHeader/index.tsx b/ui/src/components/ProjectsHeader/index.tsx index 4d7b0f45d..0a2683734 100644 --- a/ui/src/components/ProjectsHeader/index.tsx +++ b/ui/src/components/ProjectsHeader/index.tsx @@ -67,7 +67,7 @@ const ProjectsHeader = ({ className="ml-10" onClick={handleModal} version="v2" - size="small" + size="medium" aria-label={cta?.title} > {cta?.with_icon && ( diff --git a/ui/src/components/SideBar/index.js b/ui/src/components/SideBar/index.tsx similarity index 58% rename from ui/src/components/SideBar/index.js rename to ui/src/components/SideBar/index.tsx index 643c4039c..880f49d1e 100644 --- a/ui/src/components/SideBar/index.js +++ b/ui/src/components/SideBar/index.tsx @@ -4,10 +4,10 @@ import { Icon } from '@contentstack/venus-components'; import './index.scss'; const SideBar = () => { - return (
- + {location.pathname == '/projects' && } + {location.pathname.includes('/projects/') && }
); }; diff --git a/ui/src/components/layout/AppLayout/index.tsx b/ui/src/components/layout/AppLayout/index.tsx index 11f2b0f2a..868e55809 100644 --- a/ui/src/components/layout/AppLayout/index.tsx +++ b/ui/src/components/layout/AppLayout/index.tsx @@ -14,10 +14,13 @@ const AppLayout: FC = ({ children }) => { return ( <> - {/* {location.pathname === '/projects' && } */} - - -
+ {location.pathname.includes('projects') && + <> + + + + } +
Date: Tue, 4 Jun 2024 13:00:12 +0530 Subject: [PATCH 3/4] changes in card status --- ui/src/scss/App.scss | 2 +- ui/src/utilities/constants.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index 497da1ba5..c61a21b1d 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -345,7 +345,7 @@ h2 { } .PageLayout__head { & > .PageHeader { - padding-right: $px-20; + padding-right: $px-10; } } } diff --git a/ui/src/utilities/constants.ts b/ui/src/utilities/constants.ts index 10ae3b57e..b41d375bc 100644 --- a/ui/src/utilities/constants.ts +++ b/ui/src/utilities/constants.ts @@ -75,10 +75,10 @@ export const PROJECT_STATUS: ObjectType = { export const NEW_PROJECT_STATUS: ObjectType = { '0': 'Draft', - '1': 'Pending', - '2': 'Pending', - '3': 'Pending', - '4': 'Pending', + '1': 'In progress', + '2': 'In progress', + '3': 'In progress', + '4': 'In progress', '5': 'Completed', '6': 'Failed' }; From bd9c525e48815ea567be62e499f1c868ec68bb3f Mon Sep 17 00:00:00 2001 From: snehalsankhe Date: Tue, 4 Jun 2024 14:30:26 +0530 Subject: [PATCH 4/4] removed commented --- ui/src/components/DestinationStack/index.tsx | 1 - ui/src/scss/App.scss | 2 -- 2 files changed, 3 deletions(-) diff --git a/ui/src/components/DestinationStack/index.tsx b/ui/src/components/DestinationStack/index.tsx index ab839a078..edab50b29 100644 --- a/ui/src/components/DestinationStack/index.tsx +++ b/ui/src/components/DestinationStack/index.tsx @@ -4,7 +4,6 @@ import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper' import { getDestinationStackSteps } from './StepperSteps'; import { useNavigate, useParams } from 'react-router-dom'; import { Button, CircularLoader } from '@contentstack/venus-components'; -//import { getEntries } from '../../services/contentstackSDK'; import { CS_ENTRIES } from '../../utilities/constants'; import { AppContext } from '../../context/app/app.context'; import { diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index c61a21b1d..28e2b5bf5 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -41,11 +41,9 @@ } .page-wrapper { - // align-items: center; background-color: $color-base-white-10; display: flex; height: 100vh; - // border: 1px solid red; margin-left: auto; .Icon--original { height: 1.25rem;