From a5e9b5dac18ba250f62f9c828b771aa90382ea75 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Thu, 6 May 2021 23:15:31 +0200
Subject: [PATCH] dropdown
---
.../navigation/Dropdown/dropdown.scss | 41 +++++++++++++++++++
.../components/navigation/Dropdown/index.tsx | 31 ++++++++++++++
.../src/components/navigation/Tabs/tabs.scss | 1 +
.../components/ui/DetailBox/detail-box.scss | 5 +--
client/src/pages/Teams/TeamsStats/index.tsx | 9 ++++
5 files changed, 83 insertions(+), 4 deletions(-)
create mode 100644 client/src/components/navigation/Dropdown/dropdown.scss
create mode 100644 client/src/components/navigation/Dropdown/index.tsx
diff --git a/client/src/components/navigation/Dropdown/dropdown.scss b/client/src/components/navigation/Dropdown/dropdown.scss
new file mode 100644
index 0000000..62f76a1
--- /dev/null
+++ b/client/src/components/navigation/Dropdown/dropdown.scss
@@ -0,0 +1,41 @@
+@use 'styles/settings.scss'as s;
+
+.dropdown-container {
+ position: relative;
+ cursor: pointer;
+ padding-bottom: 5px;
+
+ &.open {
+ .dropdown {
+ opacity: 1;
+ transform: translateY(100%);
+ visibility: visible;
+ }
+ }
+
+ .dropdown {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ transform: translateY(75%);
+ background: s.$white;
+ z-index: 2000;
+ max-width: 200px;
+ border-radius: 5px;
+ box-shadow: 0 0 5px rgba(s.$black, 0.05);
+ visibility: hidden;
+ opacity: 0;
+
+
+ .dropdown-item {
+ padding: 10px 20px;
+ display: block;
+ color: s.$body-color;
+ border-radius: 5px;
+
+ &:hover {
+ box-shadow: 0 0 10px rgba(s.$black, 0.1);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/navigation/Dropdown/index.tsx b/client/src/components/navigation/Dropdown/index.tsx
new file mode 100644
index 0000000..76b4800
--- /dev/null
+++ b/client/src/components/navigation/Dropdown/index.tsx
@@ -0,0 +1,31 @@
+import { ReactNode, useState } from 'react';
+import { Link } from 'react-router-dom';
+import './dropdown.scss';
+
+interface DropDownItem {
+ label: string;
+ route: string;
+}
+
+interface Props {
+ children: ReactNode;
+ items: DropDownItem[]
+}
+
+export default function Dropdown({ children, items }: Props) {
+ const [isOpen, setOpen] = useState(false);
+ return (
+ <div className={'dropdown-container' + (isOpen ? ' open' : '')} onClick={() => setOpen(state => !state)}>
+ {children}
+ <div className="dropdown">
+ {
+ items.map((item) => (
+ <Link className="dropdown-item" to={item.route}>
+ {item.label}
+ </Link>
+ ))
+ }
+ </div>
+ </div>
+ );
+}
\ 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 f0640cb..d3e5d30 100644
--- a/client/src/components/navigation/Tabs/tabs.scss
+++ b/client/src/components/navigation/Tabs/tabs.scss
@@ -5,6 +5,7 @@
justify-content: space-between;
background: rgba(s.$white, 0.25);
border-radius: 15px;
+ margin-top: 30px;
position: relative;
.tab {
diff --git a/client/src/components/ui/DetailBox/detail-box.scss b/client/src/components/ui/DetailBox/detail-box.scss
index 1720801..9481c29 100644
--- a/client/src/components/ui/DetailBox/detail-box.scss
+++ b/client/src/components/ui/DetailBox/detail-box.scss
@@ -34,11 +34,8 @@
}
@include mx.breakpoint(medium) {
- width: 64px;
- height: 64px;
-
.icon {
- font-size: 32px;
+ font-size: 28px;
}
}
}
diff --git a/client/src/pages/Teams/TeamsStats/index.tsx b/client/src/pages/Teams/TeamsStats/index.tsx
index 91285b4..246ac6b 100644
--- a/client/src/pages/Teams/TeamsStats/index.tsx
+++ b/client/src/pages/Teams/TeamsStats/index.tsx
@@ -1,9 +1,18 @@
+import Dropdown from 'components/navigation/Dropdown';
import './teams-stats.scss';
export default function TeamsStats() {
return (
<section className="teams-stats-section">
<div className="content-container">
+ <Dropdown items={[{ label: "Last month", route: "lastmonth" }]}>
+ <div className="filter-label">
+ <span className="material-icons icon">
+ expand_more
+ </span>
+ Last week
+ </div>
+ </Dropdown>
test
</div>
</section>
--
GitLab