jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fixed dark mode not activating immediatly at refresh (#1666)

Browse source 
Changed location of dark listener to improve dark performance
This commit is contained in:
Lucas Oliveira 2024-04-10 22:17:58 +02:00 • committed by GitHub
commit 895eea688a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/index.html
View file

@ -11,7 +11,7 @@
></script> ></script>
<title>Langflow</title> <title>Langflow</title>
</head> </head>
<body id="body" style="width: 100%; height: 100%"> <body id="body" class="dark" style="width: 100%; height: 100%">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div style="width: 100vw; height: 100vh" id="root"></div> <div style="width: 100vw; height: 100vh" id="root"></div>
<script type="module" src="/src/index.tsx"></script> <script type="module" src="/src/index.tsx"></script>

9
src/frontend/src/App.tsx
View file

@ -50,9 +50,18 @@ export default function App() {
); );
const checkHasStore = useStoreStore((state) => state.checkHasStore); const checkHasStore = useStoreStore((state) => state.checkHasStore);
const navigate = useNavigate(); const navigate = useNavigate();
const dark = useDarkStore((state) => state.dark);
const [isLoadingHealth, setIsLoadingHealth] = useState(false); const [isLoadingHealth, setIsLoadingHealth] = useState(false);
useEffect(() => {
if (!dark) {
document.getElementById("body")!.classList.remove("dark");
} else {
document.getElementById("body")!.classList.add("dark");
}
}, [dark]);
useEffect(() => { useEffect(() => {
const isLoginPage = location.pathname.includes("login"); const isLoginPage = location.pathname.includes("login");

9
src/frontend/src/components/headerComponent/index.tsx
View file

@ -40,15 +40,6 @@ export default function Header(): JSX.Element {
const setDark = useDarkStore((state) => state.setDark); const setDark = useDarkStore((state) => state.setDark);
const stars = useDarkStore((state) => state.stars); const stars = useDarkStore((state) => state.stars);
useEffect(() => {
if (dark) {
document.getElementById("body")!.classList.add("dark");
} else {
document.getElementById("body")!.classList.remove("dark");
}
window.localStorage.setItem("isDark", dark.toString());
}, [dark]);
async function checkForChanges(nodes: Node[]): Promise<void> { async function checkForChanges(nodes: Node[]): Promise<void> {
if (nodes.length === 0) { if (nodes.length === 0) {
await removeFlow(id!); await removeFlow(id!);

5
src/frontend/src/stores/darkStore.tsx
View file

@ -8,7 +8,10 @@ export const useDarkStore = create<DarkStoreType>((set, get) => ({
dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false, dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false,
stars: startedStars, stars: startedStars,
version: "", version: "",
setDark: (dark) => set(() => ({ dark: dark })), setDark: (dark) => {
set(() => ({ dark: dark }));
window.localStorage.setItem("isDark", dark.toString());
},
refreshVersion: () => { refreshVersion: () => {
getVersion().then((data) => { getVersion().then((data) => {
set(() => ({ version: data.version })); set(() => ({ version: data.version }));