Skip to content

Commit 463722a

Browse files
kemurukemuru
committed
fix: merge conflicts, fix scrolling bugs, overlay component bugs
2 parents 00fb81b + 0c056c0 commit 463722a

File tree

18 files changed

+286
-155
lines changed

18 files changed

+286
-155
lines changed

‎web/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@
8282
"graphql": "^16.7.1",
8383
"graphql-request": "~6.1.0",
8484
"moment": "^2.29.4",
85+
"overlayscrollbars": "^2.3.0",
86+
"overlayscrollbars-react": "^0.5.2",
8587
"react": "^18.2.0",
8688
"react-chartjs-2": "^4.3.1",
8789
"react-dom": "^18.2.0",

‎web/src/components/Popup/index.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useRef } from "react";
2-
import styled from "styled-components";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
34
import { Button } from "@kleros/ui-components-library";
45
import { Overlay } from "components/Overlay";
56
import StakeWithdraw from "./Description/StakeWithdraw";
@@ -44,6 +45,8 @@ const Container = styled.div`
4445
top: 50%;
4546
left: 50%;
4647
transform: translate(-50%, -50%);
48+
max-height: 80vh;
49+
overflow-y: auto;
4750
4851
z-index: 10;
4952
flex-direction: column;
@@ -59,6 +62,12 @@ const Container = styled.div`
5962
svg {
6063
visibility: visible;
6164
}
65+
66+
${landscapeStyle(
67+
() => css`
68+
overflow-y: hidden;
69+
`
70+
)}
6271
`;
6372

6473
const VoteDescriptionContainer = styled.div`

‎web/src/context/OverlayScrollContext.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { createContext, MutableRefObject } from "react";
2+
3+
export const OverlayScrollContext = createContext<MutableRefObject<HTMLElement | null> | null>(null);

‎web/src/hooks/useLockOverlayScroll.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { useContext, useEffect, useCallback } from "react";
2+
import { OverlayScrollContext } from "context/OverlayScrollContext";
3+
4+
export const useLockOverlayScroll = (shouldLock: boolean) => {
5+
const osInstanceRef = useContext(OverlayScrollContext);
6+
7+
const lockScroll = useCallback(() => {
8+
const osInstance = osInstanceRef?.current?.osInstance();
9+
if (osInstance) {
10+
osInstance.options({ overflow: { x: "hidden", y: "hidden" } });
11+
}
12+
}, [osInstanceRef]);
13+
14+
const unlockScroll = useCallback(() => {
15+
const osInstance = osInstanceRef?.current?.osInstance();
16+
if (osInstance) {
17+
osInstance.options({ overflow: { x: "scroll", y: "scroll" } });
18+
}
19+
}, [osInstanceRef]);
20+
21+
useEffect(() => {
22+
if (shouldLock) {
23+
lockScroll();
24+
} else {
25+
unlockScroll();
26+
}
27+
}, [shouldLock, lockScroll, unlockScroll]);
28+
};

‎web/src/layout/Header/DesktopHeader.tsx‎

Lines changed: 46 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,22 @@ import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44
import { useToggle } from "react-use";
55
import { Link } from "react-router-dom";
6+
import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
67
import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
78
import KlerosCourtLogo from "svgs/header/kleros-court.svg";
89
import ConnectWallet from "components/ConnectWallet";
910
import LightButton from "components/LightButton";
1011
import DappList from "./navbar/DappList";
1112
import Explore from "./navbar/Explore";
1213
import Menu from "./navbar/Menu";
14+
import Help from "./navbar/Menu/Help";
15+
import Settings from "./navbar/Menu/Settings";
16+
import { Overlay } from "components/Overlay";
17+
import { PopupContainer } from ".";
1318

1419
const Container = styled.div`
1520
display: none;
21+
position: absolute;
1622
1723
${landscapeStyle(
1824
() => css`
@@ -70,36 +76,49 @@ const ConnectWalletContainer = styled.div`
7076
`;
7177

