From 30d354753060a30fb599a662617314ae81df6527 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 19 Jul 2024 10:56:21 +0200
Subject: [PATCH] hp select buttons
---
src/App/App.css | 24 ++++++++++++++++++++++--
src/components/Buttons.tsx | 32 +++++++++++++++++++++++++++-----
src/contents/human-practices.tsx | 6 +++++-
3 files changed, 54 insertions(+), 8 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index d1ceee18..d6345709 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -793,6 +793,17 @@ svg{
width: fit-content !important;
}
+.All{
+ background-color: white;
+}
+button.tabbutton.Patient.active, button.tabbutton.All.active,
+button.tabbutton.Industry.active, button.tabbutton.Academia.active,
+button.tabbutton.Medical.active{
+ border-color: black;
+}
+
+
+
.Patient{
background-color: var(--accen-secondary);
}
@@ -806,7 +817,7 @@ svg{
}
.Industry{
- background-color: var(--text-primary);
+ background-color: var(--mediumpurple);
}
.timelineolli {
@@ -2441,4 +2452,13 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.tabtabs, .tabbys{
display: none;
-}
\ No newline at end of file
+}
+
+.tabbutton{
+ padding: 5px;
+ border-radius: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-left: 5px;
+ margin-right: 5px;
+}
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index f1765faa..9bb8c228 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -79,13 +79,35 @@ export function HPButtonrow(){
return(
<>
<div className="align-items-center bottom-buttons">
- <button className="active" onClick={openTab({cityName: "All", cla: "tabtabs", weg:"tabbys"})}> All</button>
- <button onClick={openTab({cityName: "Patient", cla: "tabtabs", weg:"tabbys"})}> Patients</button>
- <button onClick={openTab({cityName: "Academia", cla: "tabtabs", weg:"tabbys"})}> Academia</button>
- <button onClick={openTab({cityName: "Medical", cla: "tabtabs", weg:"tabbys"})}> Medical professionals</button>
- <button onClick={openTab({cityName: "Industry", cla: "tabtabs", weg:"tabbys"})}> Industry</button>
+ <TabButton classy="active" type="All" name="All" opentype="tabtabs" closing="tabbys"/>
+ <TabButton classy="active" type="Patient" name="Patients" opentype="tabtabs" closing="tabbys"/>
+ <TabButton classy="active" type="Medical" name="Medical Professionals" opentype="tabtabs" closing="tabbys"/>
+ <TabButton classy="active" type="Academia" name="Academia" opentype="tabtabs" closing="tabbys"/>
+ <TabButton classy="active" type="Industry" name="Industry" opentype="tabtabs" closing="tabbys"/>
+
</div>
</>
)
}
+
+interface TabButtonProps{
+ classy?: string,
+ closing: string,
+ opentype: string
+ /* children?: React.ReactNode, */
+ /* onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void, */
+ name: string,
+ type: string
+}
+export function TabButton({classy, name, closing, opentype, type}:TabButtonProps){
+ if (!classy){
+ classy = ""
+ }
+ let classname = "tabbutton " + type + " " + classy;
+ return(
+ <>
+ <button className={classname} onClick={openTab({cityName: type, cla: opentype, weg: closing })}> {name}</button>
+ </>
+ )
+}
\ No newline at end of file
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 3d05580a..25abcb07 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -99,6 +99,10 @@ let tabtabs = [
{
node: <TimeHori tab="Medical Professional" ></TimeHori>,
eid: "Medical"
+ },
+ {
+ node: <TimeHori tab="Industry" ></TimeHori>,
+ eid: "Industry"
}
]
@@ -122,7 +126,7 @@ export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg
for (i = 0; i < tabcontent.length; i++) {
(tabcontent[i] as HTMLElement).style.display = "none";
}
- tablinks = document.getElementsByClassName("tablinks");
+ tablinks = document.getElementsByClassName("tabbutton");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
--
GitLab