Skip to content

Commit

Permalink
same sidebar styles and new ant icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaveDarsa
DaveDarsa committed Sep 11, 2023
1 parent a695ae7 commit 72ba7f4
Show file tree
Hide file tree
Showing 9 changed files with 142 additions and 404 deletions.
31 changes: 18 additions & 13 deletions src/components/NavTabs/NavTabsSkeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { FC } from 'react';
import Skeleton from 'react-loading-skeleton';

import { CheckSquareOutlined, ReadOutlined, RocketOutlined, SaveOutlined } from '@ant-design/icons';
import BackupsLink from 'components/link/Backups';
import DeploymentsLink from 'components/link/Deployments';
import EnvironmentLink from 'components/link/Environment';
Expand All @@ -15,25 +16,29 @@ interface NavSkeletonProps {
}

const NavTabsSkeleton: FC<NavSkeletonProps> = ({ activeTab, projectName, openshiftProjectName }) => (
<StyledNavigation className="navigation">
<li className={`overview ${activeTab == 'overview' ? 'active' : ''} deployLink`}>
<EnvironmentLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="deployLink">
Environment Overview
<StyledNavigation>
<li className={`overview ${activeTab == 'overview' ? 'active' : ''} linkContainer`}>
<EnvironmentLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
<ReadOutlined className="icon" />
<span className="destination"> Environment Overview</span>
</EnvironmentLink>
</li>
<li className={`deployments ${activeTab == 'deployments' ? 'active' : ''} deployLink`}>
<DeploymentsLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="deployLink">
Deployments
<li className={`deployments ${activeTab == 'deployments' ? 'active' : ''} linkContainer`}>
<DeploymentsLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
<RocketOutlined className="icon" />
<span className="destination"> Deployments</span>
</DeploymentsLink>
</li>
<li className={`backups ${activeTab == 'backups' ? 'active' : ''} deployLink`}>
<BackupsLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="deployLink">
Backups
<li className={`backups ${activeTab == 'backups' ? 'active' : ''} linkContainer`}>
<BackupsLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
<SaveOutlined className="icon" />
<span className="destination"> Backups</span>
</BackupsLink>
</li>
<li className={`tasks ${activeTab == 'tasks' ? 'active' : ''} ${'deployLink'}`}>
<TasksLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="deployLink">
Tasks
<li className={`tasks ${activeTab == 'tasks' ? 'active' : ''} ${'linkContainer'}`}>
<TasksLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
<CheckSquareOutlined className="icon" />
<span className="destination"> Tasks</span>
</TasksLink>
</li>
<Skeleton style={{ height: '50px', lineHeight: '0.5' }} />
Expand Down
168 changes: 2 additions & 166 deletions src/components/NavTabs/StylednavTabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,167 +1,3 @@
import { bp, color } from 'lib/variables';
import styled from 'styled-components';
import { StyledNavigation as NavStyles } from 'components/Organizations/NavTabs/StyledNavTabs';

export const StyledNavigation = styled.ul`
background: ${props => props.theme.backgrounds.sidebar};
border-right: 1px solid ${props => props.theme.borders.input};
margin: 0;
z-index: 10;
@media ${bp.tabletUp} {
min-width: 30%;
padding-bottom: 60px;
}
@media ${bp.wideUp} {
min-width: 25%;
}
li {
border-bottom: 1px solid ${props => props.theme.borders.input};
margin: 0;
padding: 0;
position: relative;
transition: all 0.2s ease;
&:hover {
background-color: ${color.white} !important;
}
&::before {
background-color: ${color.linkBlue};
background-position: center center;
background-repeat: no-repeat;
content: '';
display: block;
height: 59px;
left: 0;
position: absolute;
top: 0;
transition: all 0.3s ease-in-out;
width: 45px;
}
a {
color: ${props => props.theme.texts.navigation};
display: block;
padding: 20px 20px 19px 60px;
@media ${bp.wideUp} {
padding-left: calc((100vw / 16) * 1);
}
}
&.active {
background-color: ${props => props.theme.backgrounds.content};
border-right: 1px solid ${props => props.theme.backgrounds.content};
width: calc(100% + 1px);
a {
color: ${props => props.theme.texts.navigation};
}
}
&.overview {
&::before {
background-image: url('/static/images/overview.svg');
background-size: 18px;
}
&.active::before {
background-image: url('/static/images/overview-active.svg');
}
}
&.deployments {
&::before {
background-image: url('/static/images/deployments.svg');
background-size: 21px 16px;
}
&.active::before {
background-image: url('/static/images/deployments-active.svg');
}
}
&.backups {
&::before {
background-image: url('/static/images/backups.svg');
background-size: 19px;
}
&.active::before {
background-image: url('/static/images/backups-active.svg');
}
}
&.tasks {
&::before {
background-image: url('/static/images/tasks.svg');
background-size: 16px;
}
&.active::before {
background-image: url('/static/images/tasks-active.svg');
}
}
&.environmentVariables {
&::before {
background-image: url('/static/images/variables.svg');
background-size: 22px;
}
&.active::before {
background-image: url('/static/images/variables-active.svg');
}
}
&.problems {
&::before {
background-image: url('/static/images/problems.svg');
background-size: 16px;
}
&.active::before {
background-image: url('/static/images/problems-active.svg');
}
}
&.facts {
&::before {
background-image: url('/static/images/facts.svg');
background-size: 16px;
}
&.active::before {
background-image: url('/static/images/facts-active.svg');
}
}
&.insights {
&::before {
background-image: url('/static/images/insights.svg');
background-size: 16px;
}
&.active::before {
background-image: url('/static/images/insights-active.svg');
}
}
}
.deployLink {
a {
color: ${props => props.theme.texts.navigation};
display: block;
padding: 20px 20px 19px 60px;
transition: color 0.2s ease;
@media ${bp.wideUp} {
padding-left: calc((100vw / 16) * 1);
}
&:hover {
color: ${color.darkGrey};
}
}
.active a {
color: ${color.black};
}
}
`;
export const StyledNavigation = NavStyles;
102 changes: 63 additions & 39 deletions src/components/NavTabs/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,121 @@
import React from 'react';

import getConfig from 'next/config';

import {
AlertOutlined,
BarChartOutlined,
CheckSquareOutlined,
LockOutlined,
ReadOutlined,
RocketOutlined,
SaveOutlined,
TagsOutlined,
} from '@ant-design/icons';
import BackupsLink from 'components/link/Backups';
import DeploymentsLink from 'components/link/Deployments';
import EnvironmentLink from 'components/link/Environment';
import EnvironmentVariablesLink from 'components/link/EnvironmentVariables';
import FactsLink from 'components/link/Facts';
import InsightsLink from 'components/link/Insights';
import EnvironmentVariablesLink from 'components/link/EnvironmentVariables';
import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
import {StyledNavigation} from "./StylednavTabs";
import ProblemsLink from 'components/link/Problems';
import TasksLink from 'components/link/Tasks';

import { StyledNavigation } from './StylednavTabs';

const { publicRuntimeConfig } = getConfig();

const NavTabs = ({ activeTab, environment }) => (
<StyledNavigation className="navigation">
<li className={`overview ${activeTab == 'overview' ? 'active' : ''} deployLink`}>
<StyledNavigation>
<li className={`overview ${activeTab == 'overview' ? 'active' : ''} linkContainer`}>
<EnvironmentLink
environmentSlug={environment.openshiftProjectName}
projectSlug={environment.project.name}
className="deployLink"
className="navLink"
>
Environment Overview
<ReadOutlined className="icon" />
<span className="destination"> Environment Overview</span>
</EnvironmentLink>
</li>
<li className={`deployments ${activeTab == 'deployments' ? 'active' : ''} deployLink`}>

<li className={`deployments ${activeTab == 'deployments' ? 'active' : ''} linkContainer`}>
<DeploymentsLink
environmentSlug={environment.openshiftProjectName}
projectSlug={environment.project.name}
className="deployLink"
className="navLink"
>
Deployments
<RocketOutlined className="icon" />
<span className="destination"> Deployments</span>
</DeploymentsLink>
</li>
<li className={`backups ${activeTab == 'backups' ? 'active' : ''} deployLink`}>

<li className={`backups ${activeTab == 'backups' ? 'active' : ''} linkContainer`}>
<BackupsLink
environmentSlug={environment.openshiftProjectName}
projectSlug={environment.project.name}
className="deployLink"
className="navLink"
>
Backups
<SaveOutlined className="icon" />
<span className="destination"> Backups</span>
</BackupsLink>
</li>
<li className={`tasks ${activeTab == 'tasks' ? 'active' : ''} ${'deployLink'}`}>

<li className={`tasks ${activeTab == 'tasks' ? 'active' : ''} ${'linkContainer'}`}>
<TasksLink
environmentSlug={environment.openshiftProjectName}
projectSlug={environment.project.name}
className="deployLink"
className="navLink"
>
Tasks
<CheckSquareOutlined className="icon" />
<span className="destination"> Tasks</span>
</TasksLink>
</li>
{publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && <li
className={`environmentVariables ${activeTab == 'environmentVariables' ? 'active' : ''} ${"deployLink"}`}
>
<EnvironmentVariablesLink
environmentSlug={environment.openshiftProjectName}
projectSlug={environment.project.name}
className="deployLink"
>
Variables
</EnvironmentVariablesLink>
</li>
}

{publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && (
<li className={`environmentVariables ${activeTab == 'environmentVariables' ? 'active' : ''} ${'linkContainer'}`}>
<EnvironmentVariablesLink
environmentSlug={environment.openshiftProjectName}
projectSlug={environment.project.name}
className="navLink"
>
<LockOutlined className="icon" />
<span className="destination"> Variables</span>
</EnvironmentVariablesLink>
</li>
)}
{environment.project.problemsUi == 1 && (
<li className={`problems ${activeTab == 'problems' ? 'active' : ''} deployLink`}>
<ProblemsLink
<li className={`problems ${activeTab == 'problems' ? 'active' : ''} linkContainer`}>
<ProblemsLink
environmentSlug={environment.openshiftProjectName}
projectSlug={environment.project.name}
className="deployLink"
className="navLink"
>
Problems
<AlertOutlined className="icon" />
<span className="destination"> Problems</span>
</ProblemsLink>
</li>
)}
{environment.project.factsUi == 1 && (
<li className={`facts ${activeTab == 'facts' ? 'active' : ''} ${'deployLink'}`}>
<li className={`facts ${activeTab == 'facts' ? 'active' : ''} ${'linkContainer'}`}>
<FactsLink
environmentSlug={environment.openshiftProjectName}
projectSlug={environment.project.name}
className="deployLink"
className="navLink"
>
Facts
<TagsOutlined className="icon" />
<span className="destination"> Facts</span>
</FactsLink>
</li>
)}
{environment.project.factsUi == 1 && (
<li className={`insights ${activeTab == 'insights' ? 'active' : ''} deployLink`}>
<li className={`insights ${activeTab == 'insights' ? 'active' : ''} linkContainer`}>
<InsightsLink
environmentSlug={environment.openshiftProjectName}
projectSlug={environment.project.name}
className="deployLink"
className="navLink"
>
Insights
<BarChartOutlined className="icon" />
<span className="destination"> Insights</span>
</InsightsLink>
</li>
)}
Expand Down
Loading

0 comments on commit 72ba7f4

Please sign in to comment.