mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-24 17:03:47 +01:00
feat: add request button near request tabs
This commit is contained in:
parent
71ce963361
commit
e99f9434ad
@ -16,14 +16,28 @@ const Wrapper = styled.div`
|
||||
bottom: -1px;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
padding: 6px 12px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
cursor: pointer;
|
||||
|
||||
.tab-container {
|
||||
border-left: 1px solid #dcdcdc;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #cfcfcf;
|
||||
background: #fff;
|
||||
border-radius: 5px 5px 0 0;
|
||||
|
||||
.tab-container {
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tab-label {
|
||||
overflow: hidden;
|
||||
@ -46,6 +60,56 @@ const Wrapper = styled.div`
|
||||
color: rgb(142, 68, 173);
|
||||
}
|
||||
}
|
||||
|
||||
&.new-tab {
|
||||
vertical-align: bottom;
|
||||
width: 34px;
|
||||
padding: 3px 0px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
color: rgb(117 117 117);
|
||||
margin-bottom: 2px;
|
||||
|
||||
> div {
|
||||
padding: 3px 4px;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> div {
|
||||
background-color: #eaeaea;
|
||||
color: rgb(76 76 76);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.last-tab {
|
||||
.tab-container {
|
||||
border-right: 1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-container {
|
||||
border-right: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.active + li {
|
||||
.tab-container {
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
.tab-container {
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -3,9 +3,10 @@ import classnames from 'classnames';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
|
||||
const getTabClassname = (tab) => {
|
||||
const getTabClassname = (tab, index) => {
|
||||
return classnames("request-tab select-none", {
|
||||
'active': tab.id === activeRequestTabId
|
||||
'active': tab.id === activeRequestTabId,
|
||||
'last-tab': requestTabs && requestTabs.length && (index === requestTabs.length - 1)
|
||||
});
|
||||
};
|
||||
|
||||
@ -45,9 +46,9 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
|
||||
<StyledWrapper className="mt-3 flex items-center">
|
||||
{requestTabs && requestTabs.length ? (
|
||||
<ul role="tablist">
|
||||
{requestTabs && requestTabs.length ? requestTabs.map((rt) => {
|
||||
return <li key={rt.id} className={getTabClassname(rt)} role="tab" onClick={() => handleClick(rt)}>
|
||||
<div className="flex items-center justify-between">
|
||||
{requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
|
||||
return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
|
||||
<div className="flex items-center justify-between tab-container">
|
||||
<div className="flex items-center tab-label">
|
||||
<span className="tab-method" style={{fontSize: 13, color: getMethodColor(rt.method)}}>{rt.method}</span>
|
||||
<span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
|
||||
@ -62,6 +63,20 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
|
||||
</div>
|
||||
</li>
|
||||
}) : null}
|
||||
<li className="select-none new-tab ml-1">
|
||||
<div className="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
<li className="select-none new-tab choose-request">
|
||||
<div className="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
) : null}
|
||||
</StyledWrapper>
|
||||
|
@ -62,7 +62,7 @@ const reducer = (state, action) => {
|
||||
const uid = nanoid();
|
||||
draft.requestTabs.push({
|
||||
id: uid,
|
||||
name: 'Untitled Request',
|
||||
name: 'New Tab',
|
||||
method: 'GET',
|
||||
request: {
|
||||
url: 'https://api.spacex.land/graphql/',
|
||||
|
Loading…
Reference in New Issue
Block a user