Skip to content

Commit 5788da2

Browse files
zeusongitzeusongit
committed
Consolidate labels prop and add restart/reset UI message
Replace many individual label props with a single labels object passed from App to Static. Update Static to read labels from props.labels, simplify setLabels in App, and update defaultProps/propTypes accordingly. Add UI and handlers for a restart message and a reset button shown after importing settings (showRestartMessage/hideRestartMessage/resetSettings) and clear the file input after import. Add related CSS for import row, reset button, and restart message, and tweak bottomMenu classes in App.css.
1 parent 8dc6cb3 commit 5788da2

File tree

4 files changed

+176
-58
lines changed

4 files changed

+176
-58
lines changed

‎src/App.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,17 @@
99
}
1010

1111
.bottomMenu {
12+
height: auto;
13+
}
14+
15+
.bottomMenuHeader {
1216
height: 50%;
1317
}
1418

19+
.bottomMenuContent {
20+
height: auto;
21+
}
22+
1523
.welcomeRow {
1624
margin-top: 20px !important;
1725
}

‎src/App.js‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ class App extends React.Component {
4949
<Container fluid>
5050
<Row>
5151
<Col className='menuOptions px-4' >
52-
<Row className='bottomMenu'>
52+
<Row className='bottomMenu bottomMenuHeader'>
5353
<Col>
5454
<Row>
5555
<div>
@@ -63,22 +63,13 @@ class App extends React.Component {
6363
</Row>
6464
</Col>
6565
</Row>
66-
<Row className='bottomMenu'>
66+
<Row className='bottomMenu bottomMenuContent'>
6767
<Col>
6868
{
6969
this.state.loadingDone ?
7070
<Static
7171
signInStatus={this.state.signInStatus}
72-
signInTitle={this.state.signInTitle}
73-
signInTooltip={this.state.signInTooltip}
74-
signingInTitle={this.state.signingInTitle}
75-
signOutTitle={this.state.signOutTitle}
76-
signOutTooltip={this.state.signOutTooltip}
77-
welcomeToDynamoTitle={this.state.welcomeToDynamoTitle}
78-
launchTitle={this.state.launchTitle}
79-
showScreenAgainLabel={this.state.showScreenAgainLabel}
80-
importSettingsTitle={this.state.importSettingsTitle}
81-
importSettingsTooltipDescription={this.state.importSettingsTooltipDescription}
72+
labels={this.state.labels}
8273
onCheckedChange={this.handleCheckedChange}
8374
/> : <Dynamic />
8475
}
@@ -98,15 +89,7 @@ class App extends React.Component {
9889
setLabels(labels) {
9990
this.setState({
10091
welcomeToDynamoTitle: labels.welcomeToDynamoTitle,
101-
launchTitle: labels.launchTitle,
102-
showScreenAgainLabel: labels.showScreenAgainLabel,
103-
importSettingsTitle: labels.importSettingsTitle,
104-
importSettingsTooltipDescription: labels.importSettingsTooltipDescription,
105-
signInTitle: labels.signInTitle,
106-
signInTooltip: labels.signInTooltip,
107-
signingInTitle: labels.signingInTitle,
108-
signOutTitle: labels.signOutTitle,
109-
signOutTooltip: labels.signOutTooltip
92+
labels: labels
11093
});
11194
}
11295

‎src/Static.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,4 +90,88 @@ input[type="file"] {
9090

9191
.loadingTimeFooter {
9292
font-size: 9px;
93+
}
94+
95+
/* Import settings row */
96+
.importSettingsRow {
97+
display: grid !important;
98+
align-items: center;
99+
}
100+
101+
.importSettingsRow label {
102+
width: 100%;
103+
display: block;
104+
}
105+
106+
.importSettingsRowWithReset {
107+
grid-template-columns: 1fr 24px;
108+
column-gap: 8px;
109+
}
110+
111+
.importSettingsRowWithReset label {
112+
min-width: 0;
113+
width: 100%;
114+
}
115+
116+
/* Reset button next to import settings */
117+
.resetButtonNextToImport {
118+
position: static;
119+
width: 24px !important;
120+
height: 24px;
121+
padding: 0;
122+
box-sizing: border-box;
123+
line-height: 0;
124+
background: transparent;
125+
border: 1px solid rgba(255, 255, 255, 0.3);
126+
border-radius: 2px;
127+
cursor: pointer;
128+
display: grid;
129+
align-items: center;
130+
justify-content: center;
131+
color: white;
132+
transition: all 0.2s ease;
133+
}
134+
135+
.resetButtonNextToImport:hover {
136+
border-color: rgba(255, 255, 255, 0.6);
137+
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
138+
}
139+
140+
.resetButtonNextToImport:active {
141+
box-shadow: 0px 0px 2px rgba(56, 171, 223, 0.65);
142+
}
143+
144+
.resetButtonNextToImport svg {
145+
width: 16px;
146+
height: 16px;
147+
display: block;
148+
}
149+
150+
/* Restart message styles - full width */
151+
.restartMessage {
152+
width: 100%;
153+
animation: slideIn 0.3s ease;
154+
font-size: 10px;
155+
line-height: 1.3;
156+
color: yellow;
157+
word-wrap: break-word;
158+
overflow-wrap: break-word;
159+
box-sizing: border-box;
160+
}
161+
162+
.restartMessageFullBleed {
163+
margin-left: -1.7rem !important;
164+
width: calc(100% + 3.7rem);
165+
margin-bottom: -0.5rem;
166+
}
167+
168+
@keyframes slideIn {
169+
from {
170+
opacity: 0;
171+
transform: translateY(-10px);
172+
}
173+
to {
174+
opacity: 1;
175+
transform: translateY(0);
176+
}
93177
}

‎src/Static.js‎

Lines changed: 80 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,20 @@ class Static extends React.Component {
2424
this.state = {
2525
importStatus: importStatusEnum.none,
2626
errorDescription: 'Something went wrong when importing your custom setting file. Please try again or proceed with default settings.',
27-
signInTitle: this.props.signInStatus ? this.props.signOutTitle : this.props.signInTitle,
28-
signInTooltip: this.props.signInStatus ? this.props.signOutTooltip : this.props.signInTooltip,
27+
signInTitle: this.props.signInStatus ? this.props.labels.signOutTitle : this.props.labels.signInTitle,
28+
signInTooltip: this.props.signInStatus ? this.props.labels.signOutTooltip : this.props.labels.signInTooltip,
2929
signInStatus: this.props.signInStatus,
3030
loadingTime: 'Total loading time: ',
31-
importSettingsTitle: this.props.importSettingsTitle
31+
importSettingsTitle: this.props.labels.importSettingsTitle,
32+
showRestartMessage: false
3233
};
3334

3435
window.setImportStatus = this.setImportStatus.bind(this);
3536
window.setTotalLoadingTime = this.setTotalLoadingTime.bind(this);
3637
window.setEnableSignInButton = this.setEnableSignInButton.bind(this);
3738
window.handleSignInStateChange = this.handleSignInStateChange.bind(this);
39+
window.showRestartMessage = this.showRestartMessage.bind(this);
40+
window.hideRestartMessage = this.hideRestartMessage.bind(this);
3841
this.handleChange = this.handleChange.bind(this);
3942
}
4043

@@ -53,7 +56,7 @@ class Static extends React.Component {
5356
<Container className='pr-3'>
5457
<Row className='mt-3'>
5558
<button className='secondaryButton' onClick={this.launchDynamo} tabIndex={1}>
56-
{this.props.launchTitle}
59+
{this.props.labels.launchTitle}
5760
</button>
5861
</Row>
5962

@@ -67,14 +70,14 @@ class Static extends React.Component {
6770
</OverlayTrigger>
6871
</Row>
6972

70-
<Row className='mt-3'>
73+
<Row className={`mt-3 importSettingsRow${this.state.showRestartMessage ? ' importSettingsRowWithReset' : ''}`}>
7174
<OverlayTrigger
7275
placement={'right'}
7376
overlay={
7477
<Tooltip
7578
hidden={this.state.importStatus === importStatusEnum.success}
7679
id='button-tooltip'>
77-
{this.state.importStatus == importStatusEnum.error ? this.state.errorDescription : this.props.importSettingsTooltipDescription}
80+
{this.state.importStatus == importStatusEnum.error ? this.state.errorDescription : this.props.labels.importSettingsTooltipDescription}
7881
</Tooltip>
7982
}>
8083
<label id='lblImportSettings' className='primaryButton px-1' tabIndex={3}>
@@ -95,13 +98,33 @@ class Static extends React.Component {
9598
alt=''
9699
hidden={this.state.importStatus !== importStatusEnum.success}></img>
97100
<div className='importSettingsText'>
98-
<span>{this.props.importSettingsTitle}</span>
101+
<span>{this.props.labels.importSettingsTitle}</span>
99102
</div>
100103
</div>
101104
</label>
102105
</OverlayTrigger>
106+
{this.state.showRestartMessage && (
107+
<button
108+
className='resetButtonNextToImport'
109+
title={this.props.labels.resetTooltip}
110+
onClick={this.resetSettings}
111+
>
112+
<svg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
113+
<path d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'
114+
fill='currentColor' />
115+
</svg>
116+
</button>
117+
)}
103118
</Row>
104119

120+
{this.state.showRestartMessage && (
121+
<Row className='mt-2 g-0 restartMessageFullBleed'>
122+
<div className='restartMessage'>
123+
{this.props.labels.restartMessage}
124+
</div>
125+
</Row>
126+
)}
127+
105128
<Row className='mt-3'>
106129
<label className='p-0 checkboxShowScreenAgain '>
107130
<input
@@ -111,7 +134,7 @@ class Static extends React.Component {
111134
tabIndex={4} />
112135
<span className='checkmark'>
113136
{' '}
114-
{this.props.showScreenAgainLabel}{' '}
137+
{this.props.labels.showScreenAgainLabel}{' '}
115138
</span>
116139
</label>
117140
</Row>
@@ -132,31 +155,31 @@ class Static extends React.Component {
132155
let status = await chrome.webview.hostObjects.scriptObject.SignOut();
133156
this.setState({
134157
signInStatus: !status,
135-
signInTitle: this.props.signInTitle,
136-
signInTooltip: this.props.signInTooltip
158+
signInTitle: this.props.labels.signInTitle,
159+
signInTooltip: this.props.labels.signInTooltip
137160
});
138161
}
139162
else {
140163
let btn = document.getElementById('btnSignIn');
141164
btn.classList.add('disableButton');
142165
btn.disabled = true;
143166

144-
this.setState({ signInTitle: this.props.signingInTitle });
167+
this.setState({ signInTitle: this.props.labels.signingInTitle });
145168
let status = await chrome.webview.hostObjects.scriptObject.SignIn();
146169
this.setState({ signInStatus: status });
147170

148171
btn.classList.remove('disableButton');
149172
btn.disabled = false;
150173
if (status) {
151174
this.setState({
152-
signInTitle: this.props.signOutTitle,
153-
signInTooltip: this.props.signOutTooltip
175+
signInTitle: this.props.labels.signOutTitle,
176+
signInTooltip: this.props.labels.signOutTooltip
154177
});
155178
}
156179
else {
157180
this.setState({
158-
signInTitle: this.props.signInTitle,
159-
signInTooltip: this.props.signInTooltip
181+
signInTitle: this.props.labels.signInTitle,
182+
signInTooltip: this.props.labels.signInTooltip
160183
});
161184
}
162185
}
@@ -183,6 +206,9 @@ class Static extends React.Component {
183206
};
184207

185208
fr.readAsText(file);
209+
210+
// Clear the input so the same file can be selected again
211+
event.target.value = '';
186212
}
187213
}
188214

@@ -221,18 +247,39 @@ class Static extends React.Component {
221247

222248
if (auth.status === 'True') {
223249
this.setState({
224-
signInTitle: this.props.signOutTitle,
225-
signInTooltip: this.props.signOutTooltip
250+
signInTitle: this.props.labels.signOutTitle,
251+
signInTooltip: this.props.labels.signOutTooltip
226252
});
227253
}
228254
else {
229255
this.setState({
230-
signInTitle: this.props.signInTitle,
231-
signInTooltip: this.props.signInTooltip
256+
signInTitle: this.props.labels.signInTitle,
257+
signInTooltip: this.props.labels.signInTooltip
232258
});
233259
}
234260
}
235261

262+
//Show restart message and reset button after settings import
263+
showRestartMessage() {
264+
this.setState({
265+
showRestartMessage: true
266+
});
267+
}
268+
269+
//Hide restart message and reset button
270+
hideRestartMessage() {
271+
this.setState({
272+
showRestartMessage: false
273+
});
274+
}
275+
276+
//Reset imported settings
277+
resetSettings = () => {
278+
if (chrome.webview !== undefined) {
279+
chrome.webview.hostObjects.scriptObject.ResetSettings();
280+
}
281+
};
282+
236283
handleKeyDown = (e) => {
237284
if (e.key === 'Enter') {
238285
// We check explicitly the lblImportSettings control due to it's a label that wraps inputs, it's no necessary for the launch and signing buttons because they receive the focus ready to are hit with the Enter key
@@ -244,28 +291,24 @@ class Static extends React.Component {
244291
}
245292

246293
Static.defaultProps = {
247-
signInTitle: 'Sign In',
248-
signInTooltip: 'Sign in to access online services that integrate with your desktop software.',
249-
signingInTitle: 'Signing In',
250-
signOutTitle: 'Sign Out',
251-
signOutTooltip: 'Signing out of Dynamo will sign you out of all Autodesk desktop products.',
252-
launchTitle: 'Launch Dynamo',
253-
showScreenAgainLabel: 'Don\'t show this screen again',
254-
importSettingsTitle: 'Import Settings',
255-
importSettingsTooltipDescription: 'You can import custom settings here, which will overwrite your current settings. If you\'d like to preserve a copy of your current settings, export them before importing new settings. Settings not shown in the Preferences panel will be applied once Dynamo and any host program restarts.'
294+
labels: {
295+
signInTitle: 'Sign In',
296+
signInTooltip: 'Sign in to access online services that integrate with your desktop software.',
297+
signingInTitle: 'Signing In',
298+
signOutTitle: 'Sign Out',
299+
signOutTooltip: 'Signing out of Dynamo will sign you out of all Autodesk desktop products.',
300+
launchTitle: 'Launch Dynamo',
301+
showScreenAgainLabel: 'Don\'t show this screen again',
302+
importSettingsTitle: 'Import Settings',
303+
importSettingsTooltipDescription: 'You can import custom settings here, which will overwrite your current settings. If you\'d like to preserve a copy of your current settings, export them before importing new settings. Settings not shown in the Preferences panel will be applied once Dynamo and any host program restarts.',
304+
restartMessage: 'Settings imported successfully. Please restart Dynamo for changes to take effect.',
305+
resetTooltip: 'Reset imported settings'
306+
}
256307
};
257308

258309
Static.propTypes = {
259-
signInTitle: PropTypes.string,
260-
signInTooltip: PropTypes.string,
261-
signingInTitle: PropTypes.string,
262-
signOutTitle: PropTypes.string,
263-
signOutTooltip: PropTypes.string,
264-
launchTitle: PropTypes.string,
265-
showScreenAgainLabel: PropTypes.string,
310+
labels: PropTypes.object,
266311
signInStatus: PropTypes.bool,
267-
importSettingsTitle: PropTypes.string,
268-
importSettingsTooltipDescription: PropTypes.string,
269312
onCheckedChange: PropTypes.func
270313
};
271314

0 commit comments

Comments
 (0)