me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add option for coloured edges on progress page

Browse Source
This commit is contained in:
Matthew Grove
2021-10-03 17:43:22 +01:00
parent aec4c8efcf
commit 4c2f1613ff
9 changed files with 83 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.js
View File

@@ -121,6 +121,7 @@ class App extends React.Component {
userDataPresent: false,
sound: true,
theme: "default",
coloredEdges: false,
pageLoading: true,
};
@@ -161,9 +162,11 @@ class App extends React.Component {
.then((userDoc) => {
newState.sound = userDoc.data().sound;
newState.theme = userDoc.data().theme;
newState.coloredEdges = userDoc.data().coloredEdges;
}).catch((error) => {
newState.sound = true;
newState.theme = "default";
newState.coloredEdges = false;
});
}
@@ -234,6 +237,17 @@ class App extends React.Component {
});
}
handleColoredEdgesChange = (newColoredEdges, globalChange = false) => {
if (globalChange) firebase.firestore().collection("users")
.doc(this.state.user.uid)
.update({
coloredEdges: newColoredEdges,
});
this.setState({
coloredEdges: newColoredEdges,
});
}
acceptCookies = () => {
window.removeEventListener('resize', this.updateCookieNoticeMargins);
this.cookieNoticeHeight = this.cookieNotice.offsetHeight;
@@ -285,10 +299,14 @@ class App extends React.Component {
<GroupPage db={db} functions={functions} user={this.state.user} logEvent={analytics.logEvent} page={this.page} />
</Route>
<Route path="/settings">
<Settings db={db} user={this.state.user} sound={this.state.sound} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} logEvent={analytics.logEvent} page={this.page} />
<Settings db={db} user={this.state.user} sound={this.state.sound} coloredEdges={this.state.coloredEdges} handleColoredEdgesChange={this.handleColoredEdgesChange} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} logEvent={analytics.logEvent} page={this.page} />
</Route>
<Route path="/progress/:progressId" exact>
<Progress db={db} functions={functions} user={this.state.user} sound={this.state.sound} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} logEvent={analytics.logEvent} page={this.page} />
<Progress db={db} functions={functions} user={this.state.user} sound={this.state.sound} coloredEdges={this.state.coloredEdges} handleColoredEdgesChange={this.handleColoredEdgesChange} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} logEvent={analytics.logEvent} page={this.page} />
{
this.state.coloredEdges &&
<div className="colored-edges"></div>
}
</Route>
<Route path="/create-set" exact>
<CreateSet db={db} user={this.state.user} logEvent={analytics.logEvent} page={this.page} />

10
src/Progress.js
View File

