extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-21 23:43:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: response overlay

Browse Source
This commit is contained in:
Anoop M D 2022-01-28 23:03:10 +05:30
parent 6af169ffee
commit 6c9f7250ea
5 changed files with 57 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grafnode-components/src/components/ResponsePane/Overlay/StyledWrapper.js Normal file
View File

@ -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;

26
packages/grafnode-components/src/components/ResponsePane/Overlay/index.js Normal file
View File

@ -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;

16
packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js
View File

@ -10,22 +10,6 @@ const StyledWrapper = styled.div`
textarea.cm-editor {
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;

17
packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js
View File

@ -1,6 +1,4 @@
import React, { useState, useRef, useEffect } from 'react';
import { IconRefresh } from '@tabler/icons';
import StopWatch from '../../StopWatch';
import * as CodeMirror from 'codemirror';
import StyledWrapper from './StyledWrapper';
@ -38,21 +36,6 @@ const QueryResult = ({data, isLoading, width}) => {
return (
<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">
<textarea
id="query-result"

11
packages/grafnode-components/src/components/ResponsePane/index.js
View File

@ -1,6 +1,7 @@
import React, { useState } from 'react';
import classnames from 'classnames';
import QueryResult from './QueryResult';
import Overlay from './Overlay';
import ResponseHeaders from './ResponseHeaders';
import StatusCode from './StatusCode';
import ResponseTime from './ResponseTime';
@ -41,8 +42,16 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
}
}
if(isLoading) {
return (
<StyledWrapper className="flex h-full relative">
<Overlay />
</StyledWrapper>
);
}
return (
<StyledWrapper className="flex flex-col h-full">
<StyledWrapper className="flex flex-col h-full relative">
<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('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>