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)({ export const SidebarContainer = styled(FlexRow)({
backgroundColor: colors.light02, backgroundColor: colors.light02,
height: '100%', height: '100%',
overflow: 'scroll', overflow: 'auto',
}); });
const Waiting = styled(FlexColumn)({ 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', borderTop: 'none',
flexGrow: 1, flexGrow: 1,
padding: props.padded ? 10 : 0, padding: props.padded ? 10 : 0,
overflow: 'visible', overflow: 'hidden',
}), }),
); );
state = { 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} width={horizontal ? (onResize ? width : this.state.width) : undefined}
minHeight={minHeight} minHeight={minHeight}
maxHeight={maxHeight} maxHeight={maxHeight}
height={ height={!horizontal ? (onResize ? height : this.state.height) : '100%'}
!horizontal ? (onResize ? height : this.state.height) : undefined
}
resizable={resizable} resizable={resizable}
onResize={this.onResize}> onResize={this.onResize}>
<SidebarContainer position={position} backgroundColor={backgroundColor}> <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 debounce from 'lodash.debounce';
import ToggleButton from '../ToggleSwitch'; import ToggleButton from '../ToggleSwitch';
import React from 'react'; import React from 'react';
import VerticalContainer from '../Layout';
const SearchBar = styled(Toolbar)({ const SearchBar = styled(Toolbar)({
height: 42, height: 42,
@@ -464,73 +465,77 @@ const Searchable = (
render() { render() {
const {placeholder, actions, ...props} = this.props; const {placeholder, actions, ...props} = this.props;
return [ return (
<SearchBar position="top" key="searchbar"> <VerticalContainer scrollable>
<SearchBox tabIndex={-1}> <SearchBar position="top" key="searchbar">
<SearchIcon <SearchBox tabIndex={-1}>
name="magnifying-glass" <SearchIcon
color={colors.macOSTitleBarIcon} name="magnifying-glass"
size={16} 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}
/> />
))} {this.state.filters.map((filter, i) => (
<SearchInput <FilterToken
placeholder={placeholder} key={`${filter.key}:${filter.type}`}
onChange={this.onChangeSearchTerm} index={i}
value={this.state.searchTerm} filter={filter}
ref={this.setInputRef} focused={i === this.state.focusedToken}
onFocus={this.onInputFocus} onFocus={this.onTokenFocus}
onBlur={this.onInputBlur} onDelete={this.removeFilter}
isValidInput={ onReplace={this.replaceFilter}
this.state.regexEnabled onBlur={this.onTokenBlur}
? this.state.compiledRegex !== null />
: true ))}
} <SearchInput
regex={Boolean(this.state.regexEnabled && this.state.searchTerm)} placeholder={placeholder}
/> onChange={this.onChangeSearchTerm}
{(this.state.searchTerm || this.state.filters.length > 0) && ( value={this.state.searchTerm}
<Clear onClick={this.clear}>&times;</Clear> ref={this.setInputRef}
)} onFocus={this.onInputFocus}
</SearchBox> onBlur={this.onInputBlur}
{this.props.allowRegexSearch ? ( isValidInput={
<ToggleButton this.state.regexEnabled
toggled={this.state.regexEnabled} ? this.state.compiledRegex !== null
onClick={this.onRegexToggled} : true
label={'Regex'} }
/> regex={Boolean(
) : null} this.state.regexEnabled && this.state.searchTerm,
{this.props.allowBodySearch ? ( )}
<ToggleButton />
toggled={this.state.bodySearchEnabled} {(this.state.searchTerm || this.state.filters.length > 0) && (
onClick={this.onBodySearchToggled} <Clear onClick={this.clear}>&times;</Clear>
label={'Body'} )}
tooltip={ </SearchBox>
'Search request and response bodies (warning: this can be quite slow)' {this.props.allowRegexSearch ? (
} <ToggleButton
/> toggled={this.state.regexEnabled}
) : null} onClick={this.onRegexToggled}
{actions != null && <Actions>{actions}</Actions>} label={'Regex'}
</SearchBar>, />
<Component ) : null}
{...props} {this.props.allowBodySearch ? (
key="table" <ToggleButton
addFilter={this.addFilter} toggled={this.state.bodySearchEnabled}
searchTerm={this.state.searchTerm} onClick={this.onBodySearchToggled}
regexEnabled={this.state.regexEnabled} label={'Body'}
bodySearchEnabled={this.state.bodySearchEnabled} tooltip={
filters={this.state.filters} '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>
);
} }
}; };