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

Merge pull request #11324 from ToolJet/fix/mobile-view

Browse source 
Fix: sidebar navigation visibility on mobile vew
This commit is contained in:
Johnson Cherian 2024-11-14 17:16:00 +05:30 committed by GitHub
commit 7b875ad10e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 28 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
View file

@ -93,7 +93,9 @@ export const AppCanvas = ({ moduleId, appId, isViewerSidebarPinned }) => {
}}
className={`app-${appId}`}
>
<AutoComputeMobileLayoutAlert currentLayout={currentLayout} darkMode={isAppDarkMode} />
{currentMode === 'edit' && (
<AutoComputeMobileLayoutAlert currentLayout={currentLayout} darkMode={isAppDarkMode} />
)}
<DeleteWidgetConfirmation darkMode={isAppDarkMode} />
<HotkeyProvider mode={currentMode} canvasMaxWidth={canvasMaxWidth} currentLayout={currentLayout}>
{environmentLoadingState !== 'loading' && (

32
frontend/src/AppBuilder/Viewer/MobileHeader.jsx
View file

@ -22,7 +22,12 @@ const MobileHeader = ({
setAppDefinitionFromVersion,
showViewerNavigation,
}) => {
const isVersionReleased = useStore((state) => state.isVersionReleased);
const { isReleasedVersionId } = useStore(
(state) => ({
isReleasedVersionId: state?.releasedVersionId == state.currentVersionId || state.isVersionReleased,
}),
shallow
);
const editingVersion = useStore((state) => state.editingVersion);
const showDarkModeToggle = useStore((state) => state.globalSettings.appMode === 'auto');
@ -33,7 +38,7 @@ const MobileHeader = ({
const _renderAppNameAndLogo = () => (
<div
className={classNames('d-flex', 'align-items-center')}
style={{ visibility: showHeader || isVersionReleased ? 'visible' : 'hidden' }}
style={{ visibility: showHeader || isReleasedVersionId ? 'visible' : 'hidden' }}
>
<h1 className="navbar-brand d-none-navbar-horizontal pe-0">
<Link
@ -66,14 +71,15 @@ const MobileHeader = ({
/>
);
const _renderPreviewSettings = () => (
<PreviewSettings
isMobileLayout
showHeader={showHeader}
setAppDefinitionFromVersion={setAppDefinitionFromVersion}
darkMode={darkMode}
/>
);
const _renderPreviewSettings = () =>
!isReleasedVersionId && (
<PreviewSettings
isMobileLayout
showHeader={showHeader}
setAppDefinitionFromVersion={setAppDefinitionFromVersion}
darkMode={darkMode}
/>
);
const _renderDarkModeBtn = (args) => {
if (!showDarkModeToggle) return null;
@ -88,11 +94,11 @@ const MobileHeader = ({
);
};
if (!showHeader && isVersionReleased) {
if (!showHeader && isReleasedVersionId) {
return <>{showViewerNavigation ? _renderMobileNavigationMenu() : _renderDarkModeBtn()}</>;
}
if (!showHeader && !isVersionReleased) {
if (!showHeader && !isReleasedVersionId) {
return (
<>
<Header
@ -122,7 +128,7 @@ const MobileHeader = ({
<span style={{}}>{_renderAppNameAndLogo()}</span>
{_renderMobileNavigationMenu()}
</div>
{!isVersionReleased && !isEmpty(editingVersion) && _renderPreviewSettings()}
{!isReleasedVersionId && !isEmpty(editingVersion) && _renderPreviewSettings()}
{!showViewerNavigation && _renderDarkModeBtn({ styles: { top: '2px' } })}
</Header>
);

8
frontend/src/AppBuilder/Viewer/Viewer.jsx
View file

@ -39,6 +39,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
homePageId,
isMaintenanceOn,
setIsViewer,
toggleCurrentLayout,
} = useStore(
(state) => ({
isEditorLoading: state.isEditorLoading,
@ -58,6 +59,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
updateCanvasHeight: state.updateCanvasBottomHeight,
isMaintenanceOn: state.app.isMaintenanceOn,
setIsViewer: state.setIsViewer,
toggleCurrentLayout: state.toggleCurrentLayout,
}),
shallow
);
@ -65,6 +67,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
const currentPageComponents = useMemo(() => getCurrentPageComponents, [getCurrentPageComponents]);
const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
const canvasBgColor = useStore((state) => state.getCanvasBackgroundColor('canvas', darkMode), shallow);
const deviceWindowWidth = window.screen.width - 5;
const computeCanvasMaxWidth = useCallback(() => {
if (globalSettings?.maxCanvasWidth) {
@ -89,7 +92,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
const isLoading = false;
const isMobilePreviewMode = selectedVersion?.id && currentLayout === 'mobile';
const isAppLoaded = !!editingVersion;
const deviceWindowWidth = window.screen.width - 5;
const isMobileDevice = deviceWindowWidth < 600;
const switchPage = useStore((state) => state.switchPage);
@ -103,6 +105,8 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
switchDarkMode(newMode);
};
useEffect(() => {
const isMobileDevice = deviceWindowWidth < 600;
toggleCurrentLayout(isMobileDevice ? 'mobile' : 'desktop');
setIsViewer(true);
return () => {
setIsViewer(false);
@ -167,7 +171,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
}}
>
<div className={`areas d-flex flex-rows app-${appId}`}>
{!isPagesSidebarHidden && (
{currentLayout !== 'mobile' && !isPagesSidebarHidden && (
<ViewerSidebarNavigation
showHeader={showHeader}
isMobileDevice={currentLayout === 'mobile'}