Skip to content

Commit dc5aaae

Browse files
marthacryanmarthacryan
committed
Add icons for error and callback graph and clean up styles
1 parent 91e02dd commit dc5aaae

File tree

6 files changed

+46
-43
lines changed

6 files changed

+46
-43
lines changed

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.error-container {
2-
margin-top: 10px;
2+
padding: 0 10px;
33
}
44

55
.dash-fe-error__icon-x {
@@ -55,16 +55,13 @@
5555
height: 28px;
5656
margin: 0px 8px;
5757
}
58-
.dash-fe-error-top {
59-
width: 100%;
60-
}
6158
.dash-debug-menu__error-count {
6259
font-size: 12px;
6360
color: #fff;
6461
background-color: #C73A3A;
65-
padding: 5px;
62+
padding: 3px 5px;
6663
border-radius: 3px;
67-
margin: 4px;
64+
margin: 0 5px;
6865
}
6966
.dash-fe-error-top__group:first-child {
7067
/*
@@ -193,11 +190,11 @@
193190
width: 422px;
194191
}
195192
.dash-error-card--container {
196-
padding: 10px 0;
193+
padding: 20px;
197194
width: 600px;
198195
max-width: 800px;
199-
max-height: calc(100vh - 50px);
200-
margin: 10px 0;
196+
max-height: calc(100vh - 125px);
197+
margin-bottom: 7px;
201198
background-color: white;
202199
overflow: auto;
203200
z-index: 1100; /* above the plotly.js toolbar and Bootstrap components */
@@ -222,22 +219,21 @@
222219

223220
.dash-error-card__content {
224221
box-sizing: border-box;
225-
padding: 10px 10px;
226222
background-color: white;
227-
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
228-
0px 1px 3px rgba(162, 177, 198, 0.32);
229223
border-radius: 2px;
230224
margin-bottom: 8px;
225+
border: 1px solid #0018661A;
231226
}
232227

233-
.dash-error-card__list-item {
228+
.dash-fe-error-item {
234229
background: #ffffff;
235230
border-radius: 2px;
236231
display: flex;
232+
justify-content: space-between;
237233
align-items: center;
238234
border: 1px solid #0018661A;
239235
padding: 10px;
240-
margin: 10px;
236+
margin: 10px 0;
241237
cursor: pointer;
242238
}
243239

‎dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class FrontEndError extends Component {
2727
/* eslint-disable no-inline-comments */
2828
const errorHeader = (
2929
<div
30-
className='dash-fe-error-top test-devtools-error-toggle'
30+
className='dash-fe-error-item test-devtools-error-toggle'
3131
onClick={() => this.setState({collapsed: !collapsed})}
3232
>
3333
<span className='dash-fe-error-top__group'>
@@ -56,10 +56,9 @@ class FrontEndError extends Component {
5656
</span>
5757
</div>
5858
);
59-
/* eslint-enable no-inline-comments */
6059

6160
return collapsed ? (
62-
<div className='dash-error-card__list-item'>{errorHeader}</div>
61+
<>{errorHeader}</>
6362
) : (
6463
<div className={cardClasses}>
6564
{errorHeader}
@@ -137,7 +136,6 @@ function UnconnectedErrorContent({error, base}) {
137136
* browser's dev tools.
138137
*/
139138
width: 'calc(600px - 67px)',
140-
height: '75vh',
141139
border: 'none'
142140
}}
143141
/>

‎dash/dash-renderer/src/components/error/icons/ErrorIcon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎dash/dash-renderer/src/components/error/icons/GraphIcon.svg

100755100644
Lines changed: 2 additions & 2 deletions
Loading

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,14 @@
6666
align-items: center;
6767
}
6868
.dash-debug-menu__icon {
69-
margin-left: 5px;
69+
margin: 0 5px;
7070
}
7171

7272
.dash-debug-menu__upgrade-tooltip button,
7373
.dash-debug-menu__upgrade-tooltip a {
7474
background: white;
7575
border: none;
76-
padding: 0 5px;
76+
padding: 2px 5px;
7777
white-space: nowrap;
7878
color: #7F4BC4;
7979
font-size: 10pt;
@@ -97,6 +97,7 @@
9797
.dash-debug-menu__content {
9898
display: flex;
9999
align-items: stretch;
100+
margin: 10px;
100101
}
101102

102103
.dash-debug-menu__version {
@@ -106,10 +107,10 @@
106107
}
107108

108109
.dash-debug-menu__divider {
109-
width: 1px;
110-
height: 20px;
111-
margin: 10px;
112-
background-color: #e6e6e6;
110+
width: 1.5px;
111+
height: 26px;
112+
margin: 0px 13px;
113+
background-color: #0015594D;
113114
}
114115

115116
.dash-debug-menu__button {

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

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import './DebugMenu.css';
66

77
import CheckIcon from '../icons/CheckIcon.svg';
88
import ClockIcon from '../icons/ClockIcon.svg';
9+
import ErrorIcon from '../icons/ErrorIcon.svg';
10+
import GraphIcon from '../icons/GraphIcon.svg';
911
import OffIcon from '../icons/OffIcon.svg';
1012

1113
import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react';
@@ -79,21 +81,23 @@ class DebugMenu extends Component {
7981

8082
this.state = {
8183
opened: false,
82-
callbackGraphOpened: false,
83-
errorsOpened: true,
84+
popup: 'errors',
8485
upgradeInfo: []
8586
};
8687

8788
// Close the upgrade tooltip if the user clicks outside of it
88-
document.addEventListener('click', () => {
89-
if (this.state.upgradeTooltipOpened) {
89+
document.addEventListener('click', e => {
90+
if (
91+
this.state.upgradeTooltipOpened &&
92+
!e.target.closest('.dash-debug-menu__upgrade-button')
93+
) {
9094
this.setState({upgradeTooltipOpened: false});
9195
}
9296
});
9397
}
9498

9599
render() {
96-
const {callbackGraphOpened, errorsOpened, upgradeInfo} = this.state;
100+
const {popup, upgradeInfo, upgradeTooltipOpened} = this.state;
97101
const {error, hotReload, config} = this.props;
98102

99103
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -128,19 +132,18 @@ class DebugMenu extends Component {
128132
const connected = error.backEndConnected;
129133

130134
const toggleErrors = () => {
131-
this.setState({
132-
errorsOpened: callbackGraphOpened ? true : !errorsOpened,
133-
callbackGraphOpened: false
134-
});
135+
this.setState({popup: popup == 'errors' ? null : 'errors'});
135136
};
136137

137138
const toggleCallbackGraph = () => {
138-
this.setState({callbackGraphOpened: !callbackGraphOpened});
139+
this.setState({
140+
popup: popup == 'callbackGraph' ? null : 'callbackGraph'
141+
});
139142
};
140143

141144
const toggleShowUpgradeTooltip = () => {
142145
this.setState({
143-
upgradeTooltipOpened: !this.state.upgradeTooltipOpened
146+
upgradeTooltipOpened: !upgradeTooltipOpened
144147
});
145148
};
146149

@@ -154,15 +157,16 @@ class DebugMenu extends Component {
154157

155158
const menuContent = (
156159
<div className='dash-debug-menu__content'>
157-
{callbackGraphOpened ? <CallbackGraphContainer /> : null}
160+
{popup == 'callbackGraph' ? <CallbackGraphContainer /> : null}
158161
<button
159162
onClick={toggleErrors}
160163
className={
161-
(!callbackGraphOpened && errorsOpened
164+
(popup == 'errors'
162165
? 'dash-debug-menu__button--selected'
163166
: null) + ' dash-debug-menu__button'
164167
}
165168
>
169+
<ErrorIcon className='dash-debug-menu__icon' />
166170
Errors
167171
{errCount > 0 ? (
168172
<span className='dash-debug-menu__error-count'>
@@ -173,11 +177,12 @@ class DebugMenu extends Component {
173177
<button
174178
onClick={toggleCallbackGraph}
175179
className={
176-
(callbackGraphOpened
180+
(popup == 'callbackGraph'
177181
? 'dash-debug-menu__button--selected'
178-
: null) + ' dash-debug-menu__button'
182+
: '') + ' dash-debug-menu__button'
179183
}
180184
>
185+
<GraphIcon className='dash-debug-menu__icon' />
181186
Callbacks
182187
</button>
183188
<div className='dash-debug-menu__divider' />
@@ -210,7 +215,7 @@ class DebugMenu extends Component {
210215
className='dash-debug-menu__upgrade-button'
211216
onClick={toggleShowUpgradeTooltip}
212217
>
213-
Upgrade to v{newDashVersion}
218+
Dash update available - v{newDashVersion}
214219
</button>
215220
) : null}
216221
</div>
@@ -225,7 +230,7 @@ class DebugMenu extends Component {
225230
return (
226231
<div>
227232
<div className={classes('dash-debug-menu__outer')}>
228-
{errorsOpened && errCount > 0 ? (
233+
{popup == 'errors' && errCount > 0 ? (
229234
<FrontEndErrorContainer
230235
clickHandler={toggleErrors}
231236
errors={errors}

0 commit comments

Comments
 (0)