Skip to content

Commit 55e89d5

Browse files
andrewnandrewn
committed
Help button that shows modal to explain feature
1 parent 91379e0 commit 55e89d5

File tree

7 files changed

+99
-15
lines changed

7 files changed

+99
-15
lines changed

‎client/constants.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,6 @@ export const HIDE_ERROR_MODAL = 'HIDE_ERROR_MODAL';
114114

115115
export const PERSIST_STATE = 'PERSIST_STATE';
116116
export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE';
117+
118+
export const SHOW_HELP_MODAL = 'SHOW_HELP_MODAL';
119+
export const HIDE_HELP_MODAL = 'HIDE_HELP_MODAL';

‎client/images/help.svg

Lines changed: 7 additions & 0 deletions
Loading

‎client/modules/IDE/actions/ide.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,3 +220,16 @@ export function hideErrorModal() {
220220
type: ActionTypes.HIDE_ERROR_MODAL
221221
};
222222
}
223+
224+
export function showHelpModal(helpType) {
225+
return {
226+
type: ActionTypes.SHOW_HELP_MODAL,
227+
helpType
228+
};
229+
}
230+
231+
export function hideHelpModal() {
232+
return {
233+
type: ActionTypes.HIDE_HELP_MODAL
234+
};
235+
}

‎client/modules/IDE/components/Toolbar.jsx

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const logoUrl = require('../../../images/p5js-logo.svg');
88
const stopUrl = require('../../../images/stop.svg');
99
const preferencesUrl = require('../../../images/preferences.svg');
1010
const editProjectNameUrl = require('../../../images/pencil.svg');
11+
const helpUrl = require('../../../images/help.svg');
1112

1213
class Toolbar extends React.Component {
1314
constructor(props) {
@@ -102,19 +103,30 @@ class Toolbar extends React.Component {
102103
Auto-refresh
103104
</label>
104105
</div>
105-
<div className="toolbar__serve-secure">
106-
<input
107-
id="serve-secure"
108-
type="checkbox"
109-
checked={this.props.project.serveSecure}
110-
onChange={(event) => {
111-
this.props.setServeSecure(event.target.checked);
112-
}}
113-
/>
114-
<label htmlFor="serve-secure" className="toolbar__serve-secure-label">
115-
HTTPS
116-
</label>
117-
</div>
106+
{
107+
this.props.currentUser == null ?
108+
null :
109+
<div className="toolbar__serve-secure">
110+
<input
111+
id="serve-secure"
112+
type="checkbox"
113+
value={this.props.project.serveSecure}
114+
onChange={(event) => {
115+
this.props.setServeSecure(event.target.checked);
116+
}}
117+
/>
118+
<label htmlFor="serve-secure" className="toolbar__serve-secure-label">
119+
HTTPS
120+
</label>
121+
<button
122+
className="toolbar__serve-secure-help"
123+
onClick={() => this.props.showHelpModal('serveSecure')}
124+
aria-label="help"
125+
>
126+
<InlineSVG src={helpUrl} alt="Help" />
127+
</button>
128+
</div>
129+
}
118130
<div className={nameContainerClass}>
119131
<a
120132
className="toolbar__project-name"
@@ -187,6 +199,7 @@ Toolbar.propTypes = {
187199
}).isRequired,
188200
showEditProjectName: PropTypes.func.isRequired,
189201
hideEditProjectName: PropTypes.func.isRequired,
202+
showHelpModal: PropTypes.func.isRequired,
190203
infiniteLoop: PropTypes.bool.isRequired,
191204
autorefresh: PropTypes.bool.isRequired,
192205
setAutorefresh: PropTypes.func.isRequired,

‎client/modules/IDE/pages/IDEView.jsx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,7 @@ class IDEView extends React.Component {
231231
saveProject={this.props.saveProject}
232232
currentUser={this.props.user.username}
233233
clearConsole={this.props.clearConsole}
234+
showHelpModal={this.props.showHelpModal}
234235
/>
235236
<Preferences
236237
isVisible={this.props.ide.preferencesIsVisible}
@@ -450,6 +451,19 @@ class IDEView extends React.Component {
450451
);
451452
}
452453
})()}
454+
{(() => { // eslint-disable-line
455+
if (this.props.ide.helpType === 'serveSecure') {
456+
return (
457+
<Overlay>
458+
<div style={{ zIndex: 1000 }}>
459+
<button onClick={this.props.hideHelpModal}>Close</button>
460+
<h2>View this sketch over HTTP or HTTPS</h2>
461+
<p>Click the checkbox to reload this sketch using HTTPS or clear it to use HTTP.</p>
462+
</div>
463+
</Overlay>
464+
);
465+
}
466+
})()}
453467
</div>
454468

455469
);
@@ -493,7 +507,8 @@ IDEView.propTypes = {
493507
projectSavedTime: PropTypes.string.isRequired,
494508
previousPath: PropTypes.string.isRequired,
495509
justOpenedProject: PropTypes.bool.isRequired,
496-
errorType: PropTypes.string
510+
errorType: PropTypes.string,
511+
helpType: PropTypes.string
497512
}).isRequired,
498513
stopSketch: PropTypes.func.isRequired,
499514
startTextOutput: PropTypes.func.isRequired,
@@ -604,7 +619,9 @@ IDEView.propTypes = {
604619
showErrorModal: PropTypes.func.isRequired,
605620
hideErrorModal: PropTypes.func.isRequired,
606621
clearPersistedState: PropTypes.func.isRequired,
607-
persistState: PropTypes.func.isRequired
622+
persistState: PropTypes.func.isRequired,
623+
showHelpModal: PropTypes.func.isRequired,
624+
hideHelpModal: PropTypes.func.isRequired
608625
};
609626

610627
function mapStateToProps(state) {

‎client/modules/IDE/reducers/ide.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,10 @@ const ide = (state = initialState, action) => {
9191
return Object.assign({}, state, { errorType: action.modalType });
9292
case ActionTypes.HIDE_ERROR_MODAL:
9393
return Object.assign({}, state, { errorType: undefined });
94+
case ActionTypes.SHOW_HELP_MODAL:
95+
return Object.assign({}, state, { helpType: action.helpType });
96+
case ActionTypes.HIDE_HELP_MODAL:
97+
return Object.assign({}, state, { helpType: undefined });
9498
default:
9599
return state;
96100
}

‎client/styles/components/_toolbar.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,33 @@
120120
font-size: #{12 / $base-font-size}rem;
121121
}
122122

123+
.toolbar__serve-secure {
124+
margin-left: #{20 / $base-font-size}rem;
125+
}
126+
127+
.toolbar__serve-secure-label {
128+
@include themify() {
129+
color: getThemifyVariable('inactive-text-color');
130+
}
131+
margin-left: #{5 / $base-font-size}rem;
132+
font-size: #{12 / $base-font-size}rem;
133+
}
134+
135+
.toolbar__serve-secure-help {
136+
display: inline-block;
137+
vertical-align: top;
138+
height: #{12 / $base-font-size}rem;
139+
& svg {
140+
width: #{12 / $base-font-size}rem;
141+
height: #{12 / $base-font-size}rem;
142+
}
143+
@include themify() {
144+
& path {
145+
fill: getThemifyVariable('inactive-text-color');
146+
}
147+
}
148+
}
149+
123150
.toolbar__edit-name-button {
124151
display: inline-block;
125152
vertical-align: top;

0 commit comments

Comments
 (0)