extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-22 16:03:39 +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 HttpMethodSelector from './HttpMethodSelector';
import { useTheme } from 'providers/Theme';
import SendIcon from 'components/Icons/Send';
import { IconDeviceFloppy } from '@tabler/icons';
import { IconDeviceFloppy, IconArrowRight } from '@tabler/icons';
import SingleLineEditor from 'components/SingleLineEditor';
import { isMacOS } from 'utils/common/platform';
import StyledWrapper from './StyledWrapper';
@ -90,7 +89,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
Save <span className="shortcut">({saveShortcut})</span>
</span>
</div>
<SendIcon color={theme.requestTabPanel.url.icon} width={22} />
<IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} />
</div>
</div>
</StyledWrapper>

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

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

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

@ -13,17 +13,17 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
};
return (
<StyledWrapper className="mt-4 px-3 w-full">
<StyledWrapper className="px-3 w-full">
<div className="overlay">
<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 />
</div>
</div>
<IconRefresh size={24} className="loading-icon" />
<button
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"
>
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 (
<StyledWrapper className="flex h-full relative">
<StyledWrapper className="flex flex-col h-full relative">
<Overlay item={item} collection={collection} />
</StyledWrapper>
);
}
if (response.state !== 'success') {
if (!item.response) {
return (
<StyledWrapper className="flex h-full relative">
<Placeholder />
@ -116,6 +116,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
) : null}
</div>
<section className={`flex flex-grow ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}>
{isLoading ? <Overlay item={item} collection={collection} /> : null}
{getTabPanel(focusedTab.responsePaneTab)}
</section>
</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;
item.requestUid = requestUid;
item.requestState = 'queued';
item.response = null;
item.cancelTokenUid = cancelTokenUid;
}

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

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

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

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