From 997d969ee69fba4f25e6e3bf41864955bcf02c6d Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Mon, 4 Apr 2022 12:23:53 +0300 Subject: [PATCH 1/5] fix height on resize/ moving from one screen to another --- src/app/views/App.styles.ts | 5 ++-- src/app/views/App.tsx | 25 ++++++++++++------- src/app/views/common/monaco/monaco.scss | 1 + .../views/query-response/QueryResponse.tsx | 22 ++++++---------- .../views/query-runner/request/Request.tsx | 5 ++-- 5 files changed, 30 insertions(+), 28 deletions(-) diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts index cae2e5430..ae617cd97 100644 --- a/src/app/views/App.styles.ts +++ b/src/app/views/App.styles.ts @@ -11,7 +11,8 @@ export const appStyles = (theme: ITheme) => { paddingRight: '15px', paddingLeft: '4px', marginLeft: 'auto', - marginRight: 'auto' + marginRight: 'auto', + borderBottom: '1px solid black' }, appRow: { display: 'flex', @@ -67,7 +68,7 @@ export const appStyles = (theme: ITheme) => { statusAreaMobileScreen: { marginTop: 5 }, - statusAreaLaptopScreen: { + statusAreaFullScreen: { marginTop: 0 }, vResizeHandle: { diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 993a10885..3abdb1bb7 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -71,7 +71,7 @@ class App extends Component { private mediaQueryList = window.matchMedia('(max-width: 992px)'); private currentTheme: ITheme = getTheme(); private statusAreaMobileStyle = appStyles(this.currentTheme).statusAreaMobileScreen; - private statusAreaLaptopStyle = appStyles(this.currentTheme).statusAreaLaptopScreen; + private statusAreaFullScreenStyle = appStyles(this.currentTheme).statusAreaFullScreen; constructor(props: IAppProps) { super(props); @@ -418,7 +418,8 @@ class App extends Component { />
+ marginRight: showSidebar && '-20px', + height: !mobileScreen ? '100vh' : '100%' }}> {graphExplorerMode === Mode.Complete && ( { {displayContent && ( { width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth, height: contentHeight }} - style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'} : {}} + style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'} : { + overflow: 'hidden', + display: 'flex', + flexDirection: 'column' + }} > -
+
-
+
-
-
+
+
- +
+ +
)} diff --git a/src/app/views/common/monaco/monaco.scss b/src/app/views/common/monaco/monaco.scss index 123fa242a..168d05a5d 100644 --- a/src/app/views/common/monaco/monaco.scss +++ b/src/app/views/common/monaco/monaco.scss @@ -5,6 +5,7 @@ margin-top: 5px; padding-bottom: $gutter; width: inherit !important; + overflow: hidden; .react-monaco-editor-container { width: inherit !important; diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx index 93f422ae5..11926fb6c 100644 --- a/src/app/views/query-response/QueryResponse.tsx +++ b/src/app/views/query-response/QueryResponse.tsx @@ -4,7 +4,7 @@ import { Modal, Pivot, PivotItem, TooltipHost } from '@fluentui/react'; import { Resizable } from 're-resizable'; -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { injectIntl } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; import { componentNames, eventTypes, telemetry } from '../../../telemetry'; @@ -16,7 +16,6 @@ import { sanitizeQueryUrl } from '../../utils/query-url-sanitization'; import { expandResponseArea } from '../../services/actions/response-expanded-action-creator'; import { translateMessage } from '../../utils/translate-messages'; import { copy } from '../common/copy'; -import { convertVhToPx } from '../common/dimensions/dimensions-adjustment'; import { getPivotItems, onPivotItemClick } from './pivot-items/pivot-items'; import './query-response.scss'; import { IRootState } from '../../../types/root'; @@ -29,17 +28,12 @@ const QueryResponse = (props: IQueryResponseProps) => { const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true); const [showModal, setShowModal] = useState(false); const [query] = useState(''); - const [responseHeight, setResponseHeight] = useState('610px'); - const { dimensions, sampleQuery } = useSelector((state: IRootState) => state); + const { sampleQuery } = useSelector((state: IRootState) => state); const { intl: { messages } }: any = props; - useEffect(() => { - setResponseHeight(convertVhToPx(dimensions.response.height, 50)); - }, [dimensions]); - const toggleShareQueryDialogState = () => { setShareQuaryDialogStatus(!showShareQueryDialog); }; @@ -96,13 +90,13 @@ const QueryResponse = (props: IQueryResponseProps) => { { >
{ const { handleOnEditorChange, mode, - profile, intl: { messages } }: any = this.props; @@ -181,7 +179,8 @@ export class Request extends Component { { if (ref && ref.style && ref.style.height) { From ac372694fa5b380f73cd7a52853254fa0467c0c5 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Mon, 4 Apr 2022 12:24:15 +0300 Subject: [PATCH 2/5] fix resize handle height --- src/app/services/reducers/dimensions-reducers.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/services/reducers/dimensions-reducers.ts b/src/app/services/reducers/dimensions-reducers.ts index 91ea91c2d..7d189393b 100644 --- a/src/app/services/reducers/dimensions-reducers.ts +++ b/src/app/services/reducers/dimensions-reducers.ts @@ -13,11 +13,11 @@ const initialState: IDimensions = { }, sidebar: { width: '26%', - height: '' + height: '100%' }, content: { width: '74%', - height: '' + height: '100%' } }; From c187ce35d0690586209c357cf7c967d06db0efd7 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Mon, 4 Apr 2022 12:31:43 +0300 Subject: [PATCH 3/5] simplify condition --- src/app/views/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 3abdb1bb7..6477290ce 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -419,7 +419,7 @@ class App extends Component {
+ height: mobileScreen ? '100%' : '100vh' }}> {graphExplorerMode === Mode.Complete && ( Date: Mon, 4 Apr 2022 12:47:47 +0300 Subject: [PATCH 4/5] refactor styles to styles file --- src/app/views/App.styles.ts | 11 +++++++++++ src/app/views/App.tsx | 12 +++++------- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts index ae617cd97..9cd251e19 100644 --- a/src/app/views/App.styles.ts +++ b/src/app/views/App.styles.ts @@ -86,6 +86,17 @@ export const appStyles = (theme: ITheme) => { position: 'absolute', top: '13px', right: '10px' + }, + mainContent: { + overflow: 'hidden', + display: 'flex', + flexDirection: 'column' as 'column' + }, + queryResponse: { + display: 'flex', + flexDirection: 'column' as 'column', + height: '100%', + overflow: 'hidden' } }; }; diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 6477290ce..6c12d58eb 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -72,6 +72,8 @@ class App extends Component { private currentTheme: ITheme = getTheme(); private statusAreaMobileStyle = appStyles(this.currentTheme).statusAreaMobileScreen; private statusAreaFullScreenStyle = appStyles(this.currentTheme).statusAreaFullScreen; + private contentStyle = appStyles(this.currentTheme).mainContent; + private queryResponseStyle = appStyles(this.currentTheme).queryResponse; constructor(props: IAppProps) { super(props); @@ -478,11 +480,7 @@ class App extends Component { width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth, height: contentHeight }} - style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'} : { - overflow: 'hidden', - display: 'flex', - flexDirection: 'column' - }} + style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'} : this.contentStyle } >
@@ -491,11 +489,11 @@ class App extends Component {
-
+
-
+
From 3c441b818b5fb44dc3a1a3acbc661060f5701b9b Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Mon, 4 Apr 2022 12:51:47 +0300 Subject: [PATCH 5/5] hide overflow when sidebar is hidden --- src/app/views/App.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 6c12d58eb..39557efc5 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -480,7 +480,8 @@ class App extends Component { width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth, height: contentHeight }} - style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'} : this.contentStyle } + style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px', overflow: 'hidden'} + : this.contentStyle } >