@@ -61,6 +61,7 @@ export default withRouter(class Progress extends React.Component {
showSettings: false,
soundInput: this.props.sound,
themeInput: this.props.theme,
coloredEdgesInput: this.props.coloredEdges,
setIds: [],
attemptNumber: 1,
attemptHistory: {},
@@ -232,9 +233,16 @@ export default withRouter(class Progress extends React.Component {
});
}
handleColoredEdgesInputChange = (event) => {
this.setState({
coloredEdgesInput: event.target.checked,
});
}
saveSettings = (globalChange) => {
this.props.handleSoundChange(this.state.soundInput, globalChange);
this.props.handleThemeChange(this.state.themeInput, globalChange);
this.props.handleColoredEdgesChange(this.state.coloredEdgesInput, globalChange);
this.hideSettings();
}
@@ -702,9 +710,11 @@ export default withRouter(class Progress extends React.Component {
saveSettings={this.saveSettings}
handleSoundInputChange={this.handleSoundInputChange}
handleThemeInputChange={this.handleThemeInputChange}
handleColoredEdgesInputChange={this.handleColoredEdgesInputChange}
themes={this.props.themes}
soundInput={this.state.soundInput}
themeInput={this.state.themeInput}
coloredEdgesInput={this.state.coloredEdgesInput}
/>

10
src/Settings.js
View File

@@ -22,6 +22,7 @@ export default withRouter(class Settings extends Component {
],
soundInput: this.props.sound,
themeInput: this.props.theme,
coloredEdgesInput: this.props.coloredEdges,
};
let isMounted = true;
@@ -60,9 +61,16 @@ export default withRouter(class Settings extends Component {
});
}
handleColoredEdgesInputChange = (event) => {
this.setState({
coloredEdgesInput: event.target.checked,
});
}
saveSettings = (globalChange) => {
this.props.handleSoundChange(this.state.soundInput, globalChange);
this.props.handleThemeChange(this.state.themeInput, globalChange);
this.props.handleColoredEdgesChange(this.state.coloredEdgesInput, globalChange);
this.props.history.push("/");
}
@@ -77,9 +85,11 @@ export default withRouter(class Settings extends Component {
saveSettings={this.saveSettings}
handleSoundInputChange={this.handleSoundInputChange}
handleThemeInputChange={this.handleThemeInputChange}
handleColoredEdgesInputChange={this.handleColoredEdgesInputChange}
themes={this.props.themes}
soundInput={this.state.soundInput}
themeInput={this.state.themeInput}
coloredEdgesInput={this.state.coloredEdgesInput}
/>
<div className="settings-save-container">

28
src/SettingsContent.js
View File

@@ -10,17 +10,27 @@ export default class SettingsContent extends Component {
return (
<>
<h1 className="settings-header">Settings</h1>
<label className="settings-sound-container">
<Checkbox
checked={this.props.soundInput}
onChange={this.props.handleSoundInputChange}
inputProps={{ 'aria-label': 'checkbox' }}
/>
<span>Sound</span>
</label>
<div className="settings-options-container">
<label>
<Checkbox
checked={this.props.soundInput}
onChange={this.props.handleSoundInputChange}
inputProps={{ 'aria-label': 'checkbox' }}
/>
<span>Sound</span>
</label>
<label>
<Checkbox
checked={this.props.coloredEdgesInput}
onChange={this.props.handleColoredEdgesInputChange}
inputProps={{ 'aria-label': 'checkbox' }}
/>
<span>Coloured edges</span>
</label>
</div>
<h2 className="settings-theme-header">Theme</h2>
<div className="settings-themes-container">
<div className="settings-options-container">
{
this.props.themes.map((theme) =>
<Button

20
src/css/App.css
View File

@@ -6,7 +6,8 @@ html {
--background-color: #111111;
--background-color-dark: #000000;
--overlay-color: #333333;
background-color: var(--background-color);
height: 100%;
color: var(--text-color);
--default: #2a8c8c;
@@ -112,10 +113,6 @@ html {
--primary-color-dark: var(--orange-dark);
}
html {
height: 100%;
}
body {
max-width: 1080px;
margin: auto;
@@ -126,6 +123,7 @@ body, #root, #root > div, #root > div > div:first-child {
display: flex;
flex-direction: column;
flex: 1;
background-color: var(--background-color);
}
main {
@@ -409,6 +407,18 @@ label .MuiIconButton-label > input {
opacity: 0 !important;
}
.colored-edges {
z-index: -5;
background-color: var(--primary-color-dark);
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0.7;
}
@media screen and (max-width: 420px) {
.progress-history-container > div > *:nth-child(2), .progress-history-container--complete > div > *:nth-last-child(3), .progress-history-container--incomplete > div > *:nth-last-child(4) {
display: none;

4
src/css/SettingsContent.css
View File

@@ -1,4 +1,4 @@
.settings-themes-container {
.settings-options-container {
display: flex;
flex-direction: row;
column-gap: 16px;
@@ -7,7 +7,7 @@
flex-wrap: wrap;
}
.settings-header, .settings-sound-container, .settings-themes-container {
.settings-header, .settings-options-container {
margin-bottom: 36px;
margin-top: 0;
}