r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

[WIP] Set min & max limits on font-size (#716)

Browse source 
* Set min & max limits on font-size

Disable the font-size setting button when extremum is reached.

References https://github.com/processing/p5.js-web-editor/issues/689

* handle case for user input to input field, also add min and max for indentation amount
This commit is contained in:
Bhawesh Bhansali 2018-11-03 01:25:06 +05:30 committed by Cassie Tarakajian
parent 0f7e9d8dcd
commit 61dd0bb4d0
2 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
client/modules/IDE/components/Preferences.jsx
View file

@ -25,6 +25,12 @@ class Preferences extends React.Component {
if (Number.isNaN(value)) { if (Number.isNaN(value)) {
value = 16; value = 16;
} }
if (value > 36) {
value = 36;
}
if (value < 8) {
value = 8;
}
this.props.setFontSize(value); this.props.setFontSize(value);
} }
@ -33,6 +39,12 @@ class Preferences extends React.Component {
if (Number.isNaN(value)) { if (Number.isNaN(value)) {
value = 2; value = 2;
} }
if (value > 6) {
value = 6;
}
if (value < 0) {
value = 0;
}
this.props.setIndentation(value); this.props.setIndentation(value);
} }
@ -106,6 +118,7 @@ class Preferences extends React.Component {
className="preference__minus-button" className="preference__minus-button"
onClick={() => this.props.setFontSize(this.props.fontSize - 2)} onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
aria-label="decrease font size" aria-label="decrease font size"
disabled={this.props.fontSize <= 8}
> >
<InlineSVG src={minusUrl} alt="Decrease Font Size" /> <InlineSVG src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6> <h6 className="preference__label">Decrease</h6>
@ -125,6 +138,7 @@ class Preferences extends React.Component {
className="preference__plus-button" className="preference__plus-button"
onClick={() => this.props.setFontSize(this.props.fontSize + 2)} onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
aria-label="increase font size" aria-label="increase font size"
disabled={this.props.fontSize >= 36}
> >
<InlineSVG src={plusUrl} alt="Increase Font Size" /> <InlineSVG src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6> <h6 className="preference__label">Increase</h6>
@ -136,6 +150,7 @@ class Preferences extends React.Component {
className="preference__minus-button" className="preference__minus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)} onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
aria-label="decrease indentation amount" aria-label="decrease indentation amount"
disabled={this.props.indentationAmount <= 0}
> >
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" /> <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6> <h6 className="preference__label">Decrease</h6>
@ -155,6 +170,7 @@ class Preferences extends React.Component {
className="preference__plus-button" className="preference__plus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)} onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
aria-label="increase indentation amount" aria-label="increase indentation amount"
disabled={this.props.indentationAmount >= 6}
> >
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" /> <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6> <h6 className="preference__label">Increase</h6>

6
client/styles/abstracts/_placeholders.scss
View file

@ -128,13 +128,17 @@
& g { & g {
fill: getThemifyVariable('modal-button-color'); fill: getThemifyVariable('modal-button-color');
} }
&:hover { &:enabled:hover {
background-color: getThemifyVariable('button-background-hover-color'); background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color'); color: getThemifyVariable('button-hover-color');
& g { & g {
fill: getThemifyVariable('button-hover-color'); fill: getThemifyVariable('button-hover-color');
} }
} }
&:disabled:hover {
cursor: not-allowed;
background-color: getThemifyVariable('modal-button-background-color');
}
} }
} }