PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Some lints

Browse source
This commit is contained in:
Jorik Schellekens 2020-05-06 17:25:54 +01:00
parent f7b3662e0b
commit bab7d5f461
6 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/views/elements/_Slider.scss
View file

@ -38,7 +38,7 @@ limitations under the License.
.mx_Slider_bar > hr { .mx_Slider_bar > hr {
width: 100%; width: 100%;
border: 0.2em solid $Slider-background-color; border: 0.2em solid $slider-background-color;
} }
.mx_Slider_selection { .mx_Slider_selection {
@ -54,7 +54,7 @@ limitations under the License.
position: absolute; position: absolute;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
background-color: $Slider-selection-color; background-color: $slider-selection-color;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 6px lightgrey; box-shadow: 0 0 6px lightgrey;
z-index: 10; z-index: 10;
@ -63,7 +63,7 @@ limitations under the License.
.mx_Slider_selection > hr { .mx_Slider_selection > hr {
transition: width 0.25s; transition: width 0.25s;
margin: 0; margin: 0;
border: 0.2em solid $Slider-selection-color; border: 0.2em solid $slider-selection-color;
} }
.mx_Slider_dot { .mx_Slider_dot {
@ -71,19 +71,19 @@ limitations under the License.
height: 1em; height: 1em;
width: 1em; width: 1em;
border-radius: 50%; border-radius: 50%;
background-color: $Slider-background-color; background-color: $slider-background-color;
z-index: 0; z-index: 0;
} }
.mx_Slider_dotActive { .mx_Slider_dotActive {
background-color: $Slider-selection-color; background-color: $slider-selection-color;
} }
.mx_Slider_dotValue { .mx_Slider_dotValue {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: $Slider-background-color; color: $slider-background-color;
} }
// The following is a hack to center the labels without adding // The following is a hack to center the labels without adding

4
res/themes/light/css/_light.scss
View file

@ -263,8 +263,8 @@ $togglesw-on-color: $accent-color;
$togglesw-ball-color: #fff; $togglesw-ball-color: #fff;
// Slider // Slider
$Slider-selection-color: $accent-color; $slider-selection-color: $accent-color;
$Slider-background-color: #c1c9d6; $slider-background-color: #c1c9d6;
$progressbar-color: #000; $progressbar-color: #000;

12
src/FontWatcher.js
View file

@ -23,7 +23,7 @@ export class FontWatcher {
} }
start() { start() {
this._setRootFontSize(SettingsStore.getValue("font_size")); this._setRootFontSize(SettingsStore.getValue("fontSize"));
this._dispatcherRef = dis.register(this._onAction); this._dispatcherRef = dis.register(this._onAction);
} }
@ -37,15 +37,15 @@ export class FontWatcher {
} }
}; };
_setRootFontSize = size => { _setRootFontSize = (size) => {
const min = SettingsStore.getValue("font_size_min"); const min = SettingsStore.getValue("fontSizeMin");
const max = SettingsStore.getValue("font_size_max"); const max = SettingsStore.getValue("fontSizeMax");
const fontSize = Math.max(Math.min(max, size), min); const fontSize = Math.max(Math.min(max, size), min);
if (fontSize != size) { if (fontSize != size) {
SettingsStore.setValue("font_size", null, SettingLevel.Device, fontSize); SettingsStore.setValue("fontSize", null, SettingLevel.Device, fontSize);
} }
document.querySelector(":root").style.fontSize = fontSize + "px"; document.querySelector(":root").style.fontSize = fontSize + "px";
} };
} }

14
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
View file

@ -32,7 +32,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
super(); super();
this.state = { this.state = {
fontSize: SettingsStore.getValue("font_size", null), fontSize: SettingsStore.getValue("fontSize", null),
...this._calculateThemeState(), ...this._calculateThemeState(),
customThemeUrl: "", customThemeUrl: "",
customThemeMessage: {isError: false, text: ""}, customThemeMessage: {isError: false, text: ""},
@ -102,15 +102,15 @@ export default class AppearanceUserSettingsTab extends React.Component {
_onFontSizeChanged = (size) => { _onFontSizeChanged = (size) => {
this.setState({fontSize: size}); this.setState({fontSize: size});
SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, size); SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, size);
}; };
_onValidateFontSize = ({value}) => { _onValidateFontSize = ({value}) => {
console.log({value}); console.log({value});
const parsedSize = parseFloat(value); const parsedSize = parseFloat(value);
const min = SettingsStore.getValue("font_size_min"); const min = SettingsStore.getValue("fontSizeMin");
const max = SettingsStore.getValue("font_size_max"); const max = SettingsStore.getValue("fontSizeMax");
if (isNaN(parsedSize)) { if (isNaN(parsedSize)) {
return {valid: false, feedback: _t("Size must be a number")}; return {valid: false, feedback: _t("Size must be a number")};
@ -123,7 +123,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
}; };
} }
SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, value); SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, value);
return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})}; return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
} }
@ -253,8 +253,8 @@ export default class AppearanceUserSettingsTab extends React.Component {
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div> <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
<Slider <Slider
values={_range( values={_range(
SettingsStore.getValue("font_size_min"), SettingsStore.getValue("fontSizeMin"),
SettingsStore.getValue("font_size_max")+ 2, SettingsStore.getValue("fontSizeMax")+ 2,
2.5, 2.5,
)} )}
value={this.state.fontSize} value={this.state.fontSize}

6
src/settings/Settings.js
View file

@ -165,18 +165,18 @@ export const SETTINGS = {
displayName: _td("Show info about bridges in room settings"), displayName: _td("Show info about bridges in room settings"),
default: false, default: false,
}, },
"font_size": { "fontSize": {
displayName: _td("Font size"), displayName: _td("Font size"),
supportedLevels: LEVELS_ACCOUNT_SETTINGS, supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: 16, default: 16,
controller: new FontSizeController(), controller: new FontSizeController(),
}, },
"font_size_min": { "fontSizeMin": {
displayName: _td("Min font size"), displayName: _td("Min font size"),
supportedLevels: LEVELS_ACCOUNT_SETTINGS, supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: 14, default: 14,
}, },
"font_size_max": { "fontSizeMax": {
displayName: _td("Max font size"), displayName: _td("Max font size"),
supportedLevels: LEVELS_ACCOUNT_SETTINGS, supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: 24, default: 24,