From d43185db80d257c20c2f005ba502bf0c0dfa4a1b Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Mon, 18 Jul 2022 16:16:49 +0200
Subject: [PATCH] Improved behavior of stacked collapsibles.
---
src/display/components/collapsible.css | 18 ++++--------------
src/display/components/collapsible.tsx | 6 ++++--
src/display/components/nodeinfo/neighbors.tsx | 2 +-
3 files changed, 9 insertions(+), 17 deletions(-)
diff --git a/src/display/components/collapsible.css b/src/display/components/collapsible.css
index b61443e..930f02d 100644
--- a/src/display/components/collapsible.css
+++ b/src/display/components/collapsible.css
@@ -1,9 +1,12 @@
.collapsible-content {
overflow: hidden;
- transition: height 0.2s ease-in-out;
border-bottom: 1px solid #dee2e6 !important;
}
+.collapsible-transition-height {
+ transition: height 0.2s ease-in-out;
+}
+
.collapsible-content-padding > ul {
margin: 0 0 0 2em;
}
@@ -12,19 +15,6 @@
padding: 10px 0 10px 10px;
}
-.collapsible-rotate-center {
- -moz-transition: all 0.2s linear;
- -webkit-transition: all 0.2s linear;
- font-size: 4em;
- transition: all 0.2s linear;
-}
-.collapsible-rotate-center.down {
- transform: rotate(-90deg);
-}
-.collapsible-rotate-center.up {
- transform: rotate(90deg);
-}
-
.collapsible-button {
position: relative;
display: flex;
diff --git a/src/display/components/collapsible.tsx b/src/display/components/collapsible.tsx
index 3c3e6fc..44a8792 100644
--- a/src/display/components/collapsible.tsx
+++ b/src/display/components/collapsible.tsx
@@ -6,14 +6,16 @@ interface CollapsibleProps {
header: string | React.ReactNode;
children?: React.ReactNode | React.ReactNode[];
color?: string;
+ heightTransition?: boolean;
}
-// Implementation details at https://medium.com/edonec/build-a-react-collapsible-component-from-scratch-using-react-hooks-typescript-73dfd02c9208
+// Implementation details partially from https://medium.com/edonec/build-a-react-collapsible-component-from-scratch-using-react-hooks-typescript-73dfd02c9208
function Collapsible({
open,
header,
children,
color = "gray",
+ heightTransition = true,
}: CollapsibleProps) {
const [isOpen, setIsOpen] = useState(open);
const [height, setHeight] = useState<number | undefined>(
@@ -59,7 +61,7 @@ function Collapsible({
{header}
</button>
</div>
- <div className={"collapsible-content"} style={{ height }}>
+ <div className={`collapsible-content ${heightTransition ? "collapsible-transition-height" : ""}`} style={{ height }}>
<div ref={ref}>
<div className={"collapsible-content-padding"}>
{children}
diff --git a/src/display/components/nodeinfo/neighbors.tsx b/src/display/components/nodeinfo/neighbors.tsx
index 36bf8c3..219c399 100644
--- a/src/display/components/nodeinfo/neighbors.tsx
+++ b/src/display/components/nodeinfo/neighbors.tsx
@@ -25,7 +25,7 @@ function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) {
<FancyScrollbar>
<Collapsible header={"Verwandte Inhalte"}>
{classes.map((cls) => (
- <Collapsible header={cls} key={cls}>
+ <Collapsible header={cls} key={cls} heightTransition={false}>
<ul>
{categories.get(cls).map((node) => (
<li key={node.name}>{node.name}</li>
--
GitLab