jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix scrolling of query items and JSON details view

Browse Source 
Summary: This diff fixes the tripple scrollbars in the graphQL plugin, and makes sure scrollbars for the detail panel are properly shown

Reviewed By: jonathoma

Differential Revision: D21177849

fbshipit-source-id: d40173d7e9a45064b608c8d953c7aea47a4acd0f
This commit is contained in:
Michel Weststrate
2020-04-23 03:45:43 -07:00
committed by Facebook GitHub Bot
parent 4665bcf218
commit 67412bfb43
4 changed files with 74 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/app/src/PluginContainer.tsx
View File

@@ -55,7 +55,7 @@ const Container = styled(FlexColumn)({
export const SidebarContainer = styled(FlexRow)({
backgroundColor: colors.light02,
height: '100%',
overflow: 'scroll',
overflow: 'auto',
});
const Waiting = styled(FlexColumn)({

2
desktop/app/src/ui/components/Panel.tsx
View File

@@ -121,7 +121,7 @@ export default class Panel extends React.Component<
borderTop: 'none',
flexGrow: 1,
padding: props.padded ? 10 : 0,
overflow: 'visible',
overflow: 'hidden',
}),
);
state = {

4
desktop/app/src/ui/components/Sidebar.tsx
View File

@@ -181,9 +181,7 @@ export default class Sidebar extends Component<SidebarProps, SidebarState> {
width={horizontal ? (onResize ? width : this.state.width) : undefined}
minHeight={minHeight}
maxHeight={maxHeight}
height={
!horizontal ? (onResize ? height : this.state.height) : undefined
}
height={!horizontal ? (onResize ? height : this.state.height) : '100%'}
resizable={resizable}
onResize={this.onResize}>
<SidebarContainer position={position} backgroundColor={backgroundColor}>

137
desktop/app/src/ui/components/searchable/Searchable.tsx
View File

@@ -22,6 +22,7 @@ import styled from '@emotion/styled';
import debounce from 'lodash.debounce';
import ToggleButton from '../ToggleSwitch';
import React from 'react';
import VerticalContainer from '../Layout';
const SearchBar = styled(Toolbar)({
height: 42,
@@ -464,73 +465,77 @@ const Searchable = (
render() {
const {placeholder, actions, ...props} = this.props;
return [
<SearchBar position="top" key="searchbar">
<SearchBox tabIndex={-1}>
<SearchIcon
name="magnifying-glass"
color={colors.macOSTitleBarIcon}
size={16}
/>
{this.state.filters.map((filter, i) => (
<FilterToken
key={`${filter.key}:${filter.type}`}
index={i}
filter={filter}
focused={i === this.state.focusedToken}
onFocus={this.onTokenFocus}
onDelete={this.removeFilter}
onReplace={this.replaceFilter}
onBlur={this.onTokenBlur}
return (
<VerticalContainer scrollable>
<SearchBar position="top" key="searchbar">
<SearchBox tabIndex={-1}>
<SearchIcon
name="magnifying-glass"
color={colors.macOSTitleBarIcon}
size={16}
/>
))}
<SearchInput
placeholder={placeholder}
onChange={this.onChangeSearchTerm}
value={this.state.searchTerm}
ref={this.setInputRef}
onFocus={this.onInputFocus}
onBlur={this.onInputBlur}
isValidInput={
this.state.regexEnabled
? this.state.compiledRegex !== null
: true
}
regex={Boolean(this.state.regexEnabled && this.state.searchTerm)}
/>
{(this.state.searchTerm || this.state.filters.length > 0) && (
<Clear onClick={this.clear}>&times;</Clear>
)}
</SearchBox>
{this.props.allowRegexSearch ? (
<ToggleButton
toggled={this.state.regexEnabled}
onClick={this.onRegexToggled}
label={'Regex'}
/>
) : null}
{this.props.allowBodySearch ? (
<ToggleButton
toggled={this.state.bodySearchEnabled}
onClick={this.onBodySearchToggled}
label={'Body'}
tooltip={
'Search request and response bodies (warning: this can be quite slow)'
}
/>
) : null}
{actions != null && <Actions>{actions}</Actions>}
</SearchBar>,
<Component
{...props}
key="table"
addFilter={this.addFilter}
searchTerm={this.state.searchTerm}
regexEnabled={this.state.regexEnabled}
bodySearchEnabled={this.state.bodySearchEnabled}
filters={this.state.filters}
/>,
];
{this.state.filters.map((filter, i) => (
<FilterToken
key={`${filter.key}:${filter.type}`}
index={i}
filter={filter}
focused={i === this.state.focusedToken}
onFocus={this.onTokenFocus}
onDelete={this.removeFilter}
onReplace={this.replaceFilter}
onBlur={this.onTokenBlur}
/>
))}
<SearchInput
placeholder={placeholder}
onChange={this.onChangeSearchTerm}
value={this.state.searchTerm}
ref={this.setInputRef}
onFocus={this.onInputFocus}
onBlur={this.onInputBlur}
isValidInput={
this.state.regexEnabled
? this.state.compiledRegex !== null
: true
}
regex={Boolean(
this.state.regexEnabled && this.state.searchTerm,
)}
/>
{(this.state.searchTerm || this.state.filters.length > 0) && (
<Clear onClick={this.clear}>&times;</Clear>
)}
</SearchBox>
{this.props.allowRegexSearch ? (
<ToggleButton
toggled={this.state.regexEnabled}
onClick={this.onRegexToggled}
label={'Regex'}
/>
) : null}
{this.props.allowBodySearch ? (
<ToggleButton
toggled={this.state.bodySearchEnabled}
onClick={this.onBodySearchToggled}
label={'Body'}
tooltip={
'Search request and response bodies (warning: this can be quite slow)'
}
/>
) : null}
{actions != null && <Actions>{actions}</Actions>}
</SearchBar>
<Component
{...props}
key="table"
addFilter={this.addFilter}
searchTerm={this.state.searchTerm}
regexEnabled={this.state.regexEnabled}
bodySearchEnabled={this.state.bodySearchEnabled}
filters={this.state.filters}
/>
</VerticalContainer>
);
}
};