7278
const DesktopHeader = () => {
73-
const [isSolutionsOpen, toggleSolution] = useToggle(false);
79+
const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
80+
const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
81+
const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
82+
useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
83+
7484
return (
75-
<Container>
76-
<LeftSide>
77-
<LightButtonContainer>
78-
<LightButton
79-
text=""
80-
onClick={() => {
81-
toggleSolution();
82-
}}
83-
Icon={StyledKlerosSolutionsIcon}
84-
/>
85-
</LightButtonContainer>
86-
{isSolutionsOpen && <DappList toggleSolution={toggleSolution} />}
87-
<StyledLink to={"/"}>
88-
<KlerosCourtLogo />
89-
</StyledLink>
90-
</LeftSide>
85+
<>
86+
<Container>
87+
<LeftSide>
88+
<LightButtonContainer>
89+
<LightButton
90+
text=""
91+
onClick={() => {
92+
toggleIsDappListOpen();
93+
}}
94+
Icon={StyledKlerosSolutionsIcon}
95+
/>
96+
</LightButtonContainer>
97+
<StyledLink to={"/"}>
98+
<KlerosCourtLogo />
99+
</StyledLink>
100+
</LeftSide>
91101

92-
<MiddleSide>
93-
<Explore />
94-
</MiddleSide>
102+
<MiddleSide>
103+
<Explore />
104+
</MiddleSide>
95105

96-
<RightSide>
97-
<ConnectWalletContainer>
98-
<ConnectWallet />
99-
</ConnectWalletContainer>
100-
<Menu />
101-
</RightSide>
102-
</Container>
106+
<RightSide>
107+
<ConnectWalletContainer>
108+
<ConnectWallet />
109+
</ConnectWalletContainer>
110+
<Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
111+
</RightSide>
112+
</Container>
113+
{(isDappListOpen || isHelpOpen || isSettingsOpen) && (
114+
<PopupContainer>
115+
<Overlay />
116+
{isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
117+
{isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
118+
{isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen }} />}
119+
</PopupContainer>
120+
)}
121+
</>
103122
);
104123
};
105124
export default DesktopHeader;

‎web/src/layout/Header/index.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@ const Container = styled.div`
1515
display: flex;
1616
`;
1717

