Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #11227 from ToolJet/fix/p1-bugs

Browse source 
Fix: viewer canvas and sidebar scroll
This commit is contained in:
Johnson Cherian 2024-11-06 17:13:36 +05:30 committed by GitHub
commit 2989da8a83
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,12 +31,12 @@ export const AppCanvas = ({ moduleId, appId, isViewerSidebarPinned }) => {
const currentLayout = useStore((state) => state.currentLayout, shallow); const currentLayout = useStore((state) => state.currentLayout, shallow);
const queryPanelHeight = useStore((state) => state?.queryPanel?.queryPanelHeight || 0); const queryPanelHeight = useStore((state) => state?.queryPanel?.queryPanelHeight || 0);
const isDraggingQueryPane = useStore((state) => state.queryPanel.isDraggingQueryPane, shallow); const isDraggingQueryPane = useStore((state) => state.queryPanel.isDraggingQueryPane, shallow);
const { isAppDarkMode } = useAppDarkMode();
const canvasBgColor = useStore((state) => state.getCanvasBackgroundColor('canvas', isAppDarkMode), shallow); const canvasBgColor = useStore((state) => state.getCanvasBackgroundColor('canvas', isAppDarkMode), shallow);
const canvasContainerHeight = computeCanvasContainerHeight(queryPanelHeight, isDraggingQueryPane); const canvasContainerHeight = computeCanvasContainerHeight(queryPanelHeight, isDraggingQueryPane);
const isAutoMobileLayout = useStore((state) => state.getIsAutoMobileLayout(), shallow); const isAutoMobileLayout = useStore((state) => state.getIsAutoMobileLayout(), shallow);
const setIsComponentLayoutReady = useStore((state) => state.setIsComponentLayoutReady, shallow); const setIsComponentLayoutReady = useStore((state) => state.setIsComponentLayoutReady, shallow);
const canvasMaxWidth = useAppCanvasMaxWidth({ mode: currentMode }); const canvasMaxWidth = useAppCanvasMaxWidth({ mode: currentMode });
const { isAppDarkMode } = useAppDarkMode();
const editorMarginLeft = useSidebarMargin(canvasContainerRef); const editorMarginLeft = useSidebarMargin(canvasContainerRef);
const pageSwitchInProgress = useStore((state) => state.pageSwitchInProgress); const pageSwitchInProgress = useStore((state) => state.pageSwitchInProgress);
const setPageSwitchInProgress = useStore((state) => state.setPageSwitchInProgress); const setPageSwitchInProgress = useStore((state) => state.setPageSwitchInProgress);
@ -71,8 +71,8 @@ export const AppCanvas = ({ moduleId, appId, isViewerSidebarPinned }) => {
// transform: `scale(1)`, // transform: `scale(1)`,
borderLeft: editorMarginLeft + 'px solid', borderLeft: editorMarginLeft + 'px solid',
height: currentMode === 'edit' ? canvasContainerHeight : '100%', height: currentMode === 'edit' ? canvasContainerHeight : '100%',
// backgroundColor: canvasBgColor, backgroundColor: canvasBgColor,
background: !isAppDarkMode ? '#EBEBEF' : '#2E3035', // background: !isAppDarkMode ? '#EBEBEF' : '#2E3035',
marginLeft: marginLeft:
isViewerSidebarPinned && currentLayout !== 'mobile' && currentMode !== 'edit' isViewerSidebarPinned && currentLayout !== 'mobile' && currentMode !== 'edit'
? pageSidebarStyle === 'icon' ? pageSidebarStyle === 'icon'

6
frontend/src/AppBuilder/LeftSidebar/PageMenu/style.scss
View file

@ -1,3 +1,9 @@
.PopoverContent {
&.page {
min-height: unset !important;
}
}
.edit-page-overlay-toggle { .edit-page-overlay-toggle {
opacity: 0; opacity: 0;
transition: opacity 0.1s; transition: opacity 0.1s;

2
frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx
View file

@ -112,7 +112,7 @@ export const ViewerSidebarNavigation = ({
borderRight: !styles?.borderColor?.isDefault ? `1px solid ${styles?.borderColor?.value}` : '', borderRight: !styles?.borderColor?.isDefault ? `1px solid ${styles?.borderColor?.value}` : '',
}} }}
> >
<div className="position-relative"> <div className="position-relative" style={{ height: '100%' }}>
<ButtonSolid <ButtonSolid
onClick={() => { onClick={() => {
toggleSidebarPinned(); toggleSidebarPinned();

1
frontend/src/AppBuilder/_stores/slices/appSlice.js
View file

@ -122,7 +122,6 @@ export const createAppSlice = (set, get) => ({
const appId = get().app.appId; const appId = get().app.appId;
const filteredQueryParams = queryParams.filter(([key, value]) => { const filteredQueryParams = queryParams.filter(([key, value]) => {
if (!value) return false; if (!value) return false;
if (key === 'env' && !isLicenseValid()) return false;
return true; return true;
}); });

7
frontend/src/_styles/left-sidebar.scss
View file

@ -571,6 +571,13 @@
.page-handler-wrapper { .page-handler-wrapper {
background: transparent; background: transparent;
height: 100%;
scrollbar-width: none;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
.tj-list-item-selected { .tj-list-item-selected {
.custom-icon { .custom-icon {