From 6784715ba4fb4a9afc679355992de8fb244cddb3 Mon Sep 17 00:00:00 2001 From: "s.teleshev" Date: Thu, 28 Dec 2023 00:10:32 +0100 Subject: [PATCH 1/2] CB-4275 feat: app height set via js --- webapp/packages/core-app/src/Body.m.css | 12 ++++++------ webapp/packages/core-app/src/Body.tsx | 16 ++++++++++++++++ .../CommonDialog/CommonDialogWrapper.m.css | 6 +++--- .../packages/core-blocks/src/DisplayError.m.css | 2 +- .../core-bootstrap/src/renderLayout.m.css | 4 ++-- .../src/Dialog/AuthDialog.m.css | 2 +- 6 files changed, 29 insertions(+), 13 deletions(-) diff --git a/webapp/packages/core-app/src/Body.m.css b/webapp/packages/core-app/src/Body.m.css index 60f9ce527a..82a6e1457b 100644 --- a/webapp/packages/core-app/src/Body.m.css +++ b/webapp/packages/core-app/src/Body.m.css @@ -1,8 +1,8 @@ .bodyContent { - composes: theme-background-surface theme-text-on-surface theme-typography from global; - height: 100vh; - display: flex; - padding: 0 !important; - flex-direction: column; - overflow: hidden; + composes: theme-background-surface theme-text-on-surface theme-typography from global; + height: var(--app-height); + display: flex; + padding: 0 !important; + flex-direction: column; + overflow: hidden; } diff --git a/webapp/packages/core-app/src/Body.tsx b/webapp/packages/core-app/src/Body.tsx index bf74491a03..dbbb6dd9e5 100644 --- a/webapp/packages/core-app/src/Body.tsx +++ b/webapp/packages/core-app/src/Body.tsx @@ -17,6 +17,7 @@ import { SessionPermissionsResource } from '@cloudbeaver/core-root'; import { ScreenService } from '@cloudbeaver/core-routing'; import { ThemeService } from '@cloudbeaver/core-theming'; import { DNDProvider } from '@cloudbeaver/core-ui'; +import { throttle } from '@cloudbeaver/core-utils'; import { useAppVersion } from '@cloudbeaver/core-version'; import style from './Body.m.css'; @@ -34,6 +35,12 @@ export const Body = observer(function Body() { // TODO: must be loaded in place where it is used useResource(Body, ProjectInfoResource, CachedMapAllKey, { silent: true }); + // we need it because 100vh cuts the bottom of the page on mobile devices + const handleBodyHeight = throttle(() => { + const doc = document.documentElement; + doc.style.setProperty('--app-height', `${window.innerHeight}px`); + }, 50); + // sync classes from theme with body for popup components and etc useLayoutEffect(() => { if (ref.current) { @@ -42,6 +49,15 @@ export const Body = observer(function Body() { document.documentElement.dataset.backendVersion = backendVersion; }); + useLayoutEffect(() => { + handleBodyHeight(); + window.addEventListener('resize', handleBodyHeight); + + return () => { + window.removeEventListener('resize', handleBodyHeight); + }; + }, []); + return ( diff --git a/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.css b/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.css index de8c1dcc8b..5b75c7d969 100644 --- a/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.css +++ b/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.css @@ -21,7 +21,7 @@ &.small { min-width: 404px; min-height: 262px; - max-height: max(100vh - 48px, 262px); + max-height: max(var(--app-height) - 48px, 262px); &.fixedSize { width: 404px; @@ -34,7 +34,7 @@ &.medium { min-width: 576px; min-height: 374px; - max-height: max(100vh - 48px, 374px); + max-height: max(var(--app-height) - 48px, 374px); &.fixedSize { width: 576px; @@ -47,7 +47,7 @@ &.large { min-width: 720px; min-height: 468px; - max-height: max(100vh - 48px, 468px); + max-height: max(var(--app-height) - 48px, 468px); &.fixedSize { width: 720px; diff --git a/webapp/packages/core-blocks/src/DisplayError.m.css b/webapp/packages/core-blocks/src/DisplayError.m.css index a9dca10b17..8254e30bc5 100644 --- a/webapp/packages/core-blocks/src/DisplayError.m.css +++ b/webapp/packages/core-blocks/src/DisplayError.m.css @@ -5,7 +5,7 @@ overflow: auto; &.root { - height: 100vh; + height: var(--app-height); } } .errorInnerBlock { diff --git a/webapp/packages/core-bootstrap/src/renderLayout.m.css b/webapp/packages/core-bootstrap/src/renderLayout.m.css index 028a292406..729727bf6c 100644 --- a/webapp/packages/core-bootstrap/src/renderLayout.m.css +++ b/webapp/packages/core-bootstrap/src/renderLayout.m.css @@ -1,3 +1,3 @@ .loader { - height: 100vh; -} \ No newline at end of file + height: var(--app-height); +} diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.m.css b/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.m.css index 1ed904ac9b..a3db0276b3 100644 --- a/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.m.css +++ b/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.m.css @@ -1,6 +1,6 @@ .wrapper { min-height: 520px !important; - max-height: max(100vh - 48px, 520px) !important; + max-height: max(var(--app-height) - 48px, 520px) !important; } .submittingForm { overflow: auto; From 22c6cfc82bf843d87394c8465d7ec418cfcc2f69 Mon Sep 17 00:00:00 2001 From: "s.teleshev" Date: Thu, 28 Dec 2023 13:19:42 +0100 Subject: [PATCH 2/2] CB-4275 useAppHeight + set default height for the app --- webapp/packages/core-app/src/Body.tsx | 17 ++---------- webapp/packages/core-app/src/useAppHeight.ts | 27 +++++++++++++++++++ .../core-theming/src/styles/_variables.scss | 7 ++--- 3 files changed, 33 insertions(+), 18 deletions(-) create mode 100644 webapp/packages/core-app/src/useAppHeight.ts diff --git a/webapp/packages/core-app/src/Body.tsx b/webapp/packages/core-app/src/Body.tsx index dbbb6dd9e5..1729fe301c 100644 --- a/webapp/packages/core-app/src/Body.tsx +++ b/webapp/packages/core-app/src/Body.tsx @@ -17,10 +17,10 @@ import { SessionPermissionsResource } from '@cloudbeaver/core-root'; import { ScreenService } from '@cloudbeaver/core-routing'; import { ThemeService } from '@cloudbeaver/core-theming'; import { DNDProvider } from '@cloudbeaver/core-ui'; -import { throttle } from '@cloudbeaver/core-utils'; import { useAppVersion } from '@cloudbeaver/core-version'; import style from './Body.m.css'; +import { useAppHeight } from './useAppHeight'; export const Body = observer(function Body() { // const serverConfigLoader = useResource(Body, ServerConfigResource, undefined); @@ -35,12 +35,6 @@ export const Body = observer(function Body() { // TODO: must be loaded in place where it is used useResource(Body, ProjectInfoResource, CachedMapAllKey, { silent: true }); - // we need it because 100vh cuts the bottom of the page on mobile devices - const handleBodyHeight = throttle(() => { - const doc = document.documentElement; - doc.style.setProperty('--app-height', `${window.innerHeight}px`); - }, 50); - // sync classes from theme with body for popup components and etc useLayoutEffect(() => { if (ref.current) { @@ -49,14 +43,7 @@ export const Body = observer(function Body() { document.documentElement.dataset.backendVersion = backendVersion; }); - useLayoutEffect(() => { - handleBodyHeight(); - window.addEventListener('resize', handleBodyHeight); - - return () => { - window.removeEventListener('resize', handleBodyHeight); - }; - }, []); + useAppHeight(); return ( diff --git a/webapp/packages/core-app/src/useAppHeight.ts b/webapp/packages/core-app/src/useAppHeight.ts new file mode 100644 index 0000000000..21f5241fd9 --- /dev/null +++ b/webapp/packages/core-app/src/useAppHeight.ts @@ -0,0 +1,27 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2023 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +import { useLayoutEffect } from 'react'; + +import { throttle } from '@cloudbeaver/core-utils'; + +// we need it because 100vh cuts the bottom of the page on mobile devices +const handleBodyHeight = throttle(() => { + const doc = document.documentElement; + doc.style.setProperty('--app-height', `${window.innerHeight}px`); +}, 50); + +export function useAppHeight() { + useLayoutEffect(() => { + handleBodyHeight(); + window.addEventListener('resize', handleBodyHeight); + + return () => { + window.removeEventListener('resize', handleBodyHeight); + }; + }); +} diff --git a/webapp/packages/core-theming/src/styles/_variables.scss b/webapp/packages/core-theming/src/styles/_variables.scss index d1a5ed2085..5e842c761a 100644 --- a/webapp/packages/core-theming/src/styles/_variables.scss +++ b/webapp/packages/core-theming/src/styles/_variables.scss @@ -26,20 +26,21 @@ $mdc-theme-extra-property-values: ( $mdc-theme-property-values: map-merge($mdc-theme-property-values, $mdc-theme-extra-property-values); -$theme-class: "theme-#{$theme-name}"; +$theme-class: 'theme-#{$theme-name}'; $theme-form-element-radius: 3px !default; $theme-group-element-radius: 4px !default; $theme-menu-bar-small-action-radius: 3px !default; +$app-height: 100vh !default; @mixin css-variables { .theme-form-element-radius { border-radius: $theme-form-element-radius; } - + .theme-group-element-radius { border-radius: $theme-group-element-radius; } - + .theme-menu-bar-small-action-radius { border-radius: $theme-menu-bar-small-action-radius; }