Skip to content

Commit

Permalink
Merge pull request #227 from it-at-m/195-mindmaps-dark-mode
Browse files Browse the repository at this point in the history 
🦉 fix, dark mode is working for mindmaps
  • Loading branch information
@Meteord
Meteord authored Dec 12, 2024
2 parents bfdd03c + 3506b37 commit 037bb67
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 81 deletions.
7 changes: 7 additions & 0 deletions app/frontend/src/components/Mindmap/Mindmap.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@
margin-right: 5 px;
}

.darkmindmap {
--markmap-code-bg: #000 !important;
--markmap-code-color: #fff !important;
--markmap-circle-open-bg: #222 !important;
--markmap-text-color: #ccc !important;
}

.answerText {
white-space: pre-wrap;
font-size: var(--fontSizeBase400);
Expand Down
6 changes: 4 additions & 2 deletions app/frontend/src/components/Mindmap/Mindmap.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { Transformer } from "markmap-lib";
import { Markmap } from "markmap-view";
import { useLayoutEffect, useRef, useState } from "react";
import { useContext, useLayoutEffect, useRef, useState } from "react";
import styles from "./Mindmap.module.css";
import { Stack } from "@fluentui/react";
import { useTranslation } from "react-i18next";
import { Button, Tooltip } from "@fluentui/react-components";
import { ArrowDownload24Regular, ContentView24Regular, ScaleFill24Regular } from "@fluentui/react-icons";
import { AnswerIcon } from "../Answer/AnswerIcon";
import { IPureNode } from "markmap-common";
import { LightContext } from "../../pages/layout/LightContext";
interface Props {
markdown: string;
}
Expand All @@ -18,6 +19,7 @@ export const Mindmap = ({ markdown }: Props) => {
const svgEl = useRef<SVGSVGElement>(null);
const [isSourceView, setIsSourceView] = useState(false);
const [freeplaneXML, setFreeplaneXML] = useState("");
const isLight = useContext(LightContext);

useLayoutEffect(() => {
createMM();
Expand Down Expand Up @@ -153,7 +155,7 @@ export const Mindmap = ({ markdown }: Props) => {
{!isSourceView ? (
<Stack.Item grow>
<div className={styles.mindmapContainer}>
<svg id="markmap" className={styles.svgMark} ref={svgEl} aria-hidden="true" role="img"></svg>
<svg id="markmap" className={`${styles.svgMark} ${isLight ? "" : styles.darkmindmap}`} ref={svgEl} aria-hidden="true" role="img"></svg>
</div>
</Stack.Item>
) : (
Expand Down
167 changes: 88 additions & 79 deletions app/frontend/src/pages/layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { FluentProvider, Theme } from "@fluentui/react-components";
import { useStyles, STORAGE_KEYS, adjustTheme } from "./LayoutHelper";
import { DEFAULTLLM, LLMContext } from "../../components/LLMSelector/LLMContextProvider";
import { getBotName } from "../../service/storage";
import { LightContext } from "./LightContext";

const formatDate = (date: Date) => {
let formatted_date = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
Expand Down Expand Up @@ -135,91 +136,99 @@ export const Layout = () => {

return (
<FluentProvider theme={theme}>
<div className={styles.layout}>
<header className={styles2.header} role={"banner"}>
<div className={styles.header}>
<Link to="/" className={styles.headerTitleContainer}>
<img
src={config.frontend.alternative_logo ? alternative_logo : isLight ? logo : logo_black}
alt="MUCGPT logo"
aria-label="MUCGPT Logo"
className={styles.logo}
></img>
<h3 className={styles.headerTitle} aria-description="Umgebung:">
{config.frontend.labels.env_name}
</h3>
</Link>
<div className={styles.headerNavList}>
<div className={styles.headerNavLeftMargin}>
<NavLink to="/" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
MUCGPT
</NavLink>
</div>
<div className={styles.headerNavLeftMargin}>
<NavLink to="/chat" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
{t("header.chat")}
</NavLink>
</div>
<div className={styles.headerNavLeftMargin}>
<NavLink
to="/sum"
state={{ from: "This is my props" }}
className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
>
{t("header.sum")}
</NavLink>
</div>
<div className={styles.headerNavLeftMargin}>
<NavLink to="/brainstorm" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
{t("header.brainstorm")}
</NavLink>
</div>
{simply && (
<LightContext.Provider value={isLight}>
<div className={styles.layout}>
<header className={styles2.header} role={"banner"}>
<div className={styles.header}>
<Link to="/" className={styles.headerTitleContainer}>
<img
src={config.frontend.alternative_logo ? alternative_logo : isLight ? logo : logo_black}
alt="MUCGPT logo"
aria-label="MUCGPT Logo"
className={styles.logo}
></img>
<h3 className={styles.headerTitle} aria-description="Umgebung:">
{config.frontend.labels.env_name}
</h3>
</Link>
<div className={styles.headerNavList}>
<div className={styles.headerNavLeftMargin}>
<NavLink to="/" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
MUCGPT
</NavLink>
</div>
<div className={styles.headerNavLeftMargin}>
<NavLink to="/chat" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
{t("header.chat")}
</NavLink>
</div>
<div className={styles.headerNavLeftMargin}>
<NavLink to="/simply" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
{t("header.simply")}
<NavLink
to="/sum"
state={{ from: "This is my props" }}
className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
>
{t("header.sum")}
</NavLink>
</div>
<div className={styles.headerNavLeftMargin}>
<NavLink
to="/brainstorm"
className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
>
{t("header.brainstorm")}
</NavLink>
</div>
{simply && (
<div className={styles.headerNavLeftMargin}>
<NavLink
to="/simply"
className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
>
{t("header.simply")}
</NavLink>
</div>
)}
<div className={styles.headerNavLeftMargin}>
<NavLink
to={"/bot/" + title[0]}
className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
>
{title[1]}
</NavLink>
</div>
)}
<div className={styles.headerNavLeftMargin}>
<NavLink
to={"/bot/" + title[0]}
className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
>
{title[1]}
</NavLink>
</div>
<div className={styles.SettingsDrawer}>
<SettingsDrawer
defaultlang={language_pref}
onLanguageSelectionChanged={onLanguageSelectionChanged}
version={config.version}
commit={config.commit}
fontscale={fontscaling}
setFontscale={onFontscaleChange}
isLight={isLight}
setTheme={onThemeChange}
defaultLLM={llm_pref}
onLLMSelectionChanged={onLLMSelectionChanged}
llmOptions={models}
currentLLM={LLM}
></SettingsDrawer>
</div>
</div>
<div className={styles.SettingsDrawer}>
<SettingsDrawer
defaultlang={language_pref}
onLanguageSelectionChanged={onLanguageSelectionChanged}
version={config.version}
commit={config.commit}
fontscale={fontscaling}
setFontscale={onFontscaleChange}
isLight={isLight}
setTheme={onThemeChange}
defaultLLM={llm_pref}
onLLMSelectionChanged={onLLMSelectionChanged}
llmOptions={models}
currentLLM={LLM}
></SettingsDrawer>
</div>
</div>
</header>
<Outlet />
</header>
<Outlet />

<footer className={styles2.footer} role={"banner"}>
<div>
Landeshauptstadt München <br />
RIT/it@M KICC <br />
</div>
<div className={styles.headerNavRightMargin}>
<TermsOfUseDialog defaultOpen={!termsofuseread} onAccept={onAcceptTermsOfUse}></TermsOfUseDialog>
</div>
</footer>
</div>
<footer className={styles2.footer} role={"banner"}>
<div>
Landeshauptstadt München <br />
RIT/it@M KICC <br />
</div>
<div className={styles.headerNavRightMargin}>
<TermsOfUseDialog defaultOpen={!termsofuseread} onAccept={onAcceptTermsOfUse}></TermsOfUseDialog>
</div>
</footer>
</div>
</LightContext.Provider>
</FluentProvider>
);
};
Expand Down
3 changes: 3 additions & 0 deletions app/frontend/src/pages/layout/LightContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { createContext } from "react";

export const LightContext = createContext(true);

0 comments on commit 037bb67

Please sign in to comment.