mirror of
https://github.com/usebruno/bruno.git
synced 2025-06-21 12:33:34 +02:00
refactor: response overlay
This commit is contained in:
parent
6af169ffee
commit
6c9f7250ea
@ -0,0 +1,21 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
const StyledWrapper = styled.div`
|
||||||
|
div.overlay{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 9;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 20%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default StyledWrapper;
|
||||||
|
|
@ -0,0 +1,26 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { IconRefresh } from '@tabler/icons';
|
||||||
|
import StopWatch from '../../StopWatch';
|
||||||
|
import StyledWrapper from './StyledWrapper';
|
||||||
|
|
||||||
|
const QueryResult = () => {
|
||||||
|
return (
|
||||||
|
<StyledWrapper className="mt-4 px-3 w-full">
|
||||||
|
<div className="overlay">
|
||||||
|
<div style={{marginBottom: 15, fontSize: 26}}>
|
||||||
|
<div style={{display: 'inline-block', fontSize: 24, marginLeft: 5, marginRight: 5}}>
|
||||||
|
<StopWatch/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<IconRefresh size={24} className="animate-spin"/>
|
||||||
|
<button
|
||||||
|
className="mt-4 uppercase bg-gray-200 active:bg-blueGray-600 text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
|
||||||
|
>
|
||||||
|
Cancel Request
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</StyledWrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default QueryResult;
|
@ -10,22 +10,6 @@ const StyledWrapper = styled.div`
|
|||||||
textarea.cm-editor {
|
textarea.cm-editor {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.overlay{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 9;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: center;
|
|
||||||
background: rgb(243 243 243 / 78%);
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default StyledWrapper;
|
export default StyledWrapper;
|
||||||
|
@ -1,6 +1,4 @@
|
|||||||
import React, { useState, useRef, useEffect } from 'react';
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
import { IconRefresh } from '@tabler/icons';
|
|
||||||
import StopWatch from '../../StopWatch';
|
|
||||||
import * as CodeMirror from 'codemirror';
|
import * as CodeMirror from 'codemirror';
|
||||||
import StyledWrapper from './StyledWrapper';
|
import StyledWrapper from './StyledWrapper';
|
||||||
|
|
||||||
@ -38,21 +36,6 @@ const QueryResult = ({data, isLoading, width}) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledWrapper className="mt-4 px-3 w-full" style={{maxWidth: width}}>
|
<StyledWrapper className="mt-4 px-3 w-full" style={{maxWidth: width}}>
|
||||||
{isLoading && (
|
|
||||||
<div className="overlay">
|
|
||||||
<div style={{marginBottom: 15, fontSize: 26}}>
|
|
||||||
<div style={{display: 'inline-block', fontSize: 24, marginLeft: 5, marginRight: 5}}>
|
|
||||||
<StopWatch/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<IconRefresh size={24} className="animate-spin"/>
|
|
||||||
<button
|
|
||||||
className="mt-4 uppercase bg-gray-200 active:bg-blueGray-600 text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
|
|
||||||
>
|
|
||||||
Cancel Request
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="h-full">
|
<div className="h-full">
|
||||||
<textarea
|
<textarea
|
||||||
id="query-result"
|
id="query-result"
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import QueryResult from './QueryResult';
|
import QueryResult from './QueryResult';
|
||||||
|
import Overlay from './Overlay';
|
||||||
import ResponseHeaders from './ResponseHeaders';
|
import ResponseHeaders from './ResponseHeaders';
|
||||||
import StatusCode from './StatusCode';
|
import StatusCode from './StatusCode';
|
||||||
import ResponseTime from './ResponseTime';
|
import ResponseTime from './ResponseTime';
|
||||||
@ -41,8 +42,16 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(isLoading) {
|
||||||
return (
|
return (
|
||||||
<StyledWrapper className="flex flex-col h-full">
|
<StyledWrapper className="flex h-full relative">
|
||||||
|
<Overlay />
|
||||||
|
</StyledWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledWrapper className="flex flex-col h-full relative">
|
||||||
<div className="flex items-center px-3 tabs mt-1" role="tablist">
|
<div className="flex items-center px-3 tabs mt-1" role="tablist">
|
||||||
<div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
|
<div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
|
||||||
<div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
|
<div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user