diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss index f6ff5619bfc53..6c21c9760be97 100644 --- a/src/core/public/_variables.scss +++ b/src/core/public/_variables.scss @@ -1,7 +1,7 @@ @import '@elastic/eui/src/global_styling/variables/header'; // height of the header banner -$kbnHeaderBannerHeight: $euiSizeXL; +$kbnHeaderBannerHeight: $euiSizeXL; // This value is also declared in `/x-pack/plugins/canvas/common/lib/constants.ts` // total height of the header (when the banner is *not* present) $kbnHeaderOffset: $euiHeaderHeightCompensation * 2; // total height of the header when the banner is present diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss index 92ba28ff70887..18e564abf822f 100644 --- a/src/core/public/rendering/_base.scss +++ b/src/core/public/rendering/_base.scss @@ -49,6 +49,12 @@ &.kbnBody--hasHeaderBanner { @include kbnAffordForHeader($kbnHeaderOffsetWithBanner); + + // Prevents banners from covering full screen data grids + .euiDataGrid--fullScreen { + height: calc(100vh - #{$kbnHeaderBannerHeight}); + top: $kbnHeaderBannerHeight; + } } &.kbnBody--chromeHidden { @include kbnAffordForHeader(0); diff --git a/x-pack/plugins/canvas/common/lib/constants.ts b/x-pack/plugins/canvas/common/lib/constants.ts index 2b916033ce557..7212baf2414ea 100644 --- a/x-pack/plugins/canvas/common/lib/constants.ts +++ b/x-pack/plugins/canvas/common/lib/constants.ts @@ -45,3 +45,4 @@ export const CANVAS_EMBEDDABLE_CLASSNAME = `canvasEmbeddable`; export const CONTEXT_MENU_TOP_BORDER_CLASSNAME = 'canvasContextMenu--topBorder'; export const API_ROUTE_FUNCTIONS = `${API_ROUTE}/fns`; export const ESSQL_SEARCH_STRATEGY = 'essql'; +export const HEADER_BANNER_HEIGHT = 32; // This value is also declared in `/src/core/public/_variables.scss` diff --git a/x-pack/plugins/canvas/public/components/workpad/index.js b/x-pack/plugins/canvas/public/components/workpad/index.js index 2ebefa5e0e322..ae9b6a1fee22c 100644 --- a/x-pack/plugins/canvas/public/components/workpad/index.js +++ b/x-pack/plugins/canvas/public/components/workpad/index.js @@ -8,6 +8,7 @@ import React, { useContext, useCallback } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { pure, compose, withState, withProps, getContext, withHandlers } from 'recompose'; +import useObservable from 'react-use/lib/useObservable'; import { transitionsRegistry } from '../../lib/transitions_registry'; import { fetchAllRenderables } from '../../state/actions/elements'; import { setZoomScale } from '../../state/actions/transient'; @@ -22,6 +23,7 @@ import { zoomHandlerCreators } from '../../lib/app_handler_creators'; import { trackCanvasUiMetric, METRIC_TYPE } from '../../lib/ui_metric'; import { LAUNCHED_FULLSCREEN, LAUNCHED_FULLSCREEN_AUTOPLAY } from '../../../common/lib/constants'; import { WorkpadRoutingContext } from '../../routes/workpad'; +import { usePlatformService } from '../../services'; import { Workpad as WorkpadComponent } from './workpad'; const mapStateToProps = (state) => { @@ -57,6 +59,10 @@ const AddContexts = (props) => { WorkpadRoutingContext ); + const platformService = usePlatformService(); + + const hasHeaderBanner = useObservable(platformService.hasHeaderBanner$()); + const setFullscreenWithEffect = useCallback( (fullscreen) => { setFullscreen(fullscreen); @@ -79,6 +85,7 @@ const AddContexts = (props) => { isFullscreen={isFullscreen} undoHistory={undo} redoHistory={redo} + hasHeaderBanner={hasHeaderBanner} /> ); }; diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js index 1e46558c7a377..9e1c0588e447b 100644 --- a/x-pack/plugins/canvas/public/components/workpad/workpad.js +++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js @@ -12,7 +12,7 @@ import Style from 'style-it'; import { WorkpadPage } from '../workpad_page'; import { Fullscreen } from '../fullscreen'; import { isTextInput } from '../../lib/is_text_input'; -import { WORKPAD_CANVAS_BUFFER } from '../../../common/lib/constants'; +import { HEADER_BANNER_HEIGHT, WORKPAD_CANVAS_BUFFER } from '../../../common/lib/constants'; export class Workpad extends React.PureComponent { static propTypes = { @@ -37,6 +37,7 @@ export class Workpad extends React.PureComponent { zoomIn: PropTypes.func.isRequired, zoomOut: PropTypes.func.isRequired, resetZoom: PropTypes.func.isRequired, + hasHeaderBanner: PropTypes.bool, }; _toggleFullscreen = () => { @@ -80,6 +81,7 @@ export class Workpad extends React.PureComponent { registerLayout, unregisterLayout, zoomScale, + hasHeaderBanner = false, } = this.props; const bufferStyle = { @@ -87,6 +89,8 @@ export class Workpad extends React.PureComponent { width: isFullscreen ? width : (width + 2 * WORKPAD_CANVAS_BUFFER) * zoomScale, }; + const headerBannerOffset = hasHeaderBanner ? HEADER_BANNER_HEIGHT : 0; + return (
{({ isFullscreen, windowSize }) => { - const scale = Math.min(windowSize.height / height, windowSize.width / width); + const scale = Math.min( + (windowSize.height - headerBannerOffset) / height, + windowSize.width / width + ); + const fsStyle = isFullscreen ? { transform: `scale3d(${scale}, ${scale}, 1)`, @@ -112,6 +120,7 @@ export class Workpad extends React.PureComponent { msTransform: `scale3d(${scale}, ${scale}, 1)`, height: windowSize.height < height ? 'auto' : height, width: windowSize.width < width ? 'auto' : width, + top: hasHeaderBanner ? `${headerBannerOffset / 2}px` : undefined, } : {}; diff --git a/x-pack/plugins/canvas/public/services/kibana/platform.ts b/x-pack/plugins/canvas/public/services/kibana/platform.ts index f71d480b552f6..dc524aab6f444 100644 --- a/x-pack/plugins/canvas/public/services/kibana/platform.ts +++ b/x-pack/plugins/canvas/public/services/kibana/platform.ts @@ -30,6 +30,7 @@ export const platformServiceFactory: CanvaPlatformServiceFactory = ({ coreStart, // though we don't do this. So this cast may be the best option. getHasWriteAccess: () => coreStart.application.capabilities.canvas.save as boolean, getUISetting: coreStart.uiSettings.get.bind(coreStart.uiSettings), + hasHeaderBanner$: coreStart.chrome.hasHeaderBanner$, setBreadcrumbs: coreStart.chrome.setBreadcrumbs, setRecentlyAccessed: coreStart.chrome.recentlyAccessed.add, setFullscreen: coreStart.chrome.setIsVisible, diff --git a/x-pack/plugins/canvas/public/services/platform.ts b/x-pack/plugins/canvas/public/services/platform.ts index b622484c16fc3..9bff61a0c668a 100644 --- a/x-pack/plugins/canvas/public/services/platform.ts +++ b/x-pack/plugins/canvas/public/services/platform.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { Observable } from 'rxjs'; import { SavedObjectsStart, SavedObjectsClientContract, @@ -22,6 +23,7 @@ export interface CanvasPlatformService { getKibanaVersion: () => string; getHasWriteAccess: () => boolean; getUISetting: (key: string, defaultValue?: any) => any; + hasHeaderBanner$: () => Observable; setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void; setRecentlyAccessed: (link: string, label: string, id: string) => void; setFullscreen: ChromeStart['setIsVisible']; diff --git a/x-pack/plugins/canvas/public/services/stubs/platform.ts b/x-pack/plugins/canvas/public/services/stubs/platform.ts index 1daaa6bd32f09..3942fcf145cee 100644 --- a/x-pack/plugins/canvas/public/services/stubs/platform.ts +++ b/x-pack/plugins/canvas/public/services/stubs/platform.ts @@ -27,6 +27,7 @@ export const platformServiceFactory: CanvasPlatformServiceFactory = () => ({ getKibanaVersion: () => 'kibanaVersion', getHasWriteAccess: () => true, getUISetting, + hasHeaderBanner$: noop, setBreadcrumbs: noop, setRecentlyAccessed: noop, getSavedObjects: noop,