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

feat: made dropdowns look beautiful

Browse Source
This commit is contained in:
Anoop M D 2022-01-03 13:18:15 +05:30
parent 9d14e89aaa
commit 81f9668375
2 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafnode-components/src/components/Dropdown/StyledWrapper.js
View File

@ -10,21 +10,25 @@ const Wrapper = styled.div`
.tippy-box { .tippy-box {
min-width: 135px; min-width: 135px;
background-color: white; background-color: white;
color: rgb(82 82 82); font-size: 0.8125rem;
color: rgb(48 48 48);
background: #f9f9f9;
box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px; box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
.tippy-content { .tippy-content {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
.dropdown-item { .dropdown-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: .3rem .5rem; padding: .35rem .6rem;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #eee; background-color: #e9e9e9;
} }
} }
} }

27
packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
View File

@ -88,13 +88,26 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab
</div> </div>
<div className="menu-icon pr-2"> <div className="menu-icon pr-2">
<Dropdown onCreate={onDropdownCreate} icon={<MenuIcon />} placement='bottom-start'> <Dropdown onCreate={onDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
<div> <div className="dropdown-item" onClick={(e) => {
<div className="dropdown-item" onClick={(e) => { dropdownTippyRef.current.hide();
dropdownTippyRef.current.hide(); addRequest();
addRequest(); }}>
}}> Add Request
Add Request </div>
</div> <div className="dropdown-item" onClick={(e) => {
dropdownTippyRef.current.hide();
}}>
Add Folder
</div>
<div className="dropdown-item" onClick={(e) => {
dropdownTippyRef.current.hide();
}}>
Rename
</div>
<div className="dropdown-item" onClick={(e) => {
dropdownTippyRef.current.hide();
}}>
Delete
</div> </div>
</Dropdown> </Dropdown>
</div> </div>