Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update navbar icons #157

Merged
merged 8 commits into from
Sep 12, 2023
Merged

update navbar icons #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
87f1bf3
update org group and project icons
tobybellwood Sep 7, 2023
a695ae7
Add references to Overview tab in Nav
tobybellwood Sep 7, 2023
72ba7f4
same sidebar styles and new ant icons
DaveDarsa Sep 11, 2023
e422930
Merge branch 'main' into icon_update
DaveDarsa Sep 11, 2023
1640cb4
fixup openInTab variable
tobybellwood Sep 12, 2023
9b6e014
update Nav and ProjectNav Icons
tobybellwood Sep 12, 2023
6df5a2e
set openInTab default false
tobybellwood Sep 12, 2023
57d2c90
Update Nav and ProjectNav skeletons
tobybellwood Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 26 additions & 13 deletions src/components/NavTabs/NavTabsSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React, { FC } from 'react';
import Skeleton from 'react-loading-skeleton';

import { CheckSquareOutlined, ReadOutlined, RocketOutlined, SaveOutlined, UnorderedListOutlined } from '@ant-design/icons';
import BackupsLink from 'components/link/Backups';
import DeploymentsLink from 'components/link/Deployments';
import EnvironmentLink from 'components/link/Environment';
import TasksLink from 'components/link/Tasks';
import EnvironmentVariablesLink from 'components/link/EnvironmentVariables';

import { StyledNavigation } from './StylednavTabs';

Expand All @@ -15,27 +17,38 @@ 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">
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>
<li className={`tasks ${activeTab == 'environmentVariables' ? 'active' : ''} ${'linkContainer'}`}>
<EnvironmentVariablesLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
<UnorderedListOutlined className="icon" />
<span className="destination"> Variables</span>
</EnvironmentVariablesLink>
</li>
<Skeleton style={{ height: '50px', lineHeight: '0.5' }} />
<Skeleton style={{ height: '50px', lineHeight: '0.5' }} />
<Skeleton style={{ height: '50px', lineHeight: '0.5' }} />
</StyledNavigation>
Expand Down
168 changes: 2 additions & 166 deletions src/components/NavTabs/StylednavTabs.tsx
View file
Open in desktop
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
Open in desktop
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,
UnorderedListOutlined,
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"
>
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"
>
<UnorderedListOutlined 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
Loading