Add dark theme support
This commit is contained in:
parent
d0013d41bb
commit
784f7ecb6b
@ -158,11 +158,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
|
||||
{currTab === CurrTab.BasicTree ? (
|
||||
<BasicFamilyTree tree={tree!} depth={currDepth} />
|
||||
) : currTab === CurrTab.SimpleTree ? (
|
||||
<SimpleFamilyTree
|
||||
tree={tree!}
|
||||
isUp={currMode === TreeMode.Ascending}
|
||||
depth={currDepth}
|
||||
/>
|
||||
<SimpleFamilyTree tree={tree!} depth={currDepth} />
|
||||
) : (
|
||||
<ComplexFamilyTree
|
||||
tree={tree!}
|
||||
|
@ -4,6 +4,8 @@ import { Member } from "../../api/MemberApi";
|
||||
import { FamilyTreeNode } from "../../utils/family_tree";
|
||||
import { getTextWidth } from "../../utils/render_utils";
|
||||
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
|
||||
import { useDarkTheme } from "../../hooks/context_providers/DarkThemeProvider";
|
||||
import "./simpletree.css";
|
||||
|
||||
const FACE_WIDTH = 60;
|
||||
const FACE_HEIGHT = 70;
|
||||
@ -76,7 +78,7 @@ function center(container_width: number, el_width: number): number {
|
||||
return Math.floor((container_width - el_width) / 2);
|
||||
}
|
||||
|
||||
function buildSimpleDownTreeNode(
|
||||
function buildSimpleTreeNode(
|
||||
tree: FamilyTreeNode,
|
||||
depth: number
|
||||
): SimpleTreeNode {
|
||||
@ -94,8 +96,7 @@ function buildSimpleDownTreeNode(
|
||||
|
||||
const node: SimpleTreeNode = {
|
||||
down:
|
||||
childrenToProcess?.map((c) => buildSimpleDownTreeNode(c, depth - 1)) ??
|
||||
[],
|
||||
childrenToProcess?.map((c) => buildSimpleTreeNode(c, depth - 1)) ?? [],
|
||||
member: tree.member,
|
||||
spouse: lastCouple
|
||||
? {
|
||||
@ -131,23 +132,6 @@ function buildSimpleDownTreeNode(
|
||||
return node;
|
||||
}
|
||||
|
||||
// TODO : if useless, remove and merge up and down techniques
|
||||
function buildSimpleUpTreeNode(
|
||||
tree: FamilyTreeNode,
|
||||
depth: number
|
||||
): SimpleTreeNode {
|
||||
/*if (depth === 0) throw new Error("Too much recursion reached!");
|
||||
|
||||
return {
|
||||
member: tree.member,
|
||||
children:
|
||||
depth === 1
|
||||
? []
|
||||
: tree.down?.map((c) => buildSimpleUpTreeNode(c, depth - 1)) ?? [],
|
||||
};*/
|
||||
return buildSimpleDownTreeNode(tree, depth);
|
||||
}
|
||||
|
||||
/**
|
||||
* Simple family tree
|
||||
*
|
||||
@ -156,15 +140,13 @@ function buildSimpleUpTreeNode(
|
||||
|
||||
export function SimpleFamilyTree(p: {
|
||||
tree: FamilyTreeNode;
|
||||
isUp: boolean;
|
||||
depth: number;
|
||||
}): React.ReactElement {
|
||||
const darkTheme = useDarkTheme();
|
||||
|
||||
const tree = React.useMemo(
|
||||
() =>
|
||||
p.isUp
|
||||
? buildSimpleUpTreeNode(p.tree, p.depth)
|
||||
: buildSimpleDownTreeNode(p.tree, p.depth),
|
||||
[p.tree, p.isUp, p.depth]
|
||||
() => buildSimpleTreeNode(p.tree, p.depth),
|
||||
[p.tree, p.depth]
|
||||
);
|
||||
|
||||
const height = p.depth * (CARD_HEIGHT + LEVEL_SPACING) - LEVEL_SPACING;
|
||||
@ -175,6 +157,7 @@ export function SimpleFamilyTree(p: {
|
||||
<TransformWrapper maxScale={15} minScale={0.2}>
|
||||
<TransformComponent wrapperStyle={{ width: "100%", flex: "1" }}>
|
||||
<svg
|
||||
className={`simpletree ${darkTheme.enabled ? "simpletree-dark" : ""}`}
|
||||
width={tree.width}
|
||||
height={height}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
7
geneit_app/src/widgets/simple_family_tree/simpletree.css
Normal file
7
geneit_app/src/widgets/simple_family_tree/simpletree.css
Normal file
@ -0,0 +1,7 @@
|
||||
.simpletree-dark path {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.simpletree-dark tspan {
|
||||
fill: white;
|
||||
}
|
Loading…
Reference in New Issue
Block a user