Skip to content

Commit b3ed248

Browse files
marthacryanmarthacryan
committed
Add opt out dialog
1 parent 3d19705 commit b3ed248

File tree

7 files changed

+279
-83
lines changed

7 files changed

+279
-83
lines changed

‎dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
.dash-callback-dag--container {
22
border-radius: 4px;
3-
position: absolute;
4-
bottom: calc(100% + 4px);
5-
right: 0;
63
width: 80vw;
7-
height: calc(100vh - 180px);
4+
position: relative;
5+
height: calc(100vh - 200px);
86
overflow: auto;
97
box-sizing: border-box;
108
background: #ffffff;
119
display: inline-block;
1210
/* shadow-1 */
13-
box-shadow: 0px 6px 16px rgba(80, 103, 132, 0.165),
11+
box-shadow:
12+
0px 6px 16px rgba(80, 103, 132, 0.165),
1413
0px 2px 6px rgba(80, 103, 132, 0.12),
1514
0px 0px 1px rgba(80, 103, 132, 0.32);
1615
}
@@ -42,6 +41,6 @@
4241

4342
.dash-callback-dag--layoutSelector {
4443
position: absolute;
45-
top: 10px;
46-
right: 10px;
44+
top: 3px;
45+
right: 3px;
4746
}

‎dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -147,9 +147,6 @@
147147
display: inline-block;
148148
/* shadow-1 */
149149
border-radius: 4px;
150-
position: absolute;
151-
bottom: 100%;
152-
right: 0;
153150
animation: dash-error-card-animation 0.5s;
154151
padding: 24px;
155152
text-align: left;
@@ -172,13 +169,15 @@
172169
padding: 16px;
173170
width: 600px;
174171
max-width: 800px;
175-
max-height: calc(100vh - 125px);
172+
max-height: calc(100vh - 200px);
176173
margin-bottom: 4px;
177-
font-family: Verdana;
178174
background-color: white;
179175
overflow: auto;
180176
border-radius: 6px;
181-
box-shadow: 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07), 0px 1.9px 4px 0px rgba(0, 0, 0, 0.05), 0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
177+
box-shadow:
178+
0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
179+
0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
180+
0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
182181
}
183182

184183
.dash-error-card__topbar {

‎dash/dash-renderer/src/components/error/menu/DebugMenu.css

Lines changed: 81 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,79 @@
1717
transform: rotate(-180deg);
1818
}
1919

