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

feat: response overlay polish

Browse Source
This commit is contained in:
Anoop M D 2023-10-08 00:03:32 +05:30
parent e381d0c00b
commit 81b1982d4f
7 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
View File

@ -5,8 +5,7 @@ import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/sli
import { saveRequest } from 'providers/ReduxStore/slices/collections/actions'; import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
import HttpMethodSelector from './HttpMethodSelector'; import HttpMethodSelector from './HttpMethodSelector';
import { useTheme } from 'providers/Theme'; import { useTheme } from 'providers/Theme';
import SendIcon from 'components/Icons/Send'; import { IconDeviceFloppy, IconArrowRight } from '@tabler/icons';
import { IconDeviceFloppy } from '@tabler/icons';
import SingleLineEditor from 'components/SingleLineEditor'; import SingleLineEditor from 'components/SingleLineEditor';
import { isMacOS } from 'utils/common/platform'; import { isMacOS } from 'utils/common/platform';
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
@ -90,7 +89,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
Save <span className="shortcut">({saveShortcut})</span> Save <span className="shortcut">({saveShortcut})</span>
</span> </span>
</div> </div>
<SendIcon color={theme.requestTabPanel.url.icon} width={22} /> <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} />
</div> </div>
</div> </div>
</StyledWrapper> </StyledWrapper>

5
packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
View File

@ -1,6 +1,11 @@
import styled from 'styled-components'; import styled from 'styled-components';
const StyledWrapper = styled.div` const StyledWrapper = styled.div`
position: absolute;
z-index: 1;
height: 100vh;
background-color: ${(props) => props.theme.requestTabPanel.responseOverlayBg};
div.overlay { div.overlay {
position: absolute; position: absolute;
top: 0; top: 0;

6
packages/bruno-app/src/components/ResponsePane/Overlay/index.js
View File

@ -13,17 +13,17 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
}; };
return ( return (
<StyledWrapper className="mt-4 px-3 w-full"> <StyledWrapper className="px-3 w-full">
<div className="overlay"> <div className="overlay">
<div style={{ marginBottom: 15, fontSize: 26 }}> <div style={{ marginBottom: 15, fontSize: 26 }}>
<div style={{ display: 'inline-block', fontSize: 24, marginLeft: 5, marginRight: 5 }}> <div style={{ display: 'inline-block', fontSize: 20, marginLeft: 5, marginRight: 5 }}>
<StopWatch /> <StopWatch />
</div> </div>
</div> </div>
<IconRefresh size={24} className="loading-icon" /> <IconRefresh size={24} className="loading-icon" />
<button <button
onClick={handleCancelRequest} onClick={handleCancelRequest}
className="mt-4 uppercase btn-md rounded btn-secondary ease-linear transition-all duration-150" className="mt-4 uppercase btn-sm rounded btn-secondary ease-linear transition-all duration-150"
type="button" type="button"
> >
Cancel Request Cancel Request

7
packages/bruno-app/src/components/ResponsePane/index.js
View File

@ -61,15 +61,15 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
} }
}; };
if (isLoading) { if (isLoading && !item.response) {
return ( return (
<StyledWrapper className="flex h-full relative"> <StyledWrapper className="flex flex-col h-full relative">
<Overlay item={item} collection={collection} /> <Overlay item={item} collection={collection} />
</StyledWrapper> </StyledWrapper>
); );
} }
if (response.state !== 'success') { if (!item.response) {
return ( return (
<StyledWrapper className="flex h-full relative"> <StyledWrapper className="flex h-full relative">
<Placeholder /> <Placeholder />
@ -116,6 +116,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
) : null} ) : null}
</div> </div>
<section className={`flex flex-grow ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}> <section className={`flex flex-grow ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}>
{isLoading ? <Overlay item={item} collection={collection} /> : null}
{getTabPanel(focusedTab.responsePaneTab)} {getTabPanel(focusedTab.responsePaneTab)}
</section> </section>
</StyledWrapper> </StyledWrapper>

1
packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
View File

@ -1114,7 +1114,6 @@ export const collectionsSlice = createSlice({
const { cancelTokenUid } = action.payload; const { cancelTokenUid } = action.payload;
item.requestUid = requestUid; item.requestUid = requestUid;
item.requestState = 'queued'; item.requestState = 'queued';
item.response = null;
item.cancelTokenUid = cancelTokenUid; item.cancelTokenUid = cancelTokenUid;
} }

3
packages/bruno-app/src/themes/dark.js
View File

@ -109,7 +109,8 @@ const darkTheme = {
responseSendIcon: '#555', responseSendIcon: '#555',
responseStatus: '#ccc', responseStatus: '#ccc',
responseOk: '#8cd656', responseOk: '#8cd656',
responseError: '#f06f57' responseError: '#f06f57',
responseOverlayBg: 'rgba(30, 30, 30, 0.6)'
}, },
collection: { collection: {

3
packages/bruno-app/src/themes/light.js
View File

@ -109,7 +109,8 @@ const lightTheme = {
responseSendIcon: 'rgb(209, 213, 219)', responseSendIcon: 'rgb(209, 213, 219)',
responseStatus: 'rgb(117 117 117)', responseStatus: 'rgb(117 117 117)',
responseOk: '#047857', responseOk: '#047857',
responseError: 'rgb(185, 28, 28)' responseError: 'rgb(185, 28, 28)',
responseOverlayBg: 'rgba(255, 255, 255, 0.6)'
}, },
collection: { collection: {