refactor(proxies): make the content header and settings button sticky

This commit is contained in:
Haishan 2020-06-17 00:36:38 +08:00
parent 320cc4bff7
commit 629062d945
3 changed files with 18 additions and 9 deletions

View file

@ -1,11 +1,17 @@
.topBar {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
background: var(--color-background);
display: flex;
justify-content: flex-end;
padding: 5px 5px 2px 0;
background: linear-gradient(var(--color-background) 70%, transparent);
}
.settingBtnContainer {
margin-right: 20px;
}
.group {

View file

@ -84,18 +84,20 @@ function Proxies({
return (
<>
<div className={s0.topBar}>
<Button kind="minimal" onClick={() => setIsSettingsModalOpen(true)}>
<Equalizer size={16} />
</Button>
</div>
<BaseModal
isOpen={isSettingsModalOpen}
onRequestClose={closeSettingsModal}
>
<Settings />
</BaseModal>
<div className={s0.topBar}>
<ContentHeader title="Proxies" />
<div className={s0.settingBtnContainer}>
<Button kind="minimal" onClick={() => setIsSettingsModalOpen(true)}>
<Equalizer size={16} />
</Button>
</div>
</div>
<div>
{groupNames.map((groupName: string) => {
return (

View file

@ -2,6 +2,7 @@
margin: 8px 0;
display: flex;
flex-wrap: wrap;
margin-left: -3px;
}
.listSummaryView {