From 668a65018e050c26ffeec216745ddee8cd9509b9 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Tue, 4 May 2021 13:40:25 +0200
Subject: [PATCH] tab initial integration
---
.../src/components/navigation/Tabs/index.tsx | 17 ++++++--
.../src/components/navigation/Tabs/tabs.scss | 41 +++++++++++++++++++
.../components/ui/DetailBox/detail-box.scss | 3 +-
.../components/ui/DetailGrid/detail-grid.scss | 2 +-
client/src/components/ui/DetailGrid/index.tsx | 2 +-
client/src/pages/AppWrapper.tsx | 2 +-
client/src/pages/Teams/index.tsx | 25 ++++++++++-
client/src/pages/Teams/teams.scss | 2 +-
8 files changed, 82 insertions(+), 12 deletions(-)
diff --git a/client/src/components/navigation/Tabs/index.tsx b/client/src/components/navigation/Tabs/index.tsx
index 4bd5c38..6b4ff22 100644
--- a/client/src/components/navigation/Tabs/index.tsx
+++ b/client/src/components/navigation/Tabs/index.tsx
@@ -1,14 +1,23 @@
+import { NavLink } from 'react-router-dom';
import './tabs.scss';
interface Tab {
route: string,
- label: string
+ label: string
}
interface Props {
- tabs: [Tab, Tab]
+ tabs: Tab[]
}
-export default function Tabs({tabs}: Props) {
-
+export default function Tabs({ tabs }: Props) {
+ return (
+ <nav className="tabs-container">
+ {tabs.map((tab) => (
+ <NavLink key={tab.route} className="tab" exact activeClassName="active" to={tab.route}>
+ {tab.label}
+ </NavLink>
+ ))}
+ </nav>
+ );
}
\ No newline at end of file
diff --git a/client/src/components/navigation/Tabs/tabs.scss b/client/src/components/navigation/Tabs/tabs.scss
index e69de29..2733f69 100644
--- a/client/src/components/navigation/Tabs/tabs.scss
+++ b/client/src/components/navigation/Tabs/tabs.scss
@@ -0,0 +1,41 @@
+@use 'styles/settings.scss'as s;
+
+.tabs-container {
+ display: flex;
+ justify-content: space-between;
+ background: rgba(s.$white, 0.25);
+
+ .tab {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: calc(50% - 20px);
+ height: 50px;
+ color: s.$body-color;
+ font-weight: s.$weight-semi-bold;
+ font-size: 14px;
+ position: relative;
+
+ &:before {
+ content: ' ';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translate(-50%, 50%) scaleX(0);
+ height: 5px;
+ width: 30px;
+ background: s.$primary;
+ border-radius: 3px;
+ transition: s.$transition;
+ }
+
+ &.active {
+ font-weight: s.$weight-bold;
+ font-size: 16px;
+
+ &:before {
+ transform: translate(-50%, 50%) scaleX(1);
+ }
+ }
+ }
+}
diff --git a/client/src/components/ui/DetailBox/detail-box.scss b/client/src/components/ui/DetailBox/detail-box.scss
index b81468b..1720801 100644
--- a/client/src/components/ui/DetailBox/detail-box.scss
+++ b/client/src/components/ui/DetailBox/detail-box.scss
@@ -57,5 +57,4 @@
font-size: 14px;
}
}
-
-}
\ No newline at end of file
+}
diff --git a/client/src/components/ui/DetailGrid/detail-grid.scss b/client/src/components/ui/DetailGrid/detail-grid.scss
index b7fdf01..07a53db 100644
--- a/client/src/components/ui/DetailGrid/detail-grid.scss
+++ b/client/src/components/ui/DetailGrid/detail-grid.scss
@@ -18,4 +18,4 @@
width: calc(20% - 32px);
}
}
-}
\ No newline at end of file
+}
diff --git a/client/src/components/ui/DetailGrid/index.tsx b/client/src/components/ui/DetailGrid/index.tsx
index 8ad3e4c..86fb2ba 100644
--- a/client/src/components/ui/DetailGrid/index.tsx
+++ b/client/src/components/ui/DetailGrid/index.tsx
@@ -11,7 +11,7 @@ export default function DetailGrid({ details }: Props) {
<div className="detail-grid">
{
details.map((detail) => (
- <div className="box-container">
+ <div key={detail.title} className="box-container">
<DetailBox {...detail} />
</div>
))
diff --git a/client/src/pages/AppWrapper.tsx b/client/src/pages/AppWrapper.tsx
index 5d68556..993e3ff 100644
--- a/client/src/pages/AppWrapper.tsx
+++ b/client/src/pages/AppWrapper.tsx
@@ -21,7 +21,7 @@ export default function AppWrapper() {
<ProtectedRoute path="/projects" component={Projects} />
<ProtectedRoute path="/stats" component={Stats} />
<ProtectedRoute path="/teams/:uuid/edit" component={TeamsEdit} />
- <ProtectedRoute path="/teams" exact component={Teams} />
+ <ProtectedRoute path={["/teams", "/teams/:tab"]} exact component={Teams} />
<ProtectedRoute path="/settings" component={Settings} />
</Suspense>
</Header>
diff --git a/client/src/pages/Teams/index.tsx b/client/src/pages/Teams/index.tsx
index 541eebf..e07ecd5 100644
--- a/client/src/pages/Teams/index.tsx
+++ b/client/src/pages/Teams/index.tsx
@@ -2,6 +2,12 @@ import './teams.scss';
import Page from 'components/ui/Page';
import DetailGrid from 'components/ui/DetailGrid';
import ButtonLink from 'components/navigation/ButtonLink';
+import Tabs from 'components/navigation/Tabs';
+import { useParams } from 'react-router';
+
+interface Params {
+ tab: string
+}
export default function Teams() {
const teamDetails = [{
@@ -12,15 +18,30 @@ export default function Teams() {
icon: 'folder',
title: 'Projects',
number: 3
- }]
+ }];
+
+ const tabs = [{
+ route: '/teams',
+ label: 'Members',
+ }, {
+ route: '/teams/stats',
+ label: 'Stats'
+ }];
+
+ const {tab} = useParams<Params>();
+
+
return (
<Page className="teams-page">
<div className="content-container">
<h1 className="underlined">Teams</h1>
<DetailGrid details={teamDetails} />
<ButtonLink href="/teams/uuid/edit" routing={true} className="expanded">
- Edit
+ Edit
</ButtonLink>
+ <Tabs tabs={tabs} />
+ {!tab && (<h2>Members</h2>)}
+ {tab === "stats" && (<h2>Stats</h2>)}
</div>
</Page>
)
diff --git a/client/src/pages/Teams/teams.scss b/client/src/pages/Teams/teams.scss
index aba69c3..58fe23e 100644
--- a/client/src/pages/Teams/teams.scss
+++ b/client/src/pages/Teams/teams.scss
@@ -2,4 +2,4 @@
.button {
margin: 25px 0;
}
-}
\ No newline at end of file
+}
--
GitLab