Owners stack modal behaves and looks more like a modal
Brian Vaughn committed
Apr 7, 2019 at 15:32 UTC
e489c8ac8e16ac90d95faefb171926658d836a8e
2 files changed
+27
-21
src/devtools/views/Components/OwnersStack.css
+17
-17
@@ -2,6 +2,7 @@
2
flex: 1;
3
display: flex;
4
align-items: center;
5
+ position: relative;
6
}
7
8
.Component,
@@ -42,23 +43,6 @@
43
margin-right: 0.5rem;
44
}
45
45
-.DropdownWrapper {
46
- display: inline-block;
47
- position: relative;
48
-}
49
-
50
-.Dropdown {
51
- z-index: 1;
52
- position: absolute;
53
- top: calc(100% + 0.25rem);
54
- left: 0;
55
- background-color: var(--color-background);
56
- overflow-y: auto;
57
- max-height: 10rem;
58
- display: flex;
59
- flex-direction: column;
60
-}
61
-
46
.VRule {
47
flex: 0 0 auto;
48
height: 20px;
@@ -66,3 +50,19 @@
50
background-color: var(--color-border);
51
margin: 0 0.5rem;
52
}
53
+
54
+.Modal {
55
+ position: absolute;
56
+ top: calc(100% + 0.25rem);
57
+ left: 2.5rem;
58
+ z-index: 1;
59
+ display: inline-flex;
60
+ flex-direction: column;
61
+ background-color: var(--color-background);
62
+ padding: 0.5rem;
63
+ padding-right: 0;
64
+ border: 1px solid var(--color-border);
65
+ border-radius: 0.25rem;
66
+ max-height: 10rem;
67
+ overflow: auto;
68
+}
src/devtools/views/Components/OwnersStack.js
+10
-4
@@ -1,5 +1,6 @@
1
// @flow
2
import React, {
3
+ Fragment,
4
useCallback,
5
useContext,
6
useLayoutEffect,
@@ -11,7 +12,7 @@ import ButtonIcon from '../ButtonIcon';
12
import Toggle from '../Toggle';
13
import { TreeContext } from './TreeContext';
14
import { StoreContext } from '../context';
14
-import { useIsOverflowing } from '../hooks';
15
+import { useIsOverflowing, useModalDismissSignal } from '../hooks';
16
17
import type { Element } from './types';
18
@@ -102,8 +103,13 @@ function ElementsDropdown({
103
[selectOwner, setIsDropdownVisible]
104
);
105
106
+ const modalRef = useRef<HTMLDivElement | null>(null);
107
+ const dismissModal = useCallback(() => setIsDropdownVisible(false));
108
+
109
+ useModalDismissSignal(modalRef, dismissModal);
110
+
111
return (
106
- <div className={styles.DropdownWrapper}>
112
+ <Fragment>
113
<Toggle
114
className={styles.Toggle}
115
isChecked={isDropdownVisible}
@@ -113,7 +119,7 @@ function ElementsDropdown({
119
<ButtonIcon type="more" />
120
</Toggle>
121
{isDropdownVisible && (
116
- <div className={styles.Dropdown}>
122
+ <div className={styles.Modal} ref={modalRef}>
123
{ownerStack.map((id, index) => (
124
<button
125
className={
@@ -128,7 +134,7 @@ function ElementsDropdown({
134
))}
135
</div>
136
)}
131
- </div>
137
+ </Fragment>
138
);
139
}
140