20+
.dash-debug-menu__popup {
21+
display: flex;
22+
flex-direction: column;
23+
position: absolute;
24+
bottom: 100%;
25+
right: 0;
26+
gap: 8px;
27+
}
28+
29+
.dash-debug-menu__version-opt-out {
30+
display: flex;
31+
width: 426px;
32+
padding: var(--Spacing-16, 16px);
33+
flex-direction: column;
34+
align-items: flex-start;
35+
gap: 8px;
36+
border-radius: var(--Corner-8, 8px);
37+
border: 1px solid var(--Stroke-Weak, rgba(0, 24, 102, 0.1));
38+
background: var(--Fill-Overlay, #fff);
39+
align-self: flex-end;
40+
position: relative;
41+
/* Shadow/Small */
42+
box-shadow:
43+
0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
44+
0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
45+
0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
46+
}
47+
48+
.dash-debug-menu__version-opt-out__text {
49+
display: inline-block;
50+
}
51+
52+
.dash-debug-menu__version-opt-out__text a {
53+
color: #7f4bc4;
54+
text-decoration: none;
55+
}
56+
57+
.dash-debug-menu__version-opt-out__text span {
58+
margin-right: 5px;
59+
}
60+
61+
.dash-debug-menu__version-opt-out button {
62+
display: flex;
63+
height: 24px;
64+
flex-direction: column;
65+
justify-content: center;
66+
align-items: center;
67+
border-radius: 4px;
68+
cursor: pointer;
69+
}
70+
71+
.dash-debug-menu__version-opt-out__buttons-container {
72+
display: flex;
73+
gap: 8px;
74+
align-self: stretch;
75+
justify-content: center;
76+
padding-top: 16px;
77+
margin-top: 16px;
78+
border-top: 1px solid rgba(0, 24, 102, 0.1);
79+
}
80+
81+
.dash-debug-menu__version-opt-out__button-primary {
82+
border: none;
83+
color: #fff;
84+
background: #7f4bc4;
85+
}
86+
87+
.dash-debug-menu__version-opt-out__button-secondary {
88+
background: rgba(161, 89, 255, 0.05);
89+
color: #7f4bc4;
90+
border: 1px solid rgba(134, 74, 212, 0.8);
91+
}
92+
2093
.dash-debug-menu:hover {
2194
background-color: #108de4;
2295
}
@@ -29,14 +102,18 @@
29102
right: 8px;
30103
display: flex;
31104
flex-direction: column;
105+
font-family: Verdana;
106+
font-size: 14px;
32107
justify-content: center;
33108
align-items: center;
34109
z-index: 10000;
35110
border-radius: 5px;
36111
padding: 5px;
37112
background-color: #f5f6fa;
38-
box-shadow: 0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04), 0px 2.3px 2px 0px rgba(0, 0, 0, 0.03);
39-
border: 1px solid var(--Stroke-Weak, rgba(0, 24, 102, 0.10));
113+
box-shadow:
114+
0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04),
115+
0px 2.3px 2px 0px rgba(0, 0, 0, 0.03);
116+
border: 1px solid var(--Stroke-Weak, rgba(0, 24, 102, 0.1));
40117
}
41118
.dash-debug-menu__outer--closed {
42119
height: 60px;
@@ -123,7 +200,8 @@
123200
right: 29px;
124201
z-index: 10002;
125202
cursor: pointer;
126-
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
203+
box-shadow:
204+
0px 0px 1px rgba(0, 0, 0, 0.25),
127205
0px 1px 3px rgba(162, 177, 198, 0.32);
128206
border-radius: 32px;
129207
background-color: white;

‎dash/dash-renderer/src/components/error/menu/DebugMenu.react.js

Lines changed: 96 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,85 @@ import ClockIcon from '../icons/ClockIcon.svg';
99
import ErrorIcon from '../icons/ErrorIcon.svg';
1010
import GraphIcon from '../icons/GraphIcon.svg';
1111
import OffIcon from '../icons/OffIcon.svg';
12-
13-
import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react';
14-
import {FrontEndErrorContainer} from '../FrontEnd/FrontEndErrorContainer.react';
1512
import {VersionInfo} from './VersionInfo.react';
13+
import {PopupContent} from './PopupContent.react';
1614

1715
const classes = (base, variant, variant2) =>
1816
`${base} ${base}--${variant}` + (variant2 ? ` ${base}--${variant2}` : '');
1917

18+
const MenuContent = ({
19+
hotReload,
20+
connected,
21+
popup,
22+
toggleErrors,
23+
errCount,
24+
toggleCallbackGraph,
25+
config,
26+
showNotifications,
27+
setShowNotifications
28+
}) => {
29+
const _StatusIcon = hotReload
30+
? connected
31+
? CheckIcon
32+
: OffIcon
33+
: ClockIcon;
34+
35+
return (
36+
<div className='dash-debug-menu__content'>
37+
<button
38+
onClick={toggleErrors}
39+
className={
40+
(popup == 'errors'
41+
? 'dash-debug-menu__button--selected'
42+
: null) + ' dash-debug-menu__button'
43+
}
44+
>
45+
<ErrorIcon className='dash-debug-menu__icon' />
46+
Errors
47+
{errCount > 0 ? (
48+
<span className='dash-debug-menu__error-count'>
49+
{errCount}
50+
</span>
51+
) : null}
52+
</button>
53+
<button
54+
onClick={toggleCallbackGraph}
55+
className={
56+
(popup == 'callbackGraph'
57+
? 'dash-debug-menu__button--selected'
58+
: '') + ' dash-debug-menu__button'
59+
}
60+
>
61+
<GraphIcon className='dash-debug-menu__icon' />
62+
Callbacks
63+
</button>
64+
<div className='dash-debug-menu__divider' />
65+
<VersionInfo
66+
config={config}
67+
showNotifications={showNotifications}
68+
setShowNotifications={setShowNotifications}
69+
/>
70+
<div className='dash-debug-menu__divider' />
71+
<div className='dash-debug-menu__status'>
72+
Server
73+
<_StatusIcon className='dash-debug-menu__icon' />
74+
</div>
75+
</div>
76+
);
77+
};
78+
2079
class DebugMenu extends Component {
2180
constructor(props) {
2281
super(props);
2382

2483
this.state = {
2584
opened: false,
26-
popup: 'errors'
85+
popup: 'errors',
86+
// Should be undefined if the user has not made a choice yet
87+
showNotifications:
88+
localStorage.getItem('showNotifications') === null
89+
? null
90+
: localStorage.getItem('showNotifications') === 'true'
2791
};
2892
}
2993

@@ -33,6 +97,11 @@ class DebugMenu extends Component {
3397
const errCount = error.frontEnd.length + error.backEnd.length;
3498
const connected = error.backEndConnected;
3599

100+
const setShowNotifications = value => {
101+
localStorage.setItem('showNotifications', value);
102+
this.setState({showNotifications: value});
103+
};
104+
36105
const toggleErrors = () => {
37106
this.setState({popup: popup == 'errors' ? null : 'errors'});
38107
};
@@ -45,62 +114,36 @@ class DebugMenu extends Component {
45114

46115
const errors = concat(error.frontEnd, error.backEnd);
47116

48-
const _StatusIcon = hotReload
49-
? connected
50-
? CheckIcon
51-
: OffIcon
52-
: ClockIcon;
117+
const popupContent = (
118+
<PopupContent
119+
popup={popup}
120+
errors={errors}
121+
backEndConnected={error.backEndConnected}
122+
errCount={errCount}
123+
toggleErrors={toggleErrors}
124+
showNotifications={this.state.showNotifications}
125+
setShowNotifications={setShowNotifications}
126+
/>
127+
);
53128

54129
const menuContent = (
55-
<div className='dash-debug-menu__content'>
56-
{popup == 'callbackGraph' ? <CallbackGraphContainer /> : null}
57-
<button
58-
onClick={toggleErrors}
59-
className={
60-
(popup == 'errors'
61-
? 'dash-debug-menu__button--selected'
62-
: null) + ' dash-debug-menu__button'
63-
}
64-
>
65-
<ErrorIcon className='dash-debug-menu__icon' />
66-
Errors
67-
{errCount > 0 ? (
68-
<span className='dash-debug-menu__error-count'>
69-
{errCount}
70-
</span>
71-
) : null}
72-
</button>
73-
<button
74-
onClick={toggleCallbackGraph}
75-
className={
76-
(popup == 'callbackGraph'
77-
? 'dash-debug-menu__button--selected'
78-
: '') + ' dash-debug-menu__button'
79-
}
80-
>
81-
<GraphIcon className='dash-debug-menu__icon' />
82-
Callbacks
83-
</button>
84-
<div className='dash-debug-menu__divider' />
85-
<VersionInfo config={config} />
86-
<div className='dash-debug-menu__divider' />
87-
<div className='dash-debug-menu__status'>
88-
Server
89-
<_StatusIcon className='dash-debug-menu__icon' />
90-
</div>
91-
</div>
130+
<MenuContent
131+
popup={popup}
132+
errCount={errCount}
133+
toggleErrors={toggleErrors}
134+
toggleCallbackGraph={toggleCallbackGraph}
135+
config={config}
136+
hotReload={hotReload}
137+
connected={connected}
138+
showNotifications={this.state.showNotifications}
139+
setShowNotifications={setShowNotifications}
140+
/>
92141
);
93142

94143
return (
95144
<div>
96145
<div className={classes('dash-debug-menu__outer')}>
97-
{popup == 'errors' && errCount > 0 ? (
98-
<FrontEndErrorContainer
99-
clickHandler={toggleErrors}
100-
errors={errors}
101-
connected={error.backEndConnected}
102-
/>
103-
) : undefined}
146+
{popupContent}
104147
{menuContent}
105148
</div>
106149
{this.props.children}

0 commit comments

Comments
 (0)