Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Linting. Finally set up my linter properly

Browse Source
This commit is contained in:
Jorik Schellekens 2020-04-16 11:56:43 +01:00
parent 66fd0f707f
commit f1130ecba1
4 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/structures/FontSlider.js
View File

@ -18,8 +18,8 @@ import React from 'react';
import PropTypes from 'prop-types';
export default class Slider extends React.Component {
static propTypes = {
// A callback for the new value onclick
updateFontSize: PropTypes.func,
@ -32,41 +32,41 @@ export default class Slider extends React.Component {
// A function for formatting the the values
displayFunc: PropTypes.func,
};
render() {
let dots = this.props.values.map(v =>
<Dot active={v<=this.props.value}
label={this.props.displayFunc(v)}
const dots = this.props.values.map(v =>
<Dot active={v<=this.props.value}
label={this.props.displayFunc(v)}
onClick={() => this.props.updateFontSize(v)}
key={v}
/>);
let offset = this.offset(this.props.values, this.props.value);
const offset = this.offset(this.props.values, this.props.value);
return <div className="mx_fontSlider">
<div>
<div className="mx_fontSlider_bar">
<hr />
<div className="mx_fontSlider_selection">
<div className="mx_fontSlider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%"}} />
<hr style={{width: offset + "%"}}/>
<div className="mx_fontSlider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} />
<hr style={{width: offset + "%"}} />
</div>
</div>
<div className="mx_fontSlider_dotContainer">
{dots}
</div>
</div>
</div>
</div>;
}
offset(values, value) {
return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
}
}
class Dot extends React.Component {
static propTypes = {
// Callback for behaviour onclick
onClick: PropTypes.func,
@ -78,14 +78,14 @@ class Dot extends React.Component {
label: PropTypes.string,
}
render () {
let className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
render() {
const className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
return <span onClick={this.props.onClick} className="mx_fontSlider_dotValue">
<div className={className} />
<div>
{this.props.label}
</div>
</span>
</span>;
}
}
}

16
src/components/views/settings/tabs/user/StyleUserSettingsTab.js
View File

@ -21,6 +21,8 @@ import * as sdk from "../../../../../index";
import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
import Field from "../../../elements/Field";
import FontSlider from "../../../../structures/FontSlider";
import AccessibleButton from "../../../elements/AccessibleButton";
import dis from "../../../../../dispatcher";
export default class StyleUserSettingsTab extends React.Component {
constructor() {
@ -31,7 +33,8 @@ export default class StyleUserSettingsTab extends React.Component {
...this._calculateThemeState(),
customThemeUrl: "",
customThemeMessage: {isError: false, text: ""},
}
};
}
_calculateThemeState() {
@ -95,9 +98,9 @@ export default class StyleUserSettingsTab extends React.Component {
};
_onFontSizeChanged = (size) => {
let parsed_size = isNaN(parseInt(size))?SettingsStore.getDefaultValue("font_size"):parseFloat(size);
this.setState({fontSize: parsed_size})
SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, parsed_size)
const parsedSize = isNaN(parseInt(size))?SettingsStore.getDefaultValue("font_size"):parseFloat(size);
this.setState({fontSize: parsedSize});
SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, parsedSize);
};
_onAddCustomTheme = async () => {
@ -221,7 +224,7 @@ export default class StyleUserSettingsTab extends React.Component {
return <div className="mx_SettingsTab_section mx_StyleUserSettingsTab_fontScaling">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<FontSlider
values={[12,14,16,18,20]}
values={[12, 14, 16, 18, 20]}
value={this.state.fontSize}
updateFontSize={this._onFontSizeChanged}
displayFunc={value => value + 'px'}
@ -235,7 +238,6 @@ export default class StyleUserSettingsTab extends React.Component {
id="font_size_field"
onChange={(ev) => this._onFontSizeChanged(ev.target.value)}
/>
</div>
</div>;
}
}

10
src/fontSize.js
View File

@ -18,9 +18,9 @@ import dis from './dispatcher';
import SettingsStore from './settings/SettingsStore';
export class FontWatcher {
constructor(min_size, max_size) {
this._min_size = min_size;
this._max_size = max_size;
constructor(minSize, maxSize) {
this._min_size = minSize;
this._max_size = maxSize;
this._dispatcherRef = null;
}
@ -43,8 +43,8 @@ export class FontWatcher {
let fontSize = this._min_size < size?size:this._min_size;
fontSize = fontSize < this._max_size?fontSize:this._max_size;
if (fontSize != size) {
SettingsStore.setValue("font_size", null, fontSize)
SettingsStore.setValue("font_size", null, fontSize);
}
document.querySelector(":root").style.fontSize = fontSize + "px";
}
}
}

3
src/settings/controllers/FontSizeController.js
View File

@ -18,9 +18,8 @@ import SettingController from "./SettingController";
import dis from "../../dispatcher";
export default class FontSizeController extends SettingController {
constructor() {
super()
super();
}
onChange(level, roomId, newValue) {