Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge pull request #11088 from ToolJet/fix/darkmode-viewer

Browse source 
Fix: darkmode action on viewer in incognito
This commit is contained in:
Johnson Cherian 2024-10-24 11:45:45 +05:30 committed by GitHub
commit 2a58e65153
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 13 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
View file

@ -19,13 +19,10 @@ const DesktopHeader = ({
isAppLoaded,
changeToDarkMode,
}) => {
const { editingVersion, showDarkModeToggle, isReleasedVersionId } = useStore(
const { showDarkModeToggle, isReleasedVersionId } = useStore(
(state) => ({
editingVersion: state?.editingVersion,
isReleasedVersionId: state?.releasedVersionId == state.editingVersion || state.isVersionReleased,
switchDarkMode: state.switchDarkMode,
isReleasedVersionId: state?.releasedVersionId == state.selectedVersion?.id || state.isVersionReleased,
showDarkModeToggle: state.globalSettings.appMode === 'auto' || !state.globalSettings.appMode,
appMode: state.globalSettings.appMode,
}),
shallow
);

2
frontend/src/AppBuilder/_hooks/useAppData.js
View file

@ -190,7 +190,7 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId }
);
setPages(pages, moduleId);
setPageSettings(deepCamelCase(appData?.editing_version?.page_settings));
setPageSettings(deepCamelCase(appData?.editing_version?.page_settings || appData?.page_settings));
// set starting page as homepage initially
let startingPage = appData.pages.find((page) => page.id === homePageId);

4
frontend/src/_components/DarkModeToggle.jsx
View file

@ -102,7 +102,9 @@ export const DarkModeToggle = function DarkModeToggle({
</animated.svg>
{showText && (
<span className="dark-theme-toggle-btn-text">Switch to {!darkMode ? 'dark mode' : 'light mode'}</span>
<span className="dark-theme-toggle-btn-text" onClick={toggleDarkMode}>
Switch to {!darkMode ? 'dark mode' : 'light mode'}
</span>
)}
</div>
</OverlayTrigger>

26
frontend/src/_hooks/useAppDarkMode.js
View file

@ -1,31 +1,17 @@
import { useCallback, useMemo } from 'react';
import { useMemo } from 'react';
import { shallow } from 'zustand/shallow';
import { useEditorStore } from '@/_stores/editorStore';
import { useAppDataStore } from '@/_stores/appDataStore';
import useStore from '@/AppBuilder/_stores/store';
const useAppDarkMode = () => {
const { appMode, setAppMode } = useEditorStore(
(state) => ({
appMode: state.appMode,
setAppMode: state.actions.setAppMode,
}),
shallow
);
const { isTJDarkMode } = useAppDataStore(
const { appMode, globalSettingsChanged, isTJDarkMode } = useStore(
(state) => ({
appMode: state.globalSettings.appMode,
globalSettingsChanged: state.globalSettingsChanged,
isTJDarkMode: state.isTJDarkMode,
}),
shallow
);
const handleAppModeChange = useCallback(
(appMode = 'auto') => {
setAppMode(appMode);
},
[setAppMode]
);
const isAppDarkMode = useMemo(() => {
if (appMode === 'light') {
return false;
@ -37,7 +23,7 @@ const useAppDarkMode = () => {
}, [appMode, isTJDarkMode]);
return {
onAppModeChange: handleAppModeChange,
onAppModeChange: globalSettingsChanged,
appMode,
isAppDarkMode,
};

1
server/src/controllers/apps.controller.v2.ts
View file

@ -153,6 +153,7 @@ export class AppsControllerV2 {
homePageId: versionToLoad.homePageId,
globalSettings: { ...versionToLoad.globalSettings, theme: appTheme },
showViewerNavigation: versionToLoad.showViewerNavigation,
pageSettings: versionToLoad?.pageSettings,
};
}