18+
export const PopupContainer = styled.div`
19+
position: fixed;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 100%;
24+
z-index: 30;
25+
`;
26+
1827
const Header: React.FC = () => {
1928
return (
2029
<Container>

‎web/src/layout/Header/navbar/DappList.tsx‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useRef } from "react";
22
import styled, { css } from "styled-components";
3-
import { useLockBodyScroll } from "react-use";
43
import { landscapeStyle } from "styles/landscapeStyle";
54
import { useFocusOutside } from "hooks/useFocusOutside";
65
import Curate from "svgs/icons/curate-image.png";
@@ -13,7 +12,6 @@ import POH from "svgs/icons/poh-image.png";
1312
import Vea from "svgs/icons/vea.svg";
1413
import Tokens from "svgs/icons/tokens.svg";
1514
import Product from "./Product";
16-
import { Overlay } from "components/Overlay";
1715

1816
const Header = styled.h1`
1917
display: flex;
@@ -27,11 +25,11 @@ const Header = styled.h1`
2725
const Container = styled.div`
2826
display: flex;
2927
position: absolute;
30-
max-height: 60vh;
28+
max-height: 80vh;
3129
top: 5%;
3230
left: 50%;
33-
transform: translateX(-50%);
34-
z-index: 10;
31+
transform: translate(-50%);
32+
z-index: 1;
3533
flex-direction: column;
3634
align-items: center;
3735
@@ -49,9 +47,11 @@ const Container = styled.div`
4947
5048
${landscapeStyle(
5149
() => css`
52-
top: 100%;
53-
left: 0%;
54-
transform: translateX(0%);
50+
margin-top: 64px;
51+
top: 0;
52+
left: 0;
53+
right: auto;
54+
transform: none;
5555
`
5656
)}
5757
`;
@@ -69,10 +69,6 @@ const ItemsDiv = styled.div`
6969
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
7070
`;
7171

72-
interface IDappList {
73-
toggleSolution: () => void;
74-
}
75-
7672
const ITEMS = [
7773
{
7874
text: "Court v1",
@@ -121,25 +117,25 @@ const ITEMS = [
121117
},
122118
];
123119

124-
const DappList: React.FC<IDappList> = ({ toggleSolution }) => {
120+
interface IDappList {
121+
toggleIsDappListOpen: () => void;
122+
}
123+
124+
const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
125125
const containerRef = useRef(null);
126126
useFocusOutside(containerRef, () => {
127-
toggleSolution();
127+
toggleIsDappListOpen();
128128
});
129-
useLockBodyScroll(true);
130129

131130
return (
132-
<>
133-
<Overlay />
134-
<Container ref={containerRef}>
135-
<Header>Kleros Solutions</Header>
136-
<ItemsDiv>
137-
{ITEMS.map((item) => {
138-
return <Product {...item} key={item.text} />;
139-
})}
140-
</ItemsDiv>
141-
</Container>
142-
</>
131+
<Container ref={containerRef}>
132+
<Header>Kleros Solutions</Header>
133+
<ItemsDiv>
134+
{ITEMS.map((item) => {
135+
return <Product {...item} key={item.text} />;
136+
})}
137+
</ItemsDiv>
138+
</Container>
143139
);
144140
};
145141
export default DappList;

‎web/src/layout/Header/navbar/Menu/Help.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useRef } from "react";
22
import styled, { css } from "styled-components";
3-
import { useLockBodyScroll } from "react-use";
43
import { landscapeStyle } from "styles/landscapeStyle";
54
import { useFocusOutside } from "hooks/useFocusOutside";
65
import Book from "svgs/icons/book-open.svg";
@@ -9,12 +8,13 @@ import Bug from "svgs/icons/bug.svg";
98
import ETH from "svgs/icons/eth.svg";
109
import Faq from "svgs/menu-icons/help.svg";
1110
import Telegram from "svgs/socialmedia/telegram.svg";
12-
import { Overlay } from "components/Overlay";
1311

1412
const Container = styled.div`
1513
display: flex;
1614
flex-direction: column;
1715
position: absolute;
16+
max-height: 80vh;
17+
overflow-y: auto;
1818
width: auto;
1919
top: 5%;
2020
left: 50%;
@@ -29,9 +29,12 @@ const Container = styled.div`
2929
3030
${landscapeStyle(
3131
() => css`
32-
top: 100%;
33-
left: 92%;
32+
margin-top: 64px;
3433
width: 240px;
34+
top: 0;
35+
right: 0;
36+
left: auto;
37+
transform: none;
3538
`
3639
)}
3740
`;
@@ -94,28 +97,24 @@ const ITEMS = [
9497
];
9598

9699
interface IHelp {
97-
toggle: () => void;
100+
toggleIsHelpOpen: () => void;
98101
}
99102

100-
const Help: React.FC<IHelp> = ({ toggle }) => {
103+
const Help: React.FC<IHelp> = ({ toggleIsHelpOpen }) => {
101104
const containerRef = useRef(null);
102105
useFocusOutside(containerRef, () => {
103-
toggle();
106+
toggleIsHelpOpen();
104107
});
105-
useLockBodyScroll(true);
106108

107109
return (
108-
<>
109-
<Overlay />
110-
<Container ref={containerRef}>
111-
{ITEMS.map((item) => (
112-
<ListItem href={item.url} key={item.text} target="_blank">
113-
<Icon as={item.Icon} />
114-
<small>{item.text}</small>
115-
</ListItem>
116-
))}
117-
</Container>
118-
</>
110+
<Container ref={containerRef}>
111+
{ITEMS.map((item) => (
112+
<ListItem href={item.url} key={item.text} target="_blank">
113+
<Icon as={item.Icon} />
114+
<small>{item.text}</small>
115+
</ListItem>
116+
))}
117+
</Container>
119118
);
120119
};
121120
export default Help;

0 commit comments

Comments
 (0)